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

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

@@ -264,16 +264,16 @@ describe('ResponseAreaExtension', () => {
         jest.resetModules();
       });
 
-      const buildInsertCommand = () => {
+      const buildInsertCommand = (type = 'inline-dropdown') => {
         const { ResponseAreaExtension } = require('../responseArea');
         const context = {
           options: {
-            type: 'inline-dropdown',
+            type,
             maxResponseAreas: 5,
           },
         };
         const commands = ResponseAreaExtension.addCommands.call(context);
-        return commands.insertResponseArea('inline-dropdown');
+        return commands.insertResponseArea(type);
       };
 
       const createDoc = (existingCount, typeName = 'inline_dropdown') => ({
@@ -391,6 +391,60 @@ describe('ResponseAreaExtension', () => {
         expect(create).not.toHaveBeenCalled();
         expect(mockTr.insert).not.toHaveBeenCalled();
       });
+
+      describe('selection after insert', () => {
+        const buildStateAndTr = (typeName, { withResolve = false } = {}) => {
+          const mockInlineNode = { nodeSize: 1 };
+          const create = jest.fn(() => mockInlineNode);
+          const mockDoc = {
+            descendants: jest.fn(),
+            content: { size: 50 },
+            ...(withResolve ? { resolve: jest.fn((pos) => ({ resolved: pos })) } : {}),
+          };
+          const mockTr = {
+            insert: jest.fn(),
+            doc: mockDoc,
+            setSelection: jest.fn(),
+          };
+          const state = {
+            schema: { nodes: { [typeName]: { create } } },
+            doc: mockDoc,
+            selection: { from: 5 },
+          };
+
+          return { mockTr, state };
+        };
+
+        it.each(['inline-dropdown', 'explicit-constructed-response'])(
+          'sets a NodeSelection on the inserted node for %s',
+          (type) => {
+            const insert = buildInsertCommand(type);
+            const typeName = type.replace(/-/g, '_');
+            const { mockTr, state } = buildStateAndTr(typeName);
+            const { NodeSelection, TextSelection } = require('prosemirror-state');
+
+            insert({ tr: mockTr, state, dispatch: jest.fn(), commands: { focus: jest.fn() } });
+
+            expect(NodeSelection.create).toHaveBeenCalledWith(mockTr.doc, 5);
+            expect(TextSelection.near).not.toHaveBeenCalled();
+            expect(mockTr.setSelection).toHaveBeenCalledWith({ type: 'node', pos: 5 });
+          },
+        );
+
+        it('sets a TextSelection just after the inserted node for math-templated (no NodeSelection)', () => {
+          const insert = buildInsertCommand('math-templated');
+          const { mockTr, state } = buildStateAndTr('math_templated', { withResolve: true });
+          const { NodeSelection, TextSelection } = require('prosemirror-state');
+
+          insert({ tr: mockTr, state, dispatch: jest.fn(), commands: { focus: jest.fn() } });
+
+          expect(NodeSelection.create).not.toHaveBeenCalled();
+          // usedPos (5) + nodeSize (1) === 6
+          expect(mockTr.doc.resolve).toHaveBeenCalledWith(6);
+          expect(TextSelection.near).toHaveBeenCalledWith({ resolved: 6 }, 1);
+          expect(mockTr.setSelection).toHaveBeenCalledWith({ type: 'text', pos: { resolved: 6 }, dir: 1 });
+        });
+      });
     });
   });
 });

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/image-component.jsx

@@ -125,7 +125,7 @@ function ImageComponent(props) {
   );
 
   const applySizeData = useCallback(() => {
-    if (!node.attrs.width || !imgRef.current) return;
+    if (!node.attrs.width || !imgRef.current || !imgRef.current.naturalWidth) return;
     const resizePercent = getPercentFromWidth(node.attrs.width);
     if (node.attrs.resizePercent === resizePercent) return;
     updateThisNode({ resizePercent });
@@ -138,7 +138,7 @@ function ImageComponent(props) {
 
   useEffect(() => {
     if (selected) {
-      if (onlyThisNodeSelected) {
+      if (onlyThisNodeSelected && editor.isEditable) {
         // Only open the upload UI for a fresh placeholder. Remounting after tab switch
         // would otherwise call insertImageRequested again and reopen the file modal.
         const hasImageSrc = String(node.attrs?.src ?? '').trim();
@@ -156,15 +156,17 @@ function ImageComponent(props) {
     } else {
       setShowToolbar(selected);
     }
-  }, [onlyThisNodeSelected, selected]);
+  }, [onlyThisNodeSelected, selected, editor.isEditable]);
 
   useEffect(() => {
     applySizeData();
 
-    const resizeHandle = resizeRef.current;
-    if (resizeHandle) {
+    const resizeHandle = resizeRef?.current;
+
+    if (resizeHandle && editor.isEditable) {
       resizeHandle.addEventListener('mousedown', initResize, false);
     }
+
     return () => {
       if (resizeHandle) {
         resizeHandle.removeEventListener('mousedown', initResize, false);
@@ -272,7 +274,7 @@ function ImageComponent(props) {
             onLoad={loadImage}
             alt={node.attrs.alt}
           />
-          <StyledResize ref={resizeRef} className="resize" />
+          <StyledResize ref={resizeRef} className="resize" style={{ display: editor.isEditable ? undefined : 'none' }} />
         </StyledImageContainer>
       </StyledRoot>
 

package/src/extensions/math.js

@@ -5,6 +5,7 @@ import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
 import { NodeSelection, Plugin, PluginKey, TextSelection } from 'prosemirror-state';
 import { MathPreview, MathToolbar } from '@pie-lib/math-toolbar';
 import { wrapMath } from '@pie-lib/math-rendering';
+import { setToolbarOpened } from '../utils/toolbar';
 
 const ensureTextAfterMathPluginKey = new PluginKey('ensureTextAfterMath');
 
@@ -22,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;
@@ -44,6 +47,26 @@ export const EnsureTextAfterMathPlugin = (mathNodeName) =>
     },
   });
 
+const nodeBeforeZeroWidthSpace = (doc, from) => {
+  let i;
+
+  // finding if previous to the cursor there's a zero-width space
+  // and a non-text element, and deleting everything until the space
+  for (i = from; i > 0; i--) {
+    const currentDoc = doc.nodeAt(i);
+
+    if (currentDoc?.type?.name === 'text' && currentDoc.textContent !== '\u200b') {
+      return -1;
+    }
+
+    if (currentDoc && currentDoc?.type?.name !== 'text') {
+      break;
+    }
+  }
+
+  return i;
+};
+
 export const ZeroWidthSpaceHandlingPlugin = new Plugin({
   key: new PluginKey('zeroWidthSpaceHandling'),
   props: {
@@ -53,35 +76,38 @@ export const ZeroWidthSpaceHandlingPlugin = new Plugin({
       const { from, empty } = selection;
 
       if (empty && event.key === 'Backspace' && from > 0) {
-        const prevChar = doc.textBetween(from - 1, from, '\uFFFC', '\uFFFC');
-        if (prevChar === '\u200b') {
-          const tr = state.tr.delete(from - 2, from);
-          dispatch(tr);
-          return true; // handled
+        const start = nodeBeforeZeroWidthSpace(doc, from);
+
+        if (start === -1) {
+          return false;
         }
+
+        const tr = state.tr.delete(start, from);
+        dispatch(tr);
+        return true; // handled
       }
 
       if (empty && event.key === 'ArrowLeft' && from > 0) {
-        const prevChar = doc.textBetween(from - 1, from, '\uFFFC', '\uFFFC');
-        // If the previous character is the zero-width space...
-        if (prevChar === '\u200b') {
-          const posBefore = from - 1;
-          const resolved = state.doc.resolve(posBefore - 1); // look just before the zwsp
-          const maybeNode = resolved.nodeAfter || resolved.nodeBefore;
-
-          // Check if there's an inline selectable node (e.g., your math node)
-          if (maybeNode) {
-            const nodePos = posBefore - maybeNode.nodeSize;
-            const nodeResolved = state.doc.resolve(nodePos);
-            const tr = state.tr.setSelection(NodeSelection.create(state.doc, nodeResolved.pos));
-            dispatch(tr);
-            return true;
-          } else {
-            // Just move the text cursor before the zwsp
-            const tr = state.tr.setSelection(TextSelection.create(state.doc, from - 2));
-            dispatch(tr);
-            return true;
-          }
+        const start = nodeBeforeZeroWidthSpace(doc, from);
+
+        if (start === -1) {
+          return false;
+        }
+
+        const resolved = state.doc.resolve(start);
+        const maybeNode = resolved.nodeAfter || resolved.nodeBefore;
+
+        // Check if there's an inline selectable node (e.g., your math node)
+        if (maybeNode) {
+          const nodeResolved = state.doc.resolve(start);
+          const tr = state.tr.setSelection(NodeSelection.create(state.doc, nodeResolved.pos));
+          dispatch(tr);
+          return true;
+        } else {
+          // Just move the text cursor before the zwsp
+          const tr = state.tr.setSelection(TextSelection.create(state.doc, from - 2));
+          dispatch(tr);
+          return true;
         }
       }
 
@@ -151,14 +177,9 @@ export const MathNode = Node.create({
 
           dispatch(tr);
 
+          setToolbarOpened(editor, true);
           return true;
         },
-      // insertMath: (latex = '') => ({ commands }) => {
-      //   return commands.insertContent({
-      //     type: this.name,
-      //     attrs: { latex },
-      //   });
-      // },
     };
   },
 
@@ -180,9 +201,11 @@ export const MathNode = Node.create({
 });
 
 export const MathNodeView = (props) => {
-  const { node, updateAttributes, editor, selected, options } = props;
+  const { node, updateAttributes, editor, selected, options, getPos } = 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 || {};
   const {
@@ -195,27 +218,132 @@ export const MathNodeView = (props) => {
 
   const latex = node.attrs.latex || '';
 
+  const handleChange = (newLatex) => {
+    updateAttributes({ latex: newLatex });
+  };
+
+  // moveCursorAfterNode is set explicitly by the caller (not inferred from
+  // editor.state.selection: every keystroke while editing already calls
+  // updateAttributes, which replaces this node's content and — per a
+  // ProseMirror mapping quirk — collapses any NodeSelection on it into a
+  // plain TextSelection right away, so the live selection can't be trusted
+  // to still describe this node by the time handleDone runs).
+  //
+  // - Check icon: always move the cursor to just after this node.
+  // - Clicking elsewhere in the editable content while the toolbar was
+  //   open (see handleClickOutside): leave the cursor where the user
+  //   actually clicked instead of overriding it.
+  const handleDone = (newLatex, { moveCursorAfterNode = true } = {}) => {
+    updateAttributes({ latex: newLatex });
+    setShowToolbar(false);
+
+    if (moveCursorAfterNode && typeof getPos === 'function') {
+      const pos = getPos();
+      const { doc } = editor.state;
+      const sel = TextSelection.create(doc, pos + node.nodeSize);
+      const tr = editor.state.tr.setSelection(sel);
+      editor.view.dispatch(tr);
+    }
+
+    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(() => {
-    editor._toolbarOpened = !!showToolbar;
-  }, [showToolbar]);
+    setToolbarOpened(editor, selected || showToolbar);
+  }, [editor, showToolbar, selected]);
 
   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
-      left: start.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;
 
@@ -236,7 +364,7 @@ export const MathNodeView = (props) => {
       // will keep/re-open the toolbar. Without this guard, closing and then
       // immediately clicking the math node would fire this listener in the same
       // event cycle and close the toolbar before it could open.
-      const clickedMathNode = !!target?.closest?.('.math-node');
+      const clickedMathNode = !!target?.closest?.(`.math-node-${timestamp.current}`);
 
       if (
         toolbarRef.current &&
@@ -247,6 +375,16 @@ export const MathNodeView = (props) => {
         !clickedMathNode
       ) {
         setShowToolbar(false);
+
+        // If the click landed inside the editable content itself, respect
+        // it and leave the cursor where the user clicked. If it landed
+        // fully outside the editor (e.g. on other page UI), there's no
+        // click position to preserve — falling back to "leave selection
+        // untouched" there renders the browser's native NodeSelection
+        // fallback caret at the start of the node, so explicitly move the
+        // cursor after it instead, same as the check-icon path.
+        const clickedInsideEditableContent = !!editor?.view?.dom?.contains(target);
+        handleDone(node.attrs.latex, { moveCursorAfterNode: !clickedInsideEditableContent });
       }
     };
 
@@ -259,30 +397,11 @@ 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();
-  };
+  }, [editor, showToolbar, node]);
 
   return (
     <NodeViewWrapper
-      className="math-node"
+      className={`math-node-${timestamp.current}`}
       style={{
         display: 'inline-flex',
         cursor: 'pointer',
@@ -290,7 +409,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 &&
@@ -302,7 +421,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)',

package/src/extensions/responseArea.js

@@ -195,7 +195,13 @@ export const ResponseAreaExtension = Extension.create({
           // tr.setSelection(NodeSelection.create(tr.doc, usedPos))
 
           // --- Cursor move behavior for certain types (Slate: moveFocusTo next text) ---
-          if (['math_templated', 'inline_dropdown', 'explicit_constructed_response'].includes(typeName)) {
+          // Only types whose node view opens its own toolbar on selection
+          // (inline_dropdown, explicit_constructed_response) benefit from a
+          // NodeSelection here — the toolbar is the visual feedback that it's
+          // selected. math_templated has no such UI, so a NodeSelection there
+          // just looks unfocused (a highlighted node, no blinking caret);
+          // moving the cursor to just after it gives a real, visible caret.
+          if (['inline_dropdown', 'explicit_constructed_response'].includes(typeName)) {
             tr.setSelection(NodeSelection.create(tr.doc, usedPos));
           } else {
             const after = usedPos + newInline.nodeSize;

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;

package/src/utils/__tests__/toolbar.test.js

@@ -0,0 +1,43 @@
+import { setToolbarOpened, TOOLBAR_OPENED_META_KEY } from '../toolbar';
+
+describe('setToolbarOpened', () => {
+  const createEditor = (toolbarOpened = false) => {
+    const tr = {
+      setMeta: jest.fn().mockReturnThis(),
+    };
+
+    return {
+      _toolbarOpened: toolbarOpened,
+      state: { tr },
+      view: {
+        dispatch: jest.fn(),
+      },
+    };
+  };
+
+  it('sets editor._toolbarOpened and dispatches a meta transaction', () => {
+    const editor = createEditor(false);
+
+    setToolbarOpened(editor, true);
+
+    expect(editor._toolbarOpened).toBe(true);
+    expect(editor.state.tr.setMeta).toHaveBeenCalledWith(TOOLBAR_OPENED_META_KEY, true);
+    expect(editor.view.dispatch).toHaveBeenCalledWith(editor.state.tr);
+  });
+
+  it('does nothing when the value is unchanged', () => {
+    const editor = createEditor(true);
+
+    setToolbarOpened(editor, true);
+
+    expect(editor.view.dispatch).not.toHaveBeenCalled();
+  });
+
+  it('coerces the opened value to a boolean', () => {
+    const editor = createEditor(false);
+
+    setToolbarOpened(editor, 1);
+
+    expect(editor._toolbarOpened).toBe(true);
+  });
+});

package/src/utils/toolbar.js

@@ -0,0 +1,15 @@
+export const TOOLBAR_OPENED_META_KEY = 'toolbarOpenedChanged';
+
+export const setToolbarOpened = (editor, opened) => {
+  const next = !!opened;
+
+  if (editor._toolbarOpened === next) {
+    return;
+  }
+
+  editor._toolbarOpened = next;
+
+  if (editor?.view && editor?.state?.tr) {
+    editor.view.dispatch(editor.state.tr.setMeta(TOOLBAR_OPENED_META_KEY, true));
+  }
+};