@pie-lib/editable-html-tip-tap 2.1.6 → 2.1.8

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

@@ -185,6 +185,85 @@ describe('InlineDropdown', () => {
     });
   });
 
+  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"]');

package/src/components/respArea/InlineDropdown.jsx

@@ -126,7 +126,7 @@ const InlineDropdown = (props) => {
     }
 
     return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [showToolbar]);
+  }, [showToolbar, node]);
 
   return (
     <NodeViewWrapper

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, waitFor, fireEvent } from '@testing-library/react';
+import { render, waitFor, fireEvent, act } from '@testing-library/react';
 import { EnsureTextAfterMathPlugin, MathNode, MathNodeView, ZeroWidthSpaceHandlingPlugin } from '../math';
 import * as toolbarUtils from '../../utils/toolbar';
 
@@ -390,6 +390,7 @@ describe('MathNodeView', () => {
       selection: {
         from: 0,
         to: 1,
+        node: { type: { name: 'math' } },
       },
       tr: {
         setSelection: jest.fn().mockReturnThis(),
@@ -467,30 +468,31 @@ describe('MathNodeView', () => {
   });
 
   describe('toolbar positioning', () => {
-    it('positions relative to the editor element using coordsAtPos', async () => {
+    it('positions relative to portal container using coordsAtPos', async () => {
       const { container } = render(<MathNodeView {...defaultProps} selected={true} />);
       await waitFor(() => {
         const toolbar = container.querySelector('[data-toolbar-for]');
         expect(toolbar).toBeInTheDocument();
-        expect(toolbar.style.top).toBe('140px');
+        expect(toolbar.style.top).toBe('100px');
         expect(toolbar.style.left).toBe('50px');
       });
     });
 
-    it('accounts for editor scroll offset when calculating toolbar position', async () => {
-      const editorElement = createEditorElement({ top: -200, left: 0, width: 600, height: 400 });
+    it('offsets position by portal container getBoundingClientRect', async () => {
+      const containerEl = document.createElement('div');
+      containerEl.getBoundingClientRect = jest.fn(() => ({ top: 100, left: 50, width: 600, height: 400 }));
 
       const editor = {
         ...defaultProps.editor,
-        options: { element: editorElement },
+        _tiptapContainerEl: containerEl,
       };
 
       const { container } = render(<MathNodeView {...defaultProps} editor={editor} selected={true} />);
       await waitFor(() => {
         const toolbar = container.querySelector('[data-toolbar-for]');
         expect(toolbar).toBeInTheDocument();
-        expect(toolbar.style.top).toBe('340px');
-        expect(toolbar.style.left).toBe('50px');
+        expect(toolbar.style.top).toBe('0px');
+        expect(toolbar.style.left).toBe('0px');
       });
     });
 
@@ -503,6 +505,15 @@ describe('MathNodeView', () => {
       });
     });
 
+    it('renders above other editor overlays with a high z-index', async () => {
+      const { container } = render(<MathNodeView {...defaultProps} selected={true} />);
+      await waitFor(() => {
+        const toolbar = container.querySelector('[data-toolbar-for]');
+        expect(toolbar).toBeInTheDocument();
+        expect(toolbar.style.zIndex).toBe('1000');
+      });
+    });
+
     it('updates position from coordsAtPos when selection changes', async () => {
       const editor = {
         ...defaultProps.editor,
@@ -517,11 +528,64 @@ describe('MathNodeView', () => {
       await waitFor(() => {
         const toolbar = container.querySelector('[data-toolbar-for]');
         expect(toolbar).toBeInTheDocument();
-        expect(toolbar.style.top).toBe('240px');
+        expect(toolbar.style.top).toBe('200px');
         expect(toolbar.style.left).toBe('150px');
       });
     });
 
+    it('clamps toolbar position to viewport margins', async () => {
+      const originalInnerHeight = window.innerHeight;
+      const originalInnerWidth = window.innerWidth;
+
+      Object.defineProperty(window, 'innerHeight', { configurable: true, writable: true, value: 200 });
+      Object.defineProperty(window, 'innerWidth', { configurable: true, writable: true, value: 300 });
+
+      const editor = {
+        ...defaultProps.editor,
+        view: {
+          ...defaultProps.editor.view,
+          coordsAtPos: jest.fn(() => ({ top: 190, left: 280, bottom: 195 })),
+          dispatch: jest.fn(),
+        },
+      };
+
+      const { container } = render(<MathNodeView {...defaultProps} editor={editor} selected={true} />);
+
+      let toolbar;
+      await waitFor(() => {
+        toolbar = container.querySelector('[data-toolbar-for]');
+        expect(toolbar).toBeInTheDocument();
+      });
+
+      Object.defineProperty(toolbar, 'offsetHeight', { configurable: true, value: 100 });
+      Object.defineProperty(toolbar, 'offsetWidth', { configurable: true, value: 150 });
+
+      await act(async () => {
+        window.dispatchEvent(new Event('resize'));
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+      });
+
+      await waitFor(() => {
+        expect(parseInt(toolbar.style.top, 10)).toBeLessThanOrEqual(200 - 100 - 8);
+        expect(parseInt(toolbar.style.left, 10)).toBeLessThanOrEqual(300 - 150 - 8);
+        expect(parseInt(toolbar.style.top, 10)).toBeGreaterThanOrEqual(8);
+        expect(parseInt(toolbar.style.left, 10)).toBeGreaterThanOrEqual(8);
+      });
+
+      Object.defineProperty(window, 'innerHeight', { configurable: true, writable: true, value: originalInnerHeight });
+      Object.defineProperty(window, 'innerWidth', { configurable: true, writable: true, value: originalInnerWidth });
+    });
+
+    it('attaches scroll and resize listeners while toolbar is open', async () => {
+      const addSpy = jest.spyOn(window, 'addEventListener');
+      render(<MathNodeView {...defaultProps} selected={true} />);
+      await waitFor(() => {
+        expect(addSpy).toHaveBeenCalledWith('scroll', expect.any(Function), true);
+        expect(addSpy).toHaveBeenCalledWith('resize', expect.any(Function));
+      });
+      addSpy.mockRestore();
+    });
+
     it('portals toolbar into _tiptapContainerEl when available', async () => {
       const containerEl = document.createElement('div');
       containerEl.getBoundingClientRect = jest.fn(() => ({ top: 0, left: 0, width: 600, height: 400 }));
@@ -648,6 +712,31 @@ describe('MathNodeView', () => {
     });
   });
 
+  it('re-registers click listener when node changes', async () => {
+    const addEventListenerSpy = jest.spyOn(document, 'addEventListener');
+    const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener');
+    const nodeA = { attrs: { latex: 'x^2' } };
+    const nodeB = { attrs: { latex: 'y^2' } };
+
+    const { rerender } = render(<MathNodeView {...defaultProps} node={nodeA} selected={true} />);
+
+    await waitFor(() => {
+      expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function));
+    });
+
+    const initialCallCount = addEventListenerSpy.mock.calls.length;
+
+    rerender(<MathNodeView {...defaultProps} node={nodeB} selected={true} />);
+
+    await waitFor(() => {
+      expect(removeEventListenerSpy).toHaveBeenCalled();
+      expect(addEventListenerSpy.mock.calls.length).toBeGreaterThan(initialCallCount);
+    });
+
+    addEventListenerSpy.mockRestore();
+    removeEventListenerSpy.mockRestore();
+  });
+
   it('does not close toolbar when clicking the math node preview', async () => {
     const { getByTestId, queryByTestId } = render(<MathNodeView {...defaultProps} selected={true} />);
 
@@ -724,6 +813,54 @@ describe('MathNodeView', () => {
     });
   });
 
+  describe('selection-based toolbar guard', () => {
+    it('opens toolbar when selected transitions to true and the editor has a NodeSelection on math', async () => {
+      const { queryByTestId, rerender } = render(<MathNodeView {...defaultProps} selected={false} />);
+      expect(queryByTestId('math-toolbar')).not.toBeInTheDocument();
+
+      rerender(<MathNodeView {...defaultProps} selected={true} />);
+      await waitFor(() => {
+        expect(queryByTestId('math-toolbar')).toBeInTheDocument();
+      });
+    });
+
+    it('does not open toolbar when selected briefly becomes true but editor selection has no node (Cmd+A / drag case)', async () => {
+      const editor = {
+        ...defaultProps.editor,
+        state: {
+          ...defaultProps.editor.state,
+          selection: { from: 0, to: 100 }, // no .node — TextSelection / AllSelection shape
+        },
+      };
+
+      const { queryByTestId, rerender } = render(
+        <MathNodeView {...defaultProps} editor={editor} selected={false} />,
+      );
+      rerender(<MathNodeView {...defaultProps} editor={editor} selected={true} />);
+
+      await act(async () => {});
+      expect(queryByTestId('math-toolbar')).not.toBeInTheDocument();
+    });
+
+    it('does not open toolbar when selected briefly becomes true but NodeSelection targets a non-math node', async () => {
+      const editor = {
+        ...defaultProps.editor,
+        state: {
+          ...defaultProps.editor.state,
+          selection: { from: 0, to: 1, node: { type: { name: 'image' } } },
+        },
+      };
+
+      const { queryByTestId, rerender } = render(
+        <MathNodeView {...defaultProps} editor={editor} selected={false} />,
+      );
+      rerender(<MathNodeView {...defaultProps} editor={editor} selected={true} />);
+
+      await act(async () => {});
+      expect(queryByTestId('math-toolbar')).not.toBeInTheDocument();
+    });
+  });
+
   it('does not close toolbar when clicking equation editor dropdown', async () => {
     const { queryByTestId } = render(<MathNodeView {...defaultProps} selected={true} />);
 

package/src/extensions/css.js

@@ -169,14 +169,27 @@ export const CSSMark = Mark.create({
   },
 
   parseHTML() {
-    // Any span with a class that matches one of allowed classes
+    // Any span with a class that matches one of allowed classes any span that carries a class attribute
+    // so that pre-existing spans are preserved when loading content
     return [
       {
         tag: 'span[class]',
         getAttrs: (el) => {
           const cls = el.getAttribute('class') || '';
-          const match = this.options.classes.find((name) => cls.includes(name));
-          return match ? { class: match } : false;
+
+          if (!cls) {
+            return false;
+          }
+
+          const allowedClasses = (this.options && this.options.classes) || [];
+
+          if (allowedClasses.length > 0) {
+            const match = this.options.classes.find((name) => cls.includes(name));
+
+            return match ? { class: match } : false;
+          }
+
+          return { class: cls };
         },
       },
     ];

package/src/extensions/math.js

@@ -23,7 +23,9 @@ export const EnsureTextAfterMathPlugin = (mathNodeName) =>
     key: ensureTextAfterMathPluginKey,
     appendTransaction: (transactions, oldState, newState) => {
       // Only act when the doc actually changed
-      if (!transactions.some((tr) => tr.docChanged)) return null;
+      if (!transactions.some((tr) => tr.docChanged)) {
+        return null;
+      }
 
       const tr = newState.tr;
       let changed = false;
@@ -202,6 +204,7 @@ export const MathNodeView = (props) => {
   const { node, updateAttributes, editor, selected, options } = props;
   const [showToolbar, setShowToolbar] = useState(selected);
   const toolbarRef = useRef(null);
+  const nodeRef = useRef(null);
   const timestamp = useRef(Date.now());
   const [position, setPosition] = useState({ top: 0, left: 0 });
   const { math: mathOptions = {} } = options || {};
@@ -232,28 +235,102 @@ export const MathNodeView = (props) => {
     editor.commands.focus();
   };
 
+  // Only open the toolbar when this node is *explicitly* selected
+  // via a NodeSelection — not when it's merely included in a broader
+  // TextSelection or AllSelection (e.g. click-drag across math, or Cmd+A).
   useEffect(() => {
-    if (selected) {
+    if (!selected) return;
+
+    const { selection } = editor.state;
+    const isNodeSelected = selection.node?.type?.name === 'math';
+
+    if (isNodeSelected) {
       setShowToolbar(true);
     }
-  }, [selected]);
+  }, [selected, editor]);
 
   useEffect(() => {
     setToolbarOpened(editor, selected || showToolbar);
   }, [editor, showToolbar, selected]);
 
   useEffect(() => {
-    // Calculate position relative to selection
-    const { from } = editor.state.selection;
-    const start = editor.view.coordsAtPos(from);
-    const editorDOM = editor.options.element;
-    const editorRect = editorDOM.getBoundingClientRect();
-
-    setPosition({
-      top: start.top - editorRect.top + 40, // shift above
-      left: start.left - editorRect.left,
+    if (!editor || !showToolbar) {
+      setPosition({ top: 0, left: 0 });
+      return;
+    }
+
+    // Clamp in viewport coordinates, then convert to portal-container-relative values
+    // for position: absolute (toolbar is portaled into _tiptapContainerEl or document.body).
+    const updatePosition = () => {
+      if (!toolbarRef.current) {
+        return;
+      }
+
+      const { from } = editor.state.selection;
+      const start = editor.view.coordsAtPos(from);
+      const nodeRect = nodeRef.current?.getBoundingClientRect?.();
+
+      // Anchor to the math node element when available; fall back to selection coords.
+      const anchorTop = nodeRect?.height ? nodeRect.top : start.top;
+      const anchorLeft = nodeRect?.width ? nodeRect.left : start.left;
+      const anchorBottom = nodeRect?.height ? nodeRect.bottom : (start.bottom ?? start.top);
+
+      const toolbarHeight = toolbarRef.current.offsetHeight;
+      const toolbarWidth = toolbarRef.current.offsetWidth;
+
+      const gap = 0;
+      const spaceBelow = window.innerHeight - (anchorBottom + gap);
+
+      // Place the toolbar's top-left corner directly below the anchor; flip above when needed.
+      let top = spaceBelow >= toolbarHeight ? anchorBottom + gap : anchorTop - toolbarHeight - gap;
+      let left = anchorLeft;
+
+      const margin = 8;
+      top = Math.max(margin, Math.min(top, window.innerHeight - toolbarHeight - margin));
+      left = Math.max(margin, Math.min(left, window.innerWidth - toolbarWidth - margin));
+
+      const portalEl = editor._tiptapContainerEl || document.body;
+      const containerRect = portalEl.getBoundingClientRect();
+
+      setPosition({
+        top: top - containerRect.top,
+        left: left - containerRect.left,
+      });
+    };
+
+    updatePosition();
+
+    let frame = null;
+    const scheduleUpdate = () => {
+      if (frame !== null) {
+        return;
+      }
+
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        updatePosition();
+      });
+    };
+
+    frame = requestAnimationFrame(() => {
+      frame = null;
+      updatePosition();
     });
 
+    window.addEventListener('scroll', scheduleUpdate, true);
+    window.addEventListener('resize', scheduleUpdate);
+
+    return () => {
+      if (frame !== null) {
+        cancelAnimationFrame(frame);
+      }
+
+      window.removeEventListener('scroll', scheduleUpdate, true);
+      window.removeEventListener('resize', scheduleUpdate);
+    };
+  }, [editor, showToolbar]);
+
+  useEffect(() => {
     const handleClickOutside = (event) => {
       const target = event?.target;
 
@@ -298,7 +375,7 @@ export const MathNodeView = (props) => {
     }
 
     return () => document.removeEventListener('click', handleClickOutside);
-  }, [editor, showToolbar]);
+  }, [editor, showToolbar, node]);
 
   return (
     <NodeViewWrapper
@@ -310,7 +387,7 @@ export const MathNodeView = (props) => {
       }}
       data-selected={selected}
     >
-      <div onClick={() => setShowToolbar(true)} contentEditable={false}>
+      <div ref={nodeRef} onClick={() => setShowToolbar(true)} contentEditable={false}>
         <MathPreview latex={latex} />
       </div>
       {showToolbar &&
@@ -322,7 +399,7 @@ export const MathNodeView = (props) => {
               position: 'absolute',
               top: `${position.top}px`,
               left: `${position.left}px`,
-              zIndex: 20,
+              zIndex: 1000,
               background: 'var(--editable-html-toolbar-bg, #efefef)',
               boxShadow:
                 '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',