@pie-lib/editable-html-tip-tap 2.1.2-next.29 → 2.1.2-next.30

package/src/components/__tests__/InlineDropdown.test.jsx

@@ -1,388 +0,0 @@
-import React from 'react';
-import { fireEvent, render, waitFor } from '@testing-library/react';
-import InlineDropdown from '../respArea/InlineDropdown';
-
-jest.mock('@tiptap/react', () => ({
-  NodeViewWrapper: ({ children, ...props }) => (
-    <div data-testid="node-view-wrapper" {...props}>
-      {children}
-    </div>
-  ),
-}));
-
-jest.mock('react-dom', () => ({
-  ...jest.requireActual('react-dom'),
-  createPortal: (node) => node,
-}));
-
-describe('InlineDropdown', () => {
-  const buildMockEditor = (overrides = {}) => {
-    const mockNodeAt = jest.fn((pos) => (pos === 5 ? { nodeSize: 1 } : null));
-    const mockDoc = {
-      descendants: jest.fn(),
-      nodeAt: mockNodeAt,
-    };
-    const mockTr = {
-      delete: jest.fn(),
-      doc: { nodeAt: mockNodeAt },
-      setSelection: jest.fn(),
-    };
-    return {
-      state: {
-        selection: {
-          from: 0,
-          to: 1,
-        },
-        tr: mockTr,
-        doc: mockDoc,
-      },
-      view: {
-        coordsAtPos: jest.fn(() => ({ top: 100, left: 50 })),
-        dispatch: jest.fn(),
-      },
-      commands: {
-        focus: jest.fn(),
-      },
-      _tiptapContainerEl: document.createElement('div'),
-      _toolbarOpened: false,
-      ...overrides,
-    };
-  };
-
-  let mockEditor;
-
-  const mockNode = {
-    attrs: {
-      index: '0',
-      value: 'Selected Option',
-      error: false,
-    },
-    nodeSize: 1,
-  };
-
-  const mockOptions = {
-    respAreaToolbar: jest.fn(() => () => <div data-testid="inline-dropdown-toolbar">Toolbar</div>),
-  };
-
-  const defaultProps = {
-    editor: mockEditor,
-    node: mockNode,
-    getPos: () => 5,
-    options: mockOptions,
-    selected: false,
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    mockEditor = buildMockEditor();
-    defaultProps.editor = mockEditor;
-    Object.defineProperty(document.body, 'getBoundingClientRect', {
-      value: jest.fn(() => ({ top: 0, left: 0 })),
-      configurable: true,
-    });
-  });
-
-  it('renders without crashing', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders NodeViewWrapper', () => {
-    const { getByTestId } = render(<InlineDropdown {...defaultProps} />);
-    expect(getByTestId('node-view-wrapper')).toBeInTheDocument();
-  });
-
-  it('displays selected value', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    const valueDiv = container.querySelector('div[style*="border"]');
-    expect(valueDiv).toBeInTheDocument();
-  });
-
-  it('uses 2px horizontal margin on the value control and no horizontal margin on the wrapper', () => {
-    const { container, getByTestId } = render(<InlineDropdown {...defaultProps} />);
-    const valueDiv = container.querySelector('div[style*="border"]');
-    expect(valueDiv).toHaveStyle({ margin: '0 2px' });
-    const wrapper = getByTestId('node-view-wrapper');
-    expect(wrapper.getAttribute('style') || '').not.toMatch(/margin/);
-  });
-
-  it('renders chevron icon', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    const chevron = container.querySelector('svg');
-    expect(chevron).toBeInTheDocument();
-  });
-
-  it('shows toolbar when selected and only this node is selected', async () => {
-    const { queryByTestId } = render(<InlineDropdown {...defaultProps} selected={true} />);
-    await waitFor(() => {
-      // Toolbar is shown via portal
-      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-    });
-  });
-
-  it('does not show toolbar when not selected', () => {
-    const { queryByTestId } = render(<InlineDropdown {...defaultProps} selected={false} />);
-    expect(queryByTestId('inline-dropdown-toolbar')).not.toBeInTheDocument();
-  });
-
-  it('shows toolbar on click', async () => {
-    const { container, queryByTestId } = render(<InlineDropdown {...defaultProps} />);
-    const dropdown = container.querySelector('div[style*="border"]');
-    if (dropdown) {
-      fireEvent.click(dropdown);
-      await waitFor(() => {
-        expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-      });
-    } else {
-      // If dropdown is not found, just verify the component rendered
-      expect(container).toBeInTheDocument();
-    }
-  });
-
-  it('has correct minimum dimensions', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    const wrapper = container.querySelector('[data-testid="node-view-wrapper"]');
-    expect(wrapper).toHaveStyle({ height: '50px' });
-  });
-
-  it('has inline-flex display', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    const wrapper = container.querySelector('[data-testid="node-view-wrapper"]');
-    expect(wrapper).toHaveStyle({ display: 'inline-flex' });
-  });
-
-  it('has cursor pointer style', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    const wrapper = container.querySelector('[data-testid="node-view-wrapper"]');
-    expect(wrapper).toHaveStyle({ cursor: 'pointer' });
-  });
-
-  it('renders with empty value as nbsp', () => {
-    const emptyNode = { ...mockNode, attrs: { ...mockNode.attrs, value: '' } };
-    const { container } = render(<InlineDropdown {...defaultProps} node={emptyNode} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('calls respAreaToolbar with correct params', () => {
-    render(<InlineDropdown {...defaultProps} />);
-    expect(mockOptions.respAreaToolbar).toHaveBeenCalledWith([mockNode, 5], mockEditor, expect.any(Function));
-  });
-
-  it('closes toolbar on outside click', async () => {
-    const { container, queryByTestId } = render(<InlineDropdown {...defaultProps} selected={true} />);
-    await waitFor(() => {
-      fireEvent.mouseDown(document.body);
-    });
-    // After clicking outside, toolbar should be hidden
-    await waitFor(() => {
-      expect(queryByTestId('inline-dropdown-toolbar')).not.toBeInTheDocument();
-    });
-  });
-
-  it('has correct border styling', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    const dropdownDiv = container.querySelector('div[style*="border"]');
-    expect(dropdownDiv).toHaveStyle({ border: '1px solid #C0C3CF' });
-  });
-
-  it('has correct min width', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    const dropdownDiv = container.querySelector('div[style*="border"]');
-    expect(dropdownDiv).toHaveStyle({ minWidth: '178px' });
-  });
-
-  it('positions chevron correctly', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    const chevron = container.querySelector('svg');
-    // Chevron styling is applied inline, just verify it rendered
-    if (chevron) {
-      expect(chevron).toBeInTheDocument();
-    } else {
-      expect(container).toBeInTheDocument();
-    }
-  });
-
-  it('has ellipsis for overflow text', () => {
-    const { container } = render(<InlineDropdown {...defaultProps} />);
-    const textContainer = container.querySelector('div[style*="overflow"]');
-    expect(textContainer).toHaveStyle({ textOverflow: 'ellipsis', whiteSpace: 'nowrap' });
-  });
-
-  it('renders toolbar with z-index', async () => {
-    const { container } = render(<InlineDropdown {...defaultProps} selected={true} />);
-    await waitFor(() => {
-      const toolbarContainer = container.querySelector('div[style*="zIndex"]');
-      if (toolbarContainer) {
-        expect(toolbarContainer).toHaveStyle({ zIndex: '1' });
-      }
-    });
-  });
-
-  it('passes editorCallback to InlineDropdownToolbar', async () => {
-    const mockToolbarComponent = jest.fn(({ editorCallback }) => {
-      editorCallback?.({ instanceId: 'test-instance' });
-      return <div data-testid="inline-dropdown-toolbar">Toolbar</div>;
-    });
-
-    const mockOptionsWithCallback = {
-      respAreaToolbar: jest.fn(() => mockToolbarComponent),
-    };
-
-    const { queryByTestId } = render(
-      <InlineDropdown {...defaultProps} options={mockOptionsWithCallback} selected={true} />,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-    });
-  });
-
-  it('stores toolbar editor instance in ref when editorCallback is called', async () => {
-    let capturedCallback;
-    const mockToolbarComponent = ({ editorCallback }) => {
-      capturedCallback = editorCallback;
-      return <div data-testid="inline-dropdown-toolbar">Toolbar</div>;
-    };
-
-    const mockOptionsWithCallback = {
-      respAreaToolbar: jest.fn(() => mockToolbarComponent),
-    };
-
-    const { queryByTestId } = render(
-      <InlineDropdown {...defaultProps} options={mockOptionsWithCallback} selected={true} />,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-    });
-
-    // Verify callback exists
-    expect(capturedCallback).toBeDefined();
-  });
-
-  it('handles click outside logic with data-toolbar-for attribute', async () => {
-    const editorWithInstanceId = {
-      ...mockEditor,
-      instanceId: 'editor-123',
-      _toolbarOpened: false,
-    };
-
-    // Mock the toolbar callback to set the toolbar editor instance
-    let capturedCallback;
-    const mockToolbarComponent = ({ editorCallback }) => {
-      React.useEffect(() => {
-        capturedCallback = editorCallback;
-        if (editorCallback) {
-          editorCallback({ instanceId: 'editor-123' });
-        }
-      }, [editorCallback]);
-      return <div data-testid="inline-dropdown-toolbar">Toolbar</div>;
-    };
-
-    const mockOptionsWithCallback = {
-      respAreaToolbar: jest.fn(() => mockToolbarComponent),
-    };
-
-    const { container, queryByTestId } = render(
-      <InlineDropdown
-        {...defaultProps}
-        editor={editorWithInstanceId}
-        options={mockOptionsWithCallback}
-        selected={true}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-    });
-
-    // Create an element with data-toolbar-for attribute
-    const otherToolbar = document.createElement('div');
-    otherToolbar.setAttribute('data-toolbar-for', 'editor-456');
-    document.body.appendChild(otherToolbar);
-
-    await waitFor(() => {
-      fireEvent.mouseDown(otherToolbar);
-    });
-
-    // Cleanup
-    document.body.removeChild(otherToolbar);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('does not close when clicking inside same editor toolbar', async () => {
-    const editorWithInstanceId = {
-      ...mockEditor,
-      instanceId: 'editor-123',
-      _toolbarOpened: false,
-    };
-
-    let toolbarEditorInstance;
-    const mockToolbarComponent = ({ editorCallback }) => {
-      React.useEffect(() => {
-        if (editorCallback) {
-          editorCallback({ instanceId: 'editor-123' });
-          toolbarEditorInstance = { instanceId: 'editor-123' };
-        }
-      }, [editorCallback]);
-      return <div data-testid="inline-dropdown-toolbar">Toolbar</div>;
-    };
-
-    const mockOptionsWithCallback = {
-      respAreaToolbar: jest.fn(() => mockToolbarComponent),
-    };
-
-    render(
-      <InlineDropdown
-        {...defaultProps}
-        editor={editorWithInstanceId}
-        options={mockOptionsWithCallback}
-        selected={true}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(mockOptionsWithCallback.respAreaToolbar).toHaveBeenCalled();
-    });
-  });
-
-  it('checks editor._toolbarOpened in click outside handler', async () => {
-    const editorWithToolbarOpened = buildMockEditor({ _toolbarOpened: true });
-
-    const { queryByTestId } = render(
-      <InlineDropdown {...defaultProps} editor={editorWithToolbarOpened} selected={true} />,
-    );
-
-    await waitFor(() => {
-      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-    });
-
-    // When _toolbarOpened is true, clicking outside should not close
-    fireEvent.mouseDown(document.body);
-
-    // Toolbar should still be visible
-    expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-  });
-
-  it('renders delete control on portaled custom toolbar when container el is set', async () => {
-    const { findByLabelText } = render(<InlineDropdown {...defaultProps} selected />);
-    expect(await findByLabelText('Delete')).toBeInTheDocument();
-  });
-
-  it('does not render portaled delete control when _tiptapContainerEl is missing', async () => {
-    const editor = buildMockEditor({ _tiptapContainerEl: undefined });
-    const { queryByLabelText, findByTestId } = render(<InlineDropdown {...defaultProps} editor={editor} selected />);
-    expect(await findByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-    expect(queryByLabelText('Delete')).not.toBeInTheDocument();
-  });
-
-  it('delete clears toolbar flag, removes node range, dispatches, and focuses', async () => {
-    mockEditor._toolbarOpened = true;
-    const { findByLabelText } = render(<InlineDropdown {...defaultProps} selected />);
-    fireEvent.mouseDown(await findByLabelText('Delete'));
-    expect(mockEditor.state.tr.delete).toHaveBeenCalledWith(5, 6);
-    expect(mockEditor.view.dispatch).toHaveBeenCalledWith(mockEditor.state.tr);
-    expect(mockEditor._toolbarOpened).toBe(false);
-    expect(mockEditor.commands.focus).toHaveBeenCalled();
-  });
-});

package/src/components/__tests__/InsertImageHandler.test.js

@@ -1,161 +0,0 @@
-import InsertImageHandler from '../image/InsertImageHandler';
-
-describe('InsertImageHandler', () => {
-  const mockNode = {
-    attrs: {},
-    nodeSize: 1,
-  };
-
-  const NODE_POS = 5;
-
-  const nodeInfo = (node = mockNode, pos = NODE_POS) => [node, pos];
-
-  const createMockEditor = () => ({
-    _insertingImage: true,
-    state: {
-      doc: {},
-      tr: {
-        setNodeMarkup: jest.fn((pos, type, attrs) => ({ setNodeMarkup: jest.fn() })),
-        delete: jest.fn((from, to) => ({ delete: jest.fn() })),
-      },
-    },
-    view: {
-      dispatch: jest.fn(),
-    },
-  });
-
-  const mockOnFinish = jest.fn();
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('creates handler instance', () => {
-    const editor = createMockEditor();
-    const info = nodeInfo();
-    const handler = new InsertImageHandler(editor, info, mockOnFinish);
-    expect(handler).toBeDefined();
-    expect(handler.editor).toBe(editor);
-    expect(handler.nodeInfo).toBe(info);
-    expect(handler.node).toBe(mockNode);
-    expect(handler.onFinish).toBe(mockOnFinish);
-  });
-
-  it('stores nodePos from nodeInfo tuple', () => {
-    const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, nodeInfo(mockNode, 42), mockOnFinish);
-    expect(handler.nodePos).toBe(42);
-  });
-
-  it('stores isPasted parameter', () => {
-    const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish, true);
-    expect(handler.isPasted).toBe(true);
-  });
-
-  it('defaults isPasted to false', () => {
-    const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    expect(handler.isPasted).toBe(false);
-  });
-
-  it('cancel deletes node and calls onFinish', () => {
-    const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    handler.cancel();
-    expect(mockOnFinish).toHaveBeenCalledWith(false);
-    expect(editor._insertingImage).toBe(false);
-  });
-
-  it('updateNode dispatches transaction with new attributes', () => {
-    const editor = createMockEditor();
-    const mockNodeAt = jest.fn(() => ({ attrs: { existing: 'value' } }));
-    editor.state.doc.nodeAt = mockNodeAt;
-
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    handler.updateNode({ newAttr: 'newValue' });
-
-    expect(mockNodeAt).toHaveBeenCalledWith(NODE_POS);
-    expect(editor.view.dispatch).toHaveBeenCalled();
-  });
-
-  it('done calls onFinish with false on error', () => {
-    const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    const consoleLogSpy = jest.spyOn(console, 'log').mockImplementation();
-
-    handler.done('error', null);
-
-    expect(consoleLogSpy).toHaveBeenCalledWith('error');
-    expect(mockOnFinish).toHaveBeenCalledWith(false);
-    expect(editor._insertingImage).toBe(false);
-    consoleLogSpy.mockRestore();
-  });
-
-  it('done updates node and calls onFinish with true on success', () => {
-    const editor = createMockEditor();
-    const mockNodeAt = jest.fn(() => ({ attrs: {} }));
-    editor.state.doc.nodeAt = mockNodeAt;
-
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    handler.done(null, 'http://example.com/image.jpg');
-
-    expect(editor.view.dispatch).toHaveBeenCalled();
-    expect(mockOnFinish).toHaveBeenCalledWith(true);
-    expect(editor._insertingImage).toBe(false);
-  });
-
-  it('fileChosen returns early when no file provided', () => {
-    const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    handler.fileChosen(null);
-    expect(editor.view.dispatch).not.toHaveBeenCalled();
-  });
-
-  it('fileChosen saves file and reads it as data URL', () => {
-    const editor = createMockEditor();
-    const mockNodeAt = jest.fn(() => ({ attrs: {} }));
-    editor.state.doc.nodeAt = mockNodeAt;
-
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    const mockFile = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
-
-    global.FileReader = jest.fn(function () {
-      this.readAsDataURL = jest.fn(function () {
-        this.result = 'data:image/jpeg;base64,abc123';
-        this.onload();
-      });
-    });
-
-    handler.fileChosen(mockFile);
-
-    expect(handler.chosenFile).toBe(mockFile);
-    expect(editor._insertingImage).toBe(false);
-  });
-
-  it('progress updates node with percent', () => {
-    const editor = createMockEditor();
-    const mockNodeAt = jest.fn(() => ({ attrs: {} }));
-    editor.state.doc.nodeAt = mockNodeAt;
-
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    handler.progress(50, 500, 1000);
-
-    expect(editor.view.dispatch).toHaveBeenCalled();
-  });
-
-  it('getChosenFile returns the chosen file', () => {
-    const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    const mockFile = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
-    handler.chosenFile = mockFile;
-
-    expect(handler.getChosenFile()).toBe(mockFile);
-  });
-
-  it('getChosenFile returns null initially', () => {
-    const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    expect(handler.getChosenFile()).toBeNull();
-  });
-});