fix: layout of table in read-only mode

mdx-editor · Jan 14, 2024 · 888cd00 · 888cd00
1 parent f6aae27
commit 888cd00
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/src/plugins/table/TableEditor.tsx b/src/plugins/table/TableEditor.tsx
@@ -165,18 +165,20 @@ export const TableEditor: React.FC<TableEditorProps> = ({ mdastNode, parentEdito
     setHighlightedCoordinates([colIndex, rowIndex])
   }, [])
 
+  // remove tool cols in readOnly mode
   return (
     <table className={styles.tableEditor} onMouseOver={onTableMouseOver} onMouseLeave={() => setHighlightedCoordinates([-1, -1])}>
       <colgroup>
-        <col />
+        {readOnly ? null : <col />}
 
         {Array.from({ length: mdastNode.children[0].children.length }, (_, colIndex) => {
           const align = mdastNode.align || []
           const currentColumnAlign = align[colIndex] || 'left'
           const className = AlignToTailwindClassMap[currentColumnAlign]
           return <col key={colIndex} className={className} />
         })}
-        <col />
+
+        {readOnly ? null : <col />}
       </colgroup>
 
       {readOnly || (