@akinon/ui-editor 1.0.2 → 1.0.4

package/dist/esm/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/esm/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/esm/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/esm/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/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":"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/esm/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/esm/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/esm/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')),

package/dist/esm/tiptap/components/secure-script-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"secure-script-component.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/components/secure-script-component.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,qBAAqB,yBAqEjC,CAAC"}
+{"version":3,"file":"secure-script-component.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/components/secure-script-component.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,qBAAqB,yBAkEjC,CAAC"}

package/dist/esm/tiptap/components/secure-script-component.js

@@ -18,7 +18,7 @@ export const SecureScriptComponent = () => {
         const colors = (theme === null || theme === void 0 ? void 0 : theme.colors) || {};
         return {
             [`${prefixCls}`]: {
-                display: 'block', // Code block implies block level
+                display: 'block',
                 margin: '1em 0',
                 fontFamily: 'monospace',
                 borderRadius: '6px',
@@ -45,14 +45,11 @@ export const SecureScriptComponent = () => {
                     color: (_b = colors.neutral) === null || _b === void 0 ? void 0 : _b['50'],
                     outline: 'none',
                     fontFamily: 'inherit'
-                },
-                [`& .${baseCls}__content div[data-node-view-wrapper]`]: {
-                    paddingLeft: '20px'
                 }
             }
         };
     });
-    return useStyle(React.createElement(NodeViewWrapper, { className: `${baseCls} ${hashId}` },
+    return useStyle(React.createElement(NodeViewWrapper, { className: `${baseCls} ${hashId}`, contentEditable: false },
         React.createElement("pre", null,
             React.createElement("code", null,
                 React.createElement("span", { className: `${baseCls}__tag` }, "<script>"),

package/dist/esm/tiptap/components/tiptap.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type TextEditorProps } from '../types';
-export declare const Tiptap: ({ value, defaultValue, onChange, readOnly, classNames, toolbar, defaultSourceMode, placeholder }: TextEditorProps) => React.JSX.Element;
+export declare const Tiptap: ({ value, defaultValue, onChange, readOnly, classNames, toolbar, defaultSourceMode, placeholder, contentHeight }: TextEditorProps) => React.JSX.Element;
 //# sourceMappingURL=tiptap.d.ts.map

package/dist/esm/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,KAAoB,MAAM,OAAO,CAAC;AAQzC,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAOhD,eAAO,MAAM,MAAM,GAAI,kGASpB,eAAe,sBAwWjB,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;AAOhD,eAAO,MAAM,MAAM,GAAI,iHAUpB,eAAe,sBAiZjB,CAAC"}