From 9ae5f281c27c49353b51dbde8a5e5a56bbd77a2a Mon Sep 17 00:00:00 2001 From: LIlGG <1103069291@qq.com> Date: Thu, 11 Jan 2024 14:39:50 +0800 Subject: [PATCH 1/4] pref: add additional attributes and colgroup for tables --- .../editor/src/extensions/table/index.ts | 41 ++++++++++++++++--- 1 file changed, 35 insertions(+), 6 deletions(-) diff --git a/console/packages/editor/src/extensions/table/index.ts b/console/packages/editor/src/extensions/table/index.ts index e1bb717c84..9a597a0099 100644 --- a/console/packages/editor/src/extensions/table/index.ts +++ b/console/packages/editor/src/extensions/table/index.ts @@ -1,9 +1,18 @@ -import TiptapTable, { type TableOptions } from "@tiptap/extension-table"; -import { isActive, type Editor, type Range } from "@/tiptap/vue-3"; -import type { - Node as ProseMirrorNode, - NodeView, - EditorState, +import TiptapTable, { + type TableOptions, + createColGroup, +} from "@tiptap/extension-table"; +import { + isActive, + type Editor, + type Range, + mergeAttributes, +} from "@/tiptap/vue-3"; +import { + type Node as ProseMirrorNode, + type NodeView, + type EditorState, + type DOMOutputSpec, } from "@/tiptap/pm"; import TableCell from "./table-cell"; import TableRow from "./table-row"; @@ -375,6 +384,26 @@ const Table = TiptapTable.extend({ }, }; }, + + renderHTML({ node, HTMLAttributes }) { + const { colgroup, tableWidth, tableMinWidth } = createColGroup( + node, + this.options.cellMinWidth + ); + + const table: DOMOutputSpec = [ + "table", + mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { + style: tableWidth + ? `width: ${tableWidth}` + : `minWidth: ${tableMinWidth}`, + }), + colgroup, + ["tbody", 0], + ]; + + return table; + }, }).configure({ resizable: true }); export default Table; From f5cbcfde5feedeb98e2f5ac40a32254487498b32 Mon Sep 17 00:00:00 2001 From: LIlGG <1103069291@qq.com> Date: Fri, 12 Jan 2024 10:51:53 +0800 Subject: [PATCH 2/4] update tiptap extension table --- console/packages/editor/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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", From 8d6b853633e0cb970fb795292029059c52036386 Mon Sep 17 00:00:00 2001 From: LIlGG <1103069291@qq.com> Date: Fri, 12 Jan 2024 10:57:00 +0800 Subject: [PATCH 3/4] update tiptap extension table --- console/pnpm-lock.yaml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/console/pnpm-lock.yaml b/console/pnpm-lock.yaml index f5195a7618..20981c2f68 100644 --- a/console/pnpm-lock.yaml +++ b/console/pnpm-lock.yaml @@ -518,8 +518,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) @@ -6033,8 +6033,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 From 6a892d762b20b15fc910dc86ee2e36d558df53e9 Mon Sep 17 00:00:00 2001 From: LIlGG <1103069291@qq.com> Date: Mon, 15 Jan 2024 16:58:08 +0800 Subject: [PATCH 4/4] fix: add overflow to the generated table --- .../editor/src/extensions/table/index.ts | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/console/packages/editor/src/extensions/table/index.ts b/console/packages/editor/src/extensions/table/index.ts index e4b6cfc3de..4586257b54 100644 --- a/console/packages/editor/src/extensions/table/index.ts +++ b/console/packages/editor/src/extensions/table/index.ts @@ -432,14 +432,18 @@ const Table = TiptapTable.extend({ ); const table: DOMOutputSpec = [ - "table", - mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { - style: tableWidth - ? `width: ${tableWidth}` - : `minWidth: ${tableMinWidth}`, - }), - colgroup, - ["tbody", 0], + "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;