@akinon/ui-editor 1.0.0

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

@@ -0,0 +1,332 @@
+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 { LinkPopover } from '../link-popover';
+vi.mock('@akinon/ui-popover', () => ({
+    Popover: ({ children, content, open, onOpenChange }) => {
+        const [isOpen, setIsOpen] = React.useState(false);
+        React.useEffect(() => {
+            if (open !== undefined) {
+                setIsOpen(open);
+            }
+        }, [open]);
+        const handleClick = () => {
+            setIsOpen(!isOpen);
+            if (onOpenChange) {
+                onOpenChange(!isOpen);
+            }
+        };
+        return (React.createElement("div", null,
+            React.createElement("div", { onClick: handleClick }, children),
+            (open !== undefined ? open : isOpen) && (React.createElement("div", { "data-testid": "popover-content" }, content))));
+    }
+}));
+vi.mock('@akinon/ui-button', () => ({
+    Button: ({ children, onClick, disabled, tooltip, icon, className, type, danger }) => (React.createElement("button", { onClick: onClick, disabled: disabled, "aria-label": tooltip, "data-icon": icon, className: className, "data-type": type, "data-danger": danger }, children))
+}));
+vi.mock('@akinon/ui-input', () => ({
+    Input: ({ value, onChange, placeholder, onKeyDown }) => (React.createElement("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, callback) => {
+        callback();
+        return (component) => component;
+    }
+}));
+vi.mock('antd', () => ({
+    ConfigProvider: {
+        ConfigContext: React.createContext({
+            getPrefixCls: (name) => `ant-${name}`,
+            theme: {}
+        })
+    }
+}));
+vi.mock('../../../../i18n', () => ({
+    i18n: {
+        t: (key) => {
+            const translations = {
+                'editor.link.text_placeholder': 'Link Text',
+                'editor.link.url_placeholder': 'URL',
+                'editor.link.tooltip': 'Insert Link'
+            };
+            return translations[key] || key;
+        }
+    }
+}));
+describe('LinkPopover', () => {
+    let editor;
+    const createEditor = () => {
+        return new Editor({
+            extensions: [Document, Paragraph, Text, Link]
+        });
+    };
+    beforeEach(() => {
+        editor = createEditor();
+    });
+    afterEach(() => {
+        editor.destroy();
+    });
+    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 link popover button', () => {
+        render(React.createElement(LinkPopover, { editor: editor, editorState: createEditorState() }));
+        expect(screen.getByLabelText('Insert Link')).toBeInTheDocument();
+    });
+    it('should have correct icon', () => {
+        render(React.createElement(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(React.createElement(LinkPopover, { editor: editor, editorState: createEditorState(), disabled: true }));
+        expect(screen.getByLabelText('Insert Link')).toBeDisabled();
+    });
+    it('should be enabled when disabled prop is false', () => {
+        render(React.createElement(LinkPopover, { editor: editor, editorState: createEditorState(), disabled: false }));
+        expect(screen.getByLabelText('Insert Link')).not.toBeDisabled();
+    });
+    it('should have active class when isLink is true', () => {
+        render(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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(React.createElement(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('');
+    });
+});