feat(import/markdown): preserve column widths

src/services/html_sanitizer.ts

@@ -175,8 +175,12 @@ function sanitize(dirtyHtml: string) {
                 border: [
                     /^\s*\d+(?:px|em|%)\s*(none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset)\s*(#(0x)?[0-9a-fA-F]+|rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)|hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\))\s*$/
                 ]
+            },
+            col: {
+                width: sizeRegex
             }
         },
+        selfClosing: [ "img", "br", "hr", "area", "base", "basefont", "input", "link", "meta", "col" ],
         allowedSchemes: ALLOWED_PROTOCOLS,
         nonTextTags: ["head"],
         transformTags

src/services/import/markdown.spec.ts

@@ -197,4 +197,9 @@ second line 2</code></pre><ul><li>Hello</li><li>world</li></ul><ol><li>Hello</li
         }
     });
 
+    it("preserves table with column widths", () => {
+        const html = /*html*/`<figure class="table" style="width:100%;"><table class="ck-table-resized"><colgroup><col style="width:2.77%;"><col style="width:33.42%;"><col style="width:63.81%;"></colgroup><thead><tr><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th></tr></thead><tbody><tr><td>1</td><td><img class="image_resized" style="aspect-ratio:562/454;width:100%;" src="1_Geo Map_image.png" width="562" height="454"></td><td>Go to any location on openstreetmap.org and right click to bring up the context menu. Select the “Show address” item.</td></tr><tr><td>2</td><td><img class="image_resized" style="aspect-ratio:696/480;width:100%;" src="Geo Map_image.png" width="696" height="480"></td><td>The address will be visible in the top-left of the screen, in the place of the search bar.&nbsp;&nbsp;&nbsp;&nbsp;<br><br>Select the coordinates and copy them into the clipboard.</td></tr><tr><td>3</td><td><img class="image_resized" style="aspect-ratio:640/276;width:100%;" src="5_Geo Map_image.png" width="640" height="276"></td><td>Simply paste the value inside the text box into the <code>#geolocation</code> attribute of a child note of the map and then it should be displayed on the map.</td></tr></tbody></table></figure>`;
+        expect(markdownService.renderToHtml(html, "Title")).toStrictEqual(html);
+    });
+
 });

src/services/import/markdown.ts

@@ -100,7 +100,7 @@ function renderToHtml(content: string, title: string) {
     html = htmlSanitizer.sanitize(html);
 
     // Add a trailing semicolon to CSS styles.
-    html = html.replaceAll(/(<(img|figure).*?style=".*?)"/g, "$1;\"");
+    html = html.replaceAll(/(<(img|figure|col).*?style=".*?)"/g, "$1;\"");
 
     // Remove slash for self-closing tags to match CKEditor's approach.
     html = html.replace(/<(\w+)([^>]*)\s+\/>/g, "<$1$2>");