@pie-lib/editable-html-tip-tap 2.1.1 → 2.1.2-next.0

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

@@ -1,345 +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,
-    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);
-  });
-});

package/src/extensions/__tests__/image.test.js

@@ -1,237 +0,0 @@
-jest.mock('@tiptap/core', () => ({
-  Node: { create: jest.fn((config) => config) },
-  mergeAttributes: jest.fn((...args) => Object.assign({}, ...args)),
-}));
-
-jest.mock('@tiptap/pm/state', () => ({
-  Plugin: jest.fn(function MockPlugin(spec) {
-    this.spec = spec;
-    return { spec };
-  }),
-}));
-
-jest.mock('@tiptap/react', () => ({
-  ReactNodeViewRenderer: jest.fn((component) => component),
-}));
-
-jest.mock('../image-component', () => ({
-  __esModule: true,
-  default: jest.fn(() => <div data-testid="image-component" />),
-}));
-
-import { Plugin } from '@tiptap/pm/state';
-import { ImageUploadNode } from '../image';
-
-function setupPastePlugin() {
-  const insertContent = jest.fn();
-  const editor = { commands: { insertContent } };
-  Plugin.mockClear();
-  ImageUploadNode.addProseMirrorPlugins.call({ editor });
-  expect(Plugin).toHaveBeenCalledTimes(1);
-  const handlePaste = Plugin.mock.calls[0][0].props.handlePaste;
-  return { handlePaste, insertContent, editor };
-}
-
-describe('ImageUploadNode', () => {
-  describe('configuration', () => {
-    it('has correct name', () => {
-      expect(ImageUploadNode.name).toBe('imageUploadNode');
-    });
-
-    it('is in block group', () => {
-      expect(ImageUploadNode.group).toBe('block');
-    });
-
-    it('is atomic', () => {
-      expect(ImageUploadNode.atom).toBe(true);
-    });
-
-    it('is selectable', () => {
-      expect(ImageUploadNode.selectable).toBe(true);
-    });
-
-    it('is draggable', () => {
-      expect(ImageUploadNode.draggable).toBe(true);
-    });
-  });
-
-  describe('addAttributes', () => {
-    it('returns all required attributes with defaults', () => {
-      const attributes = ImageUploadNode.addAttributes();
-
-      expect(attributes).toHaveProperty('loaded');
-      expect(attributes).toHaveProperty('deleteStatus');
-      expect(attributes).toHaveProperty('alignment');
-      expect(attributes).toHaveProperty('percent');
-      expect(attributes).toHaveProperty('width');
-      expect(attributes).toHaveProperty('height');
-      expect(attributes).toHaveProperty('src');
-      expect(attributes).toHaveProperty('alt');
-
-      expect(attributes.loaded).toEqual({ default: false });
-      expect(attributes.deleteStatus).toEqual({ default: null });
-      expect(attributes.alignment).toEqual({ default: null });
-      expect(attributes.percent).toEqual({ default: null });
-      expect(attributes.width).toEqual({ default: null });
-      expect(attributes.height).toEqual({ default: null });
-      expect(attributes.src).toEqual({ default: null });
-      expect(attributes.alt).toEqual({ default: null });
-    });
-  });
-
-  describe('parseHTML', () => {
-    it('returns array with div selector', () => {
-      const rules = ImageUploadNode.parseHTML();
-
-      expect(Array.isArray(rules)).toBe(true);
-      expect(rules).toHaveLength(1);
-      expect(rules[0]).toHaveProperty('tag', 'img[data-type="image-upload-node"]');
-    });
-  });
-
-  describe('renderHTML', () => {
-    it('renders img tag with data-type attribute', () => {
-      const HTMLAttributes = {
-        src: 'test.jpg',
-        width: 100,
-        height: 100,
-      };
-
-      const result = ImageUploadNode.renderHTML({ HTMLAttributes });
-
-      expect(result[0]).toBe('img');
-      expect(result[1]).toEqual({
-        ...HTMLAttributes,
-        'data-type': 'image-upload-node',
-      });
-    });
-
-    it('merges attributes correctly', () => {
-      const HTMLAttributes = {
-        src: 'test.jpg',
-        alt: 'Test image',
-      };
-
-      const result = ImageUploadNode.renderHTML({ HTMLAttributes });
-
-      expect(result[1].src).toBe('test.jpg');
-      expect(result[1].alt).toBe('Test image');
-      expect(result[1]['data-type']).toBe('image-upload-node');
-    });
-  });
-
-  describe('addNodeView', () => {
-    it('returns ReactNodeViewRenderer result', () => {
-      const result = ImageUploadNode.addNodeView();
-
-      expect(result).toBeDefined();
-    });
-  });
-
-  describe('addCommands', () => {
-    it('returns setImageUploadNode command', () => {
-      const context = { name: 'imageUploadNode' };
-      const commands = ImageUploadNode.addCommands.call(context);
-
-      expect(commands).toHaveProperty('setImageUploadNode');
-      expect(typeof commands.setImageUploadNode).toBe('function');
-    });
-
-    it('setImageUploadNode inserts content', () => {
-      const context = { name: 'imageUploadNode' };
-      const commands = ImageUploadNode.addCommands.call(context);
-      const mockCommands = {
-        insertContent: jest.fn(() => true),
-      };
-      const result = commands.setImageUploadNode()({ commands: mockCommands });
-      expect(mockCommands.insertContent).toHaveBeenCalledWith(
-        expect.objectContaining({
-          type: 'imageUploadNode',
-          attrs: expect.objectContaining({ nodeKey: expect.any(String) }),
-        }),
-      );
-      expect(result).toBe(true);
-    });
-  });
-
-  describe('addProseMirrorPlugins', () => {
-    const mockView = {};
-
-    beforeEach(() => {
-      jest.spyOn(global, 'FileReader').mockImplementation(function MockFileReader() {
-        this.readAsDataURL = function readAsDataURL() {
-          this.result = 'data:image/png;base64,Zm9v';
-          queueMicrotask(() => {
-            if (this.onload) {
-              this.onload();
-            }
-          });
-        };
-      });
-    });
-
-    afterEach(() => {
-      global.FileReader.mockRestore();
-    });
-
-    it('registers one paste plugin', () => {
-      const insertContent = jest.fn();
-      const editor = { commands: { insertContent } };
-      Plugin.mockClear();
-      const plugins = ImageUploadNode.addProseMirrorPlugins.call({ editor });
-      expect(plugins).toHaveLength(1);
-      expect(Plugin).toHaveBeenCalledTimes(1);
-    });
-
-    it('handlePaste returns false when clipboard has no image file', () => {
-      const { handlePaste } = setupPastePlugin();
-      const event = {
-        clipboardData: {
-          items: [{ kind: 'string', type: 'text/plain', getAsFile: () => null }],
-        },
-      };
-      expect(handlePaste(mockView, event)).toBe(false);
-    });
-
-    it('handlePaste returns false when clipboardData is missing', () => {
-      const { handlePaste } = setupPastePlugin();
-      const event = {};
-      expect(handlePaste(mockView, event)).toBe(false);
-    });
-
-    it('handlePaste returns false when the file item has no file', () => {
-      const { handlePaste } = setupPastePlugin();
-      const event = {
-        clipboardData: {
-          items: [{ kind: 'file', type: 'image/png', getAsFile: () => null }],
-        },
-      };
-      expect(handlePaste(mockView, event)).toBe(false);
-    });
-
-    it('handlePaste returns true and inserts imageUploadNode with data URL after read', async () => {
-      const { handlePaste, insertContent } = setupPastePlugin();
-      const file = new File([new Uint8Array([1, 2, 3])], 'p.png', { type: 'image/png' });
-      const event = {
-        clipboardData: {
-          items: [{ kind: 'file', type: 'image/png', getAsFile: () => file }],
-        },
-      };
-
-      expect(handlePaste(mockView, event)).toBe(true);
-      expect(insertContent).not.toHaveBeenCalled();
-
-      await new Promise((resolve) => queueMicrotask(resolve));
-
-      expect(insertContent).toHaveBeenCalledWith(
-        expect.objectContaining({
-          type: 'imageUploadNode',
-          attrs: expect.objectContaining({
-            src: 'data:image/png;base64,Zm9v',
-            loaded: true,
-          }),
-        }),
-      );
-    });
-  });
-});