From 2517a8b577fc70e8f277c8b6b11830ae7727ccee Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Tue, 10 May 2022 15:57:21 +0800
Subject: [PATCH] tiptap: fix render table row, col bubble menu

---
 .../client/src/components/tooltip/index.tsx     |  2 +-
 .../tiptap/editor/menus/table/col-bubble.tsx    | 12 ++++++++++--
 .../tiptap/editor/menus/table/row-bubble.tsx    | 17 ++++++++++++-----
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/tooltip/index.tsx b/packages/client/src/components/tooltip/index.tsx
index a7640d9..a1cb24f 100644
--- a/packages/client/src/components/tooltip/index.tsx
+++ b/packages/client/src/components/tooltip/index.tsx
@@ -21,7 +21,7 @@ export const Tooltip: React.FC<IProps> = ({ content, hideOnClick = false, positi
         onMouseLeave={() => {
           toggleVisible(false);
         }}
-        onMouseMove={() => {
+        onMouseDown={() => {
           hideOnClick && toggleVisible(false);
         }}
       >
diff --git a/packages/client/src/tiptap/editor/menus/table/col-bubble.tsx b/packages/client/src/tiptap/editor/menus/table/col-bubble.tsx
index d7000b9..9fbe7b9 100644
--- a/packages/client/src/tiptap/editor/menus/table/col-bubble.tsx
+++ b/packages/client/src/tiptap/editor/menus/table/col-bubble.tsx
@@ -10,7 +10,14 @@ export const TableColBubbleMenu = ({ editor }) => {
   const shouldShow = useCallback(
     ({ node, state }) => {
       if (!editor.isActive(Table.name) || !node || isTableSelected(state.selection)) return false;
-      const gripColumn = node.querySelector('a.grip-column.selected');
+
+      let container = node;
+
+      while (container && !['TD', 'TH'].includes(container.tagName)) {
+        container = container.parentElement;
+      }
+
+      const gripColumn = container && container.querySelector && container.querySelector('a.grip-column.selected');
       return !!gripColumn;
     },
     [editor]
@@ -28,7 +35,7 @@ export const TableColBubbleMenu = ({ editor }) => {
       editor={editor}
       pluginKey="table-col-bubble-menu"
       tippyOptions={{
-        offset: [0, 20],
+        offset: [0, 35],
       }}
       shouldShow={shouldShow}
       getRenderContainer={getRenderContainer}
@@ -53,6 +60,7 @@ export const TableColBubbleMenu = ({ editor }) => {
             size="small"
           />
         </Tooltip>
+
         <Tooltip content="删除当前列" hideOnClick>
           <Button onClick={deleteColumn} icon={<IconDeleteColumn />} type="tertiary" theme="borderless" size="small" />
         </Tooltip>
diff --git a/packages/client/src/tiptap/editor/menus/table/row-bubble.tsx b/packages/client/src/tiptap/editor/menus/table/row-bubble.tsx
index 0ee7dfc..abb4aba 100644
--- a/packages/client/src/tiptap/editor/menus/table/row-bubble.tsx
+++ b/packages/client/src/tiptap/editor/menus/table/row-bubble.tsx
@@ -10,7 +10,14 @@ export const TableRowBubbleMenu = ({ editor }) => {
   const shouldShow = useCallback(
     ({ node, state }) => {
       if (!editor.isActive(Table.name) || !node || isTableSelected(state.selection)) return false;
-      const gripRow = node.querySelector('a.grip-row.selected');
+
+      let container = node;
+
+      while (container && !['TD', 'TH'].includes(container.tagName)) {
+        container = container.parentElement;
+      }
+
+      const gripRow = container && container.querySelector && container.querySelector('a.grip-row.selected');
       return !!gripRow;
     },
     [editor]
@@ -29,21 +36,21 @@ export const TableRowBubbleMenu = ({ editor }) => {
       pluginKey="table-row-bubble-menu"
       tippyOptions={{
         placement: 'left',
-        offset: [0, 20],
+        offset: [0, 30],
       }}
       shouldShow={shouldShow}
       getRenderContainer={getRenderContainer}
     >
       <Space vertical spacing={4}>
-        <Tooltip content="向前插入一行">
+        <Tooltip content="向前插入一行" position="left">
           <Button onClick={addRowBefore} icon={<IconAddRowBefore />} type="tertiary" theme="borderless" size="small" />
         </Tooltip>
 
-        <Tooltip content="向后插入一行">
+        <Tooltip content="向后插入一行" position="left">
           <Button onClick={addRowAfter} icon={<IconAddRowAfter />} type="tertiary" theme="borderless" size="small" />
         </Tooltip>
 
-        <Tooltip content="删除当前行" hideOnClick>
+        <Tooltip content="删除当前行" position="left" hideOnClick>
           <Button onClick={deleteRow} icon={<IconDeleteRow />} type="tertiary" theme="borderless" size="small" />
         </Tooltip>
       </Space>