@akinon/ui-editor 1.0.0

package/dist/cjs/tiptap/constants/html-elements.d.ts

@@ -0,0 +1,95 @@
+export declare const HTML_ELEMENTS: {
+    DIV: string;
+    SECTION: string;
+    ARTICLE: string;
+    MAIN: string;
+    HEADER: string;
+    FOOTER: string;
+    NAV: string;
+    ASIDE: string;
+    FIGURE: string;
+    FIGCAPTION: string;
+    BLOCKQUOTE: string;
+    PRE: string;
+    HR: string;
+    DETAILS: string;
+    SUMMARY: string;
+    DIALOG: string;
+    UL: string;
+    OL: string;
+    LI: string;
+    DL: string;
+    DT: string;
+    DD: string;
+    FORM: string;
+    FIELDSET: string;
+    LEGEND: string;
+    ADDRESS: string;
+    HGROUP: string;
+    MENU: string;
+    H1: string;
+    H2: string;
+    H3: string;
+    H4: string;
+    H5: string;
+    H6: string;
+    SPAN: string;
+    LABEL: string;
+    A: string;
+    BR: string;
+    Q: string;
+    CITE: string;
+    DFN: string;
+    MARK: string;
+    TIME: string;
+    VAR: string;
+    ABBR: string;
+    KBD: string;
+    SAMP: string;
+    SMALL: string;
+    BIG: string;
+    SUB: string;
+    SUP: string;
+    BDI: string;
+    BDO: string;
+    DATA: string;
+    METER: string;
+    OUTPUT: string;
+    PROGRESS: string;
+    RUBY: string;
+    RT: string;
+    RP: string;
+    WBR: string;
+    INS: string;
+    DEL: string;
+    S: string;
+    SCRIPT: string;
+    TABLE: string;
+    THEAD: string;
+    TBODY: string;
+    TFOOT: string;
+    TR: string;
+    TH: string;
+    TD: string;
+    CAPTION: string;
+    COLGROUP: string;
+    COL: string;
+    IFRAME: string;
+    P: string;
+    STYLE: string;
+    NOSCRIPT: string;
+    CANVAS: string;
+    AREA: string;
+    BASE: string;
+    EMBED: string;
+    IMG: string;
+    INPUT: string;
+    LINK: string;
+    META: string;
+    PARAM: string;
+    SOURCE: string;
+    TRACK: string;
+};
+export declare const BLOCK_ELEMENTS: string[];
+export declare const VOID_ELEMENTS: string[];
+//# sourceMappingURL=html-elements.d.ts.map

package/dist/cjs/tiptap/constants/html-elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-elements.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/constants/html-elements.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FzB,CAAC;AAEF,eAAO,MAAM,cAAc,UAiD1B,CAAC;AAEF,eAAO,MAAM,aAAa,UAezB,CAAC"}

package/dist/cjs/tiptap/constants/html-elements.js

@@ -0,0 +1,158 @@
+export const HTML_ELEMENTS = {
+    DIV: 'div',
+    SECTION: 'section',
+    ARTICLE: 'article',
+    MAIN: 'main',
+    HEADER: 'header',
+    FOOTER: 'footer',
+    NAV: 'nav',
+    ASIDE: 'aside',
+    FIGURE: 'figure',
+    FIGCAPTION: 'figcaption',
+    BLOCKQUOTE: 'blockquote',
+    PRE: 'pre',
+    HR: 'hr',
+    DETAILS: 'details',
+    SUMMARY: 'summary',
+    DIALOG: 'dialog',
+    UL: 'ul',
+    OL: 'ol',
+    LI: 'li',
+    DL: 'dl',
+    DT: 'dt',
+    DD: 'dd',
+    FORM: 'form',
+    FIELDSET: 'fieldset',
+    LEGEND: 'legend',
+    ADDRESS: 'address',
+    HGROUP: 'hgroup',
+    MENU: 'menu',
+    H1: 'h1',
+    H2: 'h2',
+    H3: 'h3',
+    H4: 'h4',
+    H5: 'h5',
+    H6: 'h6',
+    SPAN: 'span',
+    LABEL: 'label',
+    A: 'a',
+    BR: 'br',
+    Q: 'q',
+    CITE: 'cite',
+    DFN: 'dfn',
+    MARK: 'mark',
+    TIME: 'time',
+    VAR: 'var',
+    ABBR: 'abbr',
+    KBD: 'kbd',
+    SAMP: 'samp',
+    SMALL: 'small',
+    BIG: 'big',
+    SUB: 'sub',
+    SUP: 'sup',
+    BDI: 'bdi',
+    BDO: 'bdo',
+    DATA: 'data',
+    METER: 'meter',
+    OUTPUT: 'output',
+    PROGRESS: 'progress',
+    RUBY: 'ruby',
+    RT: 'rt',
+    RP: 'rp',
+    WBR: 'wbr',
+    INS: 'ins',
+    DEL: 'del',
+    S: 's',
+    SCRIPT: 'script',
+    TABLE: 'table',
+    THEAD: 'thead',
+    TBODY: 'tbody',
+    TFOOT: 'tfoot',
+    TR: 'tr',
+    TH: 'th',
+    TD: 'td',
+    CAPTION: 'caption',
+    COLGROUP: 'colgroup',
+    COL: 'col',
+    IFRAME: 'iframe',
+    P: 'p',
+    STYLE: 'style',
+    NOSCRIPT: 'noscript',
+    CANVAS: 'canvas',
+    AREA: 'area',
+    BASE: 'base',
+    EMBED: 'embed',
+    IMG: 'img',
+    INPUT: 'input',
+    LINK: 'link',
+    META: 'meta',
+    PARAM: 'param',
+    SOURCE: 'source',
+    TRACK: 'track'
+};
+export const BLOCK_ELEMENTS = [
+    HTML_ELEMENTS.DIV,
+    HTML_ELEMENTS.ARTICLE,
+    HTML_ELEMENTS.SECTION,
+    HTML_ELEMENTS.HEADER,
+    HTML_ELEMENTS.FOOTER,
+    HTML_ELEMENTS.NAV,
+    HTML_ELEMENTS.ASIDE,
+    HTML_ELEMENTS.MAIN,
+    HTML_ELEMENTS.ADDRESS,
+    HTML_ELEMENTS.HGROUP,
+    HTML_ELEMENTS.P,
+    HTML_ELEMENTS.BLOCKQUOTE,
+    HTML_ELEMENTS.PRE,
+    HTML_ELEMENTS.HR,
+    HTML_ELEMENTS.FIGURE,
+    HTML_ELEMENTS.FIGCAPTION,
+    HTML_ELEMENTS.H1,
+    HTML_ELEMENTS.H2,
+    HTML_ELEMENTS.H3,
+    HTML_ELEMENTS.H4,
+    HTML_ELEMENTS.H5,
+    HTML_ELEMENTS.H6,
+    HTML_ELEMENTS.UL,
+    HTML_ELEMENTS.OL,
+    HTML_ELEMENTS.LI,
+    HTML_ELEMENTS.DL,
+    HTML_ELEMENTS.DT,
+    HTML_ELEMENTS.DD,
+    HTML_ELEMENTS.TABLE,
+    HTML_ELEMENTS.CAPTION,
+    HTML_ELEMENTS.THEAD,
+    HTML_ELEMENTS.TBODY,
+    HTML_ELEMENTS.TFOOT,
+    HTML_ELEMENTS.TR,
+    HTML_ELEMENTS.TD,
+    HTML_ELEMENTS.TH,
+    HTML_ELEMENTS.COLGROUP,
+    HTML_ELEMENTS.FORM,
+    HTML_ELEMENTS.FIELDSET,
+    HTML_ELEMENTS.LEGEND,
+    HTML_ELEMENTS.DETAILS,
+    HTML_ELEMENTS.SUMMARY,
+    HTML_ELEMENTS.DIALOG,
+    HTML_ELEMENTS.MENU,
+    HTML_ELEMENTS.SCRIPT,
+    HTML_ELEMENTS.STYLE,
+    HTML_ELEMENTS.NOSCRIPT,
+    HTML_ELEMENTS.CANVAS
+];
+export const VOID_ELEMENTS = [
+    HTML_ELEMENTS.AREA,
+    HTML_ELEMENTS.BASE,
+    HTML_ELEMENTS.BR,
+    HTML_ELEMENTS.COL,
+    HTML_ELEMENTS.EMBED,
+    HTML_ELEMENTS.HR,
+    HTML_ELEMENTS.IMG,
+    HTML_ELEMENTS.INPUT,
+    HTML_ELEMENTS.LINK,
+    HTML_ELEMENTS.META,
+    HTML_ELEMENTS.PARAM,
+    HTML_ELEMENTS.SOURCE,
+    HTML_ELEMENTS.TRACK,
+    HTML_ELEMENTS.WBR
+];

package/dist/cjs/tiptap/constants/index.d.ts

@@ -0,0 +1,4 @@
+export * from './editor-config';
+export * from './html-elements';
+export * from './table-defaults';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/tiptap/constants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/constants/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC"}

package/dist/cjs/tiptap/constants/index.js

@@ -0,0 +1,3 @@
+export * from './editor-config';
+export * from './html-elements';
+export * from './table-defaults';

package/dist/cjs/tiptap/constants/table-defaults.d.ts

@@ -0,0 +1,14 @@
+import type { DefaultThemeConfig } from '@akinon/ui-theme';
+export declare const getTableCellDefaults: (colors: DefaultThemeConfig["colors"]) => {
+    borderColor: string;
+    borderWidth: string;
+    borderStyle: string;
+    backgroundColor: string;
+};
+export declare const getTableHeaderDefaults: (colors: DefaultThemeConfig["colors"]) => {
+    borderColor: string;
+    borderWidth: string;
+    borderStyle: string;
+    backgroundColor: string;
+};
+//# sourceMappingURL=table-defaults.d.ts.map

package/dist/cjs/tiptap/constants/table-defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-defaults.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/constants/table-defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,eAAO,MAAM,oBAAoB,GAAI,QAAQ,kBAAkB,CAAC,QAAQ,CAAC;;;;;CAKvE,CAAC;AAEH,eAAO,MAAM,sBAAsB,GACjC,QAAQ,kBAAkB,CAAC,QAAQ,CAAC;;;;;CAMpC,CAAC"}

package/dist/cjs/tiptap/constants/table-defaults.js

@@ -0,0 +1,18 @@
+export const getTableCellDefaults = (colors) => {
+    var _a;
+    return ({
+        borderColor: (_a = colors === null || colors === void 0 ? void 0 : colors.neutral) === null || _a === void 0 ? void 0 : _a['600'],
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        backgroundColor: 'transparent'
+    });
+};
+export const getTableHeaderDefaults = (colors) => {
+    var _a, _b;
+    return ({
+        borderColor: (_a = colors === null || colors === void 0 ? void 0 : colors.neutral) === null || _a === void 0 ? void 0 : _a['600'],
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        backgroundColor: (_b = colors === null || colors === void 0 ? void 0 : colors.ebonyClay) === null || _b === void 0 ? void 0 : _b['550']
+    });
+};

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

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

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

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

package/dist/cjs/tiptap/extensions/__tests__/comment-extension.test.js

@@ -0,0 +1,75 @@
+import { Editor } from '@tiptap/core';
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import { describe, expect, it } from 'vitest';
+import { CommentExtension } from '../comment-extension';
+describe('CommentExtension', () => {
+    it('should parse span with data-type="comment"', () => {
+        var _a, _b;
+        const editor = new Editor({
+            extensions: [Document, Paragraph, Text, CommentExtension],
+            content: '<span data-type="comment" data-content="test comment">text</span>'
+        });
+        const json = editor.getJSON();
+        const paragraph = (_a = json.content) === null || _a === void 0 ? void 0 : _a[0];
+        const textNode = (_b = paragraph === null || paragraph === void 0 ? void 0 : paragraph.content) === null || _b === void 0 ? void 0 : _b[0];
+        expect(textNode === null || textNode === void 0 ? void 0 : textNode.marks).toEqual([
+            {
+                type: 'comment',
+                attrs: {
+                    content: 'test comment'
+                }
+            }
+        ]);
+    });
+    it('should render span with correct attributes', () => {
+        const editor = new Editor({
+            extensions: [Document, Paragraph, Text, CommentExtension],
+            content: {
+                type: 'doc',
+                content: [
+                    {
+                        type: 'paragraph',
+                        content: [
+                            {
+                                type: 'text',
+                                text: 'text',
+                                marks: [
+                                    {
+                                        type: 'comment',
+                                        attrs: {
+                                            content: 'test comment'
+                                        }
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        });
+        const html = editor.getHTML();
+        expect(html).toContain('data-type="comment"');
+        expect(html).toContain('data-content="test comment"');
+    });
+    it('should execute setComment command', () => {
+        var _a, _b;
+        const editor = new Editor({
+            extensions: [Document, Paragraph, Text, CommentExtension]
+        });
+        editor.commands.setContent('<p>test</p>');
+        editor.commands.setTextSelection({ from: 1, to: 5 });
+        editor.commands.setComment('new comment');
+        const json = editor.getJSON();
+        const textNode = (_b = (_a = json.content) === null || _a === void 0 ? void 0 : _a[0].content) === null || _b === void 0 ? void 0 : _b[0];
+        expect(textNode === null || textNode === void 0 ? void 0 : textNode.marks).toEqual([
+            {
+                type: 'comment',
+                attrs: {
+                    content: 'new comment'
+                }
+            }
+        ]);
+    });
+});

package/dist/cjs/tiptap/extensions/__tests__/comment-extension.test.ts

@@ -0,0 +1,84 @@
+import { Editor } from '@tiptap/core';
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import { describe, expect, it } from 'vitest';
+
+import { CommentExtension } from '../comment-extension';
+
+describe('CommentExtension', () => {
+  it('should parse span with data-type="comment"', () => {
+    const editor = new Editor({
+      extensions: [Document, Paragraph, Text, CommentExtension],
+      content:
+        '<span data-type="comment" data-content="test comment">text</span>'
+    });
+
+    const json = editor.getJSON();
+    const paragraph = json.content?.[0];
+    const textNode = paragraph?.content?.[0];
+
+    expect(textNode?.marks).toEqual([
+      {
+        type: 'comment',
+        attrs: {
+          content: 'test comment'
+        }
+      }
+    ]);
+  });
+
+  it('should render span with correct attributes', () => {
+    const editor = new Editor({
+      extensions: [Document, Paragraph, Text, CommentExtension],
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'text',
+                marks: [
+                  {
+                    type: 'comment',
+                    attrs: {
+                      content: 'test comment'
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    });
+
+    const html = editor.getHTML();
+    expect(html).toContain('data-type="comment"');
+    expect(html).toContain('data-content="test comment"');
+  });
+
+  it('should execute setComment command', () => {
+    const editor = new Editor({
+      extensions: [Document, Paragraph, Text, CommentExtension]
+    });
+
+    editor.commands.setContent('<p>test</p>');
+    editor.commands.setTextSelection({ from: 1, to: 5 });
+    editor.commands.setComment('new comment');
+
+    const json = editor.getJSON();
+    const textNode = json.content?.[0].content?.[0];
+
+    expect(textNode?.marks).toEqual([
+      {
+        type: 'comment',
+        attrs: {
+          content: 'new comment'
+        }
+      }
+    ]);
+  });
+});

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

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

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

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

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

@@ -0,0 +1,116 @@
+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', () => {
+        var _a, _b, _c, _d, _e;
+        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();
+        const cell = (_e = (_d = (_c = (_b = (_a = json.content) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.content) === null || _e === void 0 ? void 0 : _e[0];
+        expect(cell === null || cell === void 0 ? void 0 : 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', () => {
+        var _a, _b, _c;
+        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 = (_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(cell === null || cell === void 0 ? void 0 : cell.attrs).toMatchObject({
+            backgroundColor: 'green'
+        });
+    });
+});