fix: update preview post-save

src/ts/admin/EditBlogPost.ts

@@ -25,6 +25,8 @@ import SaveButtonMode from "./MarkdownEditor/SaveButtonMode";
             await Interop.invoke("Save", post.id, UI.markdownInput.value);
             post = await API.getBlogPost(post.id);
             UI.setSaveButtonMode(SaveButtonMode.SAVED);
+            UI.setPreviewContent(post.content);
+            UI.redraw();
 
             setTimeout(() => UI.setSaveButtonMode(SaveButtonMode.NORMAL), 2000);
         }

src/ts/admin/MarkdownEditor/Prism.d.ts

@@ -10,4 +10,4 @@ declare interface Prism {
     highlightAllUnder(element: HTMLElement): void;
 }
 
-declare const Prism: Prism;
+declare const Prism: Prism;

src/ts/admin/MarkdownEditor/UI.ts

@@ -1,3 +1,4 @@
+import SharedUI from "../../app/UI";
 import SaveButtonMode from "./SaveButtonMode";
 
 /**
@@ -5,13 +6,14 @@ import SaveButtonMode from "./SaveButtonMode";
  */
 class UI {
     private static readonly SB_ColorClasses = ["danger", "primary", "primary", "success"];
-    private static readonly SB_IconClasses = ["exclamation", "floppy-disk", "spinner fa-spin", "circle-check"];
+    private static readonly SB_IconClasses = ["exclamation", "floppy-disk", "spinner spin", "circle-check"];
     private static readonly SB_Text = ["Error Saving", "Save <span class=\"text-muted\">(Ctrl+S)</span>", "Saving ...", "Saved"];
 
     private static _highlightingContent: HTMLElement;
     private static _highlighting: HTMLElement;
     private static _content: HTMLTextAreaElement;
     private static _saveButton: HTMLButtonElement;
+    private static _preview: HTMLElement;
 
     private static _saveCallbacks: Function[] = [];
 
@@ -38,12 +40,15 @@ class UI {
      * Initializes the editor's user interface.
      */
     public static init() {
-        const content = UI._content;
+        UI._preview = document.getElementById("article-preview");
+        UI._saveButton = document.getElementById("save-button") as HTMLButtonElement;
+        UI._content = document.getElementById("content") as HTMLTextAreaElement;
         UI._highlightingContent = document.getElementById("highlighting-content");
         UI._highlighting = document.getElementById("highlighting");
-        content.addEventListener("input", () => UI.redraw());
+
-        content.addEventListener("scroll", () => UI.syncEditorScroll());
+        UI._content.addEventListener("input", () => UI.redraw());
-        
+        UI._content.addEventListener("scroll", () => UI.syncEditorScroll());
+
         UI._saveButton.addEventListener("click", (_: MouseEvent) => {
             UI._saveCallbacks.forEach(fn => fn());
         });
@@ -74,6 +79,15 @@ class UI {
         UI.syncEditorScroll();
     }
 
+    /**
+     * Sets the HTML content of the preview section.
+     * @param html The HTML content.
+     */
+    public static setPreviewContent(html: string): void {
+        UI._preview.innerHTML = html;
+        SharedUI.updateUI(UI._preview);
+    }
+
     /**
      * Sets the display mode of the save button.
      * @param mode The display mode.
@@ -83,15 +97,20 @@ class UI {
             throw new Error("Invalid display mode");
         }
 
-        UI._saveButton.innerHTML = UI.SB_Text[mode];
+        const button = UI._saveButton;
-        UI.SB_ColorClasses.concat(UI.SB_IconClasses).forEach(c => UI._saveButton.classList.remove(c));
+        button.innerHTML = `<i class="fa-solid fa-fw"></i> ${UI.SB_Text[+mode]}`;
-        UI._saveButton.classList.add(UI.SB_ColorClasses[mode]);
-        UI._saveButton.classList.add(UI.SB_IconClasses[mode]);
 
-        if (mode === SaveButtonMode.NORMAL) {
+        const icon = button.querySelector("i");
-            UI._saveButton.removeAttribute("disabled");
+        button.classList.remove(...UI.SB_ColorClasses.map(v => v.split(' ').map(c => `btn-${c}`).reduce((a, b) => a.concat(b))));
+        icon.classList.remove(...UI.SB_IconClasses.map(v => v.split(' ').map(c => `fa-${c}`).reduce((a, b) => a.concat(b))));
+
+        UI.SB_ColorClasses[+mode].split(' ').forEach(c => button.classList.add(`btn-${c}`));
+        UI.SB_IconClasses[+mode].split(' ').forEach(c => icon.classList.add(`fa-${c}`));
+
+        if (mode !== SaveButtonMode.SAVING) {
+            button.removeAttribute("disabled");
         } else {
-            UI._saveButton.setAttribute("disabled", "disabled");
+            button.setAttribute("disabled", "disabled");
         }
     }