@akinon/ui-editor 1.0.2 → 1.0.4

package/dist/cjs/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/cjs/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/cjs/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>');
+    });
 });

package/dist/cjs/tiptap/components/__tests__/tiptap.test.tsx

@@ -13,6 +13,8 @@ const { mockUseEditor, mockChangeLanguage } = vi.hoisted(() => ({
   mockChangeLanguage: vi.fn()
 }));
 
+vi.useFakeTimers();
+
 vi.mock('@tiptap/react', () => ({
   useEditor: mockUseEditor,
   useEditorState: vi.fn(() => ({})),
@@ -71,8 +73,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', () => ({
@@ -84,7 +85,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' },
@@ -118,6 +120,11 @@ describe('Tiptap', () => {
     };
 
     mockUseEditor.mockReturnValue(mockEditor);
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
   });
 
   const renderComponent = (props = {}) => {
@@ -161,10 +168,9 @@ describe('Tiptap', () => {
 
     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();
@@ -176,6 +182,8 @@ describe('Tiptap', () => {
 
     fireEvent.change(viewer, { target: { value: '<p>New Content</p>' } });
 
+    vi.advanceTimersByTime(1000);
+
     expect(onChange).toHaveBeenCalledWith({
       html: '<p>New Content</p>',
       json: expect.any(Object)
@@ -375,4 +383,46 @@ 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(<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(<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>');
+  });
 });

package/dist/cjs/tiptap/components/format-bubble-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"format-bubble-menu.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/components/format-bubble-menu.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAG5C,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,gBAAgB,GAAI,YAAY,qBAAqB,6BAiRjE,CAAC"}
+{"version":3,"file":"format-bubble-menu.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/components/format-bubble-menu.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAG5C,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,gBAAgB,GAAI,YAAY,qBAAqB,6BAmRjE,CAAC"}

package/dist/cjs/tiptap/components/format-bubble-menu.js

@@ -164,6 +164,11 @@ export const FormatBubbleMenu = ({ editor }) => {
             tooltip: i18n.t('editor.toolbar.link')
         }
     ];
+    const handleOnInputKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            handleApplyLink();
+        }
+    };
     return useStyle(React.createElement(BubbleMenu, { editor: editor, pluginKey: "link-bubble-menu", options: { placement: 'bottom' }, shouldShow: ({ editor }) => {
             if (!isTextSelection(editor.state.selection) ||
                 editor.isActive('table')) {
@@ -191,11 +196,7 @@ export const FormatBubbleMenu = ({ editor }) => {
             return from !== to && editor.isFocused;
         } },
         React.createElement("div", { className: `${baseCls} ${hashId}` }, showLinkInput ? (React.createElement(React.Fragment, null,
-            React.createElement(Input, { type: "text", placeholder: i18n.t('editor.link.url_placeholder'), value: url, autoFocus: true, onChange: e => setUrl(e.target.value), onKeyDown: e => {
-                    if (e.key === 'Enter') {
-                        handleApplyLink();
-                    }
-                }, size: "small", className: `${baseCls}__link-input` }),
+            React.createElement(Input, { type: "text", placeholder: i18n.t('editor.link.url_placeholder'), value: url, autoFocus: true, onChange: e => setUrl(e.target.value), onKeyDown: handleOnInputKeyDown, size: "small", className: `${baseCls}__link-input` }),
             React.createElement("div", { className: `${baseCls}__actions` },
                 React.createElement(Button, { size: "small", type: "success", icon: "katalogkontrol", onClick: handleApplyLink, disabled: !url, tooltip: i18n.t('editor.common.save') }),
                 React.createElement(Button, { size: "small", type: "default", danger: true, icon: "bin", onClick: handleRemoveLink, tooltip: i18n.t('editor.common.remove') })))) : (React.createElement("div", { className: `${baseCls}__actions` }, formattingButtons.map((btn, index) => (React.createElement(Button, { key: index, type: "icon", size: "small", onClick: btn.onClick, icon: btn.icon, className: btn.isActive ? activeCls : '', tooltip: btn.tooltip }))))))));

package/dist/cjs/tiptap/components/html-code-viewer.d.ts

@@ -4,7 +4,8 @@ interface HtmlCodeViewerProps {
     onChange: (value: string) => void;
     className?: string;
     readOnly?: boolean;
+    contentHeight?: number;
 }
-export declare const HtmlCodeViewer: ({ value, onChange, className, readOnly }: HtmlCodeViewerProps) => React.JSX.Element;
+export declare const HtmlCodeViewer: ({ value, onChange, className, contentHeight, readOnly }: HtmlCodeViewerProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=html-code-viewer.d.ts.map

package/dist/cjs/tiptap/components/html-code-viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html-code-viewer.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/components/html-code-viewer.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,GAAI,0CAK5B,mBAAmB,sBAmHrB,CAAC"}
+{"version":3,"file":"html-code-viewer.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/components/html-code-viewer.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,GAAI,yDAM5B,mBAAmB,sBA2KrB,CAAC"}

package/dist/cjs/tiptap/components/html-code-viewer.js

@@ -1,38 +1,78 @@
-import { useToken } from '@akinon/ui-theme';
+import { getSafeCustomTokens, useToken } from '@akinon/ui-theme';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { ConfigProvider } from 'antd';
-import React, { useRef } from 'react';
-import { EDITOR_HEIGHT } from '../constants';
-import { highlightHtml } from '../utils';
-export const HtmlCodeViewer = ({ value, onChange, className, readOnly = false }) => {
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { EDITOR_CONTENT_HEIGHT } from '../constants';
+import { formatHtmlWithPrettier, highlightHtml } from '../utils';
+export const HtmlCodeViewer = ({ value, onChange, className, contentHeight = EDITOR_CONTENT_HEIGHT, readOnly = false }) => {
     const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
     const { token, hashId } = useToken();
     const baseCls = getPrefixCls('html-code-viewer');
     const preRef = useRef(null);
     const colors = (theme === null || theme === void 0 ? void 0 : theme.colors) || {};
-    const handleScroll = (e) => {
+    const handleScroll = useCallback((e) => {
         if (preRef.current) {
             preRef.current.scrollTop = e.currentTarget.scrollTop;
             preRef.current.scrollLeft = e.currentTarget.scrollLeft;
         }
-    };
+    }, []);
+    const handleChange = useCallback((e) => {
+        onChange(e.target.value);
+    }, [onChange]);
+    useEffect(() => {
+        {
+            /*
+              Auto-format on mount (switching to source mode).
+              The isMounted check is necessary because formatHtmlWithPrettier is async.
+              If the component unmounts before format completes, we must not call onChange
+              to avoid "state update on unmounted component" errors.
+            */
+        }
+        let isMounted = true;
+        const formatOnMount = async () => {
+            if (value && !readOnly) {
+                const formatted = await formatHtmlWithPrettier(value);
+                if (isMounted && formatted !== value) {
+                    onChange(formatted);
+                }
+            }
+        };
+        formatOnMount();
+        return () => {
+            isMounted = false;
+        };
+    }, []);
+    const handlePaste = useCallback(async (e) => {
+        if (readOnly)
+            return;
+        e.preventDefault();
+        const pastedText = e.clipboardData.getData('text/plain');
+        if (!pastedText)
+            return;
+        const textarea = e.currentTarget;
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const newValue = value.substring(0, start) + pastedText + value.substring(end);
+        const formatted = await formatHtmlWithPrettier(newValue);
+        onChange(formatted);
+    }, [readOnly, value, onChange]);
     const useStyle = useStyleRegister({
         token: token,
-        path: ['HtmlCodeViewer'],
+        path: ['HtmlCodeViewer', String(contentHeight)],
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         theme: theme
     }, () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const prefixCls = `:where(.${hashId}).${baseCls}`;
+        const customTokens = getSafeCustomTokens(theme);
         return {
             [prefixCls]: {
                 position: 'relative',
-                width: '100%',
-                minHeight: EDITOR_HEIGHT,
-                height: EDITOR_HEIGHT,
-                marginTop: '10px',
-                border: `1px solid ${(_a = colors.editor) === null || _a === void 0 ? void 0 : _a.border}`,
-                borderRadius: '5px',
+                minHeight: `${contentHeight}px`,
+                height: `${contentHeight}px`,
+                border: `${customTokens.border.borderWidthThick} ${customTokens.border.borderSolid} ${(_a = colors.ebonyClay) === null || _a === void 0 ? void 0 : _a['550']}`,
+                borderBottomLeftRadius: '5px',
+                borderBottomRightRadius: '5px',
                 backgroundColor: (_b = colors.neutral) === null || _b === void 0 ? void 0 : _b['50'],
                 overflow: 'hidden',
                 '& textarea, & pre': {
@@ -68,29 +108,29 @@ export const HtmlCodeViewer = ({ value, onChange, className, readOnly = false })
                     color: (_d = colors.neutral) === null || _d === void 0 ? void 0 : _d['1000']
                 },
                 '.html-tag': {
-                    color: (_e = colors.editor) === null || _e === void 0 ? void 0 : _e.tag
+                    color: (_e = colors.red) === null || _e === void 0 ? void 0 : _e['825']
                 },
                 '.html-attr': {
-                    color: (_f = colors.editor) === null || _f === void 0 ? void 0 : _f.attr
+                    color: (_f = colors.red) === null || _f === void 0 ? void 0 : _f['999']
                 },
                 '.html-value': {
-                    color: (_g = colors.editor) === null || _g === void 0 ? void 0 : _g.value
+                    color: (_g = colors.blue) === null || _g === void 0 ? void 0 : _g['999']
                 },
                 '.html-comment': {
-                    color: (_h = colors.editor) === null || _h === void 0 ? void 0 : _h.comment,
+                    color: (_h = colors.green) === null || _h === void 0 ? void 0 : _h['825'],
                     fontStyle: 'italic'
                 },
                 '.html-doctype': {
-                    color: (_j = colors.editor) === null || _j === void 0 ? void 0 : _j.tag
+                    color: (_j = colors.red) === null || _j === void 0 ? void 0 : _j['825']
                 },
                 '.html-string': {
-                    color: (_k = colors.editor) === null || _k === void 0 ? void 0 : _k.string
+                    color: (_k = colors.red) === null || _k === void 0 ? void 0 : _k['815']
                 }
             }
         };
     });
-    const highlightedHtml = highlightHtml(value) + (value.endsWith('\n') ? '<br>' : '');
+    const highlightedHtml = useMemo(() => highlightHtml(value) + (value.endsWith('\n') ? '<br>' : ''), [value]);
     return useStyle(React.createElement("div", { className: `${baseCls} ${hashId} ${className || ''}` },
-        React.createElement("textarea", { value: value, onChange: e => onChange(e.target.value), onScroll: handleScroll, readOnly: readOnly, spellCheck: false, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off" }),
+        React.createElement("textarea", { value: value, onChange: handleChange, onPaste: handlePaste, onScroll: handleScroll, readOnly: readOnly, spellCheck: false, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off" }),
         React.createElement("pre", { ref: preRef, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: highlightedHtml } })));
 };

package/dist/cjs/tiptap/components/image-upload-placeholder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image-upload-placeholder.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/components/image-upload-placeholder.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,aAAa,EAAmB,MAAM,eAAe,CAAC;AAE/D,OAAO,KAAK,MAAM,OAAO,CAAC;AA8B1B,eAAO,MAAM,sBAAsB,GAAI,0BAIpC,aAAa,sBA8Ff,CAAC"}
+{"version":3,"file":"image-upload-placeholder.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/components/image-upload-placeholder.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,aAAa,EAAmB,MAAM,eAAe,CAAC;AAE/D,OAAO,KAAK,MAAM,OAAO,CAAC;AA8B1B,eAAO,MAAM,sBAAsB,GAAI,0BAIpC,aAAa,sBAiGf,CAAC"}

package/dist/cjs/tiptap/components/image-upload-placeholder.js

@@ -48,7 +48,7 @@ export const ImageUploadPlaceholder = ({ editor, node, getPos }) => {
                 borderRadius: '8px',
                 textAlign: 'center',
                 width: '50%',
-                backgroundColor: (_b = colors === null || colors === void 0 ? void 0 : colors.editor) === null || _b === void 0 ? void 0 : _b.imageUploadBg,
+                backgroundColor: (_b = colors.neutral) === null || _b === void 0 ? void 0 : _b['50-05'],
                 ['.ant-upload-wrapper .ant-upload-drag']: {
                     background: 'transparent',
                     border: 'none',
@@ -68,6 +68,9 @@ export const ImageUploadPlaceholder = ({ editor, node, getPos }) => {
                     color: (_e = colors.gray) === null || _e === void 0 ? void 0 : _e['500'],
                     fontSize: '2rem'
                 }
+            },
+            [`${prefixCls}-content`]: {
+                pointerEvents: 'none'
             }
         };
     });
@@ -86,7 +89,7 @@ export const ImageUploadPlaceholder = ({ editor, node, getPos }) => {
     return useStyle(React.createElement(NodeViewWrapper, { className: `${baseCls}-wrapper ${hashId}` },
         React.createElement("div", { className: `${baseCls} ${hashId}` },
             React.createElement(Upload.Dragger, { name: "file", multiple: false, showUploadList: false, beforeUpload: handleImageUpload },
-                React.createElement("div", { style: { pointerEvents: 'none' } },
+                React.createElement("div", { className: `${baseCls}-content ${hashId}` },
                     React.createElement("p", { className: "ant-upload-drag-icon" },
                         React.createElement(Button, { type: "icon", icon: "add_picture", size: "small" })),
                     React.createElement("p", { className: "ant-upload-text" }, i18n.t('editor.image_upload.click_to_upload')),