Merge branch 'develop' into feature/MFA

src/public/app/widgets/floating_buttons/png_export_button.ts

@@ -0,0 +1,24 @@
+import { t } from "../../services/i18n.js";
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
+
+const TPL = `
+<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"].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();
+    }
+}

src/public/app/widgets/type_widgets/abstract_split_type_widget.ts

@@ -40,6 +40,10 @@ const TPL = `\
             flex-grow: 1;
         }
 
+        .note-detail-split .note-detail-split-editor .note-detail-code {
+            contain: size !important;
+        }
+
         .note-detail-split .note-detail-error-container {
             font-family: var(--monospace-font-family);
             margin: 5px;
@@ -184,7 +188,7 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
         }
 
         // Vertical vs horizontal layout
-        const layoutOrientation = options.get("splitEditorOrientation") ?? "horizontal";
+        const layoutOrientation = (!utils.isMobile() ? options.get("splitEditorOrientation") ?? "horizontal" : "vertical");
         if (this.layoutOrientation === layoutOrientation && this.isReadOnly === isReadOnly) {
             return;
         }

src/public/app/widgets/type_widgets/abstract_svg_split_type_widget.ts

@@ -217,4 +217,12 @@ export default abstract class AbstractSvgSplitTypeWidget extends AbstractSplitTy
         utils.downloadSvg(this.note.title, this.svg);
     }
 
+    async exportPngEvent({ ntxId }: EventData<"exportPng">) {
+        if (!this.isNoteContext(ntxId) || this.note?.type !== "mermaid" || !this.svg) {
+            return;
+        }
+
+        utils.downloadSvgAsPng(this.note.title, this.svg);
+    }
+
 }