@akinon/ui-editor 1.0.0

package/dist/esm/tiptap/components/__tests__/table-popover.test.tsx

@@ -0,0 +1,157 @@
+import '@testing-library/jest-dom';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { type Editor } from '@tiptap/react';
+import { ConfigProvider } from 'antd';
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { TablePopover } from '../table-popover';
+
+vi.mock('../../../i18n', () => ({
+  i18n: {
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'editor.table.select_size': 'editor.table.select_size',
+        'editor.table.insert_table': 'Insert Table'
+      };
+      return translations[key] || key;
+    }
+  }
+}));
+
+vi.mock('@akinon/ui-button', () => ({
+  Button: ({
+    icon,
+    onClick,
+    disabled,
+    className,
+    tooltip,
+    children
+  }: {
+    icon?: string;
+    onClick: () => void;
+    disabled?: boolean;
+    className?: string;
+    tooltip?: string;
+    children?: React.ReactNode;
+  }) => (
+    <button
+      data-testid={icon ? `ui-button-${icon}` : 'ui-button'}
+      onClick={onClick}
+      disabled={disabled}
+      className={className}
+      title={tooltip}
+    >
+      {icon}
+      {children}
+    </button>
+  )
+}));
+
+vi.mock('@akinon/ui-popover', () => ({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Popover: ({ children, content, open, onOpenChange }: any) => {
+    return (
+      <div data-testid="ui-popover">
+        <div onClick={() => onOpenChange?.(!open)}>{children}</div>
+        {open && <div data-testid="popover-content">{content}</div>}
+      </div>
+    );
+  }
+}));
+
+vi.mock('@akinon/ui-theme', () => ({
+  useToken: () => ({
+    token: {
+      colorBorder: '#d9d9d9',
+      colorBgContainer: '#ffffff',
+      colorPrimaryBg: '#e6f7ff',
+      colorPrimary: '#1890ff',
+      colorPrimaryBgHover: '#bae7ff',
+      colorText: '#000000'
+    },
+    hashId: 'hash-id'
+  })
+}));
+
+vi.mock('@ant-design/cssinjs', () => ({
+  useStyleRegister: vi.fn((_config, cb) => {
+    cb();
+    return (node: React.ReactNode) => node;
+  })
+}));
+
+describe('TablePopover', () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let mockEditor: any;
+
+  beforeEach(() => {
+    mockEditor = {
+      commands: {
+        focus: vi.fn(),
+        insertTable: vi.fn()
+      }
+    };
+  });
+
+  const renderComponent = (disabled = false) => {
+    return render(
+      <ConfigProvider>
+        <TablePopover
+          editor={mockEditor as unknown as Editor}
+          disabled={disabled}
+        />
+      </ConfigProvider>
+    );
+  };
+
+  it('should render the table button', () => {
+    renderComponent();
+    expect(screen.getByTestId('ui-button-table')).toBeInTheDocument();
+  });
+
+  it('should open popover when button is clicked', () => {
+    renderComponent();
+    const button = screen.getByTestId('ui-button-table');
+
+    fireEvent.click(button);
+
+    expect(screen.getByTestId('popover-content')).toBeInTheDocument();
+    expect(screen.getByText('editor.table.select_size')).toBeInTheDocument();
+  });
+
+  it('should update label when hovering over grid cells', () => {
+    renderComponent();
+    fireEvent.click(screen.getByTestId('ui-button-table'));
+
+    const cells = screen
+      .getByTestId('popover-content')
+      .querySelectorAll('.ant-tiptap-table-popover__cell');
+
+    // row 3, col 4 is cells[23] (index = (row-1)*10 + (col-1))
+    fireEvent.mouseEnter(cells[23]);
+
+    expect(screen.getByText('3 x 4')).toBeInTheDocument();
+  });
+
+  it('should insert table when a cell is clicked', () => {
+    renderComponent();
+    fireEvent.click(screen.getByTestId('ui-button-table'));
+
+    const cells = screen
+      .getByTestId('popover-content')
+      .querySelectorAll('.ant-tiptap-table-popover__cell');
+
+    fireEvent.click(cells[12]);
+
+    expect(mockEditor.commands.insertTable).toHaveBeenCalledWith({
+      rows: 2,
+      cols: 3,
+      withHeaderRow: true
+    });
+    expect(mockEditor.commands.focus).toHaveBeenCalled();
+
+    expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=tiptap.test.d.ts.map

package/dist/esm/tiptap/components/__tests__/tiptap.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tiptap.test.d.ts","sourceRoot":"","sources":["../../../../../src/tiptap/components/__tests__/tiptap.test.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC"}

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

@@ -0,0 +1,275 @@
+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 }) => (React.createElement("div", { "data-testid": "editor-content", className: className }, "Editor Content"))
+}));
+vi.mock('@tiptap/extension-drag-handle-react', () => ({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    default: ({ children }) => (React.createElement("div", { "data-testid": "drag-handle" }, children))
+}));
+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 }) => (React.createElement("div", { "data-testid": "menu-bar" },
+        React.createElement("button", { onClick: toggleSource, "data-testid": "toggle-source" }, isSourceMode ? 'Switch to Visual' : 'Switch to Source'))))
+}));
+vi.mock('../format-bubble-menu', () => ({
+    FormatBubbleMenu: () => React.createElement("div", { "data-testid": "format-bubble-menu" })
+}));
+vi.mock('../table-bubble-menu', () => ({
+    TableBubbleMenu: () => React.createElement("div", { "data-testid": "table-bubble-menu" })
+}));
+vi.mock('../html-code-viewer', () => ({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    HtmlCodeViewer: ({ value, onChange }) => (React.createElement("textarea", { "data-testid": "html-code-viewer", value: value, onChange: e => onChange(e.target.value) }))
+}));
+vi.mock('../../assets/icons', () => ({
+    DragHandleIcon: () => React.createElement("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) => 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) => node;
+    })
+}));
+describe('Tiptap', () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let mockEditor;
+    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(React.createElement(Tiptap, Object.assign({ 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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(Tiptap, { value: "<p>Test</p>", onChange: undefined }));
+    });
+    it('should use defaultValue if value is not provided', () => {
+        render(React.createElement(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.mock.calls.find(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (call) => 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(React.createElement(Tiptap, { value: "<p>Same</p>", onChange: onChange }));
+        const calls = mockEditor.commands.setContent.mock.calls;
+        const updateCalls = calls.filter((call) => 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.mock.calls.find(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (call) => 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
+        React.createElement(ConfigProvider, { theme: partialTheme },
+            React.createElement(Tiptap, { value: "<p>Test</p>", onChange: onChange })));
+        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
+        React.createElement(ConfigProvider, { theme: fullTheme },
+            React.createElement(Tiptap, { value: "<p>Test</p>", onChange: onChange })));
+        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
+        };
+        const resultAnchor = handleClick(null, 0, mockEventAnchor);
+        expect(resultAnchor).toBe(true);
+        expect(preventDefault).toHaveBeenCalled();
+        const divElement = document.createElement('div');
+        const mockEventDiv = {
+            target: divElement,
+            preventDefault
+        };
+        preventDefault.mockClear();
+        const resultDiv = handleClick(null, 0, mockEventDiv);
+        expect(resultDiv).toBe(false);
+        expect(preventDefault).not.toHaveBeenCalled();
+    });
+});