@pie-lib/editable-html-tip-tap 2.1.2-next.3 → 2.1.3

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.1.2-next.3+0f77a8069",
+  "version": "2.1.3",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -16,28 +16,28 @@
     "@dnd-kit/utilities": "3.2.2",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "^4.0.2",
+    "@pie-lib/drag": "^4.0.3",
     "@pie-lib/math-input": "^8.1.0",
     "@pie-lib/math-rendering": "^5.0.2",
-    "@pie-lib/math-toolbar": "^3.0.2",
-    "@pie-lib/render-ui": "^6.1.0",
-    "@tiptap/core": "3.0.9",
-    "@tiptap/extension-character-count": "3.0.9",
-    "@tiptap/extension-color": "3.0.9",
-    "@tiptap/extension-image": "3.0.9",
-    "@tiptap/extension-list-item": "3.0.9",
+    "@pie-lib/math-toolbar": "^3.0.3",
+    "@pie-lib/render-ui": "^6.1.1",
+    "@tiptap/core": "3.20.0",
+    "@tiptap/extension-character-count": "3.20.0",
+    "@tiptap/extension-color": "3.20.0",
+    "@tiptap/extension-image": "3.20.0",
+    "@tiptap/extension-list-item": "3.20.0",
     "@tiptap/extension-placeholder": "3.20.0",
-    "@tiptap/extension-subscript": "3.0.9",
-    "@tiptap/extension-superscript": "3.0.9",
-    "@tiptap/extension-table": "3.0.9",
-    "@tiptap/extension-table-cell": "3.0.9",
-    "@tiptap/extension-table-header": "3.0.9",
-    "@tiptap/extension-table-row": "3.0.9",
-    "@tiptap/extension-text-align": "3.0.9",
-    "@tiptap/extension-text-style": "3.0.9",
-    "@tiptap/pm": "3.0.9",
-    "@tiptap/react": "3.0.9",
-    "@tiptap/starter-kit": "3.0.9",
+    "@tiptap/extension-subscript": "3.20.0",
+    "@tiptap/extension-superscript": "3.20.0",
+    "@tiptap/extension-table": "3.20.0",
+    "@tiptap/extension-table-cell": "3.20.0",
+    "@tiptap/extension-table-header": "3.20.0",
+    "@tiptap/extension-table-row": "3.20.0",
+    "@tiptap/extension-text-align": "3.20.0",
+    "@tiptap/extension-text-style": "3.20.0",
+    "@tiptap/pm": "3.20.0",
+    "@tiptap/react": "3.20.0",
+    "@tiptap/starter-kit": "3.20.0",
     "change-case": "^3.0.2",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
@@ -59,6 +59,6 @@
   "peerDependencies": {
     "react": "^18.2.0"
   },
-  "gitHead": "0f77a806995c7b7f717af1dc18d0f3f6a138d1db",
+  "gitHead": "381e012542b7849f83aa84b08e4b6664cedff245",
   "scripts": {}
 }

package/src/__tests__/EditableHtml.test.jsx

@@ -336,6 +336,7 @@ describe('EditableHtml', () => {
     const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
     const blurEditor = {
       getHTML: jest.fn(() => '<p>changed</p>'),
+      schema: {},
       _insertingImage: true,
       _toolbarOpened: false,
       isActive: jest.fn(() => false),
@@ -350,6 +351,85 @@ describe('EditableHtml', () => {
     jest.useRealTimers();
   });
 
+  it('does not run blur onChange/onDone when editor has no schema', async () => {
+    jest.useFakeTimers();
+    const onChange = jest.fn();
+    const onDone = jest.fn();
+
+    render(
+      <EditableHtml
+        {...defaultProps}
+        markup="<p>Hello World</p>"
+        onChange={onChange}
+        onDone={onDone}
+        toolbarOpts={{ doneOn: 'blur' }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(useEditor).toHaveBeenCalled();
+    });
+
+    const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
+    const getHTML = jest.fn(() => '<p>changed</p>');
+    const blurEditor = {
+      getHTML,
+      schema: undefined,
+      _insertingImage: false,
+      _toolbarOpened: false,
+      isActive: jest.fn(() => false),
+    };
+
+    editorConfig.onBlur({ editor: blurEditor });
+    jest.advanceTimersByTime(200);
+
+    expect(getHTML).not.toHaveBeenCalled();
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onDone).not.toHaveBeenCalled();
+
+    jest.useRealTimers();
+  });
+
+  it('calls getHTML once on blur and passes the same html to onChange and onDone', async () => {
+    jest.useFakeTimers();
+    const onChange = jest.fn();
+    const onDone = jest.fn();
+    const html = '<p>from editor</p>';
+
+    render(
+      <EditableHtml
+        {...defaultProps}
+        markup="<p>Hello World</p>"
+        onChange={onChange}
+        onDone={onDone}
+        toolbarOpts={{ doneOn: 'blur' }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(useEditor).toHaveBeenCalled();
+    });
+
+    const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
+    const getHTML = jest.fn(() => html);
+    const blurEditor = {
+      getHTML,
+      schema: {},
+      _insertingImage: false,
+      _toolbarOpened: false,
+      isActive: jest.fn(() => false),
+    };
+
+    editorConfig.onBlur({ editor: blurEditor });
+    jest.advanceTimersByTime(200);
+
+    expect(getHTML).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(html);
+    expect(onDone).toHaveBeenCalledWith(html);
+
+    jest.useRealTimers();
+  });
+
   describe('onUpdate callback', () => {
     it('calls onChange when transaction.isDone is true', async () => {
       const onChange = jest.fn();
@@ -375,7 +455,7 @@ describe('EditableHtml', () => {
       expect(onChange).toHaveBeenCalledWith('<p>Updated content</p>');
     });
 
-    it('calls onChange when markup differs from editor HTML', async () => {
+    it('does not call onChange when transaction.isDone is false even if markup differs from editor HTML', async () => {
       const onChange = jest.fn();
       const markup = '<p>Initial content</p>';
 
@@ -396,7 +476,7 @@ describe('EditableHtml', () => {
 
       editorConfig.onUpdate({ editor: mockEditor, transaction: mockTransaction });
 
-      expect(onChange).toHaveBeenCalledWith('<p>Different content</p>');
+      expect(onChange).not.toHaveBeenCalled();
     });
 
     it('does not call onChange when transaction.isDone is false and markup matches editor HTML', async () => {

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,6 +72,9 @@ 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;
 
@@ -86,14 +92,15 @@ export function CharacterPicker({ editor, opts, onClose }) {
     }
 
     setPosition({
-      // top: start.top + Math.abs(bodyRect.top) - containerRef.current.offsetHeight - 10 + additionalTopOffset, // shift above
       top: top,
       left: start.left,
     });
 
+    const editorViewDom = editor.view.dom;
+
     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();
       }
     };
 
@@ -105,7 +112,7 @@ export function CharacterPicker({ editor, opts, onClose }) {
       clearTimeout(timeoutId);
       document.removeEventListener('click', handleClickOutside);
     };
-  }, [editor, onClose]);
+  }, [editor]);
 
   const renderPopOver = (event, el) => setPopover({ anchorEl: event.currentTarget, el });
 

package/src/components/EditableHtml.jsx

@@ -288,29 +288,31 @@ 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());
+        const html = editor.getHTML();
+
+        if (props.markup !== html) {
+          props.onChange?.(html);
         }
 
         if (toolbarOptsToUse.doneOn === 'blur') {
-          props.onDone?.(editor.getHTML());
+          props.onDone?.(html);
         }
-      }, 200),
+      },
     },
     [props.charactersLimit],
   );
@@ -428,7 +430,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
       }
@@ -143,7 +147,8 @@ 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 && !editor._toolbarOpened && !editorState.hideDefaultToolbar),
     [classes.autoWidth]: autoWidth,
     [classes.fullWidth]: !autoWidth,
     [classes.hidden]: toolbarOpts.isHidden === true,

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 () => {

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

@@ -17,8 +17,15 @@ jest.mock('react-dom', () => ({
 
 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(),
     };
     return {
       state: {
@@ -27,6 +34,7 @@ describe('InlineDropdown', () => {
           to: 1,
         },
         tr: mockTr,
+        doc: mockDoc,
       },
       view: {
         coordsAtPos: jest.fn(() => ({ top: 100, left: 50 })),

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/respArea/InlineDropdown.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 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';
@@ -9,15 +10,74 @@ 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 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);
+  };
+
+  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,10 +85,10 @@ const InlineDropdown = (props) => {
 
     if (selected) {
       if (onlyThisNodeSelected) {
-        setShowToolbar(selected);
+        setShowToolbar(true);
       }
-    } else {
-      setShowToolbar(selected);
+    } else if (showToolbar) {
+      requestClose();
     }
   }, [editor, node, selected]);
 
@@ -47,13 +107,14 @@ const InlineDropdown = (props) => {
       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();
       }
     };
 
@@ -105,19 +166,10 @@ 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>
@@ -145,6 +197,7 @@ const InlineDropdown = (props) => {
                   // Prevent the debounced onBlur/onDone from firing into the
                   // now-deleted node's stale position
                   editor._toolbarOpened = 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/index.jsx

@@ -1,5 +1,5 @@
 import StyledEditor, { EditableHtml } from './components/EditableHtml';
 import { ALL_PLUGINS, DEFAULT_PLUGINS } from './extensions';
-
-export { EditableHtml, ALL_PLUGINS, DEFAULT_PLUGINS };
+import { deleteInlineDropdownByIndex } from './components/respArea/inlineDropdownUtils';
+export { EditableHtml, ALL_PLUGINS, DEFAULT_PLUGINS, deleteInlineDropdownByIndex };
 export default StyledEditor;