@pie-lib/editable-html-tip-tap 1.2.0-next.11 → 1.2.0-next.13

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

@@ -184,4 +184,153 @@ describe('InlineDropdown', () => {
       }
     });
   });
+
+  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 = {
+      ...mockEditor,
+      _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();
+  });
 });

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

@@ -214,4 +214,36 @@ describe('StyledMenuBar', () => {
     toolbar?.dispatchEvent(event);
     expect(preventDefaultSpy).toHaveBeenCalled();
   });
+
+  it('calculates hasTextSelectionInTable correctly when selection is not empty in table', () => {
+    // This test verifies the hasTextSelectionInTable state computation
+    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['table', 'bold', 'italic']} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('hides table manipulation buttons when text is selected in table', () => {
+    // When hasTextSelectionInTable is true, table row/column buttons should be hidden
+    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['table']} />);
+    // The component should render but table manipulation buttons should be conditional
+    expect(container).toBeInTheDocument();
+  });
+
+  it('shows table manipulation buttons when no text is selected in table', () => {
+    // When hasTextSelectionInTable is false, table row/column buttons should be visible
+    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['table']} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('shows text formatting buttons regardless of table state', () => {
+    // Bold, italic, etc. should always be visible when their plugin is active
+    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['bold', 'italic', 'underline']} />);
+    const buttons = container.querySelectorAll('button');
+    expect(buttons.length).toBeGreaterThan(0);
+  });
+
+  it('does not hide text formatting buttons when in table', () => {
+    // Verify that the removal of "|| state.isTable" condition works correctly
+    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['table', 'bold', 'italic']} />);
+    expect(container).toBeInTheDocument();
+  });
 });

package/src/components/respArea/DragInTheBlank/DragInTheBlank.jsx

@@ -33,7 +33,11 @@ const DragDrop = (props) => {
 
   // console.log({nodeProps.children})
   return (
-    <NodeViewWrapper className="drag-in-the-blank" data-selected={selected}>
+    <NodeViewWrapper
+      className="drag-in-the-blank"
+      data-selected={selected}
+      style={{ display: 'inline', whiteSpace: 'normal' }}
+    >
       <span
         {...attributes}
         style={{
@@ -52,6 +56,7 @@ const DragDrop = (props) => {
           pos={pos}
           value={attributes}
           duplicates={options.duplicates}
+          selected={selected}
           onChange={(choice) => onValueChange(editor, node, pos, choice)}
           removeResponse={(choice) => onRemoveResponse(editor, node, choice)}
         ></DragDropTile>

package/src/components/respArea/DragInTheBlank/choice.jsx

@@ -15,7 +15,7 @@ const StyledContent = styled('span')(({ theme }) => ({
   },
 }));
 
-export function BlankContent({ n, children, isDragging, isOver, dragItem, value }) {
+export function BlankContent({ n, children, isDragging, isOver, dragItem, value, selected }) {
   const [hoveredElementSize, setHoveredElementSize] = useState(null);
   const elementRef = useRef(null);
 
@@ -56,15 +56,22 @@ export function BlankContent({ n, children, isDragging, isOver, dragItem, value
   const hasGrip = finalLabel !== '\u00A0';
   const isPreview = dragItem && isOver;
 
+  const borderStyle = selected
+    ? `2px solid ${color.primaryDark()}`
+    : isPreview
+      ? `1px solid ${color.defaults.BORDER_DARK}`
+      : `1px solid ${color.defaults.BORDER_LIGHT}`;
+
   return (
     <div
       ref={elementRef}
+      className={selected ? 'selected' : undefined}
       style={{
         display: 'inline-flex',
         minWidth: '178px',
         minHeight: '36px',
         background: isPreview ? `${color.defaults.BORDER_LIGHT}` : `${color.defaults.WHITE}`,
-        border: isPreview ? `1px solid  ${color.defaults.BORDER_DARK}` : `1px solid  ${color.defaults.BORDER_LIGHT}`,
+        border: borderStyle,
         boxSizing: 'border-box',
         borderRadius: '3px',
         overflow: 'hidden',
@@ -104,9 +111,21 @@ BlankContent.propTypes = {
   isOver: PropTypes.bool,
   dragItem: PropTypes.object,
   value: PropTypes.object,
+  selected: PropTypes.bool,
 };
 
-function DragDropChoice({ value, disabled, instanceId, children, n, onChange, removeResponse, duplicates, pos }) {
+function DragDropChoice({
+  value,
+  disabled,
+  instanceId,
+  children,
+  n,
+  onChange,
+  removeResponse,
+  duplicates,
+  pos,
+  selected,
+}) {
   const {
     attributes: dragAttributes,
     listeners: dragListeners,
@@ -196,7 +215,14 @@ function DragDropChoice({ value, disabled, instanceId, children, n, onChange, re
   };
 
   const dragContent = (
-    <BlankContent n={n} isDragging={isDragging} isOver={isOver} dragItem={dragItem?.data?.current} value={value}>
+    <BlankContent
+      n={n}
+      isDragging={isDragging}
+      isOver={isOver}
+      dragItem={dragItem?.data?.current}
+      value={value}
+      selected={selected}
+    >
       {children}
     </BlankContent>
   );
@@ -223,6 +249,7 @@ DragDropChoice.propTypes = {
   onChange: PropTypes.func.isRequired,
   removeResponse: PropTypes.func.isRequired,
   duplicates: PropTypes.bool,
+  selected: PropTypes.bool,
 };
 
 export default DragDropChoice;

package/src/components/respArea/InlineDropdown.jsx

@@ -12,6 +12,7 @@ const InlineDropdown = (props) => {
   // Needed because items with values inside have different positioning for some reason
   const html = value || '<div>&nbsp</div>';
   const toolbarRef = useRef(null);
+  const toolbarEditor = useRef(null);
   const [showToolbar, setShowToolbar] = useState(false);
   const [position, setPosition] = useState({ top: 0, left: 0 });
   const InlineDropdownToolbar = options.respAreaToolbar(node, editor, () => {});
@@ -41,7 +42,11 @@ const InlineDropdown = (props) => {
     });
 
     const handleClickOutside = (event) => {
+      const insideSomeEditor = event.target.closest('[data-toolbar-for]');
+
       if (
+        (!insideSomeEditor || insideSomeEditor.dataset.toolbarFor !== toolbarEditor.current.instanceId) &&
+        !editor._toolbarOpened &&
         toolbarRef.current &&
         !toolbarRef.current.contains(event.target) &&
         !event.target.closest('[data-inline-node]')
@@ -116,7 +121,11 @@ const InlineDropdown = (props) => {
       {showToolbar &&
         ReactDOM.createPortal(
           <div ref={toolbarRef} style={{ zIndex: 1 }}>
-            <InlineDropdownToolbar />
+            <InlineDropdownToolbar
+              editorCallback={(instance) => {
+                toolbarEditor.current = instance;
+              }}
+            />
           </div>,
           document.body,
         )}

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

@@ -0,0 +1,327 @@
+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).toHaveStyle({ position: 'absolute' });
+    });
+  });
+
+  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.mouseDown(document.body);
+
+    await waitFor(() => {
+      expect(queryByTestId('math-toolbar')).not.toBeInTheDocument();
+    });
+  });
+
+  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' });
+  });
+});