@akinon/ui-editor 1.0.0

package/dist/cjs/tiptap/extensions/__tests__/custom-table-cell-extension.test.ts

@@ -0,0 +1,147 @@
+import { Editor } from '@tiptap/core';
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import { Table, TableHeader, TableRow } from '@tiptap/extension-table';
+import Text from '@tiptap/extension-text';
+import { describe, expect, it } from 'vitest';
+
+import { CustomTableCell } from '../custom-table-cell-extension';
+
+describe('CustomTableCell', () => {
+  it('should parse style attributes', () => {
+    const editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Table,
+        TableRow,
+        TableHeader,
+        CustomTableCell
+      ],
+      content:
+        '<table><tbody><tr><td style="background-color: red; border-color: blue; border-width: 2px; border-style: dotted">cell</td></tr></tbody></table>'
+    });
+
+    const json = editor.getJSON();
+    type TableCellNode = {
+      type: string;
+      attrs?: Record<string, unknown>;
+      content?: unknown[];
+    };
+    type TableRowNode = {
+      type: string;
+      content?: TableCellNode[];
+    };
+    type TableNode = {
+      type: string;
+      content?: TableRowNode[];
+    };
+    type DocNode = {
+      type: string;
+      content?: TableNode[];
+    };
+    const cell = (json as DocNode).content?.[0]?.content?.[0]?.content?.[0] as
+      | TableCellNode
+      | undefined;
+
+    expect(cell?.attrs).toMatchObject({
+      backgroundColor: 'red',
+      borderColor: 'blue',
+      borderWidth: '2px',
+      borderStyle: 'dotted'
+    });
+  });
+
+  it('should render style attributes', () => {
+    const editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Table,
+        TableRow,
+        TableHeader,
+        CustomTableCell
+      ],
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'table',
+            content: [
+              {
+                type: 'tableRow',
+                content: [
+                  {
+                    type: 'tableCell',
+                    attrs: {
+                      backgroundColor: 'red',
+                      borderColor: 'blue'
+                    },
+                    content: [
+                      {
+                        type: 'paragraph',
+                        content: [{ type: 'text', text: 'cell' }]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    });
+
+    const html = editor.getHTML();
+    expect(html).toContain('background-color: red');
+    expect(html).toContain('border-color: blue');
+  });
+
+  it('should preserve existing styles', () => {
+    const editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Table,
+        TableRow,
+        TableHeader,
+        CustomTableCell
+      ],
+      content:
+        '<table><tbody><tr><td style="color: pink; background-color: red">cell</td></tr></tbody></table>'
+    });
+
+    const html = editor.getHTML();
+    expect(html).toContain('color: pink');
+    expect(html).toContain('background-color: red');
+  });
+
+  it('should execute updateCellAttributes command', () => {
+    const editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Table,
+        TableRow,
+        TableHeader,
+        CustomTableCell
+      ],
+      content: '<table><tbody><tr><td>cell</td></tr></tbody></table>'
+    });
+
+    editor.commands.setTextSelection(4); // Inside the cell
+    editor.commands.updateCellAttributes({ backgroundColor: 'green' });
+
+    const json = editor.getJSON();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const cell = (json.content as any)?.[0].content?.[0].content?.[0];
+
+    expect(cell?.attrs).toMatchObject({
+      backgroundColor: 'green'
+    });
+  });
+});

package/dist/cjs/tiptap/extensions/__tests__/custom-table-cell-extension.test.tsx

@@ -0,0 +1,90 @@
+import { Editor } from '@tiptap/core';
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import { Table, TableRow } from '@tiptap/extension-table';
+import Text from '@tiptap/extension-text';
+import { NodeType } from '@tiptap/pm/model';
+import { describe, expect, it, vi } from 'vitest';
+
+import { CustomTableCell } from '../custom-table-cell-extension';
+import { CustomTableHeader } from '../custom-table-header-extension';
+
+describe('CustomTableCell', () => {
+  it('should render with custom attributes', () => {
+    const editor = new Editor({
+      extensions: [
+        Document,
+        Table,
+        TableRow,
+        Paragraph,
+        Text,
+        CustomTableCell,
+        CustomTableHeader
+      ],
+      content: `
+        <table>
+          <tbody>
+            <tr>
+              <td style="background-color: #ff0000; border-color: #00ff00;">cell</td>
+            </tr>
+          </tbody>
+        </table>
+      `
+    });
+
+    const cell = editor.view.dom.querySelector('td');
+    expect(cell).not.toBeNull();
+    if (cell) {
+      const bg = cell.style.backgroundColor.replace(/\s/g, '').toLowerCase();
+      const border = cell.style.borderColor.replace(/\s/g, '').toLowerCase();
+
+      expect(['rgb(255,0,0)', '#ff0000', 'red']).toContain(bg);
+      expect(['rgb(0,255,0)', '#00ff00', 'lime']).toContain(border);
+    }
+  });
+
+  it('should not throw error for missing node type', () => {
+    const editor2 = new Editor({
+      extensions: [
+        Document,
+        Table,
+        TableRow,
+        Paragraph,
+        Text,
+        CustomTableCell,
+        CustomTableHeader
+      ]
+    });
+
+    expect(() => {
+      editor2.commands.insertTable({ rows: 3, cols: 3 });
+    }).not.toThrow();
+  });
+
+  it('should include parent commands', () => {
+    const config = CustomTableCell.config;
+    const addCommandsFn = config.addCommands;
+
+    if (!addCommandsFn) {
+      throw new Error('addCommands not defined');
+    }
+
+    const mockParentCommand = vi.fn();
+    const mockContext = {
+      name: 'tableCell',
+      options: {},
+      storage: {},
+      editor: {} as Editor,
+      type: { name: 'tableCell' } as NodeType,
+      parent: () =>
+        ({ someParentCommand: mockParentCommand }) as Partial<
+          Record<string, unknown>
+        >
+    };
+    const commands = addCommandsFn.call(mockContext);
+
+    expect(commands).toBeDefined();
+    expect(commands?.updateCellAttributes).toBeDefined();
+    expect(Object.keys(commands || {}).length).toBeGreaterThan(1);
+  });
+});

package/dist/cjs/tiptap/extensions/__tests__/custom-table-header-extension.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=custom-table-header-extension.test.d.ts.map

package/dist/cjs/tiptap/extensions/__tests__/custom-table-header-extension.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-table-header-extension.test.d.ts","sourceRoot":"","sources":["../../../../../src/tiptap/extensions/__tests__/custom-table-header-extension.test.ts"],"names":[],"mappings":""}

package/dist/cjs/tiptap/extensions/__tests__/custom-table-header-extension.test.js

@@ -0,0 +1,183 @@
+import { Editor } from '@tiptap/core';
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import { Table, TableCell, TableRow } from '@tiptap/extension-table';
+import Text from '@tiptap/extension-text';
+import { describe, expect, it, vi } from 'vitest';
+import { CustomTableHeader } from '../custom-table-header-extension';
+describe('CustomTableHeader', () => {
+    it('should parse style attributes', () => {
+        var _a, _b, _c;
+        const editor = new Editor({
+            extensions: [
+                Document,
+                Paragraph,
+                Text,
+                Table,
+                TableRow,
+                TableCell,
+                CustomTableHeader
+            ],
+            content: '<table><tbody><tr><th style="background-color: red; border-color: blue; border-width: 2px; border-style: dotted">header</th></tr></tbody></table>'
+        });
+        const json = editor.getJSON();
+        // doc -> table -> tableRow -> tableHeader
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const header = (_c = (_b = (_a = json.content) === null || _a === void 0 ? void 0 : _a[0].content) === null || _b === void 0 ? void 0 : _b[0].content) === null || _c === void 0 ? void 0 : _c[0];
+        expect(header === null || header === void 0 ? void 0 : header.attrs).toMatchObject({
+            backgroundColor: 'red',
+            borderColor: 'blue',
+            borderWidth: '2px',
+            borderStyle: 'dotted'
+        });
+    });
+    it('should render style attributes', () => {
+        const editor = new Editor({
+            extensions: [
+                Document,
+                Paragraph,
+                Text,
+                Table,
+                TableRow,
+                TableCell,
+                CustomTableHeader
+            ],
+            content: {
+                type: 'doc',
+                content: [
+                    {
+                        type: 'table',
+                        content: [
+                            {
+                                type: 'tableRow',
+                                content: [
+                                    {
+                                        type: 'tableHeader',
+                                        attrs: {
+                                            backgroundColor: 'red',
+                                            borderColor: 'blue'
+                                        },
+                                        content: [
+                                            {
+                                                type: 'paragraph',
+                                                content: [{ type: 'text', text: 'header' }]
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        });
+        const html = editor.getHTML();
+        expect(html).toContain('background-color: red');
+        expect(html).toContain('border-color: blue');
+    });
+    it('should preserve existing styles', () => {
+        const editor = new Editor({
+            extensions: [
+                Document,
+                Paragraph,
+                Text,
+                Table,
+                TableRow,
+                TableCell,
+                CustomTableHeader
+            ],
+            content: '<table><tbody><tr><th style="color: pink; background-color: red">header</th></tr></tbody></table>'
+        });
+        const html = editor.getHTML();
+        expect(html).toContain('color: pink');
+        expect(html).toContain('background-color: red');
+    });
+    it('should execute updateHeaderAttributes command', () => {
+        var _a, _b, _c;
+        const editor = new Editor({
+            extensions: [
+                Document,
+                Paragraph,
+                Text,
+                Table,
+                TableRow,
+                TableCell,
+                CustomTableHeader
+            ],
+            content: '<table><tbody><tr><th>header</th></tr></tbody></table>'
+        });
+        editor.commands.setTextSelection(4); // Inside the header
+        editor.commands.updateHeaderAttributes({ backgroundColor: 'green' });
+        const json = editor.getJSON();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const header = (_c = (_b = (_a = json.content) === null || _a === void 0 ? void 0 : _a[0].content) === null || _b === void 0 ? void 0 : _b[0].content) === null || _c === void 0 ? void 0 : _c[0];
+        expect(header === null || header === void 0 ? void 0 : header.attrs).toMatchObject({
+            backgroundColor: 'green'
+        });
+    });
+    it('should return command function from addCommands', () => {
+        const mockCommands = {
+            updateAttributes: vi.fn(() => true)
+        };
+        const attrs = { borderColor: 'red' };
+        const config = CustomTableHeader.config;
+        const addCommandsFn = config.addCommands;
+        if (!addCommandsFn) {
+            throw new Error('addCommands not defined');
+        }
+        const mockContext = {
+            name: 'tableHeader',
+            options: {},
+            storage: {},
+            editor: {},
+            type: { name: 'tableHeader' },
+            parent: () => ({ someParentCommand: vi.fn() })
+        };
+        const commands = addCommandsFn.call(mockContext);
+        expect(commands).toBeDefined();
+        expect(commands === null || commands === void 0 ? void 0 : commands.updateHeaderAttributes).toBeDefined();
+        let result;
+        if (commands === null || commands === void 0 ? void 0 : commands.updateHeaderAttributes) {
+            const mockEditor = {};
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const mockCommandProps = {
+                commands: mockCommands,
+                editor: mockEditor,
+                tr: {},
+                state: {},
+                dispatch: vi.fn(),
+                view: {},
+                can: vi.fn(),
+                chain: vi.fn(),
+                get: vi.fn()
+            };
+            result = commands.updateHeaderAttributes(attrs)(mockCommandProps);
+            expect(mockCommands.updateAttributes).toHaveBeenCalledWith('tableHeader', attrs);
+            expect(result).toBe(true);
+        }
+        else {
+            throw new Error('updateHeaderAttributes is not defined');
+        }
+    });
+    it('should include parent commands', () => {
+        const config = CustomTableHeader.config;
+        const addCommandsFn = config.addCommands;
+        if (!addCommandsFn) {
+            throw new Error('addCommands not defined');
+        }
+        const mockContext = {
+            name: 'tableHeader',
+            options: {},
+            storage: {},
+            editor: {},
+            type: { name: 'tableHeader' },
+            parent: () => ({
+                someParentCommand: () => () => true
+            })
+        };
+        const commands = addCommandsFn.call(mockContext);
+        expect(commands).toBeDefined();
+        expect(commands === null || commands === void 0 ? void 0 : commands.updateHeaderAttributes).toBeDefined();
+        expect(commands === null || commands === void 0 ? void 0 : commands.someParentCommand).toBeDefined();
+    });
+});

package/dist/cjs/tiptap/extensions/__tests__/custom-table-header-extension.test.ts

@@ -0,0 +1,213 @@
+import { Editor, RawCommands, SingleCommands } from '@tiptap/core';
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import { Table, TableCell, TableRow } from '@tiptap/extension-table';
+import Text from '@tiptap/extension-text';
+import { NodeType } from '@tiptap/pm/model';
+import { describe, expect, it, vi } from 'vitest';
+
+import { CustomTableHeader } from '../custom-table-header-extension';
+
+describe('CustomTableHeader', () => {
+  it('should parse style attributes', () => {
+    const editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Table,
+        TableRow,
+        TableCell,
+        CustomTableHeader
+      ],
+      content:
+        '<table><tbody><tr><th style="background-color: red; border-color: blue; border-width: 2px; border-style: dotted">header</th></tr></tbody></table>'
+    });
+
+    const json = editor.getJSON();
+    // doc -> table -> tableRow -> tableHeader
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const header = (json.content as any)?.[0].content?.[0].content?.[0];
+
+    expect(header?.attrs).toMatchObject({
+      backgroundColor: 'red',
+      borderColor: 'blue',
+      borderWidth: '2px',
+      borderStyle: 'dotted'
+    });
+  });
+
+  it('should render style attributes', () => {
+    const editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Table,
+        TableRow,
+        TableCell,
+        CustomTableHeader
+      ],
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'table',
+            content: [
+              {
+                type: 'tableRow',
+                content: [
+                  {
+                    type: 'tableHeader',
+                    attrs: {
+                      backgroundColor: 'red',
+                      borderColor: 'blue'
+                    },
+                    content: [
+                      {
+                        type: 'paragraph',
+                        content: [{ type: 'text', text: 'header' }]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    });
+
+    const html = editor.getHTML();
+    expect(html).toContain('background-color: red');
+    expect(html).toContain('border-color: blue');
+  });
+
+  it('should preserve existing styles', () => {
+    const editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Table,
+        TableRow,
+        TableCell,
+        CustomTableHeader
+      ],
+      content:
+        '<table><tbody><tr><th style="color: pink; background-color: red">header</th></tr></tbody></table>'
+    });
+
+    const html = editor.getHTML();
+    expect(html).toContain('color: pink');
+    expect(html).toContain('background-color: red');
+  });
+
+  it('should execute updateHeaderAttributes command', () => {
+    const editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Table,
+        TableRow,
+        TableCell,
+        CustomTableHeader
+      ],
+      content: '<table><tbody><tr><th>header</th></tr></tbody></table>'
+    });
+
+    editor.commands.setTextSelection(4); // Inside the header
+    editor.commands.updateHeaderAttributes({ backgroundColor: 'green' });
+
+    const json = editor.getJSON();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const header = (json.content as any)?.[0].content?.[0].content?.[0];
+
+    expect(header?.attrs).toMatchObject({
+      backgroundColor: 'green'
+    });
+  });
+
+  it('should return command function from addCommands', () => {
+    const mockCommands: Partial<SingleCommands> = {
+      updateAttributes: vi.fn(() => true)
+    };
+    const attrs = { borderColor: 'red' };
+
+    const config = CustomTableHeader.config;
+    const addCommandsFn = config.addCommands;
+
+    if (!addCommandsFn) {
+      throw new Error('addCommands not defined');
+    }
+
+    const mockContext = {
+      name: 'tableHeader',
+      options: {},
+      storage: {},
+      editor: {} as Editor,
+      type: { name: 'tableHeader' } as NodeType,
+      parent: () =>
+        ({ someParentCommand: vi.fn() }) as Partial<Record<string, unknown>>
+    };
+    const commands = addCommandsFn.call(mockContext);
+
+    expect(commands).toBeDefined();
+    expect(commands?.updateHeaderAttributes).toBeDefined();
+
+    let result: boolean | undefined;
+    if (commands?.updateHeaderAttributes) {
+      const mockEditor = {} as Editor;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const mockCommandProps: any = {
+        commands: mockCommands as SingleCommands,
+        editor: mockEditor,
+        tr: {},
+        state: {},
+        dispatch: vi.fn(),
+        view: {},
+        can: vi.fn(),
+        chain: vi.fn(),
+        get: vi.fn()
+      };
+
+      result = commands.updateHeaderAttributes(attrs)(mockCommandProps);
+      expect(mockCommands.updateAttributes).toHaveBeenCalledWith(
+        'tableHeader',
+        attrs
+      );
+      expect(result).toBe(true);
+    } else {
+      throw new Error('updateHeaderAttributes is not defined');
+    }
+  });
+
+  it('should include parent commands', () => {
+    const config = CustomTableHeader.config;
+    const addCommandsFn = config.addCommands;
+
+    if (!addCommandsFn) {
+      throw new Error('addCommands not defined');
+    }
+
+    const mockContext = {
+      name: 'tableHeader',
+      options: {},
+      storage: {},
+      editor: {} as Editor,
+      type: { name: 'tableHeader' } as NodeType,
+      parent: () =>
+        ({
+          someParentCommand: () => () => true
+        }) as Partial<RawCommands>
+    };
+    const commands = addCommandsFn.call(mockContext);
+
+    expect(commands).toBeDefined();
+    expect(commands?.updateHeaderAttributes).toBeDefined();
+    expect(
+      (commands as Record<string, unknown>)?.someParentCommand
+    ).toBeDefined();
+  });
+});

package/dist/cjs/tiptap/extensions/__tests__/html-block-extension.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=html-block-extension.test.d.ts.map

package/dist/cjs/tiptap/extensions/__tests__/html-block-extension.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-block-extension.test.d.ts","sourceRoot":"","sources":["../../../../../src/tiptap/extensions/__tests__/html-block-extension.test.ts"],"names":[],"mappings":""}