@akinon/ui-editor 1.0.0

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

@@ -0,0 +1,648 @@
+import '@tiptap/extension-link';
+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 Link from '@tiptap/extension-link';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import type { EditorState } from '../../../types';
+import { LinkPopover } from '../link-popover';
+
+vi.mock('@akinon/ui-popover', () => ({
+  Popover: ({
+    children,
+    content,
+    open,
+    onOpenChange
+  }: {
+    children: React.ReactNode;
+    content: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+
+    React.useEffect(() => {
+      if (open !== undefined) {
+        setIsOpen(open);
+      }
+    }, [open]);
+
+    const handleClick = () => {
+      setIsOpen(!isOpen);
+      if (onOpenChange) {
+        onOpenChange(!isOpen);
+      }
+    };
+
+    return (
+      <div>
+        <div onClick={handleClick}>{children}</div>
+        {(open !== undefined ? open : isOpen) && (
+          <div data-testid="popover-content">{content}</div>
+        )}
+      </div>
+    );
+  }
+}));
+
+vi.mock('@akinon/ui-button', () => ({
+  Button: ({
+    children,
+    onClick,
+    disabled,
+    tooltip,
+    icon,
+    className,
+    type,
+    danger
+  }: {
+    children?: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    tooltip?: string;
+    icon?: string;
+    className?: string;
+    type?: string;
+    danger?: boolean;
+  }) => (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={tooltip}
+      data-icon={icon}
+      className={className}
+      data-type={type}
+      data-danger={danger}
+    >
+      {children}
+    </button>
+  )
+}));
+
+vi.mock('@akinon/ui-input', () => ({
+  Input: ({
+    value,
+    onChange,
+    placeholder,
+    onKeyDown
+  }: {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder: string;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  }) => (
+    <input
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      onKeyDown={onKeyDown}
+    />
+  )
+}));
+
+vi.mock('@akinon/ui-theme', () => ({
+  useToken: () => ({
+    token: {},
+    hashId: 'test-hash'
+  }),
+  getSafeCustomTokens: () => ({
+    layout: {
+      displayFlex: 'flex',
+      flexCenter: 'center'
+    }
+  })
+}));
+
+vi.mock('@ant-design/cssinjs', () => ({
+  useStyleRegister: (_config: unknown, callback: () => unknown) => {
+    callback();
+    return (component: React.ReactNode) => component;
+  }
+}));
+
+vi.mock('antd', () => ({
+  ConfigProvider: {
+    ConfigContext: React.createContext({
+      getPrefixCls: (name: string) => `ant-${name}`,
+      theme: {}
+    })
+  }
+}));
+
+vi.mock('../../../../i18n', () => ({
+  i18n: {
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'editor.link.text_placeholder': 'Link Text',
+        'editor.link.url_placeholder': 'URL',
+        'editor.link.tooltip': 'Insert Link'
+      };
+      return translations[key] || key;
+    }
+  }
+}));
+
+describe('LinkPopover', () => {
+  let editor: Editor;
+
+  const createEditor = () => {
+    return new Editor({
+      extensions: [Document, Paragraph, Text, Link]
+    });
+  };
+
+  beforeEach(() => {
+    editor = createEditor();
+  });
+
+  afterEach(() => {
+    editor.destroy();
+  });
+
+  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 link popover button', () => {
+    render(<LinkPopover editor={editor} editorState={createEditorState()} />);
+
+    expect(screen.getByLabelText('Insert Link')).toBeInTheDocument();
+  });
+
+  it('should have correct icon', () => {
+    render(<LinkPopover editor={editor} editorState={createEditorState()} />);
+
+    const button = screen.getByLabelText('Insert Link');
+    expect(button).toHaveAttribute('data-icon', 'linked');
+  });
+
+  it('should be disabled when disabled prop is true', () => {
+    render(
+      <LinkPopover
+        editor={editor}
+        editorState={createEditorState()}
+        disabled={true}
+      />
+    );
+
+    expect(screen.getByLabelText('Insert Link')).toBeDisabled();
+  });
+
+  it('should be enabled when disabled prop is false', () => {
+    render(
+      <LinkPopover
+        editor={editor}
+        editorState={createEditorState()}
+        disabled={false}
+      />
+    );
+
+    expect(screen.getByLabelText('Insert Link')).not.toBeDisabled();
+  });
+
+  it('should have active class when isLink is true', () => {
+    render(
+      <LinkPopover
+        editor={editor}
+        editorState={createEditorState({ isLink: true })}
+      />
+    );
+
+    const button = screen.getByLabelText('Insert Link');
+    expect(button).toHaveClass('active');
+  });
+
+  it('should show popover content when button is clicked', async () => {
+    const user = userEvent.setup();
+
+    render(<LinkPopover editor={editor} editorState={createEditorState()} />);
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    expect(screen.getByTestId('popover-content')).toBeInTheDocument();
+  });
+
+  it('should contain text input field in popover', async () => {
+    const user = userEvent.setup();
+
+    render(<LinkPopover editor={editor} editorState={createEditorState()} />);
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    expect(screen.getByPlaceholderText('Link Text')).toBeInTheDocument();
+  });
+
+  it('should contain URL input field in popover', async () => {
+    const user = userEvent.setup();
+
+    render(<LinkPopover editor={editor} editorState={createEditorState()} />);
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    expect(screen.getByPlaceholderText('URL')).toBeInTheDocument();
+  });
+
+  it('should contain apply button in popover', async () => {
+    const user = userEvent.setup();
+
+    render(<LinkPopover editor={editor} editorState={createEditorState()} />);
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    const buttons = screen.getAllByRole('button');
+    const applyButton = buttons.find(
+      btn => btn.getAttribute('data-icon') === 'katalogkontrol'
+    );
+
+    expect(applyButton).toBeInTheDocument();
+  });
+
+  it('should contain remove button in popover', async () => {
+    const user = userEvent.setup();
+
+    render(<LinkPopover editor={editor} editorState={createEditorState()} />);
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    const buttons = screen.getAllByRole('button');
+    const removeButton = buttons.find(
+      btn => btn.getAttribute('data-icon') === 'bin'
+    );
+
+    expect(removeButton).toBeInTheDocument();
+  });
+
+  it('should allow entering text in text input', async () => {
+    const user = userEvent.setup();
+
+    render(<LinkPopover editor={editor} editorState={createEditorState()} />);
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    const textInput = screen.getByPlaceholderText('Link Text');
+    await user.type(textInput, 'Test Link');
+
+    expect(textInput).toHaveValue('Test Link');
+  });
+
+  it('should allow entering URL in URL input', async () => {
+    const user = userEvent.setup();
+
+    render(<LinkPopover editor={editor} editorState={createEditorState()} />);
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    const urlInput = screen.getByPlaceholderText('URL');
+    await user.type(urlInput, 'https://example.com');
+
+    expect(urlInput).toHaveValue('https://example.com');
+  });
+
+  it('should disable apply button when text is empty', async () => {
+    const user = userEvent.setup();
+
+    render(<LinkPopover editor={editor} editorState={createEditorState()} />);
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    const buttons = screen.getAllByRole('button');
+    const applyButton = buttons.find(
+      btn => btn.getAttribute('data-icon') === 'katalogkontrol'
+    );
+
+    expect(applyButton).toBeDisabled();
+  });
+
+  it('should disable apply button when URL is empty', async () => {
+    const user = userEvent.setup();
+
+    render(<LinkPopover editor={editor} editorState={createEditorState()} />);
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    const textInput = screen.getByPlaceholderText('Link Text');
+    await user.type(textInput, 'Test Link');
+
+    const buttons = screen.getAllByRole('button');
+    const applyButton = buttons.find(
+      btn => btn.getAttribute('data-icon') === 'katalogkontrol'
+    );
+
+    expect(applyButton).toBeDisabled();
+  });
+
+  it('should enable apply button when both text and URL are provided', async () => {
+    const user = userEvent.setup();
+
+    render(<LinkPopover editor={editor} editorState={createEditorState()} />);
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    const textInput = screen.getByPlaceholderText('Link Text');
+    const urlInput = screen.getByPlaceholderText('URL');
+
+    await user.type(textInput, 'Test Link');
+    await user.type(urlInput, 'https://example.com');
+
+    const buttons = screen.getAllByRole('button');
+    const applyButton = buttons.find(
+      btn => btn.getAttribute('data-icon') === 'katalogkontrol'
+    );
+
+    expect(applyButton).not.toBeDisabled();
+  });
+
+  it('should disable remove button when no link is active', async () => {
+    const user = userEvent.setup();
+
+    render(<LinkPopover editor={editor} editorState={createEditorState()} />);
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    const buttons = screen.getAllByRole('button');
+    const removeButton = buttons.find(
+      btn => btn.getAttribute('data-icon') === 'bin'
+    );
+
+    expect(removeButton).toBeDisabled();
+  });
+
+  it('should enable remove button when link is active', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <LinkPopover
+        editor={editor}
+        editorState={createEditorState({ isLink: true })}
+      />
+    );
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    const buttons = screen.getAllByRole('button');
+    const removeButton = buttons.find(
+      btn => btn.getAttribute('data-icon') === 'bin'
+    );
+
+    expect(removeButton).not.toBeDisabled();
+  });
+
+  it('should call setLink when apply button is clicked', async () => {
+    editor.commands.setContent('<p>Test text</p>');
+    editor.commands.setTextSelection({ from: 1, to: 10 });
+
+    const user = userEvent.setup();
+
+    render(<LinkPopover editor={editor} editorState={createEditorState()} />);
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    const textInput = screen.getByPlaceholderText('Link Text');
+    const urlInput = screen.getByPlaceholderText('URL');
+
+    await user.clear(textInput);
+    await user.type(textInput, 'Link');
+    await user.type(urlInput, 'https://example.com');
+
+    const buttons = screen.getAllByRole('button');
+    const applyButton = buttons.find(
+      btn => btn.getAttribute('data-icon') === 'katalogkontrol'
+    );
+
+    if (applyButton) {
+      await user.click(applyButton);
+    }
+
+    expect(editor.getAttributes('link').href).toBe('https://example.com');
+  });
+
+  it('should call unsetLink when remove button is clicked', async () => {
+    editor.commands.setContent(
+      '<p><a href="https://example.com">Test link</a></p>'
+    );
+    editor.commands.setTextSelection({ from: 1, to: 10 });
+
+    const user = userEvent.setup();
+
+    render(
+      <LinkPopover
+        editor={editor}
+        editorState={createEditorState({ isLink: true })}
+      />
+    );
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    const buttons = screen.getAllByRole('button');
+    const removeButton = buttons.find(
+      btn => btn.getAttribute('data-icon') === 'bin'
+    );
+
+    if (removeButton) {
+      await user.click(removeButton);
+    }
+
+    expect(editor.isActive('link')).toBe(false);
+  });
+
+  it('should apply link when Enter key is pressed in URL field', async () => {
+    editor.commands.setContent('<p>Test text</p>');
+    editor.commands.setTextSelection({ from: 1, to: 10 });
+
+    const user = userEvent.setup();
+
+    render(<LinkPopover editor={editor} editorState={createEditorState()} />);
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    const textInput = screen.getByPlaceholderText('Link Text');
+    const urlInput = screen.getByPlaceholderText('URL');
+
+    await user.clear(textInput);
+    await user.type(textInput, 'Link');
+    await user.type(urlInput, 'https://example.com{Enter}');
+
+    expect(editor.getAttributes('link').href).toBe('https://example.com');
+  });
+
+  it('should use extendMarkRange when editing existing link', async () => {
+    editor.commands.setContent('<p><a href="https://old.com">Old Link</a></p>');
+    editor.commands.setTextSelection({ from: 1, to: 9 });
+
+    const user = userEvent.setup();
+
+    render(
+      <LinkPopover
+        editor={editor}
+        editorState={createEditorState({ isLink: true })}
+      />
+    );
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    const urlInput = screen.getByPlaceholderText('URL');
+    await user.clear(urlInput);
+    await user.type(urlInput, 'https://new.com');
+
+    const buttons = screen.getAllByRole('button');
+    const applyButton = buttons.find(
+      btn => btn.getAttribute('data-icon') === 'katalogkontrol'
+    );
+
+    if (applyButton) {
+      await user.click(applyButton);
+    }
+
+    expect(editor.getAttributes('link').href).toBe('https://new.com');
+  });
+
+  it('should populate URL when opening popover on existing link', async () => {
+    editor.commands.setContent(
+      '<p><a href="https://example.com">Link Text</a></p>'
+    );
+    editor.commands.setTextSelection({ from: 1, to: 10 });
+
+    const user = userEvent.setup();
+
+    render(
+      <LinkPopover
+        editor={editor}
+        editorState={createEditorState({ isLink: true })}
+      />
+    );
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    const urlInput = screen.getByPlaceholderText('URL');
+    expect(urlInput).toHaveValue('https://example.com');
+  });
+
+  it('should auto-select entire link when cursor is inside link with no selection', async () => {
+    editor.commands.setContent(
+      '<p><a href="https://example.com">Link</a> text</p>'
+    );
+
+    editor.commands.setTextSelection(3);
+
+    const user = userEvent.setup();
+
+    render(
+      <LinkPopover
+        editor={editor}
+        editorState={createEditorState({ isLink: true })}
+      />
+    );
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    const urlInput = screen.getByPlaceholderText('URL');
+    expect(urlInput).toHaveValue('https://example.com');
+  });
+  it('should retrieve URL from marks if getAttributes returns empty', async () => {
+    editor.commands.setContent(
+      '<p><a href="https://fallback.com">Fallback Link</a></p>'
+    );
+    editor.commands.setTextSelection(3);
+
+    const originalGetAttributes = editor.getAttributes.bind(editor);
+    vi.spyOn(editor, 'getAttributes').mockImplementation(name => {
+      if (name === 'link') return { href: '' };
+      return originalGetAttributes(name);
+    });
+
+    const user = userEvent.setup();
+
+    render(
+      <LinkPopover
+        editor={editor}
+        editorState={createEditorState({ isLink: true })}
+      />
+    );
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    const urlInput = screen.getByPlaceholderText('URL');
+    expect(urlInput).toHaveValue('https://fallback.com');
+  });
+
+  it('should set url to empty string if link is active but no href found', async () => {
+    editor.commands.setContent('<p>Text</p>');
+    editor.commands.setTextSelection(1);
+
+    vi.spyOn(editor, 'getAttributes').mockReturnValue({});
+    vi.spyOn(editor, 'isActive').mockReturnValue(true);
+
+    const user = userEvent.setup();
+
+    render(
+      <LinkPopover
+        editor={editor}
+        editorState={createEditorState({ isLink: true })}
+      />
+    );
+
+    const button = screen.getByLabelText('Insert Link');
+    await user.click(button);
+
+    const urlInput = screen.getByPlaceholderText('URL');
+    expect(urlInput).toHaveValue('');
+  });
+});

package/dist/cjs/tiptap/components/menu-bar/__tests__/list-and-block-toolbar.test.d.ts

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

package/dist/cjs/tiptap/components/menu-bar/__tests__/list-and-block-toolbar.test.d.ts.map

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