rme 0.3.0-beta.6 → 0.3.0-beta.8

package/dist/index.mjs

@@ -890,9 +890,22 @@ 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;
+    line-height: ${(props) => props.rootLineHeight};
+    animation: loading-icon-spin 1s linear infinite;
+  }
+
+  @keyframes loading-icon-spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
   }
 
   .html_tag {
@@ -1263,8 +1276,9 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
 
   & .html-image-node-view-wrapper,
   & .md-image-node-view-wrapper {
-    display: inline-block;
+    display: inline-flex;
     padding: 0 2px;
+    vertical-align: bottom;
     z-index: 1;
   }
 
@@ -3798,40 +3812,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)) {
@@ -3876,21 +3856,21 @@ var ClipboardExtension = class extends PlainExtension2 {
       if (html2.length === 0) {
         const slice2 = parser?.(text);
         if (!slice2 || typeof slice2 === "string") return false;
-        const res = [];
+        const nodes = [];
         slice2.content.forEach((node2, index) => {
           if (node2.type.name === "paragraph" && index === 0) {
             node2.content.forEach((child) => {
-              res.push(child);
+              nodes.push(child);
             });
           } else {
-            res.push(node2);
+            nodes.push(node2);
           }
         });
-        this.processImagesInNodesAsync(res, view);
-        if (res.length === 1) {
-          view.dispatch(view.state.tr.replaceSelectionWith(res[0], false));
+        this.processImagesInNodesSync(nodes, view);
+        if (nodes.length === 1) {
+          view.dispatch(view.state.tr.replaceSelectionWith(nodes[0], false));
         } else {
-          const fragment = Fragment3.from(res);
+          const fragment = Fragment3.from(nodes);
           view.dispatch(view.state.tr.replaceSelection(new Slice(fragment, 0, 0)));
         }
         return true;
@@ -3902,16 +3882,9 @@ var ClipboardExtension = class extends PlainExtension2 {
       }
       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));
-          });
-        }
+        node.attrs["data-rme-from-paste"] = "true";
+        view.dispatch(view.state.tr.replaceSelectionWith(node, true));
         return true;
       }
       this.processImagesInSliceAsync(slice, view);
@@ -3991,60 +3964,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);
-      }
-    }).catch((error) => {
-      console.warn("imageCopyHandler failed:", error);
-    }).finally(() => {
-      const { state, dispatch } = view;
-      node.attrs["data-rme-loading"] = null;
-      dispatch(state.tr);
-    });
+    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) => {
@@ -4060,18 +3989,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);
@@ -4084,16 +4011,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({
@@ -4425,13 +4342,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];
@@ -4491,7 +4452,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`);
@@ -5516,7 +5481,7 @@ var throttle = (delay, noTrailing, callback) => {
   };
 };
 var ResizableContainer = styled6.div`
-  display: inline-block;
+  display: inline-flex;
   position: relative;
   max-width: 100%;
   user-select: none;
@@ -6633,6 +6598,8 @@ var Container2 = styled9.div`
   border: 1px solid ${(props) => props.theme.borderColor};
   border-radius: ${(props) => props.theme.smallBorderRadius};
   box-shadow: 0 4px 12px ${(props) => props.theme.boxShadowColor};
+  font-size: ${(props) => props.theme.fontBase};
+  line-height: normal;
   z-index: 100;
 `;
 var InputGroup = styled9.div`
@@ -6814,12 +6781,44 @@ var ImageToolTips = (props) => {
 
 // src/editor/extensions/Image/image-nodeview.tsx
 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 {
+    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, handleViewImgSrcUrl, imageCopyHandler, node.attrs.src]);
   const handleStoreChange = (store) => {
     popoverStore.current = store;
   };
@@ -6841,6 +6840,10 @@ function ImageNodeView(props) {
       ["data-rme-type"]: "html"
     });
   }, [updateAttributes]);
+  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,
     {
@@ -6852,37 +6855,18 @@ function ImageNodeView(props) {
         {
           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);
-              }
-            });
+          loader: Loading,
+          style: {
+            width: "100%",
+            height: "100%"
           },
           ...node.attrs
-        },
-        `${node.attrs.src}_${node.attrs["data-rme-loading"]}`
+        }
       )
-    }
+    },
+    `${node.attrs.src}_${node.attrs["data-rme-loading"]}`
   );
-  return /* @__PURE__ */ jsx14("div", { ref: popoverRef, style: { position: "relative", zIndex: selected ? 10 : "auto" }, children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx14("div", { ref: popoverRef, style: { position: "relative", zIndex: selected ? 10 : "auto", lineHeight: 0 }, children: /* @__PURE__ */ jsx14(
     Popover2,
     {
       customContent: /* @__PURE__ */ jsx14(
@@ -6897,6 +6881,11 @@ function ImageNodeView(props) {
         },
         `${node.attrs.src}`
       ),
+      boxProps: {
+        style: {
+          display: "inline-flex"
+        }
+      },
       placement: "top-start",
       onStoreChange: handleStoreChange,
       toggleOnClick: true,
@@ -6912,8 +6901,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() {
@@ -6939,7 +6936,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: [
         {
@@ -7047,16 +7045,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 [
@@ -7170,12 +7159,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
         }
       );
@@ -7204,7 +7194,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: [
         {
@@ -10267,11 +10258,13 @@ function extensions(options) {
     new CountExtension({}),
     new HtmlImageExtension({
       handleViewImgSrcUrl,
-      imageHostingHandler
+      imageHostingHandler,
+      imageCopyHandler
     }),
     new MdImgUriExtension({
       handleViewImgSrcUrl,
-      imageHostingHandler
+      imageHostingHandler,
+      imageCopyHandler
     }),
     new HandleInputExtension(),
     new HtmlBrExtension(),