Description
Problem
The default triple-click behaviour in Chrome and Safari is to produce a hanging range. In a plain contenteditable, this means that pressing backspace or cut following a triple-click removes the entire block, leaving no empty paragraph.
Slate doesn't behave like this. Due to custom triple-click logic in editable.tsx, triple-clicking selects the entire block but does not produce a hanging range. This produces a flicker effect when triple-clicking that is present in Chrome and especially pronounced in Safari, since hanging ranges are styled differently to non-hanging ranges.
In addition, because the default behaviour of editor.delete is to unhang hanging ranges (due to hanging = false being the default), pressing backspace fails to remove the entire block even if the triple-click logic is disabled. Instead, the contents of the block are removed, leaving the block empty.
recording.mp4
Solution
In Chrome and Safari, where hanging ranges on triple-click are the default, I expect this to happen in Slate. In addition, I expect pressing backspace while the range is hanging to remove the entire block. I'm not sure if the default behaviour of editor.delete should be changed from hanging = false to hanging = true. This would depend on what the valid use cases are for ignoring a hanging range when deleting text.
In Firefox, triple-clicking does not produce a hanging range. I suggest we respect this default, perhaps by checking IS_FIREFOX in the editable.tsx logic.
Context
Producing a hanging range on triple-click has additional side-effects beyond just deleting blocks. For example, we may see a return of #3871, where triple-clicking causes the block below to show as active in the toolbar. If any issues like this arise, I think they should be solved without modifying the DOM selection. For example, the toolbar issue could be solved by changing the toolbar logic to check for active blocks in Editor.unhangRange(editor, editor.selection) rather than editor.selection.