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

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__/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/extensions/__tests__/math.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, waitFor, fireEvent } from '@testing-library/react';
-import { MathNode, MathNodeView } from '../math';
+import { EnsureTextAfterMathPlugin, MathNode, MathNodeView, ZeroWidthSpaceHandlingPlugin } from '../math';
 
 jest.mock('@tiptap/react', () => ({
   NodeViewWrapper: ({ children, ...props }) => (
@@ -156,6 +156,151 @@ describe('MathNode', () => {
       expect(result).toBeDefined();
     });
   });
+
+  describe('addProseMirrorPlugins', () => {
+    it('registers ensure-text-after-math and zero-width-space plugins', () => {
+      const plugins = MathNode.addProseMirrorPlugins();
+
+      expect(plugins).toHaveLength(2);
+      expect(plugins[0].appendTransaction).toBeDefined();
+      expect(plugins[1].props.handleKeyDown).toBeDefined();
+    });
+  });
+});
+
+describe('EnsureTextAfterMathPlugin', () => {
+  it('inserts a zero-width space after a math node when no text follows', () => {
+    const plugin = EnsureTextAfterMathPlugin('math');
+    const textNode = { type: { name: 'text' } };
+    const mathNode = { type: { name: 'math' }, nodeSize: 3 };
+    const tr = { insert: jest.fn() };
+
+    const newState = {
+      schema: { text: jest.fn((value) => ({ type: textNode.type, text: value })) },
+      tr,
+      doc: {
+        descendants: (cb) => cb(mathNode, 5),
+        nodeAt: jest.fn(() => null),
+      },
+    };
+
+    const result = plugin.appendTransaction([{ docChanged: true }], {}, newState);
+
+    expect(tr.insert).toHaveBeenCalledWith(8, expect.anything());
+    expect(result).toBe(tr);
+  });
+
+  it('does not insert when text already follows the math node', () => {
+    const plugin = EnsureTextAfterMathPlugin('math');
+    const tr = { insert: jest.fn() };
+    const mathNode = { type: { name: 'math' }, nodeSize: 3 };
+
+    const newState = {
+      schema: { text: jest.fn() },
+      tr,
+      doc: {
+        descendants: (cb) => cb(mathNode, 5),
+        nodeAt: jest.fn(() => ({ type: { name: 'text' } })),
+      },
+    };
+
+    const result = plugin.appendTransaction([{ docChanged: true }], {}, newState);
+
+    expect(tr.insert).not.toHaveBeenCalled();
+    expect(result).toBeNull();
+  });
+
+  it('returns null when the document did not change', () => {
+    const plugin = EnsureTextAfterMathPlugin('math');
+
+    const result = plugin.appendTransaction([{ docChanged: false }], {}, {});
+    expect(result).toBeNull();
+  });
+});
+
+describe('ZeroWidthSpaceHandlingPlugin', () => {
+  const createDefaultDoc = () => ({
+    textBetween: jest.fn(() => '\u200b'),
+    resolve: jest.fn(() => ({
+      nodeAfter: null,
+      nodeBefore: null,
+    })),
+  });
+
+  const createView = ({ state: stateOverrides = {} } = {}) => {
+    const dispatch = jest.fn();
+    const tr = {
+      delete: jest.fn().mockReturnThis(),
+      setSelection: jest.fn().mockReturnThis(),
+    };
+
+    return {
+      state: {
+        selection: { from: 2, empty: true },
+        doc: createDefaultDoc(),
+        tr,
+        ...stateOverrides,
+        doc: { ...createDefaultDoc(), ...stateOverrides.doc },
+      },
+      dispatch,
+    };
+  };
+
+  it('deletes math and zero-width space on Backspace', () => {
+    const view = createView();
+    const event = { key: 'Backspace' };
+    const handled = ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, event);
+
+    expect(handled).toBe(true);
+    expect(view.state.tr.delete).toHaveBeenCalledWith(0, 2);
+    expect(view.dispatch).toHaveBeenCalledWith(view.state.tr);
+  });
+
+  it('selects the math node on ArrowLeft before a zero-width space', () => {
+    const mathNode = { nodeSize: 3 };
+    const view = createView({
+      state: {
+        doc: {
+          resolve: jest
+            .fn()
+            .mockReturnValueOnce({ nodeAfter: mathNode, nodeBefore: null })
+            .mockReturnValueOnce({ pos: 4 }),
+        },
+      },
+    });
+    const { NodeSelection } = require('prosemirror-state');
+
+    const handled = ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, { key: 'ArrowLeft' });
+
+    expect(handled).toBe(true);
+    expect(NodeSelection.create).toHaveBeenCalledWith(view.state.doc, 4);
+    expect(view.dispatch).toHaveBeenCalled();
+  });
+
+  it('moves the text cursor before the zero-width space when no inline node precedes it', () => {
+    const view = createView();
+    const { TextSelection } = require('prosemirror-state');
+
+    const handled = ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, { key: 'ArrowLeft' });
+
+    expect(handled).toBe(true);
+    expect(TextSelection.create).toHaveBeenCalledWith(view.state.doc, 0);
+    expect(view.dispatch).toHaveBeenCalled();
+  });
+
+  it('returns false for unrelated keys', () => {
+    const view = createView({
+      state: {
+        doc: {
+          textBetween: jest.fn(() => 'a'),
+          resolve: jest.fn(),
+        },
+      },
+    });
+
+    const handled = ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, { key: 'Enter' });
+    expect(handled).toBe(false);
+  });
 });
 
 describe('MathNodeView', () => {
@@ -244,37 +389,30 @@ describe('MathNodeView', () => {
   });
 
   describe('toolbar positioning', () => {
-    it('uses _tiptapContainerEl for position calculation when available', async () => {
-      const containerEl = document.createElement('div');
-      containerEl.getBoundingClientRect = jest.fn(() => ({ top: -50, left: 20, width: 600, height: 400 }));
-
-      const editor = {
-        ...defaultProps.editor,
-        _tiptapContainerEl: containerEl,
-      };
-
-      const { container } = render(<MathNodeView {...defaultProps} editor={editor} selected={true} />);
+    it('uses a fixed top offset and horizontal position from coordsAtPos', async () => {
+      const { container } = render(<MathNodeView {...defaultProps} selected={true} />);
       await waitFor(() => {
         const toolbar = container.querySelector('[data-toolbar-for]');
         expect(toolbar).toBeInTheDocument();
-        // top = coordsAtPos.top (100) + Math.abs(containerEl.top (-50)) + 40 = 190
-        expect(toolbar.style.top).toBe('190px');
+        expect(toolbar.style.top).toBe('40px');
         expect(toolbar.style.left).toBe('50px');
       });
     });
 
-    it('falls back to document.body when _tiptapContainerEl is not set', async () => {
+    it('keeps the fixed top offset when the editor container is scrolled', async () => {
+      const containerEl = document.createElement('div');
+      containerEl.getBoundingClientRect = jest.fn(() => ({ top: -200, left: 0, width: 600, height: 400 }));
+
       const editor = {
         ...defaultProps.editor,
-        _tiptapContainerEl: undefined,
+        _tiptapContainerEl: containerEl,
       };
 
       const { container } = render(<MathNodeView {...defaultProps} editor={editor} selected={true} />);
       await waitFor(() => {
         const toolbar = container.querySelector('[data-toolbar-for]');
         expect(toolbar).toBeInTheDocument();
-        // top = coordsAtPos.top (100) + Math.abs(document.body.top (0)) + 40 = 140
-        expect(toolbar.style.top).toBe('140px');
+        expect(toolbar.style.top).toBe('40px');
         expect(toolbar.style.left).toBe('50px');
       });
     });
@@ -288,7 +426,7 @@ describe('MathNodeView', () => {
       });
     });
 
-    it('recalculates position when toolbar reopens', async () => {
+    it('updates horizontal position from coordsAtPos when selection changes', async () => {
       const editor = {
         ...defaultProps.editor,
         view: {
@@ -302,30 +440,11 @@ describe('MathNodeView', () => {
       await waitFor(() => {
         const toolbar = container.querySelector('[data-toolbar-for]');
         expect(toolbar).toBeInTheDocument();
-        // top = 200 + Math.abs(0) + 40 = 240
-        expect(toolbar.style.top).toBe('240px');
+        expect(toolbar.style.top).toBe('40px');
         expect(toolbar.style.left).toBe('150px');
       });
     });
 
-    it('accounts for negative container top (scrolled container)', async () => {
-      const containerEl = document.createElement('div');
-      containerEl.getBoundingClientRect = jest.fn(() => ({ top: -200, left: 0, width: 600, height: 400 }));
-
-      const editor = {
-        ...defaultProps.editor,
-        _tiptapContainerEl: containerEl,
-      };
-
-      const { container } = render(<MathNodeView {...defaultProps} editor={editor} selected={true} />);
-      await waitFor(() => {
-        const toolbar = container.querySelector('[data-toolbar-for]');
-        expect(toolbar).toBeInTheDocument();
-        // top = 100 + Math.abs(-200) + 40 = 340
-        expect(toolbar.style.top).toBe('340px');
-      });
-    });
-
     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 }));
@@ -410,8 +529,13 @@ describe('MathNodeView', () => {
     });
   });
 
-  it('closes toolbar on outside click', async () => {
-    const { queryByTestId } = render(<MathNodeView {...defaultProps} selected={true} />);
+  it('closes toolbar on outside click and runs handleDone', async () => {
+    const updateAttributes = jest.fn();
+    const editor = createMockEditor();
+    const { TextSelection } = require('prosemirror-state');
+    const { queryByTestId } = render(
+      <MathNodeView {...defaultProps} editor={editor} updateAttributes={updateAttributes} selected={true} />,
+    );
 
     await waitFor(() => {
       expect(queryByTestId('math-toolbar')).toBeInTheDocument();
@@ -421,6 +545,26 @@ describe('MathNodeView', () => {
 
     await waitFor(() => {
       expect(queryByTestId('math-toolbar')).not.toBeInTheDocument();
+      expect(updateAttributes).toHaveBeenCalledWith({ latex: 'x^2' });
+      expect(TextSelection.create).toHaveBeenCalledWith(editor.state.doc, 1);
+      expect(editor.state.tr.setSelection).toHaveBeenCalled();
+      expect(editor.view.dispatch).toHaveBeenCalledWith(editor.state.tr);
+      expect(editor.commands.focus).toHaveBeenCalled();
+      expect(editor._toolbarOpened).toBe(false);
+    });
+  });
+
+  it('does not close toolbar when clicking the math node preview', async () => {
+    const { getByTestId, queryByTestId } = render(<MathNodeView {...defaultProps} selected={true} />);
+
+    await waitFor(() => {
+      expect(queryByTestId('math-toolbar')).toBeInTheDocument();
+    });
+
+    fireEvent.click(getByTestId('math-preview'));
+
+    await waitFor(() => {
+      expect(queryByTestId('math-toolbar')).toBeInTheDocument();
     });
   });
 

package/src/extensions/math.js

@@ -195,6 +195,25 @@ export const MathNodeView = (props) => {
 
   const latex = node.attrs.latex || '';
 
+  const handleChange = (newLatex) => {
+    updateAttributes({ latex: newLatex });
+  };
+
+  const handleDone = (newLatex) => {
+    updateAttributes({ latex: newLatex });
+    setShowToolbar(false);
+
+    editor._toolbarOpened = false;
+
+    const { selection, tr, doc } = editor.state;
+    const sel = TextSelection.create(doc, selection.from + 1);
+
+    // Build a fresh transaction from the current state and set the selection
+    tr.setSelection(sel);
+    editor.view.dispatch(tr);
+    editor.commands.focus();
+  };
+
   useEffect(() => {
     if (selected) {
       setShowToolbar(true);
@@ -207,12 +226,10 @@ export const MathNodeView = (props) => {
 
   useEffect(() => {
     // Calculate position relative to selection
-    const container = editor?._tiptapContainerEl || document.body;
-    const bodyRect = container.getBoundingClientRect();
     const { from } = editor.state.selection;
     const start = editor.view.coordsAtPos(from);
     setPosition({
-      top: start.top + Math.abs(bodyRect.top) + 40, // shift above
+      top: 40, // shift above
       left: start.left,
     });
 
@@ -247,6 +264,7 @@ export const MathNodeView = (props) => {
         !clickedMathNode
       ) {
         setShowToolbar(false);
+        handleDone(node.attrs.latex);
       }
     };
 
@@ -261,25 +279,6 @@ export const MathNodeView = (props) => {
     return () => document.removeEventListener('click', handleClickOutside);
   }, [editor, showToolbar]);
 
-  const handleChange = (newLatex) => {
-    updateAttributes({ latex: newLatex });
-  };
-
-  const handleDone = (newLatex) => {
-    updateAttributes({ latex: newLatex });
-    setShowToolbar(false);
-
-    editor._toolbarOpened = false;
-
-    const { selection, tr, doc } = editor.state;
-    const sel = TextSelection.create(doc, selection.from + 1);
-
-    // Build a fresh transaction from the current state and set the selection
-    tr.setSelection(sel);
-    editor.view.dispatch(tr);
-    editor.commands.focus();
-  };
-
   return (
     <NodeViewWrapper
       className="math-node"

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;