From 94fdc2beee4adb1382f15e8216dbb386af595f66 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 27 Aug 2025 18:12:39 +0300
Subject: [PATCH] fix(react/dialogs): formatting toolbar shown in code notes in
 quick edit

---
 apps/client/src/layouts/layout_commons.tsx         |  4 ++--
 .../src/widgets/ribbon/FormattingToolbar.tsx       | 14 ++++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/layouts/layout_commons.tsx b/apps/client/src/layouts/layout_commons.tsx
index 15e97ea2d..02171db60 100644
--- a/apps/client/src/layouts/layout_commons.tsx
+++ b/apps/client/src/layouts/layout_commons.tsx
@@ -30,7 +30,7 @@ import NoteDetailWidget from "../widgets/note_detail.js";
 import NoteListWidget from "../widgets/note_list.js";
 import CallToActionDialog from "../widgets/dialogs/call_to_action.jsx";
 import NoteTitleWidget from "../widgets/note_title.jsx";
-import FormattingToolbar from "../widgets/ribbon/FormattingToolbar.js";
+import { PopupEditorFormattingToolbar } from "../widgets/ribbon/FormattingToolbar.js";
 
 export function applyModals(rootContainer: RootContainer) {
     rootContainer
@@ -63,7 +63,7 @@ export function applyModals(rootContainer: RootContainer) {
                     .cssBlock(".title-row > * { margin: 5px; }")
                     .child(<NoteIconWidget />)
                     .child(<NoteTitleWidget />))
-                .child(<FormattingToolbar />)
+                .child(<PopupEditorFormattingToolbar />)
                 .child(new PromotedAttributesWidget())
                 .child(new NoteDetailWidget())
                 .child(new NoteListWidget(true)))
diff --git a/apps/client/src/widgets/ribbon/FormattingToolbar.tsx b/apps/client/src/widgets/ribbon/FormattingToolbar.tsx
index 7e663087f..3282ce5af 100644
--- a/apps/client/src/widgets/ribbon/FormattingToolbar.tsx
+++ b/apps/client/src/widgets/ribbon/FormattingToolbar.tsx
@@ -1,4 +1,4 @@
-import { useTriliumOption } from "../react/hooks";
+import { useNoteContext, useTriliumOption } from "../react/hooks";
 
 /**
  * Handles the editing toolbar when the CKEditor is in decoupled mode.
@@ -9,10 +9,16 @@ import { useTriliumOption } from "../react/hooks";
  * 
  * ! The toolbar is not only used in the ribbon, but also in the quick edit feature.
  */
-export default function FormattingToolbar() {
+export default function FormattingToolbar({ hidden }: { hidden?: boolean }) {
     const [ textNoteEditorType ] = useTriliumOption("textNoteEditorType");
 
     return (textNoteEditorType === "ckeditor-classic" &&
-        <div className="classic-toolbar-widget" />
+        <div className={`classic-toolbar-widget ${hidden ? "hidden-ext" : ""}`} />
     )
-};
\ No newline at end of file
+};
+
+export function PopupEditorFormattingToolbar() {
+    // TODO: Integrate this directly once we migrate away from class components.
+    const { note } = useNoteContext();
+    return <FormattingToolbar hidden={note?.type !== "text"} />;
+}
\ No newline at end of file