fix(mermaid) diagrams not saving content and SVG attachment (#8220)

apps/client/src/widgets/type_widgets/Mermaid.tsx

@@ -29,6 +29,7 @@ export default function Mermaid(props: TypeWidgetProps) {
         <SvgSplitEditor
             attachmentName="mermaid-export"
             renderSvg={renderSvg}
+            noteType="mermaid"
             {...props}
         />
     );

apps/client/src/widgets/type_widgets/code/Code.tsx

@@ -1,6 +1,7 @@
 import "./code.css";
 
 import { default as VanillaCodeMirror, getThemeById } from "@triliumnext/codemirror";
+import { NoteType } from "@triliumnext/commons";
 import { useEffect, useRef, useState } from "preact/hooks";
 
 import appContext, { CommandListenerData } from "../../../components/app_context";
@@ -24,6 +25,7 @@ export interface EditableCodeProps extends TypeWidgetProps, Omit<CodeEditorProps
     debounceUpdate?: boolean;
     lineWrapping?: boolean;
     updateInterval?: number;
+    noteType?: NoteType;
     /** Invoked when the content of the note is changed, such as a different revision or a note switch. */
     onContentChanged?: (content: string) => void;
     /** Invoked after the content of the note has been uploaded to the server, using a spaced update. */
@@ -72,14 +74,14 @@ function formatViewSource(note: FNote, content: string) {
     return content;
 }
 
-export function EditableCode({ note, ntxId, noteContext, debounceUpdate, parentComponent, updateInterval, onContentChanged, dataSaved, ...editorProps }: EditableCodeProps) {
+export function EditableCode({ note, ntxId, noteContext, debounceUpdate, parentComponent, updateInterval, noteType = "code", onContentChanged, dataSaved, ...editorProps }: EditableCodeProps) {
     const editorRef = useRef<VanillaCodeMirror>(null);
     const containerRef = useRef<HTMLPreElement>(null);
     const [ vimKeymapEnabled ] = useTriliumOptionBool("vimKeymapEnabled");
     const mime = useNoteProperty(note, "mime");
     const spacedUpdate = useEditorSpacedUpdate({
         note,
-        noteType: "code",
+        noteType,
         noteContext,
         getData: () => ({ content: editorRef.current?.getText() ?? "" }),
         onContentChange: (content) => {

apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "preact/hooks";
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 import { t } from "../../../services/i18n";
 import SplitEditor, { PreviewButton, SplitEditorProps } from "./SplitEditor";
 import { RawHtmlBlock } from "../../react/RawHtml";
@@ -55,7 +55,9 @@ export default function SvgSplitEditor({ ntxId, note, attachmentName, renderSvg,
     }
 
     // Save as attachment.
-    function onSave() {
+    const onSave = useCallback(() => {
+        if (!svg) return; // Don't save if SVG hasn't been rendered yet
+
         const payload = {
             role: "image",
             title: `${attachmentName}.svg`,
@@ -65,16 +67,18 @@ export default function SvgSplitEditor({ ntxId, note, attachmentName, renderSvg,
         };
 
         server.post(`notes/${note.noteId}/attachments?matchBy=title`, payload);
-    }
+    }, [ svg, attachmentName, note.noteId ]);
 
     // Save the SVG when entering a note only when it does not have an attachment.
     useEffect(() => {
+        if (!svg) return; // Wait until SVG is rendered
+
         note?.getAttachments().then((attachments) => {
             if (!attachments.find((a) => a.title === `${attachmentName}.svg`)) {
                 onSave();
             }
-        });
-    }, [ note ]);
+        }).catch(e => console.error("Failed to get attachments for SVGSplitEditor", e));
+    }, [ note, svg, attachmentName, onSave ]);
 
     // Import/export
     useTriliumEvent("exportSvg", async({ ntxId: eventNtxId }) => {