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

package/src/components/CharacterPicker.jsx

@@ -78,25 +78,52 @@ export function CharacterPicker({ editor, opts, onClose }) {
   useEffect(() => {
     if (!editor) return;
 
-    // Calculate position relative to selection
     const editorDOM = editor.options.element;
-    const editorRect = editorDOM.getBoundingClientRect();
-    const bodyRect = document.body.getBoundingClientRect();
-    const { from } = editor.state.selection;
-    const start = editor.view.coordsAtPos(from);
+    const editorViewDom = editor.view.dom;
 
-    let top = editorRect.top + Math.abs(bodyRect.top) + editorRect.height + 60;
+    // Position is computed in viewport coordinates (the dialog uses position: fixed),
+    // so coordsAtPos / getBoundingClientRect values can be used directly without
+    // adding scroll offsets. The dialog is then clamped to the viewport so it does
+    // not get cut off by fixed page headers/footers.
+    const updatePosition = () => {
+      if (!containerRef.current) return;
 
-    if (editorRect.y > containerRef.current.offsetHeight) {
-      top = top - (containerRef.current.offsetHeight + editorRect.height) - 80;
-    }
+      const editorRect = editorDOM.getBoundingClientRect();
+      const { from } = editor.state.selection;
+      const start = editor.view.coordsAtPos(from);
 
-    setPosition({
-      top: top,
-      left: start.left,
-    });
+      const dialogHeight = containerRef.current.offsetHeight;
+      const dialogWidth = containerRef.current.offsetWidth;
 
-    const editorViewDom = editor.view.dom;
+      // prefer below the editor; flip above when there isn't room below.
+      const spaceBelow = window.innerHeight - (editorRect.bottom + 60);
+      let top =
+        spaceBelow >= dialogHeight || editorRect.top < dialogHeight + 80
+          ? editorRect.bottom + 60
+          : editorRect.top - dialogHeight - 20;
+
+      let left = start.left;
+
+      const margin = 8;
+      top = Math.max(margin, Math.min(top, window.innerHeight - dialogHeight - margin));
+      left = Math.max(margin, Math.min(left, window.innerWidth - dialogWidth - margin));
+
+      setPosition({ top, left });
+    };
+
+    updatePosition();
+
+    let frame = null;
+    const scheduleUpdate = () => {
+      if (frame !== null) return;
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        updatePosition();
+      });
+    };
+
+    window.addEventListener('scroll', scheduleUpdate, true);
+    window.addEventListener('resize', scheduleUpdate);
 
     const handleClickOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target) && !editorViewDom.contains(e.target)) {
@@ -110,6 +137,9 @@ export function CharacterPicker({ editor, opts, onClose }) {
 
     return () => {
       clearTimeout(timeoutId);
+      if (frame !== null) cancelAnimationFrame(frame);
+      window.removeEventListener('scroll', scheduleUpdate, true);
+      window.removeEventListener('resize', scheduleUpdate);
       document.removeEventListener('click', handleClickOutside);
     };
   }, [editor]);
@@ -131,11 +161,11 @@ export function CharacterPicker({ editor, opts, onClose }) {
           data-toolbar-for={editor.instanceId}
           style={{
             visibility: position.top === 0 && position.left === 0 ? 'hidden' : 'initial',
-            position: 'absolute',
+            position: 'fixed',
             top: `${position.top}px`,
             left: `${position.left}px`,
             maxWidth: '500px',
-            zIndex: 99,
+            zIndex: 1000,
           }}
         >
           <div>

package/src/components/MenuBar.jsx

@@ -107,6 +107,7 @@ function MenuBar({
         hideDefaultToolbar,
         hasTextSelectionInTable,
         isFocused: ctx.editor?.isFocused,
+        toolbarOpened: ctx.editor?._toolbarOpened ?? false,
         isBold: ctx.editor.isActive('bold') ?? false,
         canBold: ctx.editor.can().chain().toggleBold().run() ?? false,
         isTable: ctx.editor.isActive('table') ?? false,
@@ -148,7 +149,8 @@ function MenuBar({
     [classes.toolbarTop]: toolbarOpts.position === 'top',
     [classes.toolbarRight]: toolbarOpts.alignment === 'right',
     [classes.focused]:
-      toolbarOpts.alwaysVisible || (editorState.isFocused && !editor._toolbarOpened && !editorState.hideDefaultToolbar),
+      toolbarOpts.alwaysVisible ||
+      (editorState.isFocused && !editorState.toolbarOpened && !editorState.hideDefaultToolbar),
     [classes.autoWidth]: autoWidth,
     [classes.fullWidth]: !autoWidth,
     [classes.hidden]: toolbarOpts.isHidden === true,
@@ -436,7 +438,7 @@ const StyledMenuBar = (props) => {
   const classes = {
     defaultToolbar: 'defaultToolbar',
     buttonsContainer: 'buttonsContainer',
-    button: 'button',
+    button: 'toolbarButton',
     active: 'active',
     disabled: 'disabled',
     isActive: 'isActive',
@@ -471,7 +473,7 @@ const StyledMenuBarRoot = styled('div')(({ theme }) => ({
     display: 'flex',
     width: '100%',
   },
-  '& .button': {
+  '& .toolbarButton': {
     color: 'grey',
     display: 'inline-flex',
     padding: '2px',

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

@@ -234,7 +234,16 @@ describe('CharacterPicker', () => {
     };
     const { container } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
     const dialog = container.querySelector('.insert-character-dialog');
-    expect(dialog).toHaveStyle({ position: 'absolute' });
+    expect(dialog).toHaveStyle({ position: 'fixed' });
+  });
+
+  it('renders above other editor overlays with a high z-index', () => {
+    const opts = {
+      characters: [['á']],
+    };
+    const { container } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+    const dialog = container.querySelector('.insert-character-dialog');
+    expect(dialog).toHaveStyle({ zIndex: '1000' });
   });
 
   it('adds data-toolbar-for attribute with editor instanceId', () => {

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

@@ -19,6 +19,9 @@ describe('ExplicitConstructedResponse', () => {
   const buildMockEditor = (overrides = {}) => {
     const mockTr = {
       delete: jest.fn(),
+      setMeta: jest.fn(function setMeta() {
+        return mockTr;
+      }),
     };
     return {
       state: {
@@ -197,7 +200,9 @@ describe('ExplicitConstructedResponse', () => {
     const { findByLabelText } = render(<ExplicitConstructedResponse {...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__/InlineDropdown.test.jsx

@@ -10,9 +10,11 @@ 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', () => {
@@ -26,6 +28,9 @@ describe('InlineDropdown', () => {
       delete: jest.fn(),
       doc: { nodeAt: mockNodeAt },
       setSelection: jest.fn(),
+      setMeta: jest.fn(function setMeta() {
+        return mockTr;
+      }),
     };
     return {
       state: {
@@ -74,6 +79,7 @@ describe('InlineDropdown', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    mockCreatePortal.mockClear();
     mockEditor = buildMockEditor();
     defaultProps.editor = mockEditor;
     Object.defineProperty(document.body, 'getBoundingClientRect', {
@@ -208,14 +214,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 () => {
@@ -381,7 +402,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/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

@@ -5,6 +5,7 @@ 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;
@@ -174,14 +175,14 @@ const InlineDropdown = (props) => {
       {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 &&
@@ -196,7 +197,7 @@ 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);