@akinon/ui-editor 1.0.0

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

@@ -0,0 +1,575 @@
+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 type { EditorState } from '../../../types';
+import { TextFormattingToolbar } from '../text-formatting-toolbar';
+
+vi.mock('@akinon/ui-button', () => ({
+  Button: ({
+    children,
+    onClick,
+    disabled,
+    tooltip,
+    icon,
+    className
+  }: {
+    children?: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    tooltip?: string;
+    icon?: string;
+    className?: string;
+  }) => (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={tooltip}
+      data-icon={icon}
+      className={className}
+    >
+      {children}
+    </button>
+  )
+}));
+
+vi.mock('@akinon/ui-color-picker', () => ({
+  ColorPicker: ({
+    children,
+    onChange
+  }: {
+    children: React.ReactNode;
+    onChange?: (color: { toHexString: () => string }) => void;
+  }) => (
+    <div
+      data-testid="color-picker"
+      onClick={() => {
+        if (onChange) {
+          onChange({ toHexString: () => '#ff0000' });
+        }
+      }}
+    >
+      {children}
+    </div>
+  )
+}));
+
+vi.mock('@akinon/akilocale/react', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key
+  })
+}));
+
+vi.mock('../../../../i18n', () => ({
+  i18n: {
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        '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: 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: true,
+    canItalic: true,
+    canUnderline: true,
+    canStrike: true,
+    canCode: true,
+    canClearMarks: true,
+    ...overrides
+  });
+
+  it('should render all formatting buttons', () => {
+    const editor = createEditor();
+
+    render(
+      <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(
+      <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(
+      <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(
+      <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(
+      <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(
+      <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(
+      <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(
+      <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(
+      <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(
+      <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(
+      <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(
+      <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(
+      <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(
+      <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(
+      <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(
+      <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(
+      <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(
+      <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(
+      <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(
+      <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(
+      <TextFormattingToolbar
+        editor={editor}
+        editorState={createEditorState()}
+      />
+    );
+
+    const colorPickers = screen.getAllByTestId('color-picker');
+    const textColorButton = colorPickers[0].querySelector('button');
+
+    expect(textColorButton).toHaveClass('active');
+
+    editor.destroy();
+  });
+});

package/dist/cjs/tiptap/components/menu-bar/__tests__/youtube-popover.test.d.ts

@@ -0,0 +1,3 @@
+import '@tiptap/extension-youtube';
+import '@testing-library/jest-dom';
+//# sourceMappingURL=youtube-popover.test.d.ts.map

package/dist/cjs/tiptap/components/menu-bar/__tests__/youtube-popover.test.d.ts.map

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