ianstormtaylor
Can't use nested content editable (bad hasEditableTarget implementation)
Do you want to request a feature or report a bug?
Bug.
What's the current behavior?
Nesting a contenteditable within a Slate editor makes that editable not actually editable (Slate hijacks keypresses).
In my particular use case, I'm trying to use CodeMirror within a void node (for reasons, I don't want to manage the code inside the Slate editor, just have a void node).
https://codesandbox.io/s/slate-reproductions-forked-4xkxb?file=/index.js
Slate: 0.59.0 Browser: Chrome / Safari / Firefox / Edge OS: Mac / Windows / Linux / iOS / Android
What's the expected behavior?
Slate shouldn't be hijacking keypresses inside void nodes.
Where is the bug?
The actual issue is here: https://github.com/ianstormtaylor/slate/blob/4c3e737dda95d5ab67a94af903b25512d926c7fe/packages/slate-react/src/plugin/react-editor.ts#L147-L182
The ReactEditor uses this function to determine whether or not it should hijack keypresses for the given target using this function. This function then checks:
- Is the event target a descendant of the slate editor? (Yes)
- Is the event target content editable? (Yes*)
(*) This is usually NOT true inside void nodes, but comes up here because we're doing a nested contenteditable.
The fix I'm using for now is actually just setting the data-slate-editor attribute on the node that wraps the contenteditable so that the first check above fails (Is the event target a descendant of the slate editor).
Not sure if this is a good solution for a "real" fix. Do children of voids count as being "within" the editor?
I stuck with the same problem, need to create void block with contenteditable. Currently fixed using data-slate-editor. Is there a better solution?
