pref: add additional attributes and colgroup for tables (#5176)

#### What type of PR is this?

/kind improvmenet
/area editor
/milestone 2.12.x

#### What this PR does / why we need it:

为默认编辑器 table 组件渲染后的结果中增加 `colgroup`，并为 table 增加 `width` 与 `minWidth` 属性。
用于解决渲染完成之后的 table html 宽度与编辑时不一致的问题。

#### How to test it?

拖拽修改默认编辑器表格列宽，查看生成后的 html 列宽是否同样发生了变化，并且查看生成的 html 结构下是否具有 `colgroup` html 元素。

#### Which issue(s) this PR fixes:

Fixes #5138 

#### Does this PR introduce a user-facing change?
```release-note
为默认富文本编辑器 table 组件渲染后的 html 增加 colgroup 元素与 width 属性
```

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;