@pie-lib/editable-html-tip-tap 2.1.10 → 2.2.0-beta

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

@@ -0,0 +1,38 @@
+"use strict";
+
+var _toolbar = require("../toolbar");
+describe('setToolbarOpened', function () {
+  var createEditor = function createEditor() {
+    var toolbarOpened = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var tr = {
+      setMeta: jest.fn().mockReturnThis()
+    };
+    return {
+      _toolbarOpened: toolbarOpened,
+      state: {
+        tr: tr
+      },
+      view: {
+        dispatch: jest.fn()
+      }
+    };
+  };
+  it('sets editor._toolbarOpened and dispatches a meta transaction', function () {
+    var editor = createEditor(false);
+    (0, _toolbar.setToolbarOpened)(editor, true);
+    expect(editor._toolbarOpened).toBe(true);
+    expect(editor.state.tr.setMeta).toHaveBeenCalledWith(_toolbar.TOOLBAR_OPENED_META_KEY, true);
+    expect(editor.view.dispatch).toHaveBeenCalledWith(editor.state.tr);
+  });
+  it('does nothing when the value is unchanged', function () {
+    var editor = createEditor(true);
+    (0, _toolbar.setToolbarOpened)(editor, true);
+    expect(editor.view.dispatch).not.toHaveBeenCalled();
+  });
+  it('coerces the opened value to a boolean', function () {
+    var editor = createEditor(false);
+    (0, _toolbar.setToolbarOpened)(editor, 1);
+    expect(editor._toolbarOpened).toBe(true);
+  });
+});
+//# sourceMappingURL=toolbar.test.js.map

package/lib/utils/__tests__/toolbar.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.test.js","names":["_toolbar","require","describe","createEditor","toolbarOpened","arguments","length","undefined","tr","setMeta","jest","fn","mockReturnThis","_toolbarOpened","state","view","dispatch","it","editor","setToolbarOpened","expect","toBe","toHaveBeenCalledWith","TOOLBAR_OPENED_META_KEY","not","toHaveBeenCalled"],"sources":["../../../src/utils/__tests__/toolbar.test.js"],"sourcesContent":["import { setToolbarOpened, TOOLBAR_OPENED_META_KEY } from '../toolbar';\n\ndescribe('setToolbarOpened', () => {\n  const createEditor = (toolbarOpened = false) => {\n    const tr = {\n      setMeta: jest.fn().mockReturnThis(),\n    };\n\n    return {\n      _toolbarOpened: toolbarOpened,\n      state: { tr },\n      view: {\n        dispatch: jest.fn(),\n      },\n    };\n  };\n\n  it('sets editor._toolbarOpened and dispatches a meta transaction', () => {\n    const editor = createEditor(false);\n\n    setToolbarOpened(editor, true);\n\n    expect(editor._toolbarOpened).toBe(true);\n    expect(editor.state.tr.setMeta).toHaveBeenCalledWith(TOOLBAR_OPENED_META_KEY, true);\n    expect(editor.view.dispatch).toHaveBeenCalledWith(editor.state.tr);\n  });\n\n  it('does nothing when the value is unchanged', () => {\n    const editor = createEditor(true);\n\n    setToolbarOpened(editor, true);\n\n    expect(editor.view.dispatch).not.toHaveBeenCalled();\n  });\n\n  it('coerces the opened value to a boolean', () => {\n    const editor = createEditor(false);\n\n    setToolbarOpened(editor, 1);\n\n    expect(editor._toolbarOpened).toBe(true);\n  });\n});\n"],"mappings":";;AAAA,IAAAA,QAAA,GAAAC,OAAA;AAEAC,QAAQ,CAAC,kBAAkB,EAAE,YAAM;EACjC,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAA8B;IAAA,IAA1BC,aAAa,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,KAAK;IACzC,IAAMG,EAAE,GAAG;MACTC,OAAO,EAAEC,IAAI,CAACC,EAAE,CAAC,CAAC,CAACC,cAAc,CAAC;IACpC,CAAC;IAED,OAAO;MACLC,cAAc,EAAET,aAAa;MAC7BU,KAAK,EAAE;QAAEN,EAAE,EAAFA;MAAG,CAAC;MACbO,IAAI,EAAE;QACJC,QAAQ,EAAEN,IAAI,CAACC,EAAE,CAAC;MACpB;IACF,CAAC;EACH,CAAC;EAEDM,EAAE,CAAC,8DAA8D,EAAE,YAAM;IACvE,IAAMC,MAAM,GAAGf,YAAY,CAAC,KAAK,CAAC;IAElC,IAAAgB,yBAAgB,EAACD,MAAM,EAAE,IAAI,CAAC;IAE9BE,MAAM,CAACF,MAAM,CAACL,cAAc,CAAC,CAACQ,IAAI,CAAC,IAAI,CAAC;IACxCD,MAAM,CAACF,MAAM,CAACJ,KAAK,CAACN,EAAE,CAACC,OAAO,CAAC,CAACa,oBAAoB,CAACC,gCAAuB,EAAE,IAAI,CAAC;IACnFH,MAAM,CAACF,MAAM,CAACH,IAAI,CAACC,QAAQ,CAAC,CAACM,oBAAoB,CAACJ,MAAM,CAACJ,KAAK,CAACN,EAAE,CAAC;EACpE,CAAC,CAAC;EAEFS,EAAE,CAAC,0CAA0C,EAAE,YAAM;IACnD,IAAMC,MAAM,GAAGf,YAAY,CAAC,IAAI,CAAC;IAEjC,IAAAgB,yBAAgB,EAACD,MAAM,EAAE,IAAI,CAAC;IAE9BE,MAAM,CAACF,MAAM,CAACH,IAAI,CAACC,QAAQ,CAAC,CAACQ,GAAG,CAACC,gBAAgB,CAAC,CAAC;EACrD,CAAC,CAAC;EAEFR,EAAE,CAAC,uCAAuC,EAAE,YAAM;IAChD,IAAMC,MAAM,GAAGf,YAAY,CAAC,KAAK,CAAC;IAElC,IAAAgB,yBAAgB,EAACD,MAAM,EAAE,CAAC,CAAC;IAE3BE,MAAM,CAACF,MAAM,CAACL,cAAc,CAAC,CAACQ,IAAI,CAAC,IAAI,CAAC;EAC1C,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.1.10",
+  "version": "2.2.0-beta",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -16,11 +16,11 @@
     "@dnd-kit/utilities": "3.2.2",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "^4.0.6",
-    "@pie-lib/math-input": "^8.1.1",
-    "@pie-lib/math-rendering": "^5.1.0",
-    "@pie-lib/math-toolbar": "^3.0.6",
-    "@pie-lib/render-ui": "^6.1.3",
+    "@pie-lib/drag": "^4.0.2",
+    "@pie-lib/math-input-mathlive": "^1.0.1",
+    "@pie-lib/math-rendering": "^5.0.2",
+    "@pie-lib/math-toolbar": "^3.1.0-beta",
+    "@pie-lib/render-ui": "^6.1.0",
     "@tiptap/core": "3.20.0",
     "@tiptap/extension-character-count": "3.20.0",
     "@tiptap/extension-color": "3.20.0",
@@ -59,6 +59,6 @@
   "peerDependencies": {
     "react": "^18.2.0"
   },
-  "gitHead": "71d88b032a54ee9ffca51add8c0341a9e1ef780f",
+  "gitHead": "433bcb776c2975739e7417f133d31cd996164116",
   "scripts": {}
 }

package/src/components/EditableHtml.jsx

@@ -243,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;
               }
 
@@ -424,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/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/MathTemplated.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { NodeViewWrapper } from '@tiptap/react';
-import { mq } from '@pie-lib/math-input';
+import { mq } from '@pie-lib/math-input-mathlive';
 import { styled } from '@mui/material/styles';
 
 const StyledSpanContainer = styled('span')(() => ({

package/src/components/respArea/__tests__/MathTemplated.test.jsx

@@ -11,7 +11,7 @@ jest.mock('@tiptap/react', () => ({
   ),
 }));
 
-jest.mock('@pie-lib/math-input', () => ({
+jest.mock('@pie-lib/math-input-mathlive', () => ({
   mq: {
     Static: ({ latex }) => (
       <div data-testid="mq-static" data-latex={latex}>

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__/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/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/LICENSE.md

@@ -1,5 +0,0 @@
-Copyright 2019 CoreSpring Inc
-
-Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.