- {blob?.contentLength === 0 && (
+ {note && blob?.contentLength === 0 && (
<>
{t("note_title.note_type_switcher_label", { type: currentNoteTypeData?.title.toLocaleLowerCase() })}
{pinnedNoteTypes.map(noteType => noteType.type !== currentNoteType && (
diff --git a/apps/client/src/widgets/ribbon/FormattingToolbar.spec.ts b/apps/client/src/widgets/ribbon/FormattingToolbar.spec.ts
new file mode 100644
index 000000000..f35a97609
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/FormattingToolbar.spec.ts
@@ -0,0 +1,151 @@
+import { NoteType } from "@triliumnext/commons";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+
+import NoteContext from "../../components/note_context";
+import { ViewMode } from "../../services/link";
+import { randomString } from "../../services/utils";
+import { buildNote } from "../../test/easy-froca";
+import { getFormattingToolbarState } from "./FormattingToolbar";
+
+interface NoteContextInfo {
+ type: NoteType;
+ viewScope?: ViewMode;
+ isReadOnly?: boolean;
+}
+
+describe("Formatting toolbar logic", () => {
+ beforeAll(() => {
+ vi.mock("../../services/tree.ts", () => ({
+ default: {
+ getActiveContextNotePath() {
+ return "root";
+ },
+ resolveNotePath(inputNotePath: string) {
+ return inputNotePath;
+ },
+ getNoteIdFromUrl(url) {
+ return url.split("/").at(-1);
+ }
+ }
+ }));
+
+ buildNote({
+ id: "root",
+ title: "Root"
+ });
+ });
+
+ async function buildConfig(noteContextInfos: NoteContextInfo[], activeIndex: number = 0) {
+ const noteContexts: NoteContext[] = [];
+ for (const noteContextData of noteContextInfos) {
+ const noteContext = new NoteContext(randomString(10));
+ const note = buildNote({
+ title: randomString(5),
+ type: noteContextData.type
+ });
+
+ noteContext.noteId = note.noteId;
+ expect(noteContext.note).toBe(note);
+ noteContext.viewScope = {
+ viewMode: noteContextData.viewScope ?? "default"
+ };
+ noteContext.isReadOnly = async () => !!noteContextData.isReadOnly;
+ noteContext.getSubContexts = () => [];
+ noteContexts.push(noteContext);
+ };
+
+ const mainNoteContext = noteContexts[0];
+ for (const noteContext of noteContexts) {
+ noteContext.getMainContext = () => mainNoteContext;
+ }
+
+ mainNoteContext.getSubContexts = () => noteContexts;
+ return noteContexts[activeIndex];
+ }
+
+ async function testSplit(noteContextInfos: NoteContextInfo[], activeIndex: number = 0, editor = "ckeditor-classic") {
+ const noteContext = await buildConfig(noteContextInfos, activeIndex);
+ return await getFormattingToolbarState(noteContext, noteContext.note, editor);
+ }
+
+ describe("Single split", () => {
+ it("should be hidden for floating toolbar", async () => {
+ expect(await testSplit([ { type: "text" } ], 0, "ckeditor-balloon")).toBe("hidden");
+ });
+
+ it("should be visible for single text note", async () => {
+ expect(await testSplit([ { type: "text" } ])).toBe("visible");
+ });
+
+ it("should be hidden for read-only text note", async () => {
+ expect(await testSplit([ { type: "text", isReadOnly: true } ])).toBe("hidden");
+ });
+
+ it("should be hidden for non-text note", async () => {
+ expect(await testSplit([ { type: "code" } ])).toBe("hidden");
+ });
+
+ it("should be hidden for wrong view mode", async () => {
+ expect(await testSplit([ { type: "text", viewScope: "attachments" } ])).toBe("hidden");
+ });
+ });
+
+ describe("Multi split", () => {
+ it("should be hidden for floating toolbar", async () => {
+ expect(await testSplit([
+ { type: "text" },
+ { type: "text" },
+ ], 0, "ckeditor-balloon")).toBe("hidden");
+ });
+
+ it("should be visible for two text notes", async () => {
+ expect(await testSplit([
+ { type: "text" },
+ { type: "text" },
+ ])).toBe("visible");
+ });
+
+ it("should be disabled if on a non-text note", async () => {
+ expect(await testSplit([
+ { type: "text" },
+ { type: "code" },
+ ], 1)).toBe("disabled");
+ });
+
+ it("should be hidden for all non-text notes", async () => {
+ expect(await testSplit([
+ { type: "code" },
+ { type: "canvas" },
+ ])).toBe("hidden");
+ });
+
+ it("should be hidden for all read-only text notes", async () => {
+ expect(await testSplit([
+ { type: "text", isReadOnly: true },
+ { type: "text", isReadOnly: true },
+ ])).toBe("hidden");
+ });
+
+ it("should be visible for mixed view mode", async () => {
+ expect(await testSplit([
+ { type: "text" },
+ { type: "text", viewScope: "attachments" }
+ ])).toBe("visible");
+ });
+
+ it("should be hidden for all wrong view mode", async () => {
+ expect(await testSplit([
+ { type: "text", viewScope: "attachments" },
+ { type: "text", viewScope: "attachments" }
+ ])).toBe("hidden");
+ });
+
+ it("should be disabled for wrong view mode", async () => {
+ expect(await testSplit([
+ { type: "text" },
+ { type: "text", viewScope: "attachments" }
+ ], 1)).toBe("disabled");
+ });
+ });
+
+});
diff --git a/apps/client/src/widgets/ribbon/FormattingToolbar.tsx b/apps/client/src/widgets/ribbon/FormattingToolbar.tsx
index 47963b2bf..b78734f9f 100644
--- a/apps/client/src/widgets/ribbon/FormattingToolbar.tsx
+++ b/apps/client/src/widgets/ribbon/FormattingToolbar.tsx
@@ -1,5 +1,9 @@
-import { useRef } from "preact/hooks";
-import { useTriliumEvent, useTriliumOption } from "../react/hooks";
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "preact/hooks";
+
+import NoteContext from "../../components/note_context";
+import FNote from "../../entities/fnote";
+import { useActiveNoteContext, useNoteProperty, useTriliumEvent, useTriliumEvents, useTriliumOption } from "../react/hooks";
import { TabContext } from "./ribbon-interface";
/**
@@ -33,5 +37,116 @@ export default function FormattingToolbar({ hidden, ntxId }: TabContext) {
ref={containerRef}
className={`classic-toolbar-widget ${hidden ? "hidden-ext" : ""}`}
/>
- )
+ );
};
+
+const toolbarCache = new Map
();
+
+export function FixedFormattingToolbar() {
+ const containerRef = useRef(null);
+ const { note, noteContext, ntxId } = useActiveNoteContext();
+ const noteType = useNoteProperty(note, "type");
+ const renderState = useRenderState(noteContext, note);
+ const [ toolbarToRender, setToolbarToRender ] = useState();
+
+ // Populate the cache with the toolbar of every note context.
+ useTriliumEvent("textEditorRefreshed", ({ ntxId: eventNtxId, editor }) => {
+ if (!eventNtxId) return;
+ const toolbar = editor.ui.view.toolbar?.element;
+ toolbarCache.set(eventNtxId, toolbar);
+ // Replace on the spot if the editor crashed.
+ if (eventNtxId === ntxId) {
+ setToolbarToRender(toolbar);
+ }
+ });
+
+ // Clean the cache when tabs are closed.
+ useTriliumEvent("noteContextRemoved", ({ ntxIds: eventNtxIds }) => {
+ for (const eventNtxId of eventNtxIds) {
+ toolbarCache.delete(eventNtxId);
+ }
+ });
+
+ // Switch between the cached toolbar when user navigates to a different note context.
+ useEffect(() => {
+ if (!ntxId) return;
+ const toolbar = toolbarCache.get(ntxId);
+ if (toolbar) {
+ setToolbarToRender(toolbar);
+ }
+ }, [ ntxId, noteType, noteContext ]);
+
+ // Render the toolbar.
+ useEffect(() => {
+ if (toolbarToRender) {
+ containerRef.current?.replaceChildren(toolbarToRender);
+ } else {
+ containerRef.current?.replaceChildren();
+ }
+ }, [ toolbarToRender ]);
+
+ return (
+
+ );
+}
+
+function useRenderState(activeNoteContext: NoteContext | undefined, activeNote: FNote | null | undefined) {
+ const [ textNoteEditorType ] = useTriliumOption("textNoteEditorType");
+ const [ state, setState ] = useState("hidden");
+
+ useTriliumEvents([ "newNoteContextCreated", "noteContextRemoved" ], () => {
+ getFormattingToolbarState(activeNoteContext, activeNote, textNoteEditorType).then(setState);
+ });
+
+ useEffect(() => {
+ getFormattingToolbarState(activeNoteContext, activeNote, textNoteEditorType).then(setState);
+ }, [ activeNoteContext, activeNote, textNoteEditorType ]);
+
+ return state;
+}
+
+export async function getFormattingToolbarState(activeNoteContext: NoteContext | undefined, activeNote: FNote | null | undefined, textNoteEditorType: string) {
+ if (!activeNoteContext || textNoteEditorType !== "ckeditor-classic") {
+ return "hidden";
+ }
+
+ const subContexts = activeNoteContext?.getMainContext().getSubContexts() ?? [];
+ if (subContexts.length === 1) {
+ if (activeNote?.type !== "text" || activeNoteContext.viewScope?.viewMode !== "default") {
+ return "hidden";
+ }
+
+ const isReadOnly = await activeNoteContext.isReadOnly();
+ if (isReadOnly) {
+ return "hidden";
+ }
+
+ return "visible";
+ }
+
+ // If there are multiple note contexts (e.g. splits), the logic is slightly different.
+ const textNoteContexts = subContexts.filter(s => s.note?.type === "text" && s.viewScope?.viewMode === "default");
+ const textNoteContextsReadOnly = await Promise.all(textNoteContexts.map(sc => sc.isReadOnly()));
+
+ // If all text notes are hidden, no need to display the toolbar at all.
+ if (textNoteContextsReadOnly.indexOf(false) === -1) {
+ return "hidden";
+ }
+
+ // If the current subcontext is not a text note, but there is at least an editable text then it must be disabled.
+ if (activeNote?.type !== "text") return "disabled";
+
+ // If the current subcontext is a text note, it must not be read-only.
+ const subContextIndex = textNoteContexts.indexOf(activeNoteContext);
+ if (subContextIndex !== -1) {
+ if (textNoteContextsReadOnly[subContextIndex]) return "disabled";
+ }
+ if (activeNoteContext.viewScope?.viewMode !== "default") return "disabled";
+ return "visible";
+}
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css
index bb0da9c4d..8cada3319 100644
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -152,6 +152,15 @@
opacity: 0.3;
}
+body.experimental-feature-new-layout .classic-toolbar-widget {
+ transition: opacity 250ms ease-in;
+
+ &.disabled {
+ opacity: 0.3;
+ pointer-events: none;
+ }
+}
+
/* #endregion */
/* #region Script Tab */