From cabe240e7ee8c6066637ee4fd8511aaf6b63060f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 28 Aug 2025 00:06:40 +0300
Subject: [PATCH] refactor(react/floating_buttons): split into two buttons

---
 apps/client/src/widgets/FloatingButtons.tsx   | 305 +----------------
 .../widgets/FloatingButtonsDefinitions.tsx    | 306 ++++++++++++++++++
 2 files changed, 308 insertions(+), 303 deletions(-)
 create mode 100644 apps/client/src/widgets/FloatingButtonsDefinitions.tsx

diff --git a/apps/client/src/widgets/FloatingButtons.tsx b/apps/client/src/widgets/FloatingButtons.tsx
index c42d8d01d..97db0ff3b 100644
--- a/apps/client/src/widgets/FloatingButtons.tsx
+++ b/apps/client/src/widgets/FloatingButtons.tsx
@@ -1,107 +1,12 @@
 import { t } from "i18next";
 import "./FloatingButtons.css";
 import Button from "./react/Button";
-import ActionButton, { ActionButtonProps } from "./react/ActionButton";
-import FNote from "../entities/fnote";
-import NoteContext from "../components/note_context";
 import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEvent, useTriliumEvents, useTriliumOption, useTriliumOptionBool } from "./react/hooks";
 import { useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { ParentComponent } from "./react/react_utils";
-import Component from "../components/component";
-import { VNode } from "preact";
 import attributes from "../services/attributes";
-import appContext, { EventData, EventNames } from "../components/app_context";
-import protected_session_holder from "../services/protected_session_holder";
-import options from "../services/options";
-import { createImageSrcUrl, openInAppHelpFromUrl } from "../services/utils";
-import toast from "../services/toast";
-import server from "../services/server";
-import { SaveSqlConsoleResponse } from "@triliumnext/commons";
-import tree from "../services/tree";
-import { copyImageReferenceToClipboard } from "../services/image";
-
-interface FloatingButtonContext {
-    parentComponent: Component;
-    note: FNote;    
-    noteContext: NoteContext;
-    /** Shorthand for triggering an event from the parent component. The `ntxId` is automatically handled for convenience. */
-    triggerEvent<T extends EventNames>(name: T, data?: Omit<EventData<T>, "ntxId">): void;
-}
-
-interface FloatingButtonDefinition {
-    component: (context: FloatingButtonContext) => VNode;    
-    isEnabled: (context: FloatingButtonContext) => boolean | Promise<boolean>;
-}
-
-const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [
-    {
-        component: RefreshBackendLogButton,
-        isEnabled: ({ note, noteContext }) => note.noteId === "_backendLog" && noteContext.viewScope?.viewMode === "default",
-    },
-    {
-        component: SwitchSplitOrientationButton,
-        isEnabled: ({ note, noteContext }) => note.type === "mermaid" && note.isContentAvailable() && !note.hasLabel("readOnly") && noteContext.viewScope?.viewMode === "default"
-    },
-    {
-        component: ToggleReadOnlyButton,
-        isEnabled: ({ note, noteContext }) =>
-            (note.type === "mermaid" || note.getLabelValue("viewType") === "geoMap")
-            && note.isContentAvailable()
-            && noteContext.viewScope?.viewMode === "default"
-    },
-    {
-        component: EditButton,
-        isEnabled: async ({ note, noteContext }) =>
-            noteContext.viewScope?.viewMode === "default"
-            && (!note.isProtected || protected_session_holder.isProtectedSessionAvailable())
-            && !options.is("databaseReadonly")
-            && await noteContext?.isReadOnly()
-    },
-    {
-        component: ShowTocWidgetButton,
-        isEnabled: ({ note, noteContext }) => 
-            note.type === "text" && noteContext?.viewScope?.viewMode === "default"
-            && !!noteContext.viewScope?.tocTemporarilyHidden
-    },
-    {
-        component: ShowHighlightsListWidgetButton,
-        isEnabled: ({ note, noteContext }) => 
-            note.type === "text" && noteContext?.viewScope?.viewMode === "default"
-            && !!noteContext.viewScope?.highlightsListTemporarilyHidden
-    },
-    {
-        component: RunActiveNoteButton,
-        isEnabled: ({ note }) => note.mime.startsWith("application/javascript") || note.mime === "text/x-sqlite;schema=trilium"
-    },
-    {
-        component: OpenTriliumApiDocsButton,
-        isEnabled: ({ note }) => note.mime.startsWith("application/javascript;env=")
-    },
-    {
-        component: SaveToNoteButton,
-        isEnabled: ({ note }) => note.mime === "text/x-sqlite;schema=trilium" && note.isHiddenCompletely()
-    },
-    {
-        component: RelationMapButtons,
-        isEnabled: ({ note }) => note.type === "relationMap"
-    },
-    {
-        component: GeoMapButtons,
-        isEnabled: ({ note }) => note?.getLabelValue("viewType") === "geoMap" && !note.hasLabel("readOnly")
-    },
-    {
-        component: CopyImageReferenceButton,
-        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"
-    }
-];
+import { EventData, EventNames } from "../components/app_context";
+import { FLOATING_BUTTON_DEFINITIONS, FloatingButtonContext, FloatingButtonDefinition } from "./FloatingButtonsDefinitions";
 
 async function getFloatingButtonDefinitions(context: FloatingButtonContext) {
     const defs: FloatingButtonDefinition[] = [];
@@ -178,212 +83,6 @@ export default function FloatingButtons() {
     )
 }
 
-function RefreshBackendLogButton({ parentComponent, noteContext }: FloatingButtonContext) {
-    return <FloatingButton
-        text={t("backend_log.refresh")}
-        icon="bx bx-refresh"
-        onClick={() => parentComponent.triggerEvent("refreshData", { ntxId: noteContext.ntxId })}
-    />
-}
-
-function SwitchSplitOrientationButton({ }: FloatingButtonContext) {
-    const [ splitEditorOrientation, setSplitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
-    const upcomingOrientation = splitEditorOrientation === "horizontal" ? "vertical" : "horizontal";
-
-    return <FloatingButton
-        text={upcomingOrientation === "vertical" ? t("switch_layout_button.title_vertical") : t("switch_layout_button.title_horizontal")}
-        icon={upcomingOrientation === "vertical" ? "bx bxs-dock-bottom" : "bx bxs-dock-left"}        
-        onClick={() => setSplitEditorOrientation(upcomingOrientation)}
-    />
-}
-
-function ToggleReadOnlyButton({ note }: FloatingButtonContext) {
-    const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly");
-
-    return <FloatingButton
-        text={isReadOnly ? t("toggle_read_only_button.unlock-editing") : t("toggle_read_only_button.lock-editing")}
-        icon={isReadOnly ? "bx bx-lock-open-alt" : "bx bx-lock-alt"}
-        onClick={() => setReadOnly(!isReadOnly)}
-    />
-}
-
-function EditButton({ noteContext }: FloatingButtonContext) {
-    const [ animationClass, setAnimationClass ] = useState("");
-
-    // make the edit button stand out on the first display, otherwise
-    // it's difficult to notice that the note is readonly
-    useEffect(() => {
-        setAnimationClass("bx-tada bx-lg");
-        setTimeout(() => {
-            setAnimationClass("");
-        }, 1700);
-    }, []);
-
-    return <FloatingButton
-        text={t("edit_button.edit_this_note")}
-        icon="bx bx-pencil"
-        className={animationClass}
-        onClick={() => {
-            if (noteContext.viewScope) {
-                noteContext.viewScope.readOnlyTemporarilyDisabled = true;
-                appContext.triggerEvent("readOnlyTemporarilyDisabled", { noteContext });
-            }
-        }}
-    />
-}
-
-function ShowTocWidgetButton({ noteContext }: FloatingButtonContext) {
-    return <FloatingButton
-        text={t("show_toc_widget_button.show_toc")}
-        icon="bx bx-tn-toc"
-        onClick={() => {
-            if (noteContext?.viewScope && noteContext.noteId) {
-                noteContext.viewScope.tocTemporarilyHidden = false;
-                appContext.triggerEvent("showTocWidget", { noteId: noteContext.noteId });
-            }
-        }}
-    />
-}
-
-function ShowHighlightsListWidgetButton({ noteContext }: FloatingButtonContext) {
-    return <FloatingButton
-        text={t("show_highlights_list_widget_button.show_highlights_list")}
-        icon="bx bx-bookmarks"
-        onClick={() => {
-            if (noteContext?.viewScope && noteContext.noteId) {
-                noteContext.viewScope.highlightsListTemporarilyHidden = false;
-                appContext.triggerEvent("showHighlightsListWidget", { noteId: noteContext.noteId });
-            }
-        }}
-    />
-}
-
-function RunActiveNoteButton() {
-    return <FloatingButton
-        icon="bx bx-play"
-        text={t("code_buttons.execute_button_title")}
-        triggerCommand="runActiveNote"
-    />
-}
-
-function OpenTriliumApiDocsButton({ note }: FloatingButtonContext) {
-    return <FloatingButton
-        icon="bx bx-help-circle"
-        text={t("code_buttons.trilium_api_docs_button_title")}
-        onClick={() => openInAppHelpFromUrl(note.mime.endsWith("frontend") ? "Q2z6av6JZVWm" : "MEtfsqa5VwNi")}
-    />
-}
-
-function SaveToNoteButton({ note }: FloatingButtonContext) {
-    return <FloatingButton
-        icon="bx bx-save"
-        text={t("code_buttons.save_to_note_button_title")}
-        onClick={async (e) => {
-            e.preventDefault();
-            const { notePath } = await server.post<SaveSqlConsoleResponse>("special-notes/save-sql-console", { sqlConsoleNoteId: note.noteId });
-            if (notePath) {
-                toast.showMessage(t("code_buttons.sql_console_saved_message", { "note_path": await tree.getNotePathTitle(notePath) }));
-                // TODO: This hangs the navigation, for some reason.
-                //await ws.waitForMaxKnownEntityChangeId();
-                await appContext.tabManager.getActiveContext()?.setNote(notePath);
-            }
-        }}
-    />
-}
-
-function RelationMapButtons({ triggerEvent }: FloatingButtonContext) {
-    return (
-        <>
-            <FloatingButton
-                icon="bx bx-folder-plus"
-                text={t("relation_map_buttons.create_child_note_title")}
-                onClick={() => triggerEvent("relationMapCreateChildNote")}
-            />
-
-            <FloatingButton
-                icon="bx bx-crop"
-                text={t("relation_map_buttons.reset_pan_zoom_title")}
-                onClick={() => triggerEvent("relationMapResetPanZoom")}
-            />
-
-            <div className="btn-group">
-                <FloatingButton
-                    icon="bx bx-zoom-in"
-                    text={t("relation_map_buttons.zoom_in_title")}
-                    onClick={() => triggerEvent("relationMapResetZoomIn")}
-                />
-
-                <FloatingButton
-                    icon="bx bx-zoom-out"
-                    text={t("relation_map_buttons.zoom_out_title")}
-                    onClick={() => triggerEvent("relationMapResetZoomOut")}
-                />
-            </div>
-        </>
-    )
-}
-
-function GeoMapButtons({ triggerEvent }) {
-    return (
-        <FloatingButton
-            icon="bx bx-plus-circle"
-            text={t("geo-map.create-child-note-title")}
-            onClick={() => triggerEvent("geoMapCreateChildNote")}
-        />
-    );
-}
-
-function CopyImageReferenceButton({ note }: FloatingButtonContext) {
-    const hiddenImageCopyRef = useRef<HTMLDivElement>(null);
-
-    return (
-        <>
-            <FloatingButton
-                icon="bx bx-copy"
-                text={t("copy_image_reference_button.button_title")}
-                onClick={() => {
-                    if (!hiddenImageCopyRef.current) return;
-                    const imageEl = document.createElement("img");
-                    imageEl.src = createImageSrcUrl(note);
-                    hiddenImageCopyRef.current.replaceChildren(imageEl);
-                    copyImageReferenceToClipboard($(hiddenImageCopyRef.current));
-                    hiddenImageCopyRef.current.removeChild(imageEl);
-                }}
-            />
-
-            <div ref={hiddenImageCopyRef} className="hidden-image-copy" style={{
-                position: "absolute" // Take out of the the hidden image from flexbox to prevent the layout being affected
-            }} />
-        </>
-    )
-}
-
-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 ?? ""}`}
-        noIconActionClass
-        {...props}
-    />
-}
-
 /**
  * Show button that displays floating button after click on close button
  */
diff --git a/apps/client/src/widgets/FloatingButtonsDefinitions.tsx b/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
new file mode 100644
index 000000000..b817908c4
--- /dev/null
+++ b/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
@@ -0,0 +1,306 @@
+import { VNode } from "preact";
+import appContext, { EventData, EventNames } from "../components/app_context";
+import Component from "../components/component";
+import NoteContext from "../components/note_context";
+import FNote from "../entities/fnote";
+import ActionButton, { ActionButtonProps } from "./react/ActionButton";
+import { useNoteLabelBoolean, useTriliumOption } from "./react/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { createImageSrcUrl, openInAppHelpFromUrl } from "../services/utils";
+import server from "../services/server";
+import { SaveSqlConsoleResponse } from "@triliumnext/commons";
+import toast from "../services/toast";
+import { t } from "../services/i18n";
+import { copyImageReferenceToClipboard } from "../services/image";
+import tree from "../services/tree";
+import protected_session_holder from "../services/protected_session_holder";
+import options from "../services/options";
+
+export interface FloatingButtonDefinition {
+    component: (context: FloatingButtonContext) => VNode;
+    isEnabled: (context: FloatingButtonContext) => boolean | Promise<boolean>;
+}
+
+export interface FloatingButtonContext {
+    parentComponent: Component;
+    note: FNote;    
+    noteContext: NoteContext;
+    /** Shorthand for triggering an event from the parent component. The `ntxId` is automatically handled for convenience. */
+    triggerEvent<T extends EventNames>(name: T, data?: Omit<EventData<T>, "ntxId">): void;
+}
+
+function FloatingButton({ className, ...props }: ActionButtonProps) {
+    return <ActionButton
+        className={`floating-button ${className ?? ""}`}
+        noIconActionClass
+        {...props}
+    />
+}
+
+export const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [
+    {
+        component: RefreshBackendLogButton,
+        isEnabled: ({ note, noteContext }) => note.noteId === "_backendLog" && noteContext.viewScope?.viewMode === "default",
+    },
+    {
+        component: SwitchSplitOrientationButton,
+        isEnabled: ({ note, noteContext }) => note.type === "mermaid" && note.isContentAvailable() && !note.hasLabel("readOnly") && noteContext.viewScope?.viewMode === "default"
+    },
+    {
+        component: ToggleReadOnlyButton,
+        isEnabled: ({ note, noteContext }) =>
+            (note.type === "mermaid" || note.getLabelValue("viewType") === "geoMap")
+            && note.isContentAvailable()
+            && noteContext.viewScope?.viewMode === "default"
+    },
+    {
+        component: EditButton,
+        isEnabled: async ({ note, noteContext }) =>
+            noteContext.viewScope?.viewMode === "default"
+            && (!note.isProtected || protected_session_holder.isProtectedSessionAvailable())
+            && !options.is("databaseReadonly")
+            && await noteContext?.isReadOnly()
+    },
+    {
+        component: ShowTocWidgetButton,
+        isEnabled: ({ note, noteContext }) => 
+            note.type === "text" && noteContext?.viewScope?.viewMode === "default"
+            && !!noteContext.viewScope?.tocTemporarilyHidden
+    },
+    {
+        component: ShowHighlightsListWidgetButton,
+        isEnabled: ({ note, noteContext }) => 
+            note.type === "text" && noteContext?.viewScope?.viewMode === "default"
+            && !!noteContext.viewScope?.highlightsListTemporarilyHidden
+    },
+    {
+        component: RunActiveNoteButton,
+        isEnabled: ({ note }) => note.mime.startsWith("application/javascript") || note.mime === "text/x-sqlite;schema=trilium"
+    },
+    {
+        component: OpenTriliumApiDocsButton,
+        isEnabled: ({ note }) => note.mime.startsWith("application/javascript;env=")
+    },
+    {
+        component: SaveToNoteButton,
+        isEnabled: ({ note }) => note.mime === "text/x-sqlite;schema=trilium" && note.isHiddenCompletely()
+    },
+    {
+        component: RelationMapButtons,
+        isEnabled: ({ note }) => note.type === "relationMap"
+    },
+    {
+        component: GeoMapButtons,
+        isEnabled: ({ note }) => note?.getLabelValue("viewType") === "geoMap" && !note.hasLabel("readOnly")
+    },
+    {
+        component: CopyImageReferenceButton,
+        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"
+    }
+];
+
+function RefreshBackendLogButton({ parentComponent, noteContext }: FloatingButtonContext) {
+    return <FloatingButton
+        text={t("backend_log.refresh")}
+        icon="bx bx-refresh"
+        onClick={() => parentComponent.triggerEvent("refreshData", { ntxId: noteContext.ntxId })}
+    />
+}
+
+function SwitchSplitOrientationButton({ }: FloatingButtonContext) {
+    const [ splitEditorOrientation, setSplitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
+    const upcomingOrientation = splitEditorOrientation === "horizontal" ? "vertical" : "horizontal";
+
+    return <FloatingButton
+        text={upcomingOrientation === "vertical" ? t("switch_layout_button.title_vertical") : t("switch_layout_button.title_horizontal")}
+        icon={upcomingOrientation === "vertical" ? "bx bxs-dock-bottom" : "bx bxs-dock-left"}        
+        onClick={() => setSplitEditorOrientation(upcomingOrientation)}
+    />
+}
+
+function ToggleReadOnlyButton({ note }: FloatingButtonContext) {
+    const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly");
+
+    return <FloatingButton
+        text={isReadOnly ? t("toggle_read_only_button.unlock-editing") : t("toggle_read_only_button.lock-editing")}
+        icon={isReadOnly ? "bx bx-lock-open-alt" : "bx bx-lock-alt"}
+        onClick={() => setReadOnly(!isReadOnly)}
+    />
+}
+
+function EditButton({ noteContext }: FloatingButtonContext) {
+    const [ animationClass, setAnimationClass ] = useState("");
+
+    // make the edit button stand out on the first display, otherwise
+    // it's difficult to notice that the note is readonly
+    useEffect(() => {
+        setAnimationClass("bx-tada bx-lg");
+        setTimeout(() => {
+            setAnimationClass("");
+        }, 1700);
+    }, []);
+
+    return <FloatingButton
+        text={t("edit_button.edit_this_note")}
+        icon="bx bx-pencil"
+        className={animationClass}
+        onClick={() => {
+            if (noteContext.viewScope) {
+                noteContext.viewScope.readOnlyTemporarilyDisabled = true;
+                appContext.triggerEvent("readOnlyTemporarilyDisabled", { noteContext });
+            }
+        }}
+    />
+}
+
+function ShowTocWidgetButton({ noteContext }: FloatingButtonContext) {
+    return <FloatingButton
+        text={t("show_toc_widget_button.show_toc")}
+        icon="bx bx-tn-toc"
+        onClick={() => {
+            if (noteContext?.viewScope && noteContext.noteId) {
+                noteContext.viewScope.tocTemporarilyHidden = false;
+                appContext.triggerEvent("showTocWidget", { noteId: noteContext.noteId });
+            }
+        }}
+    />
+}
+
+function ShowHighlightsListWidgetButton({ noteContext }: FloatingButtonContext) {
+    return <FloatingButton
+        text={t("show_highlights_list_widget_button.show_highlights_list")}
+        icon="bx bx-bookmarks"
+        onClick={() => {
+            if (noteContext?.viewScope && noteContext.noteId) {
+                noteContext.viewScope.highlightsListTemporarilyHidden = false;
+                appContext.triggerEvent("showHighlightsListWidget", { noteId: noteContext.noteId });
+            }
+        }}
+    />
+}
+
+function RunActiveNoteButton() {
+    return <FloatingButton
+        icon="bx bx-play"
+        text={t("code_buttons.execute_button_title")}
+        triggerCommand="runActiveNote"
+    />
+}
+
+function OpenTriliumApiDocsButton({ note }: FloatingButtonContext) {
+    return <FloatingButton
+        icon="bx bx-help-circle"
+        text={t("code_buttons.trilium_api_docs_button_title")}
+        onClick={() => openInAppHelpFromUrl(note.mime.endsWith("frontend") ? "Q2z6av6JZVWm" : "MEtfsqa5VwNi")}
+    />
+}
+
+function SaveToNoteButton({ note }: FloatingButtonContext) {
+    return <FloatingButton
+        icon="bx bx-save"
+        text={t("code_buttons.save_to_note_button_title")}
+        onClick={async (e) => {
+            e.preventDefault();
+            const { notePath } = await server.post<SaveSqlConsoleResponse>("special-notes/save-sql-console", { sqlConsoleNoteId: note.noteId });
+            if (notePath) {
+                toast.showMessage(t("code_buttons.sql_console_saved_message", { "note_path": await tree.getNotePathTitle(notePath) }));
+                // TODO: This hangs the navigation, for some reason.
+                //await ws.waitForMaxKnownEntityChangeId();
+                await appContext.tabManager.getActiveContext()?.setNote(notePath);
+            }
+        }}
+    />
+}
+
+function RelationMapButtons({ triggerEvent }: FloatingButtonContext) {
+    return (
+        <>
+            <FloatingButton
+                icon="bx bx-folder-plus"
+                text={t("relation_map_buttons.create_child_note_title")}
+                onClick={() => triggerEvent("relationMapCreateChildNote")}
+            />
+
+            <FloatingButton
+                icon="bx bx-crop"
+                text={t("relation_map_buttons.reset_pan_zoom_title")}
+                onClick={() => triggerEvent("relationMapResetPanZoom")}
+            />
+
+            <div className="btn-group">
+                <FloatingButton
+                    icon="bx bx-zoom-in"
+                    text={t("relation_map_buttons.zoom_in_title")}
+                    onClick={() => triggerEvent("relationMapResetZoomIn")}
+                />
+
+                <FloatingButton
+                    icon="bx bx-zoom-out"
+                    text={t("relation_map_buttons.zoom_out_title")}
+                    onClick={() => triggerEvent("relationMapResetZoomOut")}
+                />
+            </div>
+        </>
+    )
+}
+
+function GeoMapButtons({ triggerEvent }) {
+    return (
+        <FloatingButton
+            icon="bx bx-plus-circle"
+            text={t("geo-map.create-child-note-title")}
+            onClick={() => triggerEvent("geoMapCreateChildNote")}
+        />
+    );
+}
+
+function CopyImageReferenceButton({ note }: FloatingButtonContext) {
+    const hiddenImageCopyRef = useRef<HTMLDivElement>(null);
+
+    return (
+        <>
+            <FloatingButton
+                icon="bx bx-copy"
+                text={t("copy_image_reference_button.button_title")}
+                onClick={() => {
+                    if (!hiddenImageCopyRef.current) return;
+                    const imageEl = document.createElement("img");
+                    imageEl.src = createImageSrcUrl(note);
+                    hiddenImageCopyRef.current.replaceChildren(imageEl);
+                    copyImageReferenceToClipboard($(hiddenImageCopyRef.current));
+                    hiddenImageCopyRef.current.removeChild(imageEl);
+                }}
+            />
+
+            <div ref={hiddenImageCopyRef} className="hidden-image-copy" style={{
+                position: "absolute" // Take out of the the hidden image from flexbox to prevent the layout being affected
+            }} />
+        </>
+    )
+}
+
+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")}
+            />
+        </>
+    )
+}
\ No newline at end of file