fix(tab_manager): correct order when reopening split pane

apps/client/src/components/tab_manager.ts

@@ -647,7 +647,32 @@ export default class TabManager extends Component {
                 ...this.noteContexts.slice(-noteContexts.length),
                 ...this.noteContexts.slice(lastClosedTab.position, -noteContexts.length)
             ];
-            this.noteContextReorderEvent({ ntxIdsInOrder: ntxsInOrder.map((nc) => nc.ntxId).filter((id) => id !== null) });
+
+            // Update mainNtxId if the restored pane is the main pane in the split pane
+            const { oldMainNtxId, newMainNtxId } = (() => {
+                if (noteContexts.length !== 1) {
+                    return { oldMainNtxId: undefined, newMainNtxId: undefined };
+                }
+
+                const mainNtxId = noteContexts[0]?.mainNtxId;
+                const index = this.noteContexts.findIndex(c => c.ntxId === mainNtxId);
+
+                // No need to update if the restored position is after mainNtxId
+                if (index === -1 || lastClosedTab.position > index) {
+                    return { oldMainNtxId: undefined, newMainNtxId: undefined };
+                }
+
+                return {
+                    oldMainNtxId: this.noteContexts[index].ntxId ?? undefined,
+                    newMainNtxId: noteContexts[0]?.ntxId ?? undefined
+                };
+            })();
+
+            this.triggerCommand("noteContextReorder", {
+                ntxIdsInOrder: ntxsInOrder.map((nc) => nc.ntxId).filter((id) => id !== null),
+                oldMainNtxId,
+                newMainNtxId
+            });
 
             let mainNtx = noteContexts.find((nc) => nc.isMainContext());
             if (mainNtx) {

apps/client/src/widgets/buttons/close_pane_button.tsx

@@ -1,17 +1,19 @@
 import { useEffect, useState } from "preact/hooks";
 import { t } from "../../services/i18n";
 import ActionButton from "../react/ActionButton";
-import { useNoteContext, useTriliumEvent } from "../react/hooks";
+import { useNoteContext, useTriliumEvents } from "../react/hooks";
+import appContext from "../../components/app_context";
 
 export default function ClosePaneButton() {
     const { noteContext, ntxId, parentComponent } = useNoteContext();
     const [isEnabled, setIsEnabled] = useState(false);
 
     function refresh() {
-        setIsEnabled(!!(noteContext && !!noteContext.mainNtxId));
+        const isMainOfSomeContext = appContext.tabManager.noteContexts.some(c => c.mainNtxId === ntxId);
+        setIsEnabled(!!(noteContext && (!!noteContext.mainNtxId || isMainOfSomeContext)));
     }
 
-    useTriliumEvent("noteContextReorder", refresh);
+    useTriliumEvents(["noteContextRemoved", "noteContextReorder", "newNoteContextCreated"], refresh);
     useEffect(refresh, [ntxId]);
 
     return (

apps/client/src/widgets/containers/split_note_container.ts

@@ -100,9 +100,23 @@ export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {
     }
 
     async closeThisNoteSplitCommand({ ntxId }: CommandListenerData<"closeThisNoteSplit">) {
-        if (ntxId) {
+        if (!ntxId) return;
-            await appContext.tabManager.removeNoteContext(ntxId);
+        const contexts = appContext.tabManager.noteContexts;
+
+        const currentIndex = contexts.findIndex((c) => c.ntxId === ntxId);
+        if (currentIndex === -1) return;
+
+        const isRemoveMainContext = !contexts[currentIndex].mainNtxId;
+        if (isRemoveMainContext && currentIndex + 1 <= contexts.length) {
+            const ntxIds = contexts.map((c) => c.ntxId).filter((c) => !!c) as string[];
+            this.triggerCommand("noteContextReorder", {
+                ntxIdsInOrder: ntxIds,
+                oldMainNtxId: ntxId,
+                newMainNtxId: ntxIds[currentIndex + 1]
+            });
         }
+
+        await appContext.tabManager.removeNoteContext(ntxId);
     }
 
     async moveThisNoteSplitCommand({ ntxId, isMovingLeft }: CommandListenerData<"moveThisNoteSplit">) {
@@ -167,12 +181,16 @@ export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {
         splitService.delNoteSplitResizer(ntxIds);
     }
 
-    contextsReopenedEvent({ ntxId, afterNtxId }: EventData<"contextsReopened">) {
+    contextsReopenedEvent({ ntxId, mainNtxId, tabPosition, afterNtxId }: EventData<"contextsReopened">) {
-        if (ntxId === undefined || afterNtxId === undefined) {
+        if (ntxId !== undefined && afterNtxId !== undefined) {
-            // no single split reopened
-            return;
-        }
             this.$widget.find(`[data-ntx-id="${ntxId}"]`).insertAfter(this.$widget.find(`[data-ntx-id="${afterNtxId}"]`));
+        } else if (mainNtxId && tabPosition >= 0) {
+            const contexts = appContext.tabManager.noteContexts;
+            const nextIndex = contexts.findIndex(c => c.ntxId === mainNtxId);
+            const beforeNtxId = (nextIndex !== -1 && nextIndex + 1 < contexts.length) ? contexts[nextIndex + 1].ntxId : null;
+
+            this.$widget.find(`[data-ntx-id="${mainNtxId}"]`).insertBefore(this.$widget.find(`[data-ntx-id="${beforeNtxId}"]`));
+        }
     }
 
     async refresh() {

apps/client/src/widgets/tab_row.ts

@@ -820,12 +820,15 @@ export default class TabRowWidget extends BasicWidget {
     }
 
     contextsReopenedEvent({ mainNtxId, tabPosition }: EventData<"contextsReopened">) {
-        if (!mainNtxId || !tabPosition) {
+        if (!mainNtxId || tabPosition < 0) {
             // no tab reopened
             return;
         }
         const tabEl = this.getTabById(mainNtxId)[0];
-        tabEl.parentNode?.insertBefore(tabEl, this.tabEls[tabPosition]);
+
+        if ( tabEl && tabEl.parentNode ){
+            tabEl.parentNode.insertBefore(tabEl, this.tabEls[tabPosition]);
+        }
     }
 
     updateTabById(ntxId: string | null) {

apps/server/src/share/content_renderer.ts

@@ -325,11 +325,6 @@ function renderText(result: Result, note: SNote | BNote) {
 
         // Apply syntax highlight.
         for (const codeEl of document.querySelectorAll("pre code")) {
-            if (codeEl.classList.contains("language-mermaid") && note.type === "text") {
-                // Mermaid is handled on client-side, we don't want to break it by adding syntax highlighting.
-                continue;
-            }
-
             const highlightResult = highlightAuto(codeEl.innerText);
             codeEl.innerHTML = highlightResult.value;
             codeEl.classList.add("hljs");