@akinon/ui-editor 1.0.2 → 1.0.4

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/dist/esm/tiptap/components/__tests__/html-code-viewer.test.js

@@ -1,8 +1,9 @@
 import '@testing-library/jest-dom';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { createEvent, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ConfigProvider } from 'antd';
 import React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { formatHtmlWithPrettier } from '../../utils';
 import { HtmlCodeViewer } from '../html-code-viewer';
 vi.mock('@ant-design/cssinjs', () => ({
     useStyleRegister: vi.fn((_config, cb) => {
@@ -11,7 +12,14 @@ vi.mock('@ant-design/cssinjs', () => ({
     })
 }));
 vi.mock('@akinon/ui-theme', () => ({
-    useToken: () => ({ token: {}, hashId: 'hash-id' })
+    useToken: () => ({ token: {}, hashId: 'hash-id' }),
+    getSafeCustomTokens: vi.fn(() => ({
+        border: { borderWidthThick: '2px', borderSolid: 'solid' }
+    }))
+}));
+vi.mock('../../utils', () => ({
+    highlightHtml: (html) => html,
+    formatHtmlWithPrettier: vi.fn((html) => Promise.resolve(html))
 }));
 describe('HtmlCodeViewer', () => {
     const defaultProps = {
@@ -76,7 +84,11 @@ describe('HtmlCodeViewer', () => {
                 neutral: {
                     '50': '#fff',
                     '1000': '#000'
-                }
+                },
+                red: { '825': '#f00', '999': '#a00', '815': '#d00' },
+                blue: { '999': '#00f' },
+                green: { '825': '#0f0' },
+                ebonyClay: { '550': '#123' }
             }
         };
         render(
@@ -86,4 +98,68 @@ describe('HtmlCodeViewer', () => {
         const textarea = screen.getByRole('textbox');
         expect(textarea).toBeInTheDocument();
     });
+    it('should format code on mount', async () => {
+        const formatted = '<p> Formatted </p>';
+        vi.mocked(formatHtmlWithPrettier).mockResolvedValue(formatted);
+        render(React.createElement(HtmlCodeViewer, Object.assign({}, defaultProps, { value: "<p>Raw</p>" })));
+        await waitFor(() => {
+            expect(defaultProps.onChange).toHaveBeenCalledWith(formatted);
+        });
+    });
+    it('should handle paste event', async () => {
+        const formatted = '<p>Formatted Paste</p>';
+        vi.mocked(formatHtmlWithPrettier).mockResolvedValue(formatted);
+        render(React.createElement(HtmlCodeViewer, Object.assign({}, defaultProps, { readOnly: false })));
+        const textarea = screen.getByRole('textbox');
+        const pasteData = 'Pasted Text';
+        const pasteEvent = createEvent.paste(textarea, {
+            clipboardData: {
+                getData: vi.fn().mockReturnValue(pasteData)
+            }
+        });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        pasteEvent.preventDefault = vi.fn();
+        fireEvent(textarea, pasteEvent);
+        await waitFor(() => {
+            var _a;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            expect(pasteEvent.preventDefault).toHaveBeenCalled();
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            expect((_a = pasteEvent.clipboardData) === null || _a === void 0 ? void 0 : _a.getData).toHaveBeenCalledWith('text/plain');
+            expect(formatHtmlWithPrettier).toHaveBeenCalled();
+            expect(defaultProps.onChange).toHaveBeenCalledWith(formatted);
+        });
+    });
+    it('should not handle paste event if readOnly is true', () => {
+        render(React.createElement(HtmlCodeViewer, Object.assign({}, defaultProps, { readOnly: true })));
+        const textarea = screen.getByRole('textbox');
+        const pasteEvent = createEvent.paste(textarea, {
+            clipboardData: {
+                getData: vi.fn().mockReturnValue('Some Text')
+            }
+        });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        pasteEvent.preventDefault = vi.fn();
+        fireEvent(textarea, pasteEvent);
+        expect(formatHtmlWithPrettier).not.toHaveBeenCalled();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        expect(pasteEvent.preventDefault).not.toHaveBeenCalled();
+    });
+    it('should not handle paste event if clipboard text is empty', () => {
+        render(React.createElement(HtmlCodeViewer, Object.assign({}, defaultProps)));
+        // Clear mock because formatOnMount triggers it
+        vi.mocked(formatHtmlWithPrettier).mockClear();
+        const textarea = screen.getByRole('textbox');
+        const pasteEvent = createEvent.paste(textarea, {
+            clipboardData: {
+                getData: vi.fn().mockReturnValue('')
+            }
+        });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        pasteEvent.preventDefault = vi.fn();
+        fireEvent(textarea, pasteEvent);
+        expect(formatHtmlWithPrettier).not.toHaveBeenCalled();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        expect(pasteEvent.preventDefault).toHaveBeenCalled(); // preventDefault is called before check? No, line 83 calls preventDefault.
+    });
 });

package/dist/esm/tiptap/components/__tests__/html-code-viewer.test.tsx

@@ -1,10 +1,17 @@
 import '@testing-library/jest-dom';
 
-import { fireEvent, render, screen } from '@testing-library/react';
+import {
+  createEvent,
+  fireEvent,
+  render,
+  screen,
+  waitFor
+} from '@testing-library/react';
 import { ConfigProvider } from 'antd';
 import React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { formatHtmlWithPrettier } from '../../utils';
 import { HtmlCodeViewer } from '../html-code-viewer';
 
 vi.mock('@ant-design/cssinjs', () => ({
@@ -15,7 +22,15 @@ vi.mock('@ant-design/cssinjs', () => ({
 }));
 
 vi.mock('@akinon/ui-theme', () => ({
-  useToken: () => ({ token: {}, hashId: 'hash-id' })
+  useToken: () => ({ token: {}, hashId: 'hash-id' }),
+  getSafeCustomTokens: vi.fn(() => ({
+    border: { borderWidthThick: '2px', borderSolid: 'solid' }
+  }))
+}));
+
+vi.mock('../../utils', () => ({
+  highlightHtml: (html: string) => html,
+  formatHtmlWithPrettier: vi.fn((html: string) => Promise.resolve(html))
 }));
 
 describe('HtmlCodeViewer', () => {
@@ -109,7 +124,11 @@ describe('HtmlCodeViewer', () => {
         neutral: {
           '50': '#fff',
           '1000': '#000'
-        }
+        },
+        red: { '825': '#f00', '999': '#a00', '815': '#d00' },
+        blue: { '999': '#00f' },
+        green: { '825': '#0f0' },
+        ebonyClay: { '550': '#123' }
       }
     };
 
@@ -123,4 +142,88 @@ describe('HtmlCodeViewer', () => {
     const textarea = screen.getByRole('textbox');
     expect(textarea).toBeInTheDocument();
   });
+
+  it('should format code on mount', async () => {
+    const formatted = '<p> Formatted </p>';
+    vi.mocked(formatHtmlWithPrettier).mockResolvedValue(formatted);
+
+    render(<HtmlCodeViewer {...defaultProps} value="<p>Raw</p>" />);
+
+    await waitFor(() => {
+      expect(defaultProps.onChange).toHaveBeenCalledWith(formatted);
+    });
+  });
+
+  it('should handle paste event', async () => {
+    const formatted = '<p>Formatted Paste</p>';
+    vi.mocked(formatHtmlWithPrettier).mockResolvedValue(formatted);
+
+    render(<HtmlCodeViewer {...defaultProps} readOnly={false} />);
+    const textarea = screen.getByRole('textbox');
+
+    const pasteData = 'Pasted Text';
+
+    const pasteEvent = createEvent.paste(textarea, {
+      clipboardData: {
+        getData: vi.fn().mockReturnValue(pasteData)
+      }
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (pasteEvent as any).preventDefault = vi.fn();
+
+    fireEvent(textarea, pasteEvent);
+
+    await waitFor(() => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      expect((pasteEvent as any).preventDefault).toHaveBeenCalled();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      expect((pasteEvent as any).clipboardData?.getData).toHaveBeenCalledWith(
+        'text/plain'
+      );
+      expect(formatHtmlWithPrettier).toHaveBeenCalled();
+      expect(defaultProps.onChange).toHaveBeenCalledWith(formatted);
+    });
+  });
+
+  it('should not handle paste event if readOnly is true', () => {
+    render(<HtmlCodeViewer {...defaultProps} readOnly={true} />);
+    const textarea = screen.getByRole('textbox');
+
+    const pasteEvent = createEvent.paste(textarea, {
+      clipboardData: {
+        getData: vi.fn().mockReturnValue('Some Text')
+      }
+    });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (pasteEvent as any).preventDefault = vi.fn();
+
+    fireEvent(textarea, pasteEvent);
+
+    expect(formatHtmlWithPrettier).not.toHaveBeenCalled();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    expect((pasteEvent as any).preventDefault).not.toHaveBeenCalled();
+  });
+
+  it('should not handle paste event if clipboard text is empty', () => {
+    render(<HtmlCodeViewer {...defaultProps} />);
+    // Clear mock because formatOnMount triggers it
+    vi.mocked(formatHtmlWithPrettier).mockClear();
+
+    const textarea = screen.getByRole('textbox');
+
+    const pasteEvent = createEvent.paste(textarea, {
+      clipboardData: {
+        getData: vi.fn().mockReturnValue('')
+      }
+    });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (pasteEvent as any).preventDefault = vi.fn();
+
+    fireEvent(textarea, pasteEvent);
+
+    expect(formatHtmlWithPrettier).not.toHaveBeenCalled();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    expect((pasteEvent as any).preventDefault).toHaveBeenCalled(); // preventDefault is called before check? No, line 83 calls preventDefault.
+  });
 });

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

@@ -9,6 +9,7 @@ const { mockUseEditor, mockChangeLanguage } = vi.hoisted(() => ({
     mockUseEditor: vi.fn(),
     mockChangeLanguage: vi.fn()
 }));
+vi.useFakeTimers();
 vi.mock('@tiptap/react', () => ({
     useEditor: mockUseEditor,
     useEditorState: vi.fn(() => ({})),
@@ -42,8 +43,7 @@ vi.mock('../../assets/icons', () => ({
 }));
 vi.mock('../../utils', () => ({
     getExtensions: vi.fn(() => []),
-    formatHtml: vi.fn(html => `formatted-${html}`),
-    normalizeHtml: vi.fn(html => `normalized-${html}`)
+    cleanDuplicateSpans: vi.fn(html => html)
 }));
 vi.mock('@akinon/akilocale/react', () => ({
     useTranslation: () => ({
@@ -53,7 +53,8 @@ vi.mock('@akinon/akilocale/react', () => ({
 }));
 vi.mock('@akinon/ui-theme', () => ({
     getSafeCustomTokens: vi.fn(() => ({
-        typography: { fontWeightMedium: 500 }
+        typography: { fontWeightMedium: 500 },
+        border: { borderWidthThick: '2px', borderSolid: 'solid' }
     })),
     useToken: () => ({
         token: { colorBorder: '#ccc' },
@@ -83,6 +84,10 @@ describe('Tiptap', () => {
             }
         };
         mockUseEditor.mockReturnValue(mockEditor);
+        vi.useFakeTimers();
+    });
+    afterEach(() => {
+        vi.useRealTimers();
     });
     const renderComponent = (props = {}) => {
         return render(React.createElement(Tiptap, Object.assign({ value: "<p>Test</p>", onChange: onChange }, props)));
@@ -116,7 +121,9 @@ describe('Tiptap', () => {
         expect(screen.getByTestId('html-code-viewer')).toBeInTheDocument();
         fireEvent.click(toggleButton);
         expect(screen.getByTestId('editor-content')).toBeInTheDocument();
-        expect(mockEditor.commands.setContent).toHaveBeenCalledWith('normalized-formatted-<p>Initial Content</p>', { emitUpdate: false });
+        expect(mockEditor.commands.setContent).toHaveBeenCalledWith('<p>Test</p>', {
+            emitUpdate: false
+        });
         fireEvent.click(toggleButton);
         expect(screen.getByTestId('html-code-viewer')).toBeInTheDocument();
     });
@@ -124,6 +131,7 @@ describe('Tiptap', () => {
         renderComponent();
         const viewer = screen.getByTestId('html-code-viewer');
         fireEvent.change(viewer, { target: { value: '<p>New Content</p>' } });
+        vi.advanceTimersByTime(1000);
         expect(onChange).toHaveBeenCalledWith({
             html: '<p>New Content</p>',
             json: expect.any(Object)
@@ -272,4 +280,34 @@ describe('Tiptap', () => {
         expect(resultDiv).toBe(false);
         expect(preventDefault).not.toHaveBeenCalled();
     });
+    it('should debounce source code changes and clear previous timeout', () => {
+        renderComponent();
+        const viewer = screen.getByTestId('html-code-viewer');
+        fireEvent.change(viewer, { target: { value: '<p>Change 1</p>' } });
+        fireEvent.change(viewer, { target: { value: '<p>Change 2</p>' } });
+        vi.advanceTimersByTime(300);
+        expect(onChange).toHaveBeenCalledWith({
+            html: '<p>Change 2</p>',
+            json: expect.any(Object)
+        });
+        expect(onChange).toHaveBeenCalledTimes(1);
+    });
+    it('should initialize with empty string if value and defaultValue are undefined', () => {
+        render(React.createElement(Tiptap, { onChange: onChange }));
+        const viewer = screen.getByTestId('html-code-viewer');
+        expect(viewer).toHaveValue('');
+    });
+    it('should remove type="text/inert" from script tags when switching to source mode', () => {
+        // Start in visual mode
+        render(React.createElement(Tiptap, { defaultSourceMode: false, onChange: onChange }));
+        // Mock editor.getHTML() to return content with inert script
+        mockEditor.getHTML.mockReturnValue('<script type="text/inert">console.log("test")</script>');
+        // Switch to source mode
+        const toggleButton = screen.getByTestId('toggle-source');
+        fireEvent.click(toggleButton);
+        // Verify source mode content (cleanDuplicateSpans is mocked to return input)
+        // The setRawHTML update triggers a re-render of HtmlCodeViewer
+        const viewer = screen.getByTestId('html-code-viewer');
+        expect(viewer).toHaveValue('<script>console.log("test")</script>');
+    });
 });