@akinon/ui-editor 1.0.0

package/dist/esm/tiptap/components/menu-bar/__tests__/heading-selector.test.tsx

@@ -0,0 +1,569 @@
+import '@tiptap/extension-heading';
+import '@tiptap/extension-paragraph';
+import '@testing-library/jest-dom';
+
+import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { Editor } from '@tiptap/core';
+import Document from '@tiptap/extension-document';
+import Heading from '@tiptap/extension-heading';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { EditorState } from '../../../types';
+import { HeadingSelector } from '../heading-selector';
+
+let mockOnOpenChange: ((open: boolean) => void) | null = null;
+
+vi.mock('@akinon/ui-dropdown', () => ({
+  Dropdown: ({
+    children,
+    menu,
+    onOpenChange
+  }: {
+    children: React.ReactNode;
+    menu: { items: Array<{ key: string; label: string; onClick: () => void }> };
+    onOpenChange: (open: boolean) => void;
+  }) => {
+    mockOnOpenChange = onOpenChange;
+
+    return (
+      <div>
+        {children}
+        <select
+          data-testid="heading-dropdown"
+          onChange={e => {
+            const item = menu.items.find(i => i.key === e.target.value);
+            if (item) {
+              item.onClick();
+            }
+          }}
+          onFocus={() => onOpenChange(true)}
+          onBlur={() => onOpenChange(false)}
+        >
+          {menu.items.map(item => (
+            <option key={item.key} value={item.key}>
+              {item.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  }
+}));
+
+vi.mock('@akinon/ui-button', () => ({
+  Button: ({
+    children,
+    disabled,
+    tooltip,
+    icon,
+    className
+  }: {
+    children: React.ReactNode;
+    disabled: boolean;
+    tooltip: string;
+    icon: string;
+    className?: string;
+  }) => (
+    <button
+      disabled={disabled}
+      aria-label={tooltip}
+      data-icon={icon}
+      className={className}
+    >
+      {children}
+    </button>
+  )
+}));
+
+vi.mock('../../../../i18n', () => ({
+  i18n: {
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'editor.heading.paragraph': 'Paragraph',
+        'editor.heading.h1': 'Heading 1',
+        'editor.heading.h2': 'Heading 2',
+        'editor.heading.h3': 'Heading 3',
+        'editor.heading.h4': 'Heading 4',
+        'editor.heading.tooltip': 'Text Style'
+      };
+      return translations[key] || key;
+    }
+  }
+}));
+
+describe('HeadingSelector', () => {
+  beforeEach(() => {
+    mockOnOpenChange = null;
+  });
+  const createEditor = () => {
+    return new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Heading.configure({
+          levels: [1, 2, 3, 4]
+        })
+      ]
+    });
+  };
+
+  const createEditorState = (
+    overrides: Partial<EditorState> = {}
+  ): EditorState => ({
+    isBold: false,
+    isItalic: false,
+    isUnderline: false,
+    isStrike: false,
+    isCode: false,
+    isHighlight: false,
+    isParagraph: false,
+    isHeading1: false,
+    isHeading2: false,
+    isHeading3: false,
+    isHeading4: false,
+    isCodeBlock: false,
+    isBlockquote: false,
+    isBulletList: false,
+    isOrderedList: false,
+    isTaskList: false,
+    isLink: false,
+    isTable: false,
+    isLeftAlign: false,
+    isCenterAlign: false,
+    isRightAlign: false,
+    isJustifyAlign: false,
+    canUndo: false,
+    canRedo: false,
+    canBold: false,
+    canItalic: false,
+    canUnderline: false,
+    canStrike: false,
+    canCode: false,
+    canClearMarks: false,
+    ...overrides
+  });
+
+  it('should render heading selector button', () => {
+    const editor = createEditor();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState()}
+        baseCls="test"
+        hashId="test-hash"
+      />
+    );
+
+    expect(screen.getByLabelText('Text Style')).toBeInTheDocument();
+
+    editor.destroy();
+  });
+
+  it('should display "Paragraph" when isParagraph is true', () => {
+    const editor = createEditor();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState({ isParagraph: true })}
+        baseCls="test"
+        hashId="test-hash"
+      />
+    );
+
+    const button = screen.getByRole('button', { name: 'Text Style' });
+    expect(button).toHaveTextContent('Paragraph');
+
+    editor.destroy();
+  });
+
+  it('should display "Heading 1" when isHeading1 is true', () => {
+    const editor = createEditor();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState({ isHeading1: true })}
+        baseCls="test"
+        hashId="test-hash"
+      />
+    );
+
+    const button = screen.getByRole('button', { name: 'Text Style' });
+    expect(button).toHaveTextContent('Heading 1');
+
+    editor.destroy();
+  });
+
+  it('should display "Heading 2" when isHeading2 is true', () => {
+    const editor = createEditor();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState({ isHeading2: true })}
+        baseCls="test"
+        hashId="test-hash"
+      />
+    );
+
+    const button = screen.getByRole('button', { name: 'Text Style' });
+    expect(button).toHaveTextContent('Heading 2');
+
+    editor.destroy();
+  });
+
+  it('should display "Heading 3" when isHeading3 is true', () => {
+    const editor = createEditor();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState({ isHeading3: true })}
+        baseCls="test"
+        hashId="test-hash"
+      />
+    );
+
+    const button = screen.getByRole('button', { name: 'Text Style' });
+    expect(button).toHaveTextContent('Heading 3');
+
+    editor.destroy();
+  });
+
+  it('should display "Heading 4" when isHeading4 is true', () => {
+    const editor = createEditor();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState({ isHeading4: true })}
+        baseCls="test"
+        hashId="test-hash"
+      />
+    );
+
+    const button = screen.getByRole('button', { name: 'Text Style' });
+    expect(button).toHaveTextContent('Heading 4');
+
+    editor.destroy();
+  });
+
+  it('should display "Paragraph" by default when no heading is active', () => {
+    const editor = createEditor();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState()}
+        baseCls="test"
+        hashId="test-hash"
+      />
+    );
+
+    const button = screen.getByRole('button', { name: 'Text Style' });
+    expect(button).toHaveTextContent('Paragraph');
+
+    editor.destroy();
+  });
+
+  it('should disable button when disabled prop is true', () => {
+    const editor = createEditor();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState()}
+        baseCls="test"
+        hashId="test-hash"
+        disabled={true}
+      />
+    );
+
+    expect(screen.getByLabelText('Text Style')).toBeDisabled();
+
+    editor.destroy();
+  });
+
+  it('should enable button when disabled prop is false', () => {
+    const editor = createEditor();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState()}
+        baseCls="test"
+        hashId="test-hash"
+        disabled={false}
+      />
+    );
+
+    expect(screen.getByLabelText('Text Style')).not.toBeDisabled();
+
+    editor.destroy();
+  });
+
+  it('should call setParagraph when paragraph option is selected', async () => {
+    const editor = createEditor();
+    editor.commands.setContent('<h1>Test heading</h1>');
+    const user = userEvent.setup();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState({ isHeading1: true })}
+        baseCls="test"
+        hashId="test-hash"
+      />
+    );
+
+    const dropdown = screen.getByTestId('heading-dropdown');
+    await user.selectOptions(dropdown, 'paragraph');
+
+    expect(editor.isActive('paragraph')).toBe(true);
+    expect(editor.isActive('heading')).toBe(false);
+
+    editor.destroy();
+  });
+
+  it('should call toggleHeading with level 1 when h1 option is selected', async () => {
+    const editor = createEditor();
+    editor.commands.setContent('<p>Test paragraph</p>');
+    const user = userEvent.setup();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState({ isParagraph: true })}
+        baseCls="test"
+        hashId="test-hash"
+      />
+    );
+
+    const dropdown = screen.getByTestId('heading-dropdown');
+    await user.selectOptions(dropdown, 'h1');
+
+    expect(editor.isActive('heading', { level: 1 })).toBe(true);
+
+    editor.destroy();
+  });
+
+  it('should call toggleHeading with level 2 when h2 option is selected', async () => {
+    const editor = createEditor();
+    editor.commands.setContent('<p>Test paragraph</p>');
+    const user = userEvent.setup();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState({ isParagraph: true })}
+        baseCls="test"
+        hashId="test-hash"
+      />
+    );
+
+    const dropdown = screen.getByTestId('heading-dropdown');
+    await user.selectOptions(dropdown, 'h2');
+
+    expect(editor.isActive('heading', { level: 2 })).toBe(true);
+
+    editor.destroy();
+  });
+
+  it('should call toggleHeading with level 3 when h3 option is selected', async () => {
+    const editor = createEditor();
+    editor.commands.setContent('<p>Test paragraph</p>');
+    const user = userEvent.setup();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState({ isParagraph: true })}
+        baseCls="test"
+        hashId="test-hash"
+      />
+    );
+
+    const dropdown = screen.getByTestId('heading-dropdown');
+    await user.selectOptions(dropdown, 'h3');
+
+    expect(editor.isActive('heading', { level: 3 })).toBe(true);
+
+    editor.destroy();
+  });
+
+  it('should call toggleHeading with level 4 when h4 option is selected', async () => {
+    const editor = createEditor();
+    editor.commands.setContent('<p>Test paragraph</p>');
+    const user = userEvent.setup();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState({ isParagraph: true })}
+        baseCls="test"
+        hashId="test-hash"
+      />
+    );
+
+    const dropdown = screen.getByTestId('heading-dropdown');
+    await user.selectOptions(dropdown, 'h4');
+
+    expect(editor.isActive('heading', { level: 4 })).toBe(true);
+
+    editor.destroy();
+  });
+
+  it('should hide h1 option when h1 is in hiddenButtons', () => {
+    const editor = createEditor();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState()}
+        baseCls="test"
+        hashId="test-hash"
+        hiddenButtons={['h1']}
+      />
+    );
+
+    const dropdown = screen.getByTestId('heading-dropdown');
+    const options = Array.from(dropdown.querySelectorAll('option'));
+    const h1Option = options.find(opt => opt.value === 'h1');
+
+    expect(h1Option).toBeUndefined();
+
+    editor.destroy();
+  });
+
+  it('should hide multiple headings when they are in hiddenButtons', () => {
+    const editor = createEditor();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState()}
+        baseCls="test"
+        hashId="test-hash"
+        hiddenButtons={['h1', 'h2', 'h3']}
+      />
+    );
+
+    const dropdown = screen.getByTestId('heading-dropdown');
+    const options = Array.from(dropdown.querySelectorAll('option'));
+
+    expect(options.find(opt => opt.value === 'h1')).toBeUndefined();
+    expect(options.find(opt => opt.value === 'h2')).toBeUndefined();
+    expect(options.find(opt => opt.value === 'h3')).toBeUndefined();
+    expect(options.find(opt => opt.value === 'h4')).toBeDefined();
+    expect(options.find(opt => opt.value === 'paragraph')).toBeDefined();
+
+    editor.destroy();
+  });
+
+  it('should show default label when active heading is hidden', () => {
+    const editor = createEditor();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState({ isHeading1: true })}
+        baseCls="test"
+        hashId="test-hash"
+        hiddenButtons={['h1']}
+      />
+    );
+
+    const button = screen.getByRole('button', { name: 'Text Style' });
+    expect(button).toHaveTextContent('Paragraph');
+
+    editor.destroy();
+  });
+
+  it('should render all heading options in dropdown when no buttons are hidden', () => {
+    const editor = createEditor();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState()}
+        baseCls="test"
+        hashId="test-hash"
+      />
+    );
+
+    const dropdown = screen.getByTestId('heading-dropdown');
+    const options = Array.from(dropdown.querySelectorAll('option'));
+
+    expect(options).toHaveLength(5);
+    expect(options.find(opt => opt.value === 'paragraph')).toBeDefined();
+    expect(options.find(opt => opt.value === 'h1')).toBeDefined();
+    expect(options.find(opt => opt.value === 'h2')).toBeDefined();
+    expect(options.find(opt => opt.value === 'h3')).toBeDefined();
+    expect(options.find(opt => opt.value === 'h4')).toBeDefined();
+
+    editor.destroy();
+  });
+
+  it('should show chevron_up icon when dropdown is open', async () => {
+    const editor = createEditor();
+    const user = userEvent.setup();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState()}
+        baseCls="test"
+        hashId="test-hash"
+      />
+    );
+
+    const button = screen.getByRole('button', { name: 'Text Style' });
+    const dropdown = screen.getByTestId('heading-dropdown');
+
+    expect(button).toHaveAttribute('data-icon', 'chevron_down');
+
+    await user.click(dropdown);
+
+    if (mockOnOpenChange) {
+      mockOnOpenChange(true);
+    }
+
+    const updatedButton = screen.getByRole('button', { name: 'Text Style' });
+    expect(updatedButton).toHaveAttribute('data-icon', 'chevron_up');
+
+    editor.destroy();
+  });
+
+  it('should show chevron_down icon when dropdown is closed', async () => {
+    const editor = createEditor();
+
+    render(
+      <HeadingSelector
+        editor={editor}
+        editorState={createEditorState()}
+        baseCls="test"
+        hashId="test-hash"
+      />
+    );
+
+    const button = screen.getByRole('button', { name: 'Text Style' });
+
+    expect(button).toHaveAttribute('data-icon', 'chevron_down');
+
+    if (mockOnOpenChange) {
+      mockOnOpenChange(true);
+      mockOnOpenChange(false);
+    }
+
+    expect(button).toHaveAttribute('data-icon', 'chevron_down');
+
+    editor.destroy();
+  });
+});

package/dist/esm/tiptap/components/menu-bar/__tests__/index.test.d.ts

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

package/dist/esm/tiptap/components/menu-bar/__tests__/index.test.d.ts.map

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