Merge remote-tracking branch 'upstream/main'

console/packages/editor/package.json

@@ -68,7 +68,7 @@
     "@tiptap/extension-strike": "^2.1.15",
     "@tiptap/extension-subscript": "^2.1.15",
     "@tiptap/extension-superscript": "^2.1.15",
-    "@tiptap/extension-table": "^2.1.15",
+    "@tiptap/extension-table": "2.2.0-rc.8",
     "@tiptap/extension-table-row": "^2.1.15",
     "@tiptap/extension-task-item": "^2.1.15",
     "@tiptap/extension-task-list": "^2.1.15",

console/packages/editor/src/extensions/table/index.ts

@@ -1,14 +1,19 @@
-import TiptapTable, { type TableOptions } from "@tiptap/extension-table";
+import TiptapTable, {
+  type TableOptions,
+  createColGroup,
+} from "@tiptap/extension-table";
 import {
   isActive,
   type Editor,
   type Range,
+  mergeAttributes,
   isNodeActive,
 } from "@/tiptap/vue-3";
-import type {
-  Node as ProseMirrorNode,
-  NodeView,
-  EditorState,
+import {
+  type Node as ProseMirrorNode,
+  type NodeView,
+  type EditorState,
+  type DOMOutputSpec,
 } from "@/tiptap/pm";
 import TableCell from "./table-cell";
 import TableRow from "./table-row";
@@ -419,6 +424,30 @@ const Table = TiptapTable.extend<ExtensionOptions & TableOptions>({
       "Mod-Backspace": () => handleBackspace(),
     };
   },
+
+  renderHTML({ node, HTMLAttributes }) {
+    const { colgroup, tableWidth, tableMinWidth } = createColGroup(
+      node,
+      this.options.cellMinWidth
+    );
+
+    const table: DOMOutputSpec = [
+      "div",
+      { style: "overflow-x: auto; overflow-y: hidden;" },
+      [
+        "table",
+        mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+          style: tableWidth
+            ? `width: ${tableWidth}`
+            : `minWidth: ${tableMinWidth}`,
+        }),
+        colgroup,
+        ["tbody", 0],
+      ],
+    ];
+
+    return table;
+  },
 }).configure({ resizable: true });
 
 export default Table;