From 888cd00c1ff59bebd36413cabe3f84aadb3ab73f Mon Sep 17 00:00:00 2001
From: Petyo Ivanov <underlog@gmail.com>
Date: Sun, 14 Jan 2024 07:46:25 +0200
Subject: [PATCH] fix: layout of table in read-only mode

---
 src/plugins/table/TableEditor.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/plugins/table/TableEditor.tsx b/src/plugins/table/TableEditor.tsx
index f6900fed..d54c76d6 100644
--- a/src/plugins/table/TableEditor.tsx
+++ b/src/plugins/table/TableEditor.tsx
@@ -165,10 +165,11 @@ 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 || []
@@ -176,7 +177,8 @@ export const TableEditor: React.FC<TableEditorProps> = ({ mdastNode, parentEdito
           const className = AlignToTailwindClassMap[currentColumnAlign]
           return <col key={colIndex} className={className} />
         })}
-        <col />
+
+        {readOnly ? null : <col />}
       </colgroup>
 
       {readOnly || (