From d87bc706405209708469f5b78b9dde58e865cbc7 Mon Sep 17 00:00:00 2001
From: Joe Anderson <joe@mousetrapped.co.uk>
Date: Mon, 2 Oct 2023 15:59:36 +0100
Subject: [PATCH] Disable tabbable when editor is read-only

---
 .changeset/cuddly-toes-hang.md            |  5 +++++
 packages/tabbable/src/TabbableEffects.tsx | 13 ++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/cuddly-toes-hang.md

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<TabbablePlugin>(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;
 }