From d2b73f1bd65ec6fb5bfab2ab4e988bfe3393ebab Mon Sep 17 00:00:00 2001
From: windingwind <33902321+windingwind@users.noreply.github.com>
Date: Tue, 20 Jun 2023 11:43:26 +0800
Subject: [PATCH] fix: template preview image bug

---
 src/modules/template/editorWindow.ts |  8 ++++++--
 src/modules/template/preview.ts      |  2 --
 src/utils/annotation.ts              | 18 ++++++++++++------
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/modules/template/editorWindow.ts b/src/modules/template/editorWindow.ts
index 7af4df2..5382bbc 100644
--- a/src/modules/template/editorWindow.ts
+++ b/src/modules/template/editorWindow.ts
@@ -180,12 +180,16 @@ function updateEditor() {
 
 async function updatePreview() {
   const name = getSelectedTemplateName();
-  const html = await addon.api.template.renderTemplatePreview(name);
+  let html = (await addon.api.template.renderTemplatePreview(name))
+    .replace(/&nbsp;/g, "#160;")
+    .replace(/<br>/g, "<br/>")
+    .replace(/<hr>/g, "<hr/>")
+    .replace(/<img([^>]+)\>/g, "<img$1/>");
   const win = addon.data.templateEditor.window;
   const container = win?.document.getElementById("preview-container");
   if (container) {
     if (ztoolkit.isZotero7()) {
-      container.innerHTML = html.replace(/&nbsp;/g, "#160;");
+      container.innerHTML = html;
     } else {
       container.innerHTML = "";
       container.appendChild(
diff --git a/src/modules/template/preview.ts b/src/modules/template/preview.ts
index 50644d0..0d752dc 100644
--- a/src/modules/template/preview.ts
+++ b/src/modules/template/preview.ts
@@ -118,7 +118,5 @@ async function renderTemplatePreview(
   } else {
     html = `<p>Preview not available for template ${templateName}</p>`;
   }
-  // complete <br> and <hr> tags
-  html = html.replace(/<br>/g, "<br/>").replace(/<hr>/g, "<hr/>");
   return html;
 }
diff --git a/src/utils/annotation.ts b/src/utils/annotation.ts
index 287abf0..3ce32c9 100644
--- a/src/utils/annotation.ts
+++ b/src/utils/annotation.ts
@@ -51,7 +51,8 @@ function serializeAnnotations(
     if (
       (!annotation.text &&
         !annotation.comment &&
-        !annotation.imageAttachmentKey) ||
+        !annotation.imageAttachmentKey &&
+        !annotation.image) ||
       annotation.type === "ink"
     ) {
       continue;
@@ -130,6 +131,11 @@ function serializeAnnotations(
       )}"/>`;
     }
 
+    // Image in b64
+    if (annotation.image) {
+      imageHTML = `<img src="${annotation.image}"/>`;
+    }
+
     // Text
     if (annotation.text) {
       let text = Zotero.EditorInstanceUtilities._transformTextToHTML.call(
@@ -202,15 +208,15 @@ function serializeAnnotations(
 }
 
 export async function importAnnotationImagesToNote(
-  note: Zotero.Item,
+  note: Zotero.Item | undefined,
   annotations: CustomAnnotationJSON[]
 ) {
   for (let annotation of annotations) {
-    if (annotation.image) {
+    if (annotation.image && note) {
       annotation.imageAttachmentKey =
         (await importImageToNote(note, annotation.image)) || "";
+      delete annotation.image;
     }
-    delete annotation.image;
   }
 }
 
@@ -230,8 +236,8 @@ export async function parseAnnotationHTML(
     }
     annotationJSONList.push(annotJson!);
   }
-  options.noteItem &&
-    (await importAnnotationImagesToNote(options.noteItem, annotationJSONList));
+
+  await importAnnotationImagesToNote(options.noteItem, annotationJSONList);
   const html = serializeAnnotations(
     annotationJSONList as Required<CustomAnnotationJSON>[],
     false,