@cyberyozh/text-editor 0.1.16 → 0.1.17

package/dist/styles/index.css

@@ -642,6 +642,7 @@
   display: inline-block;
   position: relative;
   margin: 0 auto;
+  min-width: 0;
 }
 [data-resize-handle] {
   z-index: 10;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberyozh/text-editor",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "Rich text editor library based on Tiptap for CyberYozh",
   "author": "CyberYozh",
   "license": "MIT",

package/src/extensions/editor/figure.ts

@@ -54,7 +54,8 @@ export const Figure = BaseFigure.extend({
 
       const updateImageDimensions = (width: number, height: number) => {
         imageContainer.style.width = `${width}px`;
-        imageContainer.style.height = `${height}px`;
+        imageContainer.style.aspectRatio = `${width} / ${height}`;
+        imageContainer.style.height = '';
       };
 
       const figure = document.createElement("figure");
@@ -70,7 +71,7 @@ export const Figure = BaseFigure.extend({
 
       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 = () => {
@@ -81,19 +82,13 @@ export const Figure = BaseFigure.extend({
         }
 
         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();
           }
@@ -149,11 +144,13 @@ export const Figure = 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");
@@ -194,6 +191,8 @@ export const Figure = BaseFigure.extend({
         },
       });
 
+      imageContainer.style.height = '';
+
       figure.appendChild(resizableView.dom);
 
       if (attrs.caption) {

package/src/styles/extensions/figure.css

@@ -85,6 +85,7 @@
   display: inline-block;
   position: relative;
   margin: 0 auto;
+  min-width: 0;
 }
 
 [data-resize-handle] {