@akinon/ui-editor 1.0.0

package/dist/esm/tiptap/components/menu-bar/__tests__/list-and-block-toolbar.test.js

@@ -0,0 +1,196 @@
+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 Blockquote from '@tiptap/extension-blockquote';
+import Code from '@tiptap/extension-code';
+import CodeBlock from '@tiptap/extension-code-block';
+import Document from '@tiptap/extension-document';
+import HorizontalRule from '@tiptap/extension-horizontal-rule';
+import { BulletList, ListItem, OrderedList } from '@tiptap/extension-list';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { TOOLBAR_BUTTON_IDS } from '../../../constants';
+import { ListAndBlockToolbar } from '../list-and-block-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('../table-popover', () => ({
+    TablePopover: () => (React.createElement("button", { "data-testid": "table-popover", "aria-label": "Table Popover" }, "Table Popover"))
+}));
+vi.mock('@akinon/akilocale/react', () => ({
+    useTranslation: () => ({
+        t: (key) => {
+            const translations = {
+                'editor.toolbar.bullet_list': 'Bullet List',
+                'editor.toolbar.ordered_list': 'Ordered List',
+                'editor.toolbar.code': 'Code',
+                'editor.toolbar.code_block': 'Code Block',
+                'editor.toolbar.blockquote': 'Blockquote',
+                'editor.toolbar.horizontal_rule': 'Horizontal Rule',
+                'editor.toolbar.insert_image': 'Insert Image'
+            };
+            return translations[key] || key;
+        }
+    })
+}));
+describe('ListAndBlockToolbar', () => {
+    const createEditor = () => {
+        return new Editor({
+            extensions: [
+                Document,
+                Paragraph,
+                Text,
+                BulletList,
+                OrderedList,
+                ListItem,
+                Code,
+                CodeBlock,
+                Blockquote,
+                HorizontalRule
+            ]
+        });
+    };
+    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 toolbar buttons', () => {
+        const editor = createEditor();
+        render(React.createElement(ListAndBlockToolbar, { editor: editor, editorState: createEditorState() }));
+        expect(screen.getByLabelText('Bullet List')).toBeInTheDocument();
+        expect(screen.getByLabelText('Ordered List')).toBeInTheDocument();
+        expect(screen.getByLabelText('Code')).toBeInTheDocument();
+        expect(screen.getByLabelText('Code Block')).toBeInTheDocument();
+        expect(screen.getByLabelText('Blockquote')).toBeInTheDocument();
+        expect(screen.getByLabelText('Horizontal Rule')).toBeInTheDocument();
+        editor.destroy();
+    });
+    it('should have correct icons for all buttons', () => {
+        const editor = createEditor();
+        render(React.createElement(ListAndBlockToolbar, { editor: editor, editorState: createEditorState() }));
+        expect(screen.getByLabelText('Bullet List')).toHaveAttribute('data-icon', 'format-bullet-list');
+        expect(screen.getByLabelText('Ordered List')).toHaveAttribute('data-icon', 'format-number');
+        expect(screen.getByLabelText('Code')).toHaveAttribute('data-icon', 'format-code');
+        expect(screen.getByLabelText('Code Block')).toHaveAttribute('data-icon', 'format-codeblock');
+        expect(screen.getByLabelText('Blockquote')).toHaveAttribute('data-icon', 'format-quote-open');
+        expect(screen.getByLabelText('Horizontal Rule')).toHaveAttribute('data-icon', 'format-line');
+        editor.destroy();
+    });
+    it('should apply active class to bullet list button when active', () => {
+        const editor = createEditor();
+        render(React.createElement(ListAndBlockToolbar, { editor: editor, editorState: createEditorState({ isBulletList: true }) }));
+        expect(screen.getByLabelText('Bullet List')).toHaveClass('active');
+        editor.destroy();
+    });
+    it('should apply active class to ordered list button when active', () => {
+        const editor = createEditor();
+        render(React.createElement(ListAndBlockToolbar, { editor: editor, editorState: createEditorState({ isOrderedList: true }) }));
+        expect(screen.getByLabelText('Ordered List')).toHaveClass('active');
+        editor.destroy();
+    });
+    it('should apply active class to code button when active', () => {
+        const editor = createEditor();
+        render(React.createElement(ListAndBlockToolbar, { editor: editor, editorState: createEditorState({ isCode: true }) }));
+        expect(screen.getByLabelText('Code')).toHaveClass('active');
+        editor.destroy();
+    });
+    it('should apply active class to code block button when active', () => {
+        const editor = createEditor();
+        render(React.createElement(ListAndBlockToolbar, { editor: editor, editorState: createEditorState({ isCodeBlock: true }) }));
+        expect(screen.getByLabelText('Code Block')).toHaveClass('active');
+        editor.destroy();
+    });
+    it('should apply active class to blockquote button when active', () => {
+        const editor = createEditor();
+        render(React.createElement(ListAndBlockToolbar, { editor: editor, editorState: createEditorState({ isBlockquote: true }) }));
+        expect(screen.getByLabelText('Blockquote')).toHaveClass('active');
+        editor.destroy();
+    });
+    it('should disable all buttons when disabled prop is true', () => {
+        const editor = createEditor();
+        render(React.createElement(ListAndBlockToolbar, { editor: editor, editorState: createEditorState(), disabled: true }));
+        expect(screen.getByLabelText('Bullet List')).toBeDisabled();
+        expect(screen.getByLabelText('Ordered List')).toBeDisabled();
+        expect(screen.getByLabelText('Code')).toBeDisabled();
+        expect(screen.getByLabelText('Code Block')).toBeDisabled();
+        expect(screen.getByLabelText('Blockquote')).toBeDisabled();
+        expect(screen.getByLabelText('Horizontal Rule')).toBeDisabled();
+        editor.destroy();
+    });
+    it('should call toggleBulletList when bullet list button is clicked', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(ListAndBlockToolbar, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Bullet List');
+        await user.click(button);
+        expect(editor.isActive('bulletList')).toBe(true);
+        editor.destroy();
+    });
+    it('should call toggleOrderedList when ordered list button is clicked', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(ListAndBlockToolbar, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Ordered List');
+        await user.click(button);
+        expect(editor.isActive('orderedList')).toBe(true);
+        editor.destroy();
+    });
+    it('should call toggleCode when code 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(ListAndBlockToolbar, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Code');
+        await user.click(button);
+        expect(editor.isActive('code')).toBe(true);
+        editor.destroy();
+    });
+    it('should call toggleCodeBlock when code block button is clicked', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(ListAndBlockToolbar, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Code Block');
+        await user.click(button);
+        expect(editor.isActive('codeBlock')).toBe(true);
+        editor.destroy();
+    });
+    it('should call toggleBlockquote when blockquote button is clicked', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(ListAndBlockToolbar, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Blockquote');
+        await user.click(button);
+        expect(editor.isActive('blockquote')).toBe(true);
+        editor.destroy();
+    });
+    it('should call setHorizontalRule when horizontal rule button is clicked', async () => {
+        const editor = createEditor();
+        const user = userEvent.setup();
+        render(React.createElement(ListAndBlockToolbar, { editor: editor, editorState: createEditorState() }));
+        const button = screen.getByLabelText('Horizontal Rule');
+        await user.click(button);
+        const html = editor.getHTML();
+        expect(html).toContain('hr');
+        editor.destroy();
+    });
+    it('should hide bullet list button when in hiddenButtons', () => {
+        const editor = createEditor();
+        render(React.createElement(ListAndBlockToolbar, { editor: editor, editorState: createEditorState(), hiddenButtons: [TOOLBAR_BUTTON_IDS.BULLET_LIST] }));
+        expect(screen.queryByLabelText('Bullet List')).not.toBeInTheDocument();
+        expect(screen.getByLabelText('Ordered List')).toBeInTheDocument();
+        editor.destroy();
+    });
+    it('should hide multiple buttons when in hiddenButtons', () => {
+        const editor = createEditor();
+        render(React.createElement(ListAndBlockToolbar, { editor: editor, editorState: createEditorState(), hiddenButtons: [
+                TOOLBAR_BUTTON_IDS.BULLET_LIST,
+                TOOLBAR_BUTTON_IDS.CODE
+            ] }));
+        expect(screen.queryByLabelText('Bullet List')).not.toBeInTheDocument();
+        expect(screen.queryByLabelText('Code')).not.toBeInTheDocument();
+        expect(screen.getByLabelText('Ordered List')).toBeInTheDocument();
+        expect(screen.getByLabelText('Code Block')).toBeInTheDocument();
+        editor.destroy();
+    });
+});

package/dist/esm/tiptap/components/menu-bar/__tests__/list-and-block-toolbar.test.tsx

@@ -0,0 +1,414 @@
+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 Blockquote from '@tiptap/extension-blockquote';
+import Code from '@tiptap/extension-code';
+import CodeBlock from '@tiptap/extension-code-block';
+import Document from '@tiptap/extension-document';
+import HorizontalRule from '@tiptap/extension-horizontal-rule';
+import { BulletList, ListItem, OrderedList } from '@tiptap/extension-list';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { TOOLBAR_BUTTON_IDS } from '../../../constants';
+import type { EditorState } from '../../../types';
+import { ListAndBlockToolbar } from '../list-and-block-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('../table-popover', () => ({
+  TablePopover: () => (
+    <button data-testid="table-popover" aria-label="Table Popover">
+      Table Popover
+    </button>
+  )
+}));
+
+vi.mock('@akinon/akilocale/react', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'editor.toolbar.bullet_list': 'Bullet List',
+        'editor.toolbar.ordered_list': 'Ordered List',
+        'editor.toolbar.code': 'Code',
+        'editor.toolbar.code_block': 'Code Block',
+        'editor.toolbar.blockquote': 'Blockquote',
+        'editor.toolbar.horizontal_rule': 'Horizontal Rule',
+        'editor.toolbar.insert_image': 'Insert Image'
+      };
+      return translations[key] || key;
+    }
+  })
+}));
+
+describe('ListAndBlockToolbar', () => {
+  const createEditor = () => {
+    return new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        BulletList,
+        OrderedList,
+        ListItem,
+        Code,
+        CodeBlock,
+        Blockquote,
+        HorizontalRule
+      ]
+    });
+  };
+
+  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 toolbar buttons', () => {
+    const editor = createEditor();
+
+    render(
+      <ListAndBlockToolbar editor={editor} editorState={createEditorState()} />
+    );
+
+    expect(screen.getByLabelText('Bullet List')).toBeInTheDocument();
+    expect(screen.getByLabelText('Ordered List')).toBeInTheDocument();
+    expect(screen.getByLabelText('Code')).toBeInTheDocument();
+    expect(screen.getByLabelText('Code Block')).toBeInTheDocument();
+    expect(screen.getByLabelText('Blockquote')).toBeInTheDocument();
+    expect(screen.getByLabelText('Horizontal Rule')).toBeInTheDocument();
+
+    editor.destroy();
+  });
+
+  it('should have correct icons for all buttons', () => {
+    const editor = createEditor();
+
+    render(
+      <ListAndBlockToolbar editor={editor} editorState={createEditorState()} />
+    );
+
+    expect(screen.getByLabelText('Bullet List')).toHaveAttribute(
+      'data-icon',
+      'format-bullet-list'
+    );
+    expect(screen.getByLabelText('Ordered List')).toHaveAttribute(
+      'data-icon',
+      'format-number'
+    );
+    expect(screen.getByLabelText('Code')).toHaveAttribute(
+      'data-icon',
+      'format-code'
+    );
+    expect(screen.getByLabelText('Code Block')).toHaveAttribute(
+      'data-icon',
+      'format-codeblock'
+    );
+    expect(screen.getByLabelText('Blockquote')).toHaveAttribute(
+      'data-icon',
+      'format-quote-open'
+    );
+    expect(screen.getByLabelText('Horizontal Rule')).toHaveAttribute(
+      'data-icon',
+      'format-line'
+    );
+
+    editor.destroy();
+  });
+
+  it('should apply active class to bullet list button when active', () => {
+    const editor = createEditor();
+
+    render(
+      <ListAndBlockToolbar
+        editor={editor}
+        editorState={createEditorState({ isBulletList: true })}
+      />
+    );
+
+    expect(screen.getByLabelText('Bullet List')).toHaveClass('active');
+
+    editor.destroy();
+  });
+
+  it('should apply active class to ordered list button when active', () => {
+    const editor = createEditor();
+
+    render(
+      <ListAndBlockToolbar
+        editor={editor}
+        editorState={createEditorState({ isOrderedList: true })}
+      />
+    );
+
+    expect(screen.getByLabelText('Ordered List')).toHaveClass('active');
+
+    editor.destroy();
+  });
+
+  it('should apply active class to code button when active', () => {
+    const editor = createEditor();
+
+    render(
+      <ListAndBlockToolbar
+        editor={editor}
+        editorState={createEditorState({ isCode: true })}
+      />
+    );
+
+    expect(screen.getByLabelText('Code')).toHaveClass('active');
+
+    editor.destroy();
+  });
+
+  it('should apply active class to code block button when active', () => {
+    const editor = createEditor();
+
+    render(
+      <ListAndBlockToolbar
+        editor={editor}
+        editorState={createEditorState({ isCodeBlock: true })}
+      />
+    );
+
+    expect(screen.getByLabelText('Code Block')).toHaveClass('active');
+
+    editor.destroy();
+  });
+
+  it('should apply active class to blockquote button when active', () => {
+    const editor = createEditor();
+
+    render(
+      <ListAndBlockToolbar
+        editor={editor}
+        editorState={createEditorState({ isBlockquote: true })}
+      />
+    );
+
+    expect(screen.getByLabelText('Blockquote')).toHaveClass('active');
+
+    editor.destroy();
+  });
+
+  it('should disable all buttons when disabled prop is true', () => {
+    const editor = createEditor();
+
+    render(
+      <ListAndBlockToolbar
+        editor={editor}
+        editorState={createEditorState()}
+        disabled={true}
+      />
+    );
+
+    expect(screen.getByLabelText('Bullet List')).toBeDisabled();
+    expect(screen.getByLabelText('Ordered List')).toBeDisabled();
+    expect(screen.getByLabelText('Code')).toBeDisabled();
+    expect(screen.getByLabelText('Code Block')).toBeDisabled();
+    expect(screen.getByLabelText('Blockquote')).toBeDisabled();
+    expect(screen.getByLabelText('Horizontal Rule')).toBeDisabled();
+
+    editor.destroy();
+  });
+
+  it('should call toggleBulletList when bullet list button is clicked', async () => {
+    const editor = createEditor();
+    const user = userEvent.setup();
+
+    render(
+      <ListAndBlockToolbar editor={editor} editorState={createEditorState()} />
+    );
+
+    const button = screen.getByLabelText('Bullet List');
+    await user.click(button);
+
+    expect(editor.isActive('bulletList')).toBe(true);
+
+    editor.destroy();
+  });
+
+  it('should call toggleOrderedList when ordered list button is clicked', async () => {
+    const editor = createEditor();
+    const user = userEvent.setup();
+
+    render(
+      <ListAndBlockToolbar editor={editor} editorState={createEditorState()} />
+    );
+
+    const button = screen.getByLabelText('Ordered List');
+    await user.click(button);
+
+    expect(editor.isActive('orderedList')).toBe(true);
+
+    editor.destroy();
+  });
+
+  it('should call toggleCode when code 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(
+      <ListAndBlockToolbar editor={editor} editorState={createEditorState()} />
+    );
+
+    const button = screen.getByLabelText('Code');
+    await user.click(button);
+
+    expect(editor.isActive('code')).toBe(true);
+
+    editor.destroy();
+  });
+
+  it('should call toggleCodeBlock when code block button is clicked', async () => {
+    const editor = createEditor();
+    const user = userEvent.setup();
+
+    render(
+      <ListAndBlockToolbar editor={editor} editorState={createEditorState()} />
+    );
+
+    const button = screen.getByLabelText('Code Block');
+    await user.click(button);
+
+    expect(editor.isActive('codeBlock')).toBe(true);
+
+    editor.destroy();
+  });
+
+  it('should call toggleBlockquote when blockquote button is clicked', async () => {
+    const editor = createEditor();
+    const user = userEvent.setup();
+
+    render(
+      <ListAndBlockToolbar editor={editor} editorState={createEditorState()} />
+    );
+
+    const button = screen.getByLabelText('Blockquote');
+    await user.click(button);
+
+    expect(editor.isActive('blockquote')).toBe(true);
+
+    editor.destroy();
+  });
+
+  it('should call setHorizontalRule when horizontal rule button is clicked', async () => {
+    const editor = createEditor();
+    const user = userEvent.setup();
+
+    render(
+      <ListAndBlockToolbar editor={editor} editorState={createEditorState()} />
+    );
+
+    const button = screen.getByLabelText('Horizontal Rule');
+    await user.click(button);
+
+    const html = editor.getHTML();
+    expect(html).toContain('hr');
+
+    editor.destroy();
+  });
+
+  it('should hide bullet list button when in hiddenButtons', () => {
+    const editor = createEditor();
+
+    render(
+      <ListAndBlockToolbar
+        editor={editor}
+        editorState={createEditorState()}
+        hiddenButtons={[TOOLBAR_BUTTON_IDS.BULLET_LIST]}
+      />
+    );
+
+    expect(screen.queryByLabelText('Bullet List')).not.toBeInTheDocument();
+    expect(screen.getByLabelText('Ordered List')).toBeInTheDocument();
+
+    editor.destroy();
+  });
+
+  it('should hide multiple buttons when in hiddenButtons', () => {
+    const editor = createEditor();
+
+    render(
+      <ListAndBlockToolbar
+        editor={editor}
+        editorState={createEditorState()}
+        hiddenButtons={[
+          TOOLBAR_BUTTON_IDS.BULLET_LIST,
+          TOOLBAR_BUTTON_IDS.CODE
+        ]}
+      />
+    );
+
+    expect(screen.queryByLabelText('Bullet List')).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('Code')).not.toBeInTheDocument();
+    expect(screen.getByLabelText('Ordered List')).toBeInTheDocument();
+    expect(screen.getByLabelText('Code Block')).toBeInTheDocument();
+
+    editor.destroy();
+  });
+});

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

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

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

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

package/dist/esm/tiptap/components/menu-bar/__tests__/media-toolbar.test.js

@@ -0,0 +1,74 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { 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 { MediaToolbar } from '../media-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, "data-testid": `media-button-${icon}` }, tooltip))
+}));
+vi.mock('@akinon/akilocale/react', () => ({
+    useTranslation: () => ({
+        t: (key) => {
+            const translations = {
+                'editor.toolbar.insert_image': 'Insert Image'
+            };
+            return translations[key] || key;
+        }
+    })
+}));
+vi.mock('../youtube-popover', () => ({
+    YouTubePopover: ({ disabled }) => (React.createElement("div", { "data-testid": "youtube-popover", "data-disabled": disabled }))
+}));
+describe('MediaToolbar', () => {
+    let editor;
+    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));
+    beforeEach(() => {
+        editor = new Editor({
+            extensions: [Document, Paragraph, Text]
+        });
+    });
+    it('should render image button', () => {
+        render(React.createElement(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(React.createElement(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
+        }));
+        render(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(MediaToolbar, { editor: editor, editorState: createEditorState(), disabled: true }));
+        expect(screen.getByTestId('media-button-add_picture')).toBeDisabled();
+        expect(screen.getByTestId('youtube-popover')).toHaveAttribute('data-disabled', 'true');
+    });
+});