Deleting the selected text of a document may also delete unselected images

[dakkanner]

Expected behavior.

When I highlight and delete selected text in a document, it should only delete that text, not images that were not selected.

Actual behavior.

Selecting and deleting all the text in a document will also delete images, even if they were not selected.

Steps to reproduce the problem.

1. Create a new document.
2. Add text to the document.
3. Add images before and/or after the text in their own paragraphs. (Update: It also occurs with tables. I suspect this would happen for all HTML elements.)
4. Select all of text using the mouse, making sure to exclude the images. Empty lines do not need to be selected.
5. Press the backspace key or the delete key or type a character on the keyboard.
6. Observe that the images are also deleted.

Editor version.

Reproducable on 3.0.6 and the version at https://froala.com/wysiwyg-editor/examples/document-ready/ on 2020-05-29. Not reproducable on 2.9.6.

OS.

Windows 10 Pro 1909 18363.836

Browser.

Google Chrome 83.0.4103.61 (64-bit) Mozilla Firefox 76.0.1 (64-bit)

Recording.

Relates to, but is seemingly not the same as https://github.com/froala/wysiwyg-editor/issues/3931

[shnigi]

This is probably an issue I have sent emails back and forth a few times. Same thing happens if you create a new styled html element, then highlight the text inside the element and delete text it also deletes the container which shouldn't happen in my opinion. So far I have not found a proper solution to this myself. I will insert the email discussion I had with the tech support here:

__ Happy to help. We don't have this feature by default. The thing you could do is to make the div element non-editable and use the span element inside. This way, you will preserve the div element from being deleted but if you remove the last span letter, the whole span element will be removed and you'll not be able to type anymore.

Please take a look at this workaround: https://jsfiddle.net/dejan_m/jnq46sL8/2/. I'm listening to the keydown event and preserve the deleting of the first letter of this span (I've added an empty space entity).

I look forward to your response.

Okay I see, thank you. This doesn't unfortunately offer a solution for us. I have to think about a different approach. It might be weird for content creators if they append a custom html element to the editor and the element is then deleted if the text is deleted inside the element.

I'm sorry to hear that, Maybe the possible solution would be combining two Froala instances- one for general content and the second one for the inserted content. The second instance can be initialized on inserted content. That way, only the inner content od the inserted element could be deleted. Can you please describe your scenario with more details? Maybe we could find a much better workaround.

Thanks, Dejan

Hi, so I have created a custom plugin for Froala which opens a modal where users can select different kinds of HTML elements that are predefined. The HTML element is then inserted into the editor with predefined css styles. One element is for example a simple div with an icon and text content. Here is the html I am inserting:

Example text

I have defined styles for box intro so the div is green and about 200px tall. If the user edits my "Example text" so that it is completely deleted then the whole element disappears and the user has to insert it again. This might be confusing for content creators if the element gets deleted when they actually try to edit the heading. Only workaround I have found so far is to write a new heading after the Example text and then delete the Example text from the new heading. This is something that the user has to figure out themselves. So I am looking for a way to keep the element in the view unless they actually want to delete it.

My apologies for the delay. In this example, I'm listening to the click event and initializing the popup editor on the custom paragraph: https://jsfiddle.net/dejan_m/jp8nLk40/. Even in the case of non-editable elements, after surrounding content is selected, the element can be deleted. You should definitely consider the use of the separate editor and initialize it on custom elements. That is probably the only way you will actually preserve custom elements from being deleted. My apologies for not being able to provide a better solution for your scenario. Please let me know if you have any further questions.

Kind regards, Dejan

Thanks for your reply.

I have to look into this idea of creating a separate editor, but I think it might be impossible to implement in our case because the pre styled HTML element we are injecting is working as a template which users can edit. Users have to be able to upload images and edit fonts inside the element so we basically need all Froala features enabled inside the element. The only problem is that if a user accidentally or on purpose deletes the pre appended text content inside the element then the element gets deleted as well.

Hello Niki,

If the user can only edit the content they are inserting (ie templates from custom modal), maybe you should consider initializing a full-featured editor on your template. In this example, I'm using the inline toolbar as a more common scenario for editing but you can comment out that option. Please take a look: https://jsfiddle.net/dejan_m/jp8nLk40/2/.

Regards, Dejan

Hi, thanks for the effort trying to solve this problem. However this is still not a usable solution. For example if we inject a html-email template which user can then edit the elements get deleted if text content is deleted. For example we have a div with custom styles in the heading and if the heading text is removed the whole element disappears. I would like to keep the element visible unless it is deleted underneath with backspace or from top with delete. Or the third option would be double backspace inside the element. Thanks,

I'm very sorry that none of the suggested workarounds can work in your scenario. Please let me know if you have any additional questions.

Kind regards, Dejan __

[P1rate01]

What?