keep some types (e.g. mermaid diagrams) of notes full width

src/public/app/layouts/desktop_layout.js

@@ -45,6 +45,7 @@ import EditedNotesWidget from "../widgets/ribbon_widgets/edited_notes.js";
 import OpenNoteButtonWidget from "../widgets/buttons/open_note_button_widget.js";
 import MermaidWidget from "../widgets/mermaid.js";
 import BookmarkButtons from "../widgets/bookmark_buttons.js";
+import NoteWrapperWidget from "../widgets/note_wrapper.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -110,9 +111,7 @@ export default class DesktopLayout {
                         .collapsible()
                         .id('center-pane')
                         .child(new SplitNoteContainer(() =>
-                            new FlexContainer('column')
-                                .css("flex-grow", "1")
-                                .collapsible()
+                            new NoteWrapperWidget()
                                 .child(new FlexContainer('row').class('title-row')
                                     .css("height", "50px")
                                     .css('align-items', "center")

src/public/app/widgets/containers/split_note_container.js

@@ -19,8 +19,6 @@ export default class SplitNoteContainer extends FlexContainer {
         const $renderedWidget = widget.render();
 
         $renderedWidget.attr("data-ntx-id", noteContext.ntxId);
-        $renderedWidget.addClass("note-split");
-
         $renderedWidget.on('click', () => appContext.tabManager.activateNoteContext(noteContext.ntxId));
 
         this.$widget.append($renderedWidget);

src/public/app/widgets/note_wrapper.js

@@ -0,0 +1,39 @@
+import FlexContainer from "./containers/flex_container.js";
+
+export default class NoteWrapperWidget extends FlexContainer {
+    constructor() {
+        super('column');
+
+        this.css("flex-grow", "1")
+            .collapsible();
+    }
+
+    doRender() {
+        super.doRender();
+
+        this.$widget.addClass("note-split");
+    }
+
+    setNoteContextEvent({noteContext}) {
+        this.refresh(noteContext);
+    }
+
+    noteSwitchedAndActivatedEvent({noteContext}) {
+        this.refresh(noteContext);
+    }
+
+    noteSwitchedEvent({noteContext}) {
+        this.refresh(noteContext);
+    }
+
+    activeContextChangedEvent({noteContext}) {
+        this.refresh(noteContext);
+    }
+
+    refresh(noteContext) {
+        this.$widget.toggleClass("full-content-width",
+            ['image', 'mermaid', 'book', 'render'].includes(noteContext?.note?.type)
+            || !!noteContext?.note?.hasLabel('fullContentWidth')
+        );
+    }
+}

src/public/stylesheets/style.css

@@ -954,3 +954,7 @@ input {
     margin-left: auto;
     margin-right: auto;
 }
+
+.note-split.full-content-width {
+    max-width: 999999px;
+}

src/services/attributes.js

@@ -51,6 +51,7 @@ const BUILTIN_ATTRIBUTES = [
     { type: 'label', name: 'bookmarkFolder' },
     { type: 'label', name: 'sorted' },
     { type: 'label', name: 'top' },
+    { type: 'label', name: 'fullContentWidth' },
 
     // relation names
     { type: 'relation', name: 'runOnNoteCreation', isDangerous: true },