@akinon/ui-editor 1.0.0

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

@@ -0,0 +1,206 @@
+import '@testing-library/jest-dom';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ChainedCommands, Editor } from '@tiptap/core';
+import Document from '@tiptap/extension-document';
+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 { TOOLBAR_BUTTON_IDS } from '../../../constants';
+import type { EditorState } from '../../../types';
+import { MediaToolbar } from '../media-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}
+      data-testid={`media-button-${icon}`}
+    >
+      {tooltip}
+    </button>
+  )
+}));
+
+vi.mock('@akinon/akilocale/react', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'editor.toolbar.insert_image': 'Insert Image'
+      };
+      return translations[key] || key;
+    }
+  })
+}));
+
+vi.mock('../youtube-popover', () => ({
+  YouTubePopover: ({ disabled }: { disabled: boolean }) => (
+    <div data-testid="youtube-popover" data-disabled={disabled} />
+  )
+}));
+
+describe('MediaToolbar', () => {
+  let editor: Editor;
+
+  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
+  });
+
+  beforeEach(() => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text]
+    });
+  });
+
+  it('should render image button', () => {
+    render(
+      <MediaToolbar
+        editor={editor}
+        editorState={createEditorState()}
+        disabled={false}
+      />
+    );
+
+    expect(screen.getByTestId('media-button-add_picture')).toBeInTheDocument();
+    expect(screen.getByLabelText('Insert Image')).toBeInTheDocument();
+  });
+
+  it('should render youtube popover', () => {
+    render(
+      <MediaToolbar
+        editor={editor}
+        editorState={createEditorState()}
+        disabled={false}
+      />
+    );
+
+    expect(screen.getByTestId('youtube-popover')).toBeInTheDocument();
+  });
+
+  it('should handle image button click', () => {
+    const runSpy = vi.fn();
+    const insertContentSpy = vi.fn(() => ({ run: runSpy }));
+    const focusSpy = vi.fn(() => ({ insertContent: insertContentSpy }));
+    const chainSpy = vi.fn(() => ({ focus: focusSpy }));
+
+    vi.spyOn(editor, 'chain').mockImplementation(
+      () =>
+        ({
+          focus: focusSpy
+        }) as unknown as ChainedCommands
+    );
+
+    render(
+      <MediaToolbar
+        editor={editor}
+        editorState={createEditorState()}
+        disabled={false}
+      />
+    );
+
+    const imageButton = screen.getByTestId('media-button-add_picture');
+    fireEvent.click(imageButton);
+
+    expect(chainSpy).not.toHaveBeenCalled();
+
+    expect(editor.chain).toHaveBeenCalled();
+    expect(focusSpy).toHaveBeenCalled();
+    expect(insertContentSpy).toHaveBeenCalledWith(
+      '<div data-type="image-upload"></div>'
+    );
+    expect(runSpy).toHaveBeenCalled();
+  });
+
+  it('should hide image button if hiddenButtons includes IMAGE', () => {
+    render(
+      <MediaToolbar
+        editor={editor}
+        editorState={createEditorState()}
+        disabled={false}
+        hiddenButtons={[TOOLBAR_BUTTON_IDS.IMAGE]}
+      />
+    );
+
+    expect(
+      screen.queryByTestId('media-button-add_picture')
+    ).not.toBeInTheDocument();
+  });
+
+  it('should hide youtube popover if hiddenButtons includes YOUTUBE', () => {
+    render(
+      <MediaToolbar
+        editor={editor}
+        editorState={createEditorState()}
+        disabled={false}
+        hiddenButtons={[TOOLBAR_BUTTON_IDS.YOUTUBE]}
+      />
+    );
+
+    expect(screen.queryByTestId('youtube-popover')).not.toBeInTheDocument();
+  });
+
+  it('should pass disabled prop to components', () => {
+    render(
+      <MediaToolbar
+        editor={editor}
+        editorState={createEditorState()}
+        disabled={true}
+      />
+    );
+
+    expect(screen.getByTestId('media-button-add_picture')).toBeDisabled();
+    expect(screen.getByTestId('youtube-popover')).toHaveAttribute(
+      'data-disabled',
+      'true'
+    );
+  });
+});

package/dist/cjs/tiptap/components/menu-bar/__tests__/text-formatting-toolbar.test.d.ts

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

package/dist/cjs/tiptap/components/menu-bar/__tests__/text-formatting-toolbar.test.d.ts.map

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

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

@@ -0,0 +1,265 @@
+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 Bold from '@tiptap/extension-bold';
+import { Color } from '@tiptap/extension-color';
+import Document from '@tiptap/extension-document';
+import Highlight from '@tiptap/extension-highlight';
+import Italic from '@tiptap/extension-italic';
+import Paragraph from '@tiptap/extension-paragraph';
+import Strike from '@tiptap/extension-strike';
+import Text from '@tiptap/extension-text';
+import { TextStyle } from '@tiptap/extension-text-style';
+import Underline from '@tiptap/extension-underline';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { TOOLBAR_BUTTON_IDS } from '../../../constants';
+import { TextFormattingToolbar } from '../text-formatting-toolbar';
+vi.mock('@akinon/ui-button', () => ({
+    Button: ({ children, onClick, disabled, tooltip, icon, className }) => (React.createElement("button", { onClick: onClick, disabled: disabled, "aria-label": tooltip, "data-icon": icon, className: className }, children))
+}));
+vi.mock('@akinon/ui-color-picker', () => ({
+    ColorPicker: ({ children, onChange }) => (React.createElement("div", { "data-testid": "color-picker", onClick: () => {
+            if (onChange) {
+                onChange({ toHexString: () => '#ff0000' });
+            }
+        } }, children))
+}));
+vi.mock('@akinon/akilocale/react', () => ({
+    useTranslation: () => ({
+        t: (key) => key
+    })
+}));
+vi.mock('../../../../i18n', () => ({
+    i18n: {
+        t: (key) => {
+            const translations = {
+                'editor.toolbar.bold': 'Bold',
+                'editor.toolbar.italic': 'Italic',
+                'editor.toolbar.strike': 'Strikethrough',
+                'editor.toolbar.underline': 'Underline',
+                'editor.toolbar.clear_formatting': 'Clear Formatting',
+                'editor.toolbar.text_color': 'Text Color',
+                'editor.toolbar.highlight_color': 'Highlight Color',
+                'editor.color_picker.recommended': 'Recommended'
+            };
+            return translations[key] || key;
+        }
+    }
+}));
+describe('TextFormattingToolbar', () => {
+    const createEditor = () => {
+        return new Editor({
+            extensions: [
+                Document,
+                Paragraph,
+                Text,
+                Bold,
+                Italic,
+                Strike,
+                Underline,
+                TextStyle,
+                Color,
+                Highlight
+            ]
+        });
+    };
+    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: true, canItalic: true, canUnderline: true, canStrike: true, canCode: true, canClearMarks: true }, overrides));
+    it('should render all formatting buttons', () => {
+        const editor = createEditor();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState() }));
+        expect(screen.getByLabelText('Bold')).toBeInTheDocument();
+        expect(screen.getByLabelText('Italic')).toBeInTheDocument();
+        expect(screen.getByLabelText('Strikethrough')).toBeInTheDocument();
+        expect(screen.getByLabelText('Underline')).toBeInTheDocument();
+        expect(screen.getByLabelText('Clear Formatting')).toBeInTheDocument();
+        expect(screen.getByLabelText('Text Color')).toBeInTheDocument();
+        expect(screen.getByLabelText('Highlight Color')).toBeInTheDocument();
+        editor.destroy();
+    });
+    it('should have correct icons for all buttons', () => {
+        const editor = createEditor();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState() }));
+        expect(screen.getByLabelText('Bold')).toHaveAttribute('data-icon', 'format-bold');
+        expect(screen.getByLabelText('Italic')).toHaveAttribute('data-icon', 'format-italic');
+        expect(screen.getByLabelText('Strikethrough')).toHaveAttribute('data-icon', 'format-strikethrough');
+        expect(screen.getByLabelText('Underline')).toHaveAttribute('data-icon', 'format-underline');
+        expect(screen.getByLabelText('Clear Formatting')).toHaveAttribute('data-icon', 'format-eraser');
+        expect(screen.getByLabelText('Text Color')).toHaveAttribute('data-icon', 'format-paint-bucket');
+        expect(screen.getByLabelText('Highlight Color')).toHaveAttribute('data-icon', 'format-highlighter');
+        editor.destroy();
+    });
+    it('should apply active class to bold button when active', () => {
+        const editor = createEditor();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState({ isBold: true }) }));
+        expect(screen.getByLabelText('Bold')).toHaveClass('active');
+        editor.destroy();
+    });
+    it('should apply active class to italic button when active', () => {
+        const editor = createEditor();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState({ isItalic: true }) }));
+        expect(screen.getByLabelText('Italic')).toHaveClass('active');
+        editor.destroy();
+    });
+    it('should apply active class to strike button when active', () => {
+        const editor = createEditor();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState({ isStrike: true }) }));
+        expect(screen.getByLabelText('Strikethrough')).toHaveClass('active');
+        editor.destroy();
+    });
+    it('should apply active class to underline button when active', () => {
+        const editor = createEditor();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState({ isUnderline: true }) }));
+        expect(screen.getByLabelText('Underline')).toHaveClass('active');
+        editor.destroy();
+    });
+    it('should apply active class to highlight button when active', () => {
+        const editor = createEditor();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState({ isHighlight: true }) }));
+        expect(screen.getByLabelText('Highlight Color')).toHaveClass('active');
+        editor.destroy();
+    });
+    it('should disable all buttons when disabled prop is true', () => {
+        const editor = createEditor();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState(), disabled: true }));
+        expect(screen.getByLabelText('Bold')).toBeDisabled();
+        expect(screen.getByLabelText('Italic')).toBeDisabled();
+        expect(screen.getByLabelText('Strikethrough')).toBeDisabled();
+        expect(screen.getByLabelText('Underline')).toBeDisabled();
+        expect(screen.getByLabelText('Clear Formatting')).toBeDisabled();
+        expect(screen.getByLabelText('Text Color')).toBeDisabled();
+        expect(screen.getByLabelText('Highlight Color')).toBeDisabled();
+        editor.destroy();
+    });
+    it('should disable bold button when canBold is false', () => {
+        const editor = createEditor();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState({ canBold: false }) }));
+        expect(screen.getByLabelText('Bold')).toBeDisabled();
+        expect(screen.getByLabelText('Italic')).not.toBeDisabled();
+        editor.destroy();
+    });
+    it('should disable italic button when canItalic is false', () => {
+        const editor = createEditor();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState({ canItalic: false }) }));
+        expect(screen.getByLabelText('Italic')).toBeDisabled();
+        expect(screen.getByLabelText('Bold')).not.toBeDisabled();
+        editor.destroy();
+    });
+    it('should call toggleBold when bold button is clicked', async () => {
+        const editor = createEditor();
+        editor.commands.setContent('<p>Test text</p>');
+        editor.commands.setTextSelection({ from: 1, to: 10 });
+        const user = userEvent.setup();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Bold');
+        await user.click(button);
+        expect(editor.isActive('bold')).toBe(true);
+        editor.destroy();
+    });
+    it('should call toggleItalic when italic button is clicked', async () => {
+        const editor = createEditor();
+        editor.commands.setContent('<p>Test text</p>');
+        editor.commands.setTextSelection({ from: 1, to: 10 });
+        const user = userEvent.setup();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Italic');
+        await user.click(button);
+        expect(editor.isActive('italic')).toBe(true);
+        editor.destroy();
+    });
+    it('should call toggleStrike when strikethrough button is clicked', async () => {
+        const editor = createEditor();
+        editor.commands.setContent('<p>Test text</p>');
+        editor.commands.setTextSelection({ from: 1, to: 10 });
+        const user = userEvent.setup();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Strikethrough');
+        await user.click(button);
+        expect(editor.isActive('strike')).toBe(true);
+        editor.destroy();
+    });
+    it('should call toggleUnderline when underline button is clicked', async () => {
+        const editor = createEditor();
+        editor.commands.setContent('<p>Test text</p>');
+        editor.commands.setTextSelection({ from: 1, to: 10 });
+        const user = userEvent.setup();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Underline');
+        await user.click(button);
+        expect(editor.isActive('underline')).toBe(true);
+        editor.destroy();
+    });
+    it('should call unsetAllMarks when clear formatting button is clicked', async () => {
+        const editor = createEditor();
+        editor.commands.setContent('<p><strong><em>Test text</em></strong></p>');
+        editor.commands.setTextSelection({ from: 1, to: 10 });
+        const user = userEvent.setup();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Clear Formatting');
+        await user.click(button);
+        expect(editor.isActive('bold')).toBe(false);
+        expect(editor.isActive('italic')).toBe(false);
+        editor.destroy();
+    });
+    it('should hide bold button when in hiddenButtons', () => {
+        const editor = createEditor();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState(), hiddenButtons: [TOOLBAR_BUTTON_IDS.BOLD] }));
+        expect(screen.queryByLabelText('Bold')).not.toBeInTheDocument();
+        expect(screen.getByLabelText('Italic')).toBeInTheDocument();
+        editor.destroy();
+    });
+    it('should hide multiple buttons when in hiddenButtons', () => {
+        const editor = createEditor();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState(), hiddenButtons: [
+                TOOLBAR_BUTTON_IDS.BOLD,
+                TOOLBAR_BUTTON_IDS.ITALIC,
+                TOOLBAR_BUTTON_IDS.UNDERLINE
+            ] }));
+        expect(screen.queryByLabelText('Bold')).not.toBeInTheDocument();
+        expect(screen.queryByLabelText('Italic')).not.toBeInTheDocument();
+        expect(screen.queryByLabelText('Underline')).not.toBeInTheDocument();
+        expect(screen.getByLabelText('Strikethrough')).toBeInTheDocument();
+        expect(screen.getByLabelText('Clear Formatting')).toBeInTheDocument();
+        editor.destroy();
+    });
+    it('should render color picker components', () => {
+        const editor = createEditor();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState() }));
+        const colorPickers = screen.getAllByTestId('color-picker');
+        expect(colorPickers).toHaveLength(2);
+        editor.destroy();
+    });
+    it('should call setColor when text color picker onChange is triggered', async () => {
+        const editor = createEditor();
+        editor.commands.setContent('<p>Test text</p>');
+        editor.commands.setTextSelection({ from: 1, to: 10 });
+        const user = userEvent.setup();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState() }));
+        const colorPickers = screen.getAllByTestId('color-picker');
+        await user.click(colorPickers[0]);
+        const attrs = editor.getAttributes('textStyle');
+        expect(attrs).toBeDefined();
+        editor.destroy();
+    });
+    it('should call toggleHighlight when highlight color picker onChange is triggered', async () => {
+        const editor = createEditor();
+        editor.commands.setContent('<p>Test text</p>');
+        editor.commands.setTextSelection({ from: 1, to: 10 });
+        const user = userEvent.setup();
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState() }));
+        const colorPickers = screen.getAllByTestId('color-picker');
+        await user.click(colorPickers[1]);
+        expect(editor.isActive('highlight')).toBe(true);
+        editor.destroy();
+    });
+    it('should apply active class to text color button when color is set', () => {
+        const editor = createEditor();
+        editor.commands.setContent('<p><span style="color: #ff0000">Test text</span></p>');
+        render(React.createElement(TextFormattingToolbar, { editor: editor, editorState: createEditorState() }));
+        const colorPickers = screen.getAllByTestId('color-picker');
+        const textColorButton = colorPickers[0].querySelector('button');
+        expect(textColorButton).toHaveClass('active');
+        editor.destroy();
+    });
+});