@akinon/ui-editor 1.0.0

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

@@ -0,0 +1,378 @@
+import '@testing-library/jest-dom/vitest';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ConfigProvider } from 'antd';
+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(() => ({
+  mockUseEditor: vi.fn(),
+  mockChangeLanguage: vi.fn()
+}));
+
+vi.mock('@tiptap/react', () => ({
+  useEditor: mockUseEditor,
+  useEditorState: vi.fn(() => ({})),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  EditorContent: ({ className }: any) => (
+    <div data-testid="editor-content" className={className}>
+      Editor Content
+    </div>
+  )
+}));
+
+vi.mock('@tiptap/extension-drag-handle-react', () => ({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default: ({ children }: any) => (
+    <div data-testid="drag-handle">{children}</div>
+  )
+}));
+
+vi.mock('@tiptap/html', () => ({
+  generateJSON: vi.fn(() => ({ type: 'doc', content: [] }))
+}));
+
+vi.mock('../menu-bar', () => ({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  MenuBar: vi.fn(({ toggleSource, isSourceMode }: any) => (
+    <div data-testid="menu-bar">
+      <button onClick={toggleSource} data-testid="toggle-source">
+        {isSourceMode ? 'Switch to Visual' : 'Switch to Source'}
+      </button>
+    </div>
+  ))
+}));
+
+vi.mock('../format-bubble-menu', () => ({
+  FormatBubbleMenu: () => <div data-testid="format-bubble-menu" />
+}));
+
+vi.mock('../table-bubble-menu', () => ({
+  TableBubbleMenu: () => <div data-testid="table-bubble-menu" />
+}));
+
+vi.mock('../html-code-viewer', () => ({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  HtmlCodeViewer: ({ value, onChange }: any) => (
+    <textarea
+      data-testid="html-code-viewer"
+      value={value}
+      onChange={e => onChange(e.target.value)}
+    />
+  )
+}));
+
+vi.mock('../../assets/icons', () => ({
+  DragHandleIcon: () => <div data-testid="drag-handle-icon" />
+}));
+
+vi.mock('../../utils', () => ({
+  getExtensions: vi.fn(() => []),
+  formatHtml: vi.fn(html => `formatted-${html}`),
+  normalizeHtml: vi.fn(html => `normalized-${html}`)
+}));
+
+vi.mock('@akinon/akilocale/react', () => ({
+  useTranslation: () => ({
+    i18n: { changeLanguage: mockChangeLanguage },
+    t: (key: string) => key
+  })
+}));
+
+vi.mock('@akinon/ui-theme', () => ({
+  getSafeCustomTokens: vi.fn(() => ({
+    typography: { fontWeightMedium: 500 }
+  })),
+  useToken: () => ({
+    token: { colorBorder: '#ccc' },
+    hashId: 'hash-id'
+  }),
+  getPrefixCls: vi.fn(cls => `ant-${cls}`)
+}));
+
+vi.mock('@ant-design/cssinjs', () => ({
+  useStyleRegister: vi.fn((_config, cb) => {
+    cb();
+    return (node: React.ReactNode) => node;
+  })
+}));
+
+describe('Tiptap', () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let mockEditor: any;
+  const onChange = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockEditor = {
+      getHTML: vi.fn(() => '<p>Initial Content</p>'),
+      getJSON: vi.fn(() => ({ type: 'doc' })),
+      setEditable: vi.fn(),
+      commands: {
+        setContent: vi.fn(),
+        blur: vi.fn()
+      }
+    };
+
+    mockUseEditor.mockReturnValue(mockEditor);
+  });
+
+  const renderComponent = (props = {}) => {
+    return render(
+      <Tiptap value="<p>Test</p>" onChange={onChange} {...props} />
+    );
+  };
+
+  it('should render in source mode by default', () => {
+    renderComponent();
+    expect(screen.getByTestId('html-code-viewer')).toBeInTheDocument();
+  });
+
+  it('should render in preview mode when sourceMode button is hidden', () => {
+    renderComponent({
+      toolbar: {
+        hiddenButtons: ['sourceMode']
+      }
+    });
+    expect(screen.getByTestId('editor-content')).toBeInTheDocument();
+    expect(screen.queryByTestId('html-code-viewer')).not.toBeInTheDocument();
+  });
+
+  it('should render in source mode when toolbar is undefined', () => {
+    renderComponent({ toolbar: undefined });
+    expect(screen.getByTestId('html-code-viewer')).toBeInTheDocument();
+  });
+
+  it('should render in source mode when hiddenButtons is undefined', () => {
+    renderComponent({
+      toolbar: {}
+    });
+    expect(screen.getByTestId('html-code-viewer')).toBeInTheDocument();
+  });
+
+  it('should toggle between source and visual modes', () => {
+    renderComponent();
+    const toggleButton = screen.getByTestId('toggle-source');
+
+    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 }
+    );
+
+    fireEvent.click(toggleButton);
+    expect(screen.getByTestId('html-code-viewer')).toBeInTheDocument();
+  });
+
+  it('should handle source code changes', () => {
+    renderComponent();
+    const viewer = screen.getByTestId('html-code-viewer');
+
+    fireEvent.change(viewer, { target: { value: '<p>New Content</p>' } });
+
+    expect(onChange).toHaveBeenCalledWith({
+      html: '<p>New Content</p>',
+      json: expect.any(Object)
+    });
+  });
+
+  it('should update editor content when value prop changes', () => {
+    const { rerender } = renderComponent({ value: '<p>Old</p>' });
+
+    mockEditor.getHTML.mockReturnValue('<p>Old</p>');
+
+    rerender(<Tiptap value="<p>New</p>" onChange={onChange} />);
+
+    expect(mockEditor.commands.setContent).toHaveBeenCalledWith('<p>New</p>');
+  });
+
+  it('should update editor editable state when readOnly prop changes', () => {
+    const { rerender } = renderComponent({ readOnly: false });
+    expect(mockEditor.setEditable).toHaveBeenCalledWith(true);
+
+    rerender(
+      <Tiptap value="<p>Test</p>" readOnly={true} onChange={onChange} />
+    );
+    expect(mockEditor.setEditable).toHaveBeenCalledWith(false);
+  });
+
+  it('should call onChange on editor update', () => {
+    renderComponent();
+
+    const onUpdateCallback = mockUseEditor.mock.calls[0][0].onUpdate;
+    onUpdateCallback({ editor: mockEditor });
+
+    expect(onChange).toHaveBeenCalledWith({
+      html: '<p>Initial Content</p>',
+      json: { type: 'doc' }
+    });
+  });
+
+  it('should handle undefined onChange', () => {
+    const { rerender } = render(
+      <Tiptap value="<p>Test</p>" onChange={undefined} />
+    );
+
+    const onUpdateCallback = mockUseEditor.mock.calls[0][0].onUpdate;
+    expect(() => onUpdateCallback({ editor: mockEditor })).not.toThrow();
+
+    const viewer = screen.getByTestId('html-code-viewer');
+    fireEvent.change(viewer, { target: { value: 'new' } });
+
+    rerender(<Tiptap value="<p>Test</p>" onChange={undefined} />);
+  });
+
+  it('should use defaultValue if value is not provided', () => {
+    render(<Tiptap defaultValue="<p>Default</p>" onChange={onChange} />);
+    expect(mockUseEditor).toHaveBeenCalledWith(
+      expect.objectContaining({
+        content: '<p>Default</p>'
+      })
+    );
+  });
+
+  it('should provide getCleanHtml to MenuBar and it should work', () => {
+    renderComponent();
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const menuBarCall = (MenuBar as any).mock.calls.find(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (call: [any]) => call[0].onSave
+    );
+    const onSave = menuBarCall[0].onSave;
+
+    mockEditor.getHTML.mockReturnValue('<script>alert(1)</script>');
+    const cleanHtml = onSave();
+
+    expect(cleanHtml).toBe('<script>alert(1)</script>');
+  });
+
+  it('should not update editor content if value is same as editor content', () => {
+    mockEditor.getHTML.mockReturnValue('<p>Initial</p>');
+    const { rerender } = renderComponent({ value: '<p>Initial</p>' });
+
+    mockEditor.commands.setContent.mockClear();
+
+    mockEditor.getHTML.mockReturnValue('<p>Same</p>');
+    rerender(<Tiptap value="<p>Same</p>" onChange={onChange} />);
+
+    const calls = mockEditor.commands.setContent.mock.calls;
+    const updateCalls = calls.filter(
+      (call: unknown[]) => call[0] === '<p>Same</p>'
+    );
+
+    expect(updateCalls.length).toBe(0);
+  });
+
+  it('should use custom classNames', () => {
+    renderComponent({
+      classNames: {
+        editorToolbar: 'custom-toolbar',
+        editorContent: 'custom-content'
+      }
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const menuBarCall = (MenuBar as any).mock.calls.find(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (call: [any]) => call[0].className === 'custom-toolbar'
+    );
+    expect(menuBarCall).toBeDefined();
+
+    fireEvent.click(screen.getByTestId('toggle-source'));
+    expect(screen.getByTestId('editor-content')).toHaveClass('custom-content');
+  });
+
+  it('should handle partial theme colors for branch coverage', () => {
+    const partialTheme = {
+      colors: {
+        ebonyClay: { '475': '#1a1a1a' },
+        azure: { '500': '#0070f3', '400': '#00aae4' },
+        neutral: { '100': '#f5f5f5', '600': '#333333' }
+      }
+    };
+    render(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      <ConfigProvider theme={partialTheme as any}>
+        <Tiptap value="<p>Test</p>" onChange={onChange} />
+      </ConfigProvider>
+    );
+    expect(screen.getByTestId('html-code-viewer')).toBeInTheDocument();
+  });
+
+  it('should handle full theme colors for coverage', () => {
+    const fullTheme = {
+      colors: {
+        indigo: {
+          '50-05': '#e8e8fd0d',
+          '100-11': '#eeeef61c',
+          '50-08': '#e8e8fd14',
+          '100-15': '#eeeef626',
+          '300-40': '#c8c8ff66'
+        },
+        orange: { '300': '#fcd997' },
+        neutral: {
+          '50': '#ffffff',
+          '60-88': '#fdfdfde0',
+          '600': '#525252',
+          '100': '#f5f6f6'
+        },
+        azure: { '500': '#3b82f6', '400': '#74b4f7' },
+        ebonyClay: { '475': '#2b344c' }
+      }
+    };
+    render(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      <ConfigProvider theme={fullTheme as any}>
+        <Tiptap value="<p>Test</p>" onChange={onChange} />
+      </ConfigProvider>
+    );
+    expect(screen.getByTestId('html-code-viewer')).toBeInTheDocument();
+  });
+
+  it('should pass handleClick to editorProps', () => {
+    renderComponent();
+    expect(mockUseEditor).toHaveBeenCalledWith(
+      expect.objectContaining({
+        editorProps: expect.objectContaining({
+          handleClick: expect.any(Function)
+        })
+      })
+    );
+  });
+
+  it('should handle editor clicks correctly', () => {
+    renderComponent();
+    const editorInitOptions = mockUseEditor.mock.calls[0][0];
+    const handleClick = editorInitOptions.editorProps.handleClick;
+
+    const preventDefault = vi.fn();
+
+    const anchorElement = document.createElement('a');
+    const mockEventAnchor = {
+      target: anchorElement,
+      preventDefault
+    } as unknown as MouseEvent;
+
+    const resultAnchor = handleClick(null, 0, mockEventAnchor);
+    expect(resultAnchor).toBe(true);
+    expect(preventDefault).toHaveBeenCalled();
+
+    const divElement = document.createElement('div');
+    const mockEventDiv = {
+      target: divElement,
+      preventDefault
+    } as unknown as MouseEvent;
+
+    preventDefault.mockClear();
+    const resultDiv = handleClick(null, 0, mockEventDiv);
+    expect(resultDiv).toBe(false);
+    expect(preventDefault).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,8 @@
+import type { Editor } from '@tiptap/react';
+import React from 'react';
+interface FormatBubbleMenuProps {
+    editor: Editor;
+}
+export declare const FormatBubbleMenu: ({ editor }: FormatBubbleMenuProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=format-bubble-menu.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,202 @@
+import { Button } from '@akinon/ui-button';
+import { Input } from '@akinon/ui-input';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { getMarkRange, isTextSelection } from '@tiptap/core';
+import { BubbleMenu } from '@tiptap/react/menus';
+import { ConfigProvider } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { i18n } from '../../i18n';
+export const FormatBubbleMenu = ({ editor }) => {
+    if (!editor) {
+        return null;
+    }
+    const [url, setUrl] = useState('');
+    const [showLinkInput, setShowLinkInput] = useState(false);
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const colors = (theme === null || theme === void 0 ? void 0 : theme.colors) || {};
+    const baseCls = getPrefixCls('tiptap-format-bubble-menu');
+    const activeCls = 'active';
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['FormatBubbleMenu'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        var _a, _b, _c, _d, _e;
+        const prefixCls = `:where(.${hashId}).${baseCls}`;
+        return {
+            [prefixCls]: {
+                padding: '8px',
+                display: 'flex',
+                gap: '8px',
+                backgroundColor: (_a = colors.ebonyClay) === null || _a === void 0 ? void 0 : _a['500'],
+                color: (_b = colors.neutral) === null || _b === void 0 ? void 0 : _b['50'],
+                borderRadius: '4px',
+                boxShadow: token.boxShadowSecondary,
+                border: `2px solid ${(_c = colors.ebonyClay) === null || _c === void 0 ? void 0 : _c['550']}`,
+                alignItems: 'center',
+                maxWidth: '400px',
+                position: 'relative'
+            },
+            [`${prefixCls}::before`]: {
+                content: '""',
+                position: 'absolute',
+                top: '-8px',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                borderWidth: '0 8px 8px 8px',
+                borderStyle: 'solid',
+                borderColor: `transparent transparent ${(_d = colors.ebonyClay) === null || _d === void 0 ? void 0 : _d['550']} transparent`,
+                width: 0,
+                height: 0
+            },
+            [`${prefixCls}::after`]: {
+                content: '""',
+                position: 'absolute',
+                top: '-5px',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                borderWidth: '0 8px 8px 8px',
+                borderStyle: 'solid',
+                borderColor: `transparent transparent ${(_e = colors.ebonyClay) === null || _e === void 0 ? void 0 : _e['500']} transparent`,
+                width: 0,
+                height: 0
+            },
+            [`${prefixCls} .${baseCls}__link-input`]: {
+                width: '200px'
+            },
+            [`${prefixCls} .${baseCls}__actions`]: {
+                display: 'flex',
+                gap: '4px',
+                alignItems: 'center'
+            }
+        };
+    });
+    useEffect(() => {
+        const updateState = () => {
+            const isLink = editor.isActive('link');
+            if (isLink) {
+                const href = editor.getAttributes('link').href;
+                setUrl(href || '');
+                setShowLinkInput(true);
+            }
+            else {
+                setUrl('');
+                setShowLinkInput(false);
+            }
+        };
+        updateState();
+        editor.on('selectionUpdate', updateState);
+        return () => {
+            editor.off('selectionUpdate', updateState);
+        };
+    }, [editor]);
+    const handleApplyLink = () => {
+        if (url) {
+            editor
+                .chain()
+                .focus()
+                .extendMarkRange('link')
+                .setMark('link', { href: url })
+                .setTextSelection(editor.state.selection.to)
+                .run();
+        }
+        setShowLinkInput(false);
+    };
+    const handleRemoveLink = () => {
+        editor
+            .chain()
+            .focus()
+            .unsetMark('link')
+            .setTextSelection(editor.state.selection.to)
+            .run();
+        setShowLinkInput(false);
+    };
+    const handleLinkIconClick = () => {
+        setShowLinkInput(true);
+        {
+            /* Set the URL state based on the current link attribute */
+        }
+        if (editor.isActive('link')) {
+            setUrl(editor.getAttributes('link').href || '');
+        }
+        else {
+            setUrl('');
+        }
+    };
+    const formattingButtons = [
+        {
+            icon: 'format-bold',
+            onClick: () => editor.chain().focus().toggleMark('bold').run(),
+            isActive: editor.isActive('bold'),
+            tooltip: i18n.t('editor.toolbar.bold')
+        },
+        {
+            icon: 'format-italic',
+            onClick: () => editor.chain().focus().toggleMark('italic').run(),
+            isActive: editor.isActive('italic'),
+            tooltip: i18n.t('editor.toolbar.italic')
+        },
+        {
+            icon: 'format-strikethrough',
+            onClick: () => editor.chain().focus().toggleMark('strike').run(),
+            isActive: editor.isActive('strike'),
+            tooltip: i18n.t('editor.toolbar.strike')
+        },
+        {
+            icon: 'format-underline',
+            onClick: () => editor.chain().focus().toggleMark('underline').run(),
+            isActive: editor.isActive('underline'),
+            tooltip: i18n.t('editor.toolbar.underline')
+        },
+        {
+            icon: 'format-eraser',
+            onClick: () => editor.chain().focus().unsetAllMarks().run(),
+            isActive: false,
+            tooltip: i18n.t('editor.toolbar.clear_formatting')
+        },
+        {
+            icon: 'linked',
+            onClick: handleLinkIconClick,
+            isActive: editor.isActive('link'),
+            tooltip: i18n.t('editor.toolbar.link')
+        }
+    ];
+    return useStyle(React.createElement(BubbleMenu, { editor: editor, pluginKey: "link-bubble-menu", options: { placement: 'bottom' }, shouldShow: ({ editor }) => {
+            if (!isTextSelection(editor.state.selection) ||
+                editor.isActive('table')) {
+                return false;
+            }
+            const { from, to } = editor.state.selection;
+            const isImage = editor.isActive('image');
+            const isCodeBlock = editor.isActive('codeBlock');
+            const isCode = editor.isActive('code');
+            const isYoutube = editor.isActive('youtube');
+            const isImageUpload = editor.isActive('imageUpload');
+            if (isImage || isCodeBlock || isCode || isYoutube || isImageUpload) {
+                return false;
+            }
+            if (editor.isActive('link')) {
+                if (from === to) {
+                    const range = getMarkRange(editor.state.selection.$from, editor.schema.marks.link);
+                    if (range && (range.from === from || range.to === from)) {
+                        return false;
+                    }
+                    return true;
+                }
+                return true;
+            }
+            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("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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface HtmlCodeViewerProps {
+    value: string;
+    onChange: (value: string) => void;
+    className?: string;
+    readOnly?: boolean;
+}
+export declare const HtmlCodeViewer: ({ value, onChange, className, readOnly }: HtmlCodeViewerProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=html-code-viewer.d.ts.map

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

@@ -0,0 +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"}