feat(imsize): rework image styling to get more control

diplodoc-platform · Nov 1, 2024 · 2fd2bfa · 2fd2bfa
1 parent dbc8e5d
commit 2fd2bfa
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 7 deletions.
diff --git a/src/transform/plugins/imsize/const.ts b/src/transform/plugins/imsize/const.ts
@@ -4,4 +4,5 @@ export enum ImsizeAttr {
     Title = 'title',
     Width = 'width',
     Height = 'height',
+    Style = 'style',
 }
diff --git a/src/transform/plugins/imsize/plugin.ts b/src/transform/plugins/imsize/plugin.ts
@@ -206,6 +206,27 @@ export const imageWithSize = (md: MarkdownIt): ParserInline.RuleInline => {
             if (height !== '') {
                 token.attrs.push([ImsizeAttr.Height, height]);
             }
+
+            let style: string | undefined;
+
+            if (width !== '') {
+                const widthWithPercent = width.includes('%');
+                const heightWithPercent = height.includes('%');
+
+                const widthString = widthWithPercent ? width : `${width}px`;
+                style = `width: ${widthString};`;
+
+                if (height !== '' && !heightWithPercent && !widthWithPercent) {
+                    style += ` aspect-ratio: ${width} / ${height}; height: auto;`;
+                }
+            } else if (height !== '') {
+                const heightString = height.includes('%') ? height : `${height}px`;
+                style = `height: ${heightString};`;
+            }
+
+            if (style) {
+                token.attrs.push([ImsizeAttr.Style, style]);
+            }
         }
 
         state.pos = pos;

diff --git a/test/data/imsize/imsize-fixtures.txt b/test/data/imsize/imsize-fixtures.txt
@@ -226,7 +226,7 @@ Coverage. Image
 .
 ![test]( x =100x200)
 .
-<p><img src="x" alt="test" width="100" height="200"></p>
+<p><img src="x" alt="test" width="100" height="200" style="width: 100px; aspect-ratio: 100 / 200; height: auto;"></p>
 .
 .
 ![test]( x =x)
@@ -236,17 +236,17 @@ Coverage. Image
 .
 ![test]( x =100x)
 .
-<p><img src="x" alt="test" width="100"></p>
+<p><img src="x" alt="test" width="100" style="width: 100px;"></p>
 .
 .
 ![test]( x =x200)
 .
-<p><img src="x" alt="test" height="200"></p>
+<p><img src="x" alt="test" height="200" style="height: 200px;"></p>
 .
 .
 ![test]( x "title" =100x200)
 .
-<p><img src="x" alt="test" title="title" width="100" height="200"></p>
+<p><img src="x" alt="test" title="title" width="100" height="200" style="width: 100px; aspect-ratio: 100 / 200; height: auto;"></p>
 .
 .
 ![test]( x =WxH )
@@ -266,7 +266,7 @@ Coverage. Image
 .
 ![test](http://this.is.test.jpg =100x200)
 .
-<p><img src="http://this.is.test.jpg" alt="test" width="100" height="200"></p>
+<p><img src="http://this.is.test.jpg" alt="test" width="100" height="200" style="width: 100px; aspect-ratio: 100 / 200; height: auto;"></p>
 .
 .
 ![test](<x =100x200)
@@ -276,12 +276,12 @@ Coverage. Image
 .
 ![test](<x> =100x200)
 .
-<p><img src="x" alt="test" width="100" height="200"></p>
+<p><img src="x" alt="test" width="100" height="200" style="width: 100px; aspect-ratio: 100 / 200; height: auto;"></p>
 .
 .
 ![test](test =100%x)
 .
-<p><img src="test" alt="test" width="100%"></p>
+<p><img src="test" alt="test" width="100%" style="width: 100%;"></p>
 .
 
 Coverage. Link