From 12abdcaf6c45aca4843518b901514d76cd2ba19d Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 29 Nov 2025 10:31:56 +0200
Subject: [PATCH] fix(ribbon): formatting toolbar disappearing after viewing
 attachments

---
 apps/client/src/widgets/ribbon/Ribbon.tsx     | 110 +++++++++---------
 .../type_widgets/text/ReadOnlyText.tsx        |   1 -
 2 files changed, 55 insertions(+), 56 deletions(-)

diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx
index 78cec9aca..60b2e2667 100644
--- a/apps/client/src/widgets/ribbon/Ribbon.tsx
+++ b/apps/client/src/widgets/ribbon/Ribbon.tsx
@@ -8,6 +8,7 @@ import NoteActions from "./NoteActions";
 import { KeyboardActionNames } from "@triliumnext/commons";
 import { RIBBON_TAB_DEFINITIONS } from "./RibbonDefinition";
 import { TabConfiguration, TitleContext } from "./ribbon-interface";
+import clsx from "clsx";
 
 const TAB_CONFIGURATION = numberObjectsInPlace<TabConfiguration>(RIBBON_TAB_DEFINITIONS);
 
@@ -63,62 +64,61 @@ export default function Ribbon() {
     }, [ computedTabs, activeTabIndex ]));
 
     return (
-        <div className="ribbon-container" style={{ contain: "none" }}>
-            {noteContext?.viewScope?.viewMode === "default" && (
-                <>
-                    <div className="ribbon-top-row">
-                        <div className="ribbon-tab-container">
-                            {computedTabs && computedTabs.map(({ title, icon, index, toggleCommand, shouldShow }) => (
-                                shouldShow && <RibbonTab
-                                    icon={icon}
-                                    title={typeof title === "string" ? title : title(titleContext)}
-                                    active={index === activeTabIndex}
-                                    toggleCommand={toggleCommand}
-                                    onClick={() => {
-                                        if (activeTabIndex !== index) {
-                                            setActiveTabIndex(index);
-                                        } else {
-                                            // Collapse
-                                            setActiveTabIndex(undefined);
-                                        }
-                                    }}
-                                />
-                            ))}
+        <div
+            className={clsx("ribbon-container", noteContext?.viewScope?.viewMode !== "default" && "hidden-ext")}
+            style={{ contain: "none" }}
+        >
+            <div className="ribbon-top-row">
+                <div className="ribbon-tab-container">
+                    {computedTabs && computedTabs.map(({ title, icon, index, toggleCommand, shouldShow }) => (
+                        shouldShow && <RibbonTab
+                            icon={icon}
+                            title={typeof title === "string" ? title : title(titleContext)}
+                            active={index === activeTabIndex}
+                            toggleCommand={toggleCommand}
+                            onClick={() => {
+                                if (activeTabIndex !== index) {
+                                    setActiveTabIndex(index);
+                                } else {
+                                    // Collapse
+                                    setActiveTabIndex(undefined);
+                                }
+                            }}
+                        />
+                    ))}
+                </div>
+                <div className="ribbon-button-container">
+                    { note && <NoteActions note={note} noteContext={noteContext} /> }
+                </div>
+            </div>
+
+            <div className="ribbon-body-container">
+                {computedTabs && computedTabs.map(tab => {
+                    const isActive = tab.index === activeTabIndex;
+                    if (!isActive && !tab.stayInDom) {
+                        return;
+                    }
+
+                    const TabContent = tab.content;
+
+                    return (
+                        <div className={`ribbon-body ${!isActive ? "hidden-ext" : ""}`}>
+                            <TabContent
+                                note={note}
+                                hidden={!isActive}
+                                ntxId={ntxId}
+                                hoistedNoteId={hoistedNoteId}
+                                notePath={notePath}
+                                noteContext={noteContext}
+                                componentId={componentId}
+                                activate={useCallback(() => {
+                                    setActiveTabIndex(tab.index)
+                                }, [setActiveTabIndex])}
+                            />
                         </div>
-                        <div className="ribbon-button-container">
-                            { note && <NoteActions note={note} noteContext={noteContext} /> }
-                        </div>
-                    </div>
-
-                    <div className="ribbon-body-container">
-                        {computedTabs && computedTabs.map(tab => {
-                            const isActive = tab.index === activeTabIndex;
-                            if (!isActive && !tab.stayInDom) {
-                                return;
-                            }
-
-                            const TabContent = tab.content;
-
-                            return (
-                                <div className={`ribbon-body ${!isActive ? "hidden-ext" : ""}`}>
-                                    <TabContent
-                                        note={note}
-                                        hidden={!isActive}
-                                        ntxId={ntxId}
-                                        hoistedNoteId={hoistedNoteId}
-                                        notePath={notePath}
-                                        noteContext={noteContext}
-                                        componentId={componentId}
-                                        activate={useCallback(() => {
-                                            setActiveTabIndex(tab.index)
-                                        }, [setActiveTabIndex])}
-                                    />
-                                </div>
-                            );
-                        })}
-                    </div>
-                </>
-            )}
+                    );
+                })}
+            </div>
         </div>
     )
 }
diff --git a/apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx b/apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx
index 5e2883201..13b56bd5b 100644
--- a/apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx
+++ b/apps/client/src/widgets/type_widgets/text/ReadOnlyText.tsx
@@ -41,7 +41,6 @@ export default function ReadOnlyText({ note, noteContext, ntxId }: TypeWidgetPro
 
     // React to included note changes.
     useTriliumEvent("refreshIncludedNote", ({ noteId }) => {
-        console.log("Refresh ", noteId);
         if (!contentRef.current) return;
         refreshIncludedNote(contentRef.current, noteId);
     });