fix: support defaultCellMinWidth in older Safari (#255)

ProseMirror · Oct 30, 2024 · 1b36002 · 1b36002
1 parent 240cb67
commit 1b36002
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/src/columnresizing.ts b/src/columnresizing.ts
@@ -234,6 +234,13 @@ function handleMouseDown(
     }
   }
 
+  displayColumnWidth(
+    view,
+    pluginState.activeHandle,
+    width,
+    defaultCellMinWidth,
+  );
+
   win.addEventListener('mouseup', finish);
   win.addEventListener('mousemove', move);
   event.preventDefault();
@@ -397,6 +404,18 @@ export function handleDecorations(
       const pos = start + cellPos + table.nodeAt(cellPos)!.nodeSize - 1;
       const dom = document.createElement('div');
       dom.className = 'column-resize-handle';
+      if (columnResizingPluginKey.getState(state)?.dragging) {
+        decorations.push(
+          Decoration.node(
+            start + cellPos,
+            start + cellPos + table.nodeAt(cellPos)!.nodeSize,
+            {
+              class: 'column-resize-dragging',
+            },
+          ),
+        );
+      }
+
       decorations.push(Decoration.widget(pos, dom));
     }
   }

diff --git a/src/tableview.ts b/src/tableview.ts
@@ -15,6 +15,10 @@ export class TableView implements NodeView {
     this.dom = document.createElement('div');
     this.dom.className = 'tableWrapper';
     this.table = this.dom.appendChild(document.createElement('table'));
+    this.table.style.setProperty(
+      '--default-cell-min-width',
+      `${defaultCellMinWidth}px`,
+    );
     this.colgroup = this.table.appendChild(document.createElement('colgroup'));
     updateColumnsOnResize(node, this.colgroup, this.table, defaultCellMinWidth);
     this.contentDOM = this.table.appendChild(document.createElement('tbody'));
@@ -68,14 +72,10 @@ export function updateColumnsOnResize(
       if (!nextDOM) {
         const col = document.createElement('col');
         col.style.width = cssWidth;
-        col.style.minWidth = cssWidth.length ? '' : defaultCellMinWidth + 'px';
         colgroup.appendChild(col);
       } else {
         if (nextDOM.style.width != cssWidth) {
           nextDOM.style.width = cssWidth;
-          nextDOM.style.minWidth = cssWidth.length
-            ? ''
-            : defaultCellMinWidth + 'px';
         }
         nextDOM = nextDOM.nextSibling as HTMLElement;
       }

diff --git a/style/tables.css b/style/tables.css
@@ -13,6 +13,13 @@
   box-sizing: border-box;
   position: relative;
 }
+
+.ProseMirror td:not([data-colwidth]):not(.column-resize-dragging),
+.ProseMirror th:not([data-colwidth]):not(.column-resize-dragging) {
+  /* if there's no explicit width set and the column is not being resized, set a default width */
+  min-width: var(--default-cell-min-width);
+}
+
 .ProseMirror .column-resize-handle {
   position: absolute;
   right: -2px;