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