From b42e046d547e0e5a32879a8c9148f9569a88f293 Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Thu, 18 Jan 2024 16:40:08 +0800
Subject: [PATCH] pref: add additional attributes and colgroup for tables
 (#5176)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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          |  2 +-
 .../editor/src/extensions/table/index.ts      | 39 ++++++++++++++++---
 console/pnpm-lock.yaml                        |  8 ++--
 3 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/console/packages/editor/package.json b/console/packages/editor/package.json
index 956402965d..0245ad9127 100644
--- a/console/packages/editor/package.json
+++ b/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",
diff --git a/console/packages/editor/src/extensions/table/index.ts b/console/packages/editor/src/extensions/table/index.ts
index 3ad90ea66d..4586257b54 100644
--- a/console/packages/editor/src/extensions/table/index.ts
+++ b/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;
diff --git a/console/pnpm-lock.yaml b/console/pnpm-lock.yaml
index 9881ade70d..11df834c16 100644
--- a/console/pnpm-lock.yaml
+++ b/console/pnpm-lock.yaml
@@ -524,8 +524,8 @@ importers:
         specifier: ^2.1.15
         version: 2.1.15(@tiptap/core@2.1.15)
       '@tiptap/extension-table':
-        specifier: ^2.1.15
-        version: 2.1.15(@tiptap/core@2.1.15)(@tiptap/pm@2.1.15)
+        specifier: 2.2.0-rc.8
+        version: 2.2.0-rc.8(@tiptap/core@2.1.15)(@tiptap/pm@2.1.15)
       '@tiptap/extension-table-row':
         specifier: ^2.1.15
         version: 2.1.15(@tiptap/core@2.1.15)
@@ -6039,8 +6039,8 @@ packages:
       '@tiptap/core': 2.1.15(@tiptap/pm@2.1.15)
     dev: false
 
-  /@tiptap/extension-table@2.1.15(@tiptap/core@2.1.15)(@tiptap/pm@2.1.15):
-    resolution: {integrity: sha512-7mEytHrY7eLaJHyHNwC5l7IXHMTBF2HydCX/sF5Z3oNh63bCGWo/5NjvW6fjJd9B6KQ5yH5ec+gO7uPaf/555w==}
+  /@tiptap/extension-table@2.2.0-rc.8(@tiptap/core@2.1.15)(@tiptap/pm@2.1.15):
+    resolution: {integrity: sha512-o/w+vVG0DIXU6Aal5OXJC/GHwkfazJZ8egBV1dHKyXV2hV4FAmAYpcGQyCpixtZxMTMVq3Ck1kFrbU9v5CqUQQ==}
     peerDependencies:
       '@tiptap/core': ^2.0.0
       '@tiptap/pm': ^2.0.0