From b6c185fd326f94a0b72d1cb26ff17ecfde3d7e85 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 5 Apr 2025 20:59:53 +0300
Subject: [PATCH] feat(import/markdown): preserve image width

---
 src/services/export/markdown.spec.ts | 7 ++++---
 src/services/html_sanitizer.ts       | 2 ++
 src/services/import/markdown.spec.ts | 5 +++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/services/export/markdown.spec.ts b/src/services/export/markdown.spec.ts
index 9368e11a6..524e4eb69 100644
--- a/src/services/export/markdown.spec.ts
+++ b/src/services/export/markdown.spec.ts
@@ -255,9 +255,10 @@ describe("Markdown export", () => {
 
     it("preserves image verbatim if it has a width or height attribute", () => {
         const scenarios = [
-            `<img src="Include Note_image.png" width="16" height="16">`,
-            `<img src="Include Note_image.png" width="16">`,
-            `<img src="Include Note_image.png" height="16">`
+            /*html*/`<img src="Include Note_image.png" width="16" height="16">`,
+            /*html*/`<img src="Include Note_image.png" width="16">`,
+            /*html*/`<img src="Include Note_image.png" height="16">`,
+            /*html*/`<img class="image_resized" style="aspect-ratio:853/315;width:50%;" src="6_File_image.png" width="853" height="315">`
         ];
         for (const expected of scenarios) {
             const html = /*html*/`<p>${expected}</p>`;
diff --git a/src/services/html_sanitizer.ts b/src/services/html_sanitizer.ts
index a86c15bb3..c0ebaf152 100644
--- a/src/services/html_sanitizer.ts
+++ b/src/services/html_sanitizer.ts
@@ -164,6 +164,8 @@ function sanitize(dirtyHtml: string) {
             },
             img: {
                 "aspect-ratio": [ /^\d+\/\d+$/ ],
+                width: sizeRegex,
+                height: sizeRegex
             },
             table: {
                 "border-color": colorRegex,
diff --git a/src/services/import/markdown.spec.ts b/src/services/import/markdown.spec.ts
index 9288350cf..f6b541163 100644
--- a/src/services/import/markdown.spec.ts
+++ b/src/services/import/markdown.spec.ts
@@ -163,10 +163,11 @@ second line 2</code></pre><ul><li>Hello</li><li>world</li></ul><ol><li>Hello</li
         expect(markdownService.renderToHtml(input, "Title")).toStrictEqual(expected);
     });
 
-    it("preserves figures", () => {
+    it("preserves figures and images with sizes", () => {
         const scenarios = [
             /*html*/`<figure class="image image-style-align-center image_resized" style="width:53.44%;"><img style="aspect-ratio:991/403;" src="Jump to Note_image.png" width="991" height="403"></figure>`,
-            /*html*/`<figure class="image image-style-align-center image_resized" style="width:53.44%;"><img style="aspect-ratio:991/403;" src="Jump to Note_image.png" width="991" height="403"></figure>`
+            /*html*/`<figure class="image image-style-align-center image_resized" style="width:53.44%;"><img style="aspect-ratio:991/403;" src="Jump to Note_image.png" width="991" height="403"></figure>`,
+            /*html*/`<img class="image_resized" style="aspect-ratio:853/315;width:50%;" src="6_File_image.png" width="853" height="315">`
         ];
 
         for (const scenario of scenarios) {