core: fix export of floating images

packages/core/src/utils/templates/html/index.ts

@@ -51,6 +51,23 @@ async function preprocessHTML(templateData: TemplateData) {
 
   const doc = parseHTML(html);
 
+  const images = doc.querySelectorAll("img");
+  for (const image of images) {
+    const container = doc.createElement("span");
+    container.append(image.cloneNode());
+    for (const attr of image.attributes) {
+      if (
+        attr.name === "src" ||
+        attr.name === "height" ||
+        attr.name === "width"
+      )
+        continue;
+      container.setAttribute(attr.name, attr.value);
+    }
+    container.classList.add("image-container");
+    image.replaceWith(container);
+  }
+
   const mathBlocks = doc.querySelectorAll(".math-block.math-node");
   const mathInlines = doc.querySelectorAll(".math-inline.math-node");
 

packages/core/src/utils/templates/html/template.ts

@@ -48,12 +48,25 @@ export function template(data: TemplateData) {
     }">
 
     <style>
-    img {
-      max-width: 100% !important;
-      height: auto !important;
-      border-radius: 5px;
+
+    .image-container {
+      display: block;
     }
-    
+    .image-container.align-right {
+      display: flex;
+      justify-content: end;
+    }
+    .image-container.align-center {
+      display: flex;
+      justify-content: center;
+    }
+    .image-container.float {
+      float: left;
+    }
+    .image-container.float.align-right {
+      float: right;
+    }
+
     body {
       background-color: transparent !important;
       color: #202124;