feat(docs): doc support table (#2814)

Co-authored-by: Wenzhao Hu <12122021+wzhudev@users.noreply.github.com>

.github/workflows/sync-mirror.yml

@@ -1,4 +1,4 @@
-name: 🔮 Sync mirror
+name: 🔮 Sync Mirror
 
 on:
     push:

.github/workflows/sync-pro.yml

@@ -1,4 +1,4 @@
-name: 🔫 Sync pro version
+name: 🔫 Sync to Pro
 
 on:
     push:

.github/workflows/update-snapshots.yml

@@ -32,7 +32,7 @@ jobs:
     update_snapshots:
         # Run this job only on comments of pull requests that strictly match
         # the "/update-snapshots" string
-        if: ${{ github.event.issue.pull_request && github.event.comment.body == '/update-snapshots'}}
+        if: ${{ github.event.issue.pull_request && github.event.comment.body == '/update-snapshots' }}
         timeout-minutes: 10
         runs-on: ubuntu-latest
         steps:

.vscode/settings.json

@@ -94,6 +94,7 @@
         "SUMIF",
         "SUMIFS",
         "Tahoma",
+        "tblp",
         "TBRL",
         "undoredo",
         "undos",

examples/src/data/docs/default-document.data-simple.ts

@@ -14,17 +14,179 @@
  * limitations under the License.
  */
 
-import type { IDocumentData } from '@univerjs/core';
-import { BooleanNumber, DocumentFlavor } from '@univerjs/core';
+import type { IDocumentData, IParagraph, ISectionBreak, ITable, ITableCell, ITableColumn, ITableRow } from '@univerjs/core';
+import { BooleanNumber, DocumentFlavor, HorizontalAlign, ObjectRelativeFromH, ObjectRelativeFromV, TableAlignmentType, TableCellHeightRule, TableSizeType, TableTextWrapType, Tools } from '@univerjs/core';
+import { ptToPixel } from '@univerjs/engine-render';
+
+const TABLE_START = '\x1A'; // 表格开始
+const TABLE_ROW_START = '\x1B'; // 表格行开始
+const TABLE_CELL_START = '\x1C'; // 表格单元格开始
+const TABLE_CELL_END = '\x1D'; // 表格单元格结束
+const TABLE_ROW_END = '\x0E'; // 表格行结束
+const TABLE_END = '\x0F'; // 表格结束
+
+function createTableDataStream(tables: string[][]) {
+    const row = tables.length;
+    const col = tables[0].length;
+    let dataStream = TABLE_START;
+
+    for (let i = 0; i < row; i++) {
+        dataStream += TABLE_ROW_START;
+        for (let j = 0; j < col; j++) {
+            dataStream += `${TABLE_CELL_START + tables[i][j]}\r\n${TABLE_CELL_END}`;
+        }
+        dataStream += TABLE_ROW_END;
+    }
+
+    return dataStream + TABLE_END;
+}
+
+const exampleTables = [
+    ['姓名\r这是一个段落\r这是二个段落\r这是三个段落\r这是四个段落', '语文', '数学', '英语', '总分'],
+    ['张三', '80', '90', '70', '240'],
+    ['李四', '80', '90', '70', '240'],
+    ['王五', '80', '90', '70', '240'],
+    ['赵六', '80', '90', '70', '240'],
+];
+
+const dataStream = `这是一个表格的用例\r${createTableDataStream(exampleTables)}班级成绩统计\r\n`;
+
+const startIndex = dataStream.indexOf(TABLE_START);
+const endIndex = dataStream.indexOf(TABLE_END);
+
+function createParagraphAndSectionBreaks(dataStream: string) {
+    const paragraphs: IParagraph[] = [];
+    const sectionBreaks: ISectionBreak[] = [];
+    for (let i = 0; i < dataStream.length; i++) {
+        const char = dataStream[i];
+        if (char === '\r') {
+            paragraphs.push({
+                startIndex: i,
+                paragraphStyle: {
+                    spaceAbove: { v: 5 },
+                    lineSpacing: 2,
+                    spaceBelow: { v: 0 },
+                    horizontalAlign: HorizontalAlign.LEFT,
+                },
+            });
+        }
+
+        if (char === '\n') {
+            sectionBreaks.push({
+                startIndex: i,
+            });
+        }
+    }
+
+    return { paragraphs, sectionBreaks };
+}
+
+const { paragraphs, sectionBreaks } = createParagraphAndSectionBreaks(dataStream);
+
+const tableCell: ITableCell = {
+    rowSpan: 1,
+    columnSpan: 1,
+    margin: {
+        start: {
+            v: 10,
+        },
+        end: {
+            v: 10,
+        },
+        top: {
+            v: 5,
+        },
+        bottom: {
+            v: 5,
+        },
+    },
+};
+
+const tableRow: ITableRow = {
+    tableCells: [...new Array(exampleTables[0].length).fill(Tools.deepClone(tableCell))],
+    trHeight: {
+        val: { v: 30 },
+        hRule: TableCellHeightRule.AUTO,
+    },
+};
+
+const tableColumn: ITableColumn = {
+    size: {
+        type: TableSizeType.SPECIFIED,
+        width: {
+            v: 100,
+        },
+    },
+};
+
+const tableRows = [...new Array(exampleTables.length).fill(null).map(() => Tools.deepClone(tableRow))];
+const tableColumns = [...new Array(exampleTables[0].length).fill(null).map(() => Tools.deepClone(tableColumn))];
+
+tableColumns[0].size.width.v = 250;
+
+const table: ITable = {
+    tableRows,
+    tableColumns,
+    tableId: 'table-id',
+    align: TableAlignmentType.START,
+    indent: {
+        v: 0,
+    },
+    textWrap: TableTextWrapType.NONE,
+    position: {
+        positionH: {
+            relativeFrom: ObjectRelativeFromH.PAGE,
+            posOffset: 0,
+        },
+        positionV: {
+            relativeFrom: ObjectRelativeFromV.PAGE,
+            posOffset: 0,
+        },
+    },
+    dist: {
+        distB: 0,
+        distL: 0,
+        distR: 0,
+        distT: 0,
+    },
+    cellMargin: {
+        start: {
+            v: 10,
+        },
+        end: {
+            v: 10,
+        },
+        top: {
+            v: 5,
+        },
+        bottom: {
+            v: 5,
+        },
+    },
+    size: {
+        type: TableSizeType.UNSPECIFIED,
+        width: {
+            v: 1000,
+        },
+    },
+};
 
 export const DEFAULT_DOCUMENT_DATA_SIMPLE: IDocumentData = {
     id: 'default-document-id',
+    tableSource: {
+        'table-id': table,
+    },
+    headers: {},
+    footers: {},
+    drawings: {},
+    drawingsOrder: [],
     body: {
-        dataStream: '荷塘𠮷\r作者：朱自清 👨‍👩‍👧‍👦 Today Office\r\n',
+        dataStream,
+        customBlocks: [],
         textRuns: [
             {
                 st: 0,
-                ed: 4,
+                ed: 9,
                 ts: {
                     fs: 24,
                     ff: 'Microsoft YaHei',
@@ -38,65 +200,73 @@ export const DEFAULT_DOCUMENT_DATA_SIMPLE: IDocumentData = {
                 },
             },
             {
-                st: 5,
-                ed: 36,
+                st: 9,
+                ed: 12,
                 ts: {
-                    fs: 18,
+                    fs: 14,
                     ff: 'Times New Roman',
                     cl: {
                         rgb: 'rgb(30, 30, 30)',
                     },
                     bl: BooleanNumber.FALSE,
                 },
             },
-        ],
-        paragraphs: [
             {
-                startIndex: 4,
-                paragraphStyle: {
-                    spaceAbove: { v: 10 },
-                    lineSpacing: 2,
-                    spaceBelow: { v: 0 },
+                st: 13,
+                ed: 15,
+                ts: {
+                    fs: 14,
+                    ff: 'Times New Roman',
+                    cl: {
+                        rgb: 'rgb(130, 30, 30)',
+                    },
+                    bl: BooleanNumber.TRUE,
                 },
             },
             {
-                startIndex: 36,
-                paragraphStyle: {
-                    spaceAbove: { v: 10 },
-                    lineSpacing: 2,
-                    spaceBelow: { v: 0 },
+                st: 16,
+                ed: dataStream.length - 2,
+                ts: {
+                    fs: 14,
+                    ff: 'Times New Roman',
+                    cl: {
+                        rgb: 'rgb(30, 30, 30)',
+                    },
+                    bl: BooleanNumber.FALSE,
                 },
             },
         ],
-        sectionBreaks: [
-            {
-                startIndex: 37,
-                // columnProperties: [
-                //     {
-                //         width: 250,
-                //         paddingEnd: 15,
-                //     },
-                // ],
-                // columnSeparatorType: ColumnSeparatorType.NONE,
-                // sectionType: SectionType.SECTION_TYPE_UNSPECIFIED,
-                // textDirection: textDirectionDocument,
-                // contentDirection: textDirection!,
-            },
-        ],
+        paragraphs,
+        tables: [{
+            startIndex,
+            endIndex,
+            tableId: 'table-id',
+        }],
+        sectionBreaks,
     },
     documentStyle: {
         pageSize: {
-            width: 595,
-            height: 842,
+            width: ptToPixel(595),
+            height: ptToPixel(842),
         },
         documentFlavor: DocumentFlavor.TRADITIONAL,
-        marginTop: 50,
-        marginBottom: 50,
-        marginRight: 40,
-        marginLeft: 40,
+        marginTop: ptToPixel(50),
+        marginBottom: ptToPixel(50),
+        marginRight: ptToPixel(50),
+        marginLeft: ptToPixel(50),
         renderConfig: {
-            vertexAngle: 90,
+            vertexAngle: 0,
             centerAngle: 0,
         },
+        defaultHeaderId: '',
+        defaultFooterId: '',
+        evenPageHeaderId: '',
+        evenPageFooterId: '',
+        firstPageHeaderId: '',
+        firstPageFooterId: '',
+        evenAndOddHeaders: BooleanNumber.FALSE,
+        useFirstPageHeaderFooter: BooleanNumber.FALSE,
+        marginHeader: 30,
+        marginFooter: 30,
     },
 };

examples/src/docs/main.ts

@@ -30,6 +30,8 @@ import { UniverDocsMentionUIPlugin } from '@univerjs/docs-mention-ui';
 import { DEFAULT_DOCUMENT_DATA_CN } from '../data';
 import { enUS, ruRU, zhCN } from '../locales';
 
+// const IS_E2E: boolean = !!process.env.IS_E2E;
+
 // package info
 // eslint-disable-next-line no-console
 console.table({
@@ -74,6 +76,7 @@ univer.registerPlugin(UniverDocsDrawingUIPlugin);
 univer.registerPlugin(UniverDocsThreadCommentUIPlugin);
 univer.registerPlugin(UniverDocsHyperLinkUIPlugin);
 univer.registerPlugin(UniverDocsMentionUIPlugin);
+
 univer.createUnit(UniverInstanceType.UNIVER_DOC, DEFAULT_DOCUMENT_DATA_CN);
 
 // use for console test

packages/core/package.json

@@ -60,6 +60,7 @@
         "sync:cnpm": "cnpm sync"
     },
     "peerDependencies": {
+        "@univerjs/core": "workspace:*",
         "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
         "rxjs": ">=7.0.0"
     },

packages/core/src/docs/data-model/json-x/json-x.ts

@@ -47,7 +47,8 @@ export class JSONX {
     private static _subTypes: Map<string, ISubType> = new Map();
 
     static registerSubtype(subType: ISubType) {
-        if (this._subTypes.has(subType.name) && this._subTypes.get(subType.name)?.id !== TextX.id) {
+        // Add `subType == null` just use to pass tests.
+        if (subType == null || (this._subTypes.has(subType.name) && this._subTypes.get(subType.name)?.id !== TextX.id)) {
             return;
         }
 
@@ -67,9 +68,17 @@ export class JSONX {
         return json1.type.compose(thisActions, otherActions);
     }
 
-    // Do not use transform in JsonX, pls use transform in JsonXPro.
-    static transform(_thisActions: JSONOp, _otherActions: JSONOp, _priority: TPriority) {
-        throw new Error('transform is not implemented in JsonX');
+    static transform(thisActions: JSONOp, otherActions: JSONOp, priority: TPriority) {
+        return json1.type.transform(thisActions, otherActions, priority);
+    }
+
+    // Use to transform cursor position, just call TextXPro.transformPosition.
+    static transformPosition(thisActions: JSONOp, index: number, priority: TPriority = 'right'): number {
+        if (thisActions && thisActions.length === 2 && thisActions[0] === 'body' && (thisActions[1] as any).et === TextX.name) {
+            return TextX.transformPosition((thisActions[1] as any).e, index, priority === 'left');
+        }
+
+        return index;
     }
 
     static invertWithDoc(actions: JSONOp, doc: IDocumentData) {