From 7fe41f156614453479cb9ea649fe5665b616d3a7 Mon Sep 17 00:00:00 2001 From: Mikel Canovas Date: Wed, 31 Mar 2021 15:33:28 -0700 Subject: [PATCH] Fix error when trying to grab selection of a void node while read only (#3894) * fix(react-editor): text node spacer can be non-existant if editor is in readonly mode * v0.59.1 * Revert "v0.59.1" This reverts commit 58cb7f1d61e81788e0257bace9be59bc47be8851. * Update react-editor.ts * Update react-editor.ts * Create rude-lemons-crash.md Co-authored-by: Ian Storm Taylor --- .changeset/rude-lemons-crash.md | 5 +++++ .../slate-react/src/plugin/react-editor.ts | 19 ++++++++++++------- 2 files changed, 17 insertions(+), 7 deletions(-) create mode 100644 .changeset/rude-lemons-crash.md diff --git a/.changeset/rude-lemons-crash.md b/.changeset/rude-lemons-crash.md new file mode 100644 index 000000000..6a635f721 --- /dev/null +++ b/.changeset/rude-lemons-crash.md @@ -0,0 +1,5 @@ +--- +'slate-react': patch +--- + +Fixed an error that happened when selecting void nodes in a read-only editor. diff --git a/packages/slate-react/src/plugin/react-editor.ts b/packages/slate-react/src/plugin/react-editor.ts index 57c0ea949..b472ba500 100644 --- a/packages/slate-react/src/plugin/react-editor.ts +++ b/packages/slate-react/src/plugin/react-editor.ts @@ -478,14 +478,19 @@ export const ReactEditor = { } else if (voidNode) { // For void nodes, the element with the offset key will be a cousin, not an // ancestor, so find it by going down from the nearest void parent. - leafNode = voidNode.querySelector('[data-slate-leaf]')! - textNode = leafNode.closest('[data-slate-node="text"]')! - domNode = leafNode - offset = domNode.textContent!.length - domNode.querySelectorAll('[data-slate-zero-width]').forEach(el => { - offset -= el.textContent!.length - }) + + // COMPAT: In read-only editors the leaf is not rendered. + if (!leafNode) { + offset = 1 + } else { + textNode = leafNode.closest('[data-slate-node="text"]')! + domNode = leafNode + offset = domNode.textContent!.length + domNode.querySelectorAll('[data-slate-zero-width]').forEach(el => { + offset -= el.textContent!.length + }) + } } // COMPAT: If the parent node is a Slate zero-width space, editor is