From 711debcdd57d33e1e27a3453cdfbc4cf2e08cf42 Mon Sep 17 00:00:00 2001
From: neysanfoo <neysanfoo@gmail.com>
Date: Sun, 6 Oct 2024 13:05:48 +0800
Subject: [PATCH 1/2] no table hoveractions in readonly

---
 .../plugins/TableHoverActionsPlugin/index.tsx | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx b/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx
index e7f186bc57c..73705baa241 100644
--- a/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx
@@ -7,6 +7,7 @@
  */
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
 import {
   $getTableColumnIndexFromTableCellNode,
   $getTableRowIndexFromTableCellNode,
@@ -32,8 +33,9 @@ function TableHoverActionsContainer({
   anchorElem,
 }: {
   anchorElem: HTMLElement;
-}): JSX.Element {
+}): JSX.Element | null {
   const [editor] = useLexicalComposerContext();
+  const isEditable = useLexicalEditable();
   const [isShownRow, setShownRow] = useState<boolean>(false);
   const [isShownColumn, setShownColumn] = useState<boolean>(false);
   const [shouldListenMouseMove, setShouldListenMouseMove] =
@@ -44,6 +46,9 @@ function TableHoverActionsContainer({
 
   const debouncedOnMouseMove = useDebounce(
     (event: MouseEvent) => {
+      if (!isEditable) {
+        return;
+      }
       const {isOutside, tableDOMNode} = getMouseInfo(event);
 
       if (isOutside) {
@@ -151,6 +156,9 @@ function TableHoverActionsContainer({
       editor.registerMutationListener(
         TableNode,
         (mutations) => {
+          if (!isEditable) {
+            return;
+          }
           editor.getEditorState().read(() => {
             for (const [key, type] of mutations) {
               switch (type) {
@@ -173,9 +181,12 @@ function TableHoverActionsContainer({
         {skipInitialization: false},
       ),
     );
-  }, [editor]);
+  }, [editor, isEditable]);
 
   const insertAction = (insertRow: boolean) => {
+    if (!isEditable) {
+      return;
+    }
     editor.update(() => {
       if (tableDOMNodeRef.current) {
         const maybeTableNode = $getNearestNodeFromDOMNode(
@@ -193,6 +204,10 @@ function TableHoverActionsContainer({
     });
   };
 
+  if (!isEditable) {
+    return null;
+  }
+
   return (
     <>
       {isShownRow && (
@@ -246,8 +261,12 @@ export default function TableHoverActionsPlugin({
 }: {
   anchorElem?: HTMLElement;
 }): React.ReactPortal | null {
-  return createPortal(
-    <TableHoverActionsContainer anchorElem={anchorElem} />,
-    anchorElem,
-  );
+  const isEditable = useLexicalEditable();
+
+  return isEditable
+    ? createPortal(
+        <TableHoverActionsContainer anchorElem={anchorElem} />,
+        anchorElem,
+      )
+    : null;
 }

From 190ff50a500333f101e36a8a7b07575189af9c24 Mon Sep 17 00:00:00 2001
From: neysanfoo <neysanfoo@gmail.com>
Date: Mon, 14 Oct 2024 01:03:56 +0800
Subject: [PATCH 2/2] revert iseditable checks

---
 .../src/plugins/TableHoverActionsPlugin/index.tsx     | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx b/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx
index 73705baa241..ecdb9dd9c97 100644
--- a/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx
@@ -46,9 +46,6 @@ function TableHoverActionsContainer({
 
   const debouncedOnMouseMove = useDebounce(
     (event: MouseEvent) => {
-      if (!isEditable) {
-        return;
-      }
       const {isOutside, tableDOMNode} = getMouseInfo(event);
 
       if (isOutside) {
@@ -156,9 +153,6 @@ function TableHoverActionsContainer({
       editor.registerMutationListener(
         TableNode,
         (mutations) => {
-          if (!isEditable) {
-            return;
-          }
           editor.getEditorState().read(() => {
             for (const [key, type] of mutations) {
               switch (type) {
@@ -181,12 +175,9 @@ function TableHoverActionsContainer({
         {skipInitialization: false},
       ),
     );
-  }, [editor, isEditable]);
+  }, [editor]);
 
   const insertAction = (insertRow: boolean) => {
-    if (!isEditable) {
-      return;
-    }
     editor.update(() => {
       if (tableDOMNodeRef.current) {
         const maybeTableNode = $getNearestNodeFromDOMNode(