@pie-lib/editable-html-tip-tap 1.2.0-next.31 → 1.2.0-next.33

package/lib/extensions/media.js

@@ -232,7 +232,9 @@ function MediaNodeView(_ref4) {
   })) : /*#__PURE__*/_react["default"].createElement("iframe", {
     src: src,
     allowFullScreen: true,
-    frameBorder: "0"
+    frameBorder: "0",
+    width: width,
+    height: height
   }), /*#__PURE__*/_react["default"].createElement(_MediaToolbar["default"], {
     onEdit: handleEdit,
     onRemove: deleteNode

package/lib/extensions/media.js.map

@@ -1 +1 @@
-{"version":3,"file":"media.js","names":["_react","_interopRequireWildcard","require","_reactDom","_interopRequireDefault","_core","_react2","_MediaDialog","_MediaToolbar","_excluded","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","Media","exports","Node","create","name","group","inline","atom","addAttributes","type","src","width","height","title","starts","ends","editing","tag","url","parseHTML","getAttrs","el","getAttribute","dataset","_el$querySelector","querySelector","renderHTML","_ref","HTMLAttributes","controls","controlsList","mergeAttributes","frameborder","allow","allowfullscreen","addCommands","_this","insertMedia","attrs","_ref2","commands","insertContent","updateMedia","_ref3","updateAttributes","addNodeView","_this2","ReactNodeViewRenderer","props","createElement","MediaNodeView","options","removeDialogs","prevDialogs","document","querySelectorAll","s","remove","insertDialog","newEl","callback","rest","_objectWithoutProperties2","initialBodyOverflow","body","style","overflow","className","handleClose","val","data","_extends2","uploadSoundSupport","disablePortal","open","ReactDOM","render","appendChild","_ref4","editor","node","deleteNode","_node$attrs","handleEdit","edit","chain","focus","run","useEffect","NodeViewWrapper","allowFullScreen","frameBorder","onEdit","onRemove"],"sources":["../../src/extensions/media.js"],"sourcesContent":["import React, { useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport { mergeAttributes, Node } from '@tiptap/core';\nimport { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';\nimport MediaDialog from '../components/media/MediaDialog';\nimport MediaToolbar from '../components/media/MediaToolbar';\n\nexport const Media = Node.create({\n  name: 'media',\n  group: 'inline',\n  inline: true,\n  atom: true,\n\n  addAttributes() {\n    return {\n      type: { default: 'video' },\n      src: { default: null },\n      width: { default: null },\n      height: { default: null },\n      title: { default: null },\n      starts: { default: null },\n      ends: { default: null },\n      editing: { default: false },\n      tag: { default: 'iframe' }, // 'iframe' or 'audio'\n      url: { default: null },\n    };\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'iframe[data-type=\"video\"]',\n        getAttrs: (el) => ({\n          type: 'video',\n          tag: 'iframe',\n          src: el.getAttribute('src'),\n          width: el.getAttribute('width'),\n          height: el.getAttribute('height'),\n          title: el.dataset.title,\n          starts: el.dataset.starts,\n          ends: el.dataset.ends,\n          url: el.dataset.url,\n        }),\n      },\n      {\n        tag: 'audio',\n        getAttrs: (el) => ({\n          type: 'audio',\n          tag: 'audio',\n          src: el.querySelector('source')?.getAttribute('src'),\n        }),\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    const { tag, src, width, height } = HTMLAttributes;\n\n    if (tag === 'audio') {\n      return ['audio', { controls: 'controls', controlsList: 'nodownload' }, ['source', { src, type: 'audio/mp3' }]];\n    }\n\n    return [\n      'iframe',\n      mergeAttributes(\n        {\n          'data-type': 'video',\n          frameborder: '0',\n          allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',\n          allowfullscreen: '',\n          src,\n        },\n        width ? { width } : {},\n        height ? { height } : {},\n      ),\n    ];\n  },\n\n  addCommands() {\n    return {\n      insertMedia:\n        (attrs) =>\n        ({ commands }) => {\n          return commands.insertContent({ type: this.name, attrs });\n        },\n      updateMedia:\n        (attrs) =>\n        ({ commands }) => {\n          return commands.updateAttributes(this.name, attrs);\n        },\n    };\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer((props) => <MediaNodeView {...{ ...props, options: this.options }} />);\n  },\n});\n\nconst removeDialogs = () => {\n  const prevDialogs = document.querySelectorAll('.insert-media-dialog');\n\n  prevDialogs.forEach((s) => s.remove());\n};\n\nexport const insertDialog = (props) => {\n  const newEl = document.createElement('div');\n  const { type, callback, options, ...rest } = props;\n  const initialBodyOverflow = document.body.style.overflow;\n\n  removeDialogs();\n\n  newEl.className = 'insert-media-dialog';\n  document.body.style.overflow = 'hidden';\n\n  const handleClose = (val, data) => {\n    callback(val, data);\n    newEl.remove();\n    document.body.style.overflow = initialBodyOverflow;\n  };\n\n  const el = (\n    <MediaDialog\n      {...rest}\n      uploadSoundSupport={options.uploadSoundSupport}\n      type={type}\n      disablePortal={true}\n      open={true}\n      handleClose={handleClose}\n    />\n  );\n\n  ReactDOM.render(el, newEl);\n\n  document.body.appendChild(newEl);\n};\n\nexport default function MediaNodeView({ editor, node, updateAttributes, deleteNode, options }) {\n  const { type, src, width, height, tag } = node.attrs;\n\n  const handleEdit = () => {\n    insertDialog({\n      ...node.attrs,\n      options: options,\n      edit: true,\n      callback: (val, data) => {\n        if (val) {\n          updateAttributes(data);\n        }\n\n        editor.chain().focus().run();\n      },\n    });\n  };\n\n  useEffect(() => {\n    // Only open dialog for newly inserted media without a src\n    if (!src) {\n      insertDialog({\n        ...node.attrs,\n        options: options,\n        edit: true,\n        callback: (val, data) => {\n          if (val) {\n            updateAttributes(data);\n          } else {\n            deleteNode();\n          }\n\n          editor.chain().focus().run();\n        },\n      });\n    }\n  }, []);\n\n  return (\n    <NodeViewWrapper data-type={type} style={{ width, height }}>\n      {tag === 'audio' ? (\n        <audio controls controlsList=\"nodownload\">\n          <source type=\"audio/mp3\" src={src} />\n        </audio>\n      ) : (\n        <iframe src={src} allowFullScreen frameBorder=\"0\" />\n      )}\n\n      <MediaToolbar onEdit={handleEdit} onRemove={deleteNode} />\n    </NodeViewWrapper>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"media.js","names":["_react","_interopRequireWildcard","require","_reactDom","_interopRequireDefault","_core","_react2","_MediaDialog","_MediaToolbar","_excluded","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","Media","exports","Node","create","name","group","inline","atom","addAttributes","type","src","width","height","title","starts","ends","editing","tag","url","parseHTML","getAttrs","el","getAttribute","dataset","_el$querySelector","querySelector","renderHTML","_ref","HTMLAttributes","controls","controlsList","mergeAttributes","frameborder","allow","allowfullscreen","addCommands","_this","insertMedia","attrs","_ref2","commands","insertContent","updateMedia","_ref3","updateAttributes","addNodeView","_this2","ReactNodeViewRenderer","props","createElement","MediaNodeView","options","removeDialogs","prevDialogs","document","querySelectorAll","s","remove","insertDialog","newEl","callback","rest","_objectWithoutProperties2","initialBodyOverflow","body","style","overflow","className","handleClose","val","data","_extends2","uploadSoundSupport","disablePortal","open","ReactDOM","render","appendChild","_ref4","editor","node","deleteNode","_node$attrs","handleEdit","edit","chain","focus","run","useEffect","NodeViewWrapper","allowFullScreen","frameBorder","onEdit","onRemove"],"sources":["../../src/extensions/media.js"],"sourcesContent":["import React, { useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport { mergeAttributes, Node } from '@tiptap/core';\nimport { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';\nimport MediaDialog from '../components/media/MediaDialog';\nimport MediaToolbar from '../components/media/MediaToolbar';\n\nexport const Media = Node.create({\n  name: 'media',\n  group: 'inline',\n  inline: true,\n  atom: true,\n\n  addAttributes() {\n    return {\n      type: { default: 'video' },\n      src: { default: null },\n      width: { default: null },\n      height: { default: null },\n      title: { default: null },\n      starts: { default: null },\n      ends: { default: null },\n      editing: { default: false },\n      tag: { default: 'iframe' }, // 'iframe' or 'audio'\n      url: { default: null },\n    };\n  },\n\n  parseHTML() {\n    return [\n      {\n        tag: 'iframe[data-type=\"video\"]',\n        getAttrs: (el) => ({\n          type: 'video',\n          tag: 'iframe',\n          src: el.getAttribute('src'),\n          width: el.getAttribute('width'),\n          height: el.getAttribute('height'),\n          title: el.dataset.title,\n          starts: el.dataset.starts,\n          ends: el.dataset.ends,\n          url: el.dataset.url,\n        }),\n      },\n      {\n        tag: 'audio',\n        getAttrs: (el) => ({\n          type: 'audio',\n          tag: 'audio',\n          src: el.querySelector('source')?.getAttribute('src'),\n        }),\n      },\n    ];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    const { tag, src, width, height } = HTMLAttributes;\n\n    if (tag === 'audio') {\n      return ['audio', { controls: 'controls', controlsList: 'nodownload' }, ['source', { src, type: 'audio/mp3' }]];\n    }\n\n    return [\n      'iframe',\n      mergeAttributes(\n        {\n          'data-type': 'video',\n          frameborder: '0',\n          allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',\n          allowfullscreen: '',\n          src,\n        },\n        width ? { width } : {},\n        height ? { height } : {},\n      ),\n    ];\n  },\n\n  addCommands() {\n    return {\n      insertMedia:\n        (attrs) =>\n        ({ commands }) => {\n          return commands.insertContent({ type: this.name, attrs });\n        },\n      updateMedia:\n        (attrs) =>\n        ({ commands }) => {\n          return commands.updateAttributes(this.name, attrs);\n        },\n    };\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer((props) => <MediaNodeView {...{ ...props, options: this.options }} />);\n  },\n});\n\nconst removeDialogs = () => {\n  const prevDialogs = document.querySelectorAll('.insert-media-dialog');\n\n  prevDialogs.forEach((s) => s.remove());\n};\n\nexport const insertDialog = (props) => {\n  const newEl = document.createElement('div');\n  const { type, callback, options, ...rest } = props;\n  const initialBodyOverflow = document.body.style.overflow;\n\n  removeDialogs();\n\n  newEl.className = 'insert-media-dialog';\n  document.body.style.overflow = 'hidden';\n\n  const handleClose = (val, data) => {\n    callback(val, data);\n    newEl.remove();\n    document.body.style.overflow = initialBodyOverflow;\n  };\n\n  const el = (\n    <MediaDialog\n      {...rest}\n      uploadSoundSupport={options.uploadSoundSupport}\n      type={type}\n      disablePortal={true}\n      open={true}\n      handleClose={handleClose}\n    />\n  );\n\n  ReactDOM.render(el, newEl);\n\n  document.body.appendChild(newEl);\n};\n\nexport default function MediaNodeView({ editor, node, updateAttributes, deleteNode, options }) {\n  const { type, src, width, height, tag } = node.attrs;\n\n  const handleEdit = () => {\n    insertDialog({\n      ...node.attrs,\n      options: options,\n      edit: true,\n      callback: (val, data) => {\n        if (val) {\n          updateAttributes(data);\n        }\n\n        editor.chain().focus().run();\n      },\n    });\n  };\n\n  useEffect(() => {\n    // Only open dialog for newly inserted media without a src\n    if (!src) {\n      insertDialog({\n        ...node.attrs,\n        options: options,\n        edit: true,\n        callback: (val, data) => {\n          if (val) {\n            updateAttributes(data);\n          } else {\n            deleteNode();\n          }\n\n          editor.chain().focus().run();\n        },\n      });\n    }\n  }, []);\n\n  return (\n    <NodeViewWrapper data-type={type} style={{ width, height }}>\n      {tag === 'audio' ? (\n        <audio controls controlsList=\"nodownload\">\n          <source type=\"audio/mp3\" src={src} />\n        </audio>\n      ) : (\n        <iframe src={src} allowFullScreen frameBorder=\"0\" width={width} height={height} />\n      )}\n\n      <MediaToolbar onEdit={handleEdit} onRemove={deleteNode} />\n    </NodeViewWrapper>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.2.0-next.31",
+  "version": "1.2.0-next.33",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -59,6 +59,6 @@
   "peerDependencies": {
     "react": "^18.2.0"
   },
-  "gitHead": "80a22e0d49de8a923a1130afa9532e6d2d58eadd",
+  "gitHead": "6133e279ef0d0e23137146ca279e7434c2f4dd99",
   "scripts": {}
 }

package/src/__tests__/EditableHtml.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
+import { useEditor } from '@tiptap/react';
 import { EditableHtml } from '../components/EditableHtml';
 
 // Mock TipTap dependencies
@@ -304,4 +305,40 @@ describe('EditableHtml', () => {
       expect(editorContent).toBeInTheDocument();
     });
   });
+
+  it('does not run blur onChange/onDone while an image insert flow is active', async () => {
+    jest.useFakeTimers();
+    const onChange = jest.fn();
+    const onDone = jest.fn();
+
+    render(
+      <EditableHtml
+        {...defaultProps}
+        markup="<p>Hello World</p>"
+        onChange={onChange}
+        onDone={onDone}
+        toolbarOpts={{ ...defaultProps.toolbarOpts, doneOn: 'blur' }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(useEditor).toHaveBeenCalled();
+    });
+
+    const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
+    const blurEditor = {
+      getHTML: jest.fn(() => '<p>changed</p>'),
+      _insertingImage: true,
+      _toolbarOpened: false,
+      isActive: jest.fn(() => false),
+    };
+
+    editorConfig.onBlur({ editor: blurEditor });
+    jest.advanceTimersByTime(200);
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onDone).not.toHaveBeenCalled();
+
+    jest.useRealTimers();
+  });
 });

package/src/components/EditableHtml.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import debounce from 'lodash-es/debounce';
 import { EditorContent, useEditor, useEditorState } from '@tiptap/react';
 import { styled } from '@mui/material/styles';
@@ -99,6 +99,19 @@ export const EditableHtml = (props) => {
   const [scheduled, setScheduled] = useState(false);
   const { toolbarOpts } = props;
 
+  const removePendingImage = useCallback(
+    (imagePos) => {
+      setPendingImages((prev) => {
+        const next = prev.filter((img) => img.pos !== imagePos);
+        if (next.length === 0) {
+          setScheduled(false);
+        }
+        return next;
+      });
+    },
+    [setPendingImages],
+  );
+
   const toolbarOptsToUse = {
     ...defaultToolbarOpts,
     ...toolbarOpts,
@@ -180,7 +193,7 @@ export const EditableHtml = (props) => {
       toolbarOpts: toolbarOptsToUse,
       imageHandling: {
         disableImageAlignmentButtons: props.disableImageAlignmentButtons,
-        onDone: () => props.onDone?.(editor.getHTML()),
+        onDone: (editor) => props.onDone?.(editor.getHTML()),
         onDelete:
           props.imageSupport &&
           props.imageSupport.delete &&
@@ -188,19 +201,14 @@ export const EditableHtml = (props) => {
             const { src } = node.attrs;
 
             props.imageSupport.delete(src, (e) => {
-              const newPendingImages = pendingImages.filter((img) => img.key !== node.key);
-              const newState = {
-                pendingImages: newPendingImages,
-                scheduled: scheduled && newPendingImages.length === 0 ? false : scheduled,
-              };
-
-              setPendingImages(newState.pendingImages);
-              setScheduled(newState.scheduled);
+              removePendingImage(node.pos);
             });
           }),
         insertImageRequested:
           props.imageSupport &&
-          ((addedImage, getHandler) => {
+          ((editor, imageInfo, getHandler) => {
+            const [addedImage, pos] = imageInfo;
+
             const onFinish = (result) => {
               let cb;
 
@@ -209,29 +217,39 @@ export const EditableHtml = (props) => {
                 cb = props.onChange;
               }
 
-              const newPendingImages = pendingImages.filter((img) => img.key !== addedImage.key);
-              const newState = {
-                pendingImages: newPendingImages,
-              };
-
-              if (newPendingImages.length === 0) {
-                newState.scheduled = false;
-              }
-
-              setPendingImages(newState.pendingImages);
-              setScheduled(newState.scheduled);
+              removePendingImage(pos);
               cb?.(editor.getHTML());
             };
+
             const callback = () => {
               /**
                * The handler is the object through which the outer context
                * communicates file upload events like: fileChosen, cancel, progress
                */
               const handler = getHandler(onFinish);
+
+              // If the user closes the file picker without choosing a file, the window regains
+              // focus while _insertingImage is still true — drop the stale pending entry.
+              const focusHandler = debounce(() => {
+                const detach = () => window.removeEventListener('focus', focusHandler);
+
+                if (!editor._insertingImage) {
+                  detach();
+                  return;
+                }
+
+                removePendingImage(pos);
+                editor._insertingImage = false;
+                detach();
+              }, 500);
+
+              window.addEventListener('focus', focusHandler);
+
               props.imageSupport.add(handler);
             };
 
-            setPendingImages([...pendingImages, addedImage]);
+            editor._insertingImage = true;
+            setPendingImages((prev) => [...prev, addedImage]);
             callback();
           }),
         maxImageWidth: props.maxImageWidth,
@@ -270,6 +288,7 @@ export const EditableHtml = (props) => {
       },
       onBlur: debounce(({ editor }) => {
         const otherToolbarOpened =
+          editor._insertingImage ||
           editor._toolbarOpened ||
           editor.isActive('inline_dropdown') ||
           editor.isActive('explicit_constructed_response');

package/src/components/__tests__/InsertImageHandler.test.js

@@ -6,13 +6,14 @@ describe('InsertImageHandler', () => {
     nodeSize: 1,
   };
 
+  const NODE_POS = 5;
+
+  const nodeInfo = (node = mockNode, pos = NODE_POS) => [node, pos];
+
   const createMockEditor = () => ({
+    _insertingImage: true,
     state: {
-      doc: {
-        descendants: jest.fn((callback) => {
-          callback(mockNode, 5);
-        }),
-      },
+      doc: {},
       tr: {
         setNodeMarkup: jest.fn((pos, type, attrs) => ({ setNodeMarkup: jest.fn() })),
         delete: jest.fn((from, to) => ({ delete: jest.fn() })),
@@ -31,36 +32,39 @@ describe('InsertImageHandler', () => {
 
   it('creates handler instance', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const info = nodeInfo();
+    const handler = new InsertImageHandler(editor, info, mockOnFinish);
     expect(handler).toBeDefined();
     expect(handler.editor).toBe(editor);
+    expect(handler.nodeInfo).toBe(info);
     expect(handler.node).toBe(mockNode);
     expect(handler.onFinish).toBe(mockOnFinish);
   });
 
-  it('stores nodePos from descendants', () => {
+  it('stores nodePos from nodeInfo tuple', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
-    expect(handler.nodePos).toBe(5);
+    const handler = new InsertImageHandler(editor, nodeInfo(mockNode, 42), mockOnFinish);
+    expect(handler.nodePos).toBe(42);
   });
 
   it('stores isPasted parameter', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish, true);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish, true);
     expect(handler.isPasted).toBe(true);
   });
 
   it('defaults isPasted to false', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     expect(handler.isPasted).toBe(false);
   });
 
   it('cancel deletes node and calls onFinish', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.cancel();
     expect(mockOnFinish).toHaveBeenCalledWith(false);
+    expect(editor._insertingImage).toBe(false);
   });
 
   it('updateNode dispatches transaction with new attributes', () => {
@@ -68,22 +72,23 @@ describe('InsertImageHandler', () => {
     const mockNodeAt = jest.fn(() => ({ attrs: { existing: 'value' } }));
     editor.state.doc.nodeAt = mockNodeAt;
 
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.updateNode({ newAttr: 'newValue' });
 
-    expect(mockNodeAt).toHaveBeenCalledWith(5);
+    expect(mockNodeAt).toHaveBeenCalledWith(NODE_POS);
     expect(editor.view.dispatch).toHaveBeenCalled();
   });
 
   it('done calls onFinish with false on error', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     const consoleLogSpy = jest.spyOn(console, 'log').mockImplementation();
 
     handler.done('error', null);
 
     expect(consoleLogSpy).toHaveBeenCalledWith('error');
     expect(mockOnFinish).toHaveBeenCalledWith(false);
+    expect(editor._insertingImage).toBe(false);
     consoleLogSpy.mockRestore();
   });
 
@@ -92,16 +97,17 @@ describe('InsertImageHandler', () => {
     const mockNodeAt = jest.fn(() => ({ attrs: {} }));
     editor.state.doc.nodeAt = mockNodeAt;
 
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.done(null, 'http://example.com/image.jpg');
 
     expect(editor.view.dispatch).toHaveBeenCalled();
     expect(mockOnFinish).toHaveBeenCalledWith(true);
+    expect(editor._insertingImage).toBe(false);
   });
 
   it('fileChosen returns early when no file provided', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.fileChosen(null);
     expect(editor.view.dispatch).not.toHaveBeenCalled();
   });
@@ -111,7 +117,7 @@ describe('InsertImageHandler', () => {
     const mockNodeAt = jest.fn(() => ({ attrs: {} }));
     editor.state.doc.nodeAt = mockNodeAt;
 
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     const mockFile = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
 
     global.FileReader = jest.fn(function () {
@@ -124,6 +130,7 @@ describe('InsertImageHandler', () => {
     handler.fileChosen(mockFile);
 
     expect(handler.chosenFile).toBe(mockFile);
+    expect(editor._insertingImage).toBe(false);
   });
 
   it('progress updates node with percent', () => {
@@ -131,7 +138,7 @@ describe('InsertImageHandler', () => {
     const mockNodeAt = jest.fn(() => ({ attrs: {} }));
     editor.state.doc.nodeAt = mockNodeAt;
 
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.progress(50, 500, 1000);
 
     expect(editor.view.dispatch).toHaveBeenCalled();
@@ -139,7 +146,7 @@ describe('InsertImageHandler', () => {
 
   it('getChosenFile returns the chosen file', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     const mockFile = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
     handler.chosenFile = mockFile;
 
@@ -148,7 +155,7 @@ describe('InsertImageHandler', () => {
 
   it('getChosenFile returns null initially', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     expect(handler.getChosenFile()).toBeNull();
   });
 });

package/src/components/image/InsertImageHandler.js

@@ -11,20 +11,11 @@ const log = debug('@pie-lib:editable-html:image:insert-image-handler');
  * @param {Boolean} isPasted - a boolean that keeps track if the file is pasted
  */
 class InsertImageHandler {
-  constructor(editor, node, onFinish, isPasted = false) {
+  constructor(editor, nodeInfo, onFinish, isPasted = false) {
     this.editor = editor;
-    this.node = node;
-
-    let nodePos;
-
-    editor.state.doc.descendants((node, pos) => {
-      if (node === this.node) {
-        nodePos = pos;
-        return false;
-      }
-    });
-
-    this.nodePos = nodePos;
+    this.nodeInfo = nodeInfo;
+    this.node = nodeInfo[0];
+    this.nodePos = nodeInfo[1];
     this.onFinish = onFinish;
     this.isPasted = isPasted;
     this.chosenFile = null;
@@ -38,6 +29,8 @@ class InsertImageHandler {
       this.onFinish(false);
     } catch (err) {
       //
+    } finally {
+      this.editor._insertingImage = false;
     }
   }
 
@@ -72,6 +65,8 @@ class InsertImageHandler {
       this.updateNode({ loaded: true, src, percent: 100 });
       this.onFinish(true);
     }
+
+    this.editor._insertingImage = false;
   }
 
   /**
@@ -86,6 +81,7 @@ class InsertImageHandler {
 
     // Save the chosen file to this.chosenFile
     this.chosenFile = file;
+    this.editor._insertingImage = false;
 
     log('[fileChosen] file: ', file);
     const reader = new FileReader();

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

@@ -35,19 +35,20 @@ jest.mock('../custom-toolbar-wrapper', () => ({
 }));
 
 describe('ImageComponent', () => {
-  const mockEditor = {
+  const MOCK_NODE_POS = 7;
+
+  const createMockEditor = (selection = { from: 0, to: 1 }) => ({
     _tiptapContainerEl: document.body,
     commands: {
       updateAttributes: jest.fn(),
       focus: jest.fn(),
     },
     state: {
-      selection: {
-        from: 0,
-        to: 1,
-      },
+      selection,
     },
-  };
+  });
+
+  let mockEditor = createMockEditor();
 
   const mockNode = {
     attrs: {
@@ -79,10 +80,14 @@ describe('ImageComponent', () => {
     options: mockOptions,
     attributes: {},
     onFocus: jest.fn(),
+    getPos: jest.fn(() => MOCK_NODE_POS),
   };
 
   beforeEach(() => {
     jest.clearAllMocks();
+    mockEditor = createMockEditor();
+    defaultProps.editor = mockEditor;
+    defaultProps.getPos = jest.fn(() => MOCK_NODE_POS);
   });
 
   it('renders without crashing', () => {
@@ -186,13 +191,28 @@ describe('ImageComponent', () => {
   });
 
   it('does not call insertImageRequested when image already has src', () => {
-    render(<ImageComponent {...defaultProps} />);
+    render(<ImageComponent {...defaultProps} selected={true} />);
+    expect(mockOptions.imageHandling.insertImageRequested).not.toHaveBeenCalled();
+  });
+
+  it('does not call insertImageRequested for empty placeholder on mount when not selected', () => {
+    const placeholderNode = {
+      ...mockNode,
+      attrs: {
+        ...mockNode.attrs,
+        src: null,
+        loaded: false,
+        percent: null,
+      },
+    };
+    render(<ImageComponent {...defaultProps} node={placeholderNode} selected={false} />);
     expect(mockOptions.imageHandling.insertImageRequested).not.toHaveBeenCalled();
   });
 
-  it('calls insertImageRequested on mount only for empty placeholder (no src)', () => {
+  it('calls insertImageRequested with editor and [node, pos] when empty placeholder is solely selected', async () => {
     const placeholderNode = {
       ...mockNode,
+      nodeSize: 1,
       attrs: {
         ...mockNode.attrs,
         src: null,
@@ -200,8 +220,37 @@ describe('ImageComponent', () => {
         percent: null,
       },
     };
-    render(<ImageComponent {...defaultProps} node={placeholderNode} />);
-    expect(mockOptions.imageHandling.insertImageRequested).toHaveBeenCalled();
+    mockEditor = createMockEditor({ from: 0, to: 1 });
+
+    render(<ImageComponent {...defaultProps} editor={mockEditor} node={placeholderNode} selected={true} />);
+
+    await waitFor(() => {
+      expect(mockOptions.imageHandling.insertImageRequested).toHaveBeenCalled();
+    });
+
+    expect(mockOptions.imageHandling.insertImageRequested).toHaveBeenCalledWith(
+      mockEditor,
+      [placeholderNode, MOCK_NODE_POS],
+      expect.any(Function),
+    );
+    expect(defaultProps.getPos).toHaveBeenCalled();
+  });
+
+  it('does not call insertImageRequested when selection spans beyond the image node', () => {
+    const placeholderNode = {
+      ...mockNode,
+      nodeSize: 1,
+      attrs: {
+        ...mockNode.attrs,
+        src: null,
+        loaded: false,
+        percent: null,
+      },
+    };
+    mockEditor = createMockEditor({ from: 0, to: 5 });
+
+    render(<ImageComponent {...defaultProps} editor={mockEditor} node={placeholderNode} selected={true} />);
+    expect(mockOptions.imageHandling.insertImageRequested).not.toHaveBeenCalled();
   });
 
   it('updates attributes through toolbar onChange', async () => {
@@ -261,4 +310,16 @@ describe('ImageComponent', () => {
     const img = container.querySelector('img');
     expect(img).toBeInTheDocument();
   });
+
+  it('passes editor to imageHandling onDone when Done is clicked', async () => {
+    const { getByTestId } = render(<ImageComponent {...defaultProps} selected={true} />);
+
+    await waitFor(() => {
+      expect(getByTestId('done-button')).toBeInTheDocument();
+    });
+
+    fireEvent.click(getByTestId('done-button'));
+
+    expect(mockOptions.imageHandling.onDone).toHaveBeenCalledWith(mockEditor);
+  });
 });