@tiptap/extension-table - npm Package Compare versions

Comparing version 2.9.1 to 2.10.0

dist/index.js

@@ -5,3 +5,14 @@ import { findParentNodeClosestToPos, Node, mergeAttributes, callOrReturn, getExtensionField } from '@tiptap/core';
 
-function updateColumns(node, colgroup, table, cellMinWidth, overrideCol, overrideValue) {
+function getColStyleDeclaration(minWidth, width) {
+    if (width) {
+        // apply the stored width unless it is below the configured minimum cell width
+        return ['width', `${Math.max(width, minWidth)}px`];
+    }
+    // set the minimum with on the column if it has no stored width
+    return ['min-width', `${minWidth}px`];
+}
+
+function updateColumns(node, colgroup, // <colgroup> has the same prototype as <col>
+table, cellMinWidth, overrideCol, overrideValue) {
+    var _a;
     let totalWidth = 0;
@@ -11,19 +22,25 @@ let fixedWidth = true;
     const row = node.firstChild;
-    for (let i = 0, col = 0; i < row.childCount; i += 1) {
-        const { colspan, colwidth } = row.child(i).attrs;
-        for (let j = 0; j < colspan; j += 1, col += 1) {
-            const hasWidth = overrideCol === col ? overrideValue : colwidth && colwidth[j];
-            const cssWidth = hasWidth ? `${hasWidth}px` : '';
-            totalWidth += hasWidth || cellMinWidth;
-            if (!hasWidth) {
-                fixedWidth = false;
-            }
-            if (!nextDOM) {
-                colgroup.appendChild(document.createElement('col')).style.width = cssWidth;
-            }
-            else {
-                if (nextDOM.style.width !== cssWidth) {
-                    nextDOM.style.width = cssWidth;
+    if (row !== null) {
+        for (let i = 0, col = 0; i < row.childCount; i += 1) {
+            const { colspan, colwidth } = row.child(i).attrs;
+            for (let j = 0; j < colspan; j += 1, col += 1) {
+                const hasWidth = overrideCol === col ? overrideValue : (colwidth && colwidth[j]);
+                const cssWidth = hasWidth ? `${hasWidth}px` : '';
+                totalWidth += hasWidth || cellMinWidth;
+                if (!hasWidth) {
+                    fixedWidth = false;
                 }
-                nextDOM = nextDOM.nextSibling;
+                if (!nextDOM) {
+                    const colElement = document.createElement('col');
+                    const [propertyKey, propertyValue] = getColStyleDeclaration(cellMinWidth, hasWidth);
+                    colElement.style.setProperty(propertyKey, propertyValue);
+                    colgroup.appendChild(colElement);
+                }
+                else {
+                    if (nextDOM.style.width !== cssWidth) {
+                        const [propertyKey, propertyValue] = getColStyleDeclaration(cellMinWidth, hasWidth);
+                        nextDOM.style.setProperty(propertyKey, propertyValue);
+                    }
+                    nextDOM = nextDOM.nextSibling;
+                }
             }
@@ -34,3 +51,3 @@ }
         const after = nextDOM.nextSibling;
-        nextDOM.parentNode.removeChild(nextDOM);
+        (_a = nextDOM.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(nextDOM);
         nextDOM = after;
@@ -72,11 +89,2 @@ }
 
-/**
- * Creates a colgroup element for a table node in ProseMirror.
- *
- * @param node - The ProseMirror node representing the table.
- * @param cellMinWidth - The minimum width of a cell in the table.
- * @param overrideCol - (Optional) The index of the column to override the width of.
- * @param overrideValue - (Optional) The width value to use for the overridden column.
- * @returns An object containing the colgroup element, the total width of the table, and the minimum width of the table.
- */
 function createColGroup(node, cellMinWidth, overrideCol, overrideValue) {
@@ -94,3 +102,2 @@ let totalWidth = 0;
             const hasWidth = overrideCol === col ? overrideValue : colwidth && colwidth[j];
-            const cssWidth = hasWidth ? `${hasWidth}px` : '';
             totalWidth += hasWidth || cellMinWidth;
@@ -100,3 +107,7 @@ if (!hasWidth) {
             }
-            cols.push(['col', cssWidth ? { style: `width: ${cssWidth}` } : {}]);
+            const [property, value] = getColStyleDeclaration(cellMinWidth, hasWidth);
+            cols.push([
+                'col',
+                { style: `${property}: ${value}` },
+            ]);
         }
@@ -329,2 +340,3 @@ }
                         cellMinWidth: this.options.cellMinWidth,
+                        defaultCellMinWidth: this.options.cellMinWidth,
                         View: this.options.View,
@@ -331,0 +343,0 @@ lastColumnResizable: this.options.lastColumnResizable,

dist/index.umd.js

@@ -7,3 +7,14 @@ (function (global, factory) {
 
-  function updateColumns(node, colgroup, table, cellMinWidth, overrideCol, overrideValue) {
+  function getColStyleDeclaration(minWidth, width) {
+      if (width) {
+          // apply the stored width unless it is below the configured minimum cell width
+          return ['width', `${Math.max(width, minWidth)}px`];
+      }
+      // set the minimum with on the column if it has no stored width
+      return ['min-width', `${minWidth}px`];
+  }
+
+  function updateColumns(node, colgroup, // <colgroup> has the same prototype as <col>
+  table, cellMinWidth, overrideCol, overrideValue) {
+      var _a;
       let totalWidth = 0;
@@ -13,19 +24,25 @@ let fixedWidth = true;
       const row = node.firstChild;
-      for (let i = 0, col = 0; i < row.childCount; i += 1) {
-          const { colspan, colwidth } = row.child(i).attrs;
-          for (let j = 0; j < colspan; j += 1, col += 1) {
-              const hasWidth = overrideCol === col ? overrideValue : colwidth && colwidth[j];
-              const cssWidth = hasWidth ? `${hasWidth}px` : '';
-              totalWidth += hasWidth || cellMinWidth;
-              if (!hasWidth) {
-                  fixedWidth = false;
-              }
-              if (!nextDOM) {
-                  colgroup.appendChild(document.createElement('col')).style.width = cssWidth;
-              }
-              else {
-                  if (nextDOM.style.width !== cssWidth) {
-                      nextDOM.style.width = cssWidth;
+      if (row !== null) {
+          for (let i = 0, col = 0; i < row.childCount; i += 1) {
+              const { colspan, colwidth } = row.child(i).attrs;
+              for (let j = 0; j < colspan; j += 1, col += 1) {
+                  const hasWidth = overrideCol === col ? overrideValue : (colwidth && colwidth[j]);
+                  const cssWidth = hasWidth ? `${hasWidth}px` : '';
+                  totalWidth += hasWidth || cellMinWidth;
+                  if (!hasWidth) {
+                      fixedWidth = false;
                   }
-                  nextDOM = nextDOM.nextSibling;
+                  if (!nextDOM) {
+                      const colElement = document.createElement('col');
+                      const [propertyKey, propertyValue] = getColStyleDeclaration(cellMinWidth, hasWidth);
+                      colElement.style.setProperty(propertyKey, propertyValue);
+                      colgroup.appendChild(colElement);
+                  }
+                  else {
+                      if (nextDOM.style.width !== cssWidth) {
+                          const [propertyKey, propertyValue] = getColStyleDeclaration(cellMinWidth, hasWidth);
+                          nextDOM.style.setProperty(propertyKey, propertyValue);
+                      }
+                      nextDOM = nextDOM.nextSibling;
+                  }
               }
@@ -36,3 +53,3 @@ }
           const after = nextDOM.nextSibling;
-          nextDOM.parentNode.removeChild(nextDOM);
+          (_a = nextDOM.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(nextDOM);
           nextDOM = after;
@@ -74,11 +91,2 @@ }
 
-  /**
-   * Creates a colgroup element for a table node in ProseMirror.
-   *
-   * @param node - The ProseMirror node representing the table.
-   * @param cellMinWidth - The minimum width of a cell in the table.
-   * @param overrideCol - (Optional) The index of the column to override the width of.
-   * @param overrideValue - (Optional) The width value to use for the overridden column.
-   * @returns An object containing the colgroup element, the total width of the table, and the minimum width of the table.
-   */
   function createColGroup(node, cellMinWidth, overrideCol, overrideValue) {
@@ -96,3 +104,2 @@ let totalWidth = 0;
               const hasWidth = overrideCol === col ? overrideValue : colwidth && colwidth[j];
-              const cssWidth = hasWidth ? `${hasWidth}px` : '';
               totalWidth += hasWidth || cellMinWidth;
@@ -102,3 +109,7 @@ if (!hasWidth) {
               }
-              cols.push(['col', cssWidth ? { style: `width: ${cssWidth}` } : {}]);
+              const [property, value] = getColStyleDeclaration(cellMinWidth, hasWidth);
+              cols.push([
+                  'col',
+                  { style: `${property}: ${value}` },
+              ]);
           }
@@ -331,2 +342,3 @@ }
                           cellMinWidth: this.options.cellMinWidth,
+                          defaultCellMinWidth: this.options.cellMinWidth,
                           View: this.options.View,
@@ -333,0 +345,0 @@ lastColumnResizable: this.options.lastColumnResizable,

dist/TableView.d.ts

 import { Node as ProseMirrorNode } from '@tiptap/pm/model';
 import { NodeView } from '@tiptap/pm/view';
-export declare function updateColumns(node: ProseMirrorNode, colgroup: Element, table: Element, cellMinWidth: number, overrideCol?: number, overrideValue?: any): void;
+export declare function updateColumns(node: ProseMirrorNode, colgroup: HTMLTableColElement, // <colgroup> has the same prototype as <col>
+table: HTMLTableElement, cellMinWidth: number, overrideCol?: number, overrideValue?: number): void;
 export declare class TableView implements NodeView {
     node: ProseMirrorNode;
     cellMinWidth: number;
-    dom: Element;
-    table: Element;
-    colgroup: Element;
-    contentDOM: Element;
+    dom: HTMLDivElement;
+    table: HTMLTableElement;
+    colgroup: HTMLTableColElement;
+    contentDOM: HTMLTableSectionElement;
     constructor(node: ProseMirrorNode, cellMinWidth: number);
@@ -12,0 +13,0 @@ update(node: ProseMirrorNode): boolean;

dist/utilities/createColGroup.d.ts

@@ -1,2 +0,7 @@
-import { Node as ProseMirrorNode } from '@tiptap/pm/model';
+import { DOMOutputSpec, Node as ProseMirrorNode } from '@tiptap/pm/model';
+export type ColGroup = {
+    colgroup: DOMOutputSpec;
+    tableWidth: string;
+    tableMinWidth: string;
+} | Record<string, never>;
 /**
@@ -11,11 +16,4 @@ * Creates a colgroup element for a table node in ProseMirror.
  */
-export declare function createColGroup(node: ProseMirrorNode, cellMinWidth: number, overrideCol?: number, overrideValue?: any): {
-    colgroup?: undefined;
-    tableWidth?: undefined;
-    tableMinWidth?: undefined;
-} | {
-    colgroup: readonly [string, ...any[]];
-    tableWidth: string;
-    tableMinWidth: string;
-};
+export declare function createColGroup(node: ProseMirrorNode, cellMinWidth: number): ColGroup;
+export declare function createColGroup(node: ProseMirrorNode, cellMinWidth: number, overrideCol: number, overrideValue: number): ColGroup;
 //# sourceMappingURL=createColGroup.d.ts.map

package.json

 {
   "name": "@tiptap/extension-table",
   "description": "table extension for tiptap",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "homepage": "https://tiptap.dev",
@@ -32,4 +32,4 @@ "keywords": [
   "devDependencies": {
-    "@tiptap/core": "^2.9.1",
-    "@tiptap/pm": "^2.9.1"
+    "@tiptap/core": "^2.10.0",
+    "@tiptap/pm": "^2.10.0"
   },
@@ -36,0 +36,0 @@ "peerDependencies": {

src/table.ts

@@ -434,2 +434,3 @@ import {
             cellMinWidth: this.options.cellMinWidth,
+            defaultCellMinWidth: this.options.cellMinWidth,
             View: this.options.View,
@@ -436,0 +437,0 @@ lastColumnResizable: this.options.lastColumnResizable,

src/TableView.ts

@@ -1,12 +0,13 @@
-// @ts-nocheck
 import { Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { NodeView } from '@tiptap/pm/view'
 
+import { getColStyleDeclaration } from './utilities/colStyle.js'
+
 export function updateColumns(
   node: ProseMirrorNode,
-  colgroup: Element,
-  table: Element,
+  colgroup: HTMLTableColElement, // <colgroup> has the same prototype as <col>
+  table: HTMLTableElement,
   cellMinWidth: number,
   overrideCol?: number,
-  overrideValue?: any,
+  overrideValue?: number,
 ) {
@@ -18,23 +19,33 @@ let totalWidth = 0
 
-  for (let i = 0, col = 0; i < row.childCount; i += 1) {
-    const { colspan, colwidth } = row.child(i).attrs
+  if (row !== null) {
+    for (let i = 0, col = 0; i < row.childCount; i += 1) {
+      const { colspan, colwidth } = row.child(i).attrs
 
-    for (let j = 0; j < colspan; j += 1, col += 1) {
-      const hasWidth = overrideCol === col ? overrideValue : colwidth && colwidth[j]
-      const cssWidth = hasWidth ? `${hasWidth}px` : ''
+      for (let j = 0; j < colspan; j += 1, col += 1) {
+        const hasWidth = overrideCol === col ? overrideValue : (colwidth && colwidth[j]) as number | undefined
+        const cssWidth = hasWidth ? `${hasWidth}px` : ''
 
-      totalWidth += hasWidth || cellMinWidth
+        totalWidth += hasWidth || cellMinWidth
 
-      if (!hasWidth) {
-        fixedWidth = false
-      }
+        if (!hasWidth) {
+          fixedWidth = false
+        }
 
-      if (!nextDOM) {
-        colgroup.appendChild(document.createElement('col')).style.width = cssWidth
-      } else {
-        if (nextDOM.style.width !== cssWidth) {
-          nextDOM.style.width = cssWidth
+        if (!nextDOM) {
+          const colElement = document.createElement('col')
+
+          const [propertyKey, propertyValue] = getColStyleDeclaration(cellMinWidth, hasWidth)
+
+          colElement.style.setProperty(propertyKey, propertyValue)
+
+          colgroup.appendChild(colElement)
+        } else {
+          if ((nextDOM as HTMLTableColElement).style.width !== cssWidth) {
+            const [propertyKey, propertyValue] = getColStyleDeclaration(cellMinWidth, hasWidth);
+
+            (nextDOM as HTMLTableColElement).style.setProperty(propertyKey, propertyValue)
+          }
+
+          nextDOM = nextDOM.nextSibling
         }
-
-        nextDOM = nextDOM.nextSibling
       }
@@ -47,3 +58,3 @@ }
 
-    nextDOM.parentNode.removeChild(nextDOM)
+    nextDOM.parentNode?.removeChild(nextDOM)
     nextDOM = after
@@ -66,9 +77,9 @@ }
 
-  dom: Element
+  dom: HTMLDivElement
 
-  table: Element
+  table: HTMLTableElement
 
-  colgroup: Element
+  colgroup: HTMLTableColElement
 
-  contentDOM: Element
+  contentDOM: HTMLTableSectionElement
 
@@ -75,0 +86,0 @@ constructor(node: ProseMirrorNode, cellMinWidth: number) {

src/utilities/createColGroup.ts

 import { DOMOutputSpec, Node as ProseMirrorNode } from '@tiptap/pm/model'
 
+import { getColStyleDeclaration } from './colStyle.js'
+
+export type ColGroup = {
+  colgroup: DOMOutputSpec
+  tableWidth: string
+  tableMinWidth: string
+} | Record<string, never>;
+
 /**
@@ -15,5 +23,15 @@ * Creates a colgroup element for a table node in ProseMirror.
   cellMinWidth: number,
+): ColGroup
+export function createColGroup(
+  node: ProseMirrorNode,
+  cellMinWidth: number,
+  overrideCol: number,
+  overrideValue: number,
+): ColGroup
+export function createColGroup(
+  node: ProseMirrorNode,
+  cellMinWidth: number,
   overrideCol?: number,
-  overrideValue?: any,
-) {
+  overrideValue?: number,
+): ColGroup {
   let totalWidth = 0
@@ -32,4 +50,3 @@ let fixedWidth = true
     for (let j = 0; j < colspan; j += 1, col += 1) {
-      const hasWidth = overrideCol === col ? overrideValue : colwidth && colwidth[j]
-      const cssWidth = hasWidth ? `${hasWidth}px` : ''
+      const hasWidth = overrideCol === col ? overrideValue : colwidth && colwidth[j] as number | undefined
 
@@ -42,3 +59,8 @@ totalWidth += hasWidth || cellMinWidth
 
-      cols.push(['col', cssWidth ? { style: `width: ${cssWidth}` } : {}])
+      const [property, value] = getColStyleDeclaration(cellMinWidth, hasWidth)
+
+      cols.push([
+        'col',
+        { style: `${property}: ${value}` },
+      ])
     }
@@ -45,0 +67,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

181647

increased by4.74%

Number of package files

38

increased by8.57%

Lines of code

1951

increased by3.56%

No dependency changes