diff --git a/.changeset/cuddly-toes-hang.md b/.changeset/cuddly-toes-hang.md new file mode 100644 index 0000000000..c577decd56 --- /dev/null +++ b/.changeset/cuddly-toes-hang.md @@ -0,0 +1,5 @@ +--- +'@udecode/plate-tabbable': patch +--- + +Disable tabbable when editor is read-only diff --git a/packages/tabbable/src/TabbableEffects.tsx b/packages/tabbable/src/TabbableEffects.tsx index 4e1ca424b4..262910ddc6 100644 --- a/packages/tabbable/src/TabbableEffects.tsx +++ b/packages/tabbable/src/TabbableEffects.tsx @@ -5,6 +5,7 @@ import { getPluginOptions, toDOMNode, toSlateNode, + useEditorReadOnly, useEditorState, } from '@udecode/plate-common'; import { Path } from 'slate'; @@ -16,10 +17,13 @@ import { TabbableEntry, TabbablePlugin } from './types'; export function TabbableEffects() { const editor = useEditorState(); + const readOnly = useEditorReadOnly(); const { query, globalEventListener, insertTabbableEntries, isTabbable } = getPluginOptions(editor, KEY_TABBABLE); useEffect(() => { + if (readOnly) return; + const editorDOMNode = toDOMNode(editor, editor); if (!editorDOMNode) return; @@ -123,7 +127,14 @@ export function TabbableEffects() { eventListenerNode.addEventListener('keydown', handler, true); return () => eventListenerNode.removeEventListener('keydown', handler, true); - }, [editor, globalEventListener, isTabbable, insertTabbableEntries, query]); + }, [ + readOnly, + editor, + globalEventListener, + isTabbable, + insertTabbableEntries, + query, + ]); return null; }