@akinon/ui-editor 1.0.0

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

@@ -0,0 +1,466 @@
+import '@testing-library/jest-dom';
+
+import { act, 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 { TableBubbleMenu } from '../table-bubble-menu';
+
+vi.mock('../../../i18n', () => ({
+  i18n: {
+    t: (key: string) => 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-input', () => ({
+  Input: ({
+    value,
+    onChange,
+    onKeyDown,
+    placeholder,
+    className
+  }: {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    className?: string;
+  }) => (
+    <input
+      data-testid="ui-input"
+      value={value}
+      onChange={onChange}
+      onKeyDown={onKeyDown}
+      placeholder={placeholder}
+      className={className}
+    />
+  )
+}));
+
+vi.mock('@akinon/ui-select', () => ({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Select: ({ value, onChange, options, rootClassName }: any) => (
+    <select
+      data-testid="ui-select"
+      value={value}
+      onChange={e => onChange(e.target.value)}
+      className={rootClassName}
+    >
+      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+      {options.map((opt: any) => (
+        <option key={opt.value} value={opt.value}>
+          {opt.label}
+        </option>
+      ))}
+    </select>
+  )
+}));
+
+vi.mock('@akinon/ui-color-picker', () => ({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ColorPicker: ({ value, onChange }: any) => (
+    <input
+      data-testid="ui-color-picker"
+      type="color"
+      value={
+        !value || value === 'transparent' || typeof value !== 'string'
+          ? '#ffffff'
+          : value
+      }
+      onChange={e => {
+        const val = e.target.value;
+        if (value === 'transparent' || value === '#ffffff') {
+          onChange(val);
+        } else if (val === '#000001') {
+          onChange({});
+        } else {
+          onChange({ toHexString: () => val });
+        }
+      }}
+    />
+  )
+}));
+
+vi.mock('@akinon/ui-theme', () => ({
+  useToken: () => ({
+    token: { boxShadowSecondary: '0 2px 8px rgba(0,0,0,0.15)' },
+    hashId: 'hash-id'
+  })
+}));
+
+vi.mock('@ant-design/cssinjs', () => ({
+  useStyleRegister: vi.fn((_config, cb) => {
+    cb();
+    return (node: React.ReactNode) => node;
+  })
+}));
+
+export let capturedShouldShow: (props: { editor: Editor }) => boolean;
+
+vi.mock('@tiptap/react/menus', () => ({
+  BubbleMenu: ({
+    children,
+    shouldShow
+  }: {
+    children: React.ReactNode;
+    shouldShow: (props: { editor: Editor }) => boolean;
+  }) => {
+    capturedShouldShow = shouldShow;
+    return <div data-testid="table-bubble-menu">{children}</div>;
+  }
+}));
+
+describe('TableBubbleMenu', () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let mockEditor: any;
+
+  beforeEach(() => {
+    mockEditor = {
+      isActive: vi.fn(),
+      getAttributes: vi.fn(() => ({})),
+      chain: vi.fn(() => mockEditor),
+      focus: vi.fn(() => mockEditor),
+      addColumnBefore: vi.fn(() => mockEditor),
+      addColumnAfter: vi.fn(() => mockEditor),
+      deleteColumn: vi.fn(() => mockEditor),
+      addRowBefore: vi.fn(() => mockEditor),
+      addRowAfter: vi.fn(() => mockEditor),
+      deleteRow: vi.fn(() => mockEditor),
+      mergeCells: vi.fn(() => mockEditor),
+      splitCell: vi.fn(() => mockEditor),
+      deleteTable: vi.fn(() => mockEditor),
+      updateCellAttributes: vi.fn(() => mockEditor),
+      updateHeaderAttributes: vi.fn(() => mockEditor),
+      run: vi.fn(),
+      can: vi.fn(() => ({
+        mergeCells: () => true,
+        splitCell: () => true
+      })),
+      on: vi.fn(),
+      off: vi.fn()
+    };
+  });
+
+  const renderComponent = (editor = mockEditor as unknown as Editor) => {
+    return render(
+      <ConfigProvider>
+        <TableBubbleMenu editor={editor} />
+      </ConfigProvider>
+    );
+  };
+
+  it('should return null if editor is not provided', () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { container } = renderComponent(null as any);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should handle missing themes and colors', () => {
+    render(
+      <ConfigProvider theme={{}}>
+        <TableBubbleMenu editor={mockEditor as unknown as Editor} />
+      </ConfigProvider>
+    );
+    expect(screen.getByTestId('table-bubble-menu')).toBeInTheDocument();
+  });
+
+  it('should handle partial theme colors', () => {
+    render(
+      <ConfigProvider
+        theme={
+          {
+            colors: {
+              ebonyClay: { '500': '#000', '550': '#111' },
+              neutral: { '50': '#fff', '400': '#ccc' }
+            }
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          } as any
+        }
+      >
+        <TableBubbleMenu editor={mockEditor as unknown as Editor} />
+      </ConfigProvider>
+    );
+    expect(screen.getByTestId('table-bubble-menu')).toBeInTheDocument();
+  });
+
+  it('should render table action buttons', () => {
+    renderComponent();
+
+    expect(
+      screen.getByTestId('ui-button-add-column-before')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId('ui-button-add-column-after')
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('ui-button-delete-column')).toBeInTheDocument();
+    expect(screen.getByTestId('ui-button-add-row-before')).toBeInTheDocument();
+    expect(screen.getByTestId('ui-button-add-row-after')).toBeInTheDocument();
+    expect(screen.getByTestId('ui-button-delete-row')).toBeInTheDocument();
+    expect(screen.getByTestId('ui-button-format-merge')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('ui-button-format-split-cells')
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('ui-button-settings')).toBeInTheDocument();
+    expect(screen.getByTestId('ui-button-bin')).toBeInTheDocument();
+  });
+
+  it('should handle table actions', () => {
+    renderComponent();
+
+    fireEvent.click(screen.getByTestId('ui-button-add-column-before'));
+    expect(mockEditor.addColumnBefore).toHaveBeenCalled();
+
+    fireEvent.click(screen.getByTestId('ui-button-add-column-after'));
+    expect(mockEditor.addColumnAfter).toHaveBeenCalled();
+
+    fireEvent.click(screen.getByTestId('ui-button-delete-column'));
+    expect(mockEditor.deleteColumn).toHaveBeenCalled();
+
+    fireEvent.click(screen.getByTestId('ui-button-add-row-before'));
+    expect(mockEditor.addRowBefore).toHaveBeenCalled();
+
+    fireEvent.click(screen.getByTestId('ui-button-add-row-after'));
+    expect(mockEditor.addRowAfter).toHaveBeenCalled();
+
+    fireEvent.click(screen.getByTestId('ui-button-delete-row'));
+    expect(mockEditor.deleteRow).toHaveBeenCalled();
+
+    fireEvent.click(screen.getByTestId('ui-button-format-merge'));
+    expect(mockEditor.mergeCells).toHaveBeenCalled();
+
+    fireEvent.click(screen.getByTestId('ui-button-format-split-cells'));
+    expect(mockEditor.splitCell).toHaveBeenCalled();
+
+    fireEvent.click(screen.getByTestId('ui-button-bin'));
+    expect(mockEditor.deleteTable).toHaveBeenCalled();
+  });
+
+  it('should toggle cell styles when settings button is clicked', () => {
+    renderComponent();
+
+    expect(screen.queryByTestId('ui-select')).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('ui-button-settings'));
+
+    expect(screen.getByTestId('ui-select')).toBeInTheDocument();
+    expect(screen.getAllByTestId('ui-color-picker')).toHaveLength(2);
+    expect(screen.getByTestId('ui-input')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId('ui-button-settings'));
+    expect(screen.queryByTestId('ui-select')).not.toBeInTheDocument();
+  });
+
+  it('should cancel cell styles editing', () => {
+    renderComponent();
+
+    fireEvent.click(screen.getByTestId('ui-button-settings'));
+    expect(screen.getByTestId('ui-select')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('editor.common.cancel'));
+    expect(screen.queryByTestId('ui-select')).not.toBeInTheDocument();
+  });
+
+  it('should apply cell styles to regular cell', () => {
+    mockEditor.isActive.mockImplementation(
+      (name: string) => name === 'tableCell'
+    );
+    renderComponent();
+
+    fireEvent.click(screen.getByTestId('ui-button-settings'));
+
+    // Change some values
+    fireEvent.change(screen.getByTestId('ui-input'), {
+      target: { value: '2px' }
+    });
+
+    // Change border style
+    fireEvent.change(screen.getByTestId('ui-select'), {
+      target: { value: 'dashed' }
+    });
+
+    fireEvent.change(screen.getAllByTestId('ui-color-picker')[0], {
+      target: { value: '#ff0000' }
+    });
+
+    fireEvent.click(screen.getByText('editor.common.apply'));
+
+    expect(mockEditor.updateCellAttributes).toHaveBeenCalledWith({
+      borderColor: '#ff0000',
+      borderWidth: '2px',
+      borderStyle: 'dashed'
+    });
+  });
+
+  it('should apply cell styles to header cell', () => {
+    mockEditor.isActive.mockImplementation(
+      (name: string) => name === 'tableHeader'
+    );
+    renderComponent();
+
+    fireEvent.click(screen.getByTestId('ui-button-settings'));
+
+    fireEvent.change(screen.getAllByTestId('ui-color-picker')[1], {
+      target: { value: '#00ff00' }
+    });
+
+    fireEvent.click(screen.getByText('editor.common.apply'));
+
+    expect(mockEditor.updateHeaderAttributes).toHaveBeenCalledWith({
+      backgroundColor: '#00ff00'
+    });
+  });
+
+  it('should update cell styles state when selection updates', () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let selectionUpdateHandler: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    mockEditor.on.mockImplementation((name: string, handler: any) => {
+      if (name === 'selectionUpdate') {
+        selectionUpdateHandler = handler;
+      }
+    });
+
+    mockEditor.isActive.mockImplementation(
+      (name: string) => name === 'tableCell'
+    );
+    mockEditor.getAttributes.mockReturnValue({
+      borderColor: '#111111',
+      borderWidth: '3px',
+      borderStyle: 'dotted',
+      backgroundColor: '#222222'
+    });
+
+    renderComponent();
+
+    act(() => {
+      selectionUpdateHandler();
+    });
+
+    fireEvent.click(screen.getByTestId('ui-button-settings'));
+
+    expect(screen.getByTestId('ui-input')).toHaveValue('3px');
+    expect(screen.getByTestId('ui-select')).toHaveValue('dotted');
+    expect(screen.getAllByTestId('ui-color-picker')[0]).toHaveValue('#111111');
+    expect(screen.getAllByTestId('ui-color-picker')[1]).toHaveValue('#222222');
+  });
+
+  it('should cover getColorString branches', () => {
+    mockEditor.isActive.mockImplementation(
+      (name: string) => name === 'tableCell'
+    );
+    renderComponent();
+    fireEvent.click(screen.getByTestId('ui-button-settings'));
+
+    const colorPickers = screen.getAllByTestId('ui-color-picker');
+
+    fireEvent.change(colorPickers[1], { target: { value: '#123456' } });
+
+    fireEvent.change(colorPickers[0], { target: { value: '#654321' } });
+
+    fireEvent.change(colorPickers[0], { target: { value: '#000001' } });
+
+    fireEvent.click(screen.getByText('editor.common.apply'));
+
+    expect(mockEditor.updateCellAttributes).toHaveBeenCalledWith(
+      expect.objectContaining({
+        backgroundColor: '#123456',
+        borderColor: '#000000'
+      })
+    );
+  });
+
+  it('should handle selection update for cell with no attributes', () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let selectionUpdateHandler: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    mockEditor.on.mockImplementation((name: string, handler: any) => {
+      if (name === 'selectionUpdate') {
+        selectionUpdateHandler = handler;
+      }
+    });
+
+    mockEditor.isActive.mockImplementation(
+      (name: string) => name === 'tableCell'
+    );
+    mockEditor.getAttributes.mockReturnValue({});
+
+    renderComponent();
+
+    act(() => {
+      selectionUpdateHandler();
+    });
+
+    fireEvent.click(screen.getByTestId('ui-button-settings'));
+    expect(screen.getByTestId('ui-input')).toHaveValue('1px');
+  });
+
+  it('should update cell styles when tableHeader is active', () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let selectionUpdateHandler: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    mockEditor.on.mockImplementation((name: string, handler: any) => {
+      if (name === 'selectionUpdate') {
+        selectionUpdateHandler = handler;
+      }
+    });
+
+    mockEditor.isActive.mockImplementation(
+      (name: string) => name === 'tableHeader'
+    );
+    mockEditor.getAttributes.mockReturnValue({
+      borderColor: '#333333'
+    });
+
+    renderComponent();
+
+    act(() => {
+      selectionUpdateHandler();
+    });
+
+    fireEvent.click(screen.getByTestId('ui-button-settings'));
+    expect(screen.getAllByTestId('ui-color-picker')[0]).toHaveValue('#333333');
+  });
+
+  it('should return correct value from shouldShow', () => {
+    renderComponent();
+
+    mockEditor.isActive.mockImplementation((name: string) => name === 'table');
+    expect(capturedShouldShow({ editor: mockEditor })).toBe(true);
+
+    mockEditor.isActive.mockImplementation(
+      (name: string) => name === 'paragraph'
+    );
+    expect(capturedShouldShow({ editor: mockEditor })).toBe(false);
+  });
+});

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

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

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

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

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

@@ -0,0 +1,101 @@
+import '@testing-library/jest-dom';
+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 { TablePopover } from '../table-popover';
+vi.mock('../../../i18n', () => ({
+    i18n: {
+        t: (key) => {
+            const translations = {
+                '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 }) => (React.createElement("button", { "data-testid": icon ? `ui-button-${icon}` : 'ui-button', onClick: onClick, disabled: disabled, className: className, title: tooltip },
+        icon,
+        children))
+}));
+vi.mock('@akinon/ui-popover', () => ({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Popover: ({ children, content, open, onOpenChange }) => {
+        return (React.createElement("div", { "data-testid": "ui-popover" },
+            React.createElement("div", { onClick: () => onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!open) }, children),
+            open && React.createElement("div", { "data-testid": "popover-content" }, content)));
+    }
+}));
+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) => node;
+    })
+}));
+describe('TablePopover', () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let mockEditor;
+    beforeEach(() => {
+        mockEditor = {
+            commands: {
+                focus: vi.fn(),
+                insertTable: vi.fn()
+            }
+        };
+    });
+    const renderComponent = (disabled = false) => {
+        return render(React.createElement(ConfigProvider, null,
+            React.createElement(TablePopover, { editor: mockEditor, disabled: disabled })));
+    };
+    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();
+    });
+});