@cyberyozh/text-editor 0.1.16 → 0.1.17

package/dist/editor.mjs

@@ -6433,7 +6433,8 @@ var Figure2 = BaseFigure.extend({
       };
       const updateImageDimensions = (width, height) => {
         imageContainer.style.width = `${width}px`;
-        imageContainer.style.height = `${height}px`;
+        imageContainer.style.aspectRatio = `${width} / ${height}`;
+        imageContainer.style.height = "";
       };
       const figure = document.createElement("figure");
       figure.setAttribute("data-drag-handle", "");
@@ -6445,7 +6446,7 @@ var Figure2 = BaseFigure.extend({
       if (attrs.title) img.title = attrs.title;
       if (attrs.width && attrs.height) {
         imageContainer.style.width = `${attrs.width}px`;
-        imageContainer.style.height = `${attrs.height}px`;
+        imageContainer.style.aspectRatio = `${attrs.width} / ${attrs.height}`;
       }
       img.onload = () => {
         naturalAspectRatio = img.naturalHeight / img.naturalWidth;
@@ -6453,15 +6454,11 @@ var Figure2 = BaseFigure.extend({
           maxHeight = Math.round(maxWidth * naturalAspectRatio);
         }
         if (attrs.width && attrs.height && maxWidth && attrs.width > maxWidth) {
-          const width = maxWidth;
-          const height = Math.round(attrs.height / attrs.width * maxWidth);
-          imageContainer.style.width = `${width}px`;
-          imageContainer.style.height = `${height}px`;
           const pos = getPos();
           if (typeof pos === "number") {
             editor.chain().updateAttributes("image", {
-              width: Math.round(width),
-              height: Math.round(height)
+              width: maxWidth,
+              height: Math.round(attrs.height / attrs.width * maxWidth)
             }).run();
           }
         }
@@ -6503,11 +6500,12 @@ var Figure2 = BaseFigure.extend({
           }
         },
         onUpdate: (updatedNode) => {
-          if (updatedNode.attrs.width) {
-            imageContainer.style.width = `${updatedNode.attrs.width}px`;
-          }
-          if (updatedNode.attrs.height) {
-            imageContainer.style.height = `${updatedNode.attrs.height}px`;
+          const newWidth = updatedNode.attrs.width;
+          const newHeight = updatedNode.attrs.height;
+          if (newWidth) imageContainer.style.width = `${newWidth}px`;
+          if (newWidth && newHeight) {
+            imageContainer.style.aspectRatio = `${newWidth} / ${newHeight}`;
+            imageContainer.style.height = "";
           }
           const existingCaption = figure.querySelector("figcaption");
           if (updatedNode.attrs.caption && !existingCaption) {
@@ -6545,6 +6543,7 @@ var Figure2 = BaseFigure.extend({
           }
         }
       });
+      imageContainer.style.height = "";
       figure.appendChild(resizableView.dom);
       if (attrs.caption) {
         const figcaption = document.createElement("figcaption");