@pie-lib/editable-html-tip-tap 1.2.0-next.21 → 1.2.0-next.23

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

@@ -258,6 +258,140 @@ describe('ResponseAreaExtension', () => {
 
       expect(mockTr.setNodeMarkup).toHaveBeenCalled();
     });
+
+    describe('insertResponseArea', () => {
+      beforeEach(() => {
+        jest.resetModules();
+      });
+
+      const buildInsertCommand = () => {
+        const { ResponseAreaExtension } = require('../responseArea');
+        const context = {
+          options: {
+            type: 'inline-dropdown',
+            maxResponseAreas: 5,
+          },
+        };
+        const commands = ResponseAreaExtension.addCommands.call(context);
+        return commands.insertResponseArea('inline-dropdown');
+      };
+
+      const createDoc = (existingCount, typeName = 'inline_dropdown') => ({
+        descendants: jest.fn((callback) => {
+          for (let i = 0; i < existingCount; i += 1) {
+            callback({ type: { name: typeName } }, i);
+          }
+        }),
+        content: { size: 50 },
+      });
+
+      it('assigns index 1 and id 1 on the first insert', () => {
+        const insert = buildInsertCommand();
+        const mockInlineNode = { nodeSize: 1 };
+        const create = jest.fn(() => mockInlineNode);
+        const mockDoc = createDoc(0);
+        const mockTr = {
+          insert: jest.fn(),
+          doc: mockDoc,
+          setSelection: jest.fn(),
+        };
+        const state = {
+          schema: {
+            nodes: {
+              inline_dropdown: { create },
+            },
+          },
+          doc: mockDoc,
+          selection: { from: 5 },
+        };
+        const mockDispatch = jest.fn();
+        const mockCommands = { focus: jest.fn() };
+
+        const result = insert({
+          tr: mockTr,
+          state,
+          dispatch: mockDispatch,
+          commands: mockCommands,
+        });
+
+        expect(result).toBe(true);
+        expect(create).toHaveBeenCalledWith({
+          index: '1',
+          id: '1',
+          value: '',
+        });
+        expect(mockTr.insert).toHaveBeenCalledWith(5, mockInlineNode);
+        expect(mockDispatch).toHaveBeenCalled();
+      });
+
+      it('assigns consecutive indices on repeated inserts', () => {
+        const insert = buildInsertCommand();
+        const mockInlineNode = { nodeSize: 1 };
+        const create = jest.fn(() => mockInlineNode);
+        const mockDoc = createDoc(0);
+
+        const runOnce = () => {
+          const mockTr = {
+            insert: jest.fn(),
+            doc: mockDoc,
+            setSelection: jest.fn(),
+          };
+          const state = {
+            schema: {
+              nodes: {
+                inline_dropdown: { create },
+              },
+            },
+            doc: mockDoc,
+            selection: { from: 1 },
+          };
+          insert({
+            tr: mockTr,
+            state,
+            dispatch: jest.fn(),
+            commands: { focus: jest.fn() },
+          });
+        };
+
+        runOnce();
+        runOnce();
+
+        expect(create.mock.calls[0][0]).toEqual({ index: '1', id: '1', value: '' });
+        expect(create.mock.calls[1][0]).toEqual({ index: '2', id: '2', value: '' });
+      });
+
+      it('returns false when maxResponseAreas is reached', () => {
+        const insert = buildInsertCommand();
+        const mockInlineNode = { nodeSize: 1 };
+        const create = jest.fn(() => mockInlineNode);
+        const mockDoc = createDoc(5);
+        const mockTr = {
+          insert: jest.fn(),
+          doc: mockDoc,
+          setSelection: jest.fn(),
+        };
+        const state = {
+          schema: {
+            nodes: {
+              inline_dropdown: { create },
+            },
+          },
+          doc: mockDoc,
+          selection: { from: 5 },
+        };
+
+        const result = insert({
+          tr: mockTr,
+          state,
+          dispatch: jest.fn(),
+          commands: { focus: jest.fn() },
+        });
+
+        expect(result).toBe(false);
+        expect(create).not.toHaveBeenCalled();
+        expect(mockTr.insert).not.toHaveBeenCalled();
+      });
+    });
   });
 });
 

package/src/extensions/custom-toolbar-wrapper.jsx

@@ -48,7 +48,7 @@ const SharedContainer = styled('div')({
 });
 
 function CustomToolbarWrapper(props) {
-  const { children, deletable, toolbarOpts, autoWidth, isFocused, doneButtonRef, onDelete, showDone, onDone } = props;
+  const { children, deletable, toolbarOpts, autoWidth, isFocused, doneButtonRef, onDelete, showDone, onDone, style } = props;
   const customStyles = toolbarOpts.minWidth !== undefined ? { minWidth: toolbarOpts.minWidth } : {};
 
   return (
@@ -59,7 +59,7 @@ function CustomToolbarWrapper(props) {
       isFocused={toolbarOpts.alwaysVisible || isFocused}
       autoWidth={autoWidth}
       isHidden={toolbarOpts.isHidden === true}
-      style={{ ...customStyles }}
+      style={{ ...customStyles, ...style }}
     >
       {children}
 

package/src/extensions/div-node.js

@@ -31,6 +31,46 @@ export const DivNode = Node.create({
           .splitBlock() // create another <p>
           .run();
       },
+
+      // When the cursor is in a div and the user presses Backspace,
+      // ProseMirror's default handler may try to join/delete the block node
+      // once it becomes empty. That triggers the Enter shortcut above
+      // (div → p conversion + split), making it look like a new line is
+      // inserted instead of deleting.
+      // We handle two cases explicitly:
+      //  1. The div already IS empty → swallow the event (nothing to delete).
+      //  2. The div has exactly ONE character left → delete just that character
+      //     using a precise transaction, then stop. This prevents ProseMirror
+      //     from following up with a block-join that triggers the Enter handler.
+      Backspace: () => {
+        const { state } = this.editor;
+        const { $from, empty: selectionEmpty } = state.selection;
+
+        if ($from.parent.type.name !== 'div') {
+          return false;
+        }
+
+        if (!selectionEmpty) {
+          return false;
+        }
+
+        const parentText = $from.parent.textContent;
+
+        if (parentText.length === 0) {
+          return state.doc.childCount === 1 ? true : false;
+        }
+
+        // one character left and cursor is after it — delete
+        // only that character and stop, preventing the block-join that fires Enter.
+        if (parentText.length === 1 && $from.parentOffset === 1) {
+          const { tr } = state;
+          tr.delete($from.pos - 1, $from.pos);
+          this.editor.view.dispatch(tr);
+          return true;
+        }
+
+        return false;
+      },
     };
   },
 });

package/src/extensions/math.js

@@ -8,6 +8,15 @@ import { wrapMath } from '@pie-lib/math-rendering';
 
 const ensureTextAfterMathPluginKey = new PluginKey('ensureTextAfterMath');
 
+const generateAdditionalKeys = (keyData = []) => {
+  return keyData.map((key) => ({
+    name: key,
+    latex: key,
+    write: key,
+    label: key,
+  }));
+};
+
 export const EnsureTextAfterMathPlugin = (mathNodeName) =>
   new Plugin({
     key: ensureTextAfterMathPluginKey,
@@ -175,6 +184,14 @@ export const MathNodeView = (props) => {
   const [showToolbar, setShowToolbar] = useState(selected);
   const toolbarRef = useRef(null);
   const [position, setPosition] = useState({ top: 0, left: 0 });
+  const { math: mathOptions = {} } = options || {};
+  const {
+    keypadMode,
+    controlledKeypadMode = true,
+    customKeys = [],
+    keyPadCharacterRef,
+    setKeypadInteraction,
+  } = mathOptions;
 
   const latex = node.attrs.latex || '';
 
@@ -199,10 +216,26 @@ export const MathNodeView = (props) => {
     });
 
     const handleClickOutside = (event) => {
+      const target = event?.target;
+
+      // MUI's `Select` renders its dropdown options in a portal attached to `document.body`.
+      // Those clicks should not dismiss the math toolbar.
+      const equationEditorListboxes =
+        document.querySelectorAll?.(
+          '[id^="equation-editor-select"][id*="listbox"], [aria-labelledby="equation-editor-label"][role="listbox"]',
+        ) || [];
+
+      const equationEditorPopoverOpen = equationEditorListboxes.length > 0;
+      const clickedEquationEditorSelect =
+        !!(target?.id && target.id.includes('equation-editor-select')) ||
+        !!target?.closest?.('[id*="equation-editor-select"]');
+
       if (
         toolbarRef.current &&
-        !toolbarRef.current.contains(event.target) &&
-        !event.target.closest('[data-inline-node]')
+        !toolbarRef.current.contains(target) &&
+        !target?.closest?.('[data-inline-node]') &&
+        !equationEditorPopoverOpen &&
+        !clickedEquationEditorSelect
       ) {
         setShowToolbar(false);
       }
@@ -266,7 +299,17 @@ export const MathNodeView = (props) => {
                 '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)',
             }}
           >
-            <MathToolbar latex={latex} autoFocus onChange={handleChange} onDone={handleDone} keypadMode="basic" />
+            <MathToolbar
+              latex={latex}
+              autoFocus
+              onChange={handleChange}
+              onDone={handleDone}
+              keypadMode={keypadMode}
+              controlledKeypadMode={controlledKeypadMode}
+              additionalKeys={generateAdditionalKeys(customKeys)}
+              keyPadCharacterRef={keyPadCharacterRef}
+              setKeypadInteraction={setKeypadInteraction}
+            />
           </div>,
           document.body,
         )}

package/src/extensions/responseArea.js

@@ -142,10 +142,12 @@ export const ResponseAreaExtension = Extension.create({
           }
 
           // --- Slate: indexing logic (kept identical) ---
-          if (lastIndexMap[typeName] === undefined) lastIndexMap[typeName] = 0;
+          if (lastIndexMap[typeName] === undefined) {
+            lastIndexMap[typeName] = 0;
+          }
 
           const prevIndex = lastIndexMap[typeName];
-          const newIndex = prevIndex === 0 ? prevIndex : prevIndex + 1;
+          const newIndex = prevIndex + 1;
 
           // Slate increments map even if newIndex === 0
           lastIndexMap[typeName] += 1;
@@ -156,7 +158,9 @@ export const ResponseAreaExtension = Extension.create({
             index: newIndex,
           });
 
-          if (!newInline) return false;
+          if (!newInline) {
+            return false;
+          }
 
           // --- Insert logic ---
           const { selection } = state;
@@ -182,7 +186,10 @@ export const ResponseAreaExtension = Extension.create({
           if (usedPos == null) {
             usedPos = tryInsertAt(tr.doc.content.size);
           }
-          if (usedPos == null) return false;
+
+          if (usedPos == null) {
+            return false;
+          }
 
           // Optionally select the node you just inserted (like your original command)
           // tr.setSelection(NodeSelection.create(tr.doc, usedPos))