优化表格属性管理，调整状态处理逻辑，修复表格显示问题

src/MarkdownEditor/editor/elements/table.tsx

@@ -19,7 +19,7 @@ import { TableAttr } from '../tools/TableAttr';
 export function TableCell(props: RenderElementProps) {
   const { store } = useEditorStore();
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, path] = useSelStatus(props.element);
+  const [_] = useSelStatus(props.element);
   const context = useCallback((e: React.MouseEvent, head?: boolean) => {
     store.openTableMenus(e, head);
   }, []);
@@ -60,6 +60,7 @@ export function TableCell(props: RenderElementProps) {
 export const Table = observer((props: RenderElementProps) => {
   const { store } = useEditorStore();
 
+  const [tableAttrVisible, setTableAttrVisible] = useState(false);
   const [state, setState] = useState({
     top: 0,
     left: 0,
@@ -77,12 +78,24 @@ export const Table = observer((props: RenderElementProps) => {
   const overflowShadowContainerRef = React.useRef<HTMLTableElement>(null);
   const tableCellRef = useRef<NodeEntry<TableCellNode>>();
 
+  useEffect(() => {
+    if (store.floatBarOpen) {
+      setTableAttrVisible(false);
+    }
+  }, [store.floatBarOpen]);
+
   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);
+      if (!tableRef.current) return;
+      if (tableAttrVisible && tableRef.current) {
+        if (!store.editor.hasPath(tableRef.current[1])) return;
+        try {
+          const dom = ReactEditor.toDOMNode(store.editor, tableRef.current[0]);
+          if (dom && !dom.contains(event.target as Node)) {
+            setTableAttrVisible(false);
+          }
+        } catch (error) {
+          setTableAttrVisible(false);
         }
       }
     };
@@ -91,7 +104,7 @@ export const Table = observer((props: RenderElementProps) => {
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [store.tableAttrVisible, tableRef, store.editor]);
+  }, [tableAttrVisible, tableRef, store.editor]);
 
   const resize = useCallback(() => {
     const table = tableRef.current;
@@ -127,7 +140,7 @@ export const Table = observer((props: RenderElementProps) => {
           top: top - 24 + 3,
           left,
         }));
-        store.setTableAttrVisible(true);
+        setTableAttrVisible(true);
       } catch (error) {
         console.log(error);
       }
@@ -197,6 +210,8 @@ export const Table = observer((props: RenderElementProps) => {
     const [pre, ...row] = props.children;
     const after = row.pop();
 
+    console.log(props.children);
+
     return (
       <div
         {...props.attributes}
@@ -214,6 +229,7 @@ export const Table = observer((props: RenderElementProps) => {
           className={'ant-md-editor-drag-el ant-md-editor-table'}
           style={{
             maxWidth: '100%',
+            width: '100%',
             ...(store.editor?.children?.length === 1
               ? {}
               : {
@@ -222,7 +238,7 @@ export const Table = observer((props: RenderElementProps) => {
                 }),
           }}
         >
-          {store.tableAttrVisible && (
+          {tableAttrVisible && (
             <TableAttr
               state={state}
               setState={setState}
@@ -237,6 +253,7 @@ export const Table = observer((props: RenderElementProps) => {
               width: '100%',
               maxWidth: '100%',
               overflow: 'auto',
+              flex: 1,
             }}
           >
             <table
@@ -259,6 +276,6 @@ export const Table = observer((props: RenderElementProps) => {
     setState,
     store.dragStart,
     handleClickTable,
-    store.tableAttrVisible,
+    tableAttrVisible,
   ]);
 });

src/MarkdownEditor/editor/store.ts

@@ -149,16 +149,10 @@ export class EditorStore {
     | '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/TableAttr.tsx

@@ -502,7 +502,7 @@ export const TableAttr = observer(
           zIndex: 99,
           width: 'auto',
           position: 'absolute',
-          display: store.tableAttrVisible ? 'flex' : 'none',
+          display: 'flex',
         }}
         ref={htmlRef}
         onMouseDown={(e) => e.preventDefault()}

src/MarkdownEditor/editor/utils/keyboard.ts

@@ -426,6 +426,10 @@ export class KeyboardTask {
         {
           type: 'table',
           children: [
+            {
+              type: 'card-before',
+              children: [{ text: '' }],
+            },
             {
               type: 'table-row',
               children: [
@@ -460,6 +464,10 @@ export class KeyboardTask {
                 { type: 'table-cell', children: [{ text: '' }] },
               ],
             },
+            {
+              type: 'card-after',
+              children: [{ text: '' }],
+            },
           ],
         },
         { at: path },