diff --git a/.changeset/hot-seahorses-smile.md b/.changeset/hot-seahorses-smile.md new file mode 100644 index 000000000..a4bfe3a24 --- /dev/null +++ b/.changeset/hot-seahorses-smile.md @@ -0,0 +1,5 @@ +--- +'slate-react': patch +--- + +Don't native insert inside blocks with whitespace="pre" containing tab chars to work around https://bugs.chromium.org/p/chromium/issues/detail?id=1219139 diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx index 3d22cfa80..3adfc44fb 100644 --- a/packages/slate-react/src/components/editable.tsx +++ b/packages/slate-react/src/components/editable.tsx @@ -380,11 +380,15 @@ export const Editable = (props: EditableProps) => { const [node, offset] = ReactEditor.toDOMPoint(editor, anchor) const anchorNode = node.parentElement?.closest('a') - if (anchorNode && ReactEditor.hasDOMNode(editor, anchorNode)) { - const { document } = ReactEditor.getWindow(editor) + const window = ReactEditor.getWindow(editor) + if ( + native && + anchorNode && + ReactEditor.hasDOMNode(editor, anchorNode) + ) { // Find the last text node inside the anchor. - const lastText = document + const lastText = window?.document .createTreeWalker(anchorNode, NodeFilter.SHOW_TEXT) .lastChild() as DOMText | null @@ -392,6 +396,23 @@ export const Editable = (props: EditableProps) => { native = false } } + + // Chrome has issues with the presence of tab characters inside elements with whiteSpace = 'pre' + // causing abnormal insert behavior: https://bugs.chromium.org/p/chromium/issues/detail?id=1219139 + if ( + native && + node.parentElement && + window?.getComputedStyle(node.parentElement)?.whiteSpace === 'pre' + ) { + const block = Editor.above(editor, { + at: anchor.path, + match: n => Editor.isBlock(editor, n), + }) + + if (block && Node.string(block[0]).includes('\t')) { + native = false + } + } } // COMPAT: For the deleting forward/backward input types we don't want