fix: incorrect column's width after cell merging

projects/tui-editor/src/components/editor-socket/styles/table.less

@@ -2,7 +2,7 @@
 
 table {
     border-collapse: collapse;
-    table-layout: fixed;
+    table-layout: unset;
     width: 100%;
     margin: 0;
     overflow: hidden;

projects/tui-editor/src/extensions/default-editor-extensions/index.ts

@@ -31,9 +31,9 @@ export const TUI_EDITOR_DEFAULT_EXTENSIONS: ReadonlyArray<
     TuiJumpAnchor,
     TuiFileLink,
     TuiBackgroundColor,
-    TuiTable,
+    TuiTable.configure({resizable: true}),
     import('@tiptap/extension-table-row').then(({TableRow}) => TableRow),
-    import('@tiptap/extension-table-cell').then(({TableCell}) => TableCell),
+    import('@tinkoff/tui-editor').then(({TuiTableCell}) => TuiTableCell),
     import('@tiptap/extension-table-header').then(({TableHeader}) => TableHeader),
     TuiTabExtension,
     TableCellBackground,

projects/tui-editor/src/extensions/table-cell/index.ts

@@ -0,0 +1,14 @@
+import {mergeAttributes} from '@tiptap/core';
+import TableCell from '@tiptap/extension-table-cell';
+
+export const TuiTableCell = TableCell.extend({
+    renderHTML({HTMLAttributes}) {
+        const attrs = mergeAttributes(this.options.HTMLAttributes, HTMLAttributes);
+
+        if (attrs.colwidth) {
+            attrs.style = `width: ${attrs.colwidth}px`;
+        }
+
+        return ['td', attrs, 0];
+    },
+});

projects/tui-editor/src/index.ts

@@ -68,6 +68,7 @@ export * from './extensions/media';
 export * from './extensions/mention';
 export * from './extensions/starter-kit';
 export * from './extensions/table';
+export * from './extensions/table-cell';
 export * from './extensions/table-cell-background';
 export * from './extensions/tiptap-node-view';
 export * from './extensions/youtube';