@pie-lib/editable-html-tip-tap 1.2.0-next.8 → 2.0.0

package/src/extensions/image-component.jsx

@@ -1,10 +1,11 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash-es/isEqual';
 import debug from 'debug';
 import LinearProgress from '@mui/material/LinearProgress';
 import { styled } from '@mui/material/styles';
 import { NodeViewWrapper } from '@tiptap/react';
+import ReactDOM from 'react-dom';
 import InsertImageHandler from '../components/image/InsertImageHandler';
 import ImageToolbar from '../components/image/ImageToolbar';
 import CustomToolbarWrapper from './custom-toolbar-wrapper';
@@ -26,9 +27,8 @@ const StyledProgress = styled(LinearProgress, {
 
 const StyledRoot = styled('div', {
   shouldForwardProp: (prop) => !['active', 'loading', 'pendingDelete'].includes(prop),
-})(({ theme, active, loading, pendingDelete }) => ({
+})(({ loading, pendingDelete }) => ({
   position: 'relative',
-  border: active ? `solid 1px ${theme.palette.primary.main}` : `solid 1px ${theme.palette.common.white}`,
   display: 'flex',
   transition: 'opacity 200ms linear',
   ...(loading && {
@@ -49,6 +49,12 @@ const StyledImageContainer = styled('div')(({ theme }) => ({
   },
 }));
 
+const StyledImage = styled('img', {
+  shouldForwardProp: (prop) => prop !== 'active',
+})(({ theme, active }) => ({
+  border: active ? `solid 1px ${theme.palette.primary.main}` : 'solid 1px transparent',
+}));
+
 const StyledResize = styled('div')(({ theme }) => ({
   backgroundColor: theme.palette.primary.main,
   cursor: 'col-resize',
@@ -68,15 +74,18 @@ function ImageComponent(props) {
     editor,
     attributes,
     onFocus,
+    getPos,
     selected,
     options,
     maxImageWidth = 700,
     maxImageHeight = 900,
-    latex,
-    handleChange,
-    handleDone,
   } = props;
   const { alt } = node.attrs;
+  const pos = getPos();
+
+  const selFrom = editor.state.selection.from;
+  const selTo = editor.state.selection.to;
+  const onlyThisNodeSelected = useMemo(() => selFrom + node.nodeSize === selTo, [selFrom, selTo, node.nodeSize]);
 
   const [showToolbar, setShowToolbar] = useState(false);
 
@@ -90,39 +99,66 @@ function ImageComponent(props) {
     return parseInt(floored.toFixed(0) * 25, 10);
   }, []);
 
+  const findNodePos = useCallback(() => {
+    const key = latestNodeRef.current.attrs.nodeKey;
+    let found = null;
+    editor.state.doc.descendants((n, pos) => {
+      if (found !== null) return false;
+      if (n.type.name === 'imageUploadNode' && n.attrs.nodeKey === key) {
+        found = pos;
+        return false;
+      }
+    });
+    return found;
+  }, [editor]);
+
+  // dispatch an attribute update targeted precisely at this node by nodeKey.
+  const updateThisNode = useCallback(
+    (newAttrs) => {
+      const nodePos = findNodePos();
+      if (nodePos === null) return;
+      const currentNode = editor.state.doc.nodeAt(nodePos);
+      if (!currentNode) return;
+      editor.view.dispatch(editor.state.tr.setNodeMarkup(nodePos, undefined, { ...currentNode.attrs, ...newAttrs }));
+    },
+    [editor, findNodePos],
+  );
+
   const applySizeData = useCallback(() => {
     if (!node.attrs.width || !imgRef.current) return;
-
-    const update = {
-      ...node.attrs,
-      resizePercent: getPercentFromWidth(node.attrs.width),
-    };
-
-    if (!isEqual(update, node.attrs)) {
-      editor.commands.updateAttributes('imageUploadNode', update);
-    }
-  }, [editor, node.attrs, getPercentFromWidth]);
+    const resizePercent = getPercentFromWidth(node.attrs.width);
+    if (node.attrs.resizePercent === resizePercent) return;
+    updateThisNode({ resizePercent });
+  }, [node.attrs.width, node.attrs.resizePercent, getPercentFromWidth, updateThisNode]);
 
   // keep ref in sync with latest node
   useEffect(() => {
-    latestNodeRef.current = node;
-  }, [node]);
+    latestNodeRef.current = { ...node, pos };
+  }, [node, pos]);
 
   useEffect(() => {
-    const { selection } = editor.state;
-    const onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;
-
     if (selected) {
       if (onlyThisNodeSelected) {
+        // 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();
+
+        if (!hasImageSrc && options.imageHandling?.insertImageRequested) {
+          options.imageHandling.insertImageRequested(
+            editor,
+            [node, pos],
+            (finish) => new InsertImageHandler(editor, [node, pos], finish),
+          );
+        }
+
         setShowToolbar(selected);
       }
     } else {
       setShowToolbar(selected);
     }
-  }, [editor, node, selected]);
+  }, [onlyThisNodeSelected, selected]);
 
   useEffect(() => {
-    options.imageHandling.insertImageRequested(node, (finish) => new InsertImageHandler(editor, node, finish));
     applySizeData();
 
     const resizeHandle = resizeRef.current;
@@ -133,8 +169,6 @@ function ImageComponent(props) {
       if (resizeHandle) {
         resizeHandle.removeEventListener('mousedown', initResize, false);
       }
-
-      options.imageHandling.onDelete(latestNodeRef.current);
     };
   }, []);
 
@@ -154,11 +188,11 @@ function ImageComponent(props) {
       box.style.height = `${h}px`;
 
       const update = { width: w, height: h };
-      if (!isEqual(update, node.attrs)) {
-        editor.commands.updateAttributes('imageUploadNode', update);
+      if (!isEqual(update, { width: node.attrs.width, height: node.attrs.height })) {
+        updateThisNode(update);
       }
     }
-  }, [editor, node.attrs, maxImageWidth, maxImageHeight]);
+  }, [node.attrs.width, node.attrs.height, maxImageWidth, maxImageHeight, updateThisNode]);
 
   const updateAspect = (initial, next, keepAspect = true, resizeType) => {
     if (keepAspect) {
@@ -186,20 +220,17 @@ function ImageComponent(props) {
         box.style.width = `${next.width}px`;
         box.style.height = `${next.height}px`;
 
-        const update = { width: next.width, height: next.height };
-        if (!isEqual(update, node.attrs)) {
-          editor.commands.updateAttributes('imageUploadNode', update);
-        }
+        updateThisNode({ width: next.width, height: next.height });
       }
     },
-    [editor, node.attrs],
+    [editor, updateThisNode],
   );
 
   const onChange = useCallback(
     (newValues) => {
-      editor.commands.updateAttributes('imageUploadNode', newValues);
+      updateThisNode(newValues);
     },
-    [editor],
+    [editor, updateThisNode],
   );
 
   const stopResize = useCallback(() => {
@@ -224,16 +255,17 @@ function ImageComponent(props) {
     <NodeViewWrapper>
       <StyledRoot
         onFocus={onFocus}
-        active={selected}
         loading={!node.attrs.loaded}
         pendingDelete={node.attrs.deleteStatus === 'pending'}
         style={{ justifyContent: flexAlign }}
       >
         <StyledProgress mode="determinate" value={node.attrs.percent || 0} hideProgress={node.attrs.loaded} />
 
-        <StyledImageContainer>
-          <img
+        <StyledImageContainer onDragStart={(e) => e.preventDefault()}>
+          <StyledImage
             {...attributes}
+            active={selected && node.attrs.loaded}
+            draggable={false}
             ref={imgRef}
             src={node.attrs.src}
             style={style}
@@ -244,39 +276,52 @@ function ImageComponent(props) {
         </StyledImageContainer>
       </StyledRoot>
 
-      {showToolbar && (
-        <div
-          ref={toolbarRef}
-          style={{
-            position: 'absolute',
-            top: '100%',
-            left: 0,
-            zIndex: 20,
-            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)',
-            width: '100%',
-          }}
-        >
-          <CustomToolbarWrapper
-            showDone
-            {...options}
-            onDone={() => {
-              setShowToolbar(false);
-              props.imageHandling?.onDone();
-              props.editor.commands.focus('end');
+      {showToolbar &&
+        editor._tiptapContainerEl &&
+        ReactDOM.createPortal(
+          <div
+            ref={toolbarRef}
+            style={{
+              zIndex: 20,
+              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)',
+              width: '100%',
             }}
           >
-            <ImageToolbar
-              disableImageAlignmentButtons={options.disableImageAlignmentButtons}
-              alt={node.attrs.alt}
-              imageLoaded={node.attrs.loaded}
-              alignment={node.attrs.alignment || 'left'}
-              onChange={onChange}
-            />
-          </CustomToolbarWrapper>
-        </div>
-      )}
+            <CustomToolbarWrapper
+              showDone
+              deletable
+              toolbarOpts={options.toolbarOpts || {}}
+              onDelete={() => {
+                const nodePos = findNodePos();
+                if (nodePos === null) return;
+
+                options.imageHandling?.onDelete?.(latestNodeRef.current);
+
+                editor.view.dispatch(
+                  editor.state.tr.delete(nodePos, nodePos + editor.state.doc.nodeAt(nodePos).nodeSize),
+                );
+                setShowToolbar(false);
+                editor.commands.focus();
+              }}
+              onDone={() => {
+                setShowToolbar(false);
+                options.imageHandling?.onDone?.(editor);
+                editor.commands.focus('end');
+              }}
+            >
+              <ImageToolbar
+                disableImageAlignmentButtons={options.imageHandling?.disableImageAlignmentButtons}
+                alt={node.attrs.alt}
+                imageLoaded={node.attrs.loaded}
+                alignment={node.attrs.alignment || 'left'}
+                onChange={onChange}
+              />
+            </CustomToolbarWrapper>
+          </div>,
+          editor._tiptapContainerEl,
+        )}
     </NodeViewWrapper>
   );
 }

package/src/extensions/image.js

@@ -1,7 +1,9 @@
 import { mergeAttributes, Node } from '@tiptap/core';
 import { ReactNodeViewRenderer } from '@tiptap/react';
+import { Plugin } from '@tiptap/pm/state';
 import React from 'react';
 import ImageComponent from './image-component';
+import { node } from 'prop-types';
 
 export const ImageUploadNode = Node.create({
   name: 'imageUploadNode',
@@ -13,6 +15,7 @@ export const ImageUploadNode = Node.create({
 
   addAttributes() {
     return {
+      nodeKey: { default: null },
       loaded: { default: false },
       deleteStatus: { default: null },
       alignment: { default: null },
@@ -27,7 +30,7 @@ export const ImageUploadNode = Node.create({
   parseHTML() {
     return [
       {
-        tag: 'div[data-type="image-upload-node"]',
+        tag: 'img[data-type="image-upload-node"]',
       },
     ];
   },
@@ -47,8 +50,60 @@ export const ImageUploadNode = Node.create({
         ({ commands }) => {
           return commands.insertContent({
             type: this.name,
+              // adding a unique nodeKey attribute to help identify this node instance later due to issues with multiple images
+              attrs: { nodeKey: `img-${Date.now()}-${Math.random().toString(36).slice(2)}` },
           });
         },
     };
   },
+
+  addProseMirrorPlugins() {
+    const editor = this.editor;
+
+    return [
+      new Plugin({
+        props: {
+          handlePaste(view, event) {
+            const items = Array.from(event.clipboardData?.items || []);
+
+            const imageItem = items.find((item) => item.kind === 'file' && item.type.startsWith('image/'));
+
+            if (!imageItem) {
+              return false;
+            }
+
+            const file = imageItem.getAsFile();
+
+            if (!file) {
+              return false;
+            }
+
+            // Example 1: insert as base64 immediately
+            const reader = new FileReader();
+
+            reader.onload = () => {
+              const src = reader.result;
+
+              if (typeof src !== 'string') {
+                return;
+              }
+
+              editor.commands.insertContent({
+                type: 'imageUploadNode',
+                attrs: {
+                  src,
+                  loaded: true,
+                  nodeKey: `img-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+                },
+              });
+            };
+
+            reader.readAsDataURL(file);
+
+            return true;
+          },
+        },
+      }),
+    ];
+  },
 });

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,22 +216,48 @@ 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 the click originated from the math node preview itself (the element
+      // that opens the toolbar), ignore it here — the node's own onClick handler
+      // 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');
+
       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 &&
+        !clickedMathNode
       ) {
         setShowToolbar(false);
       }
     };
 
     if (showToolbar) {
-      document.addEventListener('mousedown', handleClickOutside);
+      // Use `click` (not `mousedown`) so interacting with browser UI like the scrollbar
+      // doesn't automatically dismiss the math toolbar.
+      document.addEventListener('click', handleClickOutside);
     } else {
-      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('click', handleClickOutside);
     }
 
-    return () => document.removeEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
   }, [editor, showToolbar]);
 
   const handleChange = (newLatex) => {
@@ -253,19 +296,28 @@ export const MathNodeView = (props) => {
         ReactDOM.createPortal(
           <div
             ref={toolbarRef}
+            data-toolbar-for={editor.instanceId}
             style={{
-              position: 'absolute',
-              top: `${position.top}px`,
-              left: `${position.left}px`,
+              marginTop: '6px',
               zIndex: 20,
               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)',
             }}
           >
-            <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,
+          editor?._tiptapContainerEl || document.body,
         )}
     </NodeViewWrapper>
   );

package/src/extensions/media.js

@@ -179,7 +179,7 @@ export default function MediaNodeView({ editor, node, updateAttributes, deleteNo
           <source type="audio/mp3" src={src} />
         </audio>
       ) : (
-        <iframe src={src} allowFullScreen frameBorder="0" />
+        <iframe src={src} allowFullScreen frameBorder="0" width={width} height={height} />
       )}
 
       <MediaToolbar onEdit={handleEdit} onRemove={deleteNode} />

package/src/extensions/responseArea.js

@@ -5,6 +5,7 @@ import { Node, ReactNodeViewRenderer } from '@tiptap/react';
 import ExplicitConstructedResponse from '../components/respArea/ExplicitConstructedResponse';
 import DragInTheBlank from '../components/respArea/DragInTheBlank/DragInTheBlank';
 import InlineDropdown from '../components/respArea/InlineDropdown';
+import MathTemplated from '../components/respArea/MathTemplated';
 
 const lastIndexMap = {};
 
@@ -141,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;
@@ -155,7 +158,9 @@ export const ResponseAreaExtension = Extension.create({
             index: newIndex,
           });
 
-          if (!newInline) return false;
+          if (!newInline) {
+            return false;
+          }
 
           // --- Insert logic ---
           const { selection } = state;
@@ -181,20 +186,18 @@ 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))
 
           // --- Cursor move behavior for certain types (Slate: moveFocusTo next text) ---
-          if (
-            ['math_templated', 'inline_dropdown', 'drag_in_the_blank', 'explicit_constructed_response'].includes(
-              typeName,
-            )
-          ) {
+          if (['math_templated', 'inline_dropdown', 'explicit_constructed_response'].includes(typeName)) {
             tr.setSelection(NodeSelection.create(tr.doc, usedPos));
           } else {
-            // Default: put cursor after inserted node
             const after = usedPos + newInline.nodeSize;
             tr.setSelection(selectionAfterPos(tr.doc, after));
           }
@@ -213,7 +216,7 @@ export const ResponseAreaExtension = Extension.create({
           const node = selection.$from.nodeAfter;
           const nodePos = selection.from;
 
-          tr.setNodeMarkup(nodePos, undefined, { ...node.attrs, updated: `${Date.now()}` });
+          tr.setNodeMarkup(nodePos, undefined, { ...node?.attrs, updated: `${Date.now()}` });
           tr.setSelection(NodeSelection.create(tr.doc, nodePos));
 
           if (dispatch) {
@@ -305,7 +308,7 @@ export const MathTemplatedNode = Node.create({
     ];
   },
   addNodeView() {
-    return ReactNodeViewRenderer(() => <div></div>);
+    return ReactNodeViewRenderer((props) => <MathTemplated {...{ ...props, options: this.options }} />);
   },
 });
 

package/src/styles/editorContainerStyles.js

@@ -68,7 +68,7 @@ const styles = (theme) => ({
       background: 'var(--black)',
       borderRadius: '0.5rem',
       color: 'var(--white)',
-      fontFamily: "'JetBrainsMono', monospace",
+      fontFamily: '\'JetBrainsMono\', monospace',
       margin: '1.5rem 0',
       padding: '0.75rem 1rem',
 
@@ -81,9 +81,10 @@ const styles = (theme) => ({
     },
 
     '& blockquote': {
-      borderLeft: '3px solid var(--gray-3)',
-      margin: '1.5rem 0',
-      paddingLeft: '1rem',
+      background: '#f9f9f9',
+      borderLeft: '5px solid #ccc',
+      margin: '1.5em 10px',
+      padding: '.5em 10px',
     },
 
     '& hr': {

package/src/utils/helper.js

@@ -0,0 +1,17 @@
+const escapeHtml = (str) =>
+  String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+
+export const normalizeInitialMarkup = (markup) => {
+  const trimmed = String(markup ?? '').trim();
+  if (!trimmed) return '<div></div>';
+
+  const looksLikeHtml = /<[^>]+>/.test(trimmed);
+  if (looksLikeHtml) return trimmed;
+
+  return `<div>${escapeHtml(trimmed)}</div>`;
+};