From bed993466a8c7811aa5a52ace917b45849f31097 Mon Sep 17 00:00:00 2001
From: Ammar Ahmed <ammarahmed6506@gmail.com>
Date: Thu, 23 Jul 2026 13:00:55 +0500
Subject: [PATCH] editor: hide toolbar in readonly mode until a selection
 scoped tool needs to show in toolbar

---
 .../editor/src/toolbar/tool-definitions.ts    |  7 ++
 packages/editor/src/toolbar/toolbar.tsx       | 64 +++++++++++--------
 2 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/packages/editor/src/toolbar/tool-definitions.ts b/packages/editor/src/toolbar/tool-definitions.ts
index 9541d05ba..33d7dd6ca 100644
--- a/packages/editor/src/toolbar/tool-definitions.ts
+++ b/packages/editor/src/toolbar/tool-definitions.ts
@@ -399,6 +399,13 @@ export const READONLY_MOBILE_STATIC_TOOLBAR_GROUPS: ToolbarDefinition = [
   ]
 ];
 
+export const READONLY_MOBILE_TOOLBAR_NODES = [
+  "image",
+  "attachment",
+  "webclip",
+  "link"
+];
+
 const defaultPresets: Record<"default" | "minimal", ToolbarDefinition> = {
   default: [
     [
diff --git a/packages/editor/src/toolbar/toolbar.tsx b/packages/editor/src/toolbar/toolbar.tsx
index 8d90a71dc..475b79ceb 100644
--- a/packages/editor/src/toolbar/toolbar.tsx
+++ b/packages/editor/src/toolbar/toolbar.tsx
@@ -22,7 +22,8 @@ import {
   getDefaultPresets,
   STATIC_TOOLBAR_GROUPS,
   MOBILE_STATIC_TOOLBAR_GROUPS,
-  READONLY_MOBILE_STATIC_TOOLBAR_GROUPS
+  READONLY_MOBILE_STATIC_TOOLBAR_GROUPS,
+  READONLY_MOBILE_TOOLBAR_NODES
 } from "./tool-definitions.js";
 import { useEffect, useMemo } from "react";
 import { Editor } from "../types.js";
@@ -67,6 +68,11 @@ export function Toolbar(props: ToolbarProps) {
     [tools, editor.isEditable, isMobile]
   );
 
+  const isEmptyReadonlyToolbar =
+    isMobile &&
+    !editor.isEditable &&
+    !READONLY_MOBILE_TOOLBAR_NODES.some((node) => editor.isActive(node));
+
   const setToolbarLocation = useToolbarStore(
     (store) => store.setToolbarLocation
   );
@@ -89,33 +95,35 @@ export function Toolbar(props: ToolbarProps) {
 
   return (
     <>
-      <Flex
-        className={["editor-toolbar", className].join(" ")}
-        sx={{
-          flexWrap: isMobile ? "nowrap" : "wrap",
-          overflowX: isMobile ? "auto" : "hidden",
-          bg: "background",
-          borderRadius: isMobile ? "0px" : "default",
-          ...sx
-        }}
-        {...flexProps}
-      >
-        {toolbarTools.map((tools) => {
-          return (
-            <ToolbarGroup
-              key={tools.join("")}
-              tools={tools}
-              editor={editor}
-              groupId={tools.join("")}
-              sx={{
-                borderRight: "1px solid var(--separator)",
-                ":last-of-type": { borderRight: "none" },
-                alignItems: "center"
-              }}
-            />
-          );
-        })}
-      </Flex>
+      {isEmptyReadonlyToolbar ? null : (
+        <Flex
+          className={["editor-toolbar", className].join(" ")}
+          sx={{
+            flexWrap: isMobile ? "nowrap" : "wrap",
+            overflowX: isMobile ? "auto" : "hidden",
+            bg: "background",
+            borderRadius: isMobile ? "0px" : "default",
+            ...sx
+          }}
+          {...flexProps}
+        >
+          {toolbarTools.map((tools) => {
+            return (
+              <ToolbarGroup
+                key={tools.join("")}
+                tools={tools}
+                editor={editor}
+                groupId={tools.join("")}
+                sx={{
+                  borderRight: "1px solid var(--separator)",
+                  ":last-of-type": { borderRight: "none" },
+                  alignItems: "center"
+                }}
+              />
+            );
+          })}
+        </Flex>
+      )}
       <EditorFloatingMenus editor={editor} />
     </>
   );