@pie-lib/editable-html-tip-tap 2.1.18 → 2.1.20-beta.1

package/src/extensions/__tests__/extended-table.test.js

@@ -1,183 +0,0 @@
-import ExtendedTable, { applyPresentationToTableElement, ExtendedTableView } from '../extended-table';
-
-const mockTableViewState = { updateReturns: true };
-
-jest.mock('@tiptap/extension-table', () => ({
-  Table: {
-    extend: jest.fn((config) => config),
-  },
-  TableView: class TableView {
-    constructor() {
-      this.table = {
-        style: { setProperty: jest.fn() },
-        setAttribute: jest.fn(),
-      };
-    }
-
-    update() {
-      return mockTableViewState.updateReturns;
-    }
-  },
-}));
-
-describe('ExtendedTable', () => {
-  beforeEach(() => {
-    mockTableViewState.updateReturns = true;
-  });
-
-  describe('applyPresentationToTableElement', () => {
-    it('sets default border and theme styles', () => {
-      const table = document.createElement('table');
-      const setProperty = jest.spyOn(table.style, 'setProperty');
-
-      applyPresentationToTableElement(table, {});
-
-      expect(table.getAttribute('border')).toBe('1');
-      expect(setProperty).toHaveBeenCalledWith('color', 'var(--pie-text, black)');
-      expect(setProperty).toHaveBeenCalledWith('background-color', 'var(--pie-background, rgba(255, 255, 255))');
-      setProperty.mockRestore();
-    });
-
-    it('uses explicit border from attrs', () => {
-      const table = document.createElement('table');
-      applyPresentationToTableElement(table, { border: '0' });
-
-      expect(table.getAttribute('border')).toBe('0');
-    });
-
-    it('treats empty border as default', () => {
-      const table = document.createElement('table');
-      applyPresentationToTableElement(table, { border: '' });
-
-      expect(table.getAttribute('border')).toBe('1');
-    });
-  });
-
-  describe('ExtendedTableView', () => {
-    it('applies presentation after construction', () => {
-      const node = { attrs: { border: '2' } };
-      const view = new ExtendedTableView(node, 25);
-
-      expect(view.table.setAttribute).toHaveBeenCalledWith('border', '2');
-      expect(view.table.style.setProperty).toHaveBeenCalledWith('color', 'var(--pie-text, black)');
-      expect(view.table.style.setProperty).toHaveBeenCalledWith(
-        'background-color',
-        'var(--pie-background, rgba(255, 255, 255))',
-      );
-    });
-
-    it('reapplies presentation when super.update returns true', () => {
-      const view = new ExtendedTableView({ attrs: { border: '1' } }, 25);
-      view.table.setAttribute.mockClear();
-      view.table.style.setProperty.mockClear();
-
-      view.update({ attrs: { border: '0' } });
-
-      expect(view.table.setAttribute).toHaveBeenCalledWith('border', '0');
-      expect(view.table.style.setProperty).toHaveBeenCalledWith('color', 'var(--pie-text, black)');
-      expect(view.table.style.setProperty).toHaveBeenCalledWith(
-        'background-color',
-        'var(--pie-background, rgba(255, 255, 255))',
-      );
-    });
-
-    it('does not reapply presentation when super.update returns false', () => {
-      mockTableViewState.updateReturns = false;
-      const view = new ExtendedTableView({ attrs: { border: '1' } }, 25);
-      view.table.setAttribute.mockClear();
-      view.table.style.setProperty.mockClear();
-
-      const ok = view.update({ attrs: { border: '0' } });
-
-      expect(ok).toBe(false);
-      expect(view.table.setAttribute).not.toHaveBeenCalled();
-      expect(view.table.style.setProperty).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('addOptions', () => {
-    it('enables resizable table view with zero handle width for colgroup sync', () => {
-      const options = ExtendedTable.addOptions();
-      expect(options.resizable).toBe(true);
-      expect(options.handleWidth).toBe(0);
-      expect(options.View).toBe(ExtendedTableView);
-    });
-  });
-
-  describe('addAttributes', () => {
-    it('returns border attribute with default value', () => {
-      const attributes = ExtendedTable.addAttributes();
-      expect(attributes).toHaveProperty('border');
-      expect(attributes.border).toEqual({ default: '1' });
-    });
-  });
-
-  describe('renderHTML', () => {
-    it('renders table with default border', () => {
-      const props = {
-        HTMLAttributes: {},
-      };
-
-      const mockParent = jest.fn(() => ['table', { style: '' }]);
-
-      const context = {
-        parent: mockParent,
-      };
-
-      const result = ExtendedTable.renderHTML.call(context, props);
-
-      expect(mockParent).toHaveBeenCalledWith(props);
-      expect(result[0]).toBe('table');
-      expect(result[1]).toHaveProperty('style');
-    });
-
-    it('renders table with custom border', () => {
-      const props = {
-        HTMLAttributes: { border: '2' },
-      };
-
-      const mockParent = jest.fn(() => ['table', { style: '' }]);
-
-      const context = {
-        parent: mockParent,
-      };
-
-      const result = ExtendedTable.renderHTML.call(context, props);
-
-      expect(result[1].border).toBe('2');
-    });
-
-    it('handles styles ending with semicolon', () => {
-      const props = {
-        HTMLAttributes: {},
-      };
-
-      const mockParent = jest.fn(() => ['table', { style: 'padding: 5px;' }]);
-
-      const context = {
-        parent: mockParent,
-      };
-
-      const result = ExtendedTable.renderHTML.call(context, props);
-
-      expect(result[1].style).toContain('padding: 5px;');
-    });
-
-    it('includes CSS custom properties', () => {
-      const props = {
-        HTMLAttributes: {},
-      };
-
-      const mockParent = jest.fn(() => ['table', { style: '' }]);
-
-      const context = {
-        parent: mockParent,
-      };
-
-      const result = ExtendedTable.renderHTML.call(context, props);
-
-      expect(result[1].style).toContain('color: var(--pie-text, black)');
-      expect(result[1].style).toContain('background-color: var(--pie-background, rgba(255, 255, 255))');
-    });
-  });
-});

package/src/extensions/__tests__/image-component.test.jsx

@@ -1,346 +0,0 @@
-import React from 'react';
-import { fireEvent, render, waitFor } from '@testing-library/react';
-import ImageComponent from '../image-component';
-
-jest.mock('@tiptap/react', () => ({
-  NodeViewWrapper: ({ children }) => <div data-testid="node-view-wrapper">{children}</div>,
-}));
-
-jest.mock('../../components/image/InsertImageHandler', () => ({
-  __esModule: true,
-  default: jest.fn(),
-}));
-
-jest.mock('../../components/image/ImageToolbar', () => ({
-  __esModule: true,
-  default: ({ onChange, alignment, alt }) => (
-    <div data-testid="image-toolbar">
-      <button onClick={() => onChange({ alignment: 'center' })}>Center</button>
-      <span>{alignment}</span>
-      <span>{alt}</span>
-    </div>
-  ),
-}));
-
-jest.mock('../custom-toolbar-wrapper', () => ({
-  __esModule: true,
-  default: ({ children, onDone }) => (
-    <div data-testid="custom-toolbar-wrapper">
-      {children}
-      <button onClick={onDone} data-testid="done-button">
-        Done
-      </button>
-    </div>
-  ),
-}));
-
-describe('ImageComponent', () => {
-  const MOCK_NODE_POS = 7;
-
-  const createMockEditor = (selection = { from: 0, to: 1 }) => ({
-    _tiptapContainerEl: document.body,
-    isEditable: true,
-    commands: {
-      updateAttributes: jest.fn(),
-      focus: jest.fn(),
-    },
-    state: {
-      selection,
-      doc: {
-        descendants: jest.fn(),
-        nodeAt: jest.fn(),
-      },
-      tr: {
-        setNodeMarkup: jest.fn().mockReturnThis(),
-        delete: jest.fn().mockReturnThis(),
-      },
-    },
-    view: {
-      dispatch: jest.fn(),
-    },
-  });
-
-  let mockEditor = createMockEditor();
-
-  const mockNode = {
-    type: { name: 'imageUploadNode' },
-    attrs: {
-      nodeKey: 'test-key-123',
-      src: 'test.jpg',
-      width: 100,
-      height: 100,
-      loaded: true,
-      percent: 100,
-      alt: 'Test image',
-      alignment: 'left',
-      deleteStatus: null,
-    },
-    nodeSize: 1,
-  };
-
-  const mockOptions = {
-    imageHandling: {
-      insertImageRequested: jest.fn(),
-      onDone: jest.fn(),
-      onDelete: jest.fn(),
-    },
-    disableImageAlignmentButtons: false,
-  };
-
-  const defaultProps = {
-    node: mockNode,
-    editor: mockEditor,
-    selected: false,
-    options: mockOptions,
-    attributes: {},
-    onFocus: jest.fn(),
-    getPos: jest.fn(() => MOCK_NODE_POS),
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    mockEditor = createMockEditor();
-    defaultProps.editor = mockEditor;
-    defaultProps.getPos = jest.fn(() => MOCK_NODE_POS);
-    mockEditor.state.doc.descendants.mockImplementation((cb) => cb(mockNode, 0));
-    mockEditor.state.doc.nodeAt.mockReturnValue(mockNode);
-  });
-
-  it('renders without crashing', () => {
-    const { getByTestId } = render(<ImageComponent {...defaultProps} />);
-    expect(getByTestId('node-view-wrapper')).toBeInTheDocument();
-  });
-
-  it('renders image with correct src', () => {
-    const { container } = render(<ImageComponent {...defaultProps} />);
-    const img = container.querySelector('img');
-    expect(img).toBeInTheDocument();
-    expect(img.src).toContain('test.jpg');
-  });
-
-  it('renders image with correct dimensions', () => {
-    const { container } = render(<ImageComponent {...defaultProps} />);
-    const img = container.querySelector('img');
-    expect(img.style.width).toBe('100px');
-    expect(img.style.height).toBe('100px');
-  });
-
-  it('renders image with alt text', () => {
-    const { container } = render(<ImageComponent {...defaultProps} />);
-    const img = container.querySelector('img');
-    expect(img.alt).toBe('Test image');
-  });
-
-  it('does not show toolbar when not selected', () => {
-    const { queryByTestId } = render(<ImageComponent {...defaultProps} selected={false} />);
-    expect(queryByTestId('image-toolbar')).not.toBeInTheDocument();
-  });
-
-  it('shows toolbar when selected', async () => {
-    const { getByTestId } = render(<ImageComponent {...defaultProps} selected={true} />);
-
-    await waitFor(() => {
-      expect(getByTestId('image-toolbar')).toBeInTheDocument();
-    });
-  });
-
-  it('applies loading opacity when image not loaded', () => {
-    const notLoadedNode = {
-      ...mockNode,
-      attrs: {
-        ...mockNode.attrs,
-        loaded: false,
-      },
-    };
-
-    const { container } = render(<ImageComponent {...defaultProps} node={notLoadedNode} />);
-    const root = container.querySelector('[data-testid="node-view-wrapper"] > div');
-    expect(root).toHaveStyle({ opacity: 0.3 });
-  });
-
-  it('applies pending delete opacity', () => {
-    const pendingDeleteNode = {
-      ...mockNode,
-      attrs: {
-        ...mockNode.attrs,
-        deleteStatus: 'pending',
-      },
-    };
-
-    const { container } = render(<ImageComponent {...defaultProps} node={pendingDeleteNode} />);
-    const root = container.querySelector('[data-testid="node-view-wrapper"] > div');
-    expect(root).toHaveStyle({ opacity: 0.3 });
-  });
-
-  it('aligns image to left by default', () => {
-    const { container } = render(<ImageComponent {...defaultProps} />);
-    const root = container.querySelector('[data-testid="node-view-wrapper"] > div');
-    expect(root).toHaveStyle({ justifyContent: 'flex-start' });
-  });
-
-  it('aligns image to center', () => {
-    const centerNode = {
-      ...mockNode,
-      attrs: {
-        ...mockNode.attrs,
-        alignment: 'center',
-      },
-    };
-
-    const { container } = render(<ImageComponent {...defaultProps} node={centerNode} />);
-    const root = container.querySelector('[data-testid="node-view-wrapper"] > div');
-    expect(root).toHaveStyle({ justifyContent: 'center' });
-  });
-
-  it('aligns image to right', () => {
-    const rightNode = {
-      ...mockNode,
-      attrs: {
-        ...mockNode.attrs,
-        alignment: 'right',
-      },
-    };
-
-    const { container } = render(<ImageComponent {...defaultProps} node={rightNode} />);
-    const root = container.querySelector('[data-testid="node-view-wrapper"] > div');
-    expect(root).toHaveStyle({ justifyContent: 'flex-end' });
-  });
-
-  it('does not call insertImageRequested when image already has src', () => {
-    render(<ImageComponent {...defaultProps} selected={true} />);
-    expect(mockOptions.imageHandling.insertImageRequested).not.toHaveBeenCalled();
-  });
-
-  it('does not call insertImageRequested for empty placeholder on mount when not selected', () => {
-    const placeholderNode = {
-      ...mockNode,
-      attrs: {
-        ...mockNode.attrs,
-        src: null,
-        loaded: false,
-        percent: null,
-      },
-    };
-    render(<ImageComponent {...defaultProps} node={placeholderNode} selected={false} />);
-    expect(mockOptions.imageHandling.insertImageRequested).not.toHaveBeenCalled();
-  });
-
-  it('calls insertImageRequested with editor and [node, pos] when empty placeholder is solely selected', async () => {
-    const placeholderNode = {
-      ...mockNode,
-      nodeSize: 1,
-      attrs: {
-        ...mockNode.attrs,
-        src: null,
-        loaded: false,
-        percent: null,
-      },
-    };
-    mockEditor = createMockEditor({ from: 0, to: 1 });
-
-    render(<ImageComponent {...defaultProps} editor={mockEditor} node={placeholderNode} selected={true} />);
-
-    await waitFor(() => {
-      expect(mockOptions.imageHandling.insertImageRequested).toHaveBeenCalled();
-    });
-
-    expect(mockOptions.imageHandling.insertImageRequested).toHaveBeenCalledWith(
-      mockEditor,
-      [placeholderNode, MOCK_NODE_POS],
-      expect.any(Function),
-    );
-    expect(defaultProps.getPos).toHaveBeenCalled();
-  });
-
-  it('does not call insertImageRequested when selection spans beyond the image node', () => {
-    const placeholderNode = {
-      ...mockNode,
-      nodeSize: 1,
-      attrs: {
-        ...mockNode.attrs,
-        src: null,
-        loaded: false,
-        percent: null,
-      },
-    };
-    mockEditor = createMockEditor({ from: 0, to: 5 });
-
-    render(<ImageComponent {...defaultProps} editor={mockEditor} node={placeholderNode} selected={true} />);
-    expect(mockOptions.imageHandling.insertImageRequested).not.toHaveBeenCalled();
-  });
-
-  it('updates attributes through toolbar onChange', async () => {
-    const { getByTestId } = render(<ImageComponent {...defaultProps} selected={true} />);
-
-    await waitFor(() => {
-      const centerButton = getByTestId('image-toolbar').querySelector('button');
-      fireEvent.click(centerButton);
-    });
-
-    expect(mockEditor.state.tr.setNodeMarkup).toHaveBeenCalledWith(
-      0,
-      undefined,
-      expect.objectContaining({ alignment: 'center' }),
-    );
-    expect(mockEditor.view.dispatch).toHaveBeenCalled();
-  });
-
-  it('toolbar is shown when selected', async () => {
-    const { container, queryByTestId } = render(<ImageComponent {...defaultProps} selected={true} />);
-
-    // Wait for toolbar to potentially appear
-    await waitFor(() => {
-      // The toolbar might not be visible due to mocking but check if custom-toolbar-wrapper shows up
-      const toolbar = container.querySelector('[data-testid="custom-toolbar-wrapper"]');
-      // In a real test environment, the toolbar would be visible
-      // For now, just verify the component renders without errors when selected
-      expect(container).toBeInTheDocument();
-    });
-  });
-
-  it('respects maxImageWidth prop', () => {
-    const props = {
-      ...defaultProps,
-      maxImageWidth: 500,
-    };
-
-    const { container } = render(<ImageComponent {...props} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('respects maxImageHeight prop', () => {
-    const props = {
-      ...defaultProps,
-      maxImageHeight: 800,
-    };
-
-    const { container } = render(<ImageComponent {...props} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('handles missing alt attribute', () => {
-    const noAltNode = {
-      ...mockNode,
-      attrs: {
-        ...mockNode.attrs,
-        alt: undefined,
-      },
-    };
-
-    const { container } = render(<ImageComponent {...defaultProps} node={noAltNode} />);
-    const img = container.querySelector('img');
-    expect(img).toBeInTheDocument();
-  });
-
-  it('passes editor to imageHandling onDone when Done is clicked', async () => {
-    const { getByTestId } = render(<ImageComponent {...defaultProps} selected={true} />);
-
-    await waitFor(() => {
-      expect(getByTestId('done-button')).toBeInTheDocument();
-    });
-
-    fireEvent.click(getByTestId('done-button'));
-
-    expect(mockOptions.imageHandling.onDone).toHaveBeenCalledWith(mockEditor);
-  });
-});