@akinon/ui-editor 1.0.3 → 1.0.4

package/dist/esm/tiptap/components/tiptap.js

@@ -5,25 +5,28 @@ import { generateJSON } from '@tiptap/html';
 import { EditorContent, useEditor } from '@tiptap/react';
 import { ConfigProvider } from 'antd';
 import clsx from 'clsx';
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { DragHandleIcon } from '../assets/icons';
-import { EDITOR_HEIGHT, getTableCellDefaults, getTableHeaderDefaults } from '../constants';
-import { formatHtml, getExtensions, normalizeHtml } from '../utils';
+import { EDITOR_CONTENT_HEIGHT, getTableCellDefaults, getTableHeaderDefaults } from '../constants';
+import { cleanDuplicateSpans, getExtensions } from '../utils';
 import { FormatBubbleMenu } from './format-bubble-menu';
 import { HtmlCodeViewer } from './html-code-viewer';
 import { MenuBar } from './menu-bar';
 import { TableBubbleMenu } from './table-bubble-menu';
-export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classNames, toolbar, defaultSourceMode = true, placeholder }) => {
+export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classNames, toolbar, defaultSourceMode = true, placeholder, contentHeight = EDITOR_CONTENT_HEIGHT }) => {
     var _a;
     const isSourceModeButtonHidden = (_a = toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenButtons) === null || _a === void 0 ? void 0 : _a.includes('sourceMode');
     const [isSourceMode, setIsSourceMode] = React.useState(isSourceModeButtonHidden ? false : defaultSourceMode);
-    const [rawHTML, setRawHTML] = React.useState('');
+    const initialContent = React.useMemo(() => {
+        return defaultValue !== undefined ? defaultValue : value || '';
+    }, [defaultValue, value]);
+    const [rawHTML, setRawHTML] = React.useState(initialContent);
     const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
     const { token, hashId } = useToken();
     const customTokens = getSafeCustomTokens(theme);
     const colors = (theme === null || theme === void 0 ? void 0 : theme.colors) || {};
     const baseCls = getPrefixCls('tiptap-editor');
-    const handleEditorClick = (_view, _pos, event) => {
+    const handleEditorClick = useCallback((_view, _pos, event) => {
         const target = event.target;
         const anchor = target.closest('a');
         if (anchor) {
@@ -31,12 +34,13 @@ export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classN
             return true;
         }
         return false;
-    };
+    }, []);
     const extensions = React.useMemo(() => getExtensions(placeholder), [placeholder]);
-    const editorProps = React.useMemo(() => ({
+    const editorProps = useMemo(() => ({
         handleClick: handleEditorClick
-    }), []);
-    const onChangeRef = React.useRef(onChange);
+    }), [handleEditorClick]);
+    const onChangeRef = useRef(onChange);
+    const prevValueRef = useRef(undefined);
     useEffect(() => {
         onChangeRef.current = onChange;
     }, [onChange]);
@@ -59,51 +63,77 @@ export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classN
         }
     }, [editor, readOnly]);
     useEffect(() => {
-        if (editor && value !== undefined && value !== editor.getHTML()) {
+        if (editor &&
+            value !== undefined &&
+            value !== prevValueRef.current &&
+            value !== editor.getHTML()) {
             editor.commands.setContent(value);
+            if (isSourceMode) {
+                setRawHTML(value);
+            }
+            prevValueRef.current = value;
         }
-    }, [editor, value]);
-    useEffect(() => {
-        if (editor && isSourceMode && !rawHTML) {
-            setRawHTML(formatHtml(editor.getHTML()));
-        }
-    }, [editor, isSourceMode, rawHTML]);
+    }, [editor, value, isSourceMode]);
     {
         /* Cleans the HTML by removing the safe 'text/inert' type from script tags,
         making them executable again for the client/production usage. */
     }
-    const getCleanHtml = () => {
+    const getCleanHtml = useCallback(() => {
+        /* v8 ignore next */
+        if (!editor)
+            return '';
         const safeHtml = editor.getHTML();
         const cleanHtml = safeHtml.replace(/ type="text\/inert"/g, '');
         return cleanHtml;
-    };
-    const toggleSource = () => {
+    }, [editor]);
+    const toggleSource = useCallback(() => {
+        /* v8 ignore next */
+        if (!editor)
+            return;
         if (isSourceMode) {
-            editor.commands.setContent(normalizeHtml(rawHTML), {
+            // Clean duplicate spans before setting content to prevent accumulation
+            const cleanedHTML = cleanDuplicateSpans(rawHTML);
+            editor.commands.setContent(cleanedHTML, {
                 emitUpdate: false
             });
             editor.commands.blur();
+            editor.commands.blur();
         }
         else {
-            setRawHTML(formatHtml(editor.getHTML()));
+            const html = editor.getHTML().replace(/ type="text\/inert"/g, '');
+            setRawHTML(cleanDuplicateSpans(html));
         }
         setIsSourceMode(!isSourceMode);
-    };
-    const handleSourceChange = (val) => {
-        var _a;
+    }, [editor, isSourceMode, rawHTML]);
+    // Debounced parent onChange - expensive operations
+    const debouncedParentOnChange = useRef(null);
+    const handleSourceChange = useCallback((val) => {
         setRawHTML(val);
-        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, {
-            html: val,
-            json: generateJSON(val, extensions)
-        });
-    };
+        if (debouncedParentOnChange.current) {
+            clearTimeout(debouncedParentOnChange.current);
+        }
+        debouncedParentOnChange.current = setTimeout(() => {
+            var _a;
+            (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, {
+                html: val,
+                json: generateJSON(val, extensions)
+            });
+        }, 300);
+    }, [extensions]);
+    useEffect(() => {
+        return () => {
+            if (debouncedParentOnChange.current) {
+                clearTimeout(debouncedParentOnChange.current);
+            }
+        };
+    }, []);
     const useStyle = useStyleRegister({
         token: token,
-        path: ['TiptapEditor'],
+        path: ['TiptapEditor', String(contentHeight)],
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         theme: theme
     }, () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
         const prefixCls = `:where(.${hashId}).${baseCls}`;
         const tableCellDefaults = getTableCellDefaults(colors);
         const tableHeaderDefaults = getTableHeaderDefaults(colors);
@@ -112,13 +142,12 @@ export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classN
                 width: '100%'
             },
             [`${prefixCls} .${baseCls}__content`]: {
-                marginTop: '10px',
                 backgroundColor: (_a = colors.ebonyClay) === null || _a === void 0 ? void 0 : _a['475'],
+                border: `${customTokens.border.borderWidthThick} ${customTokens.border.borderSolid} ${(_b = colors.ebonyClay) === null || _b === void 0 ? void 0 : _b['550']}`,
+                borderTop: 'none',
                 outline: 'none',
-                minHeight: EDITOR_HEIGHT,
-                maxHeight: EDITOR_HEIGHT,
-                width: '100%',
-                maxWidth: '100%',
+                minHeight: `${contentHeight}px`,
+                maxHeight: `${contentHeight}px`,
                 borderBottomLeftRadius: '5px',
                 borderBottomRightRadius: '5px',
                 overflowY: 'auto',
@@ -142,19 +171,19 @@ export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classN
                 letterSpacing: '0.5px'
             },
             [`${prefixCls} .${baseCls}__content > .tiptap pre`]: {
-                backgroundColor: (_b = colors.indigo) === null || _b === void 0 ? void 0 : _b['50-05'],
-                color: (_c = colors.neutral) === null || _c === void 0 ? void 0 : _c['60-88'],
-                border: `1px solid ${(_d = colors.indigo) === null || _d === void 0 ? void 0 : _d['100-11']}`,
+                backgroundColor: (_c = colors.indigo) === null || _c === void 0 ? void 0 : _c['50-05'],
+                color: (_d = colors.neutral) === null || _d === void 0 ? void 0 : _d['60-88'],
+                border: `1px solid ${(_e = colors.indigo) === null || _e === void 0 ? void 0 : _e['100-11']}`,
                 padding: '2px 6px',
                 borderRadius: '5px',
                 margin: '16px 0'
             },
             [`${prefixCls} .${baseCls}__content > .tiptap :not(pre) code`]: {
-                backgroundColor: (_e = colors.indigo) === null || _e === void 0 ? void 0 : _e['50-08'],
-                color: (_f = colors.orange) === null || _f === void 0 ? void 0 : _f['300'],
+                backgroundColor: (_f = colors.indigo) === null || _f === void 0 ? void 0 : _f['50-08'],
+                color: (_g = colors.orange) === null || _g === void 0 ? void 0 : _g['300'],
                 padding: '5px',
                 borderRadius: '4px',
-                border: `1px solid ${(_g = colors.indigo) === null || _g === void 0 ? void 0 : _g['100-15']}`,
+                border: `1px solid ${(_h = colors.indigo) === null || _h === void 0 ? void 0 : _h['100-15']}`,
                 fontWeight: customTokens.typography.fontWeightMedium
             },
             [`${prefixCls} .${baseCls}__content > .tiptap[contenteditable='true'] pre code`]: {
@@ -168,7 +197,7 @@ export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classN
                 fontWeight: 'normal'
             },
             [`${prefixCls} .${baseCls}__content .tiptap a`]: {
-                color: (_h = colors.azure) === null || _h === void 0 ? void 0 : _h['500'],
+                color: (_j = colors.azure) === null || _j === void 0 ? void 0 : _j['500'],
                 textDecoration: 'underline',
                 cursor: 'pointer'
             },
@@ -181,7 +210,7 @@ export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classN
                 marginTop: '12px'
             },
             [`${prefixCls} .${baseCls}__content a:hover`]: {
-                color: (_j = colors.azure) === null || _j === void 0 ? void 0 : _j['400']
+                color: (_k = colors.azure) === null || _k === void 0 ? void 0 : _k['400']
             },
             [`${prefixCls} .${baseCls}__content .tiptap ul:not([data-type=taskList])`]: {
                 listStyle: 'disc',
@@ -205,7 +234,7 @@ export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classN
                 marginBottom: '16px'
             },
             [`${prefixCls} .${baseCls}__content .tiptap blockquote p`]: {
-                borderLeft: `4px solid ${(_k = colors.neutral) === null || _k === void 0 ? void 0 : _k['600']}`,
+                borderLeft: `4px solid ${(_l = colors.neutral) === null || _l === void 0 ? void 0 : _l['600']}`,
                 paddingLeft: '0.5rem',
                 marginLeft: '0.5rem',
                 fontStyle: 'italic'
@@ -216,11 +245,11 @@ export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classN
                 width: '100%',
                 margin: '16px 0',
                 overflow: 'hidden',
-                border: `1px solid ${(_l = colors.neutral) === null || _l === void 0 ? void 0 : _l['600']}`
+                border: `1px solid ${(_m = colors.neutral) === null || _m === void 0 ? void 0 : _m['600']}`
             },
             [`${prefixCls} .${baseCls}__content .tiptap table td`]: {
                 minWidth: '1em',
-                border: `1px solid ${(_m = colors.neutral) === null || _m === void 0 ? void 0 : _m['600']}`,
+                border: `1px solid ${(_o = colors.neutral) === null || _o === void 0 ? void 0 : _o['600']}`,
                 padding: '8px 12px',
                 verticalAlign: 'top',
                 boxSizing: 'border-box',
@@ -238,11 +267,11 @@ export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classN
                 fontWeight: 600,
                 textAlign: 'center',
                 backgroundColor: tableHeaderDefaults.backgroundColor,
-                color: (_o = colors.neutral) === null || _o === void 0 ? void 0 : _o['100'],
+                color: (_p = colors.neutral) === null || _p === void 0 ? void 0 : _p['100'],
                 fontSize: '14px'
             },
             [`${prefixCls} .${baseCls}__content .tiptap thead`]: {
-                borderBottom: `2px solid ${(_p = colors.azure) === null || _p === void 0 ? void 0 : _p['500']}`
+                borderBottom: `2px solid ${(_q = colors.azure) === null || _q === void 0 ? void 0 : _q['500']}`
             },
             [`${prefixCls} .${baseCls}__content .tiptap table .selectedCell:after`]: {
                 zIndex: 2,
@@ -252,7 +281,7 @@ export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classN
                 right: 0,
                 top: 0,
                 bottom: 0,
-                background: (_q = colors.indigo) === null || _q === void 0 ? void 0 : _q['300-40'],
+                background: (_r = colors.indigo) === null || _r === void 0 ? void 0 : _r['300-40'],
                 pointerEvents: 'none'
             },
             [`${prefixCls} .${baseCls}__content .tiptap table .column-resize-handle`]: {
@@ -261,7 +290,7 @@ export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classN
                 top: 0,
                 bottom: '-2px',
                 width: '4px',
-                backgroundColor: (_r = colors.azure) === null || _r === void 0 ? void 0 : _r['500'],
+                backgroundColor: (_s = colors.azure) === null || _s === void 0 ? void 0 : _s['500'],
                 pointerEvents: 'none',
                 zIndex: 20
             },
@@ -274,9 +303,8 @@ export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classN
             },
             [`${prefixCls} .source-textarea`]: {
                 width: '100%',
-                marginTop: '10px',
-                minHeight: EDITOR_HEIGHT,
-                height: EDITOR_HEIGHT,
+                minHeight: `${contentHeight}px`,
+                height: `${contentHeight}px`,
                 backgroundColor: token.colorBgContainer,
                 color: token.colorText,
                 fontFamily: 'monospace',
@@ -307,5 +335,5 @@ export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classN
             React.createElement(TableBubbleMenu, { editor: editor }),
             React.createElement(DragHandle, { editor: editor },
                 React.createElement(DragHandleIcon, null)))),
-        isSourceMode && editor ? (React.createElement(HtmlCodeViewer, { value: rawHTML, onChange: handleSourceChange, readOnly: readOnly })) : (React.createElement(EditorContent, { className: clsx(`${baseCls}__content`, classNames === null || classNames === void 0 ? void 0 : classNames.editorContent), editor: editor }))));
+        isSourceMode && editor ? (React.createElement(HtmlCodeViewer, { value: rawHTML, onChange: handleSourceChange, contentHeight: contentHeight, readOnly: readOnly, className: clsx(`${baseCls}__source-mode-wrapper`, classNames === null || classNames === void 0 ? void 0 : classNames.editorSourceModeWrapper) })) : (React.createElement(EditorContent, { className: clsx(`${baseCls}__content`, classNames === null || classNames === void 0 ? void 0 : classNames.editorContent), editor: editor }))));
 };

package/dist/esm/tiptap/constants/editor-config.d.ts

@@ -31,7 +31,16 @@ export declare const FONT_SIZES: {
 export declare const EXTENSION_PRIORITIES: {
     readonly IMAGE_UPLOAD: 1000;
     readonly HORIZONTAL_RULE: 100;
+    readonly COMMENT: 1001;
+    readonly TABLE_SECTION: 80;
 };
+/**
+ * Represents a content "hole" in Tiptap's renderHTML return value.
+ * This special value (0) tells Tiptap where to insert child nodes in the rendered HTML structure.
+ *
+ * @see https://tiptap.dev/guide/custom-extensions#render-html
+ */
+export declare const TIPTAP_CONTENT_HOLE = 0;
 export declare const TOOLBAR_BUTTON_IDS: {
     readonly BOLD: "bold";
     readonly ITALIC: "italic";
@@ -85,5 +94,5 @@ export declare const LINK_CONFIG: {
     PHISHING_DOMAINS: string[];
     NO_AUTOLINK_DOMAINS: string[];
 };
-export declare const EDITOR_HEIGHT = "400px";
+export declare const EDITOR_CONTENT_HEIGHT = 400;
 //# sourceMappingURL=editor-config.d.ts.map

package/dist/esm/tiptap/constants/editor-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor-config.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/constants/editor-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,eAAO,MAAM,aAAa,UAqBzB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;EAMlB,CAAC;AAEX,eAAO,MAAM,UAAU;IAErB,SAAA,CAAC,aAAa,CAAC,EAAE,CAAC,KAAI;IACtB,SAAA,CAAC,aAAa,CAAC,EAAE,CAAC,KAAI;IACtB,SAAA,CAAC,aAAa,CAAC,EAAE,CAAC,KAAI;IACtB,SAAA,CAAC,aAAa,CAAC,EAAE,CAAC,KAAI;;CACd,CAAC;AAEX,eAAO,MAAM,oBAAoB;;;CAGvB,CAAC;AAEX,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BrB,CAAC;AAEX,eAAO,MAAM,iBAAiB;;;;;;;;CAQpB,CAAC;AAEX,eAAO,MAAM,iBAAiB;;;;;CAK7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,UAK/B,CAAC;AAEF,eAAO,MAAM,cAAc,uBAAwB,CAAC;AAEpD,eAAO,MAAM,gBAAgB,6BAG5B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;sBAIE,MAAM,EAAE;yBACL,MAAM,EAAE;CACpC,CAAC;AAEF,eAAO,MAAM,aAAa,UAAU,CAAC"}
+{"version":3,"file":"editor-config.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/constants/editor-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,eAAO,MAAM,aAAa,UAqBzB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;EAMlB,CAAC;AAEX,eAAO,MAAM,UAAU;IAErB,SAAA,CAAC,aAAa,CAAC,EAAE,CAAC,KAAI;IACtB,SAAA,CAAC,aAAa,CAAC,EAAE,CAAC,KAAI;IACtB,SAAA,CAAC,aAAa,CAAC,EAAE,CAAC,KAAI;IACtB,SAAA,CAAC,aAAa,CAAC,EAAE,CAAC,KAAI;;CACd,CAAC;AAEX,eAAO,MAAM,oBAAoB;;;;;CAKvB,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,IAAI,CAAC;AAErC,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BrB,CAAC;AAEX,eAAO,MAAM,iBAAiB;;;;;;;;CAQpB,CAAC;AAEX,eAAO,MAAM,iBAAiB;;;;;CAK7B,CAAC;AAEF,eAAO,MAAM,mBAAmB,UAK/B,CAAC;AAEF,eAAO,MAAM,cAAc,uBAAwB,CAAC;AAEpD,eAAO,MAAM,gBAAgB,6BAG5B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;sBAIE,MAAM,EAAE;yBACL,MAAM,EAAE;CACpC,CAAC;AAEF,eAAO,MAAM,qBAAqB,MAAM,CAAC"}

package/dist/esm/tiptap/constants/editor-config.js

@@ -37,8 +37,17 @@ export const FONT_SIZES = {
 };
 export const EXTENSION_PRIORITIES = {
     IMAGE_UPLOAD: 1000,
-    HORIZONTAL_RULE: 100
+    HORIZONTAL_RULE: 100,
+    COMMENT: 1001,
+    TABLE_SECTION: 80
 };
+/**
+ * Represents a content "hole" in Tiptap's renderHTML return value.
+ * This special value (0) tells Tiptap where to insert child nodes in the rendered HTML structure.
+ *
+ * @see https://tiptap.dev/guide/custom-extensions#render-html
+ */
+export const TIPTAP_CONTENT_HOLE = 0;
 export const TOOLBAR_BUTTON_IDS = {
     BOLD: 'bold',
     ITALIC: 'italic',
@@ -100,4 +109,4 @@ export const LINK_CONFIG = {
     PHISHING_DOMAINS: [],
     NO_AUTOLINK_DOMAINS: []
 };
-export const EDITOR_HEIGHT = '400px';
+export const EDITOR_CONTENT_HEIGHT = 400;

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

@@ -89,6 +89,7 @@ export declare const HTML_ELEMENTS: {
     PARAM: string;
     SOURCE: string;
     TRACK: string;
+    CODE: string;
 };
 export declare const BLOCK_ELEMENTS: string[];
 export declare const VOID_ELEMENTS: string[];

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

@@ -1 +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"}
+{"version":3,"file":"html-elements.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/constants/html-elements.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FzB,CAAC;AAEF,eAAO,MAAM,cAAc,UAiD1B,CAAC;AAEF,eAAO,MAAM,aAAa,UAezB,CAAC"}

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

@@ -88,7 +88,8 @@ export const HTML_ELEMENTS = {
     META: 'meta',
     PARAM: 'param',
     SOURCE: 'source',
-    TRACK: 'track'
+    TRACK: 'track',
+    CODE: 'code'
 };
 export const BLOCK_ELEMENTS = [
     HTML_ELEMENTS.DIV,

package/dist/esm/tiptap/extensions/comment-extension.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"comment-extension.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/extensions/comment-extension.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AAIrD,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AAED,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,OAAO,EAAE;YACP,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,UAAU,CAAC;SAC7C,CAAC;KACH;CACF;AAED,eAAO,MAAM,gBAAgB,2BAgD3B,CAAC"}
+{"version":3,"file":"comment-extension.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/extensions/comment-extension.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AAQrD,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AAED,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,OAAO,EAAE;YACP,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,UAAU,CAAC;SAC7C,CAAC;KACH;CACF;AAED,eAAO,MAAM,gBAAgB,2BAgD3B,CAAC"}

package/dist/esm/tiptap/extensions/comment-extension.js

@@ -1,5 +1,5 @@
 import { Mark, mergeAttributes } from '@tiptap/core';
-import { HTML_ELEMENTS } from '../constants';
+import { EXTENSION_PRIORITIES, HTML_ELEMENTS, TIPTAP_CONTENT_HOLE } from '../constants';
 export const CommentExtension = Mark.create({
     name: 'comment',
     addOptions() {
@@ -24,7 +24,7 @@ export const CommentExtension = Mark.create({
         return [
             {
                 tag: `${HTML_ELEMENTS.SPAN}[data-type="comment"]`,
-                priority: 1001
+                priority: EXTENSION_PRIORITIES.COMMENT
             }
         ];
     },
@@ -34,7 +34,7 @@ export const CommentExtension = Mark.create({
             mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
                 'data-type': 'comment'
             }),
-            0
+            TIPTAP_CONTENT_HOLE
         ];
     },
     addCommands() {

package/dist/esm/tiptap/extensions/custom-table-cell-extension.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-table-cell-extension.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/extensions/custom-table-cell-extension.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAC;AAKrD,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,eAAe,EAAE;YACf,oBAAoB,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,UAAU,CAAC;SAC3E,CAAC;KACH;CACF;AAED,eAAO,MAAM,eAAe,EAAE,IA8E5B,CAAC"}
+{"version":3,"file":"custom-table-cell-extension.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/extensions/custom-table-cell-extension.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAC;AAKrD,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,eAAe,EAAE;YACf,oBAAoB,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,UAAU,CAAC;SAC3E,CAAC;KACH;CACF;AAED,eAAO,MAAM,eAAe,EAAE,IAsF5B,CAAC"}

package/dist/esm/tiptap/extensions/custom-table-cell-extension.js

@@ -1,6 +1,6 @@
 import { mergeAttributes } from '@tiptap/core';
 import { TableCell } from '@tiptap/extension-table';
-import { HTML_ELEMENTS } from '../constants';
+import { HTML_ELEMENTS, TIPTAP_CONTENT_HOLE } from '../constants';
 export const CustomTableCell = TableCell.extend({
     addAttributes() {
         var _a;
@@ -53,12 +53,21 @@ export const CustomTableCell = TableCell.extend({
         delete rest.borderColor;
         delete rest.borderWidth;
         delete rest.borderStyle;
+        // Remove default colspan/rowspan
+        if (rest.colspan === 1)
+            delete rest.colspan;
+        if (rest.rowspan === 1)
+            delete rest.rowspan;
         const existingStyle = HTMLAttributes.style;
         {
             /* Merge existing style with our custom styles */
         }
         const allStyles = [...(existingStyle ? [existingStyle] : []), ...styles];
         const style = allStyles.length > 0 ? allStyles.join('; ') : undefined;
-        return [HTML_ELEMENTS.TD, mergeAttributes(rest, style ? { style } : {}), 0];
+        return [
+            HTML_ELEMENTS.TD,
+            mergeAttributes(rest, style ? { style } : {}),
+            TIPTAP_CONTENT_HOLE
+        ];
     }
 });

package/dist/esm/tiptap/extensions/custom-table-header-extension.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-table-header-extension.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/extensions/custom-table-header-extension.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAC;AAKrD,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,iBAAiB,EAAE;YACjB,sBAAsB,EAAE,CACtB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAChC,UAAU,CAAC;SACjB,CAAC;KACH;CACF;AAED,eAAO,MAAM,iBAAiB,EAAE,IA4E9B,CAAC"}
+{"version":3,"file":"custom-table-header-extension.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/extensions/custom-table-header-extension.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAC;AAKrD,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,iBAAiB,EAAE;YACjB,sBAAsB,EAAE,CACtB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAChC,UAAU,CAAC;SACjB,CAAC;KACH;CACF;AAED,eAAO,MAAM,iBAAiB,EAAE,IAoF9B,CAAC"}

package/dist/esm/tiptap/extensions/custom-table-header-extension.js

@@ -1,6 +1,6 @@
 import { mergeAttributes } from '@tiptap/core';
 import { TableHeader } from '@tiptap/extension-table';
-import { HTML_ELEMENTS } from '../constants';
+import { HTML_ELEMENTS, TIPTAP_CONTENT_HOLE } from '../constants';
 export const CustomTableHeader = TableHeader.extend({
     addAttributes() {
         var _a;
@@ -52,12 +52,21 @@ export const CustomTableHeader = TableHeader.extend({
         delete rest.borderColor;
         delete rest.borderWidth;
         delete rest.borderStyle;
+        // Remove default colspan/rowspan
+        if (rest.colspan === 1)
+            delete rest.colspan;
+        if (rest.rowspan === 1)
+            delete rest.rowspan;
         const existingStyle = HTMLAttributes.style;
         {
             /* Merge existing style with our custom styles */
         }
         const allStyles = [...(existingStyle ? [existingStyle] : []), ...styles];
         const style = allStyles.length > 0 ? allStyles.join('; ') : undefined;
-        return [HTML_ELEMENTS.TH, mergeAttributes(rest, style ? { style } : {}), 0];
+        return [
+            HTML_ELEMENTS.TH,
+            mergeAttributes(rest, style ? { style } : {}),
+            TIPTAP_CONTENT_HOLE
+        ];
     }
 });

package/dist/esm/tiptap/extensions/html-block-extension.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html-block-extension.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/extensions/html-block-extension.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAC;AAIrD,MAAM,WAAW,gBAAgB;IAC/B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CAC9E;AAED,eAAO,MAAM,kBAAkB,6BAiF7B,CAAC"}
+{"version":3,"file":"html-block-extension.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/extensions/html-block-extension.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAC;AAQrD,MAAM,WAAW,gBAAgB;IAC/B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CAC9E;AAED,eAAO,MAAM,kBAAkB,6BAoF7B,CAAC"}

package/dist/esm/tiptap/extensions/html-block-extension.js

@@ -10,7 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { mergeAttributes, Node } from '@tiptap/core';
-import { HTML_ELEMENTS } from '../constants';
+import { HTML_ELEMENTS, TIPTAP_CONTENT_HOLE } from '../constants';
+import { createDataAttributesConfig, extractDataAttributes } from '../utils/data-attributes-helper';
 export const HtmlBlockExtension = Node.create({
     name: 'htmlBlock',
     group: 'block',
@@ -21,24 +22,19 @@ export const HtmlBlockExtension = Node.create({
         };
     },
     addAttributes() {
-        return {
-            tagName: {
+        return Object.assign({ tagName: {
                 default: HTML_ELEMENTS.DIV,
                 parseHTML: element => element.tagName.toLowerCase(),
                 renderHTML: () => {
                     return {};
                 }
-            },
-            style: {
+            }, style: {
                 default: null
-            },
-            class: {
+            }, class: {
                 default: null
-            },
-            id: {
+            }, id: {
                 default: null
-            }
-        };
+            } }, createDataAttributesConfig());
     },
     parseHTML() {
         return [
@@ -79,12 +75,13 @@ export const HtmlBlockExtension = Node.create({
         ];
     },
     renderHTML({ node, HTMLAttributes }) {
-        const _a = node.attrs, { tagName } = _a, otherAttributes = __rest(_a, ["tagName"]);
+        const _a = node.attrs, { tagName } = _a, attrs = __rest(_a, ["tagName"]);
+        const { dataAttributes, otherAttrs } = extractDataAttributes(attrs);
         const tag = tagName || HTML_ELEMENTS.DIV;
         return [
             tag,
-            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, otherAttributes),
-            0
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, otherAttrs, dataAttributes),
+            TIPTAP_CONTENT_HOLE
         ];
     }
 });

package/dist/esm/tiptap/extensions/html-inline-extension.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html-inline-extension.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/extensions/html-inline-extension.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAC;AAIrD,MAAM,WAAW,iBAAiB;IAChC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CAC9E;AAED,eAAO,MAAM,mBAAmB,8BA+E9B,CAAC"}
+{"version":3,"file":"html-inline-extension.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/extensions/html-inline-extension.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAC;AAQrD,MAAM,WAAW,iBAAiB;IAChC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CAC9E;AAED,eAAO,MAAM,mBAAmB,8BAkF9B,CAAC"}

package/dist/esm/tiptap/extensions/html-inline-extension.js

@@ -10,7 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { mergeAttributes, Node } from '@tiptap/core';
-import { HTML_ELEMENTS } from '../constants';
+import { HTML_ELEMENTS, TIPTAP_CONTENT_HOLE } from '../constants';
+import { createDataAttributesConfig, extractDataAttributes } from '../utils/data-attributes-helper';
 export const HtmlInlineExtension = Node.create({
     name: 'htmlInline',
     group: 'inline',
@@ -22,24 +23,19 @@ export const HtmlInlineExtension = Node.create({
         };
     },
     addAttributes() {
-        return {
-            tagName: {
+        return Object.assign({ tagName: {
                 default: HTML_ELEMENTS.SPAN,
                 parseHTML: element => element.tagName.toLowerCase(),
                 renderHTML: () => {
                     return {};
                 }
-            },
-            style: {
+            }, style: {
                 default: null
-            },
-            class: {
+            }, class: {
                 default: null
-            },
-            id: {
+            }, id: {
                 default: null
-            }
-        };
+            } }, createDataAttributesConfig());
     },
     parseHTML() {
         return [
@@ -76,12 +72,13 @@ export const HtmlInlineExtension = Node.create({
         ];
     },
     renderHTML({ node, HTMLAttributes }) {
-        const _a = node.attrs, { tagName } = _a, otherAttributes = __rest(_a, ["tagName"]);
+        const _a = node.attrs, { tagName } = _a, attrs = __rest(_a, ["tagName"]);
+        const { dataAttributes, otherAttrs } = extractDataAttributes(attrs);
         const tag = tagName || HTML_ELEMENTS.SPAN;
         return [
             tag,
-            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, otherAttributes),
-            0
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, otherAttrs, dataAttributes),
+            TIPTAP_CONTENT_HOLE
         ];
     }
 });