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

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/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":"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/cjs/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;

package/dist/cjs/tiptap/components/menu-bar/__tests__/action-toolbar.test.js

@@ -33,45 +33,45 @@ describe('ActionToolbar', () => {
         });
     });
     it('should render all action buttons', () => {
-        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState(), isSourceMode: false, toggleSource: vi.fn() }));
+        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState(), isSourceMode: false, toggleSource: vi.fn(), onFormat: vi.fn() }));
         expect(screen.getByTestId('action-button-format-undo')).toBeInTheDocument();
         expect(screen.getByTestId('action-button-format-redo')).toBeInTheDocument();
         expect(screen.getByTestId('action-button-eye-open')).toBeInTheDocument();
     });
     it('should handle undo click', () => {
         const focusSpy = vi.spyOn(editor, 'chain');
-        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState({ canUndo: true }), isSourceMode: false, toggleSource: vi.fn() }));
+        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState({ canUndo: true }), isSourceMode: false, toggleSource: vi.fn(), onFormat: vi.fn() }));
         const undoButton = screen.getByTestId('action-button-format-undo');
         fireEvent.click(undoButton);
         expect(focusSpy).toHaveBeenCalled();
     });
     it('should handle redo click', () => {
         const focusSpy = vi.spyOn(editor, 'chain');
-        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState({ canRedo: true }), isSourceMode: false, toggleSource: vi.fn() }));
+        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState({ canRedo: true }), isSourceMode: false, toggleSource: vi.fn(), onFormat: vi.fn() }));
         const redoButton = screen.getByTestId('action-button-format-redo');
         fireEvent.click(redoButton);
         expect(focusSpy).toHaveBeenCalled();
     });
     it('should handle toggle source click', () => {
         const toggleSource = vi.fn();
-        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState(), isSourceMode: false, toggleSource: toggleSource }));
+        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState(), isSourceMode: false, toggleSource: toggleSource, onFormat: vi.fn() }));
         const sourceButton = screen.getByTestId('action-button-eye-open');
         fireEvent.click(sourceButton);
         expect(toggleSource).toHaveBeenCalled();
     });
     it('should disable undo and redo when in source mode', () => {
-        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState({ canUndo: true, canRedo: true }), isSourceMode: true, toggleSource: vi.fn() }));
+        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState({ canUndo: true, canRedo: true }), isSourceMode: true, toggleSource: vi.fn(), onFormat: vi.fn() }));
         expect(screen.getByTestId('action-button-format-undo')).toBeDisabled();
         expect(screen.getByTestId('action-button-format-redo')).toBeDisabled();
     });
     it('should show eye-close icon and normal mode tooltip when isSourceMode is true', () => {
-        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState(), isSourceMode: true, toggleSource: vi.fn() }));
+        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState(), isSourceMode: true, toggleSource: vi.fn(), onFormat: vi.fn() }));
         const sourceButton = screen.getByTestId('action-button-eye-close');
         expect(sourceButton).toBeInTheDocument();
         expect(sourceButton).toHaveAttribute('aria-label', 'Normal Mode');
     });
     it('should apply active class to source mode button when active', () => {
-        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState(), isSourceMode: true, toggleSource: vi.fn() }));
+        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState(), isSourceMode: true, toggleSource: vi.fn(), onFormat: vi.fn() }));
         const sourceButton = screen.getByTestId('action-button-eye-close');
         expect(sourceButton).toHaveClass('active');
     });

package/dist/cjs/tiptap/components/menu-bar/__tests__/action-toolbar.test.tsx

@@ -105,6 +105,7 @@ describe('ActionToolbar', () => {
         editorState={createEditorState()}
         isSourceMode={false}
         toggleSource={vi.fn()}
+        onFormat={vi.fn()}
       />
     );
 
@@ -122,6 +123,7 @@ describe('ActionToolbar', () => {
         editorState={createEditorState({ canUndo: true })}
         isSourceMode={false}
         toggleSource={vi.fn()}
+        onFormat={vi.fn()}
       />
     );
 
@@ -140,6 +142,7 @@ describe('ActionToolbar', () => {
         editorState={createEditorState({ canRedo: true })}
         isSourceMode={false}
         toggleSource={vi.fn()}
+        onFormat={vi.fn()}
       />
     );
 
@@ -158,6 +161,7 @@ describe('ActionToolbar', () => {
         editorState={createEditorState()}
         isSourceMode={false}
         toggleSource={toggleSource}
+        onFormat={vi.fn()}
       />
     );
 
@@ -174,6 +178,7 @@ describe('ActionToolbar', () => {
         editorState={createEditorState({ canUndo: true, canRedo: true })}
         isSourceMode={true}
         toggleSource={vi.fn()}
+        onFormat={vi.fn()}
       />
     );
 
@@ -188,6 +193,7 @@ describe('ActionToolbar', () => {
         editorState={createEditorState()}
         isSourceMode={true}
         toggleSource={vi.fn()}
+        onFormat={vi.fn()}
       />
     );
 
@@ -203,6 +209,7 @@ describe('ActionToolbar', () => {
         editorState={createEditorState()}
         isSourceMode={true}
         toggleSource={vi.fn()}
+        onFormat={vi.fn()}
       />
     );
 

package/dist/cjs/tiptap/components/menu-bar/__tests__/index.test.js

@@ -89,6 +89,7 @@ describe('MenuBar', () => {
     const defaultProps = {
         isSourceMode: false,
         toggleSource: vi.fn(),
+        onFormat: vi.fn(),
         onSave: vi.fn()
     };
     beforeEach(() => {

package/dist/cjs/tiptap/components/menu-bar/__tests__/index.test.tsx

@@ -99,6 +99,7 @@ describe('MenuBar', () => {
   const defaultProps = {
     isSourceMode: false,
     toggleSource: vi.fn(),
+    onFormat: vi.fn(),
     onSave: vi.fn()
   };
 

package/dist/cjs/tiptap/components/menu-bar/action-toolbar.d.ts

@@ -7,9 +7,10 @@ interface ActionToolbarProps {
     editorState: EditorState;
     isSourceMode: boolean;
     toggleSource: () => void;
+    onFormat: () => Promise<void>;
     disabled?: boolean;
     hiddenButtons?: Array<ToolbarButtonId>;
 }
-export declare const ActionToolbar: ({ editor, editorState, isSourceMode, toggleSource, disabled, hiddenButtons }: ActionToolbarProps) => React.JSX.Element;
+export declare const ActionToolbar: ({ editor, editorState, isSourceMode, toggleSource, onFormat, disabled, hiddenButtons }: ActionToolbarProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=action-toolbar.d.ts.map

package/dist/cjs/tiptap/components/menu-bar/action-toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/tiptap/components/menu-bar/action-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAGnC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEhE,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;CACxC;AAYD,eAAO,MAAM,aAAa,GAAI,8EAO3B,kBAAkB,sBAmDpB,CAAC"}
+{"version":3,"file":"action-toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/tiptap/components/menu-bar/action-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAGnC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEhE,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC;CACxC;AAYD,eAAO,MAAM,aAAa,GAAI,wFAQ3B,kBAAkB,sBA6DpB,CAAC"}

package/dist/cjs/tiptap/components/menu-bar/action-toolbar.js

@@ -3,7 +3,7 @@ import { Button } from '@akinon/ui-button';
 import React from 'react';
 import { i18n } from '../../../i18n';
 import { TOOLBAR_BUTTON_IDS } from '../../constants';
-export const ActionToolbar = ({ editor, editorState, isSourceMode, toggleSource, disabled = false, hiddenButtons = [] }) => {
+export const ActionToolbar = ({ editor, editorState, isSourceMode, toggleSource, onFormat, disabled = false, hiddenButtons = [] }) => {
     const activeCls = 'active';
     const actionButtons = [
         {
@@ -23,8 +23,16 @@ export const ActionToolbar = ({ editor, editorState, isSourceMode, toggleSource,
             disabled: disabled || isSourceMode || !editorState.canRedo
         },
         {
-            id: TOOLBAR_BUTTON_IDS.SOURCE_MODE,
+            id: TOOLBAR_BUTTON_IDS.FORMAT,
             key: 3,
+            icon: 'format-beautify',
+            tooltip: i18n.t('editor.toolbar.format'),
+            onClick: onFormat,
+            disabled: !isSourceMode
+        },
+        {
+            id: TOOLBAR_BUTTON_IDS.SOURCE_MODE,
+            key: 4,
             icon: isSourceMode ? 'eye-close' : 'eye-open',
             tooltip: isSourceMode
                 ? i18n.t('editor.toolbar.normal_mode')

package/dist/cjs/tiptap/components/menu-bar/index.d.ts

@@ -5,13 +5,14 @@ interface MenuBarProps {
     editor: Editor;
     isSourceMode: boolean;
     toggleSource: () => void;
+    onFormat: () => Promise<void>;
     onSave?: () => void;
     className?: string;
     toolbar?: ToolbarConfig;
     readOnly?: boolean;
 }
 export declare const MenuBar: {
-    ({ editor, isSourceMode, toggleSource, className, toolbar, readOnly }: MenuBarProps): React.JSX.Element;
+    ({ editor, isSourceMode, toggleSource, onFormat, className, toolbar, readOnly }: MenuBarProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/cjs/tiptap/components/menu-bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/tiptap/components/menu-bar/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAI5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAe,aAAa,EAAE,MAAM,aAAa,CAAC;AAS9D,UAAU,YAAY;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,OAAO;2EAOjB,YAAY;;CAqMd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/tiptap/components/menu-bar/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAI5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAe,aAAa,EAAE,MAAM,aAAa,CAAC;AAS9D,UAAU,YAAY;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,OAAO;qFAQjB,YAAY;;CAsMd,CAAC"}

package/dist/cjs/tiptap/components/menu-bar/index.js

@@ -12,7 +12,7 @@ import { LinkPopover } from './link-popover';
 import { ListAndBlockToolbar } from './list-and-block-toolbar';
 import { MediaToolbar } from './media-toolbar';
 import { TextFormattingToolbar } from './text-formatting-toolbar';
-export const MenuBar = ({ editor, isSourceMode, toggleSource, className, toolbar, readOnly = false }) => {
+export const MenuBar = ({ editor, isSourceMode, toggleSource, onFormat, className, toolbar, readOnly = false }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
     const { token, hashId } = useToken();
@@ -126,6 +126,6 @@ export const MenuBar = ({ editor, isSourceMode, toggleSource, className, toolbar
             !((_d = toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenGroups) === null || _d === void 0 ? void 0 : _d.includes(TOOLBAR_GROUP_IDS.LINK)) && (React.createElement(LinkPopover, { editor: editor, editorState: editorState, disabled: isDisabled })),
             !((_e = toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenGroups) === null || _e === void 0 ? void 0 : _e.includes(TOOLBAR_GROUP_IDS.MEDIA)) && (React.createElement(MediaToolbar, { editor: editor, editorState: editorState, disabled: isDisabled, hiddenButtons: toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenButtons })),
             !((_f = toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenGroups) === null || _f === void 0 ? void 0 : _f.includes(TOOLBAR_GROUP_IDS.ALIGNMENT)) && (React.createElement(AlignmentToolbar, { editor: editor, editorState: editorState, disabled: isDisabled })),
-            !((_g = toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenGroups) === null || _g === void 0 ? void 0 : _g.includes(TOOLBAR_GROUP_IDS.HISTORY)) && (React.createElement(ActionToolbar, { editor: editor, editorState: editorState, isSourceMode: isSourceMode, toggleSource: toggleSource, disabled: readOnly, hiddenButtons: toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenButtons })))));
+            !((_g = toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenGroups) === null || _g === void 0 ? void 0 : _g.includes(TOOLBAR_GROUP_IDS.HISTORY)) && (React.createElement(ActionToolbar, { editor: editor, editorState: editorState, isSourceMode: isSourceMode, toggleSource: toggleSource, onFormat: onFormat, disabled: readOnly, hiddenButtons: toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenButtons })))));
 };
 MenuBar.displayName = 'MenuBar';

package/dist/cjs/tiptap/components/tiptap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tiptap.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/components/tiptap.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAQvE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAOhD,eAAO,MAAM,MAAM,GAAI,iHAUpB,eAAe,sBAiZjB,CAAC"}
+{"version":3,"file":"tiptap.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/components/tiptap.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAQvE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAWhD,eAAO,MAAM,MAAM,GAAI,iHAUpB,eAAe,sBAmajB,CAAC"}