Wysiwyg-editor: froala allows for contenteditable=false elements to be highlighted and deleted

[achambers]

Expected behavior.

1. Highlight partial text within contenteditable="false" element
2. Click backspace
3. Selected text is not deleted

Actual behavior.

Text within contenteditable="false" element is deleted.

Steps to reproduce the problem.

See above

Extra context

This comes about after changing our local css to allow selection of elements with contenteditable="false" (#2435 ). When this is the case, froala prevents the default functionality whereby the browser does not allow deleting of the element content.

This happens in in the _backspace function in the following code:

 function _backspace (e) {
   // There is no selection.
   if (editor.selection.isCollapsed()) {
     if (editor.helpers.isIOS()) {
       ios_snapshot = editor.snapshot.get();
     }
     else {
       editor.cursor.backspace();
       e.preventDefault();
       e.stopPropagation();
     }
   }

   // We have text selected.
   else {
     e.preventDefault(); // <------- This "else" is where froala overrides default functionality
     e.stopPropagation();

     editor.selection.remove();
     editor.html.fillEmptyBlocks();
   }

   editor.placeholder.refresh();
 }

OS.

macOS Sierra - v10.12.6

Browser.

Chrome Version 63.0.3239.84

[achambers]

This seems like a bug whereby froala simply isn't honouring contenteditable="false". Please can you advise on this?

[stefanneculai]

contenteditable="false" can be deleted/copied/cut as a whole. We consider this as being the correct behavior. Here is a jsFiddle with the default browser behavior: https://jsfiddle.net/froala/gd9q09kk/.

[achambers]

@stefanneculai Sure, it can be deleted/copied/cut as a whole. But the browser's default does not let you select a partial piece of said element and delete it. Froala does allow this which is not consistent with browser default behaviour and should not be allowed.

See your fiddle modified to include froala. Select partial text within the contenteditable="false" element and click delete. The browser would not allow you to delete that text.

https://jsfiddle.net/5hdp0k5v/2/

[achambers]

@stefanneculai Would appreciate your thoughts on this when you get a chance as I believe this issue warrants re-opening.

[achambers]

@stefanneculai Happy New Year. Any further thoughts or comments on this? It really feels like this is something that should be reopened.

[OasisLiveForever]

I agree with @stefanneculai, Froala should not let you select a partial piece of not editable content element and delete it.

Are you going to fix this bug in future releases?