rme 0.3.0-beta.7 → 0.3.0-beta.9

package/dist/index.mjs

@@ -895,6 +895,7 @@ var WysiwygThemeWrapper = styled.div.attrs((p) => ({
     height: min-content;
     display: inline-block;
     font-size: 16px;
+    line-height: ${(props) => props.rootLineHeight};
     animation: loading-icon-spin 1s linear infinite;
   }
 
@@ -1275,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;
   }
 
@@ -5479,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;
@@ -6596,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`
@@ -6802,12 +6806,6 @@ function ImageNodeView(props) {
           } catch (error) {
           }
         }
-        if (handleViewImgSrcUrl) {
-          try {
-            src = await handleViewImgSrcUrl(src);
-          } catch (error) {
-          }
-        }
         updateAttributes({
           "data-rme-from-paste": null,
           src
@@ -6815,7 +6813,7 @@ function ImageNodeView(props) {
       };
       handlePasteEvent();
     }
-  }, [fromPaste, node.attrs.src]);
+  }, [fromPaste, imageCopyHandler, node.attrs.src]);
   const handleStoreChange = (store) => {
     popoverStore.current = store;
   };
@@ -6841,59 +6839,84 @@ function ImageNodeView(props) {
   if (fromPaste) {
     return Loading;
   }
-  const Main = /* @__PURE__ */ jsx14(Resizable, { controlInit: (init) => initRef.current = init, onResize: handleResize, ...props, children: /* @__PURE__ */ jsx14(
-    ZensImage,
+  const Main = /* @__PURE__ */ jsx14(
+    Resizable,
     {
-      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);
+      controlInit: (init) => initRef.current = init,
+      onResize: handleResize,
+      ...props,
+      children: /* @__PURE__ */ jsx14(
+        ZensImage,
+        {
+          onLoad: () => initRef.current?.(),
+          src: node.attrs.src,
+          loader: Loading,
+          imgPromise: () => {
+            return new Promise(async (resolve, reject) => {
+              let targetSrc = node.attrs.src || "";
+              if (handleViewImgSrcUrl) {
+                try {
+                  targetSrc = await handleViewImgSrcUrl(targetSrc);
+                } catch (error) {
+                }
+              }
+              const makeImageLoad = (targetSrc2) => {
+                const img = new Image();
+                img.src = targetSrc2;
+                img.onload = () => {
+                  resolve(targetSrc2);
+                };
+                img.onerror = () => {
+                  reject(warningFallBack);
+                };
+              };
+              makeImageLoad(targetSrc);
             });
-          } else {
-            makeImageLoad(node.attrs.src);
-          }
-        });
-      },
-      ...node.attrs
+          },
+          style: {
+            width: "100%",
+            height: "100%"
+          },
+          ...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,
+  );
+  return /* @__PURE__ */ jsx14(
+    "div",
     {
-      customContent: /* @__PURE__ */ jsx14(
-        ImageToolTips,
+      ref: popoverRef,
+      style: { position: "relative", zIndex: selected ? 10 : "auto", lineHeight: 0 },
+      children: /* @__PURE__ */ jsx14(
+        Popover2,
         {
-          node,
-          imageHostingHandler,
-          updateAttributes: (...args) => {
-            updateAttributes(...args);
-            popoverStore.current?.setOpen(false);
-          }
-        },
-        `${node.attrs.src}`
-      ),
-      placement: "top-start",
-      onStoreChange: handleStoreChange,
-      toggleOnClick: true,
-      style: { zIndex: 11 },
-      children: Main
+          customContent: /* @__PURE__ */ jsx14(
+            ImageToolTips,
+            {
+              node,
+              imageHostingHandler,
+              updateAttributes: (...args) => {
+                updateAttributes(...args);
+                popoverStore.current?.setOpen(false);
+              }
+            },
+            `${node.attrs.src}`
+          ),
+          boxProps: {
+            style: {
+              display: "inline-flex"
+            }
+          },
+          placement: "top-start",
+          onStoreChange: handleStoreChange,
+          toggleOnClick: true,
+          style: { zIndex: 11 },
+          children: Main
+        }
+      )
     }
-  ) });
+  );
 }
 
 // src/editor/extensions/Image/image-extension.tsx