From 7f120fcccd0e957f1e021044cd675e34c3d80e3d Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Mon, 18 Mar 2024 08:15:25 +0500
Subject: [PATCH] core: fix export of floating images

---
 .../core/src/utils/templates/html/index.ts    | 17 ++++++++++++++
 .../core/src/utils/templates/html/template.ts | 23 +++++++++++++++----
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/utils/templates/html/index.ts b/packages/core/src/utils/templates/html/index.ts
index 4ca20c9f5..c8f116494 100644
--- a/packages/core/src/utils/templates/html/index.ts
+++ b/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");
 
diff --git a/packages/core/src/utils/templates/html/template.ts b/packages/core/src/utils/templates/html/template.ts
index d8f2a2ab0..412704a23 100644
--- a/packages/core/src/utils/templates/html/template.ts
+++ b/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;