Merge remote-tracking branch 'origin/main' into react/type_widgets

Author: eliandoran

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triliumnext/client",
-  "version": "0.99.3",
+  "version": "0.99.4",
   "description": "JQuery-based client for TriliumNext, used for both web and desktop (via Electron)",
   "private": true,
   "license": "AGPL-3.0-only",

apps/client/src/components/root_command_executor.ts

@@ -7,7 +7,6 @@ import protectedSessionService from "../services/protected_session.js";
 import options from "../services/options.js";
 import froca from "../services/froca.js";
 import utils from "../services/utils.js";
-import LlmChatPanel from "../widgets/llm_chat_panel.js";
 import toastService from "../services/toast.js";
 import noteCreateService from "../services/note_create.js";
 

apps/client/src/services/utils.ts

@@ -841,7 +841,7 @@ export function arrayEqual<T>(a: T[], b: T[]) {
     return true;
 }
 
-type Indexed<T extends object> = T & { index: number };
+export type Indexed<T extends object> = T & { index: number };
 
 /**
  * Given an object array, alters every object in the array to have an index field assigned to it.

apps/client/src/stylesheets/style.css

@@ -2178,6 +2178,11 @@ body.zen .note-split .ribbon-container .classic-toolbar-widget {
     background: var(--menu-background-color);
 }
 
+body.zen .note-split .ribbon-container .classic-toolbar-widget:not(:has(> .ck-toolbar)) {
+    /* Hide the toolbar wrapper if the toolbar is missing */
+    display: none;
+}
+
 body.zen .note-split:focus-within .ribbon-container .classic-toolbar-widget {
     pointer-events: all;
 }
@@ -2555,7 +2560,7 @@ iframe.print-iframe {
 }
 
 .scrolling-container > .note-detail.full-height,
-.scrolling-container > .note-list-widget {
+.scrolling-container > .note-list-widget.full-height {
     position: relative;
     flex-grow: 1;
     width: 100%;

apps/client/src/widgets/react/hooks.tsx

@@ -5,7 +5,7 @@ import { MutableRef, useCallback, useContext, useDebugValue, useEffect, useLayou
 import { ParentComponent, refToJQuerySelector } from "./react_utils";
 import { RefObject, VNode } from "preact";
 import { Tooltip } from "bootstrap";
-import { ViewScope } from "../../services/link";
+import { ViewMode, ViewScope } from "../../services/link";
 import appContext, { EventData, EventNames } from "../../components/app_context";
 import attributes from "../../services/attributes";
 import BasicWidget, { ReactWrappedWidget } from "../basic_widget";
@@ -261,6 +261,7 @@ export function useNoteContext() {
     const [ notePath, setNotePath ] = useState<string | null | undefined>();
     const [ note, setNote ] = useState<FNote | null | undefined>();
     const [ , setViewScope ] = useState<ViewScope>();
+    const [ isReadOnlyTemporarilyDisabled, setIsReadOnlyTemporarilyDisabled ] = useState<boolean | null | undefined>(noteContext?.viewScope?.isReadOnly);
     const [ refreshCounter, setRefreshCounter ] = useState(0);
 
     useEffect(() => {
@@ -280,6 +281,11 @@ export function useNoteContext() {
             setRefreshCounter(refreshCounter + 1);
         }
     });
+    useTriliumEvent("readOnlyTemporarilyDisabled", ({ noteContext: eventNoteContext }) => {
+        if (eventNoteContext.ntxId === noteContext?.ntxId) {
+            setIsReadOnlyTemporarilyDisabled(eventNoteContext?.viewScope?.readOnlyTemporarilyDisabled);
+        }
+    });
 
     const parentComponent = useContext(ParentComponent) as ReactWrappedWidget;
     useDebugValue(() => `notePath=${notePath}, ntxId=${noteContext?.ntxId}`);
@@ -293,7 +299,8 @@ export function useNoteContext() {
         viewScope: noteContext?.viewScope,
         componentId: parentComponent.componentId,
         noteContext,
-        parentComponent
+        parentComponent,
+        isReadOnlyTemporarilyDisabled
     };
 
 }

apps/client/src/widgets/ribbon/Ribbon.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks"
 import { useNoteContext, useNoteProperty, useStaticTooltipWithKeyboardShortcut, useTriliumEvents } from "../react/hooks";
 import "./style.css";
 
-import { numberObjectsInPlace } from "../../services/utils";
+import { Indexed, numberObjectsInPlace } from "../../services/utils";
 import { EventNames } from "../../components/app_context";
 import NoteActions from "./NoteActions";
 import { KeyboardActionNames } from "@triliumnext/commons";
@@ -11,30 +11,47 @@ import { TabConfiguration, TitleContext } from "./ribbon-interface";
 
 const TAB_CONFIGURATION = numberObjectsInPlace<TabConfiguration>(RIBBON_TAB_DEFINITIONS);
 
+interface ComputedTab extends Indexed<TabConfiguration> {
+    shouldShow: boolean;
+}
+
 export default function Ribbon() {
-    const { note, ntxId, hoistedNoteId, notePath, noteContext, componentId } = useNoteContext();
+    const { note, ntxId, hoistedNoteId, notePath, noteContext, componentId, isReadOnlyTemporarilyDisabled } = useNoteContext();
     const noteType = useNoteProperty(note, "type");
-    const titleContext: TitleContext = { note };
     const [ activeTabIndex, setActiveTabIndex ] = useState<number | undefined>();
-    const computedTabs = useMemo(
-        () => TAB_CONFIGURATION.map(tab => {
-            const shouldShow = typeof tab.show === "boolean" ? tab.show : tab.show?.(titleContext);
-            return {
+    const [ computedTabs, setComputedTabs ] = useState<ComputedTab[]>();
+    const titleContext: TitleContext = useMemo(() => ({
+        note,
+        noteContext
+    }), [ note, noteContext ]);
+
+    async function refresh() {
+        const computedTabs: ComputedTab[] = [];
+        for (const tab of TAB_CONFIGURATION) {
+            const shouldShow = await shouldShowTab(tab.show, titleContext);
+            computedTabs.push({
                 ...tab,
-                shouldShow
-            }
-        }),
-        [ titleContext, note, noteType ]);
+                shouldShow: !!shouldShow
+            });
+        }
+        setComputedTabs(computedTabs);
+    }
+
+    useEffect(() => {
+        refresh();
+    }, [ note, noteType, isReadOnlyTemporarilyDisabled ]);
 
     // Automatically activate the first ribbon tab that needs to be activated whenever a note changes.
     useEffect(() => {
+        if (!computedTabs) return;
         const tabToActivate = computedTabs.find(tab => tab.shouldShow && (typeof tab.activate === "boolean" ? tab.activate : tab.activate?.(titleContext)));
         setActiveTabIndex(tabToActivate?.index);
-    }, [ note?.noteId ]);
+    }, [ computedTabs, note?.noteId ]);
 
     // Register keyboard shortcuts.
     const eventsToListenTo = useMemo(() => TAB_CONFIGURATION.filter(config => config.toggleCommand).map(config => config.toggleCommand) as EventNames[], []);
     useTriliumEvents(eventsToListenTo, useCallback((e, toggleCommand) => {
+        if (!computedTabs) return;
         const correspondingTab = computedTabs.find(tab => tab.toggleCommand === toggleCommand);
         if (correspondingTab) {
             if (activeTabIndex !== correspondingTab.index) {
@@ -51,7 +68,7 @@ export default function Ribbon() {
                 <>
                     <div className="ribbon-top-row">
                         <div className="ribbon-tab-container">
-                            {computedTabs.map(({ title, icon, index, toggleCommand, shouldShow }) => (
+                            {computedTabs && computedTabs.map(({ title, icon, index, toggleCommand, shouldShow }) => (
                                 shouldShow && <RibbonTab
                                     icon={icon}
                                     title={typeof title === "string" ? title : title(titleContext)}
@@ -74,7 +91,7 @@ export default function Ribbon() {
                     </div>
 
                     <div className="ribbon-body-container">
-                        {computedTabs.map(tab => {
+                        {computedTabs && computedTabs.map(tab => {
                             const isActive = tab.index === activeTabIndex;
                             if (!isActive && !tab.stayInDom) {
                                 return;
@@ -129,3 +146,9 @@ function RibbonTab({ icon, title, active, onClick, toggleCommand }: { icon: stri
     )
 }
 
+export async function shouldShowTab(showConfig: boolean | ((context: TitleContext) => Promise<boolean | null | undefined> | boolean | null | undefined), context: TitleContext) {
+    if (showConfig === null || showConfig === undefined) return true;
+    if (typeof showConfig === "boolean") return showConfig;
+    if ("then" in showConfig) return await showConfig(context);
+    return showConfig(context);
+}

apps/client/src/widgets/ribbon/RibbonDefinition.ts

@@ -21,7 +21,9 @@ export const RIBBON_TAB_DEFINITIONS: TabConfiguration[] = [
     {
         title: t("classic_editor_toolbar.title"),
         icon: "bx bx-text",
-        show: ({ note }) => note?.type === "text" && options.get("textNoteEditorType") === "ckeditor-classic",
+        show: async ({ note, noteContext }) => note?.type === "text"
+            && options.get("textNoteEditorType") === "ckeditor-classic"
+            && !(await noteContext?.isReadOnly()),
         toggleCommand: "toggleRibbonTabClassicEditor",
         content: FormattingToolbar,
         activate: true,

apps/client/src/widgets/ribbon/components/StandaloneRibbonAdapter.tsx

@@ -1,8 +1,9 @@
 import { ComponentChildren } from "preact";
 import { useNoteContext } from "../../react/hooks";
-import { TabContext, TitleContext } from "../ribbon-interface";
+import { TabContext } from "../ribbon-interface";
 import { useEffect, useMemo, useState } from "preact/hooks";
 import { RIBBON_TAB_DEFINITIONS } from "../RibbonDefinition";
+import { shouldShowTab } from "../Ribbon";
 
 interface StandaloneRibbonAdapterProps {
     component: (props: TabContext) => ComponentChildren;
@@ -16,10 +17,11 @@ export default function StandaloneRibbonAdapter({ component }: StandaloneRibbonA
     const Component = component;
     const { note, ntxId, hoistedNoteId, notePath, noteContext, componentId } = useNoteContext();
     const definition = useMemo(() => RIBBON_TAB_DEFINITIONS.find(def => def.content === component), [ component ]);
-    const [ shown, setShown ] = useState(unwrapShown(definition?.show, { note }));
+    const [ shown, setShown ] = useState<boolean | null | undefined>(false);
 
     useEffect(() => {
-        setShown(unwrapShown(definition?.show, { note }));
+        if (!definition) return;
+        shouldShowTab(definition.show, { note, noteContext }).then(setShown);
     }, [ note ]);
 
     return (
@@ -35,9 +37,3 @@ export default function StandaloneRibbonAdapter({ component }: StandaloneRibbonA
         />
     );
 }
-
-function unwrapShown(value: boolean | ((context: TitleContext) => boolean | null | undefined) | undefined, context: TitleContext) {
-    if (!value) return true;
-    if (typeof value === "boolean") return value;
-    return !!value(context);
-}

apps/client/src/widgets/ribbon/ribbon-interface.ts

@@ -16,13 +16,14 @@ export interface TabContext {
 
 export interface TitleContext {
     note: FNote | null | undefined;
+    noteContext: NoteContext | undefined;
 }
 
 export interface TabConfiguration {
     title: string | ((context: TitleContext) => string);
     icon: string;
     content: (context: TabContext) => VNode | false;
-    show: boolean | ((context: TitleContext) => boolean | null | undefined);
+    show: boolean | ((context: TitleContext) => Promise<boolean | null | undefined> | boolean | null | undefined);
     toggleCommand?: KeyboardActionNames;
     activate?: boolean | ((context: TitleContext) => boolean);
     /**

apps/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triliumnext/desktop",
-  "version": "0.99.3",
+  "version": "0.99.4",
   "description": "Build your personal knowledge base with Trilium Notes",
   "private": true,
   "main": "src/main.ts",