@akinon/ui-editor 1.0.0

package/dist/cjs/tiptap/components/menu-bar/__tests__/alignment-toolbar.test.js

@@ -0,0 +1,201 @@
+import '@tiptap/extension-text-align';
+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 Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import TextAlign from '@tiptap/extension-text-align';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { AlignmentToolbar } from '../alignment-toolbar';
+vi.mock('@akinon/ui-button', () => ({
+    Button: ({ onClick, disabled, tooltip, icon, className }) => (React.createElement("button", { onClick: onClick, disabled: disabled, "aria-label": tooltip, "data-icon": icon, className: className }, tooltip))
+}));
+vi.mock('@akinon/akilocale/react', () => ({
+    useTranslation: () => ({
+        t: (key) => {
+            const translations = {
+                'editor.toolbar.align_left': 'Align Left',
+                'editor.toolbar.align_center': 'Align Center',
+                'editor.toolbar.align_right': 'Align Right',
+                'editor.toolbar.justify': 'Justify'
+            };
+            return translations[key] || key;
+        }
+    })
+}));
+describe('AlignmentToolbar', () => {
+    const createEditor = () => {
+        return new Editor({
+            extensions: [
+                Document,
+                Paragraph,
+                Text,
+                TextAlign.configure({
+                    types: ['heading', 'paragraph']
+                })
+            ]
+        });
+    };
+    const createEditorState = (overrides = {}) => (Object.assign({ 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 all four alignment buttons', () => {
+        const editor = createEditor();
+        render(React.createElement(AlignmentToolbar, { editor: editor, editorState: createEditorState() }));
+        expect(screen.getByLabelText('Align Left')).toBeInTheDocument();
+        expect(screen.getByLabelText('Align Center')).toBeInTheDocument();
+        expect(screen.getByLabelText('Align Right')).toBeInTheDocument();
+        expect(screen.getByLabelText('Justify')).toBeInTheDocument();
+        editor.destroy();
+    });
+    it('should apply active class to left align button when isLeftAlign is true', () => {
+        const editor = createEditor();
+        render(React.createElement(AlignmentToolbar, { editor: editor, editorState: createEditorState({ isLeftAlign: true }) }));
+        const leftButton = screen.getByLabelText('Align Left');
+        expect(leftButton).toHaveClass('active');
+        editor.destroy();
+    });
+    it('should apply active class to center align button when isCenterAlign is true', () => {
+        const editor = createEditor();
+        render(React.createElement(AlignmentToolbar, { editor: editor, editorState: createEditorState({ isCenterAlign: true }) }));
+        const centerButton = screen.getByLabelText('Align Center');
+        expect(centerButton).toHaveClass('active');
+        editor.destroy();
+    });
+    it('should apply active class to right align button when isRightAlign is true', () => {
+        const editor = createEditor();
+        render(React.createElement(AlignmentToolbar, { editor: editor, editorState: createEditorState({ isRightAlign: true }) }));
+        const rightButton = screen.getByLabelText('Align Right');
+        expect(rightButton).toHaveClass('active');
+        editor.destroy();
+    });
+    it('should apply active class to justify button when isJustifyAlign is true', () => {
+        const editor = createEditor();
+        render(React.createElement(AlignmentToolbar, { editor: editor, editorState: createEditorState({ isJustifyAlign: true }) }));
+        const justifyButton = screen.getByLabelText('Justify');
+        expect(justifyButton).toHaveClass('active');
+        editor.destroy();
+    });
+    it('should not apply active class when no alignment is active', () => {
+        const editor = createEditor();
+        render(React.createElement(AlignmentToolbar, { editor: editor, editorState: createEditorState() }));
+        const leftButton = screen.getByLabelText('Align Left');
+        const centerButton = screen.getByLabelText('Align Center');
+        const rightButton = screen.getByLabelText('Align Right');
+        const justifyButton = screen.getByLabelText('Justify');
+        expect(leftButton).not.toHaveClass('active');
+        expect(centerButton).not.toHaveClass('active');
+        expect(rightButton).not.toHaveClass('active');
+        expect(justifyButton).not.toHaveClass('active');
+        editor.destroy();
+    });
+    it('should disable all buttons when disabled prop is true', () => {
+        const editor = createEditor();
+        render(React.createElement(AlignmentToolbar, { editor: editor, editorState: createEditorState(), disabled: true }));
+        expect(screen.getByLabelText('Align Left')).toBeDisabled();
+        expect(screen.getByLabelText('Align Center')).toBeDisabled();
+        expect(screen.getByLabelText('Align Right')).toBeDisabled();
+        expect(screen.getByLabelText('Justify')).toBeDisabled();
+        editor.destroy();
+    });
+    it('should enable all buttons when disabled prop is false', () => {
+        const editor = createEditor();
+        render(React.createElement(AlignmentToolbar, { editor: editor, editorState: createEditorState(), disabled: false }));
+        expect(screen.getByLabelText('Align Left')).not.toBeDisabled();
+        expect(screen.getByLabelText('Align Center')).not.toBeDisabled();
+        expect(screen.getByLabelText('Align Right')).not.toBeDisabled();
+        expect(screen.getByLabelText('Justify')).not.toBeDisabled();
+        editor.destroy();
+    });
+    it('should enable all buttons when disabled prop is not provided', () => {
+        const editor = createEditor();
+        render(React.createElement(AlignmentToolbar, { editor: editor, editorState: createEditorState() }));
+        expect(screen.getByLabelText('Align Left')).not.toBeDisabled();
+        expect(screen.getByLabelText('Align Center')).not.toBeDisabled();
+        expect(screen.getByLabelText('Align Right')).not.toBeDisabled();
+        expect(screen.getByLabelText('Justify')).not.toBeDisabled();
+        editor.destroy();
+    });
+    it('should call setTextAlign with left when left align button is clicked', async () => {
+        const editor = createEditor();
+        editor.commands.setContent('<p>Test content</p>');
+        const user = userEvent.setup();
+        render(React.createElement(AlignmentToolbar, { editor: editor, editorState: createEditorState() }));
+        const leftButton = screen.getByLabelText('Align Left');
+        await user.click(leftButton);
+        expect(editor.isActive({ textAlign: 'left' })).toBe(true);
+        editor.destroy();
+    });
+    it('should call setTextAlign with center when center align button is clicked', async () => {
+        const editor = createEditor();
+        editor.commands.setContent('<p>Test content</p>');
+        const user = userEvent.setup();
+        render(React.createElement(AlignmentToolbar, { editor: editor, editorState: createEditorState() }));
+        const centerButton = screen.getByLabelText('Align Center');
+        await user.click(centerButton);
+        expect(editor.isActive({ textAlign: 'center' })).toBe(true);
+        editor.destroy();
+    });
+    it('should call setTextAlign with right when right align button is clicked', async () => {
+        const editor = createEditor();
+        editor.commands.setContent('<p>Test content</p>');
+        const user = userEvent.setup();
+        render(React.createElement(AlignmentToolbar, { editor: editor, editorState: createEditorState() }));
+        const rightButton = screen.getByLabelText('Align Right');
+        await user.click(rightButton);
+        expect(editor.isActive({ textAlign: 'right' })).toBe(true);
+        editor.destroy();
+    });
+    it('should call setTextAlign with justify when justify button is clicked', async () => {
+        const editor = createEditor();
+        editor.commands.setContent('<p>Test content</p>');
+        const user = userEvent.setup();
+        render(React.createElement(AlignmentToolbar, { editor: editor, editorState: createEditorState() }));
+        const justifyButton = screen.getByLabelText('Justify');
+        await user.click(justifyButton);
+        expect(editor.isActive({ textAlign: 'justify' })).toBe(true);
+        editor.destroy();
+    });
+    it('should render with correct icons for each alignment button', () => {
+        const editor = createEditor();
+        render(React.createElement(AlignmentToolbar, { editor: editor, editorState: createEditorState() }));
+        expect(screen.getByLabelText('Align Left')).toHaveAttribute('data-icon', 'format-left-align');
+        expect(screen.getByLabelText('Align Center')).toHaveAttribute('data-icon', 'format-center-align');
+        expect(screen.getByLabelText('Align Right')).toHaveAttribute('data-icon', 'format-right-align');
+        expect(screen.getByLabelText('Justify')).toHaveAttribute('data-icon', 'format-justification');
+        editor.destroy();
+    });
+    it('should render with correct tooltips for each alignment button', () => {
+        const editor = createEditor();
+        render(React.createElement(AlignmentToolbar, { editor: editor, editorState: createEditorState() }));
+        expect(screen.getByLabelText('Align Left')).toBeInTheDocument();
+        expect(screen.getByLabelText('Align Center')).toBeInTheDocument();
+        expect(screen.getByLabelText('Align Right')).toBeInTheDocument();
+        expect(screen.getByLabelText('Justify')).toBeInTheDocument();
+        editor.destroy();
+    });
+    it('should handle multiple alignment states correctly', () => {
+        const editor = createEditor();
+        render(React.createElement(AlignmentToolbar, { editor: editor, editorState: createEditorState({ isCenterAlign: true }) }));
+        const centerButton = screen.getByLabelText('Align Center');
+        expect(centerButton).toHaveClass('active');
+        const leftButton = screen.getByLabelText('Align Left');
+        expect(leftButton).not.toHaveClass('active');
+        editor.destroy();
+    });
+    it('should work with different editor states', () => {
+        const editor = createEditor();
+        render(React.createElement(AlignmentToolbar, { editor: editor, editorState: createEditorState({
+                isLeftAlign: false,
+                isCenterAlign: false,
+                isRightAlign: false,
+                isJustifyAlign: false
+            }) }));
+        expect(screen.getByLabelText('Align Left')).toBeInTheDocument();
+        expect(screen.getByLabelText('Align Center')).toBeInTheDocument();
+        expect(screen.getByLabelText('Align Right')).toBeInTheDocument();
+        expect(screen.getByLabelText('Justify')).toBeInTheDocument();
+        editor.destroy();
+    });
+});

package/dist/cjs/tiptap/components/menu-bar/__tests__/alignment-toolbar.test.tsx

@@ -0,0 +1,411 @@
+import '@tiptap/extension-text-align';
+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 Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import TextAlign from '@tiptap/extension-text-align';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import type { EditorState } from '../../../types';
+import { AlignmentToolbar } from '../alignment-toolbar';
+
+vi.mock('@akinon/ui-button', () => ({
+  Button: ({
+    onClick,
+    disabled,
+    tooltip,
+    icon,
+    className
+  }: {
+    onClick: () => void;
+    disabled: boolean;
+    tooltip: string;
+    icon: string;
+    className?: string;
+  }) => (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={tooltip}
+      data-icon={icon}
+      className={className}
+    >
+      {tooltip}
+    </button>
+  )
+}));
+
+vi.mock('@akinon/akilocale/react', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'editor.toolbar.align_left': 'Align Left',
+        'editor.toolbar.align_center': 'Align Center',
+        'editor.toolbar.align_right': 'Align Right',
+        'editor.toolbar.justify': 'Justify'
+      };
+      return translations[key] || key;
+    }
+  })
+}));
+
+describe('AlignmentToolbar', () => {
+  const createEditor = () => {
+    return new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        TextAlign.configure({
+          types: ['heading', 'paragraph']
+        })
+      ]
+    });
+  };
+
+  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 all four alignment buttons', () => {
+    const editor = createEditor();
+
+    render(
+      <AlignmentToolbar editor={editor} editorState={createEditorState()} />
+    );
+
+    expect(screen.getByLabelText('Align Left')).toBeInTheDocument();
+    expect(screen.getByLabelText('Align Center')).toBeInTheDocument();
+    expect(screen.getByLabelText('Align Right')).toBeInTheDocument();
+    expect(screen.getByLabelText('Justify')).toBeInTheDocument();
+
+    editor.destroy();
+  });
+
+  it('should apply active class to left align button when isLeftAlign is true', () => {
+    const editor = createEditor();
+
+    render(
+      <AlignmentToolbar
+        editor={editor}
+        editorState={createEditorState({ isLeftAlign: true })}
+      />
+    );
+
+    const leftButton = screen.getByLabelText('Align Left');
+    expect(leftButton).toHaveClass('active');
+
+    editor.destroy();
+  });
+
+  it('should apply active class to center align button when isCenterAlign is true', () => {
+    const editor = createEditor();
+
+    render(
+      <AlignmentToolbar
+        editor={editor}
+        editorState={createEditorState({ isCenterAlign: true })}
+      />
+    );
+
+    const centerButton = screen.getByLabelText('Align Center');
+    expect(centerButton).toHaveClass('active');
+
+    editor.destroy();
+  });
+
+  it('should apply active class to right align button when isRightAlign is true', () => {
+    const editor = createEditor();
+
+    render(
+      <AlignmentToolbar
+        editor={editor}
+        editorState={createEditorState({ isRightAlign: true })}
+      />
+    );
+
+    const rightButton = screen.getByLabelText('Align Right');
+    expect(rightButton).toHaveClass('active');
+
+    editor.destroy();
+  });
+
+  it('should apply active class to justify button when isJustifyAlign is true', () => {
+    const editor = createEditor();
+
+    render(
+      <AlignmentToolbar
+        editor={editor}
+        editorState={createEditorState({ isJustifyAlign: true })}
+      />
+    );
+
+    const justifyButton = screen.getByLabelText('Justify');
+    expect(justifyButton).toHaveClass('active');
+
+    editor.destroy();
+  });
+
+  it('should not apply active class when no alignment is active', () => {
+    const editor = createEditor();
+
+    render(
+      <AlignmentToolbar editor={editor} editorState={createEditorState()} />
+    );
+
+    const leftButton = screen.getByLabelText('Align Left');
+    const centerButton = screen.getByLabelText('Align Center');
+    const rightButton = screen.getByLabelText('Align Right');
+    const justifyButton = screen.getByLabelText('Justify');
+
+    expect(leftButton).not.toHaveClass('active');
+    expect(centerButton).not.toHaveClass('active');
+    expect(rightButton).not.toHaveClass('active');
+    expect(justifyButton).not.toHaveClass('active');
+
+    editor.destroy();
+  });
+
+  it('should disable all buttons when disabled prop is true', () => {
+    const editor = createEditor();
+
+    render(
+      <AlignmentToolbar
+        editor={editor}
+        editorState={createEditorState()}
+        disabled={true}
+      />
+    );
+
+    expect(screen.getByLabelText('Align Left')).toBeDisabled();
+    expect(screen.getByLabelText('Align Center')).toBeDisabled();
+    expect(screen.getByLabelText('Align Right')).toBeDisabled();
+    expect(screen.getByLabelText('Justify')).toBeDisabled();
+
+    editor.destroy();
+  });
+
+  it('should enable all buttons when disabled prop is false', () => {
+    const editor = createEditor();
+
+    render(
+      <AlignmentToolbar
+        editor={editor}
+        editorState={createEditorState()}
+        disabled={false}
+      />
+    );
+
+    expect(screen.getByLabelText('Align Left')).not.toBeDisabled();
+    expect(screen.getByLabelText('Align Center')).not.toBeDisabled();
+    expect(screen.getByLabelText('Align Right')).not.toBeDisabled();
+    expect(screen.getByLabelText('Justify')).not.toBeDisabled();
+
+    editor.destroy();
+  });
+
+  it('should enable all buttons when disabled prop is not provided', () => {
+    const editor = createEditor();
+
+    render(
+      <AlignmentToolbar editor={editor} editorState={createEditorState()} />
+    );
+
+    expect(screen.getByLabelText('Align Left')).not.toBeDisabled();
+    expect(screen.getByLabelText('Align Center')).not.toBeDisabled();
+    expect(screen.getByLabelText('Align Right')).not.toBeDisabled();
+    expect(screen.getByLabelText('Justify')).not.toBeDisabled();
+
+    editor.destroy();
+  });
+
+  it('should call setTextAlign with left when left align button is clicked', async () => {
+    const editor = createEditor();
+    editor.commands.setContent('<p>Test content</p>');
+    const user = userEvent.setup();
+
+    render(
+      <AlignmentToolbar editor={editor} editorState={createEditorState()} />
+    );
+
+    const leftButton = screen.getByLabelText('Align Left');
+    await user.click(leftButton);
+
+    expect(editor.isActive({ textAlign: 'left' })).toBe(true);
+
+    editor.destroy();
+  });
+
+  it('should call setTextAlign with center when center align button is clicked', async () => {
+    const editor = createEditor();
+    editor.commands.setContent('<p>Test content</p>');
+    const user = userEvent.setup();
+
+    render(
+      <AlignmentToolbar editor={editor} editorState={createEditorState()} />
+    );
+
+    const centerButton = screen.getByLabelText('Align Center');
+
+    await user.click(centerButton);
+
+    expect(editor.isActive({ textAlign: 'center' })).toBe(true);
+
+    editor.destroy();
+  });
+
+  it('should call setTextAlign with right when right align button is clicked', async () => {
+    const editor = createEditor();
+    editor.commands.setContent('<p>Test content</p>');
+    const user = userEvent.setup();
+
+    render(
+      <AlignmentToolbar editor={editor} editorState={createEditorState()} />
+    );
+
+    const rightButton = screen.getByLabelText('Align Right');
+    await user.click(rightButton);
+
+    expect(editor.isActive({ textAlign: 'right' })).toBe(true);
+
+    editor.destroy();
+  });
+
+  it('should call setTextAlign with justify when justify button is clicked', async () => {
+    const editor = createEditor();
+    editor.commands.setContent('<p>Test content</p>');
+    const user = userEvent.setup();
+
+    render(
+      <AlignmentToolbar editor={editor} editorState={createEditorState()} />
+    );
+
+    const justifyButton = screen.getByLabelText('Justify');
+    await user.click(justifyButton);
+
+    expect(editor.isActive({ textAlign: 'justify' })).toBe(true);
+
+    editor.destroy();
+  });
+
+  it('should render with correct icons for each alignment button', () => {
+    const editor = createEditor();
+
+    render(
+      <AlignmentToolbar editor={editor} editorState={createEditorState()} />
+    );
+
+    expect(screen.getByLabelText('Align Left')).toHaveAttribute(
+      'data-icon',
+      'format-left-align'
+    );
+    expect(screen.getByLabelText('Align Center')).toHaveAttribute(
+      'data-icon',
+      'format-center-align'
+    );
+    expect(screen.getByLabelText('Align Right')).toHaveAttribute(
+      'data-icon',
+      'format-right-align'
+    );
+    expect(screen.getByLabelText('Justify')).toHaveAttribute(
+      'data-icon',
+      'format-justification'
+    );
+
+    editor.destroy();
+  });
+
+  it('should render with correct tooltips for each alignment button', () => {
+    const editor = createEditor();
+
+    render(
+      <AlignmentToolbar editor={editor} editorState={createEditorState()} />
+    );
+
+    expect(screen.getByLabelText('Align Left')).toBeInTheDocument();
+    expect(screen.getByLabelText('Align Center')).toBeInTheDocument();
+    expect(screen.getByLabelText('Align Right')).toBeInTheDocument();
+    expect(screen.getByLabelText('Justify')).toBeInTheDocument();
+
+    editor.destroy();
+  });
+
+  it('should handle multiple alignment states correctly', () => {
+    const editor = createEditor();
+
+    render(
+      <AlignmentToolbar
+        editor={editor}
+        editorState={createEditorState({ isCenterAlign: true })}
+      />
+    );
+
+    const centerButton = screen.getByLabelText('Align Center');
+    expect(centerButton).toHaveClass('active');
+
+    const leftButton = screen.getByLabelText('Align Left');
+    expect(leftButton).not.toHaveClass('active');
+
+    editor.destroy();
+  });
+
+  it('should work with different editor states', () => {
+    const editor = createEditor();
+
+    render(
+      <AlignmentToolbar
+        editor={editor}
+        editorState={createEditorState({
+          isLeftAlign: false,
+          isCenterAlign: false,
+          isRightAlign: false,
+          isJustifyAlign: false
+        })}
+      />
+    );
+
+    expect(screen.getByLabelText('Align Left')).toBeInTheDocument();
+    expect(screen.getByLabelText('Align Center')).toBeInTheDocument();
+    expect(screen.getByLabelText('Align Right')).toBeInTheDocument();
+    expect(screen.getByLabelText('Justify')).toBeInTheDocument();
+
+    editor.destroy();
+  });
+});

package/dist/cjs/tiptap/components/menu-bar/__tests__/heading-selector.test.d.ts

@@ -0,0 +1,4 @@
+import '@tiptap/extension-heading';
+import '@tiptap/extension-paragraph';
+import '@testing-library/jest-dom';
+//# sourceMappingURL=heading-selector.test.d.ts.map

package/dist/cjs/tiptap/components/menu-bar/__tests__/heading-selector.test.d.ts.map

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