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

package/src/components/CharacterPicker.jsx

@@ -29,9 +29,12 @@ export function CharacterPicker({ editor, opts, onClose }) {
   }
 
   const containerRef = useRef(null);
+  const onCloseRef = useRef(onClose);
   const [position, setPosition] = useState({ top: 0, left: 0 });
   const [popover, setPopover] = useState(null);
 
+  onCloseRef.current = onClose;
+
   const configToUse = useMemo(() => {
     if (!opts) return spanishConfig;
 
@@ -69,31 +72,62 @@ export function CharacterPicker({ editor, opts, onClose }) {
     [],
   );
 
+  // Keep `onClose` out of the dependency array — parents often pass a new callback each
+  // render (e.g. after each keystroke), which would re-run this effect constantly. Use a
+  // ref so click-outside always calls the latest close handler.
   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: start.top + Math.abs(bodyRect.top) - containerRef.current.offsetHeight - 10 + additionalTopOffset, // shift above
-      top: top,
-      left: start.left,
-    });
+      const dialogHeight = containerRef.current.offsetHeight;
+      const dialogWidth = containerRef.current.offsetWidth;
+
+      // 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) && !editor.view.dom.contains(e.target)) {
-        onClose();
+      if (containerRef.current && !containerRef.current.contains(e.target) && !editorViewDom.contains(e.target)) {
+        onCloseRef.current();
       }
     };
 
@@ -103,9 +137,12 @@ 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, onClose]);
+  }, [editor]);
 
   const renderPopOver = (event, el) => setPopover({ anchorEl: event.currentTarget, el });
 
@@ -124,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/EditableHtml.jsx

@@ -120,6 +120,30 @@ export const EditableHtml = (props) => {
     ...toolbarOpts,
   };
 
+  const commitEditorContent = useCallback(
+    (editor) => {
+      const html = editor.getHTML();
+
+      if (props.markup !== html) {
+        props.onChange?.(html);
+      }
+
+      if (toolbarOptsToUse.doneOn === 'blur') {
+        props.onDone?.(html);
+      }
+    },
+    [props.markup, props.onChange, props.onDone, toolbarOptsToUse.doneOn],
+  );
+
+  const responseAreaPropsToUse = useMemo(
+    () => ({
+      ...defaultResponseAreaProps,
+      ...props.responseAreaProps,
+      onInlineDropdownToolbarClose: commitEditorContent,
+    }),
+    [props.responseAreaProps, commitEditorContent],
+  );
+
   const activePluginsToUse = useMemo(() => {
     let { customPlugins, ...otherPluginProps } = props.pluginProps || {};
 
@@ -143,14 +167,14 @@ export const EditableHtml = (props) => {
       toolbar: {},
       table: {},
       responseArea: {
-        type: props.responseAreaProps?.type,
+        type: responseAreaPropsToUse.type,
       },
       languageCharacters: props.languageCharactersProps,
       keyPadCharacterRef: {},
       setKeypadInteraction: {},
       media: {},
     });
-  }, [props]);
+  }, [props, responseAreaPropsToUse.type]);
 
   const extensions = [
     TextAlign.configure({
@@ -183,11 +207,11 @@ export const EditableHtml = (props) => {
     TableRow,
     ExtendedTableHeader,
     ExtendedTableCell,
-    ResponseAreaExtension.configure(props.responseAreaProps),
-    ExplicitConstructedResponseNode.configure(props.responseAreaProps),
-    DragInTheBlankNode.configure(props.responseAreaProps),
-    InlineDropdownNode.configure(props.responseAreaProps),
-    MathTemplatedNode.configure(props.responseAreaProps),
+    ResponseAreaExtension.configure(responseAreaPropsToUse),
+    ExplicitConstructedResponseNode.configure(responseAreaPropsToUse),
+    DragInTheBlankNode.configure(responseAreaPropsToUse),
+    InlineDropdownNode.configure(responseAreaPropsToUse),
+    MathTemplatedNode.configure(responseAreaPropsToUse),
     MathNode.configure({
       toolbarOpts: toolbarOptsToUse,
       math: props.pluginProps?.math || {},
@@ -219,7 +243,7 @@ export const EditableHtml = (props) => {
               let cb;
 
               if (scheduled && result) {
-                // finish editing only on success
+              // finish editing only on success
                 cb = props.onChange;
               }
 
@@ -288,29 +312,23 @@ export const EditableHtml = (props) => {
       editable: !props.disabled,
       content: normalizeInitialMarkup(props.markup),
       onUpdate: ({ editor, transaction }) => {
-        if (transaction.isDone || props.markup !== editor.getHTML()) {
+        if (transaction.isDone) {
           props.onChange?.(editor.getHTML());
         }
       },
-      onBlur: debounce(({ editor }) => {
+      onBlur: ({ editor }) => {
         const otherToolbarOpened =
           editor._insertingImage ||
           editor._toolbarOpened ||
           editor.isActive('inline_dropdown') ||
           editor.isActive('explicit_constructed_response');
 
-        if (otherToolbarOpened) {
+        if (otherToolbarOpened || !editor.schema) {
           return;
         }
 
-        if (props.markup !== editor.getHTML()) {
-          props.onChange?.(editor.getHTML());
-        }
-
-        if (toolbarOptsToUse.doneOn === 'blur') {
-          props.onDone?.(editor.getHTML());
-        }
-      }, 200),
+        commitEditorContent(editor);
+      },
     },
     [props.charactersLimit],
   );
@@ -332,7 +350,7 @@ export const EditableHtml = (props) => {
     const nextMarkup = normalizeInitialMarkup(props.markup);
 
     if (nextMarkup !== editor.getHTML()) {
-      editor.commands.setContent(nextMarkup, false);
+      editor.commands.setContent(nextMarkup, { emitUpdate: false });
     }
   }, [props.markup, editor]);
 
@@ -406,10 +424,12 @@ const StyledEditorContent = styled(EditorContent, {
     },
 
     // Out of flow so the caret stays at the start of the block; in-flow ::before pushes the caret after the hint text.
-    '& p.is-editor-empty, & div.is-editor-empty': {
+    // :only-child ensures the placeholder is hidden whenever the editor has other content (images, upload nodes, etc.)
+    // and covers the type+backspace edge case where Tiptap only adds is-empty (not is-editor-empty).
+    '& p[data-placeholder].is-empty:only-child, & div[data-placeholder].is-empty:only-child': {
       position: 'relative',
     },
-    '& p.is-editor-empty::before, & div.is-editor-empty::before': {
+    '& p[data-placeholder].is-empty:only-child::before, & div[data-placeholder].is-empty:only-child::before': {
       content: 'attr(data-placeholder)',
       position: 'absolute',
       left: 0,
@@ -428,7 +448,7 @@ const StyledEditorContent = styled(EditorContent, {
       },
     }),
     ...(separateParagraph && {
-      '& > div:has(+ div)': {
+      '& > p:has(+ p)': {
         marginBottom: '1em',
       },
     }),

package/src/components/MenuBar.jsx

@@ -86,6 +86,10 @@ function MenuBar({
 
       let currentNode;
 
+      if (!ctx.editor?.commandManager) {
+        return {};
+      }
+
       if (selection instanceof NodeSelection) {
         currentNode = selection.node; // the selected node
       }
@@ -103,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,
@@ -143,7 +148,9 @@ function MenuBar({
     [classes.toolbarWithNoDone]: !hasDoneButton,
     [classes.toolbarTop]: toolbarOpts.position === 'top',
     [classes.toolbarRight]: toolbarOpts.alignment === 'right',
-    [classes.focused]: toolbarOpts.alwaysVisible || (editorState.isFocused && !editor._toolbarOpened && !editorState.hideDefaultToolbar),
+    [classes.focused]:
+      toolbarOpts.alwaysVisible ||
+      (editorState.isFocused && !editorState.toolbarOpened && !editorState.hideDefaultToolbar),
     [classes.autoWidth]: autoWidth,
     [classes.fullWidth]: !autoWidth,
     [classes.hidden]: toolbarOpts.isHidden === true,
@@ -431,7 +438,7 @@ const StyledMenuBar = (props) => {
   const classes = {
     defaultToolbar: 'defaultToolbar',
     buttonsContainer: 'buttonsContainer',
-    button: 'button',
+    button: 'toolbarButton',
     active: 'active',
     disabled: 'disabled',
     isActive: 'isActive',
@@ -466,13 +473,18 @@ const StyledMenuBarRoot = styled('div')(({ theme }) => ({
     display: 'flex',
     width: '100%',
   },
-  '& .button': {
+  '& .toolbarButton': {
     color: 'grey',
     display: 'inline-flex',
     padding: '2px',
     background: 'none',
     border: 'none',
     cursor: '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: 'black',
     },

package/src/components/TiptapContainer.jsx

@@ -168,12 +168,28 @@ function TiptapContainer(props) {
 
       el.style.visibility = 'hidden';
       el.style.position = 'absolute';
+      el.style.whiteSpace = 'nowrap';
       el.textContent = 'W'.repeat(props.charactersLimit);
 
-      rootRef.current.appendChild(el);
+      // Copy font styles from the editor container so the width measurement reflects the actual font
+      const computedStyles = window.getComputedStyle(rootRef.current);
+      const fontStyleProps = [
+        'fontFamily',
+        'fontSize',
+        'fontWeight',
+        'fontStyle',
+        'letterSpacing',
+        'wordSpacing',
+        'textTransform',
+        'lineHeight',
+      ];
+
+      fontStyleProps.forEach((prop) => {
+        el.style[prop] = computedStyles[prop];
+      });
 
+      document.body.appendChild(el);
       setAdjustedWidth(`${el.offsetWidth + 27}px`);
-
       el.remove();
     }
   }, [props.adjustWidthForLimit, props.charactersLimit]);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { fireEvent, render, waitFor } from '@testing-library/react';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
 import { CharacterIcon, CharacterPicker } from '../CharacterPicker';
 
 jest.mock('react-dom', () => ({
@@ -128,13 +128,55 @@ describe('CharacterPicker', () => {
     };
     render(<CharacterPicker editor={mockEditor} opts={opts} onClose={onClose} />);
 
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 0));
+    });
+    fireEvent.click(document.body);
+
     await waitFor(() => {
-      setTimeout(() => {
-        fireEvent.click(document.body);
-      }, 0);
+      expect(onClose).toHaveBeenCalled();
     });
+  });
 
-    expect(onClose).toHaveBeenCalled();
+  it('does not re-run positioning when only onClose reference changes', async () => {
+    const opts = {
+      characters: [['á', 'é']],
+    };
+    const getRect = mockEditor.options.element.getBoundingClientRect;
+    const { rerender } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 0));
+    });
+
+    const callsAfterMount = getRect.mock.calls.length;
+    expect(callsAfterMount).toBeGreaterThan(0);
+
+    rerender(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+
+    expect(getRect.mock.calls.length).toBe(callsAfterMount);
+  });
+
+  it('outside click invokes the latest onClose after rerender', async () => {
+    const opts = {
+      characters: [['á', 'é']],
+    };
+    const onCloseFirst = jest.fn();
+    const { rerender } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={onCloseFirst} />);
+
+    await act(async () => {
+      await new Promise((r) => setTimeout(r, 0));
+    });
+
+    const onCloseSecond = jest.fn();
+    rerender(<CharacterPicker editor={mockEditor} opts={opts} onClose={onCloseSecond} />);
+
+    fireEvent.click(document.body);
+
+    await waitFor(() => {
+      expect(onCloseSecond).toHaveBeenCalled();
+    });
+    expect(onCloseFirst).not.toHaveBeenCalled();
   });
 
   it('does not close when clicking inside picker', async () => {
@@ -192,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();
   });