@akinon/ui-editor 1.0.2 → 1.0.4

package/dist/esm/tiptap/utils/data-attributes-helper.js

@@ -0,0 +1,68 @@
+/**
+ * Data Attributes Helper for Tiptap Extensions
+ *
+ * This helper provides utilities for adding data-* attribute support to Tiptap extensions.
+ */
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+export const createDataAttributesConfig = () => ({
+    dataAttributes: {
+        default: {},
+        parseHTML: (element) => {
+            const dataAttrs = {};
+            Array.from(element.attributes).forEach(attr => {
+                if (attr.name.startsWith('data-')) {
+                    dataAttrs[attr.name] = attr.value;
+                }
+            });
+            return Object.keys(dataAttrs).length > 0 ? dataAttrs : {};
+        },
+        renderHTML: (attributes) => {
+            return attributes.dataAttributes || {};
+        }
+    }
+});
+export const extractDataAttributes = (nodeAttrs) => {
+    const { dataAttributes } = nodeAttrs, otherAttrs = __rest(nodeAttrs, ["dataAttributes"]);
+    return {
+        dataAttributes: dataAttributes || {},
+        otherAttrs
+    };
+};
+export const addDataAttributesToParent = (parent) => {
+    const parentAttributes = (parent === null || parent === void 0 ? void 0 : parent()) || {};
+    return Object.assign(Object.assign(Object.assign({}, parentAttributes), { class: {
+            default: null,
+            parseHTML: (element) => element.getAttribute('class'),
+            renderHTML: (attributes) => {
+                if (!attributes.class)
+                    return {};
+                return { class: attributes.class };
+            }
+        }, id: {
+            default: null,
+            parseHTML: (element) => element.getAttribute('id'),
+            renderHTML: (attributes) => {
+                if (!attributes.id)
+                    return {};
+                return { id: attributes.id };
+            }
+        }, style: {
+            default: null,
+            parseHTML: (element) => element.getAttribute('style'),
+            renderHTML: (attributes) => {
+                if (!attributes.style)
+                    return {};
+                return { style: attributes.style };
+            }
+        } }), createDataAttributesConfig());
+};

package/dist/esm/tiptap/utils/index.d.ts

@@ -1,5 +1,6 @@
-export * from './format-html';
+export * from './clean-html';
+export * from './data-attributes-helper';
 export * from './highlight-html';
-export * from './normalize-html';
+export * from './prettier-format';
 export * from './tiptap-extensions';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/tiptap/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC"}

package/dist/esm/tiptap/utils/index.js

@@ -1,4 +1,5 @@
-export * from './format-html';
+export * from './clean-html';
+export * from './data-attributes-helper';
 export * from './highlight-html';
-export * from './normalize-html';
+export * from './prettier-format';
 export * from './tiptap-extensions';

package/dist/esm/tiptap/utils/prettier-format.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Formats HTML using Prettier
+ *
+ * @param html - Raw HTML string to format
+ * @returns Promise<formatted HTML string>
+ */
+export declare const formatHtmlWithPrettier: (html: string) => Promise<string>;
+//# sourceMappingURL=prettier-format.d.ts.map

package/dist/esm/tiptap/utils/prettier-format.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prettier-format.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/utils/prettier-format.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAU,MAAM,MAAM,KAAG,OAAO,CAAC,MAAM,CAiBzE,CAAC"}

package/dist/esm/tiptap/utils/prettier-format.js

@@ -0,0 +1,26 @@
+import * as prettierPluginHtml from 'prettier/plugins/html';
+import * as prettier from 'prettier/standalone';
+/**
+ * Formats HTML using Prettier
+ *
+ * @param html - Raw HTML string to format
+ * @returns Promise<formatted HTML string>
+ */
+export const formatHtmlWithPrettier = async (html) => {
+    try {
+        const formatted = await prettier.format(html, {
+            parser: 'html',
+            plugins: [prettierPluginHtml],
+            printWidth: 60,
+            tabWidth: 2,
+            useTabs: false,
+            htmlWhitespaceSensitivity: 'css',
+            singleAttributePerLine: false,
+            proseWrap: 'always'
+        });
+        return formatted.trim();
+    }
+    catch (_a) {
+        return html;
+    }
+};

package/dist/esm/tiptap/utils/tiptap-extensions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tiptap-extensions.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/utils/tiptap-extensions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAwDzD,eAAO,MAAM,aAAa,GAAI,cAAc,MAAM,KAAG,YAAY,EAgGhE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,EAAE,MAAM,IAAI,EAAE,MAAM,MAAM,SAqBvE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,GACvB,KAAK,MAAM,EACX,KAAK;IACH,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,CAAC,MAAM,GAAG;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IAC3C,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;CAC5C,YAmCF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,YAW3C,CAAC"}
+{"version":3,"file":"tiptap-extensions.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/utils/tiptap-extensions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AA6DzD,eAAO,MAAM,aAAa,GAAI,cAAc,MAAM,KAAG,YAAY,EA2NhE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,EAAE,MAAM,IAAI,EAAE,MAAM,MAAM,SAqBvE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,GACvB,KAAK,MAAM,EACX,KAAK;IACH,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,CAAC,MAAM,GAAG;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IAC3C,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;CAC5C,YAmCF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,YAW3C,CAAC"}

package/dist/esm/tiptap/utils/tiptap-extensions.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import Blockquote from '@tiptap/extension-blockquote';
 import Bold from '@tiptap/extension-bold';
 import Code from '@tiptap/extension-code';
@@ -24,10 +35,11 @@ import Typography from '@tiptap/extension-typography';
 import Underline from '@tiptap/extension-underline';
 import Youtube from '@tiptap/extension-youtube';
 import { Dropcursor, Gapcursor } from '@tiptap/extensions';
-import { ALLOWED_IMAGE_MIMES, EXTENSION_PRIORITIES, HEADING_LEVELS, LINK_CONFIG, TEXT_ALIGN_TYPES } from '../constants/editor-config';
+import { ALLOWED_IMAGE_MIMES, EXTENSION_PRIORITIES, HEADING_LEVELS, LINK_CONFIG, TEXT_ALIGN_TYPES, TIPTAP_CONTENT_HOLE } from '../constants/editor-config';
 import { HTML_ELEMENTS } from '../constants/html-elements';
 import { CommentExtension, CustomTableCell, CustomTableHeader, HtmlBlockExtension, HtmlInlineExtension, IframeExtension, ImageUploadExtension, ResetMarksOnEnter } from '../extensions';
 import { SecureScriptExtension } from '../extensions/secure-script-extension';
+import { addDataAttributesToParent, extractDataAttributes } from './data-attributes-helper';
 const DROP_CURSOR_COLOR = '#fff';
 export const getExtensions = (placeholder) => [
     Document.extend({
@@ -36,11 +48,15 @@ export const getExtensions = (placeholder) => [
     Text,
     Paragraph.extend({
         addAttributes() {
-            return {
-                style: { default: null },
-                class: { default: null },
-                id: { default: null }
-            };
+            return addDataAttributesToParent(this.parent);
+        },
+        renderHTML({ HTMLAttributes, node }) {
+            const { dataAttributes, otherAttrs } = extractDataAttributes(node.attrs);
+            return [
+                HTML_ELEMENTS.P,
+                Object.assign(Object.assign(Object.assign({}, HTMLAttributes), otherAttrs), dataAttributes),
+                TIPTAP_CONTENT_HOLE
+            ];
         }
     }),
     HardBreak,
@@ -60,11 +76,55 @@ export const getExtensions = (placeholder) => [
             };
         }
     }),
-    Heading.configure({
+    Heading.extend({
+        addAttributes() {
+            return addDataAttributesToParent(this.parent);
+        },
+        renderHTML({ node, HTMLAttributes }) {
+            const { dataAttributes, otherAttrs } = extractDataAttributes(node.attrs);
+            const hasLevel = this.options.levels.includes(node.attrs.level);
+            const level = hasLevel ? node.attrs.level : this.options.levels[0];
+            // Remove 'level' from attributes
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { level: _level } = otherAttrs, cleanAttrs = __rest(otherAttrs, ["level"]);
+            return [
+                `h${level}`,
+                Object.assign(Object.assign(Object.assign({}, HTMLAttributes), cleanAttrs), dataAttributes),
+                TIPTAP_CONTENT_HOLE
+            ];
+        }
+    }).configure({
         levels: [...HEADING_LEVELS]
     }),
-    Blockquote,
-    CodeBlock,
+    Blockquote.extend({
+        addAttributes() {
+            return addDataAttributesToParent(this.parent);
+        },
+        renderHTML({ HTMLAttributes, node }) {
+            const { dataAttributes, otherAttrs } = extractDataAttributes(node.attrs);
+            return [
+                HTML_ELEMENTS.BLOCKQUOTE,
+                Object.assign(Object.assign(Object.assign({}, HTMLAttributes), otherAttrs), dataAttributes),
+                TIPTAP_CONTENT_HOLE
+            ];
+        }
+    }),
+    CodeBlock.extend({
+        addAttributes() {
+            return addDataAttributesToParent(this.parent);
+        },
+        renderHTML({ HTMLAttributes, node }) {
+            const { dataAttributes, otherAttrs } = extractDataAttributes(node.attrs);
+            // Remove 'language' from pre attributes
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { language: _language } = otherAttrs, cleanAttrs = __rest(otherAttrs, ["language"]);
+            return [
+                HTML_ELEMENTS.PRE,
+                Object.assign(Object.assign(Object.assign({}, HTMLAttributes), cleanAttrs), dataAttributes),
+                [HTML_ELEMENTS.CODE, {}, TIPTAP_CONTENT_HOLE]
+            ];
+        }
+    }),
     HtmlBlockExtension,
     HtmlInlineExtension,
     IframeExtension,
@@ -81,9 +141,45 @@ export const getExtensions = (placeholder) => [
     TextAlign.configure({
         types: [...TEXT_ALIGN_TYPES]
     }),
-    BulletList,
-    OrderedList,
-    ListItem,
+    BulletList.extend({
+        addAttributes() {
+            return addDataAttributesToParent(this.parent);
+        },
+        renderHTML({ HTMLAttributes, node }) {
+            const { dataAttributes, otherAttrs } = extractDataAttributes(node.attrs);
+            return [
+                HTML_ELEMENTS.UL,
+                Object.assign(Object.assign(Object.assign({}, HTMLAttributes), otherAttrs), dataAttributes),
+                0
+            ];
+        }
+    }),
+    OrderedList.extend({
+        addAttributes() {
+            return addDataAttributesToParent(this.parent);
+        },
+        renderHTML({ HTMLAttributes, node }) {
+            const { dataAttributes, otherAttrs } = extractDataAttributes(node.attrs);
+            return [
+                HTML_ELEMENTS.OL,
+                Object.assign(Object.assign(Object.assign({}, HTMLAttributes), otherAttrs), dataAttributes),
+                TIPTAP_CONTENT_HOLE
+            ];
+        }
+    }),
+    ListItem.extend({
+        addAttributes() {
+            return addDataAttributesToParent(this.parent);
+        },
+        renderHTML({ HTMLAttributes, node }) {
+            const { dataAttributes, otherAttrs } = extractDataAttributes(node.attrs);
+            return [
+                HTML_ELEMENTS.LI,
+                Object.assign(Object.assign(Object.assign({}, HTMLAttributes), otherAttrs), dataAttributes),
+                TIPTAP_CONTENT_HOLE
+            ];
+        }
+    }),
     TaskList,
     TaskItem.configure({
         nested: true
@@ -101,8 +197,32 @@ export const getExtensions = (placeholder) => [
             files.forEach(file => handleImageFile(currentEditor, file));
         }
     }),
-    Table.configure({ resizable: true }),
-    TableRow,
+    Table.extend({
+        addAttributes() {
+            return addDataAttributesToParent(this.parent);
+        },
+        renderHTML({ HTMLAttributes, node }) {
+            const { dataAttributes, otherAttrs } = extractDataAttributes(node.attrs);
+            return [
+                HTML_ELEMENTS.TABLE,
+                Object.assign(Object.assign(Object.assign({}, HTMLAttributes), otherAttrs), dataAttributes),
+                TIPTAP_CONTENT_HOLE
+            ];
+        }
+    }).configure({ resizable: true }),
+    TableRow.extend({
+        addAttributes() {
+            return addDataAttributesToParent(this.parent);
+        },
+        renderHTML({ HTMLAttributes, node }) {
+            const { dataAttributes, otherAttrs } = extractDataAttributes(node.attrs);
+            return [
+                HTML_ELEMENTS.TR,
+                Object.assign(Object.assign(Object.assign({}, HTMLAttributes), otherAttrs), dataAttributes),
+                TIPTAP_CONTENT_HOLE
+            ];
+        }
+    }),
     CustomTableHeader,
     CustomTableCell,
     Link.configure({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-editor",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "private": false,
   "description": "A headless lightweight text editor for Akinon.",
   "type": "module",
@@ -50,25 +50,26 @@
     "@tiptap/y-tiptap": "^3.0.1",
     "antd": "^5.27.0",
     "clsx": "^2.1.1",
+    "prettier": "^3.6.2",
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.29",
-    "@akinon/ui-button": "1.4.2",
-    "@akinon/ui-input": "1.2.1",
-    "@akinon/akilocale": "1.2.1",
-    "@akinon/ui-select": "1.4.2",
-    "@akinon/ui-theme": "1.2.1",
-    "@akinon/ui-upload": "1.4.2",
-    "@akinon/ui-dropdown": "1.1.1",
-    "@akinon/ui-color-picker": "1.1.1",
-    "@akinon/ui-popover": "1.1.1"
+    "@akinon/ui-button": "1.4.4",
+    "@akinon/akilocale": "1.2.3",
+    "@akinon/ui-color-picker": "1.1.3",
+    "@akinon/ui-dropdown": "1.1.3",
+    "@akinon/ui-popover": "1.1.3",
+    "@akinon/ui-input": "1.2.3",
+    "@akinon/ui-select": "1.4.4",
+    "@akinon/ui-upload": "1.4.4",
+    "@akinon/ui-theme": "1.2.3"
   },
   "devDependencies": {
     "clean-package": "^2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.10",
     "typescript": "*",
-    "@akinon/typescript-config": "1.1.1",
-    "@akinon/vitest-config": "1.1.1"
+    "@akinon/typescript-config": "1.1.3",
+    "@akinon/vitest-config": "1.1.3"
   },
   "peerDependencies": {
     "react": "^18 || ^19",