From e72fb39c4d22a8a2d19106f979b843c285572e5d Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 28 Aug 2025 00:02:02 +0300
Subject: [PATCH] feat(react/floating_buttons): port PNG/SVG export buttons

---
 apps/client/src/widgets/FloatingButtons.tsx   | 24 +++++++++++++++++++
 .../floating_buttons/png_export_button.ts     | 24 -------------------
 .../floating_buttons/svg_export_button.ts     | 24 -------------------
 3 files changed, 24 insertions(+), 48 deletions(-)
 delete mode 100644 apps/client/src/widgets/floating_buttons/png_export_button.ts
 delete mode 100644 apps/client/src/widgets/floating_buttons/svg_export_button.ts

diff --git a/apps/client/src/widgets/FloatingButtons.tsx b/apps/client/src/widgets/FloatingButtons.tsx
index f38200072..c42d8d01d 100644
--- a/apps/client/src/widgets/FloatingButtons.tsx
+++ b/apps/client/src/widgets/FloatingButtons.tsx
@@ -94,6 +94,12 @@ const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [
         isEnabled: ({ note, noteContext }) =>
             ["mermaid", "canvas", "mindMap"].includes(note?.type ?? "")
             && note?.isContentAvailable() && noteContext.viewScope?.viewMode === "default"
+    },
+    {
+        component: ExportImageButtons,
+        isEnabled: ({ note, noteContext }) =>
+            ["mermaid", "mindMap"].includes(note?.type ?? "")
+            && note?.isContentAvailable() && noteContext?.viewScope?.viewMode === "default"
     }
 ];
 
@@ -352,6 +358,24 @@ function CopyImageReferenceButton({ note }: FloatingButtonContext) {
     )
 }
 
+function ExportImageButtons({ triggerEvent }: FloatingButtonContext) {
+    return (
+        <>
+            <FloatingButton
+                icon="bx bxs-file-image"
+                text={t("svg_export_button.button_title")}
+                onClick={() => triggerEvent("exportSvg")}
+            />
+
+            <FloatingButton
+                icon="bx bxs-file-png"
+                text={t("png_export_button.button_title")}
+                onClick={() => triggerEvent("exportPng")}
+            />
+        </>
+    )
+}
+
 function FloatingButton({ className, ...props }: ActionButtonProps) {
     return <ActionButton
         className={`floating-button ${className ?? ""}`}
diff --git a/apps/client/src/widgets/floating_buttons/png_export_button.ts b/apps/client/src/widgets/floating_buttons/png_export_button.ts
deleted file mode 100644
index 8f5ccba9c..000000000
--- a/apps/client/src/widgets/floating_buttons/png_export_button.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { t } from "../../services/i18n.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-
-const TPL = /*html*/`
-<button type="button"
-        class="export-svg-button"
-        title="${t("png_export_button.button_title")}">
-        <span class="bx bxs-file-png"></span>
-</button>
-`;
-
-export default class PngExportButton extends NoteContextAwareWidget {
-    isEnabled() {
-        return super.isEnabled() && ["mermaid", "mindMap"].includes(this.note?.type ?? "") && this.note?.isContentAvailable() && this.noteContext?.viewScope?.viewMode === "default";
-    }
-
-    doRender() {
-        super.doRender();
-
-        this.$widget = $(TPL);
-        this.$widget.on("click", () => this.triggerEvent("exportPng", { ntxId: this.ntxId }));
-        this.contentSized();
-    }
-}
diff --git a/apps/client/src/widgets/floating_buttons/svg_export_button.ts b/apps/client/src/widgets/floating_buttons/svg_export_button.ts
deleted file mode 100644
index 12e8d0520..000000000
--- a/apps/client/src/widgets/floating_buttons/svg_export_button.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { t } from "../../services/i18n.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-
-const TPL = /*html*/`
-<button type="button"
-        class="export-svg-button"
-        title="${t("svg_export_button.button_title")}">
-        <span class="bx bxs-file-image"></span>
-</button>
-`;
-
-export default class SvgExportButton extends NoteContextAwareWidget {
-    isEnabled() {
-        return super.isEnabled() && ["mermaid", "mindMap"].includes(this.note?.type ?? "") && this.note?.isContentAvailable() && this.noteContext?.viewScope?.viewMode === "default";
-    }
-
-    doRender() {
-        super.doRender();
-
-        this.$widget = $(TPL);
-        this.$widget.on("click", () => this.triggerEvent("exportSvg", { ntxId: this.ntxId }));
-        this.contentSized();
-    }
-}