From b3aff5e9b542f9f47a87281cfd4d18c05b605798 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E6=B2=9B=E9=BA=9F?= <yuchacha250@gmail.com>
Date: Sat, 10 Aug 2024 11:39:46 +0800
Subject: [PATCH 1/3] feat: table-not-insert-table

---
 .../plugins/ComponentPickerPlugin/index.tsx   | 11 +++++--
 .../src/plugins/ToolbarPlugin/index.tsx       | 31 +++++++++++--------
 .../src/LexicalTypeaheadMenuPlugin.tsx        | 25 +++++++++++++--
 packages/lexical/src/index.ts                 |  1 +
 4 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/packages/lexical-playground/src/plugins/ComponentPickerPlugin/index.tsx b/packages/lexical-playground/src/plugins/ComponentPickerPlugin/index.tsx
index 19406089056..f3e49b17ee0 100644
--- a/packages/lexical-playground/src/plugins/ComponentPickerPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/ComponentPickerPlugin/index.tsx
@@ -367,13 +367,18 @@ export default function ComponentPickerMenuPlugin(): JSX.Element {
         options={options}
         menuRenderFn={(
           anchorElementRef,
-          {selectedIndex, selectOptionAndCleanUp, setHighlightedIndex},
+          {
+            selectedIndex,
+            selectOptionAndCleanUp,
+            setHighlightedIndex,
+            options: menuOptions,
+          },
         ) =>
-          anchorElementRef.current && options.length
+          anchorElementRef.current && menuOptions.length
             ? ReactDOM.createPortal(
                 <div className="typeahead-popover component-picker-menu">
                   <ul>
-                    {options.map((option, i: number) => (
+                    {menuOptions.map((option, i: number) => (
                       <ComponentPickerMenuItem
                         index={i}
                         isSelected={selectedIndex === i}
diff --git a/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx b/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx
index b32d841c7ec..f38f98b14c7 100644
--- a/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx
@@ -547,6 +547,7 @@ export default function ToolbarPlugin({
   const [codeLanguage, setCodeLanguage] = useState<string>('');
   const [isEditable, setIsEditable] = useState(() => editor.isEditable());
   const [isImageCaption, setIsImageCaption] = useState(false);
+  const [isLocatedTable, setIsLocatedTable] = useState<boolean>(false);
 
   const $updateToolbar = useCallback(() => {
     const selection = $getSelection();
@@ -599,8 +600,10 @@ export default function ToolbarPlugin({
 
       const tableNode = $findMatchingParent(node, $isTableNode);
       if ($isTableNode(tableNode)) {
+        setIsLocatedTable(true);
         setRootType('table');
       } else {
+        setIsLocatedTable(false);
         setRootType('root');
       }
 
@@ -1137,19 +1140,21 @@ export default function ToolbarPlugin({
                   <i className="icon diagram-2" />
                   <span className="text">Excalidraw</span>
                 </DropDownItem>
-                <DropDownItem
-                  onClick={() => {
-                    showModal('Insert Table', (onClose) => (
-                      <InsertTableDialog
-                        activeEditor={activeEditor}
-                        onClose={onClose}
-                      />
-                    ));
-                  }}
-                  className="item">
-                  <i className="icon table" />
-                  <span className="text">Table</span>
-                </DropDownItem>
+                {!isLocatedTable && (
+                  <DropDownItem
+                    onClick={() => {
+                      showModal('Insert Table', (onClose) => (
+                        <InsertTableDialog
+                          activeEditor={activeEditor}
+                          onClose={onClose}
+                        />
+                      ));
+                    }}
+                    className="item">
+                    <i className="icon table" />
+                    <span className="text">Table</span>
+                  </DropDownItem>
+                )}
                 <DropDownItem
                   onClick={() => {
                     showModal('Insert Poll', (onClose) => (
diff --git a/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx b/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx
index af59b530f59..21e18162009 100644
--- a/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx
+++ b/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx
@@ -14,7 +14,9 @@ import type {
 } from './shared/LexicalMenu';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {$isTableNode} from '@lexical/table';
 import {
+  $findMatchingParent,
   $getSelection,
   $isRangeSelection,
   $isTextNode,
@@ -26,7 +28,7 @@ import {
   RangeSelection,
   TextNode,
 } from 'lexical';
-import {useCallback, useEffect, useState} from 'react';
+import {useCallback, useEffect, useMemo, useState} from 'react';
 import * as React from 'react';
 
 import {LexicalMenu, MenuOption, useMenuAnchorRef} from './shared/LexicalMenu';
@@ -220,6 +222,7 @@ export function LexicalTypeaheadMenuPlugin<TOption extends MenuOption>({
 }: TypeaheadMenuPluginProps<TOption>): JSX.Element | null {
   const [editor] = useLexicalComposerContext();
   const [resolution, setResolution] = useState<MenuResolution | null>(null);
+  const [isLocatedTable, setIsLocatedTable] = useState<boolean>(false);
   const anchorElementRef = useMenuAnchorRef(
     resolution,
     setResolution,
@@ -274,6 +277,17 @@ export function LexicalTypeaheadMenuPlugin<TOption extends MenuOption>({
             range,
             editorWindow,
           );
+
+          const tableNode = $findMatchingParent(
+            selection.anchor.getNode(),
+            $isTableNode,
+          );
+          if (tableNode) {
+            setIsLocatedTable(true);
+          } else {
+            setIsLocatedTable(false);
+          }
+
           if (isRangePositioned !== null) {
             startTransition(() =>
               openTypeahead({
@@ -302,13 +316,20 @@ export function LexicalTypeaheadMenuPlugin<TOption extends MenuOption>({
     openTypeahead,
   ]);
 
+  const internalOptions = useMemo(() => {
+    if (isLocatedTable) {
+      return options.filter((option) => option.key !== 'Table');
+    }
+    return options;
+  }, [isLocatedTable, options]);
+
   return resolution === null || editor === null ? null : (
     <LexicalMenu
       close={closeTypeahead}
       resolution={resolution}
       editor={editor}
       anchorElementRef={anchorElementRef}
-      options={options}
+      options={internalOptions}
       menuRenderFn={menuRenderFn}
       shouldSplitNodeWithQuery={true}
       onSelectOption={onSelectOption}
diff --git a/packages/lexical/src/index.ts b/packages/lexical/src/index.ts
index 5ef926b5afc..25c96bf4375 100644
--- a/packages/lexical/src/index.ts
+++ b/packages/lexical/src/index.ts
@@ -158,6 +158,7 @@ export {
   $applyNodeReplacement,
   $cloneWithProperties,
   $copyNode,
+  $findMatchingParent,
   $getAdjacentNode,
   $getEditor,
   $getNearestNodeFromDOMNode,

From ba802c84772854566b4fb70e4ce956b16c35a2af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E6=B2=9B=E9=BA=9F?= <yuchacha250@gmail.com>
Date: Sat, 10 Aug 2024 14:48:29 +0800
Subject: [PATCH 2/3] feat: table node prevent insert table

---
 .../lexical-react/src/LexicalTablePlugin.ts    | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/lexical-react/src/LexicalTablePlugin.ts b/packages/lexical-react/src/LexicalTablePlugin.ts
index 2ae1dfd94f7..7e5f4589280 100644
--- a/packages/lexical-react/src/LexicalTablePlugin.ts
+++ b/packages/lexical-react/src/LexicalTablePlugin.ts
@@ -36,7 +36,11 @@ import {
 } from '@lexical/utils';
 import {
   $createParagraphNode,
+  $findMatchingParent,
   $getNodeByKey,
+  $getPreviousSelection,
+  $getSelection,
+  $isRangeSelection,
   $isTextNode,
   COMMAND_PRIORITY_EDITOR,
 } from 'lexical';
@@ -71,6 +75,20 @@ export function TablePlugin({
             Number(columns),
             includeHeaders,
           );
+
+          const selection = $getSelection() || $getPreviousSelection();
+
+          if ($isRangeSelection(selection)) {
+            const {anchor, focus} = selection;
+            const focusNode = focus.getNode();
+            const anchorNode = anchor.getNode();
+            if (
+              $findMatchingParent(focusNode, $isTableRowNode) ||
+              $findMatchingParent(anchorNode, $isTableRowNode)
+            ) {
+              return false;
+            }
+          }
           $insertNodeToNearestRoot(tableNode);
 
           const firstDescendant = tableNode.getFirstDescendant();

From 7135d6e39895f1f87734e016cf91db6689b582c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E6=B2=9B=E9=BA=9F?= <yuchacha250@gmail.com>
Date: Sat, 10 Aug 2024 17:29:53 +0800
Subject: [PATCH 3/3] test: create case for supplementary table insert table

---
 .../__tests__/e2e/Tables.spec.mjs             | 59 +++++--------------
 1 file changed, 14 insertions(+), 45 deletions(-)

diff --git a/packages/lexical-playground/__tests__/e2e/Tables.spec.mjs b/packages/lexical-playground/__tests__/e2e/Tables.spec.mjs
index 694f9c86e4b..e7de6a82786 100644
--- a/packages/lexical-playground/__tests__/e2e/Tables.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/Tables.spec.mjs
@@ -24,6 +24,7 @@ import {
   copyToClipboard,
   deleteTableColumns,
   deleteTableRows,
+  expect,
   focusEditor,
   html,
   initialize,
@@ -246,62 +247,30 @@ test.describe.parallel('Tables', () => {
       });
     });
 
-    test(`Can exit the first cell of a nested table into the parent table cell`, async ({
+    test('Can not table node insert table cell', async ({
       page,
       isPlainText,
       isCollab,
     }) => {
       await initialize({isCollab, page});
       test.skip(isPlainText);
-
       await focusEditor(page);
       await insertTable(page, 2, 2);
-      await insertTable(page, 2, 2);
-
-      await assertSelection(page, {
-        anchorOffset: 0,
-        anchorPath: [1, 0, 0, 1, 0, 0, 0],
-        focusOffset: 0,
-        focusPath: [1, 0, 0, 1, 0, 0, 0],
-      });
-
-      await moveLeft(page, 1);
-      await assertSelection(page, {
-        anchorOffset: 0,
-        anchorPath: [1, 0, 0, 0],
-        focusOffset: 0,
-        focusPath: [1, 0, 0, 0],
-      });
     });
+  });
 
-    test(`Can exit the last cell of a nested table into the parent table cell`, async ({
-      page,
-      isPlainText,
-      isCollab,
-    }) => {
-      await initialize({isCollab, page});
-      test.skip(isPlainText);
-
-      await focusEditor(page);
-      await insertTable(page, 2, 2);
-      await insertTable(page, 2, 2);
-
-      await moveRight(page, 3);
-      await assertSelection(page, {
-        anchorOffset: 0,
-        anchorPath: [1, 0, 0, 1, 1, 1, 0],
-        focusOffset: 0,
-        focusPath: [1, 0, 0, 1, 1, 1, 0],
-      });
+  test('After the cursor is positioned on the table, the toolbar does not display the inserted table', async ({
+    page,
+    isPlainText,
+    isCollab,
+  }) => {
+    await initialize({isCollab, page});
+    test.skip(isPlainText);
+    await focusEditor(page);
+    await insertTable(page, 2, 2);
+    const element = await page.$('.toolbar-item[aria-label="Insert table"]');
 
-      await moveRight(page, 1);
-      await assertSelection(page, {
-        anchorOffset: 0,
-        anchorPath: [1, 0, 0, 2],
-        focusOffset: 0,
-        focusPath: [1, 0, 0, 2],
-      });
-    });
+    expect(element).toEqual(null);
   });
 
   test(`Can insert a paragraph after a table, that is the last node, with the "Enter" key`, async ({