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

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

@@ -1,7 +1,12 @@
 import React from 'react';
 import { fireEvent, render, waitFor } from '@testing-library/react';
+import { renderMath } from '@pie-lib/math-rendering';
 import InlineDropdown from '../respArea/InlineDropdown';
 
+jest.mock('@pie-lib/math-rendering', () => ({
+  renderMath: jest.fn(),
+}));
+
 jest.mock('@tiptap/react', () => ({
   NodeViewWrapper: ({ children, ...props }) => (
     <div data-testid="node-view-wrapper" {...props}>
@@ -10,15 +15,27 @@ jest.mock('@tiptap/react', () => ({
   ),
 }));
 
+const mockCreatePortal = jest.fn((node) => node);
+
 jest.mock('react-dom', () => ({
   ...jest.requireActual('react-dom'),
-  createPortal: (node) => node,
+  createPortal: (...args) => mockCreatePortal(...args),
 }));
 
 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(),
+      setMeta: jest.fn(function setMeta() {
+        return mockTr;
+      }),
     };
     return {
       state: {
@@ -27,6 +44,7 @@ describe('InlineDropdown', () => {
           to: 1,
         },
         tr: mockTr,
+        doc: mockDoc,
       },
       view: {
         coordsAtPos: jest.fn(() => ({ top: 100, left: 50 })),
@@ -66,6 +84,7 @@ describe('InlineDropdown', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    mockCreatePortal.mockClear();
     mockEditor = buildMockEditor();
     defaultProps.editor = mockEditor;
     Object.defineProperty(document.body, 'getBoundingClientRect', {
@@ -90,6 +109,32 @@ describe('InlineDropdown', () => {
     expect(valueDiv).toBeInTheDocument();
   });
 
+  it('renders math inside the value control on mount', () => {
+    const { container } = render(<InlineDropdown {...defaultProps} />);
+    const valueDiv = container.querySelector('div[style*="border"]');
+
+    expect(renderMath).toHaveBeenCalledWith(valueDiv);
+  });
+
+  it('re-renders math when the value changes', () => {
+    const updatedNode = {
+      ...mockNode,
+      attrs: {
+        ...mockNode.attrs,
+        value: '<span>Updated math</span>',
+      },
+    };
+
+    const { container, rerender } = render(<InlineDropdown {...defaultProps} />);
+
+    renderMath.mockClear();
+
+    rerender(<InlineDropdown {...defaultProps} node={updatedNode} />);
+
+    const valueDiv = container.querySelector('div[style*="border"]');
+    expect(renderMath).toHaveBeenCalledWith(valueDiv);
+  });
+
   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"]');
@@ -171,6 +216,107 @@ describe('InlineDropdown', () => {
     });
   });
 
+  it('calls close callback when toolbar closes on outside click', async () => {
+    const onInlineDropdownToolbarClose = jest.fn();
+    const options = {
+      ...mockOptions,
+      onInlineDropdownToolbarClose,
+    };
+
+    const { queryByTestId } = render(<InlineDropdown {...defaultProps} options={options} selected={true} />);
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+
+    fireEvent.mouseDown(document.body);
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).not.toBeInTheDocument();
+    });
+
+    expect(onInlineDropdownToolbarClose).toHaveBeenCalledWith(mockEditor);
+  });
+
+  it('uses the current node when closing on outside click after the node prop changes', async () => {
+    const onToolbarCloseRequest = jest.fn((_tuple, _editor, onConfirm) => onConfirm());
+    const options = {
+      ...mockOptions,
+      onToolbarCloseRequest,
+    };
+    const updatedNode = {
+      attrs: { index: '1', value: 'Updated Option', error: false },
+      nodeSize: 1,
+    };
+
+    const { queryByTestId, rerender } = render(<InlineDropdown {...defaultProps} options={options} selected={true} />);
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+
+    rerender(<InlineDropdown {...defaultProps} options={options} node={updatedNode} selected={true} />);
+
+    fireEvent.mouseDown(document.body);
+
+    await waitFor(() => {
+      expect(onToolbarCloseRequest).toHaveBeenCalledWith(
+        [updatedNode, 5],
+        expect.anything(),
+        expect.any(Function),
+        expect.any(Function),
+      );
+    });
+  });
+
+  it('respects hold state for the current node after the node prop changes', async () => {
+    const updatedNode = {
+      attrs: { index: '1', value: 'Updated Option', error: false },
+      nodeSize: 1,
+    };
+
+    mockEditor._holdInlineDropdownToolbarIndex = '1';
+
+    const { queryByTestId, rerender } = render(<InlineDropdown {...defaultProps} selected={true} />);
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+
+    rerender(<InlineDropdown {...defaultProps} node={updatedNode} selected={true} />);
+
+    fireEvent.mouseDown(document.body);
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+  });
+
+  it('rebinds the outside-click listener when the node prop changes while the toolbar is open', async () => {
+    const addSpy = jest.spyOn(document, 'addEventListener');
+    const removeSpy = jest.spyOn(document, 'removeEventListener');
+    const updatedNode = { ...mockNode, attrs: { ...mockNode.attrs, value: 'Updated Option' } };
+
+    const { rerender } = render(<InlineDropdown {...defaultProps} selected={true} />);
+
+    await waitFor(() => {
+      expect(addSpy).toHaveBeenCalledWith('mousedown', expect.any(Function));
+    });
+
+    const removeCallsBeforeRerender = removeSpy.mock.calls.filter(([type]) => type === 'mousedown').length;
+
+    rerender(<InlineDropdown {...defaultProps} node={updatedNode} selected={true} />);
+
+    await waitFor(() => {
+      const removeCallsAfterRerender = removeSpy.mock.calls.filter(([type]) => type === 'mousedown').length;
+      expect(removeCallsAfterRerender).toBeGreaterThan(removeCallsBeforeRerender);
+      expect(addSpy).toHaveBeenCalledWith('mousedown', expect.any(Function));
+    });
+
+    addSpy.mockRestore();
+    removeSpy.mockRestore();
+  });
+
   it('has correct border styling', () => {
     const { container } = render(<InlineDropdown {...defaultProps} />);
     const dropdownDiv = container.querySelector('div[style*="border"]');
@@ -200,14 +346,29 @@ describe('InlineDropdown', () => {
     expect(textContainer).toHaveStyle({ textOverflow: 'ellipsis', whiteSpace: 'nowrap' });
   });
 
-  it('renders toolbar with z-index', async () => {
-    const { container } = render(<InlineDropdown {...defaultProps} selected={true} />);
+  it('portals toolbar into editor container when _tiptapContainerEl is set', async () => {
+    const containerEl = document.createElement('div');
+    const editor = buildMockEditor({ _tiptapContainerEl: containerEl });
+
+    render(<InlineDropdown {...defaultProps} editor={editor} selected={true} />);
+
+    await waitFor(() => {
+      expect(mockCreatePortal).toHaveBeenCalled();
+    });
+
+    expect(mockCreatePortal.mock.calls[0][1]).toBe(containerEl);
+  });
+
+  it('portals toolbar into document.body when _tiptapContainerEl is missing', async () => {
+    const editor = buildMockEditor({ _tiptapContainerEl: undefined });
+
+    render(<InlineDropdown {...defaultProps} editor={editor} selected={true} />);
+
     await waitFor(() => {
-      const toolbarContainer = container.querySelector('div[style*="zIndex"]');
-      if (toolbarContainer) {
-        expect(toolbarContainer).toHaveStyle({ zIndex: '1' });
-      }
+      expect(mockCreatePortal).toHaveBeenCalled();
     });
+
+    expect(mockCreatePortal.mock.calls[0][1]).toBe(document.body);
   });
 
   it('passes editorCallback to InlineDropdownToolbar', async () => {
@@ -356,6 +517,20 @@ describe('InlineDropdown', () => {
     expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
   });
 
+  it('does not close toolbar when clicking the page scrollbar (documentElement)', async () => {
+    const { queryByTestId } = render(<InlineDropdown {...defaultProps} selected={true} />);
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+
+    fireEvent.mouseDown(document.documentElement);
+
+    await waitFor(() => {
+      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();
@@ -373,7 +548,9 @@ describe('InlineDropdown', () => {
     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.view.dispatch).toHaveBeenCalledTimes(2);
+    expect(mockEditor.view.dispatch).toHaveBeenNthCalledWith(1, mockEditor.state.tr);
+    expect(mockEditor.view.dispatch).toHaveBeenNthCalledWith(2, mockEditor.state.tr);
     expect(mockEditor._toolbarOpened).toBe(false);
     expect(mockEditor.commands.focus).toHaveBeenCalled();
   });

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

@@ -20,6 +20,7 @@ jest.mock('@tiptap/react', () => ({
         })),
       })),
       getAttributes: jest.fn(() => ({ border: '1' })),
+      commandManager: {},
       isFocused: true,
       state: {
         selection: {},

package/src/components/common/toolbar-buttons.jsx

@@ -12,6 +12,11 @@ const StyledButton = styled('button', {
   background: 'none',
   border: 'none',
   cursor: disabled ? 'not-allowed' : 'pointer',
+  // previously we had implicit 24×24 icon rendering for mui svg icons, but now we need to explicitly set the size to 24×24 to match the previous behavior
+  '& svg': {
+    width: '24px',
+    height: '24px',
+  },
   '&:hover': {
     color: disabled ? 'grey' : 'black',
   },

package/src/components/respArea/ExplicitConstructedResponse.jsx

@@ -3,6 +3,7 @@ import { NodeViewWrapper } from '@tiptap/react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import CustomToolbarWrapper from '../../extensions/custom-toolbar-wrapper';
+import { setToolbarOpened } from '../../utils/toolbar';
 
 const ExplicitConstructedResponse = (props) => {
   const { editor, node, getPos, options, selected } = props;
@@ -110,7 +111,7 @@ const ExplicitConstructedResponse = (props) => {
                   tr.delete(pos, pos + node.nodeSize);
                   // Prevent the debounced onBlur/onDone from firing into the
                   // now-deleted node's stale position
-                  editor._toolbarOpened = false;
+                  setToolbarOpened(editor, false);
                   editor.view.dispatch(tr);
                   setShowToolbar(false);
                   editor.commands.focus();

package/src/components/respArea/InlineDropdown.jsx

@@ -1,23 +1,87 @@
 import React, { useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { renderMath } from '@pie-lib/math-rendering';
 import PropTypes from 'prop-types';
 import { NodeViewWrapper } from '@tiptap/react';
+import { NodeSelection } from 'prosemirror-state';
 import { Chevron } from '../icons/RespArea';
-import ReactDOM from 'react-dom';
 import CustomToolbarWrapper from '../../extensions/custom-toolbar-wrapper';
+import { setToolbarOpened } from '../../utils/toolbar';
 
 const InlineDropdown = (props) => {
   const { editor, node, getPos, options, selected } = props;
   const { attrs: attributes } = node;
   const { value, error } = attributes;
-  // TODO: Investigate
-  // Needed because items with values inside have different positioning for some reason
   const html = value || '<div>&nbsp</div>';
   const pos = getPos();
   const toolbarRef = useRef(null);
   const toolbarEditor = useRef(null);
+  const pendingCloseRequest = useRef(false);
+  const elementRef = useRef(null);
+
+  const isHeld = () =>
+    editor._holdInlineDropdownToolbarIndex != null &&
+    String(editor._holdInlineDropdownToolbarIndex) === String(node.attrs.index);
+
   const [showToolbar, setShowToolbar] = useState(false);
   const [position, setPosition] = useState({ top: 0, left: 0 });
-  const InlineDropdownToolbar = options.respAreaToolbar([node, pos], editor, () => {});
+
+  const closeToolbar = () => {
+    if (isHeld()) {
+      return;
+    }
+
+    setShowToolbar(false);
+    options.onInlineDropdownToolbarClose?.(editor);
+  };
+
+  const InlineDropdownToolbar = options.respAreaToolbar([node, pos], editor, closeToolbar);
+
+  const reselectNode = () => {
+    const { tr } = editor.state;
+    const nodeAtPos = tr.doc.nodeAt(pos);
+
+    if (!nodeAtPos) {
+      return;
+    }
+
+    const { selection } = tr;
+
+    if (selection.from === pos && selection.to === pos + nodeAtPos.nodeSize) {
+      return;
+    }
+
+    tr.setSelection(NodeSelection.create(tr.doc, pos));
+    editor.view.dispatch(tr);
+  };
+
+  const requestClose = () => {
+    if (pendingCloseRequest.current) {
+      return;
+    }
+
+    if (options.onToolbarCloseRequest) {
+      pendingCloseRequest.current = true;
+
+      options.onToolbarCloseRequest(
+        [node, pos],
+        editor,
+        () => {
+          pendingCloseRequest.current = false;
+          delete editor._holdInlineDropdownToolbarIndex;
+          closeToolbar();
+        },
+        () => {
+          pendingCloseRequest.current = false;
+          delete editor._holdInlineDropdownToolbarIndex;
+          setShowToolbar(true);
+          setTimeout(reselectNode, 0);
+        },
+      );
+    } else {
+      closeToolbar();
+    }
+  };
 
   useEffect(() => {
     const { selection } = editor.state;
@@ -25,13 +89,24 @@ const InlineDropdown = (props) => {
 
     if (selected) {
       if (onlyThisNodeSelected) {
-        setShowToolbar(selected);
+        setShowToolbar(true);
       }
-    } else {
-      setShowToolbar(selected);
+    } else if (showToolbar) {
+      requestClose();
     }
   }, [editor, node, selected]);
 
+  const isScrollbarClicked = (event) =>
+    event.clientX > document.documentElement.clientWidth ||
+    event.clientY > document.documentElement.clientHeight ||
+    event.target === document.documentElement;
+
+  useEffect(() => {
+    if (elementRef.current && typeof renderMath === 'function') {
+      renderMath(elementRef.current);
+    }
+  }, [value]);
+
   useEffect(() => {
     // Calculate position relative to selection
     const bodyRect = document.body.getBoundingClientRect();
@@ -44,16 +119,21 @@ const InlineDropdown = (props) => {
     });
 
     const handleClickOutside = (event) => {
+      if (isScrollbarClicked(event)) {
+        return;
+      }
+
       const insideSomeEditor = event.target.closest('[data-toolbar-for]');
 
       if (
-        (!insideSomeEditor || insideSomeEditor.dataset.toolbarFor !== toolbarEditor.current.instanceId) &&
+        !event.target.closest('[data-inline-dropdown-toolbar]') &&
+        (!insideSomeEditor || insideSomeEditor.dataset.toolbarFor !== toolbarEditor.current?.instanceId) &&
         !editor._toolbarOpened &&
         toolbarRef.current &&
         !toolbarRef.current.contains(event.target) &&
         !event.target.closest('[data-inline-node]')
       ) {
-        setShowToolbar(false);
+        requestClose();
       }
     };
 
@@ -64,7 +144,7 @@ const InlineDropdown = (props) => {
     }
 
     return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [showToolbar]);
+  }, [showToolbar, node]);
 
   return (
     <NodeViewWrapper
@@ -77,6 +157,7 @@ const InlineDropdown = (props) => {
       }}
     >
       <div
+        ref={elementRef}
         style={{
           display: 'inline-flex',
           minWidth: '178px',
@@ -105,31 +186,22 @@ const InlineDropdown = (props) => {
               display: 'inline-block',
               verticalAlign: 'middle',
             }}
-            dangerouslySetInnerHTML={{
-              __html: html,
-            }}
+            dangerouslySetInnerHTML={{ __html: html }}
           />
         </div>
-        <Chevron
-          direction="down"
-          style={{
-            position: 'absolute',
-            top: '5px',
-            right: '5px',
-          }}
-        />
+        <Chevron direction="down" style={{ position: 'absolute', top: '5px', right: '5px' }} />
       </div>
       {showToolbar && (
         <React.Fragment>
           {ReactDOM.createPortal(
-            <div ref={toolbarRef} style={{ zIndex: 1 }}>
+            <div ref={toolbarRef}>
               <InlineDropdownToolbar
                 editorCallback={(instance) => {
                   toolbarEditor.current = instance;
                 }}
               />
             </div>,
-            document.body,
+            editor?._tiptapContainerEl || document.body,
           )}
 
           {editor._tiptapContainerEl &&
@@ -144,7 +216,8 @@ const InlineDropdown = (props) => {
                   tr.delete(pos, pos + node.nodeSize);
                   // Prevent the debounced onBlur/onDone from firing into the
                   // now-deleted node's stale position
-                  editor._toolbarOpened = false;
+                  setToolbarOpened(editor, false);
+                  delete editor._holdInlineDropdownToolbarIndex;
                   editor.view.dispatch(tr);
                   setShowToolbar(false);
                   editor.commands.focus();

package/src/components/respArea/inlineDropdownUtils.js

@@ -0,0 +1,79 @@
+import { NodeSelection } from 'prosemirror-state';
+
+export const HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX = '_holdInlineDropdownToolbarIndex';
+
+export const findInlineDropdownPos = (editor, index) => {
+    let foundPos = null;
+
+    editor.state.doc.descendants((n, p) => {
+        if (n.type?.name === 'inline_dropdown' && String(n.attrs?.index) === String(index)) {
+            foundPos = p;
+            return false;
+        }
+
+        return true;
+    });
+
+    return foundPos;
+};
+
+export const holdInlineDropdownToolbar = (editor, index) => {
+    editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX] = index;
+};
+
+export const releaseInlineDropdownToolbarHold = (editor) => {
+    delete editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX];
+};
+
+export const isInlineDropdownToolbarHeld = (editor, index) =>
+    editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX] != null &&
+    String(editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX]) === String(index);
+
+export const selectInlineDropdownNode = (editor, index, fallbackPos) => {
+    const pos = findInlineDropdownPos(editor, index) ?? fallbackPos;
+
+    if (pos == null) {
+        return null;
+    }
+
+    const { tr } = editor.state;
+    const nodeAtPos = tr.doc.nodeAt(pos);
+
+    if (!nodeAtPos) {
+        return null;
+    }
+
+    const { selection } = tr;
+
+    if (selection.from === pos && selection.to === pos + nodeAtPos.nodeSize) {
+        return pos;
+    }
+
+    tr.setSelection(NodeSelection.create(tr.doc, pos));
+    editor.view.dispatch(tr);
+
+    return pos;
+};
+
+export const deleteInlineDropdownByIndex = (editor, index, fallbackPos) => {
+    const pos = findInlineDropdownPos(editor, index) ?? fallbackPos;
+
+    if (pos == null) {
+        releaseInlineDropdownToolbarHold(editor);
+        return false;
+    }
+
+    const { tr } = editor.state;
+    const nodeAtPos = tr.doc.nodeAt(pos);
+
+    if (!nodeAtPos) {
+        releaseInlineDropdownToolbarHold(editor);
+        return false;
+    }
+
+    tr.delete(pos, pos + nodeAtPos.nodeSize);
+    editor.view.dispatch(tr);
+    releaseInlineDropdownToolbarHold(editor);
+
+    return true;
+};

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

@@ -39,6 +39,7 @@ describe('ImageComponent', () => {
 
   const createMockEditor = (selection = { from: 0, to: 1 }) => ({
     _tiptapContainerEl: document.body,
+    isEditable: true,
     commands: {
       updateAttributes: jest.fn(),
       focus: jest.fn(),