diff --git a/.changeset/clean-rats-raise.md b/.changeset/clean-rats-raise.md new file mode 100644 index 0000000000..6782c994fd --- /dev/null +++ b/.changeset/clean-rats-raise.md @@ -0,0 +1,5 @@ +--- +'slate-react': minor +--- + +Changed behaviour of ReactEditor.findDocumentOrShadowRoot. It returns shadow root or document without checking for the existence of the getSelection method. diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx index 74a13af381..1b6f9a3254 100644 --- a/packages/slate-react/src/components/editable.tsx +++ b/packages/slate-react/src/components/editable.tsx @@ -36,6 +36,7 @@ import { DOMText, getActiveElement, getDefaultView, + getSelection, isDOMElement, isDOMNode, isPlainTextOnlyPaste, @@ -231,7 +232,7 @@ export const Editable = (props: EditableProps) => { const root = ReactEditor.findDocumentOrShadowRoot(editor) const { activeElement } = root const el = ReactEditor.toDOMNode(editor, editor) - const domSelection = root.getSelection() + const domSelection = getSelection(root) if (activeElement === el) { state.latestElement = activeElement @@ -308,7 +309,7 @@ export const Editable = (props: EditableProps) => { // Make sure the DOM selection state is in sync. const { selection } = editor const root = ReactEditor.findDocumentOrShadowRoot(editor) - const domSelection = root.getSelection() + const domSelection = getSelection(root) if ( !domSelection || @@ -1090,7 +1091,7 @@ export const Editable = (props: EditableProps) => { // editable element no longer has focus. Refer to: // https://stackoverflow.com/questions/12353247/force-contenteditable-div-to-stop-accepting-input-after-it-loses-focus-under-web if (IS_WEBKIT) { - const domSelection = root.getSelection() + const domSelection = getSelection(root) domSelection?.removeAllRanges() } diff --git a/packages/slate-react/src/plugin/react-editor.ts b/packages/slate-react/src/plugin/react-editor.ts index 9485e9df21..5c1d63dae8 100644 --- a/packages/slate-react/src/plugin/react-editor.ts +++ b/packages/slate-react/src/plugin/react-editor.ts @@ -18,6 +18,7 @@ import { DOMSelection, DOMStaticRange, DOMText, + getSelection, hasShadowRoot, isDOMElement, isDOMNode, @@ -280,7 +281,7 @@ export const ReactEditor: ReactEditorInterface = { deselect: editor => { const { selection } = editor const root = ReactEditor.findDocumentOrShadowRoot(editor) - const domSelection = root.getSelection() + const domSelection = getSelection(root) if (domSelection && domSelection.rangeCount > 0) { domSelection.removeAllRanges() @@ -295,10 +296,7 @@ export const ReactEditor: ReactEditorInterface = { const el = ReactEditor.toDOMNode(editor, editor) const root = el.getRootNode() - if ( - (root instanceof Document || root instanceof ShadowRoot) && - root.getSelection != null - ) { + if (root instanceof Document || root instanceof ShadowRoot) { return root } @@ -437,7 +435,7 @@ export const ReactEditor: ReactEditorInterface = { if (root.activeElement !== el) { // Ensure that the DOM selection state is set to the editor's selection if (editor.selection && root instanceof Document) { - const domSelection = root.getSelection() + const domSelection = getSelection(root) const domRange = ReactEditor.toDOMRange(editor, editor.selection) domSelection?.removeAllRanges() domSelection?.addRange(domRange) diff --git a/packages/slate-react/src/utils/dom.ts b/packages/slate-react/src/utils/dom.ts index ea3d898061..32f53975ee 100644 --- a/packages/slate-react/src/utils/dom.ts +++ b/packages/slate-react/src/utils/dom.ts @@ -274,6 +274,16 @@ export const getClipboardData = ( return dataTransfer } +/** + * Get the dom selection from Shadow Root if possible, otherwise from the document + */ +export const getSelection = (root: Document | ShadowRoot): Selection | null => { + if (root.getSelection != null) { + return root.getSelection() + } + return document.getSelection() +} + /** * Check whether a mutation originates from a editable element inside the editor. */