From b725dbea7ea7f4cf44fcaf0225ee8e12101417af Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 15 Dec 2025 10:06:01 +0200
Subject: [PATCH] feat(layout/note_actions): export as image

---
 .../src/translations/en/translation.json      |  3 +++
 .../widgets/FloatingButtonsDefinitions.tsx    |  2 +-
 .../client/src/widgets/ribbon/NoteActions.tsx | 24 +++++++++++++++++++
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 9ecdcd640..e404651e6 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -696,6 +696,9 @@
     "convert_into_attachment_successful": "Note '{{title}}' has been converted to attachment.",
     "convert_into_attachment_prompt": "Are you sure you want to convert note '{{title}}' into an attachment of the parent note?",
     "print_pdf": "Export as PDF...",
+    "export_as_image": "Export as image",
+    "export_as_image_png": "PNG (raster)",
+    "export_as_image_svg": "SVG (vector)",
     "note_map": "Note map"
   },
   "onclick_button": {
diff --git a/apps/client/src/widgets/FloatingButtonsDefinitions.tsx b/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
index ec5db379c..114b02ed3 100644
--- a/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
+++ b/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
@@ -287,7 +287,7 @@ function CopyImageReferenceButton({ note, isDefaultViewMode }: FloatingButtonCon
 }
 
 function ExportImageButtons({ note, triggerEvent, isDefaultViewMode }: FloatingButtonContext) {
-    const isEnabled = ["mermaid", "mindMap"].includes(note?.type ?? "")
+    const isEnabled = !isNewLayout && ["mermaid", "mindMap"].includes(note?.type ?? "")
             && note?.isContentAvailable() && isDefaultViewMode;
     return isEnabled && (
         <>
diff --git a/apps/client/src/widgets/ribbon/NoteActions.tsx b/apps/client/src/widgets/ribbon/NoteActions.tsx
index cf2af8e09..bb6d9a8d8 100644
--- a/apps/client/src/widgets/ribbon/NoteActions.tsx
+++ b/apps/client/src/widgets/ribbon/NoteActions.tsx
@@ -2,6 +2,7 @@ import { ConvertToAttachmentResponse } from "@triliumnext/commons";
 import { useContext } from "preact/hooks";
 
 import appContext, { CommandNames } from "../../components/app_context";
+import Component from "../../components/component";
 import NoteContext from "../../components/note_context";
 import FNote from "../../entities/fnote";
 import branches from "../../services/branches";
@@ -66,6 +67,8 @@ function NoteContextMenu({ note, noteContext }: { note: FNote, noteContext?: Not
     const isSearchable = ["text", "code", "book", "mindMap", "doc"].includes(noteType);
     const isInOptionsOrHelp = note?.noteId.startsWith("_options") || note?.noteId.startsWith("_help");
     const isPrintable = ["text", "code"].includes(noteType) || (noteType === "book" && ["presentation", "list", "table"].includes(viewType ?? ""));
+    const isExportableToImage = ["mermaid", "mindMap"].includes(noteType);
+    const isContentAvailable = note.isContentAvailable();
     const isElectron = getIsElectron();
     const isMac = getIsMac();
     const hasSource = ["text", "code", "relationMap", "mermaid", "canvas", "mindMap", "aiChat"].includes(noteType);
@@ -110,6 +113,7 @@ function NoteContextMenu({ note, noteContext }: { note: FNote, noteContext?: Not
                     defaultType: "single"
                 })} />
             {isElectron && <CommandItem command="exportAsPdf" icon="bx bxs-file-pdf" disabled={!isPrintable} text={t("note_actions.print_pdf")} />}
+            {isExportableToImage && isNormalViewMode && isContentAvailable && <ExportAsImage ntxId={noteContext.ntxId} parentComponent={parentComponent} />}
             <CommandItem command="printActiveNote" icon="bx bx-printer" disabled={!isPrintable} text={t("note_actions.print_note")} />
 
             <FormDropdownDivider />
@@ -280,3 +284,23 @@ function ConvertToAttachment({ note }: { note: FNote }) {
         >{t("note_actions.convert_into_attachment")}</FormListItem>
     );
 }
+
+function ExportAsImage({ ntxId, parentComponent }: { ntxId: string | null | undefined, parentComponent: Component | null | undefined }) {
+    return (
+        <FormDropdownSubmenu
+            icon="bx bxs-file-image"
+            title={t("note_actions.export_as_image")}
+            dropStart
+        >
+            <FormListItem
+                icon="bx bxs-file-png"
+                onClick={() => parentComponent?.triggerEvent("exportPng", { ntxId })}
+            >{t("note_actions.export_as_image_png")}</FormListItem>
+
+            <FormListItem
+                icon="bx bx-shape-polygon"
+                onClick={() => parentComponent?.triggerEvent("exportSvg", { ntxId })}
+            >{t("note_actions.export_as_image_svg")}</FormListItem>
+        </FormDropdownSubmenu>
+    );
+}