@pie-lib/editable-html-tip-tap 2.1.9 → 2.1.11

package/src/__tests__/EditableHtml.test.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import { useEditor } from '@tiptap/react';
 import { EditableHtml } from '../components/EditableHtml';
+import { InlineDropdownNode } from '../extensions/responseArea';
 
 // Mock TipTap dependencies
 jest.mock('@tiptap/react', () => ({
@@ -210,6 +211,39 @@ describe('EditableHtml', () => {
     expect(container).toBeInTheDocument();
   });
 
+  it('passes blur done behavior to inline dropdown toolbar close', async () => {
+    const onChange = jest.fn();
+    const onDone = jest.fn();
+    const html = '<p>from inline dropdown close</p>';
+
+    render(
+      <EditableHtml
+        {...defaultProps}
+        markup="<p>Hello World</p>"
+        onChange={onChange}
+        onDone={onDone}
+        toolbarOpts={{ doneOn: 'blur' }}
+        responseAreaProps={{ type: 'inline-dropdown' }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(InlineDropdownNode.configure).toHaveBeenCalled();
+    });
+
+    const configureCall = InlineDropdownNode.configure.mock.calls[InlineDropdownNode.configure.mock.calls.length - 1];
+    const inlineDropdownOptions = configureCall[0];
+    const editor = {
+      getHTML: jest.fn(() => html),
+    };
+
+    inlineDropdownOptions.onInlineDropdownToolbarClose(editor);
+
+    expect(editor.getHTML).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(html);
+    expect(onDone).toHaveBeenCalledWith(html);
+  });
+
   it('accepts size props', () => {
     const sizeProps = {
       width: 500,

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;
               }
 
@@ -303,15 +327,7 @@ export const EditableHtml = (props) => {
           return;
         }
 
-        const html = editor.getHTML();
-
-        if (props.markup !== html) {
-          props.onChange?.(html);
-        }
-
-        if (toolbarOptsToUse.doneOn === 'blur') {
-          props.onDone?.(html);
-        }
+        commitEditorContent(editor);
       },
     },
     [props.charactersLimit],
@@ -408,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,

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

@@ -1,7 +1,12 @@
 import React from 'react';
 import { fireEvent, render, waitFor } from '@testing-library/react';
+import { renderMath } from '@pie-lib/math-rendering';
 import InlineDropdown from '../respArea/InlineDropdown';
 
+jest.mock('@pie-lib/math-rendering', () => ({
+  renderMath: jest.fn(),
+}));
+
 jest.mock('@tiptap/react', () => ({
   NodeViewWrapper: ({ children, ...props }) => (
     <div data-testid="node-view-wrapper" {...props}>
@@ -104,6 +109,32 @@ describe('InlineDropdown', () => {
     expect(valueDiv).toBeInTheDocument();
   });
 
+  it('renders math inside the value control on mount', () => {
+    const { container } = render(<InlineDropdown {...defaultProps} />);
+    const valueDiv = container.querySelector('div[style*="border"]');
+
+    expect(renderMath).toHaveBeenCalledWith(valueDiv);
+  });
+
+  it('re-renders math when the value changes', () => {
+    const updatedNode = {
+      ...mockNode,
+      attrs: {
+        ...mockNode.attrs,
+        value: '<span>Updated math</span>',
+      },
+    };
+
+    const { container, rerender } = render(<InlineDropdown {...defaultProps} />);
+
+    renderMath.mockClear();
+
+    rerender(<InlineDropdown {...defaultProps} node={updatedNode} />);
+
+    const valueDiv = container.querySelector('div[style*="border"]');
+    expect(renderMath).toHaveBeenCalledWith(valueDiv);
+  });
+
   it('uses 2px horizontal margin on the value control and no horizontal margin on the wrapper', () => {
     const { container, getByTestId } = render(<InlineDropdown {...defaultProps} />);
     const valueDiv = container.querySelector('div[style*="border"]');
@@ -185,6 +216,28 @@ describe('InlineDropdown', () => {
     });
   });
 
+  it('calls close callback when toolbar closes on outside click', async () => {
+    const onInlineDropdownToolbarClose = jest.fn();
+    const options = {
+      ...mockOptions,
+      onInlineDropdownToolbarClose,
+    };
+
+    const { queryByTestId } = render(<InlineDropdown {...defaultProps} options={options} selected={true} />);
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+
+    fireEvent.mouseDown(document.body);
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).not.toBeInTheDocument();
+    });
+
+    expect(onInlineDropdownToolbarClose).toHaveBeenCalledWith(mockEditor);
+  });
+
   it('uses the current node when closing on outside click after the node prop changes', async () => {
     const onToolbarCloseRequest = jest.fn((_tuple, _editor, onConfirm) => onConfirm());
     const options = {
@@ -476,7 +529,7 @@ describe('InlineDropdown', () => {
     await waitFor(() => {
       expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
     });
-});
+  });
 
   it('renders delete control on portaled custom toolbar when container el is set', async () => {
     const { findByLabelText } = render(<InlineDropdown {...defaultProps} selected />);

package/src/components/respArea/DragInTheBlank/__tests__/choice.test.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DragDropChoice from '../choice';
+
+// Mock @dnd-kit hooks to avoid DndContext requirement
+jest.mock('@dnd-kit/core', () => ({
+  useDraggable: jest.fn(() => ({
+    attributes: {},
+    listeners: {},
+    setNodeRef: jest.fn(),
+    isDragging: false,
+  })),
+  useDroppable: jest.fn(() => ({
+    setNodeRef: jest.fn(),
+    isOver: false,
+    active: null,
+  })),
+}));
+
+jest.mock('@pie-lib/math-rendering', () => ({
+  renderMath: jest.fn(),
+}));
+
+// Collect the CSS rules emotion/MUI injected into the document (jsdom uses insertRule).
+const collectEmotionRules = () => {
+  const rules = [];
+  for (const sheet of Array.from(document.styleSheets)) {
+    try {
+      for (const rule of Array.from(sheet.cssRules)) {
+        rules.push(rule.cssText);
+      }
+    } catch (e) {
+      /* inaccessible stylesheet */
+    }
+  }
+  return rules;
+};
+
+describe('DragInTheBlank choice', () => {
+  const defaultProps = {
+    value: { id: '1', value: '<math>1/2</math>' },
+    disabled: false,
+    instanceId: 'test-instance',
+    n: { index: 0 },
+    onChange: jest.fn(),
+    removeResponse: jest.fn(),
+    duplicates: false,
+  };
+
+  it('renders without crashing', () => {
+    const { container } = render(<DragDropChoice {...defaultProps} />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  describe('fraction math styling', () => {
+    it('enlarges numerator/denominator digits adjacent to a fraction to 120%', () => {
+      render(<DragDropChoice {...defaultProps} />);
+      const rule = collectEmotionRules().find((r) => r.includes('mjx-mn') && r.includes('mjx-mfrac'));
+      expect(rule).toBeDefined();
+      expect(rule).toMatch(/mjx-mn:has\(~\s*mjx-mfrac\)/);
+      expect(rule).toMatch(/mjx-mfrac\s*~\s*mjx-mn/);
+      expect(rule).toMatch(/font-size:\s*120%\s*!important/i);
+    });
+
+    it('keeps the existing mjx-frac 120% rule', () => {
+      render(<DragDropChoice {...defaultProps} />);
+      const rule = collectEmotionRules().find((r) => /(^|[^-])mjx-frac/.test(r) && !r.includes('mjx-mfrac'));
+      expect(rule).toBeDefined();
+      expect(rule).toMatch(/font-size:\s*120%\s*!important/i);
+    });
+  });
+});

package/src/components/respArea/DragInTheBlank/choice.jsx

@@ -10,6 +10,9 @@ import { GripIcon } from '../../icons/RespArea';
 
 const StyledContent = styled('span')(({ theme }) => ({
   border: `solid 0px ${theme.palette.primary.main}`,
+  '& mjx-mn:has(~ mjx-mfrac), mjx-mfrac ~ mjx-mn': {
+    fontSize: '120% !important',
+  },
   '& mjx-frac': {
     fontSize: '120% !important',
   },

package/src/components/respArea/InlineDropdown.jsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { renderMath } from '@pie-lib/math-rendering';
 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';
 import { setToolbarOpened } from '../../utils/toolbar';
 
@@ -16,6 +17,7 @@ const InlineDropdown = (props) => {
   const toolbarRef = useRef(null);
   const toolbarEditor = useRef(null);
   const pendingCloseRequest = useRef(false);
+  const elementRef = useRef(null);
 
   const isHeld = () =>
     editor._holdInlineDropdownToolbarIndex != null &&
@@ -30,6 +32,7 @@ const InlineDropdown = (props) => {
     }
 
     setShowToolbar(false);
+    options.onInlineDropdownToolbarClose?.(editor);
   };
 
   const InlineDropdownToolbar = options.respAreaToolbar([node, pos], editor, closeToolbar);
@@ -93,13 +96,16 @@ const InlineDropdown = (props) => {
     }
   }, [editor, node, selected]);
 
-
- 
   const isScrollbarClicked = (event) =>
     event.clientX > document.documentElement.clientWidth ||
     event.clientY > document.documentElement.clientHeight ||
     event.target === document.documentElement;
-  
+
+  useEffect(() => {
+    if (elementRef.current && typeof renderMath === 'function') {
+      renderMath(elementRef.current);
+    }
+  }, [value]);
 
   useEffect(() => {
     // Calculate position relative to selection
@@ -113,10 +119,10 @@ const InlineDropdown = (props) => {
     });
 
     const handleClickOutside = (event) => {
-
-      if( isScrollbarClicked(event) ) {
+      if (isScrollbarClicked(event)) {
         return;
       }
+
       const insideSomeEditor = event.target.closest('[data-toolbar-for]');
 
       if (
@@ -151,6 +157,7 @@ const InlineDropdown = (props) => {
       }}
     >
       <div
+        ref={elementRef}
         style={{
           display: 'inline-flex',
           minWidth: '178px',

package/src/extensions/__tests__/image-component.test.jsx

@@ -39,6 +39,7 @@ describe('ImageComponent', () => {
 
   const createMockEditor = (selection = { from: 0, to: 1 }) => ({
     _tiptapContainerEl: document.body,
+    isEditable: true,
     commands: {
       updateAttributes: jest.fn(),
       focus: jest.fn(),

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

@@ -416,6 +416,7 @@ describe('MathNodeView', () => {
     attrs: {
       latex: 'x^2',
     },
+    nodeSize: 1,
   };
 
   let defaultProps;
@@ -429,6 +430,7 @@ describe('MathNodeView', () => {
       editor: createMockEditor(),
       selected: false,
       options: {},
+      getPos: jest.fn(() => 0),
     };
   });
 

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/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

@@ -201,7 +201,7 @@ 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);
@@ -222,16 +222,29 @@ export const MathNodeView = (props) => {
     updateAttributes({ latex: newLatex });
   };
 
-  const handleDone = (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);
 
-    const { selection, tr, doc } = editor.state;
-    const sel = TextSelection.create(doc, selection.from + 1);
+    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);
+    }
 
-    // Build a fresh transaction from the current state and set the selection
-    tr.setSelection(sel);
-    editor.view.dispatch(tr);
     editor.commands.focus();
   };
 
@@ -362,7 +375,16 @@ export const MathNodeView = (props) => {
         !clickedMathNode
       ) {
         setShowToolbar(false);
-        handleDone(node.attrs.latex);
+
+        // 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 });
       }
     };
 

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;