From 07669dca4b0641506ca857bd781c460dae7606a9 Mon Sep 17 00:00:00 2001 From: Ryan Mitts Date: Sun, 20 Mar 2022 04:04:33 -0700 Subject: [PATCH] When resolving a slate Point from a DOM selection (toSlatePoint), consider that a node is only void if it's within the same editor that is resolving the Point. (#4885) If you have a nested editor setup. For example, one editor has a void node that contains another editor. In this case, a resolution of a selection by the nested editor previously would consider that the selection is for a void node since an ancestor void node does exist. However, this selection is only a void node in the context of this editor if the ancestor void node is contained in the editor. --- .changeset/fuzzy-teachers-develop.md | 7 +++++++ packages/slate-react/src/plugin/react-editor.ts | 11 ++++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 .changeset/fuzzy-teachers-develop.md diff --git a/.changeset/fuzzy-teachers-develop.md b/.changeset/fuzzy-teachers-develop.md new file mode 100644 index 000000000..772a16c53 --- /dev/null +++ b/.changeset/fuzzy-teachers-develop.md @@ -0,0 +1,7 @@ +--- +'slate-react': patch +--- + +toSlatePoint should not consider a selection within a void node if the void node isn't in the editor itself. + +Prior to this fix, a nested Slate editor inside a void node in a parent editor would not allow you to start typing text in a blank editor state correctly. After the first character insertion, the selection would jump back to the start of the nested editor. diff --git a/packages/slate-react/src/plugin/react-editor.ts b/packages/slate-react/src/plugin/react-editor.ts index 83f2f2eda..83a429f99 100644 --- a/packages/slate-react/src/plugin/react-editor.ts +++ b/packages/slate-react/src/plugin/react-editor.ts @@ -484,7 +484,16 @@ export const ReactEditor = { let offset = 0 if (parentNode) { - const voidNode = parentNode.closest('[data-slate-void="true"]') + const editorEl = ReactEditor.toDOMNode(editor, editor) + const potentialVoidNode = parentNode.closest('[data-slate-void="true"]') + // Need to ensure that the closest void node is actually a void node + // within this editor, and not a void node within some parent editor. This can happen + // if this editor is within a void node of another editor ("nested editors", like in + // the "Editable Voids" example on the docs site). + const voidNode = + potentialVoidNode && editorEl.contains(potentialVoidNode) + ? potentialVoidNode + : null let leafNode = parentNode.closest('[data-slate-leaf]') let domNode: DOMElement | null = null