@akinon/ui-editor 1.0.0

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

@@ -0,0 +1,236 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import Bold from '@tiptap/extension-bold';
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import { Editor, useEditorState } from '@tiptap/react';
+import { ConfigProvider } from 'antd';
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { TOOLBAR_BUTTON_IDS, TOOLBAR_GROUP_IDS } from '../../../constants';
+import { ActionToolbar } from '../action-toolbar';
+import { AlignmentToolbar } from '../alignment-toolbar';
+import { HeadingSelector } from '../heading-selector';
+import { MenuBar } from '../index';
+import { LinkPopover } from '../link-popover';
+import { ListAndBlockToolbar } from '../list-and-block-toolbar';
+import { TextFormattingToolbar } from '../text-formatting-toolbar';
+import { YouTubePopover } from '../youtube-popover';
+vi.mock('@tiptap/react', async () => {
+    const actual = await vi.importActual('@tiptap/react');
+    return Object.assign(Object.assign({}, actual), { useEditorState: vi.fn(({ editor, selector }) => {
+            if (selector) {
+                return selector({ editor, transactionNumber: 0 });
+            }
+            return {};
+        }) });
+});
+vi.mock('../action-toolbar', () => ({
+    ActionToolbar: vi.fn(() => React.createElement("div", { "data-testid": "action-toolbar" }))
+}));
+vi.mock('../alignment-toolbar', () => ({
+    AlignmentToolbar: vi.fn(() => React.createElement("div", { "data-testid": "alignment-toolbar" }))
+}));
+vi.mock('../heading-selector', () => ({
+    HeadingSelector: vi.fn(() => React.createElement("div", { "data-testid": "heading-selector" }))
+}));
+vi.mock('../link-popover', () => ({
+    LinkPopover: vi.fn(() => React.createElement("div", { "data-testid": "link-popover" }))
+}));
+vi.mock('../list-and-block-toolbar', () => ({
+    ListAndBlockToolbar: vi.fn(() => React.createElement("div", { "data-testid": "list-and-block-toolbar" }))
+}));
+vi.mock('../text-formatting-toolbar', () => ({
+    TextFormattingToolbar: vi.fn(() => (React.createElement("div", { "data-testid": "text-formatting-toolbar" })))
+}));
+vi.mock('../youtube-popover', () => ({
+    YouTubePopover: vi.fn(() => React.createElement("div", { "data-testid": "youtube-popover" }))
+}));
+vi.mock('@ant-design/cssinjs', () => ({
+    useStyleRegister: vi.fn((_config, cb) => {
+        cb();
+        return (node) => node;
+    })
+}));
+vi.mock('@akinon/ui-theme', () => ({
+    useToken: () => ({ token: {}, hashId: 'hash-id' }),
+    getSafeCustomTokens: () => ({
+        border: { borderWidthThick: '1px', borderSolid: 'solid' },
+        layout: { displayFlex: 'flex', flexCenter: 'center' }
+    })
+}));
+vi.mock('@akinon/akilocale/react', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('@akinon/ui-button', () => ({
+    Button: vi.fn((_a) => {
+        var { onClick } = _a, props = __rest(_a, ["onClick"]);
+        return (React.createElement("button", Object.assign({ onClick: onClick }, props)));
+    })
+}));
+describe('MenuBar', () => {
+    const createEditor = () => {
+        return new Editor({
+            extensions: [Document, Paragraph, Text, Bold]
+        });
+    };
+    const defaultProps = {
+        isSourceMode: false,
+        toggleSource: vi.fn(),
+        onSave: vi.fn()
+    };
+    beforeEach(() => {
+        vi.clearAllMocks();
+        const mockEditor = {
+            isActive: vi.fn(),
+            can: vi.fn(() => ({
+                chain: vi.fn(() => ({
+                    toggleMark: vi.fn(() => ({ run: vi.fn(() => true) })),
+                    setParagraph: vi.fn(() => ({ run: vi.fn(() => true) })),
+                    toggleHeading: vi.fn(() => ({ run: vi.fn(() => true) })),
+                    unsetAllMarks: vi.fn(() => ({ run: vi.fn(() => true) })),
+                    undo: vi.fn(() => ({ run: vi.fn(() => true) })),
+                    redo: vi.fn(() => ({ run: vi.fn(() => true) }))
+                }))
+            }))
+        };
+        vi.mocked(useEditorState).mockImplementation(({ selector }) => {
+            return selector({
+                editor: mockEditor,
+                transactionNumber: 0
+            });
+        });
+    });
+    it('should render all toolbars by default', () => {
+        const editor = createEditor();
+        render(React.createElement(MenuBar, Object.assign({}, defaultProps, { editor: editor })));
+        expect(screen.getByTestId('heading-selector')).toBeInTheDocument();
+        expect(screen.getByTestId('text-formatting-toolbar')).toBeInTheDocument();
+        expect(screen.getByTestId('list-and-block-toolbar')).toBeInTheDocument();
+        expect(screen.getByTestId('link-popover')).toBeInTheDocument();
+        expect(screen.getByTestId('youtube-popover')).toBeInTheDocument();
+        expect(screen.getByTestId('alignment-toolbar')).toBeInTheDocument();
+        expect(screen.getByTestId('action-toolbar')).toBeInTheDocument();
+        editor.destroy();
+    });
+    it('should apply custom className', () => {
+        const editor = createEditor();
+        const { container } = render(React.createElement(MenuBar, Object.assign({}, defaultProps, { editor: editor, className: "custom-class" })));
+        expect(container.firstChild).toHaveClass('custom-class');
+        editor.destroy();
+    });
+    it('should hide groups based on toolbar config', () => {
+        const editor = createEditor();
+        const toolbar = {
+            hiddenGroups: [
+                TOOLBAR_GROUP_IDS.HEADING,
+                TOOLBAR_GROUP_IDS.FORMATTING,
+                TOOLBAR_GROUP_IDS.LINK
+            ]
+        };
+        render(React.createElement(MenuBar, Object.assign({}, defaultProps, { editor: editor, toolbar: toolbar })));
+        expect(screen.queryByTestId('heading-selector')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('text-formatting-toolbar')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('link-popover')).not.toBeInTheDocument();
+        expect(screen.getByTestId('list-and-block-toolbar')).toBeInTheDocument();
+        expect(screen.getByTestId('youtube-popover')).toBeInTheDocument();
+        expect(screen.getByTestId('alignment-toolbar')).toBeInTheDocument();
+        expect(screen.getByTestId('action-toolbar')).toBeInTheDocument();
+        editor.destroy();
+    });
+    it('should pass hiddenButtons to relevant toolbars', () => {
+        const editor = createEditor();
+        const hiddenButtons = [
+            TOOLBAR_BUTTON_IDS.BOLD,
+            TOOLBAR_BUTTON_IDS.ITALIC
+        ];
+        const toolbar = {
+            hiddenButtons
+        };
+        render(React.createElement(MenuBar, Object.assign({}, defaultProps, { editor: editor, toolbar: toolbar })));
+        expect(TextFormattingToolbar).toHaveBeenCalledWith(expect.objectContaining({ hiddenButtons }), undefined);
+        expect(ListAndBlockToolbar).toHaveBeenCalledWith(expect.objectContaining({ hiddenButtons }), undefined);
+        editor.destroy();
+    });
+    it('should pass disabled prop to toolbars when isSourceMode is true', () => {
+        const editor = createEditor();
+        render(React.createElement(MenuBar, Object.assign({}, defaultProps, { editor: editor, isSourceMode: true })));
+        expect(HeadingSelector).toHaveBeenCalledWith(expect.objectContaining({ disabled: true }), undefined);
+        expect(TextFormattingToolbar).toHaveBeenCalledWith(expect.objectContaining({ disabled: true }), undefined);
+        expect(ListAndBlockToolbar).toHaveBeenCalledWith(expect.objectContaining({ disabled: true }), undefined);
+        expect(LinkPopover).toHaveBeenCalledWith(expect.objectContaining({ disabled: true }), undefined);
+        expect(YouTubePopover).toHaveBeenCalledWith(expect.objectContaining({ disabled: true }), undefined);
+        expect(AlignmentToolbar).toHaveBeenCalledWith(expect.objectContaining({ disabled: true }), undefined);
+        editor.destroy();
+    });
+    it('should pass isSourceMode and toggleSource to ActionToolbar', () => {
+        const editor = createEditor();
+        const toggleSource = vi.fn();
+        render(React.createElement(MenuBar, Object.assign({}, defaultProps, { editor: editor, isSourceMode: true, toggleSource: toggleSource })));
+        expect(ActionToolbar).toHaveBeenCalledWith(expect.objectContaining({
+            isSourceMode: true,
+            toggleSource: toggleSource
+        }), undefined);
+        editor.destroy();
+    });
+    it('should handle falsy values from editor commands', () => {
+        const editor = createEditor();
+        const mockEditor = {
+            isActive: vi.fn(() => null),
+            can: vi.fn(() => ({
+                chain: vi.fn(() => ({
+                    toggleMark: vi.fn(() => ({ run: vi.fn(() => undefined) })),
+                    setParagraph: vi.fn(() => ({ run: vi.fn(() => undefined) })),
+                    toggleHeading: vi.fn(() => ({ run: vi.fn(() => undefined) })),
+                    unsetAllMarks: vi.fn(() => ({ run: vi.fn(() => undefined) })),
+                    undo: vi.fn(() => ({ run: vi.fn(() => undefined) })),
+                    redo: vi.fn(() => ({ run: vi.fn(() => undefined) }))
+                }))
+            }))
+        };
+        vi.mocked(useEditorState).mockImplementationOnce(({ selector }) => {
+            return selector({
+                editor: mockEditor,
+                transactionNumber: 0
+            });
+        });
+        render(React.createElement(MenuBar, Object.assign({}, defaultProps, { editor: editor })));
+        // Just verify it renders without crashing even with falsy states
+        expect(screen.getByTestId('heading-selector')).toBeInTheDocument();
+        editor.destroy();
+    });
+    it('should handle theme without colors', () => {
+        const editor = createEditor();
+        render(React.createElement(ConfigProvider, { theme: {} },
+            React.createElement(MenuBar, Object.assign({}, defaultProps, { editor: editor }))));
+        expect(screen.getByTestId('action-toolbar')).toBeInTheDocument();
+        editor.destroy();
+    });
+    it('should handle theme with colors', () => {
+        const editor = createEditor();
+        const mockTheme = {
+            colors: {
+                ebonyClay: {
+                    '500': '#1a1a1a',
+                    '550': '#2a2a2a'
+                }
+            }
+        };
+        render(React.createElement(ConfigProvider, { theme: mockTheme },
+            React.createElement(MenuBar, Object.assign({}, defaultProps, { editor: editor }))));
+        expect(screen.getByTestId('action-toolbar')).toBeInTheDocument();
+        editor.destroy();
+    });
+});

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

@@ -0,0 +1,325 @@
+import '@testing-library/jest-dom';
+
+import { render, screen } from '@testing-library/react';
+import Bold from '@tiptap/extension-bold';
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import { Editor, useEditorState } from '@tiptap/react';
+import { ConfigProvider, type ThemeConfig } from 'antd';
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { TOOLBAR_BUTTON_IDS, TOOLBAR_GROUP_IDS } from '../../../constants';
+import type { ToolbarButtonId, ToolbarConfig } from '../../../types';
+import { ActionToolbar } from '../action-toolbar';
+import { AlignmentToolbar } from '../alignment-toolbar';
+import { HeadingSelector } from '../heading-selector';
+import { MenuBar } from '../index';
+import { LinkPopover } from '../link-popover';
+import { ListAndBlockToolbar } from '../list-and-block-toolbar';
+import { TextFormattingToolbar } from '../text-formatting-toolbar';
+import { YouTubePopover } from '../youtube-popover';
+
+vi.mock('@tiptap/react', async () => {
+  const actual = await vi.importActual('@tiptap/react');
+  return {
+    ...actual,
+    useEditorState: vi.fn(({ editor, selector }) => {
+      if (selector) {
+        return selector({ editor, transactionNumber: 0 });
+      }
+      return {};
+    })
+  };
+});
+
+vi.mock('../action-toolbar', () => ({
+  ActionToolbar: vi.fn(() => <div data-testid="action-toolbar" />)
+}));
+
+vi.mock('../alignment-toolbar', () => ({
+  AlignmentToolbar: vi.fn(() => <div data-testid="alignment-toolbar" />)
+}));
+
+vi.mock('../heading-selector', () => ({
+  HeadingSelector: vi.fn(() => <div data-testid="heading-selector" />)
+}));
+
+vi.mock('../link-popover', () => ({
+  LinkPopover: vi.fn(() => <div data-testid="link-popover" />)
+}));
+
+vi.mock('../list-and-block-toolbar', () => ({
+  ListAndBlockToolbar: vi.fn(() => <div data-testid="list-and-block-toolbar" />)
+}));
+
+vi.mock('../text-formatting-toolbar', () => ({
+  TextFormattingToolbar: vi.fn(() => (
+    <div data-testid="text-formatting-toolbar" />
+  ))
+}));
+
+vi.mock('../youtube-popover', () => ({
+  YouTubePopover: vi.fn(() => <div data-testid="youtube-popover" />)
+}));
+
+vi.mock('@ant-design/cssinjs', () => ({
+  useStyleRegister: vi.fn((_config, cb) => {
+    cb();
+    return (node: React.ReactNode) => node;
+  })
+}));
+
+vi.mock('@akinon/ui-theme', () => ({
+  useToken: () => ({ token: {}, hashId: 'hash-id' }),
+  getSafeCustomTokens: () => ({
+    border: { borderWidthThick: '1px', borderSolid: 'solid' },
+    layout: { displayFlex: 'flex', flexCenter: 'center' }
+  })
+}));
+
+vi.mock('@akinon/akilocale/react', () => ({
+  useTranslation: () => ({ t: (key: string) => key })
+}));
+
+vi.mock('@akinon/ui-button', () => ({
+  Button: vi.fn(({ onClick, ...props }) => (
+    <button onClick={onClick} {...props} />
+  ))
+}));
+
+describe('MenuBar', () => {
+  const createEditor = () => {
+    return new Editor({
+      extensions: [Document, Paragraph, Text, Bold]
+    });
+  };
+
+  const defaultProps = {
+    isSourceMode: false,
+    toggleSource: vi.fn(),
+    onSave: vi.fn()
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    const mockEditor = {
+      isActive: vi.fn(),
+      can: vi.fn(() => ({
+        chain: vi.fn(() => ({
+          toggleMark: vi.fn(() => ({ run: vi.fn(() => true) })),
+          setParagraph: vi.fn(() => ({ run: vi.fn(() => true) })),
+          toggleHeading: vi.fn(() => ({ run: vi.fn(() => true) })),
+          unsetAllMarks: vi.fn(() => ({ run: vi.fn(() => true) })),
+          undo: vi.fn(() => ({ run: vi.fn(() => true) })),
+          redo: vi.fn(() => ({ run: vi.fn(() => true) }))
+        }))
+      }))
+    };
+
+    vi.mocked(useEditorState).mockImplementation(({ selector }) => {
+      return selector({
+        editor: mockEditor as unknown as Editor,
+        transactionNumber: 0
+      });
+    });
+  });
+
+  it('should render all toolbars by default', () => {
+    const editor = createEditor();
+    render(<MenuBar {...defaultProps} editor={editor} />);
+
+    expect(screen.getByTestId('heading-selector')).toBeInTheDocument();
+    expect(screen.getByTestId('text-formatting-toolbar')).toBeInTheDocument();
+    expect(screen.getByTestId('list-and-block-toolbar')).toBeInTheDocument();
+    expect(screen.getByTestId('link-popover')).toBeInTheDocument();
+    expect(screen.getByTestId('youtube-popover')).toBeInTheDocument();
+    expect(screen.getByTestId('alignment-toolbar')).toBeInTheDocument();
+    expect(screen.getByTestId('action-toolbar')).toBeInTheDocument();
+
+    editor.destroy();
+  });
+
+  it('should apply custom className', () => {
+    const editor = createEditor();
+    const { container } = render(
+      <MenuBar {...defaultProps} editor={editor} className="custom-class" />
+    );
+
+    expect(container.firstChild).toHaveClass('custom-class');
+
+    editor.destroy();
+  });
+
+  it('should hide groups based on toolbar config', () => {
+    const editor = createEditor();
+    const toolbar: ToolbarConfig = {
+      hiddenGroups: [
+        TOOLBAR_GROUP_IDS.HEADING,
+        TOOLBAR_GROUP_IDS.FORMATTING,
+        TOOLBAR_GROUP_IDS.LINK
+      ]
+    };
+
+    render(<MenuBar {...defaultProps} editor={editor} toolbar={toolbar} />);
+
+    expect(screen.queryByTestId('heading-selector')).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId('text-formatting-toolbar')
+    ).not.toBeInTheDocument();
+    expect(screen.queryByTestId('link-popover')).not.toBeInTheDocument();
+
+    expect(screen.getByTestId('list-and-block-toolbar')).toBeInTheDocument();
+    expect(screen.getByTestId('youtube-popover')).toBeInTheDocument();
+    expect(screen.getByTestId('alignment-toolbar')).toBeInTheDocument();
+    expect(screen.getByTestId('action-toolbar')).toBeInTheDocument();
+
+    editor.destroy();
+  });
+
+  it('should pass hiddenButtons to relevant toolbars', () => {
+    const editor = createEditor();
+    const hiddenButtons: ToolbarButtonId[] = [
+      TOOLBAR_BUTTON_IDS.BOLD,
+      TOOLBAR_BUTTON_IDS.ITALIC
+    ];
+    const toolbar: ToolbarConfig = {
+      hiddenButtons
+    };
+
+    render(<MenuBar {...defaultProps} editor={editor} toolbar={toolbar} />);
+
+    expect(TextFormattingToolbar).toHaveBeenCalledWith(
+      expect.objectContaining({ hiddenButtons }),
+      undefined
+    );
+    expect(ListAndBlockToolbar).toHaveBeenCalledWith(
+      expect.objectContaining({ hiddenButtons }),
+      undefined
+    );
+
+    editor.destroy();
+  });
+
+  it('should pass disabled prop to toolbars when isSourceMode is true', () => {
+    const editor = createEditor();
+
+    render(<MenuBar {...defaultProps} editor={editor} isSourceMode={true} />);
+
+    expect(HeadingSelector).toHaveBeenCalledWith(
+      expect.objectContaining({ disabled: true }),
+      undefined
+    );
+    expect(TextFormattingToolbar).toHaveBeenCalledWith(
+      expect.objectContaining({ disabled: true }),
+      undefined
+    );
+    expect(ListAndBlockToolbar).toHaveBeenCalledWith(
+      expect.objectContaining({ disabled: true }),
+      undefined
+    );
+    expect(LinkPopover).toHaveBeenCalledWith(
+      expect.objectContaining({ disabled: true }),
+      undefined
+    );
+    expect(YouTubePopover).toHaveBeenCalledWith(
+      expect.objectContaining({ disabled: true }),
+      undefined
+    );
+    expect(AlignmentToolbar).toHaveBeenCalledWith(
+      expect.objectContaining({ disabled: true }),
+      undefined
+    );
+
+    editor.destroy();
+  });
+
+  it('should pass isSourceMode and toggleSource to ActionToolbar', () => {
+    const editor = createEditor();
+    const toggleSource = vi.fn();
+
+    render(
+      <MenuBar
+        {...defaultProps}
+        editor={editor}
+        isSourceMode={true}
+        toggleSource={toggleSource}
+      />
+    );
+
+    expect(ActionToolbar).toHaveBeenCalledWith(
+      expect.objectContaining({
+        isSourceMode: true,
+        toggleSource: toggleSource
+      }),
+      undefined
+    );
+
+    editor.destroy();
+  });
+
+  it('should handle falsy values from editor commands', () => {
+    const editor = createEditor();
+    const mockEditor = {
+      isActive: vi.fn(() => null),
+      can: vi.fn(() => ({
+        chain: vi.fn(() => ({
+          toggleMark: vi.fn(() => ({ run: vi.fn(() => undefined) })),
+          setParagraph: vi.fn(() => ({ run: vi.fn(() => undefined) })),
+          toggleHeading: vi.fn(() => ({ run: vi.fn(() => undefined) })),
+          unsetAllMarks: vi.fn(() => ({ run: vi.fn(() => undefined) })),
+          undo: vi.fn(() => ({ run: vi.fn(() => undefined) })),
+          redo: vi.fn(() => ({ run: vi.fn(() => undefined) }))
+        }))
+      }))
+    };
+
+    vi.mocked(useEditorState).mockImplementationOnce(({ selector }) => {
+      return selector({
+        editor: mockEditor as unknown as Editor,
+        transactionNumber: 0
+      });
+    });
+
+    render(<MenuBar {...defaultProps} editor={editor} />);
+
+    // Just verify it renders without crashing even with falsy states
+    expect(screen.getByTestId('heading-selector')).toBeInTheDocument();
+
+    editor.destroy();
+  });
+
+  it('should handle theme without colors', () => {
+    const editor = createEditor();
+    render(
+      <ConfigProvider theme={{}}>
+        <MenuBar {...defaultProps} editor={editor} />
+      </ConfigProvider>
+    );
+
+    expect(screen.getByTestId('action-toolbar')).toBeInTheDocument();
+    editor.destroy();
+  });
+
+  it('should handle theme with colors', () => {
+    const editor = createEditor();
+    const mockTheme = {
+      colors: {
+        ebonyClay: {
+          '500': '#1a1a1a',
+          '550': '#2a2a2a'
+        }
+      }
+    };
+    render(
+      <ConfigProvider theme={mockTheme as unknown as ThemeConfig}>
+        <MenuBar {...defaultProps} editor={editor} />
+      </ConfigProvider>
+    );
+
+    expect(screen.getByTestId('action-toolbar')).toBeInTheDocument();
+    editor.destroy();
+  });
+});

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

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

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

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