优化InsertAutocomplete显示逻辑 (#15)

* 优化InsertAutocomplete显示逻辑

* 修复点击table以外区域不能取消显示TableAttr的bug

* 修复点击table以外区域不能取消显示TableAttr的bug

* 优化FloatBar与TableAttr显示逻辑

src/MarkdownEditor/editor/elements/table.tsx

@@ -1,6 +1,12 @@
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { Editor, NodeEntry, Path } from 'slate';
 import { ReactEditor } from 'slate-react';
 import { RenderElementProps } from 'slate-react/dist/components/editable';
@@ -62,7 +68,6 @@ export const Table = observer((props: RenderElementProps) => {
   const { store } = useEditorStore();
 
   const [state, setState] = useState({
-    visible: false,
     top: 0,
     left: 0,
     width: 0,
@@ -78,6 +83,22 @@ export const Table = observer((props: RenderElementProps) => {
   const tableRef = React.useRef<NodeEntry<TableNode>>();
   const tableCellRef = useRef<NodeEntry<TableCellNode>>();
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (store.tableAttrVisible && tableRef.current) {
+        const dom = ReactEditor.toDOMNode(store.editor, tableRef.current[0]);
+        if (dom && !dom.contains(event.target as Node)) {
+          store.setTableAttrVisible(false);
+        }
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [store.tableAttrVisible, tableRef, store.editor]);
+
   const resize = useCallback(() => {
     const table = tableRef.current;
     if (!table) return;
@@ -99,6 +120,7 @@ export const Table = observer((props: RenderElementProps) => {
   }, [setState, store.editor]);
 
   const handleClickTable = useCallback(() => {
+    if (store.floatBarOpen) return;
     const el = store.tableCellNode;
     if (el) {
       tableCellRef.current = el;
@@ -110,8 +132,8 @@ export const Table = observer((props: RenderElementProps) => {
           ...prev,
           top: top - 24 + 3,
           left,
-          visible: true,
         }));
+        store.setTableAttrVisible(true);
       } catch (error) {
         console.log(error);
       }
@@ -146,7 +168,7 @@ export const Table = observer((props: RenderElementProps) => {
               }),
         }}
       >
-        {state.visible && (
+        {store.tableAttrVisible && (
           <TableAttr
             state={state}
             setState={setState}
@@ -166,5 +188,6 @@ export const Table = observer((props: RenderElementProps) => {
     setState,
     store.dragStart,
     handleClickTable,
+    store.tableAttrVisible,
   ]);
 });

src/MarkdownEditor/editor/store.ts

@@ -143,7 +143,17 @@ export class EditorStore {
     | 'in'
     | 'insertTableCellBreak'
   >();
-
+  floatBarOpen: boolean = false;
+  tableAttrVisible: boolean = false;
+  setFloatBarOpen(open: boolean) {
+    this.floatBarOpen = open;
+    if (open) {
+      this.tableAttrVisible = false;
+    }
+  }
+  setTableAttrVisible(visible: boolean) {
+    this.tableAttrVisible = visible;
+  }
   get doc() {
     return this.container?.querySelector(
       '.markdown-editor-content',

src/MarkdownEditor/editor/tools/InsertAutocomplete.tsx

@@ -529,14 +529,15 @@ export const InsertAutocomplete: React.FC<InsertAutocompleteProps> = observer(
         nodeEl: HTMLElement,
         containerEl: HTMLElement,
       ) => {
-        const top = getOffsetTop(nodeEl, containerEl);
+        const top =
+          getOffsetTop(nodeEl, containerEl) -
+          containerEl.getBoundingClientRect().top;
         const left = getOffsetLeft(nodeEl, containerEl);
         const containerScrollTop = containerEl.scrollTop;
         const containerHeight = containerEl.clientHeight;
         const nodeHeight = nodeEl.clientHeight;
 
         const nodeTopRelativeToContainer = top - containerScrollTop;
-
         const nodeBottomRelativeToContainer =
           nodeTopRelativeToContainer + nodeHeight;
 

src/MarkdownEditor/editor/tools/TableAttr.tsx

@@ -106,7 +106,6 @@ const InsertColBeforeIcon = () => {
  * @returns The TableAttr component.
  */
 interface TableAttrState {
-  visible: boolean;
   top: number;
   left: number;
   width: number;
@@ -490,6 +489,7 @@ export const TableAttr = observer(
     const { wrapSSR, hashId } = useStyle(baseClassName);
     if (!store.container) return null;
     if (readonly) return null;
+
     return wrapSSR(
       <div
         className={classNames(baseClassName, hashId)}
@@ -498,7 +498,7 @@ export const TableAttr = observer(
           top: state.top,
           width: 'auto',
           position: 'absolute',
-          display: state.visible ? 'flex' : 'none',
+          display: store.tableAttrVisible ? 'flex' : 'none',
         }}
         onMouseDown={(e) => e.preventDefault()}
       >

src/MarkdownEditor/editor/tools/ToolBar/FloatBar.tsx

@@ -36,7 +36,7 @@ export const FloatBar = observer(() => {
       if (left > container.clientWidth - barWidth)
         left = container.clientWidth - barWidth / 2;
 
-      let top = state.open && !force ? state.top : store.domRect.top;
+      let top = state.open && !force ? state.top : store.domRect.top - 32;
 
       setState({
         open: true,
@@ -57,22 +57,24 @@ export const FloatBar = observer(() => {
   }, [store.domRect]);
 
   useEffect(() => {
-    if (state.open) {
-      const close = (e: KeyboardEvent) => {
-        if (e.key === 'Escape' && !store.openLinkPanel) {
-          e.preventDefault();
-          setState({ open: false });
-          fileMap.clear();
-          const end = Range.end(sel.current!).path;
-          if (Editor.hasPath(store?.editor, end)) {
-            Transforms.select(store?.editor, Editor.end(store?.editor, end));
-          }
+    store.setFloatBarOpen(state.open);
+    const close = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && !store.openLinkPanel) {
+        e.preventDefault();
+        setState({ open: false });
+        fileMap.clear();
+        const end = Range.end(sel.current!).path;
+        if (Editor.hasPath(store?.editor, end)) {
+          Transforms.select(store?.editor, Editor.end(store?.editor, end));
         }
-      };
-      window.addEventListener('keydown', close);
-      return () => window.removeEventListener('keydown', close);
-    }
-    return () => {};
+        store.setFloatBarOpen(false);
+      }
+    };
+    window.addEventListener('keydown', close);
+    return () => {
+      window.removeEventListener('keydown', close);
+      store.setFloatBarOpen(false);
+    };
   }, [state.open]);
 
   useEffect(() => {