Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-08-29 10:09:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

editor: hide toolbar in readonly mode until a selection scoped tool needs to show in toolbar

Browse Source
This commit is contained in:
Ammar Ahmed
2026-07-23 13:00:55 +05:00
parent 0fd305a259
commit bed993466a
2 changed files with 43 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/editor/src/toolbar/tool-definitions.ts
View File

@@ -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: [
[

64
packages/editor/src/toolbar/toolbar.tsx
View File

@@ -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} />
</>
);