rme 0.3.0-beta.5 → 0.3.0-beta.7

package/dist/index.mjs

@@ -890,9 +890,21 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
     color: ${(props) => props.theme.labelFontColor};
   }
 
-  .md-mark {
-    color: ${(props) => props.theme.accentColor};
-    font-size: 0;
+  & .inline-loading {
+    width: min-content;
+    height: min-content;
+    display: inline-block;
+    font-size: 16px;
+    animation: loading-icon-spin 1s linear infinite;
+  }
+
+  @keyframes loading-icon-spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
   }
 
   .html_tag {
@@ -3798,40 +3810,6 @@ var LineBlockquoteExtension = class extends BlockquoteExtension {
 // src/editor/extensions/Clipboard/clipboard-extension.ts
 import { extension as extension2, PlainExtension as PlainExtension2 } from "@rme-sdk/core";
 import { DOMParser as DOMParser2, Fragment as Fragment3, Slice } from "@rme-sdk/pm/model";
-
-// src/editor/inline-input-regex/index.ts
-var getMdImageInputRule = (nodeType) => [
-  {
-    regexp: /!\[([^\]]*)\]\(([^\s"]+(?:\s+[^\s"]+)*)?(?:\s+"(.*?)")?\)/,
-    type: nodeType,
-    getAttributes: (match) => {
-      const [, alt, src, title] = match;
-      return { alt, src, title };
-    }
-  }
-];
-var getInlineMathInputRule = (nodeType) => [
-  // Typed inline math trigger: $$ -> insert empty inline math and focus inside
-  {
-    regexp: /\$\$(?!\$)/,
-    type: nodeType,
-    getAttributes: () => ({ tex: "", fromInput: true })
-  },
-  {
-    regexp: /<span[^>]*data-type=["']math-inline["'][^>]*><\/span>/,
-    type: nodeType,
-    getAttributes: () => ({ fromInput: false })
-  },
-  {
-    regexp: /\$([^$\n]+?)\$/,
-    type: nodeType,
-    getAttributes: (match) => {
-      return { tex: match[1] ?? "", fromInput: true };
-    }
-  }
-];
-
-// src/editor/extensions/Clipboard/clipboard-extension.ts
 function isPureText(content) {
   if (!content) return false;
   if (Array.isArray(content)) {
@@ -3854,6 +3832,64 @@ function isTextOnlySlice(slice) {
   return false;
 }
 var ClipboardExtension = class extends PlainExtension2 {
+  constructor() {
+    super(...arguments);
+    this.handleClipboardData = async ({
+      html: html2 = "",
+      text = "",
+      view
+    }) => {
+      const editable = view.props.editable?.(view.state);
+      if (!editable) return false;
+      const currentNode = view.state.selection.$from.node();
+      if (currentNode.type.spec.code) return false;
+      if (html2.length === 0 && text.length === 0) return false;
+      console.log("html", html2);
+      console.log("text", text);
+      const transformer = getTransformerByView(view);
+      const parser = transformer.stringToDoc;
+      const schema = view.state.schema;
+      const domParser = DOMParser2.fromSchema(schema);
+      let dom;
+      if (html2.length === 0) {
+        const slice2 = parser?.(text);
+        if (!slice2 || typeof slice2 === "string") return false;
+        const nodes = [];
+        slice2.content.forEach((node2, index) => {
+          if (node2.type.name === "paragraph" && index === 0) {
+            node2.content.forEach((child) => {
+              nodes.push(child);
+            });
+          } else {
+            nodes.push(node2);
+          }
+        });
+        this.processImagesInNodesSync(nodes, view);
+        if (nodes.length === 1) {
+          view.dispatch(view.state.tr.replaceSelectionWith(nodes[0], false));
+        } else {
+          const fragment = Fragment3.from(nodes);
+          view.dispatch(view.state.tr.replaceSelection(new Slice(fragment, 0, 0)));
+        }
+        return true;
+      } else {
+        const template = document.createElement("template");
+        template.innerHTML = html2;
+        dom = template.content.cloneNode(true);
+        template.remove();
+      }
+      const slice = domParser.parseSlice(dom);
+      const node = isTextOnlySlice(slice);
+      if (node) {
+        node.attrs["data-rme-from-paste"] = "true";
+        view.dispatch(view.state.tr.replaceSelectionWith(node, true));
+        return true;
+      }
+      this.processImagesInSliceAsync(slice, view);
+      view.dispatch(view.state.tr.replaceSelection(slice));
+      return true;
+    };
+  }
   get name() {
     return "clipboard";
   }
@@ -3861,61 +3897,13 @@ var ClipboardExtension = class extends PlainExtension2 {
     return {
       props: {
         handlePaste: (view, event) => {
-          const transformer = getTransformerByView(view);
-          const parser = transformer.stringToDoc;
-          const schema = view.state.schema;
-          const editable = view.props.editable?.(view.state);
           const { clipboardData } = event;
-          if (!editable || !clipboardData) return false;
+          if (!clipboardData) return false;
           const currentNode = view.state.selection.$from.node();
           if (currentNode.type.spec.code) return false;
           const text = clipboardData.getData("text/plain");
           const html2 = clipboardData.getData("text/html");
-          if (html2.length === 0 && text.length === 0) return false;
-          const domParser = DOMParser2.fromSchema(schema);
-          let dom;
-          if (html2.length === 0) {
-            const slice2 = parser?.(text);
-            if (!slice2 || typeof slice2 === "string") return false;
-            const res = [];
-            slice2.content.forEach((node2, index) => {
-              if (node2.type.name === "paragraph" && index === 0) {
-                node2.content.forEach((child) => {
-                  res.push(child);
-                });
-              } else {
-                res.push(node2);
-              }
-            });
-            this.processImagesInNodesAsync(res, view);
-            if (res.length === 1) {
-              view.dispatch(view.state.tr.replaceSelectionWith(res[0], false));
-            } else {
-              const fragment = Fragment3.from(res);
-              view.dispatch(view.state.tr.replaceSelection(new Slice(fragment, 0, 0)));
-            }
-            return true;
-          } else {
-            const template = document.createElement("template");
-            template.innerHTML = html2;
-            dom = template.content.cloneNode(true);
-            template.remove();
-          }
-          const slice = domParser.parseSlice(dom);
-          const node = isTextOnlySlice(slice);
-          if (node) {
-            if ((node.type.name === "html_image" || node.type.name === "md_image") && node.attrs.src) {
-              this.processImageNode(node, view);
-              view.dispatch(view.state.tr.replaceSelectionWith(node, true));
-            } else {
-              this.processMarkdownImageSyntax(node, view).then(() => {
-                view.dispatch(view.state.tr.replaceSelectionWith(node, true));
-              });
-            }
-            return true;
-          }
-          this.processImagesInSliceAsync(slice, view);
-          view.dispatch(view.state.tr.replaceSelection(slice));
+          this.handleClipboardData({ text, html: html2, view });
           return true;
         },
         clipboardTextSerializer: (slice, view) => {
@@ -3950,66 +3938,13 @@ var ClipboardExtension = class extends PlainExtension2 {
         return (params) => {
           const { view } = params;
           if (!view) return false;
-          const transformer = getTransformerByView(view);
-          const parser = transformer.stringToDoc;
-          const schema = view.state.schema;
-          const editable = view.props.editable?.(view.state);
           if (!this.options.clipboardReadFunction) {
             return false;
           }
           this.options.clipboardReadFunction().then(async (data) => {
             let { html: html2, text } = data;
-            if (!editable || !html2 || !text) return false;
-            const currentNode = view.state.selection.$from.node();
-            if (currentNode.type.spec.code) return false;
-            if (html2.length === 0 && text.length === 0) return false;
-            console.log("html", html2);
-            console.log("text", text);
-            const domParser = DOMParser2.fromSchema(schema);
-            let dom;
-            if (html2.length === 0) {
-              const slice2 = parser?.(text);
-              if (!slice2 || typeof slice2 === "string") return false;
-              const res = [];
-              slice2.content.forEach((node2, index) => {
-                if (node2.type.name === "paragraph" && index === 0) {
-                  node2.content.forEach((child) => {
-                    res.push(child);
-                  });
-                } else {
-                  res.push(node2);
-                }
-              });
-              this.processImagesInNodesAsync(res, view);
-              if (res.length === 1) {
-                view.dispatch(view.state.tr.replaceSelectionWith(res[0], false));
-              } else {
-                const fragment = Fragment3.from(res);
-                view.dispatch(view.state.tr.replaceSelection(new Slice(fragment, 0, 0)));
-              }
-              return true;
-            } else {
-              const template = document.createElement("template");
-              template.innerHTML = html2;
-              dom = template.content.cloneNode(true);
-              template.remove();
-            }
-            const slice = domParser.parseSlice(dom);
-            const node = isTextOnlySlice(slice);
-            console.log("slice", slice, node);
-            if (node) {
-              if ((node.type.name === "html_image" || node.type.name === "md_image") && node.attrs.src) {
-                this.processImageNode(node, view);
-                view.dispatch(view.state.tr.replaceSelectionWith(node, true));
-              } else {
-                this.processMarkdownImageSyntax(node, view).then(() => {
-                  view.dispatch(view.state.tr.replaceSelectionWith(node, true));
-                });
-              }
-              return true;
-            }
-            this.processImagesInSliceAsync(slice, view);
-            view.dispatch(view.state.tr.replaceSelection(slice));
+            if (!html2 || !text) return false;
+            return await this.handleClipboardData({ html: html2, text, view });
           });
           return true;
         };
@@ -4027,60 +3962,16 @@ var ClipboardExtension = class extends PlainExtension2 {
       }
     };
   }
-  /**
-   * Process markdown image syntax in text nodes and update their src attributes using imageCopyHandler
-   */
-  async processMarkdownImageSyntax(node, view) {
-    const { imageCopyHandler } = this.options;
-    if (!imageCopyHandler) return;
-    const imageRegex = new RegExp(getMdImageInputRule("md_image")[0]?.regexp, "g");
-    const processTextNode = async (n) => {
-      if (n.isText && n.text) {
-        let match;
-        imageRegex.lastIndex = 0;
-        while ((match = imageRegex.exec(n.text)) !== null) {
-          const [, , src] = match;
-          if (src) {
-            const newSrc = await imageCopyHandler(src);
-            if (newSrc && newSrc !== src) {
-              n.text = n.text.replace(src, newSrc);
-            }
-          }
-        }
-      }
-      if (n.content && n.content.size > 0) {
-        n.content.forEach((child) => {
-          processTextNode(child);
-        });
-      }
-    };
-    await processTextNode(node);
-  }
   /**
    * Process a single image node asynchronously and update its src attribute using imageCopyHandler
    */
   processImageNode(node, view) {
-    const { imageCopyHandler } = this.options;
-    if (!imageCopyHandler || !node.attrs.src) return;
-    node.attrs["data-rme-loading"] = "true";
-    imageCopyHandler(node.attrs.src).then((newSrc) => {
-      if (newSrc && newSrc !== node.attrs.src) {
-        this.updateImageNodeSrc(view, node, newSrc);
-      } else {
-        const { state, dispatch } = view;
-        node.attrs["data-rme-loading"] = null;
-        dispatch(state.tr);
-      }
-    }).catch((error) => {
-      console.warn("imageCopyHandler failed:", error);
-    });
+    node.attrs["data-rme-from-paste"] = "true";
   }
   /**
    * Process images in a slice asynchronously and update their src attributes using imageCopyHandler
    */
   processImagesInSliceAsync(slice, view) {
-    const { imageCopyHandler } = this.options;
-    if (!imageCopyHandler) return;
     const imageNodes = [];
     let currentPos = 0;
     const findImageNodes = (node, pos) => {
@@ -4096,18 +3987,16 @@ var ClipboardExtension = class extends PlainExtension2 {
     slice.content.forEach((node, offset) => {
       findImageNodes(node, currentPos + offset);
     });
-    imageNodes.forEach(({ node, pos }) => {
+    imageNodes.map(({ node, pos }) => {
       if (node.attrs.src) {
-        this.processImageNode(node, view);
+        return this.processImageNode(node, view);
       }
     });
   }
   /**
    * Process images in an array of nodes asynchronously and update their src attributes using imageCopyHandler
    */
-  processImagesInNodesAsync(nodes, view) {
-    const { imageCopyHandler } = this.options;
-    if (!imageCopyHandler) return;
+  processImagesInNodesSync(nodes, view) {
     const processNode = (node) => {
       if ((node.type.name === "html_image" || node.type.name === "md_image") && node.attrs.src) {
         this.processImageNode(node, view);
@@ -4120,16 +4009,6 @@ var ClipboardExtension = class extends PlainExtension2 {
     };
     nodes.forEach(processNode);
   }
-  /**
-   * Update image node src attribute in the document
-   */
-  updateImageNodeSrc(view, node, newSrc) {
-    const { state, dispatch } = view;
-    let tr = state.tr;
-    node.attrs.src = newSrc;
-    node.attrs["data-rme-loading"] = null;
-    dispatch(tr);
-  }
 };
 ClipboardExtension = __decorateClass([
   extension2({
@@ -4461,13 +4340,57 @@ FindExtension = __decorateClass([
 
 // src/editor/extensions/HandleInput/handle-input-extension.ts
 import { PlainExtension as PlainExtension4 } from "@rme-sdk/core";
+
+// src/editor/inline-input-regex/index.ts
+var getMdImageInputRule = (nodeType) => [
+  {
+    regexp: /!\[([^\]]*)\]\(([^\s"]+(?:\s+[^\s"]+)*)?(?:\s+"(.*?)")?\)/,
+    type: nodeType,
+    getAttributes: (match) => {
+      const [, alt, src, title] = match;
+      return { alt, src, title };
+    }
+  }
+];
+var getHtmlImageInputRule = (nodeType) => [
+  {
+    regexp: new RegExp("<img[^>]*>"),
+    type: nodeType,
+    getAttributes: (match) => {
+      return getAttrsBySignalHtmlContent(match[0]);
+    }
+  }
+];
+var getInlineMathInputRule = (nodeType) => [
+  // Typed inline math trigger: $$ -> insert empty inline math and focus inside
+  {
+    regexp: /\$\$(?!\$)/,
+    type: nodeType,
+    getAttributes: () => ({ tex: "", fromInput: true })
+  },
+  {
+    regexp: /<span[^>]*data-type=["']math-inline["'][^>]*><\/span>/,
+    type: nodeType,
+    getAttributes: () => ({ fromInput: false })
+  },
+  {
+    regexp: /\$([^$\n]+?)\$/,
+    type: nodeType,
+    getAttributes: (match) => {
+      return { tex: match[1] ?? "", fromInput: true };
+    }
+  }
+];
+
+// src/editor/extensions/HandleInput/handle-input-extension.ts
 var excludeNodeName = ["math_block", "codeMirror"];
 var HandleInputExtension = class extends PlainExtension4 {
   constructor(options) {
     super();
     this.inputRules = [
       ...getMdImageInputRule("md_image"),
-      ...getInlineMathInputRule("math_inline")
+      ...getInlineMathInputRule("math_inline"),
+      ...getHtmlImageInputRule("html_image")
     ];
     if (options?.rules) {
       this.inputRules = [...this.inputRules, ...options.rules];
@@ -4527,7 +4450,11 @@ var HandleInputExtension = class extends PlainExtension4 {
                   const start = pos + matchIndex;
                   const end = start + match[0].length;
                   if (start >= 0 && end <= newState.doc.content.size) {
+                    console.log("nodenode", node);
                     const attrs = rule6.getAttributes ? rule6.getAttributes(match) : null;
+                    if (node.attrs["data-rme-from-paste"] === "true" && attrs) {
+                      attrs["data-rme-from-paste"] = "true";
+                    }
                     const nodeType = schema.nodes[rule6.type];
                     if (!nodeType) {
                       console.warn(`Node type '${rule6.type}' not found in schema`);
@@ -6852,10 +6779,43 @@ var ImageToolTips = (props) => {
 import { jsx as jsx14 } from "react/jsx-runtime";
 var warningFallBack = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAAAAACIM/FCAAAChElEQVR4Ae3aMW/TQBxAcb70k91AAiGuGlZAtOlQApWaDiSdklZq2RPUTm1xUWL3PgqSpygkXlh88N54nn7S2Trd3y/CP5IQIUKECBEiRIgQIUKECBEiRIgQIUKECBEiRIgQIUKECBEiRIgQIUKECBEiRIgQIUKECBEiRIgQIUKECPmPIEKECBEiRIgQIeX82+FBO0naB4eTRRkt5P7sNWt1Rw9RQvKThI2SYR4f5OoVW2rfRAYpT6hqHc8WeVHki9mgRdWwiAmyfA9AdrlaW5tlAHxcxQMpK8feRbGxPEkrSREN5ARg/y780V0GMIwFcgXwLg9byvsAN3FA8lfAfr7jYQZ0nqKAfAb21vYVwNruSoEvMUDuE+Ai7IKECZA+RAA5A7JiN6TMgFHzIeUb4DLshoQZ0H1uPGQOvFzVQZYtYNF4yBg4DnWQMAAmjYccArN6yBQ4ajzkAFjUQ+ZAv/GQNpDXQ3Kg03hIAhT1kAJIhLi1/vJl39Ic6Mf3+a2K8PM7BgahtgEwjuKI0lqGjSI8opRdYFb3sk/jODSGEZCVuyFFDzgPzYc8JMBkN2QMpI8RQMIQ2LvdBblNgdM4Lh/aQJaHrf3sAe2nKCDhGqCfb3VEcx1UNQTItlzQ3fYAvoZYIMUHgHRSbiyPU4BPZUSX2JWEbLZcW5v2qByrmMYKxZCq1mA6z4sin08HLapOy8gGPddtttT5HuHobZiwUXr6K85h6KjLWm/PH+MdTy/GR/12knb6g8mPZ38YECJEiBAhQoQIESJEiBAhQoQIESJEiBAhQoQIESJEiBAhQoQIESJEiBAhQoQIESJEiBAhQoQIESJEiBAhQoQIESJEiBAh0fUb5q7oCGreEVEAAAAASUVORK5CYII=";
 function ImageNodeView(props) {
-  const { node, selected, updateAttributes, handleViewImgSrcUrl, imageHostingHandler } = props;
-  const initRef = useRef7();
-  const popoverStore = useRef7();
+  const {
+    node,
+    selected,
+    updateAttributes,
+    handleViewImgSrcUrl,
+    imageCopyHandler,
+    imageHostingHandler
+  } = props;
+  const initRef = useRef7(null);
+  const popoverStore = useRef7(null);
   const popoverRef = useRef7(null);
+  const fromPaste = node.attrs["data-rme-from-paste"] === "true";
+  console.log("fromPaste", fromPaste, node);
+  useEffect6(() => {
+    if (fromPaste) {
+      const handlePasteEvent = async () => {
+        let src = node.attrs.src || "";
+        if (imageCopyHandler) {
+          try {
+            src = await imageCopyHandler(node.attrs.src);
+          } catch (error) {
+          }
+        }
+        if (handleViewImgSrcUrl) {
+          try {
+            src = await handleViewImgSrcUrl(src);
+          } catch (error) {
+          }
+        }
+        updateAttributes({
+          "data-rme-from-paste": null,
+          src
+        });
+      };
+      handlePasteEvent();
+    }
+  }, [fromPaste, node.attrs.src]);
   const handleStoreChange = (store) => {
     popoverStore.current = store;
   };
@@ -6877,47 +6837,41 @@ function ImageNodeView(props) {
       ["data-rme-type"]: "html"
     });
   }, [updateAttributes]);
-  const Main = /* @__PURE__ */ jsx14(
-    Resizable,
+  const Loading = /* @__PURE__ */ jsx14("span", { className: "inline-loading", children: /* @__PURE__ */ jsx14("i", { className: "inline-loading-icon ri-loader-4-line" }) });
+  if (fromPaste) {
+    return Loading;
+  }
+  const Main = /* @__PURE__ */ jsx14(Resizable, { controlInit: (init) => initRef.current = init, onResize: handleResize, ...props, children: /* @__PURE__ */ jsx14(
+    ZensImage,
     {
-      controlInit: (init) => initRef.current = init,
-      onResize: handleResize,
-      ...props,
-      children: /* @__PURE__ */ jsx14(
-        ZensImage,
-        {
-          onLoad: () => initRef.current?.(),
-          src: node.attrs.src,
-          imgPromise: (src) => {
-            return new Promise((resolve, reject) => {
-              if (node.attrs["data-rme-loading"] === "true") {
-                return;
-              }
-              const makeImageLoad = (targetSrc) => {
-                const img = new Image();
-                img.src = targetSrc;
-                img.onload = () => {
-                  resolve(targetSrc);
-                };
-                img.onerror = () => {
-                  reject(warningFallBack);
-                };
-              };
-              if (handleViewImgSrcUrl) {
-                handleViewImgSrcUrl(node.attrs.src).then((newSrc) => {
-                  makeImageLoad(newSrc);
-                });
-              } else {
-                makeImageLoad(node.attrs.src);
-              }
+      onLoad: () => initRef.current?.(),
+      src: node.attrs.src,
+      loader: Loading,
+      imgPromise: (src) => {
+        return new Promise((resolve, reject) => {
+          const makeImageLoad = (targetSrc) => {
+            const img = new Image();
+            img.src = targetSrc;
+            img.onload = () => {
+              resolve(targetSrc);
+            };
+            img.onerror = () => {
+              reject(warningFallBack);
+            };
+          };
+          if (handleViewImgSrcUrl) {
+            handleViewImgSrcUrl(node.attrs.src).then((newSrc) => {
+              makeImageLoad(newSrc);
             });
-          },
-          ...node.attrs
-        }
-      )
+          } else {
+            makeImageLoad(node.attrs.src);
+          }
+        });
+      },
+      ...node.attrs
     },
     `${node.attrs.src}_${node.attrs["data-rme-loading"]}`
-  );
+  ) });
   return /* @__PURE__ */ jsx14("div", { ref: popoverRef, style: { position: "relative", zIndex: selected ? 10 : "auto" }, children: /* @__PURE__ */ jsx14(
     Popover2,
     {
@@ -6948,8 +6902,16 @@ var HtmlImageExtension = class extends NodeExtension6 {
   constructor() {
     super(...arguments);
     this.ReactComponent = (props) => {
-      const { handleViewImgSrcUrl, imageHostingHandler } = this.options;
-      return /* @__PURE__ */ jsx15(ImageNodeView, { handleViewImgSrcUrl, imageHostingHandler, ...props });
+      const { handleViewImgSrcUrl, imageHostingHandler, imageCopyHandler } = this.options;
+      return /* @__PURE__ */ jsx15(
+        ImageNodeView,
+        {
+          handleViewImgSrcUrl,
+          imageCopyHandler,
+          imageHostingHandler,
+          ...props
+        }
+      );
     };
   }
   get name() {
@@ -6975,7 +6937,8 @@ var HtmlImageExtension = class extends NodeExtension6 {
         src: { default: null },
         title: { default: "" },
         "data-file-name": { default: null },
-        "data-rme-loading": { default: null }
+        "data-rme-loading": { default: null },
+        "data-rme-from-paste": { default: null }
       },
       parseDOM: [
         {
@@ -7083,16 +7046,7 @@ var HtmlImageExtension = class extends NodeExtension6 {
     ];
   }
   createInputRules() {
-    const rules = [
-      nodeInputRule5({
-        regexp: new RegExp("<img[^>]*>"),
-        type: this.type,
-        getAttributes: (match) => {
-          return getAttrsBySignalHtmlContent(match[0]);
-        }
-      })
-    ];
-    return rules;
+    return getHtmlImageInputRule(this.type).map(nodeInputRule5);
   }
   fromMarkdown() {
     return [
@@ -7206,12 +7160,13 @@ var MdImgUriExtension = class extends NodeExtension7 {
   constructor() {
     super(...arguments);
     this.ReactComponent = (props) => {
-      const { handleViewImgSrcUrl, imageHostingHandler } = this.options;
+      const { handleViewImgSrcUrl, imageHostingHandler, imageCopyHandler } = this.options;
       return /* @__PURE__ */ jsx16(
         ImageNodeView,
         {
           handleViewImgSrcUrl,
           imageHostingHandler,
+          imageCopyHandler,
           ...props
         }
       );
@@ -7240,7 +7195,8 @@ var MdImgUriExtension = class extends NodeExtension7 {
         rotate: { default: null },
         src: { default: null },
         title: { default: "" },
-        "data-file-name": { default: null }
+        "data-file-name": { default: null },
+        "data-rme-from-paste": { default: null }
       },
       parseDOM: [
         {
@@ -9038,7 +8994,6 @@ var MathInlineView = class {
       }
       this._renderElt.replaceWith(newRenderEl);
       this._renderElt = newRenderEl;
-      console.log("this.renderElt", this._renderElt.outerHTML);
       this.dom.appendChild(this._renderElt);
       if (preview) {
         this._renderElt.classList.add("inline-input-preview");
@@ -10304,11 +10259,13 @@ function extensions(options) {
     new CountExtension({}),
     new HtmlImageExtension({
       handleViewImgSrcUrl,
-      imageHostingHandler
+      imageHostingHandler,
+      imageCopyHandler
     }),
     new MdImgUriExtension({
       handleViewImgSrcUrl,
-      imageHostingHandler
+      imageHostingHandler,
+      imageCopyHandler
     }),
     new HandleInputExtension(),
     new HtmlBrExtension(),