Prevent jumps when aspect ratio is known

Author: timolins

src/components/asset.tsx

@@ -13,7 +13,12 @@ const Asset: React.FC<{ block: BlockType }> = ({ block }) => {
   }
 
   const format = value.format;
-  const { block_width, block_height, display_source } = format;
+  const {
+    block_width,
+    block_height,
+    display_source,
+    block_aspect_ratio
+  } = format;
 
   const isImage = type === "image";
 
@@ -37,7 +42,21 @@ const Asset: React.FC<{ block: BlockType }> = ({ block }) => {
 
   if (type === "image") {
     const caption = value.properties.caption?.[0][0];
-    return <img style={style} alt={caption} src={src} />;
+    if (block_aspect_ratio) {
+      return (
+        <div
+          style={{
+            ...style,
+            paddingBottom: `${block_aspect_ratio * 100}%`,
+            position: "relative"
+          }}
+        >
+          <img className="notion-image-inset" alt={caption} src={src} />
+        </div>
+      );
+    } else {
+      return <img style={style} alt={caption} src={src} />;
+    }
   }
 
   if (type === "video") {

src/styles.css

@@ -211,6 +211,16 @@ li {
 .notion-spacer:last-child {
   display: none;
 }
+
+.notion-image-inset {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+}
+
 .notion-image-caption {
   padding: 6px 0px;
   white-space: pre-wrap;