@pie-lib/editable-html-tip-tap 1.2.0-next.9 → 2.0.1

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

@@ -35,21 +35,36 @@ jest.mock('../custom-toolbar-wrapper', () => ({
 }));
 
 describe('ImageComponent', () => {
-  const mockEditor = {
+  const MOCK_NODE_POS = 7;
+
+  const createMockEditor = (selection = { from: 0, to: 1 }) => ({
+    _tiptapContainerEl: document.body,
     commands: {
       updateAttributes: jest.fn(),
       focus: jest.fn(),
     },
     state: {
-      selection: {
-        from: 0,
-        to: 1,
+      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,
@@ -78,10 +93,16 @@ describe('ImageComponent', () => {
     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', () => {
@@ -184,9 +205,67 @@ describe('ImageComponent', () => {
     expect(root).toHaveStyle({ justifyContent: 'flex-end' });
   });
 
-  it('calls insertImageRequested on mount', () => {
-    render(<ImageComponent {...defaultProps} />);
-    expect(mockOptions.imageHandling.insertImageRequested).toHaveBeenCalled();
+  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 () => {
@@ -197,7 +276,12 @@ describe('ImageComponent', () => {
       fireEvent.click(centerButton);
     });
 
-    expect(mockEditor.commands.updateAttributes).toHaveBeenCalledWith('imageUploadNode', { alignment: 'center' });
+    expect(mockEditor.state.tr.setNodeMarkup).toHaveBeenCalledWith(
+      0,
+      undefined,
+      expect.objectContaining({ alignment: 'center' }),
+    );
+    expect(mockEditor.view.dispatch).toHaveBeenCalled();
   });
 
   it('toolbar is shown when selected', async () => {
@@ -246,4 +330,16 @@ describe('ImageComponent', () => {
     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,10 +1,15 @@
-import { ImageUploadNode } from '../image';
-
 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),
 }));
@@ -14,6 +19,19 @@ jest.mock('../image-component', () => ({
   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', () => {
@@ -67,7 +85,7 @@ describe('ImageUploadNode', () => {
 
       expect(Array.isArray(rules)).toBe(true);
       expect(rules).toHaveLength(1);
-      expect(rules[0]).toHaveProperty('tag', 'div[data-type="image-upload-node"]');
+      expect(rules[0]).toHaveProperty('tag', 'img[data-type="image-upload-node"]');
     });
   });
 
@@ -112,7 +130,8 @@ describe('ImageUploadNode', () => {
 
   describe('addCommands', () => {
     it('returns setImageUploadNode command', () => {
-      const commands = ImageUploadNode.addCommands();
+      const context = { name: 'imageUploadNode' };
+      const commands = ImageUploadNode.addCommands.call(context);
 
       expect(commands).toHaveProperty('setImageUploadNode');
       expect(typeof commands.setImageUploadNode).toBe('function');
@@ -124,13 +143,95 @@ describe('ImageUploadNode', () => {
       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);
+    });
+  });
 
-      expect(mockCommands.insertContent).toHaveBeenCalledWith({
-        type: 'imageUploadNode',
+  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();
+            }
+          });
+        };
       });
-      expect(result).toBe(true);
+    });
+
+    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,
+          }),
+        }),
+      );
     });
   });
 });

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

@@ -0,0 +1,348 @@
+import React from 'react';
+import { render, waitFor, fireEvent } from '@testing-library/react';
+import { MathNode, MathNodeView } from '../math';
+
+jest.mock('@tiptap/react', () => ({
+  NodeViewWrapper: ({ children, ...props }) => (
+    <div data-testid="node-view-wrapper" {...props}>
+      {children}
+    </div>
+  ),
+  ReactNodeViewRenderer: jest.fn((component) => component),
+}));
+
+jest.mock('react-dom', () => ({
+  ...jest.requireActual('react-dom'),
+  createPortal: (node) => node,
+}));
+
+jest.mock('@pie-lib/math-toolbar', () => {
+  const React = require('react');
+  return {
+    MathPreview: ({ latex }) => <div data-testid="math-preview">{latex}</div>,
+    MathToolbar: ({ latex, onChange, onDone }) => {
+      const [localLatex, setLocalLatex] = React.useState(latex);
+      return (
+        <div data-testid="math-toolbar">
+          <input
+            data-testid="math-input"
+            value={localLatex}
+            onChange={(e) => {
+              setLocalLatex(e.target.value);
+              onChange(e.target.value);
+            }}
+          />
+          <button data-testid="done-button" onClick={() => onDone(localLatex)}>
+            Done
+          </button>
+        </div>
+      );
+    },
+  };
+});
+
+jest.mock('@pie-lib/math-rendering', () => ({
+  wrapMath: (latex, wrapper) => latex,
+}));
+
+jest.mock('@tiptap/core', () => ({
+  Node: {
+    create: jest.fn((config) => config),
+  },
+}));
+
+jest.mock('prosemirror-state', () => ({
+  Plugin: jest.fn(function (config) {
+    return config;
+  }),
+  PluginKey: jest.fn(function (key) {
+    this.key = key;
+  }),
+  TextSelection: {
+    create: jest.fn((doc, pos) => ({ type: 'text', pos })),
+  },
+  NodeSelection: {
+    create: jest.fn((doc, pos) => ({ type: 'node', pos })),
+  },
+}));
+
+describe('MathNode', () => {
+  describe('configuration', () => {
+    it('has correct name', () => {
+      expect(MathNode.name).toBe('math');
+    });
+
+    it('is inline', () => {
+      expect(MathNode.inline).toBe(true);
+    });
+
+    it('is in inline group', () => {
+      expect(MathNode.group).toBe('inline');
+    });
+
+    it('is atomic', () => {
+      expect(MathNode.atom).toBe(true);
+    });
+  });
+
+  describe('addAttributes', () => {
+    it('returns required attributes', () => {
+      const attributes = MathNode.addAttributes();
+
+      expect(attributes).toHaveProperty('latex');
+      expect(attributes).toHaveProperty('wrapper');
+      expect(attributes).toHaveProperty('html');
+
+      expect(attributes.latex).toEqual({ default: '' });
+      expect(attributes.wrapper).toEqual({ default: null });
+      expect(attributes.html).toEqual({ default: null });
+    });
+  });
+
+  describe('parseHTML', () => {
+    it('returns parsing rules for latex', () => {
+      const rules = MathNode.parseHTML();
+
+      expect(Array.isArray(rules)).toBe(true);
+      expect(rules).toHaveLength(2);
+      expect(rules[0]).toHaveProperty('tag', 'span[data-latex]');
+    });
+
+    it('returns parsing rules for mathml', () => {
+      const rules = MathNode.parseHTML();
+      expect(rules[1]).toHaveProperty('tag', 'span[data-type="mathml"]');
+    });
+  });
+
+  describe('renderHTML', () => {
+    it('renders mathml when html attribute is present', () => {
+      const result = MathNode.renderHTML({
+        HTMLAttributes: {
+          html: '<math><mi>x</mi></math>',
+        },
+      });
+
+      expect(result[0]).toBe('span');
+      expect(result[1]).toHaveProperty('data-type', 'mathml');
+    });
+
+    it('renders latex when html attribute is not present', () => {
+      const result = MathNode.renderHTML({
+        HTMLAttributes: {
+          latex: 'x^2',
+        },
+      });
+
+      expect(result[0]).toBe('span');
+      expect(result[1]).toHaveProperty('data-latex', '');
+      expect(result[1]).toHaveProperty('data-raw', 'x^2');
+    });
+  });
+
+  describe('addCommands', () => {
+    it('returns insertMath command', () => {
+      const commands = MathNode.addCommands();
+
+      expect(commands).toHaveProperty('insertMath');
+      expect(typeof commands.insertMath).toBe('function');
+    });
+  });
+
+  describe('addNodeView', () => {
+    it('returns ReactNodeViewRenderer result', () => {
+      const result = MathNode.addNodeView();
+
+      expect(result).toBeDefined();
+    });
+  });
+});
+
+describe('MathNodeView', () => {
+  const createMockEditor = () => ({
+    state: {
+      selection: {
+        from: 0,
+        to: 1,
+      },
+      tr: {
+        setSelection: jest.fn().mockReturnThis(),
+      },
+      doc: {},
+    },
+    view: {
+      coordsAtPos: jest.fn(() => ({ top: 100, left: 50 })),
+      dispatch: jest.fn(),
+    },
+    commands: {
+      focus: jest.fn(),
+    },
+    instanceId: 'editor-123',
+    _toolbarOpened: false,
+  });
+
+  const mockNode = {
+    attrs: {
+      latex: 'x^2',
+    },
+  };
+
+  let defaultProps;
+
+  beforeAll(() => {
+    Object.defineProperty(document.body, 'getBoundingClientRect', {
+      value: jest.fn(() => ({ top: 0, left: 0 })),
+      configurable: true,
+    });
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    defaultProps = {
+      node: mockNode,
+      updateAttributes: jest.fn(),
+      editor: createMockEditor(),
+      selected: false,
+      options: {},
+    };
+  });
+
+  it('renders without crashing', () => {
+    const { container } = render(<MathNodeView {...defaultProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders NodeViewWrapper', () => {
+    const { getByTestId } = render(<MathNodeView {...defaultProps} />);
+    expect(getByTestId('node-view-wrapper')).toBeInTheDocument();
+  });
+
+  it('displays math preview', () => {
+    const { getByTestId } = render(<MathNodeView {...defaultProps} />);
+    expect(getByTestId('math-preview')).toBeInTheDocument();
+  });
+
+  it('shows toolbar when selected', async () => {
+    const { getByTestId } = render(<MathNodeView {...defaultProps} selected={true} />);
+    await waitFor(() => {
+      expect(getByTestId('math-toolbar')).toBeInTheDocument();
+    });
+  });
+
+  it('does not show toolbar when not selected', () => {
+    const { queryByTestId } = render(<MathNodeView {...defaultProps} selected={false} />);
+    expect(queryByTestId('math-toolbar')).not.toBeInTheDocument();
+  });
+
+  it('adds data-toolbar-for attribute with editor instanceId', async () => {
+    const { container } = render(<MathNodeView {...defaultProps} selected={true} />);
+    await waitFor(() => {
+      const toolbar = container.querySelector('[data-toolbar-for]');
+      expect(toolbar).toHaveAttribute('data-toolbar-for', 'editor-123');
+    });
+  });
+
+  it('renders toolbar with correct position', async () => {
+    const { container } = render(<MathNodeView {...defaultProps} selected={true} />);
+    await waitFor(() => {
+      const toolbar = container.querySelector('[data-toolbar-for]');
+      expect(toolbar).toBeInTheDocument();
+    });
+  });
+
+  it('calls updateAttributes when latex changes', async () => {
+    const { getByTestId } = render(<MathNodeView {...defaultProps} selected={true} />);
+    await waitFor(() => {
+      const input = getByTestId('math-input');
+      fireEvent.change(input, { target: { value: 'y^2' } });
+    });
+    expect(defaultProps.updateAttributes).toHaveBeenCalledWith({ latex: 'y^2' });
+  });
+
+  it('closes toolbar and updates attributes when done', async () => {
+    const updateAttributes = jest.fn();
+    const { getByTestId } = render(
+      <MathNodeView {...defaultProps} updateAttributes={updateAttributes} selected={true} />,
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('done-button')).toBeInTheDocument();
+    });
+
+    const doneButton = getByTestId('done-button');
+    fireEvent.click(doneButton);
+
+    await waitFor(() => {
+      expect(updateAttributes).toHaveBeenCalledWith({ latex: 'x^2' });
+    });
+  });
+
+  it('sets editor._toolbarOpened when toolbar is shown', async () => {
+    const { getByTestId } = render(<MathNodeView {...defaultProps} selected={true} />);
+    await waitFor(() => {
+      expect(getByTestId('math-toolbar')).toBeInTheDocument();
+      expect(defaultProps.editor._toolbarOpened).toBe(true);
+    });
+  });
+
+  it('unsets editor._toolbarOpened when toolbar is closed', async () => {
+    const { getByTestId } = render(<MathNodeView {...defaultProps} selected={true} />);
+
+    await waitFor(() => {
+      expect(getByTestId('done-button')).toBeInTheDocument();
+    });
+
+    const doneButton = getByTestId('done-button');
+    fireEvent.click(doneButton);
+
+    await waitFor(() => {
+      expect(defaultProps.editor._toolbarOpened).toBe(false);
+    });
+  });
+
+  it('closes toolbar on outside click', async () => {
+    const { queryByTestId } = render(<MathNodeView {...defaultProps} selected={true} />);
+
+    await waitFor(() => {
+      expect(queryByTestId('math-toolbar')).toBeInTheDocument();
+    });
+
+    fireEvent.click(document.body);
+
+    await waitFor(() => {
+      expect(queryByTestId('math-toolbar')).not.toBeInTheDocument();
+    });
+  });
+
+  it('does not close toolbar when clicking equation editor dropdown', async () => {
+    const { queryByTestId } = render(<MathNodeView {...defaultProps} selected={true} />);
+
+    await waitFor(() => {
+      expect(queryByTestId('math-toolbar')).toBeInTheDocument();
+    });
+
+    // Simulate MUI Select's portal dropdown container.
+    const dropdown = document.createElement('div');
+    dropdown.id = 'equation-editor-select-listbox';
+    document.body.appendChild(dropdown);
+
+    fireEvent.click(dropdown);
+
+    await waitFor(() => {
+      expect(queryByTestId('math-toolbar')).toBeInTheDocument();
+    });
+
+    document.body.removeChild(dropdown);
+  });
+
+  it('renders with empty latex', () => {
+    const nodeWithEmptyLatex = { attrs: { latex: '' } };
+    const { getByTestId } = render(<MathNodeView {...defaultProps} node={nodeWithEmptyLatex} />);
+    expect(getByTestId('math-preview')).toBeInTheDocument();
+  });
+
+  it('has correct styling on NodeViewWrapper', () => {
+    const { getByTestId } = render(<MathNodeView {...defaultProps} />);
+    const wrapper = getByTestId('node-view-wrapper');
+    expect(wrapper).toHaveStyle({ display: 'inline-flex', cursor: 'pointer' });
+  });
+});