@akinon/ui-editor 1.0.6 → 1.0.7-rc.0

package/dist/cjs/tiptap/components/tiptap.js

@@ -8,7 +8,7 @@ import clsx from 'clsx';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { DragHandleIcon } from '../assets/icons';
 import { EDITOR_CONTENT_HEIGHT, getTableCellDefaults, getTableHeaderDefaults } from '../constants';
-import { cleanDuplicateSpans, getExtensions } from '../utils';
+import { cleanDuplicateSpans, formatHtmlWithPrettier, getExtensions } from '../utils';
 import { FormatBubbleMenu } from './format-bubble-menu';
 import { HtmlCodeViewer } from './html-code-viewer';
 import { MenuBar } from './menu-bar';
@@ -47,19 +47,27 @@ export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classN
     const editor = useEditor({
         editable: !readOnly,
         content: defaultValue !== undefined ? defaultValue : value,
-        onUpdate: ({ editor }) => {
+        extensions,
+        editorProps
+    });
+    useEffect(() => {
+        if (!editor)
+            return;
+        const handleUpdate = () => {
             var _a;
             (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, {
                 html: editor.getHTML(),
                 json: editor.getJSON()
             });
-        },
-        extensions,
-        editorProps
-    });
+        };
+        editor.on('update', handleUpdate);
+        return () => {
+            editor.off('update', handleUpdate);
+        };
+    }, [editor]);
     useEffect(() => {
         if (editor) {
-            editor.setEditable(!readOnly);
+            editor.setEditable(!readOnly, false);
         }
     }, [editor, readOnly]);
     useEffect(() => {
@@ -67,7 +75,7 @@ export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classN
             value !== undefined &&
             value !== prevValueRef.current &&
             value !== editor.getHTML()) {
-            editor.commands.setContent(value);
+            editor.commands.setContent(value, { emitUpdate: false });
             if (isSourceMode) {
                 setRawHTML(value);
             }
@@ -127,6 +135,12 @@ export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classN
             }
         };
     }, []);
+    const handleFormat = useCallback(async () => {
+        const formatted = await formatHtmlWithPrettier(rawHTML);
+        if (formatted !== rawHTML) {
+            setRawHTML(formatted);
+        }
+    }, [rawHTML]);
     const useStyle = useStyleRegister({
         token: token,
         path: ['TiptapEditor', String(contentHeight)],
@@ -330,7 +344,7 @@ export const Tiptap = ({ value, defaultValue, onChange, readOnly = false, classN
     });
     return useStyle(React.createElement("div", { className: `${baseCls} ${hashId}` },
         editor && (React.createElement(React.Fragment, null,
-            React.createElement(MenuBar, { isSourceMode: isSourceMode, toggleSource: toggleSource, editor: editor, onSave: getCleanHtml, className: classNames === null || classNames === void 0 ? void 0 : classNames.editorToolbar, toolbar: toolbar, readOnly: readOnly }),
+            React.createElement(MenuBar, { isSourceMode: isSourceMode, toggleSource: toggleSource, onFormat: handleFormat, editor: editor, onSave: getCleanHtml, className: classNames === null || classNames === void 0 ? void 0 : classNames.editorToolbar, toolbar: toolbar, readOnly: readOnly }),
             React.createElement(FormatBubbleMenu, { editor: editor }),
             React.createElement(TableBubbleMenu, { editor: editor }),
             React.createElement(DragHandle, { editor: editor },

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

@@ -66,6 +66,7 @@ export declare const TOOLBAR_BUTTON_IDS: {
     readonly HEADING: "heading";
     readonly UNDO: "undo";
     readonly REDO: "redo";
+    readonly FORMAT: "format";
     readonly SOURCE_MODE: "sourceMode";
     readonly YOUTUBE: "youtube";
 };

package/dist/cjs/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;;;;;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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BrB,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/cjs/tiptap/constants/editor-config.js

@@ -73,6 +73,7 @@ export const TOOLBAR_BUTTON_IDS = {
     HEADING: 'heading',
     UNDO: 'undo',
     REDO: 'redo',
+    FORMAT: 'format',
     SOURCE_MODE: 'sourceMode',
     YOUTUBE: 'youtube'
 };

package/dist/cjs/tiptap/utils/__tests__/clean-html.test.js

@@ -77,17 +77,36 @@ describe('clean-html', () => {
         const result = cleanDuplicateSpans(html);
         expect(result).toBe('<div><script>console.log("test")</script>Content</div>');
     });
-    it('should handle mixed content with text nodes', () => {
-        // This test covers line 87: return node.textContent || '';
-        // Testing text nodes between elements
+    it('should handle mixed content with text nodes inside elements', () => {
         const html = '<div>Start<p>Middle</p>End</div>';
         const result = cleanDuplicateSpans(html);
         expect(result).toBe('<div>Start<p>Middle</p>End</div>');
     });
-    it('should handle empty text content fallback', () => {
-        // Edge case: elements with only whitespace text nodes
-        const html = '<div>   </div>';
+    it('should handle top-level text nodes (covers line 87)', () => {
+        // text nodes at the root of template.content hit line 87
+        const html = 'plain text only';
         const result = cleanDuplicateSpans(html);
-        expect(result).toBe('<div>   </div>');
+        expect(result).toBe('plain text only');
+    });
+    it('should handle mixed top-level text nodes and elements', () => {
+        // "before " and " after" are top-level text nodes, hitting line 87
+        const html = 'before <div>element</div> after';
+        const result = cleanDuplicateSpans(html);
+        expect(result).toBe('before <div>element</div> after');
+    });
+    it("should handle empty text content fallback (|| '' branch)", () => {
+        // A whitespace-only top-level text node: textContent is ' ' (truthy)
+        // but tests the same code path; empty-string case uses the || '' fallback
+        const html = '   ';
+        const result = cleanDuplicateSpans(html);
+        expect(result).toBe('   ');
+    });
+    it("should return '' for top-level empty comment nodes (covers || '' branch on line 87)", () => {
+        // An empty HTML comment (<!---->) creates a top-level Comment node.
+        // Comment nodes are not ELEMENT_NODEs, so they hit line 87.
+        // Their textContent is '' (empty string / falsy), triggering the || '' fallback.
+        const html = '<!---->';
+        const result = cleanDuplicateSpans(html);
+        expect(result).toBe('');
     });
 });

package/dist/cjs/tiptap/utils/__tests__/clean-html.test.ts

@@ -112,18 +112,40 @@ describe('clean-html', () => {
     );
   });
 
-  it('should handle mixed content with text nodes', () => {
-    // This test covers line 87: return node.textContent || '';
-    // Testing text nodes between elements
+  it('should handle mixed content with text nodes inside elements', () => {
     const html = '<div>Start<p>Middle</p>End</div>';
     const result = cleanDuplicateSpans(html);
     expect(result).toBe('<div>Start<p>Middle</p>End</div>');
   });
 
-  it('should handle empty text content fallback', () => {
-    // Edge case: elements with only whitespace text nodes
-    const html = '<div>   </div>';
+  it('should handle top-level text nodes (covers line 87)', () => {
+    // text nodes at the root of template.content hit line 87
+    const html = 'plain text only';
     const result = cleanDuplicateSpans(html);
-    expect(result).toBe('<div>   </div>');
+    expect(result).toBe('plain text only');
+  });
+
+  it('should handle mixed top-level text nodes and elements', () => {
+    // "before " and " after" are top-level text nodes, hitting line 87
+    const html = 'before <div>element</div> after';
+    const result = cleanDuplicateSpans(html);
+    expect(result).toBe('before <div>element</div> after');
+  });
+
+  it("should handle empty text content fallback (|| '' branch)", () => {
+    // A whitespace-only top-level text node: textContent is ' ' (truthy)
+    // but tests the same code path; empty-string case uses the || '' fallback
+    const html = '   ';
+    const result = cleanDuplicateSpans(html);
+    expect(result).toBe('   ');
+  });
+
+  it("should return '' for top-level empty comment nodes (covers || '' branch on line 87)", () => {
+    // An empty HTML comment (<!---->) creates a top-level Comment node.
+    // Comment nodes are not ELEMENT_NODEs, so they hit line 87.
+    // Their textContent is '' (empty string / falsy), triggering the || '' fallback.
+    const html = '<!---->';
+    const result = cleanDuplicateSpans(html);
+    expect(result).toBe('');
   });
 });

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

@@ -14,7 +14,7 @@ export const formatHtmlWithPrettier = async (html) => {
             printWidth: 60,
             tabWidth: 2,
             useTabs: false,
-            htmlWhitespaceSensitivity: 'css',
+            htmlWhitespaceSensitivity: 'ignore',
             singleAttributePerLine: false,
             proseWrap: 'always'
         });

package/dist/esm/i18n/translations/en.d.ts

@@ -33,6 +33,7 @@ declare const translations: {
             readonly redo: "Redo";
             readonly source_mode: "Switch to Source Mode";
             readonly normal_mode: "Switch to Preview Mode";
+            readonly format: "Format HTML";
             readonly link: "Link";
             readonly align_left: "Align Left";
             readonly align_center: "Align Center";

package/dist/esm/i18n/translations/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmFR,CAAC;AAEX,eAAe,YAAY,CAAC"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/en.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFR,CAAC;AAEX,eAAe,YAAY,CAAC"}

package/dist/esm/i18n/translations/en.js

@@ -33,6 +33,7 @@ const translations = {
             redo: 'Redo',
             source_mode: 'Switch to Source Mode',
             normal_mode: 'Switch to Preview Mode',
+            format: 'Format HTML',
             link: 'Link',
             align_left: 'Align Left',
             align_center: 'Align Center',

package/dist/esm/i18n/translations/tr.d.ts

@@ -33,6 +33,7 @@ declare const translations: {
             readonly redo: "Yinele";
             readonly source_mode: "Kaynak Koduna Geç";
             readonly normal_mode: "Önizleme Moduna Geç";
+            readonly format: "HTML Formatla";
             readonly link: "Bağlantı";
             readonly align_left: "Sola Hizala";
             readonly align_center: "Ortala";

package/dist/esm/i18n/translations/tr.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmFR,CAAC;AAEX,eAAe,YAAY,CAAC"}
+{"version":3,"file":"tr.d.ts","sourceRoot":"","sources":["../../../../src/i18n/translations/tr.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFR,CAAC;AAEX,eAAe,YAAY,CAAC"}

package/dist/esm/i18n/translations/tr.js

@@ -33,6 +33,7 @@ const translations = {
             redo: 'Yinele',
             source_mode: 'Kaynak Koduna Geç',
             normal_mode: 'Önizleme Moduna Geç',
+            format: 'HTML Formatla',
             link: 'Bağlantı',
             align_left: 'Sola Hizala',
             align_center: 'Ortala',

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

@@ -98,14 +98,6 @@ 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);

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

@@ -143,17 +143,6 @@ describe('HtmlCodeViewer', () => {
     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);

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

@@ -5,9 +5,10 @@ import React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { MenuBar } from '../menu-bar';
 import { Tiptap } from '../tiptap';
-const { mockUseEditor, mockChangeLanguage } = vi.hoisted(() => ({
+const { mockUseEditor, mockChangeLanguage, mockFormatHtmlWithPrettier } = vi.hoisted(() => ({
     mockUseEditor: vi.fn(),
-    mockChangeLanguage: vi.fn()
+    mockChangeLanguage: vi.fn(),
+    mockFormatHtmlWithPrettier: vi.fn(async (html) => html)
 }));
 vi.useFakeTimers();
 vi.mock('@tiptap/react', () => ({
@@ -25,8 +26,9 @@ vi.mock('@tiptap/html', () => ({
 }));
 vi.mock('../menu-bar', () => ({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    MenuBar: vi.fn(({ toggleSource, isSourceMode }) => (React.createElement("div", { "data-testid": "menu-bar" },
-        React.createElement("button", { onClick: toggleSource, "data-testid": "toggle-source" }, isSourceMode ? 'Switch to Visual' : 'Switch to Source'))))
+    MenuBar: vi.fn(({ toggleSource, isSourceMode, onFormat }) => (React.createElement("div", { "data-testid": "menu-bar" },
+        React.createElement("button", { onClick: toggleSource, "data-testid": "toggle-source" }, isSourceMode ? 'Switch to Visual' : 'Switch to Source'),
+        onFormat && (React.createElement("button", { onClick: onFormat, "data-testid": "format-button" }, "Format")))))
 }));
 vi.mock('../format-bubble-menu', () => ({
     FormatBubbleMenu: () => React.createElement("div", { "data-testid": "format-bubble-menu" })
@@ -43,7 +45,8 @@ vi.mock('../../assets/icons', () => ({
 }));
 vi.mock('../../utils', () => ({
     getExtensions: vi.fn(() => []),
-    cleanDuplicateSpans: vi.fn(html => html)
+    cleanDuplicateSpans: vi.fn(html => html),
+    formatHtmlWithPrettier: mockFormatHtmlWithPrettier
 }));
 vi.mock('@akinon/akilocale/react', () => ({
     useTranslation: () => ({
@@ -78,6 +81,8 @@ describe('Tiptap', () => {
             getHTML: vi.fn(() => '<p>Initial Content</p>'),
             getJSON: vi.fn(() => ({ type: 'doc' })),
             setEditable: vi.fn(),
+            on: vi.fn(),
+            off: vi.fn(),
             commands: {
                 setContent: vi.fn(),
                 blur: vi.fn()
@@ -141,27 +146,31 @@ describe('Tiptap', () => {
         const { rerender } = renderComponent({ value: '<p>Old</p>' });
         mockEditor.getHTML.mockReturnValue('<p>Old</p>');
         rerender(React.createElement(Tiptap, { value: "<p>New</p>", onChange: onChange }));
-        expect(mockEditor.commands.setContent).toHaveBeenCalledWith('<p>New</p>');
+        expect(mockEditor.commands.setContent).toHaveBeenCalledWith('<p>New</p>', {
+            emitUpdate: false
+        });
     });
     it('should update editor editable state when readOnly prop changes', () => {
         const { rerender } = renderComponent({ readOnly: false });
-        expect(mockEditor.setEditable).toHaveBeenCalledWith(true);
+        expect(mockEditor.setEditable).toHaveBeenCalledWith(true, false);
         rerender(React.createElement(Tiptap, { value: "<p>Test</p>", readOnly: true, onChange: onChange }));
-        expect(mockEditor.setEditable).toHaveBeenCalledWith(false);
+        expect(mockEditor.setEditable).toHaveBeenCalledWith(false, false);
     });
     it('should call onChange on editor update', () => {
+        var _a;
         renderComponent();
-        const onUpdateCallback = mockUseEditor.mock.calls[0][0].onUpdate;
-        onUpdateCallback({ editor: mockEditor });
+        const handler = (_a = mockEditor.on.mock.calls.find(([event]) => event === 'update')) === null || _a === void 0 ? void 0 : _a[1];
+        handler();
         expect(onChange).toHaveBeenCalledWith({
             html: '<p>Initial Content</p>',
             json: { type: 'doc' }
         });
     });
     it('should handle undefined onChange', () => {
+        var _a;
         const { rerender } = render(React.createElement(Tiptap, { value: "<p>Test</p>", onChange: undefined }));
-        const onUpdateCallback = mockUseEditor.mock.calls[0][0].onUpdate;
-        expect(() => onUpdateCallback({ editor: mockEditor })).not.toThrow();
+        const handler = (_a = mockEditor.on.mock.calls.find(([event]) => event === 'update')) === null || _a === void 0 ? void 0 : _a[1];
+        expect(() => handler()).not.toThrow();
         const viewer = screen.getByTestId('html-code-viewer');
         fireEvent.change(viewer, { target: { value: 'new' } });
         rerender(React.createElement(Tiptap, { value: "<p>Test</p>", onChange: undefined }));
@@ -310,4 +319,36 @@ describe('Tiptap', () => {
         const viewer = screen.getByTestId('html-code-viewer');
         expect(viewer).toHaveValue('<script>console.log("test")</script>');
     });
+    it('should format HTML when handleFormat is called and HTML changes', async () => {
+        const formattedHtml = '<p>\n  Formatted Content\n</p>';
+        mockFormatHtmlWithPrettier.mockResolvedValueOnce(formattedHtml);
+        renderComponent({ value: '<p>Unformatted</p>' });
+        const formatButton = screen.getByTestId('format-button');
+        fireEvent.click(formatButton);
+        await vi.advanceTimersByTimeAsync(400);
+        expect(mockFormatHtmlWithPrettier).toHaveBeenCalledWith('<p>Unformatted</p>');
+        // Formatting should only update local rawHTML state, not trigger onChange
+        expect(onChange).not.toHaveBeenCalled();
+        // Verify the formatted HTML is displayed in the source viewer
+        const viewer = screen.getByTestId('html-code-viewer');
+        expect(viewer).toHaveValue(formattedHtml);
+    });
+    it('should not call onChange when formatted HTML is same as original', async () => {
+        const html = '<p>Already Formatted</p>';
+        mockFormatHtmlWithPrettier.mockResolvedValueOnce(html);
+        renderComponent({ value: html });
+        onChange.mockClear();
+        const formatButton = screen.getByTestId('format-button');
+        fireEvent.click(formatButton);
+        await vi.advanceTimersByTimeAsync(400);
+        expect(mockFormatHtmlWithPrettier).toHaveBeenCalledWith(html);
+        expect(onChange).not.toHaveBeenCalled();
+    });
+    it('should handle toggleSource gracefully when editor is null', () => {
+        mockUseEditor.mockReturnValueOnce(null);
+        renderComponent();
+        const toggleButton = screen.queryByTestId('toggle-source');
+        // MenuBar should not be rendered when editor is null
+        expect(toggleButton).not.toBeInTheDocument();
+    });
 });

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

@@ -8,10 +8,12 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { MenuBar } from '../menu-bar';
 import { Tiptap } from '../tiptap';
 
-const { mockUseEditor, mockChangeLanguage } = vi.hoisted(() => ({
-  mockUseEditor: vi.fn(),
-  mockChangeLanguage: vi.fn()
-}));
+const { mockUseEditor, mockChangeLanguage, mockFormatHtmlWithPrettier } =
+  vi.hoisted(() => ({
+    mockUseEditor: vi.fn(),
+    mockChangeLanguage: vi.fn(),
+    mockFormatHtmlWithPrettier: vi.fn(async (html: string) => html)
+  }));
 
 vi.useFakeTimers();
 
@@ -39,11 +41,16 @@ vi.mock('@tiptap/html', () => ({
 
 vi.mock('../menu-bar', () => ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  MenuBar: vi.fn(({ toggleSource, isSourceMode }: any) => (
+  MenuBar: vi.fn(({ toggleSource, isSourceMode, onFormat }: any) => (
     <div data-testid="menu-bar">
       <button onClick={toggleSource} data-testid="toggle-source">
         {isSourceMode ? 'Switch to Visual' : 'Switch to Source'}
       </button>
+      {onFormat && (
+        <button onClick={onFormat} data-testid="format-button">
+          Format
+        </button>
+      )}
     </div>
   ))
 }));
@@ -73,7 +80,8 @@ vi.mock('../../assets/icons', () => ({
 
 vi.mock('../../utils', () => ({
   getExtensions: vi.fn(() => []),
-  cleanDuplicateSpans: vi.fn(html => html)
+  cleanDuplicateSpans: vi.fn(html => html),
+  formatHtmlWithPrettier: mockFormatHtmlWithPrettier
 }));
 
 vi.mock('@akinon/akilocale/react', () => ({
@@ -113,6 +121,8 @@ describe('Tiptap', () => {
       getHTML: vi.fn(() => '<p>Initial Content</p>'),
       getJSON: vi.fn(() => ({ type: 'doc' })),
       setEditable: vi.fn(),
+      on: vi.fn(),
+      off: vi.fn(),
       commands: {
         setContent: vi.fn(),
         blur: vi.fn()
@@ -197,24 +207,28 @@ describe('Tiptap', () => {
 
     rerender(<Tiptap value="<p>New</p>" onChange={onChange} />);
 
-    expect(mockEditor.commands.setContent).toHaveBeenCalledWith('<p>New</p>');
+    expect(mockEditor.commands.setContent).toHaveBeenCalledWith('<p>New</p>', {
+      emitUpdate: false
+    });
   });
 
   it('should update editor editable state when readOnly prop changes', () => {
     const { rerender } = renderComponent({ readOnly: false });
-    expect(mockEditor.setEditable).toHaveBeenCalledWith(true);
+    expect(mockEditor.setEditable).toHaveBeenCalledWith(true, false);
 
     rerender(
       <Tiptap value="<p>Test</p>" readOnly={true} onChange={onChange} />
     );
-    expect(mockEditor.setEditable).toHaveBeenCalledWith(false);
+    expect(mockEditor.setEditable).toHaveBeenCalledWith(false, false);
   });
 
   it('should call onChange on editor update', () => {
     renderComponent();
 
-    const onUpdateCallback = mockUseEditor.mock.calls[0][0].onUpdate;
-    onUpdateCallback({ editor: mockEditor });
+    const handler = mockEditor.on.mock.calls.find(
+      ([event]: [string]) => event === 'update'
+    )?.[1];
+    handler();
 
     expect(onChange).toHaveBeenCalledWith({
       html: '<p>Initial Content</p>',
@@ -227,8 +241,10 @@ describe('Tiptap', () => {
       <Tiptap value="<p>Test</p>" onChange={undefined} />
     );
 
-    const onUpdateCallback = mockUseEditor.mock.calls[0][0].onUpdate;
-    expect(() => onUpdateCallback({ editor: mockEditor })).not.toThrow();
+    const handler = mockEditor.on.mock.calls.find(
+      ([event]: [string]) => event === 'update'
+    )?.[1];
+    expect(() => handler()).not.toThrow();
 
     const viewer = screen.getByTestId('html-code-viewer');
     fireEvent.change(viewer, { target: { value: 'new' } });
@@ -425,4 +441,54 @@ describe('Tiptap', () => {
     const viewer = screen.getByTestId('html-code-viewer');
     expect(viewer).toHaveValue('<script>console.log("test")</script>');
   });
+
+  it('should format HTML when handleFormat is called and HTML changes', async () => {
+    const formattedHtml = '<p>\n  Formatted Content\n</p>';
+    mockFormatHtmlWithPrettier.mockResolvedValueOnce(formattedHtml);
+
+    renderComponent({ value: '<p>Unformatted</p>' });
+
+    const formatButton = screen.getByTestId('format-button');
+    fireEvent.click(formatButton);
+
+    await vi.advanceTimersByTimeAsync(400);
+
+    expect(mockFormatHtmlWithPrettier).toHaveBeenCalledWith(
+      '<p>Unformatted</p>'
+    );
+
+    // Formatting should only update local rawHTML state, not trigger onChange
+    expect(onChange).not.toHaveBeenCalled();
+
+    // Verify the formatted HTML is displayed in the source viewer
+    const viewer = screen.getByTestId('html-code-viewer');
+    expect(viewer).toHaveValue(formattedHtml);
+  });
+
+  it('should not call onChange when formatted HTML is same as original', async () => {
+    const html = '<p>Already Formatted</p>';
+    mockFormatHtmlWithPrettier.mockResolvedValueOnce(html);
+
+    renderComponent({ value: html });
+    onChange.mockClear();
+
+    const formatButton = screen.getByTestId('format-button');
+    fireEvent.click(formatButton);
+
+    await vi.advanceTimersByTimeAsync(400);
+
+    expect(mockFormatHtmlWithPrettier).toHaveBeenCalledWith(html);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('should handle toggleSource gracefully when editor is null', () => {
+    mockUseEditor.mockReturnValueOnce(null);
+
+    renderComponent();
+
+    const toggleButton = screen.queryByTestId('toggle-source');
+
+    // MenuBar should not be rendered when editor is null
+    expect(toggleButton).not.toBeInTheDocument();
+  });
 });

package/dist/esm/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":"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"}
+{"version":3,"file":"html-code-viewer.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/components/html-code-viewer.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAK5D,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,sBAkJrB,CAAC"}

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

@@ -1,7 +1,7 @@
 import { getSafeCustomTokens, useToken } from '@akinon/ui-theme';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { ConfigProvider } from 'antd';
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, 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 }) => {
@@ -19,29 +19,6 @@ export const HtmlCodeViewer = ({ value, onChange, className, contentHeight = EDI
     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;