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 (
<>
-
- {toolbarTools.map((tools) => {
- return (
-
- );
- })}
-
+ {isEmptyReadonlyToolbar ? null : (
+
+ {toolbarTools.map((tools) => {
+ return (
+
+ );
+ })}
+
+ )}
>
);