From afe3904ea3647010b66415fe778082a57746d4d2 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Wed, 20 Aug 2025 21:50:06 +0300 Subject: [PATCH 001/191] feat(react): render raw react components --- apps/client/src/desktop.ts | 1 - .../{layout_commons.ts => layout_commons.tsx} | 4 +- apps/client/src/widgets/basic_widget.ts | 36 +++++++++++++++- .../widgets/{note_title.ts => note_title.bak} | 0 apps/client/src/widgets/note_title.tsx | 7 ++++ apps/client/src/widgets/react/Modal.tsx | 2 +- .../src/widgets/react/ReactBasicWidget.tsx | 31 +------------- apps/client/src/widgets/react/hooks.tsx | 2 +- apps/client/src/widgets/react/react_utils.ts | 15 ------- apps/client/src/widgets/react/react_utils.tsx | 42 +++++++++++++++++++ .../ribbon_widgets/search_definition.ts | 2 +- .../client/src/widgets/type_widgets/canvas.ts | 2 +- .../widgets/type_widgets/content_widget.tsx | 2 +- 13 files changed, 92 insertions(+), 54 deletions(-) rename apps/client/src/layouts/{layout_commons.ts => layout_commons.tsx} (97%) rename apps/client/src/widgets/{note_title.ts => note_title.bak} (100%) create mode 100644 apps/client/src/widgets/note_title.tsx delete mode 100644 apps/client/src/widgets/react/react_utils.ts create mode 100644 apps/client/src/widgets/react/react_utils.tsx diff --git a/apps/client/src/desktop.ts b/apps/client/src/desktop.ts index 2791f0577..57ff4084e 100644 --- a/apps/client/src/desktop.ts +++ b/apps/client/src/desktop.ts @@ -8,7 +8,6 @@ import electronContextMenu from "./menus/electron_context_menu.js"; import glob from "./services/glob.js"; import { t } from "./services/i18n.js"; import options from "./services/options.js"; -import server from "./services/server.js"; import type ElectronRemote from "@electron/remote"; import type Electron from "electron"; import "./stylesheets/bootstrap.scss"; diff --git a/apps/client/src/layouts/layout_commons.ts b/apps/client/src/layouts/layout_commons.tsx similarity index 97% rename from apps/client/src/layouts/layout_commons.ts rename to apps/client/src/layouts/layout_commons.tsx index 5ee261317..e3be51a3a 100644 --- a/apps/client/src/layouts/layout_commons.ts +++ b/apps/client/src/layouts/layout_commons.tsx @@ -25,12 +25,12 @@ import IncorrectCpuArchDialog from "../widgets/dialogs/incorrect_cpu_arch.js"; import PopupEditorDialog from "../widgets/dialogs/popup_editor.js"; import FlexContainer from "../widgets/containers/flex_container.js"; import NoteIconWidget from "../widgets/note_icon.js"; -import NoteTitleWidget from "../widgets/note_title.js"; import ClassicEditorToolbar from "../widgets/ribbon_widgets/classic_editor_toolbar.js"; import PromotedAttributesWidget from "../widgets/ribbon_widgets/promoted_attributes.js"; import NoteDetailWidget from "../widgets/note_detail.js"; import NoteListWidget from "../widgets/note_list.js"; import { CallToActionDialog } from "../widgets/dialogs/call_to_action.jsx"; +import NoteTitleWidget from "../widgets/note_title.jsx"; export function applyModals(rootContainer: RootContainer) { rootContainer @@ -62,7 +62,7 @@ export function applyModals(rootContainer: RootContainer) { .css("align-items", "center") .cssBlock(".title-row > * { margin: 5px; }") .child(new NoteIconWidget()) - .child(new NoteTitleWidget())) + .child()) .child(new ClassicEditorToolbar()) .child(new PromotedAttributesWidget()) .child(new NoteDetailWidget()) diff --git a/apps/client/src/widgets/basic_widget.ts b/apps/client/src/widgets/basic_widget.ts index be7b0bbd7..7b5c8e29c 100644 --- a/apps/client/src/widgets/basic_widget.ts +++ b/apps/client/src/widgets/basic_widget.ts @@ -1,7 +1,9 @@ +import { isValidElement, VNode } from "preact"; import Component, { TypedComponent } from "../components/component.js"; import froca from "../services/froca.js"; import { t } from "../services/i18n.js"; import toastService from "../services/toast.js"; +import { renderReactWidget } from "./react/react_utils.jsx"; export class TypedBasicWidget> extends TypedComponent { protected attrs: Record; @@ -22,11 +24,14 @@ export class TypedBasicWidget> extends TypedCompon this.childPositionCounter = 10; } - child(...components: T[]) { - if (!components) { + child(..._components: (T | VNode)[]) { + if (!_components) { return this; } + // Convert any React components to legacy wrapped components. + const components = wrapReactWidgets(_components); + super.child(...components); for (const component of components) { @@ -258,3 +263,30 @@ export class TypedBasicWidget> extends TypedCompon * For information on using widgets, see the tutorial {@tutorial widget_basics}. */ export default class BasicWidget extends TypedBasicWidget {} + +export function wrapReactWidgets>(components: (T | VNode)[]) { + const wrappedResult: T[] = []; + for (const component of components) { + if (isValidElement(component)) { + wrappedResult.push(new ReactWrappedWidget(component) as unknown as T); + } else { + wrappedResult.push(component); + } + } + return wrappedResult; +} + +class ReactWrappedWidget extends BasicWidget { + + private el: VNode; + + constructor(el: VNode) { + super(); + this.el = el; + } + + doRender() { + this.$widget = renderReactWidget(this, this.el); + } + +} diff --git a/apps/client/src/widgets/note_title.ts b/apps/client/src/widgets/note_title.bak similarity index 100% rename from apps/client/src/widgets/note_title.ts rename to apps/client/src/widgets/note_title.bak diff --git a/apps/client/src/widgets/note_title.tsx b/apps/client/src/widgets/note_title.tsx new file mode 100644 index 000000000..b1409d5e8 --- /dev/null +++ b/apps/client/src/widgets/note_title.tsx @@ -0,0 +1,7 @@ +export default function NoteTitleWidget() { + return ( + <> +

Hi

+ + ); +} diff --git a/apps/client/src/widgets/react/Modal.tsx b/apps/client/src/widgets/react/Modal.tsx index 362d3ab38..02aeedd9b 100644 --- a/apps/client/src/widgets/react/Modal.tsx +++ b/apps/client/src/widgets/react/Modal.tsx @@ -3,7 +3,7 @@ import { t } from "../../services/i18n"; import { ComponentChildren } from "preact"; import type { CSSProperties, RefObject } from "preact/compat"; import { openDialog } from "../../services/dialog"; -import { ParentComponent } from "./ReactBasicWidget"; +import { ParentComponent } from "./react_utils"; import { Modal as BootstrapModal } from "bootstrap"; import { memo } from "preact/compat"; diff --git a/apps/client/src/widgets/react/ReactBasicWidget.tsx b/apps/client/src/widgets/react/ReactBasicWidget.tsx index b813be3bd..744d06736 100644 --- a/apps/client/src/widgets/react/ReactBasicWidget.tsx +++ b/apps/client/src/widgets/react/ReactBasicWidget.tsx @@ -1,9 +1,6 @@ -import { createContext, JSX, render } from "preact"; +import { JSX } from "preact"; import BasicWidget from "../basic_widget.js"; -import Component from "../../components/component.js"; - -export const ParentComponent = createContext(null); - +import { renderReactWidget } from "./react_utils.jsx"; export default abstract class ReactBasicWidget extends BasicWidget { abstract get component(): JSX.Element; @@ -13,27 +10,3 @@ export default abstract class ReactBasicWidget extends BasicWidget { } } - -/** - * Renders a React component and returns the corresponding DOM element wrapped in JQuery. - * - * @param parentComponent the parent Trilium component for the component to be able to handle events. - * @param el the JSX element to render. - * @returns the rendered wrapped DOM element. - */ -export function renderReactWidget(parentComponent: Component, el: JSX.Element) { - return renderReactWidgetAtElement(parentComponent, el, new DocumentFragment()).children(); -} - -export function renderReactWidgetAtElement(parentComponent: Component, el: JSX.Element, container: Element | DocumentFragment) { - render(( - - {el} - - ), container); - return $(container) as JQuery; -} - -export function disposeReactWidget(container: Element) { - render(null, container); -} \ No newline at end of file diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index d254b930c..adf6a8576 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -1,6 +1,6 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks"; import { EventData, EventNames } from "../../components/app_context"; -import { ParentComponent } from "./ReactBasicWidget"; +import { ParentComponent } from "./react_utils"; import SpacedUpdate from "../../services/spaced_update"; import { OptionNames } from "@triliumnext/commons"; import options, { type OptionValue } from "../../services/options"; diff --git a/apps/client/src/widgets/react/react_utils.ts b/apps/client/src/widgets/react/react_utils.ts deleted file mode 100644 index 14357e124..000000000 --- a/apps/client/src/widgets/react/react_utils.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { RefObject } from "preact"; - -/** - * Takes in a React ref and returns a corresponding JQuery selector. - * - * @param ref the React ref from which to obtain the jQuery selector. - * @returns the corresponding jQuery selector. - */ -export function refToJQuerySelector(ref: RefObject | null): JQuery { - if (ref?.current) { - return $(ref.current); - } else { - return $(); - } -} diff --git a/apps/client/src/widgets/react/react_utils.tsx b/apps/client/src/widgets/react/react_utils.tsx new file mode 100644 index 000000000..e8b0752b4 --- /dev/null +++ b/apps/client/src/widgets/react/react_utils.tsx @@ -0,0 +1,42 @@ +import { createContext, render, type JSX, type RefObject } from "preact"; +import Component from "../../components/component"; + +export const ParentComponent = createContext(null); + +/** + * Takes in a React ref and returns a corresponding JQuery selector. + * + * @param ref the React ref from which to obtain the jQuery selector. + * @returns the corresponding jQuery selector. + */ +export function refToJQuerySelector(ref: RefObject | null): JQuery { + if (ref?.current) { + return $(ref.current); + } else { + return $(); + } +} + +/** + * Renders a React component and returns the corresponding DOM element wrapped in JQuery. + * + * @param parentComponent the parent Trilium component for the component to be able to handle events. + * @param el the JSX element to render. + * @returns the rendered wrapped DOM element. + */ +export function renderReactWidget(parentComponent: Component, el: JSX.Element) { + return renderReactWidgetAtElement(parentComponent, el, new DocumentFragment()).children(); +} + +export function renderReactWidgetAtElement(parentComponent: Component, el: JSX.Element, container: Element | DocumentFragment) { + render(( + + {el} + + ), container); + return $(container) as JQuery; +} + +export function disposeReactWidget(container: Element) { + render(null, container); +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon_widgets/search_definition.ts b/apps/client/src/widgets/ribbon_widgets/search_definition.ts index 2439b590f..99ac91c50 100644 --- a/apps/client/src/widgets/ribbon_widgets/search_definition.ts +++ b/apps/client/src/widgets/ribbon_widgets/search_definition.ts @@ -19,7 +19,7 @@ import bulkActionService from "../../services/bulk_action.js"; import { Dropdown } from "bootstrap"; import type FNote from "../../entities/fnote.js"; import type { AttributeType } from "../../entities/fattribute.js"; -import { renderReactWidget } from "../react/ReactBasicWidget.jsx"; +import { renderReactWidget } from "../react/react_utils.jsx"; const TPL = /*html*/`
diff --git a/apps/client/src/widgets/type_widgets/canvas.ts b/apps/client/src/widgets/type_widgets/canvas.ts index e81e8a36f..42314f055 100644 --- a/apps/client/src/widgets/type_widgets/canvas.ts +++ b/apps/client/src/widgets/type_widgets/canvas.ts @@ -6,7 +6,7 @@ import type { LibraryItem } from "@excalidraw/excalidraw/types"; import type { Theme } from "@excalidraw/excalidraw/element/types"; import type Canvas from "./canvas_el.js"; import { CanvasContent } from "./canvas_el.js"; -import { renderReactWidget } from "../react/ReactBasicWidget.jsx"; +import { renderReactWidget } from "../react/react_utils.jsx"; const TPL = /*html*/`
diff --git a/apps/client/src/widgets/type_widgets/content_widget.tsx b/apps/client/src/widgets/type_widgets/content_widget.tsx index be803018f..98175a0c8 100644 --- a/apps/client/src/widgets/type_widgets/content_widget.tsx +++ b/apps/client/src/widgets/type_widgets/content_widget.tsx @@ -5,7 +5,7 @@ import { t } from "../../services/i18n.js"; import type BasicWidget from "../basic_widget.js"; import type { JSX } from "preact/jsx-runtime"; import AppearanceSettings from "./options/appearance.jsx"; -import { disposeReactWidget, renderReactWidget, renderReactWidgetAtElement } from "../react/ReactBasicWidget.jsx"; +import { disposeReactWidget, renderReactWidgetAtElement } from "../react/react_utils.jsx"; import ImageSettings from "./options/images.jsx"; import AdvancedSettings from "./options/advanced.jsx"; import InternationalizationOptions from "./options/i18n.jsx"; From 59486cd55db5481a2285c2c0690d20499a49c7e8 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Wed, 20 Aug 2025 23:53:13 +0300 Subject: [PATCH 002/191] feat(react): basic handling of note context aware --- .../{desktop_layout.ts => desktop_layout.tsx} | 4 +- apps/client/src/widgets/basic_widget.ts | 10 ++++- apps/client/src/widgets/note_title.tsx | 6 ++- apps/client/src/widgets/react/hooks.tsx | 40 ++++++++++++++++++- 4 files changed, 55 insertions(+), 5 deletions(-) rename apps/client/src/layouts/{desktop_layout.ts => desktop_layout.tsx} (99%) diff --git a/apps/client/src/layouts/desktop_layout.ts b/apps/client/src/layouts/desktop_layout.tsx similarity index 99% rename from apps/client/src/layouts/desktop_layout.ts rename to apps/client/src/layouts/desktop_layout.tsx index 33c1135c8..85dcb531f 100644 --- a/apps/client/src/layouts/desktop_layout.ts +++ b/apps/client/src/layouts/desktop_layout.tsx @@ -4,7 +4,7 @@ import TabRowWidget from "../widgets/tab_row.js"; import TitleBarButtonsWidget from "../widgets/title_bar_buttons.js"; import LeftPaneContainer from "../widgets/containers/left_pane_container.js"; import NoteTreeWidget from "../widgets/note_tree.js"; -import NoteTitleWidget from "../widgets/note_title.js"; +import NoteTitleWidget from "../widgets/note_title.jsx"; import OwnedAttributeListWidget from "../widgets/ribbon_widgets/owned_attribute_list.js"; import NoteActionsWidget from "../widgets/buttons/note_actions.js"; import NoteDetailWidget from "../widgets/note_detail.js"; @@ -152,7 +152,7 @@ export default class DesktopLayout { .css("align-items", "center") .cssBlock(".title-row > * { margin: 5px; }") .child(new NoteIconWidget()) - .child(new NoteTitleWidget()) + .child() .child(new SpacerWidget(0, 1)) .child(new MovePaneButton(true)) .child(new MovePaneButton(false)) diff --git a/apps/client/src/widgets/basic_widget.ts b/apps/client/src/widgets/basic_widget.ts index 7b5c8e29c..22d1864fb 100644 --- a/apps/client/src/widgets/basic_widget.ts +++ b/apps/client/src/widgets/basic_widget.ts @@ -4,6 +4,7 @@ import froca from "../services/froca.js"; import { t } from "../services/i18n.js"; import toastService from "../services/toast.js"; import { renderReactWidget } from "./react/react_utils.jsx"; +import { EventNames, EventData } from "../components/app_context.js"; export class TypedBasicWidget> extends TypedComponent { protected attrs: Record; @@ -276,9 +277,10 @@ export function wrapReactWidgets>(components: (T | return wrappedResult; } -class ReactWrappedWidget extends BasicWidget { +export class ReactWrappedWidget extends BasicWidget { private el: VNode; + listeners: Record void> = {}; constructor(el: VNode) { super(); @@ -289,4 +291,10 @@ class ReactWrappedWidget extends BasicWidget { this.$widget = renderReactWidget(this, this.el); } + handleEvent(name: T, data: EventData): Promise | null | undefined { + const listener = this.listeners[name]; + console.log("Handle ", name, listener); + listener?.(data); + } + } diff --git a/apps/client/src/widgets/note_title.tsx b/apps/client/src/widgets/note_title.tsx index b1409d5e8..7fe057f28 100644 --- a/apps/client/src/widgets/note_title.tsx +++ b/apps/client/src/widgets/note_title.tsx @@ -1,7 +1,11 @@ +import { useNoteContext } from "./react/hooks"; + export default function NoteTitleWidget() { + const { ntxId, noteId, note } = useNoteContext(); + return ( <> -

Hi

+

{ ntxId }{ noteId }

); } diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index adf6a8576..925ac24f1 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -6,7 +6,8 @@ import { OptionNames } from "@triliumnext/commons"; import options, { type OptionValue } from "../../services/options"; import utils, { reloadFrontendApp } from "../../services/utils"; import Component from "../../components/component"; -import server from "../../services/server"; +import NoteContext from "../../components/note_context"; +import { ReactWrappedWidget } from "../basic_widget"; type TriliumEventHandler = (data: EventData) => void; const registeredHandlers: Map[]>> = new Map(); @@ -83,6 +84,11 @@ export default function useTriliumEvent(eventName: T, hand }, [ eventName, parentWidget, handler ]); } +export function useTriliumEventBeta(eventName: T, handler: TriliumEventHandler) { + const parentComponent = useContext(ParentComponent) as ReactWrappedWidget; + parentComponent.listeners[eventName] = handler; +} + export function useSpacedUpdate(callback: () => Promise, interval = 1000) { const callbackRef = useRef(callback); const spacedUpdateRef = useRef(); @@ -218,4 +224,36 @@ export function useTriliumOptions(...names: T[]) { */ export function useUniqueName(prefix?: string) { return useMemo(() => (prefix ? prefix + "-" : "") + utils.randomString(10), [ prefix ]); +} + +export function useNoteContext() { + + const [ noteContext, setNoteContext ] = useState(); + const [ notePath, setNotePath ] = useState(); + + useTriliumEvent("activeContextChanged", ({ noteContext }) => { + console.log("Active context changed."); + setNoteContext(noteContext); + }); + useTriliumEventBeta("setNoteContext", ({ noteContext }) => { + console.log("Set note context", noteContext, noteContext.noteId); + setNoteContext(noteContext); + }); + useTriliumEvent("noteSwitchedAndActivated", ({ noteContext }) => { + console.log("Note switched and activated") + setNoteContext(noteContext); + }); + useTriliumEvent("noteSwitched", ({ noteContext, notePath }) => { + console.warn("Note switched", notePath); + setNotePath(notePath); + }); + + return { + note: noteContext?.note, + noteId: noteContext?.note?.noteId, + notePath: noteContext?.notePath, + hoistedNoteId: noteContext?.hoistedNoteId, + ntxId: noteContext?.ntxId + }; + } \ No newline at end of file From 799e705ff8b861b805d4db867b1d93d01039b8b9 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 09:17:47 +0300 Subject: [PATCH 003/191] fix(react): note context not always updated --- apps/client/src/widgets/basic_widget.ts | 1 - apps/client/src/widgets/react/hooks.tsx | 8 ++++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/apps/client/src/widgets/basic_widget.ts b/apps/client/src/widgets/basic_widget.ts index 22d1864fb..3eb2e86f5 100644 --- a/apps/client/src/widgets/basic_widget.ts +++ b/apps/client/src/widgets/basic_widget.ts @@ -293,7 +293,6 @@ export class ReactWrappedWidget extends BasicWidget { handleEvent(name: T, data: EventData): Promise | null | undefined { const listener = this.listeners[name]; - console.log("Handle ", name, listener); listener?.(data); } diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 925ac24f1..d43d25f61 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -231,19 +231,19 @@ export function useNoteContext() { const [ noteContext, setNoteContext ] = useState(); const [ notePath, setNotePath ] = useState(); - useTriliumEvent("activeContextChanged", ({ noteContext }) => { - console.log("Active context changed."); + useTriliumEventBeta("activeContextChanged", ({ noteContext }) => { setNoteContext(noteContext); + setNotePath(noteContext.notePath); }); useTriliumEventBeta("setNoteContext", ({ noteContext }) => { console.log("Set note context", noteContext, noteContext.noteId); setNoteContext(noteContext); }); - useTriliumEvent("noteSwitchedAndActivated", ({ noteContext }) => { + useTriliumEventBeta("noteSwitchedAndActivated", ({ noteContext }) => { console.log("Note switched and activated") setNoteContext(noteContext); }); - useTriliumEvent("noteSwitched", ({ noteContext, notePath }) => { + useTriliumEventBeta("noteSwitched", ({ noteContext, notePath }) => { console.warn("Note switched", notePath); setNotePath(notePath); }); From ca40360f7d9bc5464660e061107803c238df724e Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 10:05:53 +0300 Subject: [PATCH 004/191] feat(react): basic implementation of note title --- apps/client/src/widgets/basic_widget.ts | 39 +++++++++++++++++++++++-- apps/client/src/widgets/note_title.bak | 10 +------ apps/client/src/widgets/note_title.tsx | 33 ++++++++++++++++++--- apps/client/src/widgets/react/hooks.tsx | 9 ++++-- 4 files changed, 73 insertions(+), 18 deletions(-) diff --git a/apps/client/src/widgets/basic_widget.ts b/apps/client/src/widgets/basic_widget.ts index 3eb2e86f5..ff3ea276c 100644 --- a/apps/client/src/widgets/basic_widget.ts +++ b/apps/client/src/widgets/basic_widget.ts @@ -5,6 +5,7 @@ import { t } from "../services/i18n.js"; import toastService from "../services/toast.js"; import { renderReactWidget } from "./react/react_utils.jsx"; import { EventNames, EventData } from "../components/app_context.js"; +import { Handler } from "leaflet"; export class TypedBasicWidget> extends TypedComponent { protected attrs: Record; @@ -277,10 +278,12 @@ export function wrapReactWidgets>(components: (T | return wrappedResult; } +type EventHandler = ((data: any) => void); + export class ReactWrappedWidget extends BasicWidget { private el: VNode; - listeners: Record void> = {}; + private listeners: Record = {}; constructor(el: VNode) { super(); @@ -292,8 +295,38 @@ export class ReactWrappedWidget extends BasicWidget { } handleEvent(name: T, data: EventData): Promise | null | undefined { - const listener = this.listeners[name]; - listener?.(data); + if (!this.listeners[name]) { + return; + } + + for (const listener of this.listeners[name]) { + listener(data); + } + } + + registerHandler(name: T, handler: EventHandler) { + if (!this.listeners[name]) { + this.listeners[name] = []; + } + + if (this.listeners[name].includes(handler)) { + return; + } + + this.listeners[name].push(handler); + } + + removeHandler(name: T, handler: EventHandler) { + if (!this.listeners[name]?.includes(handler)) { + return; + } + + this.listeners[name] = this.listeners[name] + .filter(listener => listener !== handler); + + if (!this.listeners[name].length) { + delete this.listeners[name]; + } } } diff --git a/apps/client/src/widgets/note_title.bak b/apps/client/src/widgets/note_title.bak index ebe7ad809..e07b8380e 100644 --- a/apps/client/src/widgets/note_title.bak +++ b/apps/client/src/widgets/note_title.bak @@ -37,8 +37,6 @@ const TPL = /*html*/` text-shadow: 4px 4px 4px var(--muted-text-color); } - -
`; export default class NoteTitleWidget extends NoteContextAwareWidget { @@ -51,13 +49,7 @@ export default class NoteTitleWidget extends NoteContextAwareWidget { super(); this.spacedUpdate = new SpacedUpdate(async () => { - const title = this.$noteTitle.val(); - - if (this.note) { - protectedSessionHolder.touchProtectedSessionIfNecessary(this.note); - } - - await server.put(`notes/${this.noteId}/title`, { title }, this.componentId); + }); this.deleteNoteOnEscape = false; diff --git a/apps/client/src/widgets/note_title.tsx b/apps/client/src/widgets/note_title.tsx index 7fe057f28..d74779dfa 100644 --- a/apps/client/src/widgets/note_title.tsx +++ b/apps/client/src/widgets/note_title.tsx @@ -1,11 +1,36 @@ -import { useNoteContext } from "./react/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; +import { t } from "../services/i18n"; +import FormTextBox from "./react/FormTextBox"; +import { useNoteContext, useSpacedUpdate } from "./react/hooks"; +import protected_session_holder from "../services/protected_session_holder"; +import server from "../services/server"; export default function NoteTitleWidget() { - const { ntxId, noteId, note } = useNoteContext(); - + const { note, noteId, componentId } = useNoteContext(); + const [ title, setTitle ] = useState(note?.title); + useEffect(() => setTitle(note?.title), [ note?.title ]); + + const spacedUpdate = useSpacedUpdate(async () => { + if (!note) { + return; + } + protected_session_holder.touchProtectedSessionIfNecessary(note); + await server.put(`notes/${noteId}/title`, { title: title }, componentId); + }); + return ( <> -

{ ntxId }{ noteId }

+ { + setTitle(newValue); + spacedUpdate.scheduleUpdate(); + }} + /> ); } diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index d43d25f61..d592a48a1 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -86,7 +86,9 @@ export default function useTriliumEvent(eventName: T, hand export function useTriliumEventBeta(eventName: T, handler: TriliumEventHandler) { const parentComponent = useContext(ParentComponent) as ReactWrappedWidget; - parentComponent.listeners[eventName] = handler; + parentComponent.registerHandler(eventName, handler); + + return (() => parentComponent.removeHandler(eventName, handler)); } export function useSpacedUpdate(callback: () => Promise, interval = 1000) { @@ -247,13 +249,16 @@ export function useNoteContext() { console.warn("Note switched", notePath); setNotePath(notePath); }); + + const parentComponent = useContext(ParentComponent) as ReactWrappedWidget; return { note: noteContext?.note, noteId: noteContext?.note?.noteId, notePath: noteContext?.notePath, hoistedNoteId: noteContext?.hoistedNoteId, - ntxId: noteContext?.ntxId + ntxId: noteContext?.ntxId, + componentId: parentComponent.componentId }; } \ No newline at end of file From 9a4fdcaef2bad892ee301bd93ec4de395262656d Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 10:34:30 +0300 Subject: [PATCH 005/191] chore(react/note_title): bring back styles --- apps/client/src/widgets/note_title.bak | 49 -------------------------- apps/client/src/widgets/note_title.css | 24 +++++++++++++ apps/client/src/widgets/note_title.tsx | 22 +++++++++--- 3 files changed, 41 insertions(+), 54 deletions(-) create mode 100644 apps/client/src/widgets/note_title.css diff --git a/apps/client/src/widgets/note_title.bak b/apps/client/src/widgets/note_title.bak index e07b8380e..059e4b4d1 100644 --- a/apps/client/src/widgets/note_title.bak +++ b/apps/client/src/widgets/note_title.bak @@ -9,36 +9,6 @@ import shortcutService from "../services/shortcuts.js"; import utils from "../services/utils.js"; import type FNote from "../entities/fnote.js"; -const TPL = /*html*/` -
- -
`; - export default class NoteTitleWidget extends NoteContextAwareWidget { private $noteTitle!: JQuery; @@ -48,10 +18,6 @@ export default class NoteTitleWidget extends NoteContextAwareWidget { constructor() { super(); - this.spacedUpdate = new SpacedUpdate(async () => { - - }); - this.deleteNoteOnEscape = false; appContext.addBeforeUnloadListener(this); @@ -92,10 +58,6 @@ export default class NoteTitleWidget extends NoteContextAwareWidget { this.setProtectedStatus(note); } - setProtectedStatus(note: FNote) { - this.$noteTitle.toggleClass("protected", !!note.isProtected); - } - async beforeNoteSwitchEvent({ noteContext }: EventData<"beforeNoteSwitch">) { if (this.isNoteContext(noteContext.ntxId)) { await this.spacedUpdate.updateNowIfNecessary(); @@ -122,17 +84,6 @@ export default class NoteTitleWidget extends NoteContextAwareWidget { } } - entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { - if (loadResults.isNoteReloaded(this.noteId) && this.note) { - // not updating the title specifically since the synced title might be older than what the user is currently typing - this.setProtectedStatus(this.note); - } - - if (loadResults.isNoteReloaded(this.noteId, this.componentId)) { - this.refresh(); - } - } - beforeUnloadEvent() { return this.spacedUpdate.isAllSavedAndTriggerUpdate(); } diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css new file mode 100644 index 000000000..294e2a01f --- /dev/null +++ b/apps/client/src/widgets/note_title.css @@ -0,0 +1,24 @@ +.note-title-widget { + flex-grow: 1000; + height: 100%; +} + +.note-title-widget input.note-title { + font-size: 110%; + border: 0; + margin: 2px 0px; + min-width: 5em; + width: 100%; +} + +.note-title-widget input.note-title.protected { + text-shadow: 4px 4px 4px var(--muted-text-color); +} + +body.mobile .note-title-widget input.note-title { + padding: 0; +} + +body.desktop .note-title-widget input.note-title { + font-size: 180%; +} \ No newline at end of file diff --git a/apps/client/src/widgets/note_title.tsx b/apps/client/src/widgets/note_title.tsx index d74779dfa..55769cfee 100644 --- a/apps/client/src/widgets/note_title.tsx +++ b/apps/client/src/widgets/note_title.tsx @@ -1,14 +1,17 @@ import { useEffect, useRef, useState } from "preact/hooks"; import { t } from "../services/i18n"; import FormTextBox from "./react/FormTextBox"; -import { useNoteContext, useSpacedUpdate } from "./react/hooks"; +import { useNoteContext, useSpacedUpdate, useTriliumEventBeta } from "./react/hooks"; import protected_session_holder from "../services/protected_session_holder"; import server from "../services/server"; +import "./note_title.css"; export default function NoteTitleWidget() { const { note, noteId, componentId } = useNoteContext(); const [ title, setTitle ] = useState(note?.title); - useEffect(() => setTitle(note?.title), [ note?.title ]); + const [ isProtected, setProtected ] = useState(note?.isProtected); + useEffect(() => setTitle(note?.title), [ note?.noteId ]); + useEffect(() => setProtected(note?.isProtected), [ note?.isProtected ]); const spacedUpdate = useSpacedUpdate(async () => { if (!note) { @@ -18,19 +21,28 @@ export default function NoteTitleWidget() { await server.put(`notes/${noteId}/title`, { title: title }, componentId); }); + useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { + if (loadResults.isNoteReloaded(noteId) && note) { + setProtected(note.isProtected); + } + if (loadResults.isNoteReloaded(noteId, componentId)) { + setTitle(note?.title); + } + }); + return ( - <> +
{ setTitle(newValue); spacedUpdate.scheduleUpdate(); }} /> - +
); } From db2bf537eaa6f039c6df4e812b5a13e81c9661c1 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 10:44:58 +0300 Subject: [PATCH 006/191] refactor(react/note_title): use hook for listening to note property --- apps/client/src/widgets/note_title.tsx | 10 +++------- apps/client/src/widgets/react/hooks.tsx | 16 ++++++++++++++++ 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/apps/client/src/widgets/note_title.tsx b/apps/client/src/widgets/note_title.tsx index 55769cfee..eefb71184 100644 --- a/apps/client/src/widgets/note_title.tsx +++ b/apps/client/src/widgets/note_title.tsx @@ -1,7 +1,7 @@ import { useEffect, useRef, useState } from "preact/hooks"; import { t } from "../services/i18n"; import FormTextBox from "./react/FormTextBox"; -import { useNoteContext, useSpacedUpdate, useTriliumEventBeta } from "./react/hooks"; +import { useNoteContext, useNoteProperty, useSpacedUpdate, useTriliumEventBeta } from "./react/hooks"; import protected_session_holder from "../services/protected_session_holder"; import server from "../services/server"; import "./note_title.css"; @@ -9,9 +9,8 @@ import "./note_title.css"; export default function NoteTitleWidget() { const { note, noteId, componentId } = useNoteContext(); const [ title, setTitle ] = useState(note?.title); - const [ isProtected, setProtected ] = useState(note?.isProtected); + const isProtected = useNoteProperty(note, "isProtected"); useEffect(() => setTitle(note?.title), [ note?.noteId ]); - useEffect(() => setProtected(note?.isProtected), [ note?.isProtected ]); const spacedUpdate = useSpacedUpdate(async () => { if (!note) { @@ -21,10 +20,7 @@ export default function NoteTitleWidget() { await server.put(`notes/${noteId}/title`, { title: title }, componentId); }); - useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { - if (loadResults.isNoteReloaded(noteId) && note) { - setProtected(note.isProtected); - } + useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { if (loadResults.isNoteReloaded(noteId, componentId)) { setTitle(note?.title); } diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index d592a48a1..bc96b780b 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -8,6 +8,7 @@ import utils, { reloadFrontendApp } from "../../services/utils"; import Component from "../../components/component"; import NoteContext from "../../components/note_context"; import { ReactWrappedWidget } from "../basic_widget"; +import FNote from "../../entities/fnote"; type TriliumEventHandler = (data: EventData) => void; const registeredHandlers: Map[]>> = new Map(); @@ -261,4 +262,19 @@ export function useNoteContext() { componentId: parentComponent.componentId }; +} + +export function useNoteProperty(note: FNote | null | undefined, property: T) { + if (!note) { + return null; + } + + const [ value, setValue ] = useState(note[property]); + useEffect(() => setValue(value), [ note[property] ]); + useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { + if (loadResults.isNoteReloaded(note.noteId)) { + setValue(note[property]); + } + }); + return value; } \ No newline at end of file From 4da3e8a4d88caf9be7bdbb42d78e25b4618a5159 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 10:53:59 +0300 Subject: [PATCH 007/191] refactor(react/note_title): use note property for title as well --- apps/client/src/widgets/note_title.tsx | 20 +++++++------------- apps/client/src/widgets/react/hooks.tsx | 21 +++++++++++++++++---- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/apps/client/src/widgets/note_title.tsx b/apps/client/src/widgets/note_title.tsx index eefb71184..c23cea833 100644 --- a/apps/client/src/widgets/note_title.tsx +++ b/apps/client/src/widgets/note_title.tsx @@ -1,41 +1,35 @@ -import { useEffect, useRef, useState } from "preact/hooks"; +import { useRef } from "preact/hooks"; import { t } from "../services/i18n"; import FormTextBox from "./react/FormTextBox"; -import { useNoteContext, useNoteProperty, useSpacedUpdate, useTriliumEventBeta } from "./react/hooks"; +import { useNoteContext, useNoteProperty, useSpacedUpdate } from "./react/hooks"; import protected_session_holder from "../services/protected_session_holder"; import server from "../services/server"; import "./note_title.css"; export default function NoteTitleWidget() { const { note, noteId, componentId } = useNoteContext(); - const [ title, setTitle ] = useState(note?.title); + const title = useNoteProperty(note, "title", componentId); const isProtected = useNoteProperty(note, "isProtected"); - useEffect(() => setTitle(note?.title), [ note?.noteId ]); + const newTitle = useRef(""); const spacedUpdate = useSpacedUpdate(async () => { if (!note) { return; } protected_session_holder.touchProtectedSessionIfNecessary(note); - await server.put(`notes/${noteId}/title`, { title: title }, componentId); + await server.put(`notes/${noteId}/title`, { title: newTitle.current }, componentId); }); - useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { - if (loadResults.isNoteReloaded(noteId, componentId)) { - setTitle(note?.title); - } - }); - return (
{ - setTitle(newValue); + newTitle.current = newValue; spacedUpdate.scheduleUpdate(); }} /> diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index bc96b780b..1097f7d9c 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -264,17 +264,30 @@ export function useNoteContext() { } -export function useNoteProperty(note: FNote | null | undefined, property: T) { +/** + * Allows a React component to listen to obtain a property of a {@link FNote} while also automatically watching for changes, either via the user changing to a different note or the property being changed externally. + * + * @param note the {@link FNote} whose property to obtain. + * @param property a property of a {@link FNote} to obtain the value from (e.g. `title`, `isProtected`). + * @param componentId optionally, constricts the refresh of the value if an update occurs externally via the component ID of a legacy widget. This can be used to avoid external data replacing fresher, user-inputted data. + * @returns the value of the requested property. + */ +export function useNoteProperty(note: FNote | null | undefined, property: T, componentId?: string) { if (!note) { return null; } - + const [ value, setValue ] = useState(note[property]); - useEffect(() => setValue(value), [ note[property] ]); + + // Watch for note changes. + useEffect(() => setValue(note[property]), [ note[property] ]); + + // Watch for external changes. useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { - if (loadResults.isNoteReloaded(note.noteId)) { + if (loadResults.isNoteReloaded(note.noteId, componentId)) { setValue(note[property]); } }); + return value; } \ No newline at end of file From be576176c506739339cbf119547454c91607256d Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 11:08:33 +0300 Subject: [PATCH 008/191] feat(react/note_title): bring back navigation title --- apps/client/src/services/utils.ts | 2 +- apps/client/src/widgets/note_title.bak | 12 ----------- apps/client/src/widgets/note_title.tsx | 28 +++++++++++++++++++++---- apps/client/src/widgets/react/hooks.tsx | 6 ++++-- 4 files changed, 29 insertions(+), 19 deletions(-) diff --git a/apps/client/src/services/utils.ts b/apps/client/src/services/utils.ts index aeb9abe47..065969df8 100644 --- a/apps/client/src/services/utils.ts +++ b/apps/client/src/services/utils.ts @@ -740,7 +740,7 @@ function isUpdateAvailable(latestVersion: string | null | undefined, currentVers return compareVersions(latestVersion, currentVersion) > 0; } -function isLaunchBarConfig(noteId: string) { +export function isLaunchBarConfig(noteId: string) { return ["_lbRoot", "_lbAvailableLaunchers", "_lbVisibleLaunchers", "_lbMobileRoot", "_lbMobileAvailableLaunchers", "_lbMobileVisibleLaunchers"].includes(noteId); } diff --git a/apps/client/src/widgets/note_title.bak b/apps/client/src/widgets/note_title.bak index 059e4b4d1..4b7218760 100644 --- a/apps/client/src/widgets/note_title.bak +++ b/apps/client/src/widgets/note_title.bak @@ -46,18 +46,6 @@ export default class NoteTitleWidget extends NoteContextAwareWidget { }); } - async refreshWithNote(note: FNote) { - const isReadOnly = - (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) - || utils.isLaunchBarConfig(note.noteId) - || this.noteContext?.viewScope?.viewMode !== "default"; - - this.$noteTitle.val(isReadOnly ? (await this.noteContext?.getNavigationTitle()) || "" : note.title); - this.$noteTitle.prop("readonly", isReadOnly); - - this.setProtectedStatus(note); - } - async beforeNoteSwitchEvent({ noteContext }: EventData<"beforeNoteSwitch">) { if (this.isNoteContext(noteContext.ntxId)) { await this.spacedUpdate.updateNowIfNecessary(); diff --git a/apps/client/src/widgets/note_title.tsx b/apps/client/src/widgets/note_title.tsx index c23cea833..267d8ff27 100644 --- a/apps/client/src/widgets/note_title.tsx +++ b/apps/client/src/widgets/note_title.tsx @@ -1,17 +1,36 @@ -import { useRef } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; import { t } from "../services/i18n"; import FormTextBox from "./react/FormTextBox"; import { useNoteContext, useNoteProperty, useSpacedUpdate } from "./react/hooks"; import protected_session_holder from "../services/protected_session_holder"; import server from "../services/server"; import "./note_title.css"; +import { isLaunchBarConfig } from "../services/utils"; export default function NoteTitleWidget() { - const { note, noteId, componentId } = useNoteContext(); - const title = useNoteProperty(note, "title", componentId); + const { note, noteId, componentId, viewScope, noteContext } = useNoteContext(); + const title = useNoteProperty(note, "title", componentId); const isProtected = useNoteProperty(note, "isProtected"); const newTitle = useRef(""); + const [ isReadOnly, setReadOnly ] = useState(false); + const [ navigationTitle, setNavigationTitle ] = useState(null); + + useEffect(() => { + const isReadOnly = note === null + || note === undefined + || (note.isProtected && !protected_session_holder.isProtectedSessionAvailable()) + || isLaunchBarConfig(note.noteId) + || viewScope?.viewMode !== "default"; + setReadOnly(isReadOnly); + }, [ note?.noteId, note?.isProtected, viewScope?.viewMode ]); + + useEffect(() => { + if (isReadOnly) { + noteContext?.getNavigationTitle().then(setNavigationTitle); + } + }, [isReadOnly]); + const spacedUpdate = useSpacedUpdate(async () => { if (!note) { return; @@ -24,10 +43,11 @@ export default function NoteTitleWidget() {
{ newTitle.current = newValue; spacedUpdate.scheduleUpdate(); diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 1097f7d9c..7526bbd61 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -259,7 +259,9 @@ export function useNoteContext() { notePath: noteContext?.notePath, hoistedNoteId: noteContext?.hoistedNoteId, ntxId: noteContext?.ntxId, - componentId: parentComponent.componentId + viewScope: noteContext?.viewScope, + componentId: parentComponent.componentId, + noteContext: noteContext }; } @@ -288,6 +290,6 @@ export function useNoteProperty(note: FNote | null | unde setValue(note[property]); } }); - + return value; } \ No newline at end of file From 033e90f8b7185e8a712087dd371c57c676983564 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 12:13:30 +0300 Subject: [PATCH 009/191] fix(react/note_title): not refreshing on protected session --- apps/client/src/widgets/note_title.tsx | 6 +++--- apps/client/src/widgets/react/hooks.tsx | 20 +++++++++++++++----- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/apps/client/src/widgets/note_title.tsx b/apps/client/src/widgets/note_title.tsx index 267d8ff27..8c0cfae7d 100644 --- a/apps/client/src/widgets/note_title.tsx +++ b/apps/client/src/widgets/note_title.tsx @@ -12,10 +12,10 @@ export default function NoteTitleWidget() { const title = useNoteProperty(note, "title", componentId); const isProtected = useNoteProperty(note, "isProtected"); const newTitle = useRef(""); - + const [ isReadOnly, setReadOnly ] = useState(false); const [ navigationTitle, setNavigationTitle ] = useState(null); - + useEffect(() => { const isReadOnly = note === null || note === undefined @@ -23,7 +23,7 @@ export default function NoteTitleWidget() { || isLaunchBarConfig(note.noteId) || viewScope?.viewMode !== "default"; setReadOnly(isReadOnly); - }, [ note?.noteId, note?.isProtected, viewScope?.viewMode ]); + }, [ note, note?.noteId, note?.isProtected, viewScope?.viewMode ]); useEffect(() => { if (isReadOnly) { diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 7526bbd61..05821754b 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -9,6 +9,7 @@ import Component from "../../components/component"; import NoteContext from "../../components/note_context"; import { ReactWrappedWidget } from "../basic_widget"; import FNote from "../../entities/fnote"; +import froca from "../../services/froca"; type TriliumEventHandler = (data: EventData) => void; const registeredHandlers: Map[]>> = new Map(); @@ -233,10 +234,15 @@ export function useNoteContext() { const [ noteContext, setNoteContext ] = useState(); const [ notePath, setNotePath ] = useState(); + const [ note, setNote ] = useState(); + + useEffect(() => { + setNote(noteContext?.note); + }, [ notePath ]); useTriliumEventBeta("activeContextChanged", ({ noteContext }) => { setNoteContext(noteContext); - setNotePath(noteContext.notePath); + setNotePath(noteContext.notePath); }); useTriliumEventBeta("setNoteContext", ({ noteContext }) => { console.log("Set note context", noteContext, noteContext.noteId); @@ -250,11 +256,14 @@ export function useNoteContext() { console.warn("Note switched", notePath); setNotePath(notePath); }); + useTriliumEventBeta("frocaReloaded", () => { + setNote(noteContext?.note); + }); const parentComponent = useContext(ParentComponent) as ReactWrappedWidget; return { - note: noteContext?.note, + note: note, noteId: noteContext?.note?.noteId, notePath: noteContext?.notePath, hoistedNoteId: noteContext?.hoistedNoteId, @@ -280,16 +289,17 @@ export function useNoteProperty(note: FNote | null | unde } const [ value, setValue ] = useState(note[property]); + const refreshValue = () => setValue(note[property]); // Watch for note changes. - useEffect(() => setValue(note[property]), [ note[property] ]); + useEffect(() => refreshValue(), [ note, note[property] ]); // Watch for external changes. useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { if (loadResults.isNoteReloaded(note.noteId, componentId)) { - setValue(note[property]); + refreshValue(); } }); - return value; + return note[property]; } \ No newline at end of file From 9e947f742d83638b6076251d1624fcb275900f8b Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 12:15:12 +0300 Subject: [PATCH 010/191] fix(react/note_title): title shown on empty widget pane --- apps/client/src/widgets/note_title.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/note_title.tsx b/apps/client/src/widgets/note_title.tsx index 8c0cfae7d..963523fda 100644 --- a/apps/client/src/widgets/note_title.tsx +++ b/apps/client/src/widgets/note_title.tsx @@ -41,7 +41,7 @@ export default function NoteTitleWidget() { return (
- + />}
); } From b93fa332d30cdb66810207443f1a1c2397484afc Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 12:49:03 +0300 Subject: [PATCH 011/191] fix(client): please wait for save showing up multiple times --- apps/client/src/components/app_context.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/client/src/components/app_context.ts b/apps/client/src/components/app_context.ts index 4c750a544..80af6adf7 100644 --- a/apps/client/src/components/app_context.ts +++ b/apps/client/src/components/app_context.ts @@ -676,14 +676,12 @@ $(window).on("beforeunload", () => { if (!component.beforeUnloadEvent()) { console.log(`Component ${component.componentId} is not finished saving its state.`); - - toast.showMessage(t("app_context.please_wait_for_save"), 10000); - allSaved = false; } } if (!allSaved) { + toast.showMessage(t("app_context.please_wait_for_save"), 10000); return "some string"; } }); From 945e180a6f01f6e4b5ce18f922092093a0dfae2c Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 12:55:33 +0300 Subject: [PATCH 012/191] chore(react/note_title): add before unload listener --- apps/client/src/components/app_context.ts | 36 +++++++++++++++-------- apps/client/src/widgets/note_title.bak | 14 --------- apps/client/src/widgets/note_title.tsx | 7 ++++- apps/client/src/widgets/react/hooks.tsx | 5 ++-- 4 files changed, 32 insertions(+), 30 deletions(-) diff --git a/apps/client/src/components/app_context.ts b/apps/client/src/components/app_context.ts index 80af6adf7..35b8b8585 100644 --- a/apps/client/src/components/app_context.ts +++ b/apps/client/src/components/app_context.ts @@ -40,7 +40,7 @@ interface RootWidget extends Component { render: () => JQuery; } -interface BeforeUploadListener extends Component { +export interface BeforeUploadListener extends Component { beforeUnloadEvent(): boolean; } @@ -526,7 +526,7 @@ export type FilteredCommandNames = keyof Pick[]; + beforeUnloadListeners: (WeakRef | (() => boolean))[]; tabManager!: TabManager; layout?: Layout; noteTreeWidget?: NoteTreeWidget; @@ -649,13 +649,17 @@ export class AppContext extends Component { return $(el).closest(".component").prop("component"); } - addBeforeUnloadListener(obj: BeforeUploadListener) { + addBeforeUnloadListener(obj: BeforeUploadListener | (() => boolean)) { if (typeof WeakRef !== "function") { // older browsers don't support WeakRef return; } - this.beforeUnloadListeners.push(new WeakRef(obj)); + if (typeof obj === "object") { + this.beforeUnloadListeners.push(new WeakRef(obj)); + } else { + this.beforeUnloadListeners.push(obj); + } } } @@ -665,18 +669,24 @@ const appContext = new AppContext(window.glob.isMainWindow); $(window).on("beforeunload", () => { let allSaved = true; - appContext.beforeUnloadListeners = appContext.beforeUnloadListeners.filter((wr) => !!wr.deref()); + appContext.beforeUnloadListeners = appContext.beforeUnloadListeners.filter((wr) => typeof wr === "function" || !!wr.deref()); - for (const weakRef of appContext.beforeUnloadListeners) { - const component = weakRef.deref(); + for (const listener of appContext.beforeUnloadListeners) { + if (typeof listener === "object") { + const component = listener.deref(); - if (!component) { - continue; - } + if (!component) { + continue; + } - if (!component.beforeUnloadEvent()) { - console.log(`Component ${component.componentId} is not finished saving its state.`); - allSaved = false; + if (!component.beforeUnloadEvent()) { + console.log(`Component ${component.componentId} is not finished saving its state.`); + allSaved = false; + } + } else { + if (!listener()) { + allSaved = false; + } } } diff --git a/apps/client/src/widgets/note_title.bak b/apps/client/src/widgets/note_title.bak index 4b7218760..f1c0fc593 100644 --- a/apps/client/src/widgets/note_title.bak +++ b/apps/client/src/widgets/note_title.bak @@ -1,13 +1,8 @@ -import { t } from "../services/i18n.js"; import NoteContextAwareWidget from "./note_context_aware_widget.js"; -import protectedSessionHolder from "../services/protected_session_holder.js"; -import server from "../services/server.js"; import SpacedUpdate from "../services/spaced_update.js"; import appContext, { type EventData } from "../components/app_context.js"; import branchService from "../services/branches.js"; import shortcutService from "../services/shortcuts.js"; -import utils from "../services/utils.js"; -import type FNote from "../entities/fnote.js"; export default class NoteTitleWidget extends NoteContextAwareWidget { @@ -19,16 +14,11 @@ export default class NoteTitleWidget extends NoteContextAwareWidget { super(); this.deleteNoteOnEscape = false; - - appContext.addBeforeUnloadListener(this); } doRender() { this.$widget = $(TPL); this.$noteTitle = this.$widget.find(".note-title"); - - this.$noteTitle.on("input", () => this.spacedUpdate.scheduleUpdate()); - this.$noteTitle.on("blur", () => { this.spacedUpdate.updateNowIfNecessary(); @@ -71,8 +61,4 @@ export default class NoteTitleWidget extends NoteContextAwareWidget { this.deleteNoteOnEscape = isNewNote; } } - - beforeUnloadEvent() { - return this.spacedUpdate.isAllSavedAndTriggerUpdate(); - } } diff --git a/apps/client/src/widgets/note_title.tsx b/apps/client/src/widgets/note_title.tsx index 963523fda..6f1f82e32 100644 --- a/apps/client/src/widgets/note_title.tsx +++ b/apps/client/src/widgets/note_title.tsx @@ -1,11 +1,12 @@ import { useEffect, useRef, useState } from "preact/hooks"; import { t } from "../services/i18n"; import FormTextBox from "./react/FormTextBox"; -import { useNoteContext, useNoteProperty, useSpacedUpdate } from "./react/hooks"; +import { useBeforeUnload, useNoteContext, useNoteProperty, useSpacedUpdate } from "./react/hooks"; import protected_session_holder from "../services/protected_session_holder"; import server from "../services/server"; import "./note_title.css"; import { isLaunchBarConfig } from "../services/utils"; +import appContext from "../components/app_context"; export default function NoteTitleWidget() { const { note, noteId, componentId, viewScope, noteContext } = useNoteContext(); @@ -39,6 +40,10 @@ export default function NoteTitleWidget() { await server.put(`notes/${noteId}/title`, { title: newTitle.current }, componentId); }); + useEffect(() => { + appContext.addBeforeUnloadListener(() => spacedUpdate.isAllSavedAndTriggerUpdate()); + }, []); + return (
{note && = (data: EventData) => void; const registeredHandlers: Map[]>> = new Map(); @@ -302,4 +303,4 @@ export function useNoteProperty(note: FNote | null | unde }); return note[property]; -} \ No newline at end of file +} From 8a543d45132d70f2cff613ecac1b85d27b4460a9 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 13:00:05 +0300 Subject: [PATCH 013/191] chore(react/note_title): focus content on enter --- apps/client/src/widgets/note_title.bak | 3 --- apps/client/src/widgets/note_title.tsx | 12 ++++++++++-- apps/client/src/widgets/react/hooks.tsx | 3 ++- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/apps/client/src/widgets/note_title.bak b/apps/client/src/widgets/note_title.bak index f1c0fc593..e79bd7517 100644 --- a/apps/client/src/widgets/note_title.bak +++ b/apps/client/src/widgets/note_title.bak @@ -31,9 +31,6 @@ export default class NoteTitleWidget extends NoteContextAwareWidget { } }); - shortcutService.bindElShortcut(this.$noteTitle, "return", () => { - this.triggerCommand("focusOnDetail", { ntxId: this.noteContext?.ntxId }); - }); } async beforeNoteSwitchEvent({ noteContext }: EventData<"beforeNoteSwitch">) { diff --git a/apps/client/src/widgets/note_title.tsx b/apps/client/src/widgets/note_title.tsx index 6f1f82e32..6f3581bbf 100644 --- a/apps/client/src/widgets/note_title.tsx +++ b/apps/client/src/widgets/note_title.tsx @@ -9,7 +9,7 @@ import { isLaunchBarConfig } from "../services/utils"; import appContext from "../components/app_context"; export default function NoteTitleWidget() { - const { note, noteId, componentId, viewScope, noteContext } = useNoteContext(); + const { note, noteId, componentId, viewScope, noteContext, parentComponent } = useNoteContext(); const title = useNoteProperty(note, "title", componentId); const isProtected = useNoteProperty(note, "isProtected"); const newTitle = useRef(""); @@ -41,7 +41,7 @@ export default function NoteTitleWidget() { }); useEffect(() => { - appContext.addBeforeUnloadListener(() => spacedUpdate.isAllSavedAndTriggerUpdate()); + appContext.addBeforeUnloadListener(() => spacedUpdate.isAllSavedAndTriggerUpdate()); }, []); return ( @@ -57,6 +57,14 @@ export default function NoteTitleWidget() { newTitle.current = newValue; spacedUpdate.scheduleUpdate(); }} + onKeyDown={(e) => { + // Focus on the note content when pressing enter. + if (e.key === "Enter") { + e.preventDefault(); + parentComponent.triggerCommand("focusOnDetail", { ntxId: noteContext?.ntxId }); + return; + } + }} />}
); diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 56b5cb865..b08c4dac1 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -271,7 +271,8 @@ export function useNoteContext() { ntxId: noteContext?.ntxId, viewScope: noteContext?.viewScope, componentId: parentComponent.componentId, - noteContext: noteContext + noteContext, + parentComponent }; } From 51e8a80ca3e1feefe79fe76f18b71916228ada91 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 13:13:48 +0300 Subject: [PATCH 014/191] chore(react/note_title): delete new notes on escape --- apps/client/src/widgets/note_title.bak | 24 +------------------ apps/client/src/widgets/note_title.tsx | 32 ++++++++++++++++++++++++- apps/client/src/widgets/react/hooks.tsx | 2 +- 3 files changed, 33 insertions(+), 25 deletions(-) diff --git a/apps/client/src/widgets/note_title.bak b/apps/client/src/widgets/note_title.bak index e79bd7517..412934e9d 100644 --- a/apps/client/src/widgets/note_title.bak +++ b/apps/client/src/widgets/note_title.bak @@ -8,7 +8,6 @@ export default class NoteTitleWidget extends NoteContextAwareWidget { private $noteTitle!: JQuery; private deleteNoteOnEscape: boolean; - private spacedUpdate: SpacedUpdate; constructor() { super(); @@ -20,15 +19,7 @@ export default class NoteTitleWidget extends NoteContextAwareWidget { this.$widget = $(TPL); this.$noteTitle = this.$widget.find(".note-title"); this.$noteTitle.on("blur", () => { - this.spacedUpdate.updateNowIfNecessary(); - - this.deleteNoteOnEscape = false; - }); - - shortcutService.bindElShortcut(this.$noteTitle, "esc", () => { - if (this.deleteNoteOnEscape && this.noteContext?.isActive() && this.noteContext?.note) { - branchService.deleteNotes(Object.values(this.noteContext.note.parentToBranch)); - } + }); } @@ -45,17 +36,4 @@ export default class NoteTitleWidget extends NoteContextAwareWidget { } } - focusOnTitleEvent() { - if (this.noteContext && this.noteContext.isActive()) { - this.$noteTitle.trigger("focus"); - } - } - - focusAndSelectTitleEvent({ isNewNote } = { isNewNote: false }) { - if (this.noteContext && this.noteContext.isActive()) { - this.$noteTitle.trigger("focus").trigger("select"); - - this.deleteNoteOnEscape = isNewNote; - } - } } diff --git a/apps/client/src/widgets/note_title.tsx b/apps/client/src/widgets/note_title.tsx index 6f3581bbf..d824d796e 100644 --- a/apps/client/src/widgets/note_title.tsx +++ b/apps/client/src/widgets/note_title.tsx @@ -1,12 +1,13 @@ import { useEffect, useRef, useState } from "preact/hooks"; import { t } from "../services/i18n"; import FormTextBox from "./react/FormTextBox"; -import { useBeforeUnload, useNoteContext, useNoteProperty, useSpacedUpdate } from "./react/hooks"; +import { useNoteContext, useNoteProperty, useSpacedUpdate, useTriliumEventBeta } from "./react/hooks"; import protected_session_holder from "../services/protected_session_holder"; import server from "../services/server"; import "./note_title.css"; import { isLaunchBarConfig } from "../services/utils"; import appContext from "../components/app_context"; +import branches from "../services/branches"; export default function NoteTitleWidget() { const { note, noteId, componentId, viewScope, noteContext, parentComponent } = useNoteContext(); @@ -17,6 +18,7 @@ export default function NoteTitleWidget() { const [ isReadOnly, setReadOnly ] = useState(false); const [ navigationTitle, setNavigationTitle ] = useState(null); + // Manage read-only useEffect(() => { const isReadOnly = note === null || note === undefined @@ -26,12 +28,14 @@ export default function NoteTitleWidget() { setReadOnly(isReadOnly); }, [ note, note?.noteId, note?.isProtected, viewScope?.viewMode ]); + // Manage the title for read-only notes useEffect(() => { if (isReadOnly) { noteContext?.getNavigationTitle().then(setNavigationTitle); } }, [isReadOnly]); + // Save changes to title. const spacedUpdate = useSpacedUpdate(async () => { if (!note) { return; @@ -40,13 +44,31 @@ export default function NoteTitleWidget() { await server.put(`notes/${noteId}/title`, { title: newTitle.current }, componentId); }); + // Prevent user from navigating away if the spaced update is not done. useEffect(() => { appContext.addBeforeUnloadListener(() => spacedUpdate.isAllSavedAndTriggerUpdate()); }, []); + // Manage focus. + const textBoxRef = useRef(null); + const isNewNote = useRef(); + useTriliumEventBeta("focusOnTitle", () => { + if (noteContext?.isActive() && textBoxRef.current) { + console.log(textBoxRef.current); + textBoxRef.current.focus(); + } + }); + useTriliumEventBeta("focusAndSelectTitle", ({ isNewNote: _isNewNote } ) => { + if (noteContext?.isActive() && textBoxRef.current) { + textBoxRef.current.focus(); + isNewNote.current = _isNewNote; + } + }); + return (
{note && { + spacedUpdate.updateNowIfNecessary(); + isNewNote.current = false; }} />}
diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index b08c4dac1..4f06041fe 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -101,7 +101,7 @@ export function useSpacedUpdate(callback: () => Promise, interval = 1000) // Update callback ref when it changes useEffect(() => { callbackRef.current = callback; - }); + }, [callback]); // Create SpacedUpdate instance only once if (!spacedUpdateRef.current) { From bea352855a4e38c15406fac12e2f7a24654ff56d Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 13:17:28 +0300 Subject: [PATCH 015/191] refactor(react): allow binding multiple events at once --- apps/client/src/widgets/note_title.tsx | 10 ++-------- apps/client/src/widgets/react/hooks.tsx | 17 ++++++++++++++--- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/apps/client/src/widgets/note_title.tsx b/apps/client/src/widgets/note_title.tsx index d824d796e..9d1522740 100644 --- a/apps/client/src/widgets/note_title.tsx +++ b/apps/client/src/widgets/note_title.tsx @@ -52,16 +52,10 @@ export default function NoteTitleWidget() { // Manage focus. const textBoxRef = useRef(null); const isNewNote = useRef(); - useTriliumEventBeta("focusOnTitle", () => { - if (noteContext?.isActive() && textBoxRef.current) { - console.log(textBoxRef.current); - textBoxRef.current.focus(); - } - }); - useTriliumEventBeta("focusAndSelectTitle", ({ isNewNote: _isNewNote } ) => { + useTriliumEventBeta([ "focusOnTitle", "focusAndSelectTitle" ], (e) => { if (noteContext?.isActive() && textBoxRef.current) { textBoxRef.current.focus(); - isNewNote.current = _isNewNote; + isNewNote.current = ("isNewNote" in e ? e.isNewNote : false); } }); diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 4f06041fe..9269e0605 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -87,11 +87,22 @@ export default function useTriliumEvent(eventName: T, hand }, [ eventName, parentWidget, handler ]); } -export function useTriliumEventBeta(eventName: T, handler: TriliumEventHandler) { +export function useTriliumEventBeta(eventName: T | T[], handler: TriliumEventHandler) { const parentComponent = useContext(ParentComponent) as ReactWrappedWidget; - parentComponent.registerHandler(eventName, handler); - return (() => parentComponent.removeHandler(eventName, handler)); + if (Array.isArray(eventName)) { + for (const eventSingleName of eventName) { + parentComponent.registerHandler(eventSingleName, handler); + } + return (() => { + for (const eventSingleName of eventName) { + parentComponent.removeHandler(eventSingleName, handler) + } + }); + } else { + parentComponent.registerHandler(eventName, handler); + return (() => parentComponent.removeHandler(eventName, handler)); + } } export function useSpacedUpdate(callback: () => Promise, interval = 1000) { From 009fd63ce98f598223ab4300c6b58b8bb14d700e Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 13:18:39 +0300 Subject: [PATCH 016/191] chore(react): finalize note title porting --- apps/client/src/widgets/note_title.bak | 39 -------------------------- apps/client/src/widgets/note_title.tsx | 1 + 2 files changed, 1 insertion(+), 39 deletions(-) delete mode 100644 apps/client/src/widgets/note_title.bak diff --git a/apps/client/src/widgets/note_title.bak b/apps/client/src/widgets/note_title.bak deleted file mode 100644 index 412934e9d..000000000 --- a/apps/client/src/widgets/note_title.bak +++ /dev/null @@ -1,39 +0,0 @@ -import NoteContextAwareWidget from "./note_context_aware_widget.js"; -import SpacedUpdate from "../services/spaced_update.js"; -import appContext, { type EventData } from "../components/app_context.js"; -import branchService from "../services/branches.js"; -import shortcutService from "../services/shortcuts.js"; - -export default class NoteTitleWidget extends NoteContextAwareWidget { - - private $noteTitle!: JQuery; - private deleteNoteOnEscape: boolean; - - constructor() { - super(); - - this.deleteNoteOnEscape = false; - } - - doRender() { - this.$widget = $(TPL); - this.$noteTitle = this.$widget.find(".note-title"); - this.$noteTitle.on("blur", () => { - - }); - - } - - async beforeNoteSwitchEvent({ noteContext }: EventData<"beforeNoteSwitch">) { - if (this.isNoteContext(noteContext.ntxId)) { - await this.spacedUpdate.updateNowIfNecessary(); - } - } - - async beforeNoteContextRemoveEvent({ ntxIds }: EventData<"beforeNoteContextRemove">) { - if (this.isNoteContext(ntxIds)) { - await this.spacedUpdate.updateNowIfNecessary(); - } - } - -} diff --git a/apps/client/src/widgets/note_title.tsx b/apps/client/src/widgets/note_title.tsx index 9d1522740..adef54bc9 100644 --- a/apps/client/src/widgets/note_title.tsx +++ b/apps/client/src/widgets/note_title.tsx @@ -48,6 +48,7 @@ export default function NoteTitleWidget() { useEffect(() => { appContext.addBeforeUnloadListener(() => spacedUpdate.isAllSavedAndTriggerUpdate()); }, []); + useTriliumEventBeta([ "beforeNoteSwitch", "beforeNoteContextRemove" ], () => spacedUpdate.updateNowIfNecessary()); // Manage focus. const textBoxRef = useRef(null); From aa608510d0ee2572473556fdb4e871b0d3078069 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 14:41:59 +0300 Subject: [PATCH 017/191] feat(react): port note icon --- apps/client/src/layouts/desktop_layout.tsx | 4 +- apps/client/src/layouts/layout_commons.tsx | 4 +- apps/client/src/widgets/icon_list.ts | 2 +- apps/client/src/widgets/note_icon.css | 59 ++++++++++ .../{note_icon.ts => note_icon.ts.bak} | 102 ------------------ apps/client/src/widgets/note_icon.tsx | 99 +++++++++++++++++ apps/client/src/widgets/react/Dropdown.tsx | 27 ++++- 7 files changed, 185 insertions(+), 112 deletions(-) create mode 100644 apps/client/src/widgets/note_icon.css rename apps/client/src/widgets/{note_icon.ts => note_icon.ts.bak} (60%) create mode 100644 apps/client/src/widgets/note_icon.tsx diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx index 85dcb531f..4b094ba3b 100644 --- a/apps/client/src/layouts/desktop_layout.tsx +++ b/apps/client/src/layouts/desktop_layout.tsx @@ -18,7 +18,7 @@ import SqlTableSchemasWidget from "../widgets/sql_table_schemas.js"; import FilePropertiesWidget from "../widgets/ribbon_widgets/file_properties.js"; import ImagePropertiesWidget from "../widgets/ribbon_widgets/image_properties.js"; import NotePropertiesWidget from "../widgets/ribbon_widgets/note_properties.js"; -import NoteIconWidget from "../widgets/note_icon.js"; +import NoteIconWidget from "../widgets/note_icon.jsx"; import SearchResultWidget from "../widgets/search_result.js"; import ScrollingContainer from "../widgets/containers/scrolling_container.js"; import RootContainer from "../widgets/containers/root_container.js"; @@ -151,7 +151,7 @@ export default class DesktopLayout { .css("min-height", "50px") .css("align-items", "center") .cssBlock(".title-row > * { margin: 5px; }") - .child(new NoteIconWidget()) + .child() .child() .child(new SpacerWidget(0, 1)) .child(new MovePaneButton(true)) diff --git a/apps/client/src/layouts/layout_commons.tsx b/apps/client/src/layouts/layout_commons.tsx index e3be51a3a..87d446e18 100644 --- a/apps/client/src/layouts/layout_commons.tsx +++ b/apps/client/src/layouts/layout_commons.tsx @@ -24,7 +24,7 @@ import InfoDialog from "../widgets/dialogs/info.js"; import IncorrectCpuArchDialog from "../widgets/dialogs/incorrect_cpu_arch.js"; import PopupEditorDialog from "../widgets/dialogs/popup_editor.js"; import FlexContainer from "../widgets/containers/flex_container.js"; -import NoteIconWidget from "../widgets/note_icon.js"; +import NoteIconWidget from "../widgets/note_icon"; import ClassicEditorToolbar from "../widgets/ribbon_widgets/classic_editor_toolbar.js"; import PromotedAttributesWidget from "../widgets/ribbon_widgets/promoted_attributes.js"; import NoteDetailWidget from "../widgets/note_detail.js"; @@ -61,7 +61,7 @@ export function applyModals(rootContainer: RootContainer) { .class("title-row") .css("align-items", "center") .cssBlock(".title-row > * { margin: 5px; }") - .child(new NoteIconWidget()) + .child() .child()) .child(new ClassicEditorToolbar()) .child(new PromotedAttributesWidget()) diff --git a/apps/client/src/widgets/icon_list.ts b/apps/client/src/widgets/icon_list.ts index 7de49017b..6282d8b60 100644 --- a/apps/client/src/widgets/icon_list.ts +++ b/apps/client/src/widgets/icon_list.ts @@ -1,6 +1,6 @@ // taken from the HTML source of https://boxicons.com/ -interface Category { +export interface Category { name: string; id: number; } diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css new file mode 100644 index 000000000..67eeadecf --- /dev/null +++ b/apps/client/src/widgets/note_icon.css @@ -0,0 +1,59 @@ +.note-icon-widget { + padding-top: 3px; + padding-left: 7px; + margin-right: 0; + width: 50px; + height: 50px; +} + +.note-icon-widget button.note-icon { + font-size: 180%; + background-color: transparent; + border: 1px solid transparent; + cursor: pointer; + padding: 6px; + color: var(--main-text-color); +} + +.note-icon-widget button.note-icon:hover { + border: 1px solid var(--main-border-color); +} + +.note-icon-widget .dropdown-menu { + border-radius: 10px; + border-width: 2px; + box-shadow: 10px 10px 93px -25px black; + padding: 10px 15px 10px 15px !important; +} + +.note-icon-widget .filter-row { + padding-top: 10px; + padding-bottom: 10px; + padding-right: 20px; + display: flex; + align-items: baseline; +} + +.note-icon-widget .filter-row span { + display: block; + padding-left: 15px; + padding-right: 15px; + font-weight: bold; +} + +.note-icon-widget .icon-list { + height: 500px; + overflow: auto; +} + +.note-icon-widget .icon-list span { + display: inline-block; + padding: 10px; + cursor: pointer; + border: 1px solid transparent; + font-size: 180%; +} + +.note-icon-widget .icon-list span:hover { + border: 1px solid var(--main-border-color); +} \ No newline at end of file diff --git a/apps/client/src/widgets/note_icon.ts b/apps/client/src/widgets/note_icon.ts.bak similarity index 60% rename from apps/client/src/widgets/note_icon.ts rename to apps/client/src/widgets/note_icon.ts.bak index b5623db87..50a846bc3 100644 --- a/apps/client/src/widgets/note_icon.ts +++ b/apps/client/src/widgets/note_icon.ts.bak @@ -7,86 +7,6 @@ import type { EventData } from "../components/app_context.js"; import type { Icon } from "./icon_list.js"; import { Dropdown } from "bootstrap"; -const TPL = /*html*/` -
- - - -
-
- ${t("note_icon.category")} - - ${t("note_icon.search")} -
- -
-
-
`; - -interface IconToCountCache { - iconClassToCountMap: Record; -} - export default class NoteIconWidget extends NoteContextAwareWidget { private dropdown!: bootstrap.Dropdown; @@ -94,12 +14,8 @@ export default class NoteIconWidget extends NoteContextAwareWidget { private $iconList!: JQuery; private $iconCategory!: JQuery; private $iconSearch!: JQuery; - private iconToCountCache!: Promise | null; doRender() { - this.$widget = $(TPL); - this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")[0]); - this.$icon = this.$widget.find("button.note-icon"); this.$iconList = this.$widget.find(".icon-list"); this.$iconList.on("click", "span", async (e) => { @@ -153,9 +69,6 @@ export default class NoteIconWidget extends NoteContextAwareWidget { } async renderDropdown() { - const iconToCount = await this.getIconToCountMap(); - const { icons } = (await import("./icon_list.js")).default; - this.$iconList.empty(); if (this.getIconLabels().length > 0) { @@ -205,21 +118,6 @@ export default class NoteIconWidget extends NoteContextAwareWidget { this.$iconSearch.focus(); } - async getIconToCountMap() { - if (!this.iconToCountCache) { - this.iconToCountCache = server.get("other/icon-usage"); - setTimeout(() => (this.iconToCountCache = null), 20000); // invalidate cache after 20 seconds - } - - return (await this.iconToCountCache)?.iconClassToCountMap; - } - - renderIcon(icon: Icon) { - return $("") - .addClass("bx " + icon.className) - .attr("title", icon.name); - } - getIconLabels() { if (!this.note) { return []; diff --git a/apps/client/src/widgets/note_icon.tsx b/apps/client/src/widgets/note_icon.tsx new file mode 100644 index 000000000..7d11bf341 --- /dev/null +++ b/apps/client/src/widgets/note_icon.tsx @@ -0,0 +1,99 @@ +import Dropdown from "./react/Dropdown"; +import "./note_icon.css"; +import { t } from "i18next"; +import { useNoteContext } from "./react/hooks"; +import { useCallback, useEffect, useState } from "preact/hooks"; +import server from "../services/server"; +import type { Category, Icon } from "./icon_list"; +import FormTextBox from "./react/FormTextBox"; + +interface IconToCountCache { + iconClassToCountMap: Record; +} + +interface IconData { + iconToCount: Record; + icons: Icon[]; +} + +let fullIconData: { + categories: Category[]; + icons: Icon[]; +}; +let iconToCountCache!: Promise | null; + +export default function NoteIcon() { + const { note } = useNoteContext(); + const [ icon, setIcon ] = useState("bx bx-empty"); + + const refreshIcon = useCallback(() => { + if (note) { + setIcon(note.getIcon()); + } + }, [ note ]); + + useEffect(refreshIcon, [ note ]); + + return ( + + + + ) +} + +function NoteIconList() { + const [ filter, setFilter ] = useState(); + const [ iconData, setIconData ] = useState(); + + useEffect(() => { + async function loadIcons() { + const iconToCount = await getIconToCountMap(); + if (!fullIconData) { + fullIconData = (await import("./icon_list.js")).default; + } + + setIconData({ + iconToCount, + icons: fullIconData.icons + }) + } + + loadIcons(); + }, []); + + return ( + <> +
+ {t("note_icon.category")} + + {t("note_icon.search")} + +
+ +
+ {(iconData?.icons ?? []).map(({className, name}) => ( + + ))} +
+ + ); +} + +async function getIconToCountMap() { + if (!iconToCountCache) { + iconToCountCache = server.get("other/icon-usage"); + setTimeout(() => (iconToCountCache = null), 20000); // invalidate cache after 20 seconds + } + + return (await iconToCountCache).iconClassToCountMap; +} \ No newline at end of file diff --git a/apps/client/src/widgets/react/Dropdown.tsx b/apps/client/src/widgets/react/Dropdown.tsx index 58a3bd654..1d64d40fd 100644 --- a/apps/client/src/widgets/react/Dropdown.tsx +++ b/apps/client/src/widgets/react/Dropdown.tsx @@ -1,14 +1,20 @@ import { Dropdown as BootstrapDropdown } from "bootstrap"; import { ComponentChildren } from "preact"; +import { CSSProperties } from "preact/compat"; import { useEffect, useRef } from "preact/hooks"; +import { useUniqueName } from "./hooks"; interface DropdownProps { className?: string; + buttonClassName?: string; isStatic?: boolean; children: ComponentChildren; + title?: string; + dropdownContainerStyle?: CSSProperties; + hideToggleArrow?: boolean; } -export default function Dropdown({ className, isStatic, children }: DropdownProps) { +export default function Dropdown({ className, buttonClassName, isStatic, children, title, dropdownContainerStyle, hideToggleArrow }: DropdownProps) { const dropdownRef = useRef(null); const triggerRef = useRef(null); @@ -35,16 +41,27 @@ export default function Dropdown({ className, isStatic, children }: DropdownProp }; }, []); // Add dependency array + const ariaId = useUniqueName("button"); + return ( -
+
From 3fa290a2570ec5d6537e5f7da8c2aae1754c462b Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 14:57:54 +0300 Subject: [PATCH 019/191] chore(react/note_icon): add back filter by category --- apps/client/src/widgets/note_icon.tsx | 17 +++++++++++++---- apps/client/src/widgets/react/FormSelect.tsx | 11 ++++++----- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/apps/client/src/widgets/note_icon.tsx b/apps/client/src/widgets/note_icon.tsx index c37064355..48b37e0ba 100644 --- a/apps/client/src/widgets/note_icon.tsx +++ b/apps/client/src/widgets/note_icon.tsx @@ -6,6 +6,7 @@ import { useCallback, useEffect, useState } from "preact/hooks"; import server from "../services/server"; import type { Category, Icon } from "./icon_list"; import FormTextBox from "./react/FormTextBox"; +import FormSelect from "./react/FormSelect"; interface IconToCountCache { iconClassToCountMap: Record; @@ -13,6 +14,7 @@ interface IconToCountCache { interface IconData { iconToCount: Record; + categories: Category[]; icons: Icon[]; } @@ -49,7 +51,7 @@ export default function NoteIcon() { function NoteIconList() { const [ search, setSearch ] = useState(); - const [ categoryId, setCategoryId ] = useState(); + const [ categoryId, setCategoryId ] = useState("0"); const [ iconData, setIconData ] = useState(); useEffect(() => { @@ -62,7 +64,7 @@ function NoteIconList() { let icons: Icon[] = fullIconData.icons; if (search || categoryId) { icons = icons.filter((icon) => { - if (categoryId && icon.category_id !== categoryId) { + if (categoryId !== "0" && String(icon.category_id) !== categoryId) { return false; } @@ -78,7 +80,8 @@ function NoteIconList() { setIconData({ iconToCount, - icons + icons, + categories: fullIconData.categories }) } @@ -88,7 +91,13 @@ function NoteIconList() { return ( <>
- {t("note_icon.category")} + {t("note_icon.category")} + {t("note_icon.search")} { interface FormSelectProps extends ValueConfig { id?: string; + name?: string; onChange: OnChangeListener; style?: CSSProperties; } @@ -27,9 +28,9 @@ interface FormSelectProps extends ValueConfig { /** * Combobox component that takes in any object array as data. Each item of the array is rendered as an item, and the key and values are obtained by looking into the object by a specified key. */ -export default function FormSelect({ id, onChange, style, ...restProps }: FormSelectProps) { +export default function FormSelect({ name, id, onChange, style, ...restProps }: FormSelectProps) { return ( - + ); @@ -38,9 +39,9 @@ export default function FormSelect({ id, onChange, style, ...restProps }: For /** * Similar to {@link FormSelect}, but the top-level elements are actually groups. */ -export function FormSelectWithGroups({ id, values, keyProperty, titleProperty, currentValue, onChange }: FormSelectProps>) { +export function FormSelectWithGroups({ name, id, values, keyProperty, titleProperty, currentValue, onChange }: FormSelectProps>) { return ( - + {values.map(({ title, items }) => { return ( @@ -52,7 +53,7 @@ export function FormSelectWithGroups({ id, values, keyProperty, titleProperty ) } -function FormSelectBody({ id, children, onChange, style }: { id?: string, children: ComponentChildren, onChange: OnChangeListener, style?: CSSProperties }) { +function FormSelectBody({ id, name, children, onChange, style }: { id?: string, name?: string, children: ComponentChildren, onChange: OnChangeListener, style?: CSSProperties }) { return ( Date: Thu, 21 Aug 2025 15:14:19 +0300 Subject: [PATCH 025/191] chore(react/note_icon): reintroduce read-only --- apps/client/src/widgets/note_icon.ts.bak | 8 +------- apps/client/src/widgets/note_icon.tsx | 3 ++- apps/client/src/widgets/react/Dropdown.tsx | 4 +++- 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/apps/client/src/widgets/note_icon.ts.bak b/apps/client/src/widgets/note_icon.ts.bak index 0fd2b7c1f..785d1e4b5 100644 --- a/apps/client/src/widgets/note_icon.ts.bak +++ b/apps/client/src/widgets/note_icon.ts.bak @@ -26,13 +26,7 @@ export default class NoteIconWidget extends NoteContextAwareWidget { } }); } - - async refreshWithNote(note: FNote) { - this.$icon.removeClass().addClass(`${note.getIcon()} note-icon`); - this.$icon.prop("disabled", !!(this.noteContext?.viewScope?.viewMode !== "default")); - this.dropdown.hide(); - } - + async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { if (this.noteId && loadResults.isNoteReloaded(this.noteId)) { this.refresh(); diff --git a/apps/client/src/widgets/note_icon.tsx b/apps/client/src/widgets/note_icon.tsx index dc133be47..7a605c4b8 100644 --- a/apps/client/src/widgets/note_icon.tsx +++ b/apps/client/src/widgets/note_icon.tsx @@ -25,7 +25,7 @@ let fullIconData: { let iconToCountCache!: Promise | null; export default function NoteIcon() { - const { note } = useNoteContext(); + const { note, viewScope } = useNoteContext(); const [ icon, setIcon ] = useState("bx bx-empty"); const refreshIcon = useCallback(() => { @@ -43,6 +43,7 @@ export default function NoteIcon() { dropdownContainerStyle={{ width: "610px" }} buttonClassName={`note-icon ${icon}`} hideToggleArrow + disabled={viewScope?.viewMode !== "default"} > diff --git a/apps/client/src/widgets/react/Dropdown.tsx b/apps/client/src/widgets/react/Dropdown.tsx index 7fd39c141..4de382f3b 100644 --- a/apps/client/src/widgets/react/Dropdown.tsx +++ b/apps/client/src/widgets/react/Dropdown.tsx @@ -12,9 +12,10 @@ interface DropdownProps { title?: string; dropdownContainerStyle?: CSSProperties; hideToggleArrow?: boolean; + disabled?: boolean; } -export default function Dropdown({ className, buttonClassName, isStatic, children, title, dropdownContainerStyle, hideToggleArrow }: DropdownProps) { +export default function Dropdown({ className, buttonClassName, isStatic, children, title, dropdownContainerStyle, hideToggleArrow, disabled }: DropdownProps) { const dropdownRef = useRef(null); const triggerRef = useRef(null); @@ -63,6 +64,7 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre aria-expanded="false" title={title} id={ariaId} + disabled={disabled} />
Date: Thu, 21 Aug 2025 15:21:32 +0300 Subject: [PATCH 026/191] chore(react/note_icon): reintroduce setting the icon --- apps/client/src/widgets/note_icon.ts.bak | 9 +-------- apps/client/src/widgets/note_icon.tsx | 23 ++++++++++++++++++++--- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/apps/client/src/widgets/note_icon.ts.bak b/apps/client/src/widgets/note_icon.ts.bak index 785d1e4b5..bc201ccc1 100644 --- a/apps/client/src/widgets/note_icon.ts.bak +++ b/apps/client/src/widgets/note_icon.ts.bak @@ -18,15 +18,8 @@ export default class NoteIconWidget extends NoteContextAwareWidget { doRender() { this.$icon = this.$widget.find("button.note-icon"); this.$iconList = this.$widget.find(".icon-list"); - this.$iconList.on("click", "span", async (e) => { - const clazz = $(e.target).attr("class"); - - if (this.noteId && this.note) { - await attributeService.setLabel(this.noteId, this.note.hasOwnedLabel("workspace") ? "workspaceIconClass" : "iconClass", clazz); - } - }); } - + async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { if (this.noteId && loadResults.isNoteReloaded(this.noteId)) { this.refresh(); diff --git a/apps/client/src/widgets/note_icon.tsx b/apps/client/src/widgets/note_icon.tsx index 7a605c4b8..3f6e8b191 100644 --- a/apps/client/src/widgets/note_icon.tsx +++ b/apps/client/src/widgets/note_icon.tsx @@ -7,6 +7,8 @@ import server from "../services/server"; import type { Category, Icon } from "./icon_list"; import FormTextBox from "./react/FormTextBox"; import FormSelect from "./react/FormSelect"; +import FNote from "../entities/fnote"; +import attributes from "../services/attributes"; interface IconToCountCache { iconClassToCountMap: Record; @@ -45,12 +47,12 @@ export default function NoteIcon() { hideToggleArrow disabled={viewScope?.viewMode !== "default"} > - + ) } -function NoteIconList() { +function NoteIconList({ note }: { note: FNote }) { const searchBoxRef = useRef(null); const [ search, setSearch ] = useState(); const [ categoryId, setCategoryId ] = useState("0"); @@ -124,7 +126,22 @@ function NoteIconList() { />
-
+
{ + const clickedTarget = e.target as HTMLElement; + + if (!clickedTarget.classList.contains("bx")) { + return; + } + + const iconClass = Array.from(clickedTarget.classList.values()).join(" "); + if (note) { + const attributeToSet = note.hasOwnedLabel("workspace") ? "workspaceIconClass" : "iconClass"; + attributes.setLabel(note.noteId, attributeToSet, iconClass); + } + }} + > {(iconData?.icons ?? []).map(({className, name}) => ( ))} From a106510924e33cebabc4f93c59c4aba0f22ea631 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 15:50:14 +0300 Subject: [PATCH 027/191] chore(react/note_icon): react to icon changes --- apps/client/src/widgets/note_icon.ts.bak | 14 ------------ apps/client/src/widgets/note_icon.tsx | 20 ++++++++--------- apps/client/src/widgets/react/hooks.tsx | 28 +++++++++++++++++++++--- 3 files changed, 34 insertions(+), 28 deletions(-) diff --git a/apps/client/src/widgets/note_icon.ts.bak b/apps/client/src/widgets/note_icon.ts.bak index bc201ccc1..c7b3a6aa5 100644 --- a/apps/client/src/widgets/note_icon.ts.bak +++ b/apps/client/src/widgets/note_icon.ts.bak @@ -20,20 +20,6 @@ export default class NoteIconWidget extends NoteContextAwareWidget { this.$iconList = this.$widget.find(".icon-list"); } - async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { - if (this.noteId && loadResults.isNoteReloaded(this.noteId)) { - this.refresh(); - return; - } - - for (const attr of loadResults.getAttributeRows()) { - if (attr.type === "label" && ["iconClass", "workspaceIconClass"].includes(attr.name ?? "") && attributeService.isAffecting(attr, this.note)) { - this.refresh(); - break; - } - } - } - async renderDropdown() { this.$iconList.empty(); diff --git a/apps/client/src/widgets/note_icon.tsx b/apps/client/src/widgets/note_icon.tsx index 3f6e8b191..3eaeaaced 100644 --- a/apps/client/src/widgets/note_icon.tsx +++ b/apps/client/src/widgets/note_icon.tsx @@ -1,7 +1,7 @@ import Dropdown from "./react/Dropdown"; import "./note_icon.css"; import { t } from "i18next"; -import { useNoteContext } from "./react/hooks"; +import { useNoteContext, useNoteLabel } from "./react/hooks"; import { useCallback, useEffect, useRef, useState } from "preact/hooks"; import server from "../services/server"; import type { Category, Icon } from "./icon_list"; @@ -28,26 +28,24 @@ let iconToCountCache!: Promise | null; export default function NoteIcon() { const { note, viewScope } = useNoteContext(); - const [ icon, setIcon ] = useState("bx bx-empty"); + const [ icon, setIcon ] = useState(); + const [ iconClass ] = useNoteLabel(note, "iconClass"); + const [ workspaceIconClass ] = useNoteLabel(note, "workspaceIconClass"); - const refreshIcon = useCallback(() => { - if (note) { - setIcon(note.getIcon()); - } - }, [ note ]); - - useEffect(refreshIcon, [ note ]); + useEffect(() => { + setIcon(note?.getIcon()); + }, [ note, iconClass, workspaceIconClass ]); return ( - + { note && } ) } diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 9269e0605..26c41eee0 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -1,5 +1,5 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks"; -import appContext, { BeforeUploadListener, EventData, EventNames } from "../../components/app_context"; +import { EventData, EventNames } from "../../components/app_context"; import { ParentComponent } from "./react_utils"; import SpacedUpdate from "../../services/spaced_update"; import { OptionNames } from "@triliumnext/commons"; @@ -9,8 +9,7 @@ import Component from "../../components/component"; import NoteContext from "../../components/note_context"; import { ReactWrappedWidget } from "../basic_widget"; import FNote from "../../entities/fnote"; -import froca from "../../services/froca"; -import toast from "../../services/toast"; +import attributes from "../../services/attributes"; type TriliumEventHandler = (data: EventData) => void; const registeredHandlers: Map[]>> = new Map(); @@ -316,3 +315,26 @@ export function useNoteProperty(note: FNote | null | unde return note[property]; } + +export function useNoteLabel(note: FNote | undefined | null, labelName: string): [string | undefined, (newValue: string) => void] { + const [ labelValue, setNoteValue ] = useState(note?.getLabelValue(labelName)); + + useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { + for (const attr of loadResults.getAttributeRows()) { + if (attr.type === "label" && attr.name === labelName && attributes.isAffecting(attr, note)) { + setNoteValue(attr.value ?? null); + } + } + }); + + const setter = useCallback((value: string | undefined) => { + if (note) { + attributes.setLabel(note.noteId, labelName, value) + } + }, [note]); + + return [ + labelValue, + setter + ] as const; +} \ No newline at end of file From 4685aef88dd3cb67a034b0168f3e530e4a69edf3 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 16:19:18 +0300 Subject: [PATCH 028/191] chore(react/note_icon): reset to default icon --- apps/client/src/widgets/note_icon.ts.bak | 50 ------------------------ apps/client/src/widgets/note_icon.tsx | 28 ++++++++++++- 2 files changed, 27 insertions(+), 51 deletions(-) delete mode 100644 apps/client/src/widgets/note_icon.ts.bak diff --git a/apps/client/src/widgets/note_icon.ts.bak b/apps/client/src/widgets/note_icon.ts.bak deleted file mode 100644 index c7b3a6aa5..000000000 --- a/apps/client/src/widgets/note_icon.ts.bak +++ /dev/null @@ -1,50 +0,0 @@ -import { t } from "../services/i18n.js"; -import NoteContextAwareWidget from "./note_context_aware_widget.js"; -import attributeService from "../services/attributes.js"; -import server from "../services/server.js"; -import type FNote from "../entities/fnote.js"; -import type { EventData } from "../components/app_context.js"; -import type { Icon } from "./icon_list.js"; -import { Dropdown } from "bootstrap"; - -export default class NoteIconWidget extends NoteContextAwareWidget { - - private dropdown!: bootstrap.Dropdown; - private $icon!: JQuery; - private $iconList!: JQuery; - private $iconCategory!: JQuery; - private $iconSearch!: JQuery; - - doRender() { - this.$icon = this.$widget.find("button.note-icon"); - this.$iconList = this.$widget.find(".icon-list"); - } - - async renderDropdown() { - this.$iconList.empty(); - - if (this.getIconLabels().length > 0) { - this.$iconList.append( - $(`
`).append( - $(``).on("click", () => - this.getIconLabels().forEach((label) => { - if (this.noteId) { - attributeService.removeAttributeById(this.noteId, label.attributeId); - } - }) - ) - ) - ); - } - - - this.$iconSearch.focus(); - } - - getIconLabels() { - if (!this.note) { - return []; - } - return this.note.getOwnedLabels().filter((label) => ["workspaceIconClass", "iconClass"].includes(label.name)); - } -} diff --git a/apps/client/src/widgets/note_icon.tsx b/apps/client/src/widgets/note_icon.tsx index 3eaeaaced..d991bc0e9 100644 --- a/apps/client/src/widgets/note_icon.tsx +++ b/apps/client/src/widgets/note_icon.tsx @@ -2,13 +2,14 @@ import Dropdown from "./react/Dropdown"; import "./note_icon.css"; import { t } from "i18next"; import { useNoteContext, useNoteLabel } from "./react/hooks"; -import { useCallback, useEffect, useRef, useState } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; import server from "../services/server"; import type { Category, Icon } from "./icon_list"; import FormTextBox from "./react/FormTextBox"; import FormSelect from "./react/FormSelect"; import FNote from "../entities/fnote"; import attributes from "../services/attributes"; +import Button from "./react/Button"; interface IconToCountCache { iconClassToCountMap: Record; @@ -140,6 +141,22 @@ function NoteIconList({ note }: { note: FNote }) { } }} > + {getIconLabels(note).length > 0 && ( +
+
+ )} + {(iconData?.icons ?? []).map(({className, name}) => ( ))} @@ -155,4 +172,13 @@ async function getIconToCountMap() { } return (await iconToCountCache).iconClassToCountMap; +} + +function getIconLabels(note: FNote) { + if (!note) { + return []; + } + return note.getOwnedLabels() + .filter((label) => ["workspaceIconClass", "iconClass"] + .includes(label.name)); } \ No newline at end of file From d76d50f30e91b38313406f488ae6e99123c1fb69 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 17:16:03 +0300 Subject: [PATCH 029/191] chore(react): fix a type error --- apps/client/src/widgets/react/hooks.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 26c41eee0..b948f287e 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -316,7 +316,7 @@ export function useNoteProperty(note: FNote | null | unde return note[property]; } -export function useNoteLabel(note: FNote | undefined | null, labelName: string): [string | undefined, (newValue: string) => void] { +export function useNoteLabel(note: FNote | undefined | null, labelName: string): [string | null | undefined, (newValue: string) => void] { const [ labelValue, setNoteValue ] = useState(note?.getLabelValue(labelName)); useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { From 45fbcec805bb6c4576d2d21811de2cb6d523f58e Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 18:29:13 +0300 Subject: [PATCH 030/191] feat(react/ribbon): port base structure --- apps/client/src/layouts/desktop_layout.tsx | 25 +--- .../widgets/containers/ribbon_container.ts | 123 +----------------- apps/client/src/widgets/ribbon/Ribbon.tsx | 37 ++++++ apps/client/src/widgets/ribbon/style.css | 94 +++++++++++++ .../ribbon_widgets/basic_properties.ts | 2 - 5 files changed, 136 insertions(+), 145 deletions(-) create mode 100644 apps/client/src/widgets/ribbon/Ribbon.tsx create mode 100644 apps/client/src/widgets/ribbon/style.css diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx index 4b094ba3b..6452dfb63 100644 --- a/apps/client/src/layouts/desktop_layout.tsx +++ b/apps/client/src/layouts/desktop_layout.tsx @@ -73,6 +73,7 @@ import ToggleReadOnlyButton from "../widgets/floating_buttons/toggle_read_only_b import PngExportButton from "../widgets/floating_buttons/png_export_button.js"; import RefreshButton from "../widgets/floating_buttons/refresh_button.js"; import { applyModals } from "./layout_commons.js"; +import Ribbon from "../widgets/ribbon/Ribbon.jsx"; export default class DesktopLayout { @@ -159,29 +160,7 @@ export default class DesktopLayout { .child(new ClosePaneButton()) .child(new CreatePaneButton()) ) - .child( - new RibbonContainer() - // the order of the widgets matter. Some of these want to "activate" themselves - // when visible. When this happens to multiple of them, the first one "wins". - // promoted attributes should always win. - .ribbon(new ClassicEditorToolbar()) - .ribbon(new ScriptExecutorWidget()) - .ribbon(new SearchDefinitionWidget()) - .ribbon(new EditedNotesWidget()) - .ribbon(new BookPropertiesWidget()) - .ribbon(new NotePropertiesWidget()) - .ribbon(new FilePropertiesWidget()) - .ribbon(new ImagePropertiesWidget()) - .ribbon(new BasicPropertiesWidget()) - .ribbon(new OwnedAttributeListWidget()) - .ribbon(new InheritedAttributesWidget()) - .ribbon(new NotePathsWidget()) - .ribbon(new NoteMapRibbonWidget()) - .ribbon(new SimilarNotesWidget()) - .ribbon(new NoteInfoWidget()) - .button(new RevisionsButton()) - .button(new NoteActionsWidget()) - ) + .child() .child(new SharedInfoWidget()) .child(new WatchedFileUpdateStatusWidget()) .child( diff --git a/apps/client/src/widgets/containers/ribbon_container.ts b/apps/client/src/widgets/containers/ribbon_container.ts index 9aee7bb67..9bd225d39 100644 --- a/apps/client/src/widgets/containers/ribbon_container.ts +++ b/apps/client/src/widgets/containers/ribbon_container.ts @@ -7,116 +7,6 @@ import type { NoteType } from "../../entities/fnote.js"; import type { EventData, EventNames } from "../../components/app_context.js"; import type NoteActionsWidget from "../buttons/note_actions.js"; -const TPL = /*html*/` -
- - -
-
-
-
- -
-
`; - type ButtonWidget = (CommandButtonWidget | NoteActionsWidget); export default class RibbonContainer extends NoteContextAwareWidget { @@ -160,8 +50,6 @@ export default class RibbonContainer extends NoteContextAwareWidget { } doRender() { - this.$widget = $(TPL); - this.$tabContainer = this.$widget.find(".ribbon-tab-container"); this.$buttonContainer = this.$widget.find(".ribbon-button-container"); this.$bodyContainer = this.$widget.find(".ribbon-body-container"); @@ -241,16 +129,11 @@ export default class RibbonContainer extends NoteContextAwareWidget { .attr("data-ribbon-component-id", ribbonWidget.componentId) .attr("data-ribbon-component-name", (ribbonWidget as any).name as string) // TODO: base class for ribbon widgets .append( - $('') - .addClass(ret.icon) - .attr("title", ret.title) + $('') .attr("data-toggle-command", (ribbonWidget as any).toggleCommand) - ) // TODO: base class - .append(" ") - .append($('').text(ret.title)); + ) - this.$tabContainer.append($ribbonTitle); - this.$tabContainer.append('
'); + this.$tabContainer.append(''); if (ret.activate && !this.lastActiveComponentId && !$ribbonTabToActivate && !noExplicitActivation) { $ribbonTabToActivate = $ribbonTitle; diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx new file mode 100644 index 000000000..48dcdcf1a --- /dev/null +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -0,0 +1,37 @@ +import { t } from "../../services/i18n"; +import "./style.css"; + +export default function Ribbon() { + return ( +
+
+
+ +
+
+
+ +
+
+ ) +} + +function RibbonTab({ icon, title }: { icon: string; title: string }) { + return ( + <> +
+ +   + {title} +
+ +
+ + ) +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css new file mode 100644 index 000000000..9c72f13be --- /dev/null +++ b/apps/client/src/widgets/ribbon/style.css @@ -0,0 +1,94 @@ +.ribbon-container { + margin-bottom: 5px; +} + +.ribbon-top-row { + display: flex; + min-height: 36px; +} + +.ribbon-tab-container { + display: flex; + flex-direction: row; + justify-content: center; + margin-left: 10px; + flex-grow: 1; + flex-flow: row wrap; +} + +.ribbon-tab-title { + color: var(--muted-text-color); + border-bottom: 1px solid var(--main-border-color); + min-width: 24px; + flex-basis: 24px; + max-width: max-content; + flex-grow: 10; +} + +.ribbon-tab-title .bx { + font-size: 150%; + position: relative; + top: 3px; +} + +.ribbon-tab-title.active { + color: var(--main-text-color); + border-bottom: 3px solid var(--main-text-color); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.ribbon-tab-title:hover { + cursor: pointer; +} + +.ribbon-tab-title:hover { + color: var(--main-text-color); +} + +.ribbon-tab-title:first-of-type { + padding-left: 10px; +} + +.ribbon-tab-spacer { + flex-basis: 0; + min-width: 0; + max-width: 35px; + flex-grow: 1; + border-bottom: 1px solid var(--main-border-color); +} + +.ribbon-tab-spacer:last-of-type { + flex-grow: 1; + flex-basis: 0; + min-width: 0; + max-width: 10000px; +} + +.ribbon-button-container { + display: flex; + border-bottom: 1px solid var(--main-border-color); + margin-right: 5px; +} + +.ribbon-button-container > * { + position: relative; + top: -3px; + margin-left: 10px; +} + +.ribbon-body { + display: none; + border-bottom: 1px solid var(--main-border-color); + margin-left: 10px; + margin-right: 5px; /* needs to have this value so that the bottom border is the same width as the top one */ +} + +.ribbon-body.active { + display: block; +} + +.ribbon-tab-title.active .ribbon-tab-title-label { + display: inline; +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts index b78e80a8d..aaa2bf934 100644 --- a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts +++ b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts @@ -99,8 +99,6 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget { getTitle() { return { show: !this.note?.isLaunchBarConfig(), - title: t("basic_properties.basic_properties"), - icon: "bx bx-slider" }; } From 5597f4e2e0894fe4cc0e8e69a8412a666d705b58 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 19:27:18 +0300 Subject: [PATCH 031/191] chore(react/ribbon): add all ribbon tab titles & icon --- apps/client/src/entities/fnote.ts | 4 + .../src/widgets/ribbon/BasicPropertiesTab.tsx | 3 + apps/client/src/widgets/ribbon/Ribbon.tsx | 108 +++++++++++++++++- .../widgets/ribbon_widgets/book_properties.ts | 3 +- .../ribbon_widgets/classic_editor_toolbar.ts | 2 - .../widgets/ribbon_widgets/edited_notes.ts | 3 +- .../widgets/ribbon_widgets/file_properties.ts | 3 +- .../ribbon_widgets/image_properties.ts | 3 +- .../inherited_attribute_list.ts | 4 +- .../ribbon_widgets/note_info_widget.ts | 3 +- .../src/widgets/ribbon_widgets/note_map.ts | 4 +- .../src/widgets/ribbon_widgets/note_paths.ts | 3 +- .../widgets/ribbon_widgets/note_properties.ts | 3 +- .../ribbon_widgets/owned_attribute_list.ts | 3 +- .../widgets/ribbon_widgets/script_executor.ts | 8 +- .../ribbon_widgets/search_definition.ts | 4 +- .../widgets/ribbon_widgets/similar_notes.ts | 3 +- 17 files changed, 123 insertions(+), 41 deletions(-) create mode 100644 apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx diff --git a/apps/client/src/entities/fnote.ts b/apps/client/src/entities/fnote.ts index 6099cba35..be80a1142 100644 --- a/apps/client/src/entities/fnote.ts +++ b/apps/client/src/entities/fnote.ts @@ -1020,6 +1020,10 @@ class FNote { return this.noteId.startsWith("_options"); } + isTriliumSqlite() { + return this.mime === "text/x-sqlite;schema=trilium"; + } + /** * Provides note's date metadata. */ diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx new file mode 100644 index 000000000..e00787358 --- /dev/null +++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx @@ -0,0 +1,3 @@ +export default function BasicPropertiesTab() { + return

Hi

; +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index 48dcdcf1a..539c67f14 100644 --- a/apps/client/src/widgets/ribbon/Ribbon.tsx +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -1,15 +1,112 @@ +import FNote from "../../entities/fnote"; import { t } from "../../services/i18n"; +import { useNoteContext } from "../react/hooks"; import "./style.css"; +type TitleFn = string | ((context: TabContext) => string); + +interface TabContext { + note: FNote | null | undefined; +} + +interface TabConfiguration { + title: TitleFn; + icon: string; +} + +const TAB_CONFIGURATION: TabConfiguration[] = [ + { + title: t("classic_editor_toolbar.title"), + icon: "bx bx-text" + // ClassicEditorToolbar + }, + { + title: ({ note }) => note?.isTriliumSqlite() ? t("script_executor.query") : t("script_executor.script"), + icon: "bx bx-play" + // ScriptExecutorWidget + }, + { + // SearchDefinitionWidget + title: t("search_definition.search_parameters"), + icon: "bx bx-search" + }, + { + // Edited NotesWidget + title: t("edited_notes.title"), + icon: "bx bx-calendar-edit" + }, + { + // BookPropertiesWidget + title: t("book_properties.book_properties"), + icon: "bx bx-book" + }, + { + // NotePropertiesWidget + title: t("note_properties.info"), + icon: "bx bx-info-square" + }, + { + // FilePropertiesWidget + title: t("file_properties.title"), + icon: "bx bx-file" + }, + { + // ImagePropertiesWidget + title: t("image_properties.title"), + icon: "bx bx-image" + }, + { + // BasicProperties + title: t("basic_properties.basic_properties"), + icon: "bx bx-slider" + }, + { + // OwnedAttributeListWidget + title: t("owned_attribute_list.owned_attributes"), + icon: "bx bx-list-check" + }, + { + // InheritedAttributesWidget + title: t("inherited_attribute_list.title"), + icon: "bx bx-list-plus" + }, + { + // NotePathsWidget + title: t("note_paths.title"), + icon: "bx bx-collection" + }, + { + // NoteMapRibbonWidget + title: t("note_map.title"), + icon: "bx bxs-network-chart" + }, + { + // SimilarNotesWidget + title: t("similar_notes.title"), + icon: "bx bx-bar-chart" + }, + { + // NoteInfoWidget + title: t("note_info_widget.title"), + icon: "bx bx-info-circle" + }, + +]; + export default function Ribbon() { + const { note } = useNoteContext(); + const context: TabContext = { note }; + return (
- + {TAB_CONFIGURATION.map(({ title, icon }) => ( + + ))}
@@ -34,4 +131,5 @@ function RibbonTab({ icon, title }: { icon: string; title: string }) {
) -} \ No newline at end of file +} + diff --git a/apps/client/src/widgets/ribbon_widgets/book_properties.ts b/apps/client/src/widgets/ribbon_widgets/book_properties.ts index 47c1a83f1..04fb61c02 100644 --- a/apps/client/src/widgets/ribbon_widgets/book_properties.ts +++ b/apps/client/src/widgets/ribbon_widgets/book_properties.ts @@ -93,8 +93,7 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget { getTitle() { return { show: this.isEnabled(), - title: t("book_properties.book_properties"), - icon: "bx bx-book" + }; } diff --git a/apps/client/src/widgets/ribbon_widgets/classic_editor_toolbar.ts b/apps/client/src/widgets/ribbon_widgets/classic_editor_toolbar.ts index a4974ff24..f93b78ff8 100644 --- a/apps/client/src/widgets/ribbon_widgets/classic_editor_toolbar.ts +++ b/apps/client/src/widgets/ribbon_widgets/classic_editor_toolbar.ts @@ -64,8 +64,6 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget { return { show: await this.#shouldDisplay(), activate: true, - title: t("classic_editor_toolbar.title"), - icon: "bx bx-text" }; } diff --git a/apps/client/src/widgets/ribbon_widgets/edited_notes.ts b/apps/client/src/widgets/ribbon_widgets/edited_notes.ts index 2967b5f6f..768d48566 100644 --- a/apps/client/src/widgets/ribbon_widgets/edited_notes.ts +++ b/apps/client/src/widgets/ribbon_widgets/edited_notes.ts @@ -49,8 +49,7 @@ export default class EditedNotesWidget extends NoteContextAwareWidget { show: this.isEnabled(), // promoted attributes have priority over edited notes activate: (this.note?.getPromotedDefinitionAttributes().length === 0 || !options.is("promotedAttributesOpenInRibbon")) && options.is("editedNotesOpenInRibbon"), - title: t("edited_notes.title"), - icon: "bx bx-calendar-edit" + }; } diff --git a/apps/client/src/widgets/ribbon_widgets/file_properties.ts b/apps/client/src/widgets/ribbon_widgets/file_properties.ts index b6fc1082d..4d4b419c3 100644 --- a/apps/client/src/widgets/ribbon_widgets/file_properties.ts +++ b/apps/client/src/widgets/ribbon_widgets/file_properties.ts @@ -93,8 +93,7 @@ export default class FilePropertiesWidget extends NoteContextAwareWidget { return { show: this.isEnabled(), activate: true, - title: t("file_properties.title"), - icon: "bx bx-file" + }; } diff --git a/apps/client/src/widgets/ribbon_widgets/image_properties.ts b/apps/client/src/widgets/ribbon_widgets/image_properties.ts index 7412561e7..dfa67d7db 100644 --- a/apps/client/src/widgets/ribbon_widgets/image_properties.ts +++ b/apps/client/src/widgets/ribbon_widgets/image_properties.ts @@ -77,8 +77,7 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget { return { show: this.isEnabled(), activate: true, - title: t("image_properties.title"), - icon: "bx bx-image" + }; } diff --git a/apps/client/src/widgets/ribbon_widgets/inherited_attribute_list.ts b/apps/client/src/widgets/ribbon_widgets/inherited_attribute_list.ts index 2e2ac4615..5524e0531 100644 --- a/apps/client/src/widgets/ribbon_widgets/inherited_attribute_list.ts +++ b/apps/client/src/widgets/ribbon_widgets/inherited_attribute_list.ts @@ -48,9 +48,7 @@ export default class InheritedAttributesWidget extends NoteContextAwareWidget { getTitle() { return { - show: !this.note?.isLaunchBarConfig(), - title: t("inherited_attribute_list.title"), - icon: "bx bx-list-plus" + show: !this.note?.isLaunchBarConfig() }; } diff --git a/apps/client/src/widgets/ribbon_widgets/note_info_widget.ts b/apps/client/src/widgets/ribbon_widgets/note_info_widget.ts index efe95007d..3a390eb1d 100644 --- a/apps/client/src/widgets/ribbon_widgets/note_info_widget.ts +++ b/apps/client/src/widgets/ribbon_widgets/note_info_widget.ts @@ -105,8 +105,7 @@ export default class NoteInfoWidget extends NoteContextAwareWidget { getTitle() { return { show: this.isEnabled(), - title: t("note_info_widget.title"), - icon: "bx bx-info-circle" + }; } diff --git a/apps/client/src/widgets/ribbon_widgets/note_map.ts b/apps/client/src/widgets/ribbon_widgets/note_map.ts index b47de7b95..574e44dc2 100644 --- a/apps/client/src/widgets/ribbon_widgets/note_map.ts +++ b/apps/client/src/widgets/ribbon_widgets/note_map.ts @@ -57,9 +57,7 @@ export default class NoteMapRibbonWidget extends NoteContextAwareWidget { getTitle() { return { - show: this.isEnabled(), - title: t("note_map.title"), - icon: "bx bxs-network-chart" + show: this.isEnabled() }; } diff --git a/apps/client/src/widgets/ribbon_widgets/note_paths.ts b/apps/client/src/widgets/ribbon_widgets/note_paths.ts index 8681bfd21..9377a2198 100644 --- a/apps/client/src/widgets/ribbon_widgets/note_paths.ts +++ b/apps/client/src/widgets/ribbon_widgets/note_paths.ts @@ -55,8 +55,7 @@ export default class NotePathsWidget extends NoteContextAwareWidget { getTitle() { return { show: true, - title: t("note_paths.title"), - icon: "bx bx-collection" + }; } diff --git a/apps/client/src/widgets/ribbon_widgets/note_properties.ts b/apps/client/src/widgets/ribbon_widgets/note_properties.ts index eb104411d..7f875e4e4 100644 --- a/apps/client/src/widgets/ribbon_widgets/note_properties.ts +++ b/apps/client/src/widgets/ribbon_widgets/note_properties.ts @@ -31,8 +31,7 @@ export default class NotePropertiesWidget extends NoteContextAwareWidget { return { show: this.isEnabled(), activate: true, - title: t("note_properties.info"), - icon: "bx bx-info-square" + }; } diff --git a/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts b/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts index dab466569..113e03e0d 100644 --- a/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts +++ b/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts @@ -52,8 +52,7 @@ export default class OwnedAttributeListWidget extends NoteContextAwareWidget { getTitle() { return { show: !this.note?.isLaunchBarConfig(), - title: t("owned_attribute_list.owned_attributes"), - icon: "bx bx-list-check" + }; } diff --git a/apps/client/src/widgets/ribbon_widgets/script_executor.ts b/apps/client/src/widgets/ribbon_widgets/script_executor.ts index 3b0b96278..aaec721d7 100644 --- a/apps/client/src/widgets/ribbon_widgets/script_executor.ts +++ b/apps/client/src/widgets/ribbon_widgets/script_executor.ts @@ -37,16 +37,10 @@ export default class ScriptExecutorWidget extends NoteContextAwareWidget { ); } - isTriliumSqlite() { - return this.note?.mime === "text/x-sqlite;schema=trilium"; - } - getTitle() { return { show: this.isEnabled(), - activate: true, - title: this.isTriliumSqlite() ? t("script_executor.query") : t("script_executor.script"), - icon: "bx bx-play" + activate: true }; } diff --git a/apps/client/src/widgets/ribbon_widgets/search_definition.ts b/apps/client/src/widgets/ribbon_widgets/search_definition.ts index 99ac91c50..de459a762 100644 --- a/apps/client/src/widgets/ribbon_widgets/search_definition.ts +++ b/apps/client/src/widgets/ribbon_widgets/search_definition.ts @@ -187,9 +187,7 @@ export default class SearchDefinitionWidget extends NoteContextAwareWidget { getTitle() { return { show: this.isEnabled(), - activate: true, - title: t("search_definition.search_parameters"), - icon: "bx bx-search" + activate: true }; } diff --git a/apps/client/src/widgets/ribbon_widgets/similar_notes.ts b/apps/client/src/widgets/ribbon_widgets/similar_notes.ts index e8e867b64..f86fc714a 100644 --- a/apps/client/src/widgets/ribbon_widgets/similar_notes.ts +++ b/apps/client/src/widgets/ribbon_widgets/similar_notes.ts @@ -61,8 +61,7 @@ export default class SimilarNotesWidget extends NoteContextAwareWidget { getTitle() { return { show: this.isEnabled(), - title: t("similar_notes.title"), - icon: "bx bx-bar-chart" + }; } From 6849f805067239852a3ef7648780fbdf5ddeac93 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 19:35:21 +0300 Subject: [PATCH 032/191] chore(react/ribbon): make tabs activable --- .../src/widgets/containers/ribbon_container.ts | 6 ------ apps/client/src/widgets/ribbon/Ribbon.tsx | 13 +++++++++---- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/apps/client/src/widgets/containers/ribbon_container.ts b/apps/client/src/widgets/containers/ribbon_container.ts index 9bd225d39..24fa48576 100644 --- a/apps/client/src/widgets/containers/ribbon_container.ts +++ b/apps/client/src/widgets/containers/ribbon_container.ts @@ -61,12 +61,6 @@ export default class RibbonContainer extends NoteContextAwareWidget { for (const buttonWidget of this.buttonWidgets) { this.$buttonContainer.append(buttonWidget.render()); } - - this.$tabContainer.on("click", ".ribbon-tab-title", (e) => { - const $ribbonTitle = $(e.target).closest(".ribbon-tab-title"); - - this.toggleRibbonTab($ribbonTitle); - }); } toggleRibbonTab($ribbonTitle: JQuery, refreshActiveTab = true) { diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index 539c67f14..73693ecbb 100644 --- a/apps/client/src/widgets/ribbon/Ribbon.tsx +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -1,3 +1,4 @@ +import { useState } from "preact/hooks"; import FNote from "../../entities/fnote"; import { t } from "../../services/i18n"; import { useNoteContext } from "../react/hooks"; @@ -96,15 +97,18 @@ const TAB_CONFIGURATION: TabConfiguration[] = [ export default function Ribbon() { const { note } = useNoteContext(); const context: TabContext = { note }; + const [ activeTab, setActiveTab ] = useState(); return (
- {TAB_CONFIGURATION.map(({ title, icon }) => ( + {TAB_CONFIGURATION.map(({ title, icon }, i) => ( setActiveTab(i)} /> ))}
@@ -116,16 +120,17 @@ export default function Ribbon() { ) } -function RibbonTab({ icon, title }: { icon: string; title: string }) { +function RibbonTab({ icon, title, active, onClick }: { icon: string; title: string; active: boolean, onClick: () => void }) { return ( <> -
+
  - {title} + { active && {title} }
From 9bb048fb01b65804fb186604c4599697a3cbacad Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 19:42:53 +0300 Subject: [PATCH 033/191] chore(react/ribbon): toggleable tabs --- .../widgets/containers/ribbon_container.ts | 35 ------------------- apps/client/src/widgets/react/hooks.tsx | 3 -- apps/client/src/widgets/ribbon/Ribbon.tsx | 17 ++++++--- apps/client/src/widgets/ribbon/style.css | 1 + 4 files changed, 14 insertions(+), 42 deletions(-) diff --git a/apps/client/src/widgets/containers/ribbon_container.ts b/apps/client/src/widgets/containers/ribbon_container.ts index 24fa48576..d2e2b058f 100644 --- a/apps/client/src/widgets/containers/ribbon_container.ts +++ b/apps/client/src/widgets/containers/ribbon_container.ts @@ -63,41 +63,6 @@ export default class RibbonContainer extends NoteContextAwareWidget { } } - toggleRibbonTab($ribbonTitle: JQuery, refreshActiveTab = true) { - const activate = !$ribbonTitle.hasClass("active"); - - this.$tabContainer.find(".ribbon-tab-title").removeClass("active"); - this.$bodyContainer.find(".ribbon-body").removeClass("active"); - - if (activate) { - const ribbonComponendId = $ribbonTitle.attr("data-ribbon-component-id"); - - const wasAlreadyActive = this.lastActiveComponentId === ribbonComponendId; - - this.lastActiveComponentId = ribbonComponendId; - - this.$tabContainer.find(`.ribbon-tab-title[data-ribbon-component-id="${ribbonComponendId}"]`).addClass("active"); - this.$bodyContainer.find(`.ribbon-body[data-ribbon-component-id="${ribbonComponendId}"]`).addClass("active"); - - const activeChild = this.getActiveRibbonWidget(); - - if (activeChild && (refreshActiveTab || !wasAlreadyActive) && this.noteContext && this.notePath) { - const handleEventPromise = activeChild.handleEvent("noteSwitched", { noteContext: this.noteContext, notePath: this.notePath }); - - if (refreshActiveTab) { - if (handleEventPromise) { - handleEventPromise.then(() => (activeChild as any).focus?.()); // TODO: Base class - } else { - // TODO: Base class - (activeChild as any).focus?.(); - } - } - } - } else { - this.lastActiveComponentId = null; - } - } - async noteSwitched() { this.lastActiveComponentId = null; diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index b948f287e..bc520dc0e 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -256,15 +256,12 @@ export function useNoteContext() { setNotePath(noteContext.notePath); }); useTriliumEventBeta("setNoteContext", ({ noteContext }) => { - console.log("Set note context", noteContext, noteContext.noteId); setNoteContext(noteContext); }); useTriliumEventBeta("noteSwitchedAndActivated", ({ noteContext }) => { - console.log("Note switched and activated") setNoteContext(noteContext); }); useTriliumEventBeta("noteSwitched", ({ noteContext, notePath }) => { - console.warn("Note switched", notePath); setNotePath(notePath); }); useTriliumEventBeta("frocaReloaded", () => { diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index 73693ecbb..dc87db043 100644 --- a/apps/client/src/widgets/ribbon/Ribbon.tsx +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -108,7 +108,14 @@ export default function Ribbon() { icon={icon} title={typeof title === "string" ? title : title(context)} active={i === activeTab} - onClick={() => setActiveTab(i)} + onClick={() => { + if (activeTab !== i) { + setActiveTab(i); + } else { + // Collapse + setActiveTab(undefined); + } + }} /> ))}
@@ -123,11 +130,13 @@ export default function Ribbon() { function RibbonTab({ icon, title, active, onClick }: { icon: string; title: string; active: boolean, onClick: () => void }) { return ( <> -
+
  { active && {title} } diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css index 9c72f13be..faa9671f3 100644 --- a/apps/client/src/widgets/ribbon/style.css +++ b/apps/client/src/widgets/ribbon/style.css @@ -23,6 +23,7 @@ flex-basis: 24px; max-width: max-content; flex-grow: 10; + user-select: none; } .ribbon-tab-title .bx { From 4e9deab6053af41486d144c3dd44f4694780fee0 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 19:59:30 +0300 Subject: [PATCH 034/191] chore(react/ribbon): make content work --- .../src/widgets/containers/ribbon_container.ts | 13 ------------- apps/client/src/widgets/ribbon/Ribbon.tsx | 13 +++++++++++-- apps/client/src/widgets/ribbon/style.css | 1 - 3 files changed, 11 insertions(+), 16 deletions(-) diff --git a/apps/client/src/widgets/containers/ribbon_container.ts b/apps/client/src/widgets/containers/ribbon_container.ts index d2e2b058f..1dbeb1d03 100644 --- a/apps/client/src/widgets/containers/ribbon_container.ts +++ b/apps/client/src/widgets/containers/ribbon_container.ts @@ -32,15 +32,6 @@ export default class RibbonContainer extends NoteContextAwareWidget { return super.isEnabled() && this.noteContext?.viewScope?.viewMode === "default"; } - ribbon(widget: NoteContextAwareWidget) { - // TODO: Base class - super.child(widget); - - this.ribbonWidgets.push(widget); - - return this; - } - button(widget: ButtonWidget) { super.child(widget); @@ -54,10 +45,6 @@ export default class RibbonContainer extends NoteContextAwareWidget { this.$buttonContainer = this.$widget.find(".ribbon-button-container"); this.$bodyContainer = this.$widget.find(".ribbon-body-container"); - for (const ribbonWidget of this.ribbonWidgets) { - this.$bodyContainer.append($('
').attr("data-ribbon-component-id", ribbonWidget.componentId).append(ribbonWidget.render())); - } - for (const buttonWidget of this.buttonWidgets) { this.$buttonContainer.append(buttonWidget.render()); } diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index dc87db043..fc0646a86 100644 --- a/apps/client/src/widgets/ribbon/Ribbon.tsx +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -3,6 +3,8 @@ import FNote from "../../entities/fnote"; import { t } from "../../services/i18n"; import { useNoteContext } from "../react/hooks"; import "./style.css"; +import { VNode } from "preact"; +import BasicPropertiesTab from "./BasicPropertiesTab"; type TitleFn = string | ((context: TabContext) => string); @@ -13,6 +15,7 @@ interface TabContext { interface TabConfiguration { title: TitleFn; icon: string; + content?: () => VNode; } const TAB_CONFIGURATION: TabConfiguration[] = [ @@ -59,7 +62,8 @@ const TAB_CONFIGURATION: TabConfiguration[] = [ { // BasicProperties title: t("basic_properties.basic_properties"), - icon: "bx bx-slider" + icon: "bx bx-slider", + content: BasicPropertiesTab }, { // OwnedAttributeListWidget @@ -98,6 +102,7 @@ export default function Ribbon() { const { note } = useNoteContext(); const context: TabContext = { note }; const [ activeTab, setActiveTab ] = useState(); + const activeTabConfiguration = activeTab ? TAB_CONFIGURATION[activeTab] : undefined; return (
@@ -122,7 +127,11 @@ export default function Ribbon() {
-
+
+
+ {activeTabConfiguration?.content && activeTabConfiguration.content()} +
+
) } diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css index faa9671f3..832388dd3 100644 --- a/apps/client/src/widgets/ribbon/style.css +++ b/apps/client/src/widgets/ribbon/style.css @@ -80,7 +80,6 @@ } .ribbon-body { - display: none; border-bottom: 1px solid var(--main-border-color); margin-left: 10px; margin-right: 5px; /* needs to have this value so that the bottom border is the same width as the top one */ From e2e9721d5fbeff9354fa79b858a93d4a6db5514b Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 20:16:06 +0300 Subject: [PATCH 035/191] chore(react/ribbon): add basic note types & badges --- apps/client/src/widgets/note_type.ts | 12 +----- apps/client/src/widgets/react/FormList.tsx | 11 ++++- .../src/widgets/ribbon/BasicPropertiesTab.tsx | 41 ++++++++++++++++++- apps/client/src/widgets/ribbon/Ribbon.tsx | 2 +- apps/client/src/widgets/ribbon/style.css | 23 +++++++++++ .../ribbon_widgets/basic_properties.ts | 28 +------------ 6 files changed, 76 insertions(+), 41 deletions(-) diff --git a/apps/client/src/widgets/note_type.ts b/apps/client/src/widgets/note_type.ts index d1a40b408..1147d0ba6 100644 --- a/apps/client/src/widgets/note_type.ts +++ b/apps/client/src/widgets/note_type.ts @@ -65,19 +65,9 @@ export default class NoteTypeWidget extends NoteContextAwareWidget { return; } - for (const noteType of NOTE_TYPES.filter((nt) => !nt.reserved && !nt.static)) { + for (const noteType of ) { let $typeLink: JQuery; - const $title = $("").text(noteType.title); - - if (noteType.isNew) { - $title.append($(``).text(t("note_types.new-feature"))); - } - - if (noteType.isBeta) { - $title.append($(``).text(t("note_types.beta-feature"))); - } - if (noteType.type !== "code") { $typeLink = $('') .attr("data-note-type", noteType.type) diff --git a/apps/client/src/widgets/react/FormList.tsx b/apps/client/src/widgets/react/FormList.tsx index f3bf12ce4..bbb994758 100644 --- a/apps/client/src/widgets/react/FormList.tsx +++ b/apps/client/src/widgets/react/FormList.tsx @@ -63,15 +63,21 @@ export default function FormList({ children, onSelect, style, fullHeight }: Form ); } +export interface FormListBadge { + className?: string; + text: string; +} + interface FormListItemOpts { children: ComponentChildren; icon?: string; value?: string; title?: string; active?: boolean; + badges?: FormListBadge[]; } -export function FormListItem({ children, icon, value, title, active }: FormListItemOpts) { +export function FormListItem({ children, icon, value, title, active, badges }: FormListItemOpts) { return (   {children} + {badges && badges.map(({ className, text }) => ( + {text} + ))} ); } diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx index e00787358..865898041 100644 --- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx +++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx @@ -1,3 +1,42 @@ +import { useCallback, useMemo } from "preact/hooks"; +import Dropdown from "../react/Dropdown"; +import { NOTE_TYPES } from "../../services/note_types"; +import { FormListBadge, FormListItem } from "../react/FormList"; +import { t } from "../../services/i18n"; + export default function BasicPropertiesTab() { - return

Hi

; + return ( +
+ +
+ ); +} + +function NoteTypeWidget() { + const noteTypes = useMemo(() => NOTE_TYPES.filter((nt) => !nt.reserved && !nt.static), []); + + return ( + + {noteTypes.map(noteType => { + const badges: FormListBadge[] = []; + if (noteType.isNew) { + badges.push({ + className: "new-note-type-badge", + text: t("note_types.new-feature") + }); + } + if (noteType.isBeta) { + badges.push({ + text: t("note_types.beta-feature") + }); + } + + return ( + {noteType.title} + ); + })} + + ) } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index fc0646a86..dd2d0228b 100644 --- a/apps/client/src/widgets/ribbon/Ribbon.tsx +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -101,7 +101,7 @@ const TAB_CONFIGURATION: TabConfiguration[] = [ export default function Ribbon() { const { note } = useNoteContext(); const context: TabContext = { note }; - const [ activeTab, setActiveTab ] = useState(); + const [ activeTab, setActiveTab ] = useState(8); const activeTabConfiguration = activeTab ? TAB_CONFIGURATION[activeTab] : undefined; return ( diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css index 832388dd3..93190578e 100644 --- a/apps/client/src/widgets/ribbon/style.css +++ b/apps/client/src/widgets/ribbon/style.css @@ -91,4 +91,27 @@ .ribbon-tab-title.active .ribbon-tab-title-label { display: inline; +} + +.basic-properties-widget { + padding: 0px 12px 6px 12px; + display: flex; + align-items: baseline; + flex-wrap: wrap; +} + +.basic-properties-widget > * { + margin-top: 9px; + margin-bottom: 2px; +} + +.basic-properties-widget > * > :last-child { + margin-right: 30px; +} + +.note-type-container, +.editability-select-container, +.note-language-container { + display: flex; + align-items: center; } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts index aaa2bf934..603dee60f 100644 --- a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts +++ b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts @@ -10,32 +10,6 @@ import type FNote from "../../entities/fnote.js"; import NoteLanguageWidget from "../note_language.js"; const TPL = /*html*/` -
- -
${t("basic_properties.note_type")}:  
@@ -55,7 +29,7 @@ const TPL = /*html*/`
${t("basic_properties.language")}:  
-
`; +`; export default class BasicPropertiesWidget extends NoteContextAwareWidget { From cabeb13adb8a2bf1afe1421987d948cfe5545fa0 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 20:30:12 +0300 Subject: [PATCH 036/191] chore(react/ribbon): add note types --- apps/client/src/widgets/note_type.ts | 17 ++-------- apps/client/src/widgets/react/Dropdown.tsx | 5 +-- apps/client/src/widgets/react/FormList.tsx | 9 +++-- .../src/widgets/ribbon/BasicPropertiesTab.tsx | 33 +++++++++++++++---- apps/client/src/widgets/ribbon/style.css | 6 ++++ 5 files changed, 44 insertions(+), 26 deletions(-) diff --git a/apps/client/src/widgets/note_type.ts b/apps/client/src/widgets/note_type.ts index 1147d0ba6..cb1d53bb3 100644 --- a/apps/client/src/widgets/note_type.ts +++ b/apps/client/src/widgets/note_type.ts @@ -13,18 +13,10 @@ const NOT_SELECTABLE_NOTE_TYPES = NOTE_TYPES.filter((nt) => nt.reserved || nt.st const TPL = /*html*/`
- -
`; @@ -83,7 +75,7 @@ export default class NoteTypeWidget extends NoteContextAwareWidget { }); } else { this.$noteTypeDropdown.append('
'); - $typeLink = $('').attr("data-note-type", noteType.type).append('✓ ').append($("").text(noteType.title)); + $typeLink = $('').attr("data-note-type", noteType.type).append('✓ ').append($("").text()); } if (this.note.type === noteType.type) { @@ -93,15 +85,10 @@ export default class NoteTypeWidget extends NoteContextAwareWidget { this.$noteTypeDropdown.append($typeLink); } - for (const mimeType of mimeTypesService.getMimeTypes()) { - if (!mimeType.enabled) { - continue; - } - + for (const mimeType of ) { const $mimeLink = $('') .attr("data-mime-type", mimeType.mime) .append('✓ ') - .append($("").text(mimeType.title)) .on("click", (e) => { const $link = $(e.target).closest(".dropdown-item"); diff --git a/apps/client/src/widgets/react/Dropdown.tsx b/apps/client/src/widgets/react/Dropdown.tsx index 4de382f3b..49a1ac228 100644 --- a/apps/client/src/widgets/react/Dropdown.tsx +++ b/apps/client/src/widgets/react/Dropdown.tsx @@ -11,11 +11,12 @@ interface DropdownProps { children: ComponentChildren; title?: string; dropdownContainerStyle?: CSSProperties; + dropdownContainerClassName?: string; hideToggleArrow?: boolean; disabled?: boolean; } -export default function Dropdown({ className, buttonClassName, isStatic, children, title, dropdownContainerStyle, hideToggleArrow, disabled }: DropdownProps) { +export default function Dropdown({ className, buttonClassName, isStatic, children, title, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, disabled }: DropdownProps) { const dropdownRef = useRef(null); const triggerRef = useRef(null); @@ -68,7 +69,7 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre />
diff --git a/apps/client/src/widgets/react/FormList.tsx b/apps/client/src/widgets/react/FormList.tsx index bbb994758..01f16264f 100644 --- a/apps/client/src/widgets/react/FormList.tsx +++ b/apps/client/src/widgets/react/FormList.tsx @@ -75,12 +75,13 @@ interface FormListItemOpts { title?: string; active?: boolean; badges?: FormListBadge[]; + disabled?: boolean; } -export function FormListItem({ children, icon, value, title, active, badges }: FormListItemOpts) { +export function FormListItem({ children, icon, value, title, active, badges, disabled }: FormListItemOpts) { return ( @@ -104,3 +105,7 @@ export function FormListHeader({ text }: FormListHeaderOpts) { ) } + +export function FormDivider() { + return
; +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx index 865898041..e24bec3a8 100644 --- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx +++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx @@ -1,8 +1,10 @@ import { useCallback, useMemo } from "preact/hooks"; import Dropdown from "../react/Dropdown"; import { NOTE_TYPES } from "../../services/note_types"; -import { FormListBadge, FormListItem } from "../react/FormList"; +import { FormDivider, FormListBadge, FormListItem } from "../react/FormList"; import { t } from "../../services/i18n"; +import { useTriliumOption } from "../react/hooks"; +import mime_types from "../../services/mime_types"; export default function BasicPropertiesTab() { return ( @@ -14,9 +16,11 @@ export default function BasicPropertiesTab() { function NoteTypeWidget() { const noteTypes = useMemo(() => NOTE_TYPES.filter((nt) => !nt.reserved && !nt.static), []); + const [ codeNotesMimeTypes ] = useTriliumOption("codeNotesMimeTypes"); + const mimeTypes = useMemo(() => mime_types.getMimeTypes().filter(mimeType => mimeType.enabled), [ codeNotesMimeTypes ]); return ( - + {noteTypes.map(noteType => { const badges: FormListBadge[] = []; if (noteType.isNew) { @@ -31,12 +35,27 @@ function NoteTypeWidget() { }); } - return ( - {noteType.title} - ); + if (noteType.type !== "code") { + return ( + {noteType.title} + ); + } else { + return ( + <> + + + {noteType.title} + + + ) + } })} + + {mimeTypes.map(mimeType => ( + {mimeType.title} + ))} ) } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css index 93190578e..5f38712ad 100644 --- a/apps/client/src/widgets/ribbon/style.css +++ b/apps/client/src/widgets/ribbon/style.css @@ -114,4 +114,10 @@ .note-language-container { display: flex; align-items: center; +} + +.note-type-dropdown { + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } \ No newline at end of file From c0beab8a5db7574d3795adbaf565d34221308f4f Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 20:38:19 +0300 Subject: [PATCH 037/191] chore(react/ribbon): display current note type --- apps/client/src/widgets/note_type.ts | 15 +-- apps/client/src/widgets/react/Dropdown.tsx | 10 +- .../src/widgets/ribbon/BasicPropertiesTab.tsx | 98 ++++++++++++------- .../ribbon_widgets/basic_properties.ts | 2 +- 4 files changed, 70 insertions(+), 55 deletions(-) diff --git a/apps/client/src/widgets/note_type.ts b/apps/client/src/widgets/note_type.ts index cb1d53bb3..fe45fa233 100644 --- a/apps/client/src/widgets/note_type.ts +++ b/apps/client/src/widgets/note_type.ts @@ -14,8 +14,7 @@ const NOT_SELECTABLE_NOTE_TYPES = NOTE_TYPES.filter((nt) => nt.reserved || nt.st const TPL = /*html*/`
`; @@ -36,7 +35,6 @@ export default class NoteTypeWidget extends NoteContextAwareWidget { this.$noteTypeDropdown = this.$widget.find(".note-type-dropdown"); this.$noteTypeButton = this.$widget.find(".note-type-button"); - this.$noteTypeDesc = this.$widget.find(".note-type-desc"); this.$widget.on("click", ".dropdown-item", () => this.dropdown.toggle()); } @@ -105,18 +103,7 @@ export default class NoteTypeWidget extends NoteContextAwareWidget { } } - async findTypeTitle(type: NoteType, mime: string) { - if (type === "code") { - const mimeTypes = mimeTypesService.getMimeTypes(); - const found = mimeTypes.find((mt) => mt.mime === mime); - return found ? found.title : mime; - } else { - const noteType = NOTE_TYPES.find((nt) => nt.type === type); - - return noteType ? noteType.title : type; - } - } async save(type: NoteType, mime?: string) { if (type === this.note?.type && mime === this.note?.mime) { diff --git a/apps/client/src/widgets/react/Dropdown.tsx b/apps/client/src/widgets/react/Dropdown.tsx index 49a1ac228..2578aec31 100644 --- a/apps/client/src/widgets/react/Dropdown.tsx +++ b/apps/client/src/widgets/react/Dropdown.tsx @@ -14,9 +14,10 @@ interface DropdownProps { dropdownContainerClassName?: string; hideToggleArrow?: boolean; disabled?: boolean; + text?: ComponentChildren; } -export default function Dropdown({ className, buttonClassName, isStatic, children, title, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, disabled }: DropdownProps) { +export default function Dropdown({ className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, disabled }: DropdownProps) { const dropdownRef = useRef(null); const triggerRef = useRef(null); @@ -56,7 +57,7 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre return (
NOTE_TYPES.filter((nt) => !nt.reserved && !nt.static), []); const [ codeNotesMimeTypes ] = useTriliumOption("codeNotesMimeTypes"); const mimeTypes = useMemo(() => mime_types.getMimeTypes().filter(mimeType => mimeType.enabled), [ codeNotesMimeTypes ]); + + const { note } = useNoteContext(); + const type = useNoteProperty(note, "type") ?? undefined; + const mime = useNoteProperty(note, "mime"); return ( - - {noteTypes.map(noteType => { - const badges: FormListBadge[] = []; - if (noteType.isNew) { - badges.push({ - className: "new-note-type-badge", - text: t("note_types.new-feature") - }); - } - if (noteType.isBeta) { - badges.push({ - text: t("note_types.beta-feature") - }); - } + <> + {t("basic_properties.note_type")}:   + {findTypeTitle(type, mime)}} + > + {noteTypes.map(noteType => { + const badges: FormListBadge[] = []; + if (noteType.isNew) { + badges.push({ + className: "new-note-type-badge", + text: t("note_types.new-feature") + }); + } + if (noteType.isBeta) { + badges.push({ + text: t("note_types.beta-feature") + }); + } - if (noteType.type !== "code") { - return ( - {noteType.title} - ); - } else { - return ( - <> - - - {noteType.title} - - - ) - } - })} + if (noteType.type !== "code") { + return ( + {noteType.title} + ); + } else { + return ( + <> + + + {noteType.title} + + + ) + } + })} - {mimeTypes.map(mimeType => ( - {mimeType.title} - ))} - + {mimeTypes.map(mimeType => ( + {mimeType.title} + ))} + + ) +} + +function findTypeTitle(type?: NoteType, mime?: string) { + if (type === "code") { + const mimeTypes = mime_types.getMimeTypes(); + const found = mimeTypes.find((mt) => mt.mime === mime); + + return found ? found.title : mime; + } else { + const noteType = NOTE_TYPES.find((nt) => nt.type === type); + + return noteType ? noteType.title : type; + } } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts index 603dee60f..e5f2ca8a2 100644 --- a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts +++ b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts @@ -11,7 +11,7 @@ import NoteLanguageWidget from "../note_language.js"; const TPL = /*html*/`
- ${t("basic_properties.note_type")}:   +
From f45da049b9243ad80bbd1c5ccf23bfbd38e6f421 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 20:56:37 +0300 Subject: [PATCH 038/191] chore(react/ribbon): change note type --- apps/client/src/widgets/note_type.ts | 97 ------------------- apps/client/src/widgets/react/FormList.tsx | 9 +- .../src/widgets/ribbon/BasicPropertiesTab.tsx | 58 ++++++++--- .../ribbon_widgets/basic_properties.ts | 4 - 4 files changed, 51 insertions(+), 117 deletions(-) diff --git a/apps/client/src/widgets/note_type.ts b/apps/client/src/widgets/note_type.ts index fe45fa233..4231ac979 100644 --- a/apps/client/src/widgets/note_type.ts +++ b/apps/client/src/widgets/note_type.ts @@ -11,14 +11,6 @@ import type FNote from "../entities/fnote.js"; const NOT_SELECTABLE_NOTE_TYPES = NOTE_TYPES.filter((nt) => nt.reserved || nt.static).map((nt) => nt.type); -const TPL = /*html*/` -
- -
-`; - export default class NoteTypeWidget extends NoteContextAwareWidget { private dropdown!: Dropdown; @@ -47,93 +39,4 @@ export default class NoteTypeWidget extends NoteContextAwareWidget { this.dropdown.hide(); } - /** the actual body is rendered lazily on note-type button click */ - async renderDropdown() { - this.$noteTypeDropdown.empty(); - - if (!this.note) { - return; - } - - for (const noteType of ) { - let $typeLink: JQuery; - - if (noteType.type !== "code") { - $typeLink = $('') - .attr("data-note-type", noteType.type) - .append('✓ ') - .append($title) - .on("click", (e) => { - const type = $typeLink.attr("data-note-type"); - const noteType = NOTE_TYPES.find((nt) => nt.type === type); - - if (noteType) { - this.save(noteType.type, noteType.mime); - } - }); - } else { - this.$noteTypeDropdown.append('
'); - $typeLink = $('').attr("data-note-type", noteType.type).append('✓ ').append($("").text()); - } - - if (this.note.type === noteType.type) { - $typeLink.addClass("selected"); - } - - this.$noteTypeDropdown.append($typeLink); - } - - for (const mimeType of ) { - const $mimeLink = $('') - .attr("data-mime-type", mimeType.mime) - .append('✓ ') - .on("click", (e) => { - const $link = $(e.target).closest(".dropdown-item"); - - this.save("code", $link.attr("data-mime-type") ?? ""); - }); - - if (this.note.type === "code" && this.note.mime === mimeType.mime) { - $mimeLink.addClass("selected"); - - this.$noteTypeDesc.text(mimeType.title); - } - - this.$noteTypeDropdown.append($mimeLink); - } - } - - - - async save(type: NoteType, mime?: string) { - if (type === this.note?.type && mime === this.note?.mime) { - return; - } - - if (type !== this.note?.type && !(await this.confirmChangeIfContent())) { - return; - } - - await server.put(`notes/${this.noteId}/type`, { type, mime }); - } - - async confirmChangeIfContent() { - if (!this.note) { - return; - } - - const blob = await this.note.getBlob(); - - if (!blob?.content || !blob.content.trim().length) { - return true; - } - - return await dialogService.confirm(t("note_types.confirm-change")); - } - - async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { - if (loadResults.isNoteReloaded(this.noteId)) { - this.refresh(); - } - } } diff --git a/apps/client/src/widgets/react/FormList.tsx b/apps/client/src/widgets/react/FormList.tsx index 01f16264f..ff0da091a 100644 --- a/apps/client/src/widgets/react/FormList.tsx +++ b/apps/client/src/widgets/react/FormList.tsx @@ -76,14 +76,21 @@ interface FormListItemOpts { active?: boolean; badges?: FormListBadge[]; disabled?: boolean; + checked?: boolean; + onClick?: () => void; } -export function FormListItem({ children, icon, value, title, active, badges, disabled }: FormListItemOpts) { +export function FormListItem({ children, icon, value, title, active, badges, disabled, checked, onClick }: FormListItemOpts) { + if (checked) { + icon = "bx bx-check"; + } + return (   {children} diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx index 7e18f49ba..dc16ba17b 100644 --- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx +++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx @@ -1,4 +1,4 @@ -import { useMemo } from "preact/hooks"; +import { useCallback, useMemo } from "preact/hooks"; import Dropdown from "../react/Dropdown"; import { NOTE_TYPES } from "../../services/note_types"; import { FormDivider, FormListBadge, FormListItem } from "../react/FormList"; @@ -6,6 +6,8 @@ import { t } from "../../services/i18n"; import { useNoteContext, useNoteProperty, useTriliumOption } from "../react/hooks"; import mime_types from "../../services/mime_types"; import { NoteType } from "@triliumnext/commons"; +import server from "../../services/server"; +import dialog from "../../services/dialog"; export default function BasicPropertiesTab() { return ( @@ -21,53 +23,79 @@ function NoteTypeWidget() { const mimeTypes = useMemo(() => mime_types.getMimeTypes().filter(mimeType => mimeType.enabled), [ codeNotesMimeTypes ]); const { note } = useNoteContext(); - const type = useNoteProperty(note, "type") ?? undefined; - const mime = useNoteProperty(note, "mime"); + const currentNoteType = useNoteProperty(note, "type") ?? undefined; + const currentNoteMime = useNoteProperty(note, "mime"); + + const changeNoteType = useCallback(async (type: NoteType, mime?: string) => { + if (!note || (type === currentNoteType && mime === currentNoteMime)) { + return; + } + + // Confirm change if the note already has a content. + if (type !== currentNoteType) { + const blob = await note.getBlob(); + + if (blob?.content && blob.content.trim().length && + !await (dialog.confirm(t("note_types.confirm-change")))) { + return; + } + } + + await server.put(`notes/${note.noteId}/type`, { type, mime }); + }, [ note, currentNoteType, currentNoteMime ]); return ( - <> +
{t("basic_properties.note_type")}:   {findTypeTitle(type, mime)}} + text={{findTypeTitle(currentNoteType, currentNoteMime)}} > - {noteTypes.map(noteType => { + {noteTypes.map(({ isNew, isBeta, type, mime, title }) => { const badges: FormListBadge[] = []; - if (noteType.isNew) { + if (isNew) { badges.push({ className: "new-note-type-badge", text: t("note_types.new-feature") }); } - if (noteType.isBeta) { + if (isBeta) { badges.push({ text: t("note_types.beta-feature") }); } - if (noteType.type !== "code") { + const checked = (type === currentNoteType); + if (type !== "code") { return ( {noteType.title} + onClick={() => changeNoteType(type, mime)} + >{title} ); } else { return ( <> - - {noteType.title} + + {title} ) } })} - {mimeTypes.map(mimeType => ( - {mimeType.title} + {mimeTypes.map(({ title, mime }) => ( + changeNoteType("code", mime)}> + {title} + ))} - +
) } diff --git a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts index e5f2ca8a2..1a59f3d48 100644 --- a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts +++ b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts @@ -10,10 +10,6 @@ import type FNote from "../../entities/fnote.js"; import NoteLanguageWidget from "../note_language.js"; const TPL = /*html*/` -
- -
-
From 5945f2860a3a36191812206d5367972893cb95c5 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 21:01:57 +0300 Subject: [PATCH 039/191] chore(react/ribbon): finalize note type selection --- apps/client/src/widgets/note_type.ts | 42 ------------------- .../src/widgets/ribbon/BasicPropertiesTab.tsx | 4 +- packages/commons/src/lib/rows.ts | 3 +- 3 files changed, 5 insertions(+), 44 deletions(-) delete mode 100644 apps/client/src/widgets/note_type.ts diff --git a/apps/client/src/widgets/note_type.ts b/apps/client/src/widgets/note_type.ts deleted file mode 100644 index 4231ac979..000000000 --- a/apps/client/src/widgets/note_type.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { Dropdown } from "bootstrap"; -import { NOTE_TYPES } from "../services/note_types.js"; -import { t } from "../services/i18n.js"; -import dialogService from "../services/dialog.js"; -import mimeTypesService from "../services/mime_types.js"; -import NoteContextAwareWidget from "./note_context_aware_widget.js"; -import server from "../services/server.js"; -import type { EventData } from "../components/app_context.js"; -import type { NoteType } from "../entities/fnote.js"; -import type FNote from "../entities/fnote.js"; - -const NOT_SELECTABLE_NOTE_TYPES = NOTE_TYPES.filter((nt) => nt.reserved || nt.static).map((nt) => nt.type); - -export default class NoteTypeWidget extends NoteContextAwareWidget { - - private dropdown!: Dropdown; - private $noteTypeDropdown!: JQuery; - private $noteTypeButton!: JQuery; - private $noteTypeDesc!: JQuery; - - doRender() { - this.$widget = $(TPL); - - this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")[0]); - - this.$widget.on("show.bs.dropdown", () => this.renderDropdown()); - - this.$noteTypeDropdown = this.$widget.find(".note-type-dropdown"); - this.$noteTypeButton = this.$widget.find(".note-type-button"); - - this.$widget.on("click", ".dropdown-item", () => this.dropdown.toggle()); - } - - async refreshWithNote(note: FNote) { - this.$noteTypeButton.prop("disabled", () => NOT_SELECTABLE_NOTE_TYPES.includes(note.type)); - - this.$noteTypeDesc.text(await this.findTypeTitle(note.type, note.mime)); - - this.dropdown.hide(); - } - -} diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx index dc16ba17b..fe10d1fde 100644 --- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx +++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx @@ -21,6 +21,7 @@ function NoteTypeWidget() { const noteTypes = useMemo(() => NOTE_TYPES.filter((nt) => !nt.reserved && !nt.static), []); const [ codeNotesMimeTypes ] = useTriliumOption("codeNotesMimeTypes"); const mimeTypes = useMemo(() => mime_types.getMimeTypes().filter(mimeType => mimeType.enabled), [ codeNotesMimeTypes ]); + const notSelectableNoteTypes = useMemo(() => NOTE_TYPES.filter((nt) => nt.reserved || nt.static).map((nt) => nt.type), []); const { note } = useNoteContext(); const currentNoteType = useNoteProperty(note, "type") ?? undefined; @@ -50,6 +51,7 @@ function NoteTypeWidget() { {findTypeTitle(currentNoteType, currentNoteMime)}} + disabled={notSelectableNoteTypes.includes(currentNoteType ?? "text")} > {noteTypes.map(({ isNew, isBeta, type, mime, title }) => { const badges: FormListBadge[] = []; @@ -99,7 +101,7 @@ function NoteTypeWidget() { ) } -function findTypeTitle(type?: NoteType, mime?: string) { +function findTypeTitle(type?: NoteType, mime?: string | null) { if (type === "code") { const mimeTypes = mime_types.getMimeTypes(); const found = mimeTypes.find((mt) => mt.mime === mime); diff --git a/packages/commons/src/lib/rows.ts b/packages/commons/src/lib/rows.ts index 8bf64b275..9bb9d11d5 100644 --- a/packages/commons/src/lib/rows.ts +++ b/packages/commons/src/lib/rows.ts @@ -119,7 +119,8 @@ export const ALLOWED_NOTE_TYPES = [ "book", "webView", "code", - "mindMap" + "mindMap", + "aiChat" ] as const; export type NoteType = (typeof ALLOWED_NOTE_TYPES)[number]; From 1964fb90d59b55e3fcb059c322304c7a7a61d61f Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 21:24:01 +0300 Subject: [PATCH 040/191] feat(react/ribbon): port toggle protected note --- .../src/widgets/protected_note_switch.ts | 39 ----- apps/client/src/widgets/react/FormToggle.css | 98 ++++++++++++ apps/client/src/widgets/react/FormToggle.tsx | 47 ++++++ .../src/widgets/ribbon/BasicPropertiesTab.tsx | 28 +++- .../ribbon_widgets/basic_properties.ts | 4 - apps/client/src/widgets/switch.ts | 149 ------------------ 6 files changed, 169 insertions(+), 196 deletions(-) delete mode 100644 apps/client/src/widgets/protected_note_switch.ts create mode 100644 apps/client/src/widgets/react/FormToggle.css create mode 100644 apps/client/src/widgets/react/FormToggle.tsx diff --git a/apps/client/src/widgets/protected_note_switch.ts b/apps/client/src/widgets/protected_note_switch.ts deleted file mode 100644 index a65f4db31..000000000 --- a/apps/client/src/widgets/protected_note_switch.ts +++ /dev/null @@ -1,39 +0,0 @@ -import type { EventData } from "../components/app_context.js"; -import type FNote from "../entities/fnote.js"; -import { t } from "../services/i18n.js"; -import protectedSessionService from "../services/protected_session.js"; -import SwitchWidget from "./switch.js"; - -export default class ProtectedNoteSwitchWidget extends SwitchWidget { - doRender() { - super.doRender(); - - this.switchOnName = t("protect_note.toggle-on"); - this.switchOnTooltip = t("protect_note.toggle-on-hint"); - - this.switchOffName = t("protect_note.toggle-off"); - this.switchOffTooltip = t("protect_note.toggle-off-hint"); - } - - switchOn() { - if (this.noteId) { - protectedSessionService.protectNote(this.noteId, true, false); - } - } - - switchOff() { - if (this.noteId) { - protectedSessionService.protectNote(this.noteId, false, false); - } - } - - async refreshWithNote(note: FNote) { - this.isToggled = note.isProtected; - } - - entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { - if (loadResults.isNoteReloaded(this.noteId)) { - this.refresh(); - } - } -} diff --git a/apps/client/src/widgets/react/FormToggle.css b/apps/client/src/widgets/react/FormToggle.css new file mode 100644 index 000000000..f727bc5ff --- /dev/null +++ b/apps/client/src/widgets/react/FormToggle.css @@ -0,0 +1,98 @@ +.switch-widget { + --switch-track-width: 50px; + --switch-track-height: 24px; + --switch-off-track-background: var(--more-accented-background-color); + --switch-on-track-background: var(--main-text-color); + + --switch-thumb-width: 16px; + --switch-thumb-height: 16px; + --switch-off-thumb-background: var(--main-background-color); + --switch-on-thumb-background: var(--main-background-color); + + display: flex; + align-items: center; +} + +/* The track of the toggle switch */ + +.switch-widget .switch-button { + display: block; + position: relative; + margin-left: 8px; + width: var(--switch-track-width); + height: var(--switch-track-height); + border-radius: 24px; + background-color: var(--switch-off-track-background); + transition: background 200ms ease-in; +} + +.switch-widget .switch-button.on { + background: var(--switch-on-track-background); + transition: background 100ms ease-out; +} + +/* The thumb of the toggle switch */ + +.switch-widget .switch-button:after { + --y: calc((var(--switch-track-height) - var(--switch-thumb-height)) / 2); + --x: var(--y); + + content: ""; + position: absolute; + top: 0; + left: 0; + width: var(--switch-thumb-width); + height: var(--switch-thumb-height); + background-color: var(--switch-off-thumb-background); + border-radius: 50%; + transform: translate(var(--x), var(--y)); + transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), + background 200ms ease-out; +} + +.switch-widget .switch-button.on:after { + --x: calc(var(--switch-track-width) - var(--switch-thumb-width) - var(--y)); + + background: var(--switch-on-thumb-background); + transition: transform 200ms cubic-bezier(0.64, 0, 0.78, 0), + background 100ms ease-in; +} + + +.switch-widget .switch-button input[type="checkbox"] { + /* A hidden check box for accesibility purposes */ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; +} + +/* Disabled state */ +.switch-widget .switch-button:not(.disabled) input[type="checkbox"], +.switch-widget .switch-button:not(.disabled) { + cursor: pointer; +} + +.switch-widget .switch-button:has(input[type="checkbox"]:focus-visible) { + outline: 2px solid var(--button-border-color); + outline-offset: 2px; +} + +.switch-widget .switch-button.disabled { + opacity: 70%; +} + +.switch-widget .switch-help-button { + border: 0; + margin-left: 4px; + background: none; + cursor: pointer; + font-size: 1.1em; + color: var(--muted-text-color); +} + +.switch-widget .switch-help-button:hover { + color: var(--main-text-color); +} \ No newline at end of file diff --git a/apps/client/src/widgets/react/FormToggle.tsx b/apps/client/src/widgets/react/FormToggle.tsx new file mode 100644 index 000000000..a6dc2fe1d --- /dev/null +++ b/apps/client/src/widgets/react/FormToggle.tsx @@ -0,0 +1,47 @@ +import { t } from "../../services/i18n"; +import { openInAppHelpFromUrl } from "../../services/utils"; +import "./FormToggle.css"; + +interface FormToggleProps { + currentValue: boolean | null; + onChange(newValue: boolean): void; + switchOnName: string; + switchOnTooltip: string; + switchOffName: string; + switchOffTooltip: string; + helpPage?: string; +} + +export default function FormToggle({ currentValue, helpPage, switchOnName, switchOnTooltip, switchOffName, switchOffTooltip, onChange }: FormToggleProps) { + return ( +
+ { currentValue ? switchOffName : switchOnName } + + + + { helpPage && ( +
+ ) +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx index fe10d1fde..5c7ab1937 100644 --- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx +++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx @@ -8,22 +8,27 @@ import mime_types from "../../services/mime_types"; import { NoteType } from "@triliumnext/commons"; import server from "../../services/server"; import dialog from "../../services/dialog"; +import FormToggle from "../react/FormToggle"; +import FNote from "../../entities/fnote"; +import protected_session from "../../services/protected_session"; export default function BasicPropertiesTab() { + const { note } = useNoteContext(); + return ( -
- +
+ +
); } -function NoteTypeWidget() { +function NoteTypeWidget({ note }: { note?: FNote | null }) { const noteTypes = useMemo(() => NOTE_TYPES.filter((nt) => !nt.reserved && !nt.static), []); const [ codeNotesMimeTypes ] = useTriliumOption("codeNotesMimeTypes"); const mimeTypes = useMemo(() => mime_types.getMimeTypes().filter(mimeType => mimeType.enabled), [ codeNotesMimeTypes ]); const notSelectableNoteTypes = useMemo(() => NOTE_TYPES.filter((nt) => nt.reserved || nt.static).map((nt) => nt.type), []); - const { note } = useNoteContext(); const currentNoteType = useNoteProperty(note, "type") ?? undefined; const currentNoteMime = useNoteProperty(note, "mime"); @@ -101,6 +106,21 @@ function NoteTypeWidget() { ) } +function ProtectedNoteSwitch({ note }: { note?: FNote | null }) { + const isProtected = useNoteProperty(note, "isProtected"); + + return ( +
+ note && protected_session.protectNote(note.noteId, shouldProtect, false)} + switchOnName={t("protect_note.toggle-on")} switchOnTooltip={t("protect_note.toggle-on-hint")} + switchOffName={t("protect_note.toggle-off")} switchOffTooltip={t("protect_note.toggle-off-hint")} + /> +
+ ) +} + function findTypeTitle(type?: NoteType, mime?: string | null) { if (type === "code") { const mimeTypes = mime_types.getMimeTypes(); diff --git a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts index 1a59f3d48..14fb7468f 100644 --- a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts +++ b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts @@ -10,8 +10,6 @@ import type FNote from "../../entities/fnote.js"; import NoteLanguageWidget from "../note_language.js"; const TPL = /*html*/` -
-
${t("basic_properties.editable")}:  
@@ -40,8 +38,6 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget { constructor() { super(); - this.noteTypeWidget = new NoteTypeWidget().contentSized(); - this.protectedNoteSwitchWidget = new ProtectedNoteSwitchWidget().contentSized(); this.editabilitySelectWidget = new EditabilitySelectWidget().contentSized(); this.bookmarkSwitchWidget = new BookmarkSwitchWidget().contentSized(); this.sharedSwitchWidget = new SharedSwitchWidget().contentSized(); diff --git a/apps/client/src/widgets/switch.ts b/apps/client/src/widgets/switch.ts index 166165fc1..8c521fb99 100644 --- a/apps/client/src/widgets/switch.ts +++ b/apps/client/src/widgets/switch.ts @@ -4,162 +4,22 @@ import NoteContextAwareWidget from "./note_context_aware_widget.js"; const TPL = /*html*/`
-
- - - - - -
-
`; export default class SwitchWidget extends NoteContextAwareWidget { - private $switchButton!: JQuery; - private $switchToggle!: JQuery; - private $switchName!: JQuery; - protected $helpButton!: JQuery; - - protected switchOnName = ""; - protected switchOnTooltip = ""; - - protected switchOffName = ""; - protected switchOffTooltip = ""; - - protected disabledTooltip = ""; - - private currentState = false; - doRender() { this.$widget = $(TPL); this.$switchButton = this.$widget.find(".switch-button"); this.$switchToggle = this.$widget.find(".switch-toggle"); - this.$switchToggle.on("click", (e) => { - this.toggle(!this.currentState); - - // Prevent the check box from being toggled by the click, the value of the check box - // should be set exclusively by the 'isToggled' property setter. - e.preventDefault(); - }); - this.$switchName = this.$widget.find(".switch-name"); this.$helpButton = this.$widget.find(".switch-help-button"); } - toggle(state: boolean) { - if (state) { - this.switchOn(); - } else { - this.switchOff(); - } - } - switchOff() {} switchOn() {} @@ -172,15 +32,6 @@ export default class SwitchWidget extends NoteContextAwareWidget { this.currentState = !!state; this.$switchButton.toggleClass("on", this.currentState); - this.$switchToggle.prop("checked", this.currentState); - - if (this.currentState) { - this.$switchName.text(this.switchOffName); - this.$switchButton.attr("title", this.switchOffTooltip); - } else { - this.$switchName.text(this.switchOnName); - this.$switchButton.attr("title", this.switchOnTooltip); - } } /** Gets or sets whether the switch is enabled. */ From f772f59d7c5f6aac904d416603fbf21a2c384122 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 22:19:26 +0300 Subject: [PATCH 041/191] feat(react/ribbon): port editability select --- apps/client/src/widgets/editability_select.ts | 120 ------------------ .../src/widgets/react/FormDropdownList.tsx | 30 +++++ apps/client/src/widgets/react/FormList.css | 5 + apps/client/src/widgets/react/FormList.tsx | 21 ++- apps/client/src/widgets/react/hooks.tsx | 28 +++- .../src/widgets/ribbon/BasicPropertiesTab.tsx | 43 ++++++- .../ribbon_widgets/basic_properties.ts | 8 -- 7 files changed, 117 insertions(+), 138 deletions(-) delete mode 100644 apps/client/src/widgets/editability_select.ts create mode 100644 apps/client/src/widgets/react/FormDropdownList.tsx create mode 100644 apps/client/src/widgets/react/FormList.css diff --git a/apps/client/src/widgets/editability_select.ts b/apps/client/src/widgets/editability_select.ts deleted file mode 100644 index e7127ca8a..000000000 --- a/apps/client/src/widgets/editability_select.ts +++ /dev/null @@ -1,120 +0,0 @@ -import attributeService from "../services/attributes.js"; -import NoteContextAwareWidget from "./note_context_aware_widget.js"; -import { t } from "../services/i18n.js"; -import type FNote from "../entities/fnote.js"; -import type { EventData } from "../components/app_context.js"; -import { Dropdown } from "bootstrap"; - -type Editability = "auto" | "readOnly" | "autoReadOnlyDisabled"; - -const TPL = /*html*/` -
- - -
- - ✓ -
- ${t("editability_select.auto")} -
${t("editability_select.note_is_editable")}
-
- - - ✓ -
- ${t("editability_select.read_only")} -
${t("editability_select.note_is_read_only")}
-
- - - ✓ -
- ${t("editability_select.always_editable")} -
${t("editability_select.note_is_always_editable")}
-
- -
-
-`; - -export default class EditabilitySelectWidget extends NoteContextAwareWidget { - - private dropdown!: Dropdown; - private $editabilityActiveDesc!: JQuery; - - doRender() { - this.$widget = $(TPL); - - this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")[0]); - - this.$editabilityActiveDesc = this.$widget.find(".editability-active-desc"); - - this.$widget.on("click", ".dropdown-item", async (e) => { - this.dropdown.toggle(); - - const editability = $(e.target).closest("[data-editability]").attr("data-editability"); - - if (!this.note || !this.noteId) { - return; - } - - for (const ownedAttr of this.note.getOwnedLabels()) { - if (["readOnly", "autoReadOnlyDisabled"].includes(ownedAttr.name)) { - await attributeService.removeAttributeById(this.noteId, ownedAttr.attributeId); - } - } - - if (editability && editability !== "auto") { - await attributeService.addLabel(this.noteId, editability); - } - }); - } - - async refreshWithNote(note: FNote) { - let editability: Editability = "auto"; - - if (this.note?.isLabelTruthy("readOnly")) { - editability = "readOnly"; - } else if (this.note?.isLabelTruthy("autoReadOnlyDisabled")) { - editability = "autoReadOnlyDisabled"; - } - - const labels = { - auto: t("editability_select.auto"), - readOnly: t("editability_select.read_only"), - autoReadOnlyDisabled: t("editability_select.always_editable") - }; - - this.$widget.find(".dropdown-item").removeClass("selected"); - this.$widget.find(`.dropdown-item[data-editability='${editability}']`).addClass("selected"); - - this.$editabilityActiveDesc.text(labels[editability]); - } - - entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { - if (loadResults.getAttributeRows().find((attr) => attr.noteId === this.noteId)) { - this.refresh(); - } - } -} diff --git a/apps/client/src/widgets/react/FormDropdownList.tsx b/apps/client/src/widgets/react/FormDropdownList.tsx new file mode 100644 index 000000000..4bab06948 --- /dev/null +++ b/apps/client/src/widgets/react/FormDropdownList.tsx @@ -0,0 +1,30 @@ +import Dropdown from "./Dropdown"; +import { FormListItem } from "./FormList"; + +interface FormDropdownList { + values: T[]; + keyProperty: keyof T; + titleProperty: keyof T; + descriptionProperty?: keyof T; + currentValue: string; + onChange(newValue: string): void; +} + +export default function FormDropdownList({ values, keyProperty, titleProperty, descriptionProperty, currentValue, onChange }: FormDropdownList) { + const currentValueData = values.find(value => value[keyProperty] === currentValue); + + return ( + + {values.map(item => ( + onChange(item[keyProperty] as string)} + checked={currentValue === item[keyProperty]} + description={descriptionProperty && item[descriptionProperty] as string} + selected={currentValue === item[keyProperty]} + > + {item[titleProperty] as string} + + ))} + + ) +} \ No newline at end of file diff --git a/apps/client/src/widgets/react/FormList.css b/apps/client/src/widgets/react/FormList.css new file mode 100644 index 000000000..62631b131 --- /dev/null +++ b/apps/client/src/widgets/react/FormList.css @@ -0,0 +1,5 @@ +.dropdown-item .description { + font-size: small; + color: var(--muted-text-color); + white-space: normal; +} \ No newline at end of file diff --git a/apps/client/src/widgets/react/FormList.tsx b/apps/client/src/widgets/react/FormList.tsx index ff0da091a..42aeb93d5 100644 --- a/apps/client/src/widgets/react/FormList.tsx +++ b/apps/client/src/widgets/react/FormList.tsx @@ -2,6 +2,7 @@ import { Dropdown as BootstrapDropdown } from "bootstrap"; import { ComponentChildren } from "preact"; import Icon from "./Icon"; import { useEffect, useMemo, useRef, type CSSProperties } from "preact/compat"; +import "./FormList.css"; interface FormListOpts { children: ComponentChildren; @@ -76,27 +77,33 @@ interface FormListItemOpts { active?: boolean; badges?: FormListBadge[]; disabled?: boolean; - checked?: boolean; + checked?: boolean | null; + selected?: boolean; onClick?: () => void; + description?: string; + className?: string; } -export function FormListItem({ children, icon, value, title, active, badges, disabled, checked, onClick }: FormListItemOpts) { +export function FormListItem({ children, icon, value, title, active, badges, disabled, checked, onClick, description, selected }: FormListItemOpts) { if (checked) { icon = "bx bx-check"; } return (   - {children} - {badges && badges.map(({ className, text }) => ( - {text} - ))} +
+ {children} + {badges && badges.map(({ className, text }) => ( + {text} + ))} + {description &&
{description}
} +
); } diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index bc520dc0e..7c8257ead 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -314,12 +314,12 @@ export function useNoteProperty(note: FNote | null | unde } export function useNoteLabel(note: FNote | undefined | null, labelName: string): [string | null | undefined, (newValue: string) => void] { - const [ labelValue, setNoteValue ] = useState(note?.getLabelValue(labelName)); + const [ labelValue, setLabelValue ] = useState(note?.getLabelValue(labelName)); useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { for (const attr of loadResults.getAttributeRows()) { if (attr.type === "label" && attr.name === labelName && attributes.isAffecting(attr, note)) { - setNoteValue(attr.value ?? null); + setLabelValue(attr.value ?? null); } } }); @@ -334,4 +334,28 @@ export function useNoteLabel(note: FNote | undefined | null, labelName: string): labelValue, setter ] as const; +} + +export function useNoteLabelBoolean(note: FNote | undefined | null, labelName: string): [ boolean | null | undefined, (newValue: boolean) => void] { + const [ labelValue, setLabelValue ] = useState(note?.hasLabel(labelName)); + + useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { + for (const attr of loadResults.getAttributeRows()) { + if (attr.type === "label" && attr.name === labelName && attributes.isAffecting(attr, note)) { + setLabelValue(!attr.isDeleted); + } + } + }); + + const setter = useCallback((value: boolean) => { + if (note) { + if (value) { + attributes.setLabel(note.noteId, labelName, ""); + } else { + attributes.removeOwnedLabelByName(note, labelName); + } + } + }, [note]); + + return [ labelValue, setter ] as const; } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx index 5c7ab1937..84de1b425 100644 --- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx +++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx @@ -3,7 +3,7 @@ import Dropdown from "../react/Dropdown"; import { NOTE_TYPES } from "../../services/note_types"; import { FormDivider, FormListBadge, FormListItem } from "../react/FormList"; import { t } from "../../services/i18n"; -import { useNoteContext, useNoteProperty, useTriliumOption } from "../react/hooks"; +import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumOption } from "../react/hooks"; import mime_types from "../../services/mime_types"; import { NoteType } from "@triliumnext/commons"; import server from "../../services/server"; @@ -11,6 +11,7 @@ import dialog from "../../services/dialog"; import FormToggle from "../react/FormToggle"; import FNote from "../../entities/fnote"; import protected_session from "../../services/protected_session"; +import FormDropdownList from "../react/FormDropdownList"; export default function BasicPropertiesTab() { const { note } = useNoteContext(); @@ -19,6 +20,7 @@ export default function BasicPropertiesTab() {
+
); } @@ -121,6 +123,45 @@ function ProtectedNoteSwitch({ note }: { note?: FNote | null }) { ) } +function EditabilitySelect({ note }: { note?: FNote | null }) { + const [ readOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly"); + const [ autoReadOnlyDisabled, setAutoReadOnlyDisabled ] = useNoteLabelBoolean(note, "autoReadOnlyDisabled"); + + const options = useMemo(() => ([ + { + value: "auto", + label: t("editability_select.auto"), + description: t("editability_select.note_is_editable"), + }, + { + value: "readOnly", + label: t("editability_select.read_only"), + description: t("editability_select.note_is_read_only") + }, + { + value: "autoReadOnlyDisabled", + label: t("editability_select.always_editable"), + description: t("editability_select.note_is_always_editable") + } + ]), []); + + return ( +
+ {t("basic_properties.editable")}:   + + { + setReadOnly(editability === "readOnly"); + setAutoReadOnlyDisabled(editability === "autoReadOnlyDisabled"); + }} + /> +
+ ) +} + function findTypeTitle(type?: NoteType, mime?: string | null) { if (type === "code") { const mimeTypes = mime_types.getMimeTypes(); diff --git a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts index 14fb7468f..f80e163a8 100644 --- a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts +++ b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts @@ -10,10 +10,6 @@ import type FNote from "../../entities/fnote.js"; import NoteLanguageWidget from "../note_language.js"; const TPL = /*html*/` -
- ${t("basic_properties.editable")}:   -
-
@@ -27,8 +23,6 @@ const TPL = /*html*/` export default class BasicPropertiesWidget extends NoteContextAwareWidget { - private noteTypeWidget: NoteTypeWidget; - private protectedNoteSwitchWidget: ProtectedNoteSwitchWidget; private editabilitySelectWidget: EditabilitySelectWidget; private bookmarkSwitchWidget: BookmarkSwitchWidget; private sharedSwitchWidget: SharedSwitchWidget; @@ -45,8 +39,6 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget { this.noteLanguageWidget = new NoteLanguageWidget().contentSized(); this.child( - this.noteTypeWidget, - this.protectedNoteSwitchWidget, this.editabilitySelectWidget, this.bookmarkSwitchWidget, this.sharedSwitchWidget, From da4810672d2f302e8311ab7bc9c964b4e621813f Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 22:24:35 +0300 Subject: [PATCH 042/191] feat(react/ribbon): improve editability select --- apps/client/src/widgets/react/Dropdown.tsx | 2 +- apps/client/src/widgets/react/FormDropdownList.tsx | 8 ++++---- apps/client/src/widgets/react/FormList.css | 4 ++++ apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx | 1 + apps/client/src/widgets/ribbon/style.css | 4 ++++ 5 files changed, 14 insertions(+), 5 deletions(-) diff --git a/apps/client/src/widgets/react/Dropdown.tsx b/apps/client/src/widgets/react/Dropdown.tsx index 2578aec31..025192d74 100644 --- a/apps/client/src/widgets/react/Dropdown.tsx +++ b/apps/client/src/widgets/react/Dropdown.tsx @@ -4,7 +4,7 @@ import { CSSProperties } from "preact/compat"; import { useCallback, useEffect, useRef, useState } from "preact/hooks"; import { useUniqueName } from "./hooks"; -interface DropdownProps { +export interface DropdownProps { className?: string; buttonClassName?: string; isStatic?: boolean; diff --git a/apps/client/src/widgets/react/FormDropdownList.tsx b/apps/client/src/widgets/react/FormDropdownList.tsx index 4bab06948..08d607a8c 100644 --- a/apps/client/src/widgets/react/FormDropdownList.tsx +++ b/apps/client/src/widgets/react/FormDropdownList.tsx @@ -1,7 +1,7 @@ -import Dropdown from "./Dropdown"; +import Dropdown, { DropdownProps } from "./Dropdown"; import { FormListItem } from "./FormList"; -interface FormDropdownList { +interface FormDropdownList extends Omit { values: T[]; keyProperty: keyof T; titleProperty: keyof T; @@ -10,11 +10,11 @@ interface FormDropdownList { onChange(newValue: string): void; } -export default function FormDropdownList({ values, keyProperty, titleProperty, descriptionProperty, currentValue, onChange }: FormDropdownList) { +export default function FormDropdownList({ values, keyProperty, titleProperty, descriptionProperty, currentValue, onChange, ...restProps }: FormDropdownList) { const currentValueData = values.find(value => value[keyProperty] === currentValue); return ( - + {values.map(item => ( onChange(item[keyProperty] as string)} diff --git a/apps/client/src/widgets/react/FormList.css b/apps/client/src/widgets/react/FormList.css index 62631b131..ae5c3340f 100644 --- a/apps/client/src/widgets/react/FormList.css +++ b/apps/client/src/widgets/react/FormList.css @@ -2,4 +2,8 @@ font-size: small; color: var(--muted-text-color); white-space: normal; +} + +.dropdown-item span.bx { + flex-shrink: 0; } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx index 84de1b425..733c2dbe2 100644 --- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx +++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx @@ -150,6 +150,7 @@ function EditabilitySelect({ note }: { note?: FNote | null }) { {t("basic_properties.editable")}:   Date: Fri, 22 Aug 2025 11:24:27 +0300 Subject: [PATCH 043/191] feat(react): port bookmark switch --- apps/client/src/widgets/bookmark_switch.ts | 54 ------------------- apps/client/src/widgets/react/FormToggle.tsx | 8 +-- .../src/widgets/ribbon/BasicPropertiesTab.tsx | 46 ++++++++++++++-- .../ribbon_widgets/basic_properties.ts | 8 --- apps/client/src/widgets/switch.ts | 3 -- packages/commons/src/lib/server_api.ts | 7 +++ 6 files changed, 53 insertions(+), 73 deletions(-) delete mode 100644 apps/client/src/widgets/bookmark_switch.ts diff --git a/apps/client/src/widgets/bookmark_switch.ts b/apps/client/src/widgets/bookmark_switch.ts deleted file mode 100644 index 93d4789aa..000000000 --- a/apps/client/src/widgets/bookmark_switch.ts +++ /dev/null @@ -1,54 +0,0 @@ -import SwitchWidget from "./switch.js"; -import server from "../services/server.js"; -import toastService from "../services/toast.js"; -import { t } from "../services/i18n.js"; -import type FNote from "../entities/fnote.js"; -import type { EventData } from "../components/app_context.js"; - -// TODO: Deduplicate -type Response = { - success: true; -} | { - success: false; - message: string; -} - -export default class BookmarkSwitchWidget extends SwitchWidget { - isEnabled() { - return ( - super.isEnabled() && - // it's not possible to bookmark root because that would clone it under bookmarks and thus create a cycle - !["root", "_hidden"].includes(this.noteId ?? "") - ); - } - - doRender() { - super.doRender(); - - this.switchOnName = t("bookmark_switch.bookmark"); - this.switchOnTooltip = t("bookmark_switch.bookmark_this_note"); - - this.switchOffName = t("bookmark_switch.bookmark"); - this.switchOffTooltip = t("bookmark_switch.remove_bookmark"); - } - - async toggle(state: boolean | null | undefined) { - const resp = await server.put(`notes/${this.noteId}/toggle-in-parent/_lbBookmarks/${!!state}`); - - if (!resp.success && "message" in resp) { - toastService.showError(resp.message); - } - } - - async refreshWithNote(note: FNote) { - const isBookmarked = !!note.getParentBranches().find((b) => b.parentNoteId === "_lbBookmarks"); - - this.isToggled = isBookmarked; - } - - entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { - if (loadResults.getBranchRows().find((b) => b.noteId === this.noteId)) { - this.refresh(); - } - } -} diff --git a/apps/client/src/widgets/react/FormToggle.tsx b/apps/client/src/widgets/react/FormToggle.tsx index a6dc2fe1d..c41ea6750 100644 --- a/apps/client/src/widgets/react/FormToggle.tsx +++ b/apps/client/src/widgets/react/FormToggle.tsx @@ -10,16 +10,17 @@ interface FormToggleProps { switchOffName: string; switchOffTooltip: string; helpPage?: string; + disabled?: boolean; } -export default function FormToggle({ currentValue, helpPage, switchOnName, switchOnTooltip, switchOffName, switchOffTooltip, onChange }: FormToggleProps) { +export default function FormToggle({ currentValue, helpPage, switchOnName, switchOnTooltip, switchOffName, switchOffTooltip, onChange, disabled }: FormToggleProps) { return (
{ currentValue ? switchOffName : switchOnName } diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx index 733c2dbe2..918d01760 100644 --- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx +++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx @@ -1,17 +1,18 @@ -import { useCallback, useMemo } from "preact/hooks"; +import { useCallback, useEffect, useMemo, useState } from "preact/hooks"; import Dropdown from "../react/Dropdown"; import { NOTE_TYPES } from "../../services/note_types"; import { FormDivider, FormListBadge, FormListItem } from "../react/FormList"; import { t } from "../../services/i18n"; -import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumOption } from "../react/hooks"; +import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEventBeta, useTriliumOption } from "../react/hooks"; import mime_types from "../../services/mime_types"; -import { NoteType } from "@triliumnext/commons"; +import { NoteType, ToggleInParentResponse } from "@triliumnext/commons"; import server from "../../services/server"; import dialog from "../../services/dialog"; import FormToggle from "../react/FormToggle"; import FNote from "../../entities/fnote"; import protected_session from "../../services/protected_session"; import FormDropdownList from "../react/FormDropdownList"; +import toast from "../../services/toast"; export default function BasicPropertiesTab() { const { note } = useNoteContext(); @@ -21,6 +22,7 @@ export default function BasicPropertiesTab() { +
); } @@ -114,10 +116,10 @@ function ProtectedNoteSwitch({ note }: { note?: FNote | null }) { return (
note && protected_session.protectNote(note.noteId, shouldProtect, false)} switchOnName={t("protect_note.toggle-on")} switchOnTooltip={t("protect_note.toggle-on-hint")} switchOffName={t("protect_note.toggle-off")} switchOffTooltip={t("protect_note.toggle-off-hint")} + currentValue={isProtected} + onChange={(shouldProtect) => note && protected_session.protectNote(note.noteId, shouldProtect, false)} />
) @@ -163,6 +165,40 @@ function EditabilitySelect({ note }: { note?: FNote | null }) { ) } +function BookmarkSwitch({ note }: { note?: FNote | null }) { + const [ isBookmarked, setIsBookmarked ] = useState(false); + const refreshState = useCallback(() => { + const isBookmarked = note && !!note.getParentBranches().find((b) => b.parentNoteId === "_lbBookmarks"); + setIsBookmarked(!!isBookmarked); + }, [ note ]); + + useEffect(() => refreshState(), [ note ]); + useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { + if (note && loadResults.getBranchRows().find((b) => b.noteId === note.noteId)) { + refreshState(); + } + }); + + return ( +
+ { + if (!note) return; + const resp = await server.put(`notes/${note.noteId}/toggle-in-parent/_lbBookmarks/${shouldBookmark}`); + + if (!resp.success && "message" in resp) { + toast.showError(resp.message); + } + }} + disabled={["root", "_hidden"].includes(note?.noteId ?? "")} + /> +
+ ) +} + function findTypeTitle(type?: NoteType, mime?: string | null) { if (type === "code") { const mimeTypes = mime_types.getMimeTypes(); diff --git a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts index f80e163a8..e4127e0bc 100644 --- a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts +++ b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts @@ -10,8 +10,6 @@ import type FNote from "../../entities/fnote.js"; import NoteLanguageWidget from "../note_language.js"; const TPL = /*html*/` -
-
@@ -23,8 +21,6 @@ const TPL = /*html*/` export default class BasicPropertiesWidget extends NoteContextAwareWidget { - private editabilitySelectWidget: EditabilitySelectWidget; - private bookmarkSwitchWidget: BookmarkSwitchWidget; private sharedSwitchWidget: SharedSwitchWidget; private templateSwitchWidget: TemplateSwitchWidget; private noteLanguageWidget: NoteLanguageWidget; @@ -32,15 +28,11 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget { constructor() { super(); - this.editabilitySelectWidget = new EditabilitySelectWidget().contentSized(); - this.bookmarkSwitchWidget = new BookmarkSwitchWidget().contentSized(); this.sharedSwitchWidget = new SharedSwitchWidget().contentSized(); this.templateSwitchWidget = new TemplateSwitchWidget().contentSized(); this.noteLanguageWidget = new NoteLanguageWidget().contentSized(); this.child( - this.editabilitySelectWidget, - this.bookmarkSwitchWidget, this.sharedSwitchWidget, this.templateSwitchWidget, this.noteLanguageWidget); diff --git a/apps/client/src/widgets/switch.ts b/apps/client/src/widgets/switch.ts index 8c521fb99..1f5956a6e 100644 --- a/apps/client/src/widgets/switch.ts +++ b/apps/client/src/widgets/switch.ts @@ -40,9 +40,6 @@ export default class SwitchWidget extends NoteContextAwareWidget { } set canToggle(isEnabled) { - this.$switchButton.toggleClass("disabled", !isEnabled); - this.$switchToggle.attr("disabled", !isEnabled ? "disabled" : null); - if (isEnabled) { this.isToggled = this.currentState; // Reapply the correct tooltip } else { diff --git a/packages/commons/src/lib/server_api.ts b/packages/commons/src/lib/server_api.ts index e660e049c..311e45fb0 100644 --- a/packages/commons/src/lib/server_api.ts +++ b/packages/commons/src/lib/server_api.ts @@ -155,3 +155,10 @@ export interface OpenAiOrAnthropicModelResponse { type: string; }>; } + +export type ToggleInParentResponse = { + success: true; +} | { + success: false; + message: string; +} From e873cdab7e728fa1757da6f250974432bf61e819 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Aug 2025 11:42:07 +0300 Subject: [PATCH 044/191] chore(react/ribbon): fix width of editability select --- apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx index 918d01760..2b10599bd 100644 --- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx +++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx @@ -152,7 +152,7 @@ function EditabilitySelect({ note }: { note?: FNote | null }) { {t("basic_properties.editable")}:   Date: Fri, 22 Aug 2025 11:57:45 +0300 Subject: [PATCH 045/191] feat(react/ribbon): port shared switch --- .../src/widgets/ribbon/BasicPropertiesTab.tsx | 48 +++++++++++ .../ribbon_widgets/basic_properties.ts | 3 - apps/client/src/widgets/shared_switch.ts | 81 ------------------- 3 files changed, 48 insertions(+), 84 deletions(-) delete mode 100644 apps/client/src/widgets/shared_switch.ts diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx index 2b10599bd..33f28a277 100644 --- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx +++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx @@ -13,6 +13,8 @@ import FNote from "../../entities/fnote"; import protected_session from "../../services/protected_session"; import FormDropdownList from "../react/FormDropdownList"; import toast from "../../services/toast"; +import branches from "../../services/branches"; +import sync from "../../services/sync"; export default function BasicPropertiesTab() { const { note } = useNoteContext(); @@ -23,6 +25,7 @@ export default function BasicPropertiesTab() { +
); } @@ -199,6 +202,51 @@ function BookmarkSwitch({ note }: { note?: FNote | null }) { ) } +function SharedSwitch({ note }: { note?: FNote | null }) { + const [ isShared, setIsShared ] = useState(false); + const refreshState = useCallback(() => { + setIsShared(!!note?.hasAncestor("_share")); + }, [ note ]); + + useEffect(() => refreshState(), [ note ]); + useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { + if (note && loadResults.getBranchRows().find((b) => b.noteId === note.noteId)) { + refreshState(); + } + }); + + const switchShareState = useCallback(async (shouldShare: boolean) => { + if (!note) return; + + if (shouldShare) { + await branches.cloneNoteToParentNote(note.noteId, "_share"); + } else { + if (note?.getParentBranches().length === 1 && !(await dialog.confirm(t("shared_switch.shared-branch")))) { + return; + } + + const shareBranch = note?.getParentBranches().find((b) => b.parentNoteId === "_share"); + if (!shareBranch?.branchId) return; + await server.remove(`branches/${shareBranch.branchId}?taskId=no-progress-reporting`); + } + + sync.syncNow(true); + }, [ note ]); + + return ( +
+ +
+ ) +} + function findTypeTitle(type?: NoteType, mime?: string | null) { if (type === "code") { const mimeTypes = mime_types.getMimeTypes(); diff --git a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts index e4127e0bc..8a762f96c 100644 --- a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts +++ b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts @@ -10,8 +10,6 @@ import type FNote from "../../entities/fnote.js"; import NoteLanguageWidget from "../note_language.js"; const TPL = /*html*/` -
-
@@ -28,7 +26,6 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget { constructor() { super(); - this.sharedSwitchWidget = new SharedSwitchWidget().contentSized(); this.templateSwitchWidget = new TemplateSwitchWidget().contentSized(); this.noteLanguageWidget = new NoteLanguageWidget().contentSized(); diff --git a/apps/client/src/widgets/shared_switch.ts b/apps/client/src/widgets/shared_switch.ts deleted file mode 100644 index 20e954efa..000000000 --- a/apps/client/src/widgets/shared_switch.ts +++ /dev/null @@ -1,81 +0,0 @@ -import SwitchWidget from "./switch.js"; -import branchService from "../services/branches.js"; -import server from "../services/server.js"; -import utils from "../services/utils.js"; -import syncService from "../services/sync.js"; -import dialogService from "../services/dialog.js"; -import { t } from "../services/i18n.js"; -import type FNote from "../entities/fnote.js"; -import type { EventData } from "../components/app_context.js"; - -export default class SharedSwitchWidget extends SwitchWidget { - - isEnabled() { - return super.isEnabled() - && !["root", "_share", "_hidden"].includes(this.noteId ?? "") - && !this.noteId?.startsWith("_options"); - } - - doRender() { - super.doRender(); - - this.switchOnName = t("shared_switch.shared"); - this.switchOnTooltip = t("shared_switch.toggle-on-title"); - - this.switchOffName = t("shared_switch.shared"); - this.switchOffTooltip = t("shared_switch.toggle-off-title"); - - this.$helpButton.attr("data-help-page", "sharing.html").show(); - this.$helpButton.on("click", (e) => utils.openHelp($(e.target))); - } - - async switchOn() { - if (!this.noteId) { - return; - } - - await branchService.cloneNoteToParentNote(this.noteId, "_share"); - - syncService.syncNow(true); - } - - async switchOff() { - const shareBranch = this.note?.getParentBranches().find((b) => b.parentNoteId === "_share"); - - if (!shareBranch) { - return; - } - - if (this.note?.getParentBranches().length === 1) { - if (!(await dialogService.confirm(t("shared_switch.shared-branch")))) { - return; - } - } - - await server.remove(`branches/${shareBranch.branchId}?taskId=no-progress-reporting`); - - syncService.syncNow(true); - } - - async refreshWithNote(note: FNote) { - const isShared = note.hasAncestor("_share"); - const canBeUnshared = isShared && note.getParentBranches().find((b) => b.parentNoteId === "_share"); - const switchDisabled = isShared && !canBeUnshared; - - this.isToggled = isShared; - - if (switchDisabled) { - this.disabledTooltip = t("shared_switch.inherited"); - this.canToggle = false; - } else { - this.disabledTooltip = ""; - this.canToggle = true; - } - } - - entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { - if (loadResults.getBranchRows().find((b) => b.noteId === this.noteId)) { - this.refresh(); - } - } -} From c91748da15ad7078a1ac125695ff6b6a399af1f3 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Aug 2025 12:14:53 +0300 Subject: [PATCH 046/191] feat(react/ribbon): port template switch --- apps/client/src/widgets/react/hooks.tsx | 7 ++- .../src/widgets/ribbon/BasicPropertiesTab.tsx | 18 +++++++ .../ribbon_widgets/basic_properties.ts | 2 - apps/client/src/widgets/switch.ts | 8 --- apps/client/src/widgets/template_switch.ts | 52 ------------------- 5 files changed, 23 insertions(+), 64 deletions(-) delete mode 100644 apps/client/src/widgets/template_switch.ts diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 7c8257ead..1e91c475a 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -316,6 +316,7 @@ export function useNoteProperty(note: FNote | null | unde export function useNoteLabel(note: FNote | undefined | null, labelName: string): [string | null | undefined, (newValue: string) => void] { const [ labelValue, setLabelValue ] = useState(note?.getLabelValue(labelName)); + useEffect(() => setLabelValue(note?.getLabelValue(labelName) ?? null), [ note ]); useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { for (const attr of loadResults.getAttributeRows()) { if (attr.type === "label" && attr.name === labelName && attributes.isAffecting(attr, note)) { @@ -336,8 +337,10 @@ export function useNoteLabel(note: FNote | undefined | null, labelName: string): ] as const; } -export function useNoteLabelBoolean(note: FNote | undefined | null, labelName: string): [ boolean | null | undefined, (newValue: boolean) => void] { - const [ labelValue, setLabelValue ] = useState(note?.hasLabel(labelName)); +export function useNoteLabelBoolean(note: FNote | undefined | null, labelName: string): [ boolean, (newValue: boolean) => void] { + const [ labelValue, setLabelValue ] = useState(!!note?.hasLabel(labelName)); + + useEffect(() => setLabelValue(!!note?.hasLabel(labelName)), [ note ]); useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { for (const attr of loadResults.getAttributeRows()) { diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx index 33f28a277..8ed0526b7 100644 --- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx +++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx @@ -15,6 +15,7 @@ import FormDropdownList from "../react/FormDropdownList"; import toast from "../../services/toast"; import branches from "../../services/branches"; import sync from "../../services/sync"; +import TemplateSwitchWidget from "../template_switch"; export default function BasicPropertiesTab() { const { note } = useNoteContext(); @@ -26,6 +27,7 @@ export default function BasicPropertiesTab() { +
); } @@ -202,6 +204,22 @@ function BookmarkSwitch({ note }: { note?: FNote | null }) { ) } +function TemplateSwitch({ note }: { note?: FNote | null }) { + const [ isTemplate, setIsTemplate ] = useNoteLabelBoolean(note, "template"); + + return ( +
+ +
+ ) +} + function SharedSwitch({ note }: { note?: FNote | null }) { const [ isShared, setIsShared ] = useState(false); const refreshState = useCallback(() => { diff --git a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts index 8a762f96c..a60b999e4 100644 --- a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts +++ b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts @@ -10,8 +10,6 @@ import type FNote from "../../entities/fnote.js"; import NoteLanguageWidget from "../note_language.js"; const TPL = /*html*/` -
-
${t("basic_properties.language")}:  
diff --git a/apps/client/src/widgets/switch.ts b/apps/client/src/widgets/switch.ts index 1f5956a6e..c31be8646 100644 --- a/apps/client/src/widgets/switch.ts +++ b/apps/client/src/widgets/switch.ts @@ -1,14 +1,6 @@ import { t } from "../services/i18n.js"; import NoteContextAwareWidget from "./note_context_aware_widget.js"; -const TPL = /*html*/` -
- - -
`; - export default class SwitchWidget extends NoteContextAwareWidget { doRender() { diff --git a/apps/client/src/widgets/template_switch.ts b/apps/client/src/widgets/template_switch.ts deleted file mode 100644 index 50c11f657..000000000 --- a/apps/client/src/widgets/template_switch.ts +++ /dev/null @@ -1,52 +0,0 @@ -import SwitchWidget from "./switch.js"; -import attributeService from "../services/attributes.js"; -import { t } from "../services/i18n.js"; -import type { EventData } from "../components/app_context.js"; -import type FNote from "../entities/fnote.js"; - -/** - * Switch for the basic properties widget which allows the user to select whether the note is a template or not, which toggles the `#template` attribute. - */ -export default class TemplateSwitchWidget extends SwitchWidget { - - isEnabled() { - return super.isEnabled() && !this.noteId?.startsWith("_options"); - } - - doRender() { - super.doRender(); - - this.switchOnName = t("template_switch.template"); - this.switchOnTooltip = t("template_switch.toggle-on-hint"); - - this.switchOffName = t("template_switch.template"); - this.switchOffTooltip = t("template_switch.toggle-off-hint"); - - this.$helpButton.attr("data-help-page", "template.html").show(); - } - - async switchOn() { - if (this.noteId) { - await attributeService.setLabel(this.noteId, "template"); - } - } - - async switchOff() { - if (this.note && this.noteId) { - for (const templateAttr of this.note.getOwnedLabels("template")) { - await attributeService.removeAttributeById(this.noteId, templateAttr.attributeId); - } - } - } - - async refreshWithNote(note: FNote) { - const isTemplate = note.hasLabel("template"); - this.isToggled = isTemplate; - } - - entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { - if (loadResults.getAttributeRows().find((attr) => attr.type === "label" && attr.name === "template" && attr.noteId === this.noteId)) { - this.refresh(); - } - } -} From 8e29b5eed65b6f60b3883c69a29f6875f3ec4b11 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Aug 2025 12:34:21 +0300 Subject: [PATCH 047/191] feat(react/ribbon): port note language --- apps/client/src/widgets/note_language.ts | 65 +--------------- apps/client/src/widgets/react/FormList.tsx | 6 +- .../src/widgets/ribbon/BasicPropertiesTab.tsx | 77 +++++++++++++++++-- .../ribbon_widgets/basic_properties.ts | 2 +- 4 files changed, 77 insertions(+), 73 deletions(-) diff --git a/apps/client/src/widgets/note_language.ts b/apps/client/src/widgets/note_language.ts index 398951e20..b6be77230 100644 --- a/apps/client/src/widgets/note_language.ts +++ b/apps/client/src/widgets/note_language.ts @@ -38,11 +38,6 @@ const TPL = /*html*/`\
`; -const DEFAULT_LOCALE: Locale = { - id: "", - name: t("note_language.not_set") -}; - export default class NoteLanguageWidget extends NoteContextAwareWidget { private dropdown!: Dropdown; @@ -59,7 +54,6 @@ export default class NoteLanguageWidget extends NoteContextAwareWidget { doRender() { this.$widget = $(TPL); this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")[0]); - this.$widget.on("show.bs.dropdown", () => this.renderDropdown()); this.$noteLanguageDropdown = this.$widget.find(".note-language-dropdown") this.$noteLanguageDesc = this.$widget.find(".note-language-desc"); @@ -72,36 +66,8 @@ export default class NoteLanguageWidget extends NoteContextAwareWidget { return; } - for (const locale of this.locales) { - if (typeof locale === "object") { - const $title = $("").text(locale.name); - - const $link = $('') - .attr("data-language", locale.id) - .append('✓ ') - .append($title) - .on("click", () => { - const languageId = $link.attr("data-language") ?? ""; - this.save(languageId); - }); - - if (locale.rtl) { - $link.attr("dir", "rtl"); - } - - if (locale.id === this.currentLanguageId) { - $link.addClass("selected"); - } - - this.$noteLanguageDropdown.append($link); - } else { - this.$noteLanguageDropdown.append('
'); - } - } - const $configureLink = $('') - .append(`${t("note_language.configure-languages")}`) - .on("click", () => appContext.tabManager.openContextWithNote("_optionsLocalization", { activate: true })); + .on("click", () => )); this.$noteLanguageDropdown.append($configureLink); } @@ -114,7 +80,6 @@ export default class NoteLanguageWidget extends NoteContextAwareWidget { } async refreshWithNote(note: FNote) { - const currentLanguageId = note.getLabelValue("language") ?? ""; const language = getLocaleById(currentLanguageId) ?? DEFAULT_LOCALE; this.currentLanguageId = currentLanguageId; this.$noteLanguageDesc.text(language.name); @@ -132,35 +97,7 @@ export default class NoteLanguageWidget extends NoteContextAwareWidget { } static #buildLocales() { - const enabledLanguages = JSON.parse(options.get("languages") ?? "[]") as string[]; - const filteredLanguages = getAvailableLocales().filter((l) => typeof l !== "object" || enabledLanguages.includes(l.id)); - const leftToRightLanguages = filteredLanguages.filter((l) => !l.rtl); - const rightToLeftLanguages = filteredLanguages.filter((l) => l.rtl); - let locales: ("---" | Locale)[] = [ - DEFAULT_LOCALE - ]; - - if (leftToRightLanguages.length > 0) { - locales = [ - ...locales, - "---", - ...leftToRightLanguages - ]; - } - - if (rightToLeftLanguages.length > 0) { - locales = [ - ...locales, - "---", - ...rightToLeftLanguages - ]; - } - - // This will separate the list of languages from the "Configure languages" button. - // If there is at least one language. - locales.push("---"); - return locales; } } diff --git a/apps/client/src/widgets/react/FormList.tsx b/apps/client/src/widgets/react/FormList.tsx index 42aeb93d5..6d16e9d0f 100644 --- a/apps/client/src/widgets/react/FormList.tsx +++ b/apps/client/src/widgets/react/FormList.tsx @@ -82,9 +82,10 @@ interface FormListItemOpts { onClick?: () => void; description?: string; className?: string; + rtl?: boolean; } -export function FormListItem({ children, icon, value, title, active, badges, disabled, checked, onClick, description, selected }: FormListItemOpts) { +export function FormListItem({ children, icon, value, title, active, badges, disabled, checked, onClick, description, selected, rtl }: FormListItemOpts) { if (checked) { icon = "bx bx-check"; } @@ -95,6 +96,7 @@ export function FormListItem({ children, icon, value, title, active, badges, dis data-value={value} title={title} tabIndex={0} onClick={onClick} + dir={rtl ? "rtl" : undefined} >  
@@ -120,6 +122,6 @@ export function FormListHeader({ text }: FormListHeaderOpts) { ) } -export function FormDivider() { +export function FormDropdownDivider() { return
; } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx index 8ed0526b7..ab5c35011 100644 --- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx +++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx @@ -1,11 +1,11 @@ import { useCallback, useEffect, useMemo, useState } from "preact/hooks"; import Dropdown from "../react/Dropdown"; import { NOTE_TYPES } from "../../services/note_types"; -import { FormDivider, FormListBadge, FormListItem } from "../react/FormList"; -import { t } from "../../services/i18n"; -import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEventBeta, useTriliumOption } from "../react/hooks"; +import { FormDropdownDivider, FormListBadge, FormListItem } from "../react/FormList"; +import { getAvailableLocales, t } from "../../services/i18n"; +import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEventBeta, useTriliumOption, useTriliumOptionJson } from "../react/hooks"; import mime_types from "../../services/mime_types"; -import { NoteType, ToggleInParentResponse } from "@triliumnext/commons"; +import { Locale, NoteType, ToggleInParentResponse } from "@triliumnext/commons"; import server from "../../services/server"; import dialog from "../../services/dialog"; import FormToggle from "../react/FormToggle"; @@ -15,7 +15,7 @@ import FormDropdownList from "../react/FormDropdownList"; import toast from "../../services/toast"; import branches from "../../services/branches"; import sync from "../../services/sync"; -import TemplateSwitchWidget from "../template_switch"; +import appContext from "../../components/app_context"; export default function BasicPropertiesTab() { const { note } = useNoteContext(); @@ -28,6 +28,7 @@ export default function BasicPropertiesTab() { +
); } @@ -93,7 +94,7 @@ function NoteTypeWidget({ note }: { note?: FNote | null }) { } else { return ( <> - + { + const enabledLanguages = JSON.parse(languages ?? "[]") as string[]; + const filteredLanguages = getAvailableLocales().filter((l) => typeof l !== "object" || enabledLanguages.includes(l.id)); + const leftToRightLanguages = filteredLanguages.filter((l) => !l.rtl); + const rightToLeftLanguages = filteredLanguages.filter((l) => l.rtl); + + let locales: ("---" | Locale)[] = [ + DEFAULT_LOCALE + ]; + + if (leftToRightLanguages.length > 0) { + locales = [ + ...locales, + "---", + ...leftToRightLanguages + ]; + } + + if (rightToLeftLanguages.length > 0) { + locales = [ + ...locales, + "---", + ...rightToLeftLanguages + ]; + } + + // This will separate the list of languages from the "Configure languages" button. + // If there is at least one language. + locales.push("---"); + return locales; + }, [ languages ]); + + return ( +
+ + {locales.map(locale => { + if (typeof locale === "object") { + return setCurrentNoteLanguage(locale.id)} + >{locale.name} + } else { + return + } + })} + + appContext.tabManager.openContextWithNote("_optionsLocalization", { activate: true })} + >{t("note_language.configure-languages")} + +
+ ) +} + function findTypeTitle(type?: NoteType, mime?: string | null) { if (type === "code") { const mimeTypes = mime_types.getMimeTypes(); diff --git a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts index a60b999e4..5f0fc9ffa 100644 --- a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts +++ b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts @@ -57,7 +57,7 @@ export default class BasicPropertiesWidget extends NoteContextAwareWidget { this.$widget.find(".bookmark-switch-container").append(this.bookmarkSwitchWidget.render()); this.$widget.find(".shared-switch-container").append(this.sharedSwitchWidget.render()); this.$widget.find(".template-switch-container").append(this.templateSwitchWidget.render()); - this.$widget.find(".note-language-container").append(this.noteLanguageWidget.render()); + this.$widget.find(".").append(this.noteLanguageWidget.render()); } async refreshWithNote(note: FNote) { From eff5b6459d2dfb412fd3357e65ef523e728258a7 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Aug 2025 15:11:12 +0300 Subject: [PATCH 048/191] chore(react/ribbon): fix event --- apps/client/src/widgets/react/hooks.tsx | 27 +++++++++++++++++++ .../src/widgets/ribbon/BasicPropertiesTab.tsx | 10 ++++--- 2 files changed, 33 insertions(+), 4 deletions(-) diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 1e91c475a..66100105f 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -166,6 +166,33 @@ export function useTriliumOption(name: OptionNames, needsRefresh?: boolean): [st ] } +export function useTriliumOptionBeta(name: OptionNames, needsRefresh?: boolean): [string, (newValue: OptionValue) => Promise] { + const initialValue = options.get(name); + const [ value, setValue ] = useState(initialValue); + + const wrappedSetValue = useMemo(() => { + return async (newValue: OptionValue) => { + await options.save(name, newValue); + + if (needsRefresh) { + reloadFrontendApp(`option change: ${name}`); + } + } + }, [ name, needsRefresh ]); + + useTriliumEventBeta("entitiesReloaded", useCallback(({ loadResults }) => { + if (loadResults.getOptionNames().includes(name)) { + const newValue = options.get(name); + setValue(newValue); + } + }, [ name ])); + + return [ + value, + wrappedSetValue + ] +} + /** * Similar to {@link useTriliumOption}, but the value is converted to and from a boolean instead of a string. * diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx index ab5c35011..f82223c0a 100644 --- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx +++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx @@ -3,7 +3,7 @@ import Dropdown from "../react/Dropdown"; import { NOTE_TYPES } from "../../services/note_types"; import { FormDropdownDivider, FormListBadge, FormListItem } from "../react/FormList"; import { getAvailableLocales, t } from "../../services/i18n"; -import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEventBeta, useTriliumOption, useTriliumOptionJson } from "../react/hooks"; +import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEventBeta, useTriliumOption, useTriliumOptionBeta, useTriliumOptionJson } from "../react/hooks"; import mime_types from "../../services/mime_types"; import { Locale, NoteType, ToggleInParentResponse } from "@triliumnext/commons"; import server from "../../services/server"; @@ -267,13 +267,13 @@ function SharedSwitch({ note }: { note?: FNote | null }) { } function NoteLanguageSwitch({ note }: { note?: FNote | null }) { - const [ languages ] = useTriliumOption("languages"); + const [ languages ] = useTriliumOptionBeta("languages"); const DEFAULT_LOCALE = { id: "", name: t("note_language.not_set") }; - const [ currentNoteLanguage, setCurrentNoteLanguage ] = useNoteLabel(note, "language") ?? ""; + const [ currentNoteLanguage, setCurrentNoteLanguage ] = useNoteLabel(note, "language"); const locales = useMemo(() => { const enabledLanguages = JSON.parse(languages ?? "[]") as string[]; @@ -307,14 +307,16 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) { return locales; }, [ languages ]); + return (
{locales.map(locale => { if (typeof locale === "object") { + const checked = locale.id === (currentNoteLanguage ?? ""); return setCurrentNoteLanguage(locale.id)} >{locale.name} } else { From bf0213907e5e1ac4f8b775884693c5c48e9ca1a8 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Aug 2025 15:40:15 +0300 Subject: [PATCH 049/191] chore(react/ribbon): finalize language switcher --- apps/client/src/widgets/note_language.ts | 103 ------------------ apps/client/src/widgets/react/FormToggle.tsx | 10 +- apps/client/src/widgets/react/HelpButton.tsx | 21 ++++ .../src/widgets/ribbon/BasicPropertiesTab.tsx | 14 ++- .../ribbon_widgets/basic_properties.ts | 72 ------------ 5 files changed, 34 insertions(+), 186 deletions(-) delete mode 100644 apps/client/src/widgets/note_language.ts create mode 100644 apps/client/src/widgets/react/HelpButton.tsx delete mode 100644 apps/client/src/widgets/ribbon_widgets/basic_properties.ts diff --git a/apps/client/src/widgets/note_language.ts b/apps/client/src/widgets/note_language.ts deleted file mode 100644 index b6be77230..000000000 --- a/apps/client/src/widgets/note_language.ts +++ /dev/null @@ -1,103 +0,0 @@ -import { Dropdown } from "bootstrap"; -import NoteContextAwareWidget from "./note_context_aware_widget.js"; -import { getAvailableLocales, getLocaleById, t } from "../services/i18n.js"; -import type { EventData } from "../components/app_context.js"; -import type FNote from "../entities/fnote.js"; -import attributes from "../services/attributes.js"; -import type { Locale } from "@triliumnext/commons"; -import options from "../services/options.js"; -import appContext from "../components/app_context.js"; - -const TPL = /*html*/`\ -
- -
- - - -
-`; - -export default class NoteLanguageWidget extends NoteContextAwareWidget { - - private dropdown!: Dropdown; - private $noteLanguageDropdown!: JQuery; - private $noteLanguageDesc!: JQuery; - private locales: (Locale | "---")[]; - private currentLanguageId?: string; - - constructor() { - super(); - this.locales = NoteLanguageWidget.#buildLocales(); - } - - doRender() { - this.$widget = $(TPL); - this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")[0]); - - this.$noteLanguageDropdown = this.$widget.find(".note-language-dropdown") - this.$noteLanguageDesc = this.$widget.find(".note-language-desc"); - } - - renderDropdown() { - this.$noteLanguageDropdown.empty(); - - if (!this.note) { - return; - } - - const $configureLink = $('') - .on("click", () => )); - this.$noteLanguageDropdown.append($configureLink); - } - - async save(languageId: string) { - if (!this.note) { - return; - } - - attributes.setAttribute(this.note, "label", "language", languageId); - } - - async refreshWithNote(note: FNote) { - const language = getLocaleById(currentLanguageId) ?? DEFAULT_LOCALE; - this.currentLanguageId = currentLanguageId; - this.$noteLanguageDesc.text(language.name); - this.dropdown.hide(); - } - - async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { - if (loadResults.isOptionReloaded("languages")) { - this.locales = NoteLanguageWidget.#buildLocales(); - } - - if (loadResults.getAttributeRows().find((a) => a.noteId === this.noteId && a.name === "language")) { - this.refresh(); - } - } - - static #buildLocales() { - - } - -} diff --git a/apps/client/src/widgets/react/FormToggle.tsx b/apps/client/src/widgets/react/FormToggle.tsx index c41ea6750..813947ac6 100644 --- a/apps/client/src/widgets/react/FormToggle.tsx +++ b/apps/client/src/widgets/react/FormToggle.tsx @@ -1,6 +1,7 @@ import { t } from "../../services/i18n"; import { openInAppHelpFromUrl } from "../../services/utils"; import "./FormToggle.css"; +import HelpButton from "./HelpButton"; interface FormToggleProps { currentValue: boolean | null; @@ -36,14 +37,7 @@ export default function FormToggle({ currentValue, helpPage, switchOnName, switc
- { helpPage && ( -
) } \ No newline at end of file diff --git a/apps/client/src/widgets/react/HelpButton.tsx b/apps/client/src/widgets/react/HelpButton.tsx new file mode 100644 index 000000000..065252264 --- /dev/null +++ b/apps/client/src/widgets/react/HelpButton.tsx @@ -0,0 +1,21 @@ +import { CSSProperties } from "preact/compat"; +import { t } from "../../services/i18n"; +import { openInAppHelpFromUrl } from "../../services/utils"; + +interface HelpButtonProps { + className?: string; + helpPage: string; + style?: CSSProperties; +} + +export default function HelpButton({ className, helpPage, style }: HelpButtonProps) { + return ( +
+
+ ); +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css index 594a3e6e2..514ec98a4 100644 --- a/apps/client/src/widgets/ribbon/style.css +++ b/apps/client/src/widgets/ribbon/style.css @@ -147,4 +147,15 @@ opacity: 0.3; } +/* #endregion */ + +/* #region Script Tab */ +.script-runner-widget { + padding: 12px; + color: var(--muted-text-color); +} + +.execute-description { + margin-bottom: 10px; +} /* #endregion */ \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon_widgets/script_executor.ts b/apps/client/src/widgets/ribbon_widgets/script_executor.ts deleted file mode 100644 index aaec721d7..000000000 --- a/apps/client/src/widgets/ribbon_widgets/script_executor.ts +++ /dev/null @@ -1,70 +0,0 @@ -import NoteContextAwareWidget from "../note_context_aware_widget.js"; -import keyboardActionService from "../../services/keyboard_actions.js"; -import { t } from "../../services/i18n.js"; -import type FNote from "../../entities/fnote.js"; - -const TPL = /*html*/` -
- - -
- -
- -
-
`; - -export default class ScriptExecutorWidget extends NoteContextAwareWidget { - - private $executeButton!: JQuery; - private $executeDescription!: JQuery; - - isEnabled() { - return ( - super.isEnabled() && - this.note && - (this.note.mime.startsWith("application/javascript") || this.isTriliumSqlite()) && - (this.note.hasLabel("executeDescription") || this.note.hasLabel("executeButton")) - ); - } - - getTitle() { - return { - show: this.isEnabled(), - activate: true - }; - } - - doRender() { - this.$widget = $(TPL); - this.contentSized(); - - this.$executeButton = this.$widget.find(".execute-button"); - this.$executeDescription = this.$widget.find(".execute-description"); - } - - async refreshWithNote(note: FNote) { - const executeTitle = note.getLabelValue("executeButton") || (this.isTriliumSqlite() ? t("script_executor.execute_query") : t("script_executor.execute_script")); - - this.$executeButton.text(executeTitle); - this.$executeButton.attr("title", executeTitle); - keyboardActionService.updateDisplayedShortcuts(this.$widget); - - const executeDescription = note.getLabelValue("executeDescription"); - - if (executeDescription) { - this.$executeDescription.show().html(executeDescription); - } else { - this.$executeDescription.empty().hide(); - } - } -} From cee4714665692cfcbbb269b11fd90e6b7db6b6c9 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Aug 2025 17:31:06 +0300 Subject: [PATCH 053/191] feat(react/ribbon): port edited notes --- .../src/widgets/react/KeyboardShortcut.tsx | 7 +- apps/client/src/widgets/react/NoteLink.tsx | 21 ++++ apps/client/src/widgets/react/RawHtml.tsx | 4 +- apps/client/src/widgets/react/react_utils.tsx | 7 +- .../src/widgets/ribbon/EditedNotesTab.tsx | 51 ++++++++++ apps/client/src/widgets/ribbon/Ribbon.tsx | 13 ++- .../widgets/ribbon_widgets/edited_notes.ts | 98 ------------------- apps/server/src/routes/api/revisions.ts | 4 +- packages/commons/src/lib/server_api.ts | 7 ++ 9 files changed, 101 insertions(+), 111 deletions(-) create mode 100644 apps/client/src/widgets/react/NoteLink.tsx create mode 100644 apps/client/src/widgets/ribbon/EditedNotesTab.tsx delete mode 100644 apps/client/src/widgets/ribbon_widgets/edited_notes.ts diff --git a/apps/client/src/widgets/react/KeyboardShortcut.tsx b/apps/client/src/widgets/react/KeyboardShortcut.tsx index 049f54dd5..852fc8733 100644 --- a/apps/client/src/widgets/react/KeyboardShortcut.tsx +++ b/apps/client/src/widgets/react/KeyboardShortcut.tsx @@ -1,6 +1,7 @@ import { ActionKeyboardShortcut, KeyboardActionNames } from "@triliumnext/commons"; import { useEffect, useState } from "preact/hooks"; import keyboard_actions from "../../services/keyboard_actions"; +import { separateByCommas } from "./react_utils"; interface KeyboardShortcutProps { actionName: KeyboardActionNames; @@ -21,13 +22,13 @@ export default function KeyboardShortcut({ actionName }: KeyboardShortcutProps) <> {action.effectiveShortcuts?.map((shortcut, i) => { const keys = shortcut.split("+"); - return keys + return separateByCommas(keys .map((key, i) => ( <> {key} {i + 1 < keys.length && "+ "} - )) - }).reduce((acc, item) => (acc.length ? [...acc, ", ", item] : [item]), [])} + ))) + })} ); } \ No newline at end of file diff --git a/apps/client/src/widgets/react/NoteLink.tsx b/apps/client/src/widgets/react/NoteLink.tsx new file mode 100644 index 000000000..31dd4fbeb --- /dev/null +++ b/apps/client/src/widgets/react/NoteLink.tsx @@ -0,0 +1,21 @@ +import { useEffect, useMemo, useState } from "preact/hooks"; +import link from "../../services/link"; +import RawHtml from "./RawHtml"; + +interface NoteLinkOpts { + notePath: string | string[]; + showNotePath?: boolean; +} + +export default function NoteLink({ notePath, showNotePath }: NoteLinkOpts) { + const stringifiedNotePath = Array.isArray(notePath) ? notePath.join("/") : notePath; + const [ jqueryEl, setJqueryEl ] = useState>(); + + useEffect(() => { + link.createLink(stringifiedNotePath, { showNotePath: true }) + .then(setJqueryEl); + }, [ stringifiedNotePath, showNotePath ]) + + return + +} \ No newline at end of file diff --git a/apps/client/src/widgets/react/RawHtml.tsx b/apps/client/src/widgets/react/RawHtml.tsx index 1e5aef648..d74fda43a 100644 --- a/apps/client/src/widgets/react/RawHtml.tsx +++ b/apps/client/src/widgets/react/RawHtml.tsx @@ -4,7 +4,7 @@ type HTMLElementLike = string | HTMLElement | JQuery; interface RawHtmlProps { className?: string; - html: HTMLElementLike; + html?: HTMLElementLike; style?: CSSProperties; } @@ -19,7 +19,7 @@ export function RawHtmlBlock(props: RawHtmlProps) { function getProps({ className, html, style }: RawHtmlProps) { return { className: className, - dangerouslySetInnerHTML: getHtml(html), + dangerouslySetInnerHTML: getHtml(html ?? ""), style } } diff --git a/apps/client/src/widgets/react/react_utils.tsx b/apps/client/src/widgets/react/react_utils.tsx index e8b0752b4..db451b21a 100644 --- a/apps/client/src/widgets/react/react_utils.tsx +++ b/apps/client/src/widgets/react/react_utils.tsx @@ -1,4 +1,4 @@ -import { createContext, render, type JSX, type RefObject } from "preact"; +import { ComponentChild, createContext, render, type JSX, type RefObject } from "preact"; import Component from "../../components/component"; export const ParentComponent = createContext(null); @@ -39,4 +39,9 @@ export function renderReactWidgetAtElement(parentComponent: Component, el: JSX.E export function disposeReactWidget(container: Element) { render(null, container); +} + +export function separateByCommas(components: ComponentChild[]) { + return components.reduce((acc, item) => + (acc.length ? [...acc, ", ", item] : [item]), []); } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/EditedNotesTab.tsx b/apps/client/src/widgets/ribbon/EditedNotesTab.tsx new file mode 100644 index 000000000..c85ac4ad1 --- /dev/null +++ b/apps/client/src/widgets/ribbon/EditedNotesTab.tsx @@ -0,0 +1,51 @@ +import { useEffect, useState } from "preact/hooks"; +import { TabContext } from "./ribbon-interface"; +import { EditedNotesResponse } from "@triliumnext/commons"; +import server from "../../services/server"; +import { t } from "../../services/i18n"; +import froca from "../../services/froca"; +import NoteLink from "../react/NoteLink"; +import { separateByCommas } from "../react/react_utils"; + +export default function EditedNotesTab({ note }: TabContext) { + const [ editedNotes, setEditedNotes ] = useState(); + + useEffect(() => { + if (!note) return; + server.get(`edited-notes/${note.getLabelValue("dateNote")}`).then(async editedNotes => { + editedNotes = editedNotes.filter((n) => n.noteId !== note.noteId); + const noteIds = editedNotes.flatMap((n) => n.noteId); + await froca.getNotes(noteIds, true); // preload all at once + setEditedNotes(editedNotes); + }); + }, [ note?.noteId ]); + + return ( +
+ {editedNotes ? ( +
+ {separateByCommas(editedNotes.map(editedNote => { + return ( + + {editedNote.isDeleted ? ( + {`${editedNote.title} ${t("edited_notes.deleted")}`} + ) : ( + <> + {editedNote.notePath ? : {editedNote.title} } + + )} + + ) + }))} +
+ ) : ( +
{t("edited_notes.no_edited_notes_found")}
+ )} +
+ ) +} diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index e0bc25d9a..c043f84e3 100644 --- a/apps/client/src/widgets/ribbon/Ribbon.tsx +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -11,6 +11,7 @@ import options from "../../services/options"; import { CommandNames } from "../../components/app_context"; import FNote from "../../entities/fnote"; import ScriptTab from "./ScriptTab"; +import EditedNotesTab from "./EditedNotesTab"; interface TitleContext { note: FNote | null | undefined; @@ -21,9 +22,9 @@ interface TabConfiguration { icon: string; // TODO: Mark as required after porting them all. content?: (context: TabContext) => VNode; - show?: (context: TitleContext) => boolean; + show?: (context: TitleContext) => boolean | null | undefined; toggleCommand?: CommandNames; - activate?: boolean; + activate?: boolean | ((context: TitleContext) => boolean); /** * By default the tab content will not be rendered unless the tab is active (i.e. selected by the user). Setting to `true` will ensure that the tab is rendered even when inactive, for cases where the tab needs to be accessible at all times (e.g. for the detached editor toolbar). */ @@ -44,7 +45,7 @@ const TAB_CONFIGURATION = numberObjectsInPlace([ icon: "bx bx-play", content: ScriptTab, activate: true, - show: ({ note }) => !!note && + show: ({ note }) => note && (note.isTriliumScript() || note.isTriliumSqlite()) && (note.hasLabel("executeDescription") || note.hasLabel("executeButton")) }, @@ -54,9 +55,11 @@ const TAB_CONFIGURATION = numberObjectsInPlace([ icon: "bx bx-search" }, { - // Edited NotesWidget title: t("edited_notes.title"), - icon: "bx bx-calendar-edit" + icon: "bx bx-calendar-edit", + content: EditedNotesTab, + show: ({ note }) => note?.hasOwnedLabel("dateNote"), + activate: ({ note }) => (note?.getPromotedDefinitionAttributes().length === 0 || !options.is("promotedAttributesOpenInRibbon")) && options.is("editedNotesOpenInRibbon") }, { // BookPropertiesWidget diff --git a/apps/client/src/widgets/ribbon_widgets/edited_notes.ts b/apps/client/src/widgets/ribbon_widgets/edited_notes.ts deleted file mode 100644 index 768d48566..000000000 --- a/apps/client/src/widgets/ribbon_widgets/edited_notes.ts +++ /dev/null @@ -1,98 +0,0 @@ -import linkService from "../../services/link.js"; -import server from "../../services/server.js"; -import froca from "../../services/froca.js"; -import NoteContextAwareWidget from "../note_context_aware_widget.js"; -import options from "../../services/options.js"; -import { t } from "../../services/i18n.js"; -import type FNote from "../../entities/fnote.js"; - -const TPL = /*html*/` -
- - -
${t("edited_notes.no_edited_notes_found")}
- -
-
-`; - -// TODO: Deduplicate with server. -interface EditedNotesResponse { - noteId: string; - isDeleted: boolean; - title: string; - notePath: string[]; -} - -export default class EditedNotesWidget extends NoteContextAwareWidget { - - private $list!: JQuery; - private $noneFound!: JQuery; - - get name() { - return "editedNotes"; - } - - isEnabled() { - return super.isEnabled() && this.note?.hasOwnedLabel("dateNote"); - } - - getTitle() { - return { - show: this.isEnabled(), - // promoted attributes have priority over edited notes - activate: (this.note?.getPromotedDefinitionAttributes().length === 0 || !options.is("promotedAttributesOpenInRibbon")) && options.is("editedNotesOpenInRibbon"), - - }; - } - - async doRender() { - this.$widget = $(TPL); - this.contentSized(); - this.$list = this.$widget.find(".edited-notes-list"); - this.$noneFound = this.$widget.find(".no-edited-notes-found"); - } - - async refreshWithNote(note: FNote) { - let editedNotes = await server.get(`edited-notes/${note.getLabelValue("dateNote")}`); - - editedNotes = editedNotes.filter((n) => n.noteId !== note.noteId); - - this.$list.empty(); - this.$noneFound.hide(); - - if (editedNotes.length === 0) { - this.$noneFound.show(); - return; - } - - const noteIds = editedNotes.flatMap((n) => n.noteId); - - await froca.getNotes(noteIds, true); // preload all at once - - for (let i = 0; i < editedNotes.length; i++) { - const editedNote = editedNotes[i]; - const $item = $(''); - - if (editedNote.isDeleted) { - const title = `${editedNote.title} ${t("edited_notes.deleted")}`; - $item.append($("").text(title).attr("title", title)); - } else { - $item.append(editedNote.notePath ? await linkService.createLink(editedNote.notePath.join("/"), { showNotePath: true }) : $("").text(editedNote.title)); - } - - if (i < editedNotes.length - 1) { - $item.append(", "); - } - - this.$list.append($item); - } - } -} diff --git a/apps/server/src/routes/api/revisions.ts b/apps/server/src/routes/api/revisions.ts index cdcabe6d2..055d0b75e 100644 --- a/apps/server/src/routes/api/revisions.ts +++ b/apps/server/src/routes/api/revisions.ts @@ -12,7 +12,7 @@ import type { Request, Response } from "express"; import type BRevision from "../../becca/entities/brevision.js"; import type BNote from "../../becca/entities/bnote.js"; import type { NotePojo } from "../../becca/becca-interface.js"; -import { RevisionItem, RevisionPojo, RevisionRow } from "@triliumnext/commons"; +import { EditedNotesResponse, RevisionItem, RevisionPojo, RevisionRow } from "@triliumnext/commons"; interface NotePath { noteId: string; @@ -184,7 +184,7 @@ function getEditedNotesOnDate(req: Request) { notePojo.notePath = notePath ? notePath.notePath : null; return notePojo; - }); + }) satisfies EditedNotesResponse; } function getNotePathData(note: BNote): NotePath | undefined { diff --git a/packages/commons/src/lib/server_api.ts b/packages/commons/src/lib/server_api.ts index 311e45fb0..199ab164b 100644 --- a/packages/commons/src/lib/server_api.ts +++ b/packages/commons/src/lib/server_api.ts @@ -162,3 +162,10 @@ export type ToggleInParentResponse = { success: false; message: string; } + +export type EditedNotesResponse = { + noteId: string; + isDeleted: boolean; + title?: string; + notePath?: string[] | null; +}[]; From 70728c274e138906cfaf66ec25c6dfbcde9ce3b9 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Aug 2025 17:41:45 +0300 Subject: [PATCH 054/191] feat(react/ribbon): port note properties --- .../src/widgets/ribbon/NotePropertiesTab.tsx | 20 +++++++ apps/client/src/widgets/ribbon/Ribbon.tsx | 7 ++- .../widgets/ribbon_widgets/note_properties.ts | 53 ------------------- 3 files changed, 25 insertions(+), 55 deletions(-) create mode 100644 apps/client/src/widgets/ribbon/NotePropertiesTab.tsx delete mode 100644 apps/client/src/widgets/ribbon_widgets/note_properties.ts diff --git a/apps/client/src/widgets/ribbon/NotePropertiesTab.tsx b/apps/client/src/widgets/ribbon/NotePropertiesTab.tsx new file mode 100644 index 000000000..8cc0c2b85 --- /dev/null +++ b/apps/client/src/widgets/ribbon/NotePropertiesTab.tsx @@ -0,0 +1,20 @@ +import { t } from "../../services/i18n"; +import { useNoteLabel } from "../react/hooks"; +import { TabContext } from "./ribbon-interface"; + +/** + * TODO: figure out better name or conceptualize better. + */ +export default function NotePropertiesTab({ note }: TabContext) { + const [ pageUrl ] = useNoteLabel(note, "pageUrl"); + + return ( + + ) +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index c043f84e3..5dbeb1c62 100644 --- a/apps/client/src/widgets/ribbon/Ribbon.tsx +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -12,6 +12,7 @@ import { CommandNames } from "../../components/app_context"; import FNote from "../../entities/fnote"; import ScriptTab from "./ScriptTab"; import EditedNotesTab from "./EditedNotesTab"; +import NotePropertiesTab from "./NotePropertiesTab"; interface TitleContext { note: FNote | null | undefined; @@ -67,9 +68,11 @@ const TAB_CONFIGURATION = numberObjectsInPlace([ icon: "bx bx-book" }, { - // NotePropertiesWidget title: t("note_properties.info"), - icon: "bx bx-info-square" + icon: "bx bx-info-square", + content: NotePropertiesTab, + show: ({ note }) => !!note?.getLabelValue("pageUrl"), + activate: true }, { // FilePropertiesWidget diff --git a/apps/client/src/widgets/ribbon_widgets/note_properties.ts b/apps/client/src/widgets/ribbon_widgets/note_properties.ts deleted file mode 100644 index 7f875e4e4..000000000 --- a/apps/client/src/widgets/ribbon_widgets/note_properties.ts +++ /dev/null @@ -1,53 +0,0 @@ -import type FNote from "../../entities/fnote.js"; -import { t } from "../../services/i18n.js"; -import NoteContextAwareWidget from "../note_context_aware_widget.js"; - -const TPL = /*html*/` -
- - -
- ${t("note_properties.this_note_was_originally_taken_from")} -
-
`; - -/** - * TODO: figure out better name or conceptualize better. - */ -export default class NotePropertiesWidget extends NoteContextAwareWidget { - - private $pageUrl!: JQuery; - - isEnabled() { - return this.note && !!this.note.getLabelValue("pageUrl"); - } - - getTitle() { - return { - show: this.isEnabled(), - activate: true, - - }; - } - - doRender() { - this.$widget = $(TPL); - this.contentSized(); - - this.$pageUrl = this.$widget.find(".page-url"); - } - - async refreshWithNote(note: FNote) { - const pageUrl = note.getLabelValue("pageUrl"); - - this.$pageUrl - .attr("href", pageUrl) - .attr("title", pageUrl) - .text(pageUrl ?? ""); - } -} From 77551b1fed428f39e2fcfa7c4824bedbdf37968c Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Aug 2025 18:23:54 +0300 Subject: [PATCH 055/191] feat(react/ribbon): port note info tab --- apps/client/src/services/utils.ts | 6 +- apps/client/src/utils/formatters.ts | 6 +- .../src/widgets/react/LoadingSpinner.tsx | 3 + .../client/src/widgets/ribbon/NoteInfoTab.tsx | 84 +++++++++ apps/client/src/widgets/ribbon/Ribbon.tsx | 9 +- apps/client/src/widgets/ribbon/style.css | 24 +++ .../ribbon_widgets/note_info_widget.ts | 172 ------------------ apps/server/src/routes/api/notes.ts | 4 +- apps/server/src/routes/api/stats.ts | 5 +- packages/commons/src/lib/server_api.ts | 16 ++ 10 files changed, 148 insertions(+), 181 deletions(-) create mode 100644 apps/client/src/widgets/react/LoadingSpinner.tsx create mode 100644 apps/client/src/widgets/ribbon/NoteInfoTab.tsx delete mode 100644 apps/client/src/widgets/ribbon_widgets/note_info_widget.ts diff --git a/apps/client/src/services/utils.ts b/apps/client/src/services/utils.ts index bd924768f..7ae1899fe 100644 --- a/apps/client/src/services/utils.ts +++ b/apps/client/src/services/utils.ts @@ -185,7 +185,11 @@ export function escapeQuotes(value: string) { return value.replaceAll('"', """); } -function formatSize(size: number) { +export function formatSize(size: number | null | undefined) { + if (size === null || size === undefined) { + return ""; + } + size = Math.max(Math.round(size / 1024), 1); if (size < 1024) { diff --git a/apps/client/src/utils/formatters.ts b/apps/client/src/utils/formatters.ts index 755cc8153..d3209be7b 100644 --- a/apps/client/src/utils/formatters.ts +++ b/apps/client/src/utils/formatters.ts @@ -3,7 +3,11 @@ type DateTimeStyle = "full" | "long" | "medium" | "short" | "none" | undefined; /** * Formats the given date and time to a string based on the current locale. */ -export function formatDateTime(date: string | Date | number, dateStyle: DateTimeStyle = "medium", timeStyle: DateTimeStyle = "medium") { +export function formatDateTime(date: string | Date | number | null | undefined, dateStyle: DateTimeStyle = "medium", timeStyle: DateTimeStyle = "medium") { + if (!date) { + return ""; + } + const locale = navigator.language; let parsedDate; diff --git a/apps/client/src/widgets/react/LoadingSpinner.tsx b/apps/client/src/widgets/react/LoadingSpinner.tsx new file mode 100644 index 000000000..b3eb99e2e --- /dev/null +++ b/apps/client/src/widgets/react/LoadingSpinner.tsx @@ -0,0 +1,3 @@ +export default function LoadingSpinner() { + return +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/NoteInfoTab.tsx b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx new file mode 100644 index 000000000..466410b26 --- /dev/null +++ b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx @@ -0,0 +1,84 @@ +import { useEffect, useState } from "preact/hooks"; +import { t } from "../../services/i18n"; +import { TabContext } from "./ribbon-interface"; +import { MetadataResponse, NoteSizeResponse, SubtreeSizeResponse } from "@triliumnext/commons"; +import server from "../../services/server"; +import Button from "../react/Button"; +import { formatDateTime } from "../../utils/formatters"; +import { formatSize } from "../../services/utils"; +import LoadingSpinner from "../react/LoadingSpinner"; + +export default function NoteInfoTab({ note }: TabContext) { + const [ metadata, setMetadata ] = useState(); + const [ isLoading, setIsLoading ] = useState(false); + const [ noteSizeResponse, setNoteSizeResponse ] = useState(); + const [ subtreeSizeResponse, setSubtreeSizeResponse ] = useState(); + + useEffect(() => { + if (note) { + server.get(`notes/${note?.noteId}/metadata`).then(setMetadata); + } + + setNoteSizeResponse(undefined); + setSubtreeSizeResponse(undefined); + setIsLoading(false); + }, [ note?.noteId ]); + + console.log("Got ", noteSizeResponse, subtreeSizeResponse); + + return ( +
+ {note && ( + + + + + + + + + + + + + + + + + +
{t("note_info_widget.note_id")}:{note.noteId}{t("note_info_widget.created")}:{formatDateTime(metadata?.dateCreated)}{t("note_info_widget.modified")}:{formatDateTime(metadata?.dateModified)}
{t("note_info_widget.type")}: + {note.type}{' '} + { note.mime && ({note.mime}) } + {t("note_info_widget.note_size")}: + {!isLoading && !noteSizeResponse && !subtreeSizeResponse && ( +
+ )} +
+ ) +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index 5dbeb1c62..abe0e1fdd 100644 --- a/apps/client/src/widgets/ribbon/Ribbon.tsx +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -13,6 +13,7 @@ import FNote from "../../entities/fnote"; import ScriptTab from "./ScriptTab"; import EditedNotesTab from "./EditedNotesTab"; import NotePropertiesTab from "./NotePropertiesTab"; +import NoteInfoTab from "./NoteInfoTab"; interface TitleContext { note: FNote | null | undefined; @@ -118,9 +119,11 @@ const TAB_CONFIGURATION = numberObjectsInPlace([ icon: "bx bx-bar-chart" }, { - // NoteInfoWidget title: t("note_info_widget.title"), - icon: "bx bx-info-circle" + icon: "bx bx-info-circle", + show: ({ note }) => !!note, + content: NoteInfoTab, + toggleCommand: "toggleRibbonTabNoteInfo" } ]); @@ -128,7 +131,7 @@ export default function Ribbon() { const { note } = useNoteContext(); const titleContext: TitleContext = { note }; const [ activeTabIndex, setActiveTabIndex ] = useState(); - const filteredTabs = useMemo(() => TAB_CONFIGURATION.filter(tab => tab.show?.(titleContext)), [ titleContext, note ]) + const filteredTabs = useMemo(() => TAB_CONFIGURATION.filter(tab => tab.show?.(titleContext)), [ titleContext, note ]); return (
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css index 514ec98a4..678c24af7 100644 --- a/apps/client/src/widgets/ribbon/style.css +++ b/apps/client/src/widgets/ribbon/style.css @@ -158,4 +158,28 @@ .execute-description { margin-bottom: 10px; } +/* #endregion */ + +/* #region Note info */ +.note-info-widget { + padding: 12px; +} + +.note-info-widget-table { + max-width: 100%; + display: block; + overflow-x: auto; + white-space: nowrap; +} + +.note-info-widget-table td, .note-info-widget-table th { + padding: 5px; +} + +.note-info-mime { + max-width: 13em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} /* #endregion */ \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon_widgets/note_info_widget.ts b/apps/client/src/widgets/ribbon_widgets/note_info_widget.ts deleted file mode 100644 index 3a390eb1d..000000000 --- a/apps/client/src/widgets/ribbon_widgets/note_info_widget.ts +++ /dev/null @@ -1,172 +0,0 @@ -import { formatDateTime } from "../../utils/formatters.js"; -import { t } from "../../services/i18n.js"; -import NoteContextAwareWidget from "../note_context_aware_widget.js"; -import server from "../../services/server.js"; -import utils from "../../services/utils.js"; -import type { EventData } from "../../components/app_context.js"; -import type FNote from "../../entities/fnote.js"; - -const TPL = /*html*/` -
- - - - - - - - - - - - - - - - - - -
${t("note_info_widget.note_id")}:${t("note_info_widget.created")}:${t("note_info_widget.modified")}:
${t("note_info_widget.type")}: - - - ${t("note_info_widget.note_size")}: - - - - - -
-
-`; - -// TODO: Deduplicate with server -interface NoteSizeResponse { - noteSize: number; -} - -interface SubtreeSizeResponse { - subTreeNoteCount: number; - subTreeSize: number; -} - -interface MetadataResponse { - dateCreated: number; - dateModified: number; -} - -export default class NoteInfoWidget extends NoteContextAwareWidget { - - private $noteId!: JQuery; - private $dateCreated!: JQuery; - private $dateModified!: JQuery; - private $type!: JQuery; - private $mime!: JQuery; - private $noteSizesWrapper!: JQuery; - private $noteSize!: JQuery; - private $subTreeSize!: JQuery; - private $calculateButton!: JQuery; - - get name() { - return "noteInfo"; - } - - get toggleCommand() { - return "toggleRibbonTabNoteInfo"; - } - - isEnabled() { - return !!this.note; - } - - getTitle() { - return { - show: this.isEnabled(), - - }; - } - - doRender() { - this.$widget = $(TPL); - this.contentSized(); - - this.$noteId = this.$widget.find(".note-info-note-id"); - this.$dateCreated = this.$widget.find(".note-info-date-created"); - this.$dateModified = this.$widget.find(".note-info-date-modified"); - this.$type = this.$widget.find(".note-info-type"); - this.$mime = this.$widget.find(".note-info-mime"); - - this.$noteSizesWrapper = this.$widget.find(".note-sizes-wrapper"); - this.$noteSize = this.$widget.find(".note-size"); - this.$subTreeSize = this.$widget.find(".subtree-size"); - - this.$calculateButton = this.$widget.find(".calculate-button"); - this.$calculateButton.on("click", async () => { - this.$noteSizesWrapper.show(); - this.$calculateButton.hide(); - - this.$noteSize.empty().append($('')); - this.$subTreeSize.empty().append($('')); - - const noteSizeResp = await server.get(`stats/note-size/${this.noteId}`); - this.$noteSize.text(utils.formatSize(noteSizeResp.noteSize)); - - const subTreeResp = await server.get(`stats/subtree-size/${this.noteId}`); - - if (subTreeResp.subTreeNoteCount > 1) { - this.$subTreeSize.text(t("note_info_widget.subtree_size", { size: utils.formatSize(subTreeResp.subTreeSize), count: subTreeResp.subTreeNoteCount })); - } else { - this.$subTreeSize.text(""); - } - }); - } - - async refreshWithNote(note: FNote) { - const metadata = await server.get(`notes/${this.noteId}/metadata`); - - this.$noteId.text(note.noteId); - this.$dateCreated.text(formatDateTime(metadata.dateCreated)).attr("title", metadata.dateCreated); - - this.$dateModified.text(formatDateTime(metadata.dateModified)).attr("title", metadata.dateModified); - - this.$type.text(note.type); - - if (note.mime) { - this.$mime.text(`(${note.mime})`); - } else { - this.$mime.empty(); - } - - this.$calculateButton.show(); - this.$noteSizesWrapper.hide(); - } - - entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { - if (this.noteId && (loadResults.isNoteReloaded(this.noteId) || loadResults.isNoteContentReloaded(this.noteId))) { - this.refresh(); - } - } -} diff --git a/apps/server/src/routes/api/notes.ts b/apps/server/src/routes/api/notes.ts index fd938dc18..f481d199a 100644 --- a/apps/server/src/routes/api/notes.ts +++ b/apps/server/src/routes/api/notes.ts @@ -12,7 +12,7 @@ import ValidationError from "../../errors/validation_error.js"; import blobService from "../../services/blob.js"; import type { Request } from "express"; import type BBranch from "../../becca/entities/bbranch.js"; -import type { AttributeRow, DeleteNotesPreview } from "@triliumnext/commons"; +import type { AttributeRow, DeleteNotesPreview, MetadataResponse } from "@triliumnext/commons"; /** * @swagger @@ -101,7 +101,7 @@ function getNoteMetadata(req: Request) { utcDateCreated: note.utcDateCreated, dateModified: note.dateModified, utcDateModified: note.utcDateModified - }; + } satisfies MetadataResponse; } function createNote(req: Request) { diff --git a/apps/server/src/routes/api/stats.ts b/apps/server/src/routes/api/stats.ts index 15e28f083..aebca079e 100644 --- a/apps/server/src/routes/api/stats.ts +++ b/apps/server/src/routes/api/stats.ts @@ -1,6 +1,7 @@ import sql from "../../services/sql.js"; import becca from "../../becca/becca.js"; import type { Request } from "express"; +import { NoteSizeResponse, SubtreeSizeResponse } from "@triliumnext/commons"; function getNoteSize(req: Request) { const { noteId } = req.params; @@ -22,7 +23,7 @@ function getNoteSize(req: Request) { return { noteSize - }; + } satisfies NoteSizeResponse; } function getSubtreeSize(req: Request) { @@ -45,7 +46,7 @@ function getSubtreeSize(req: Request) { return { subTreeSize, subTreeNoteCount: subTreeNoteIds.length - }; + } satisfies SubtreeSizeResponse; } export default { diff --git a/packages/commons/src/lib/server_api.ts b/packages/commons/src/lib/server_api.ts index 199ab164b..46b403d0f 100644 --- a/packages/commons/src/lib/server_api.ts +++ b/packages/commons/src/lib/server_api.ts @@ -169,3 +169,19 @@ export type EditedNotesResponse = { title?: string; notePath?: string[] | null; }[]; + +export interface MetadataResponse { + dateCreated: string | undefined; + utcDateCreated: string; + dateModified: string | undefined; + utcDateModified: string | undefined; +} + +export interface NoteSizeResponse { + noteSize: number; +} + +export interface SubtreeSizeResponse { + subTreeNoteCount: number; + subTreeSize: number; +} From c5bb3106137f3be4b8267c4b5ba81c1983746822 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Aug 2025 19:07:04 +0300 Subject: [PATCH 056/191] chore(react/ribbon): bring back note info auto-refresh --- apps/client/src/widgets/ribbon/NoteInfoTab.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/apps/client/src/widgets/ribbon/NoteInfoTab.tsx b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx index 466410b26..889b28b21 100644 --- a/apps/client/src/widgets/ribbon/NoteInfoTab.tsx +++ b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "preact/hooks"; +import { useCallback, useEffect, useState } from "preact/hooks"; import { t } from "../../services/i18n"; import { TabContext } from "./ribbon-interface"; import { MetadataResponse, NoteSizeResponse, SubtreeSizeResponse } from "@triliumnext/commons"; @@ -7,6 +7,7 @@ import Button from "../react/Button"; import { formatDateTime } from "../../utils/formatters"; import { formatSize } from "../../services/utils"; import LoadingSpinner from "../react/LoadingSpinner"; +import { useTriliumEventBeta } from "../react/hooks"; export default function NoteInfoTab({ note }: TabContext) { const [ metadata, setMetadata ] = useState(); @@ -14,7 +15,7 @@ export default function NoteInfoTab({ note }: TabContext) { const [ noteSizeResponse, setNoteSizeResponse ] = useState(); const [ subtreeSizeResponse, setSubtreeSizeResponse ] = useState(); - useEffect(() => { + function refresh() { if (note) { server.get(`notes/${note?.noteId}/metadata`).then(setMetadata); } @@ -22,9 +23,15 @@ export default function NoteInfoTab({ note }: TabContext) { setNoteSizeResponse(undefined); setSubtreeSizeResponse(undefined); setIsLoading(false); - }, [ note?.noteId ]); + } - console.log("Got ", noteSizeResponse, subtreeSizeResponse); + useEffect(refresh, [ note?.noteId ]); + useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { + const noteId = note?.noteId; + if (noteId && (loadResults.isNoteReloaded(noteId) || loadResults.isNoteContentReloaded(noteId))) { + refresh(); + } + }); return (
From cc05572a3529ed1aba07464c77b7e3642ebe2272 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Aug 2025 19:27:58 +0300 Subject: [PATCH 057/191] feat(react/ribbon): port similar notes --- apps/client/src/widgets/react/NoteLink.tsx | 11 +- apps/client/src/widgets/ribbon/Ribbon.tsx | 7 +- .../src/widgets/ribbon/SimilarNotesTab.tsx | 40 ++++++ apps/client/src/widgets/ribbon/style.css | 21 ++++ .../widgets/ribbon_widgets/similar_notes.ts | 119 ------------------ apps/server/src/becca/similarity.ts | 7 +- apps/server/src/routes/api/similar_notes.ts | 3 +- packages/commons/src/lib/server_api.ts | 8 ++ 8 files changed, 85 insertions(+), 131 deletions(-) create mode 100644 apps/client/src/widgets/ribbon/SimilarNotesTab.tsx delete mode 100644 apps/client/src/widgets/ribbon_widgets/similar_notes.ts diff --git a/apps/client/src/widgets/react/NoteLink.tsx b/apps/client/src/widgets/react/NoteLink.tsx index 31dd4fbeb..21c0af3d3 100644 --- a/apps/client/src/widgets/react/NoteLink.tsx +++ b/apps/client/src/widgets/react/NoteLink.tsx @@ -5,16 +5,21 @@ import RawHtml from "./RawHtml"; interface NoteLinkOpts { notePath: string | string[]; showNotePath?: boolean; + style?: Record; } -export default function NoteLink({ notePath, showNotePath }: NoteLinkOpts) { +export default function NoteLink({ notePath, showNotePath, style }: NoteLinkOpts) { const stringifiedNotePath = Array.isArray(notePath) ? notePath.join("/") : notePath; const [ jqueryEl, setJqueryEl ] = useState>(); useEffect(() => { - link.createLink(stringifiedNotePath, { showNotePath: true }) + link.createLink(stringifiedNotePath, { showNotePath }) .then(setJqueryEl); - }, [ stringifiedNotePath, showNotePath ]) + }, [ stringifiedNotePath, showNotePath ]); + + if (style) { + jqueryEl?.css(style); + } return diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index abe0e1fdd..14d448d45 100644 --- a/apps/client/src/widgets/ribbon/Ribbon.tsx +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -14,6 +14,7 @@ import ScriptTab from "./ScriptTab"; import EditedNotesTab from "./EditedNotesTab"; import NotePropertiesTab from "./NotePropertiesTab"; import NoteInfoTab from "./NoteInfoTab"; +import SimilarNotesTab from "./SimilarNotesTab"; interface TitleContext { note: FNote | null | undefined; @@ -114,9 +115,11 @@ const TAB_CONFIGURATION = numberObjectsInPlace([ icon: "bx bxs-network-chart" }, { - // SimilarNotesWidget title: t("similar_notes.title"), - icon: "bx bx-bar-chart" + icon: "bx bx-bar-chart", + show: ({ note }) => note?.type !== "search" && !note?.isLabelTruthy("similarNotesWidgetDisabled"), + content: SimilarNotesTab, + toggleCommand: "toggleRibbonTabSimilarNotes" }, { title: t("note_info_widget.title"), diff --git a/apps/client/src/widgets/ribbon/SimilarNotesTab.tsx b/apps/client/src/widgets/ribbon/SimilarNotesTab.tsx new file mode 100644 index 000000000..b771f13bc --- /dev/null +++ b/apps/client/src/widgets/ribbon/SimilarNotesTab.tsx @@ -0,0 +1,40 @@ +import { useEffect, useState } from "preact/hooks"; +import { TabContext } from "./ribbon-interface"; +import { SimilarNoteResponse } from "@triliumnext/commons"; +import server from "../../services/server"; +import { t } from "../../services/i18n"; +import froca from "../../services/froca"; +import NoteLink from "../react/NoteLink"; + +export default function SimilarNotesTab({ note }: TabContext) { + const [ similarNotes, setSimilarNotes ] = useState(); + + useEffect(() => { + if (note) { + server.get(`similar-notes/${note.noteId}`).then(async similarNotes => { + if (similarNotes) { + const noteIds = similarNotes.flatMap((note) => note.notePath); + await froca.getNotes(noteIds, true); // preload all at once + } + setSimilarNotes(similarNotes); + }); + } + + }, [ note?.noteId ]); + + return ( +
+ {similarNotes?.length ? ( +
+ {similarNotes.map(({notePath, score}) => ( + + ))} +
+ ) : ( + <>{t("similar_notes.no_similar_notes_found")} + )} +
+ ) +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css index 678c24af7..7200e6a00 100644 --- a/apps/client/src/widgets/ribbon/style.css +++ b/apps/client/src/widgets/ribbon/style.css @@ -182,4 +182,25 @@ text-overflow: ellipsis; white-space: nowrap; } +/* #endregion */ + +/* #region Similar Notes */ +.similar-notes-wrapper { + max-height: 200px; + overflow: auto; + padding: 12px; +} + +.similar-notes-wrapper a { + display: inline-block; + border: 1px dotted var(--main-border-color); + border-radius: 20px; + background-color: var(--accented-background-color); + padding: 0 10px 0 10px; + margin: 0 3px 0 3px; + max-width: 10em; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} /* #endregion */ \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon_widgets/similar_notes.ts b/apps/client/src/widgets/ribbon_widgets/similar_notes.ts deleted file mode 100644 index f86fc714a..000000000 --- a/apps/client/src/widgets/ribbon_widgets/similar_notes.ts +++ /dev/null @@ -1,119 +0,0 @@ -import { t } from "../../services/i18n.js"; -import linkService from "../../services/link.js"; -import server from "../../services/server.js"; -import froca from "../../services/froca.js"; -import NoteContextAwareWidget from "../note_context_aware_widget.js"; -import type FNote from "../../entities/fnote.js"; -import type { EventData } from "../../components/app_context.js"; - -const TPL = /*html*/` -
- - -
-
-`; - -// TODO: Deduplicate with server -interface SimilarNote { - score: number; - notePath: string[]; - noteId: string; -} - -export default class SimilarNotesWidget extends NoteContextAwareWidget { - - private $similarNotesWrapper!: JQuery; - private title?: string; - private rendered?: boolean; - - get name() { - return "similarNotes"; - } - - get toggleCommand() { - return "toggleRibbonTabSimilarNotes"; - } - - isEnabled() { - return super.isEnabled() && this.note?.type !== "search" && !this.note?.isLabelTruthy("similarNotesWidgetDisabled"); - } - - getTitle() { - return { - show: this.isEnabled(), - - }; - } - - doRender() { - this.$widget = $(TPL); - this.contentSized(); - - this.$similarNotesWrapper = this.$widget.find(".similar-notes-wrapper"); - } - - async refreshWithNote(note: FNote) { - if (!this.note) { - return; - } - - // remember which title was when we found the similar notes - this.title = this.note.title; - - const similarNotes = await server.get(`similar-notes/${this.noteId}`); - - if (similarNotes.length === 0) { - this.$similarNotesWrapper.empty().append(t("similar_notes.no_similar_notes_found")); - - return; - } - - const noteIds = similarNotes.flatMap((note) => note.notePath); - - await froca.getNotes(noteIds, true); // preload all at once - - const $list = $("
"); - - for (const similarNote of similarNotes) { - const note = await froca.getNote(similarNote.noteId, true); - - if (!note) { - continue; - } - - const $item = (await linkService.createLink(similarNote.notePath.join("/"))).css("font-size", 24 * (1 - 1 / (1 + similarNote.score))); - - $list.append($item); - } - - this.$similarNotesWrapper.empty().append($list); - } - - entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { - if (this.note && this.title !== this.note.title) { - this.rendered = false; - - this.refresh(); - } - } -} diff --git a/apps/server/src/becca/similarity.ts b/apps/server/src/becca/similarity.ts index fe7ecda21..dc0a4c3f8 100644 --- a/apps/server/src/becca/similarity.ts +++ b/apps/server/src/becca/similarity.ts @@ -4,6 +4,7 @@ import beccaService from "./becca_service.js"; import dateUtils from "../services/date_utils.js"; import { JSDOM } from "jsdom"; import type BNote from "./entities/bnote.js"; +import { SimilarNote } from "@triliumnext/commons"; const DEBUG = false; @@ -36,12 +37,6 @@ interface DateLimits { maxDate: string; } -export interface SimilarNote { - score: number; - notePath: string[]; - noteId: string; -} - function filterUrlValue(value: string) { return value .replace(/https?:\/\//gi, "") diff --git a/apps/server/src/routes/api/similar_notes.ts b/apps/server/src/routes/api/similar_notes.ts index 8cd82dc72..6b9cbb926 100644 --- a/apps/server/src/routes/api/similar_notes.ts +++ b/apps/server/src/routes/api/similar_notes.ts @@ -4,13 +4,14 @@ import type { Request } from "express"; import similarityService from "../../becca/similarity.js"; import becca from "../../becca/becca.js"; +import { SimilarNoteResponse } from "@triliumnext/commons"; async function getSimilarNotes(req: Request) { const noteId = req.params.noteId; const _note = becca.getNoteOrThrow(noteId); - return await similarityService.findSimilarNotes(noteId); + return (await similarityService.findSimilarNotes(noteId) satisfies SimilarNoteResponse); } export default { diff --git a/packages/commons/src/lib/server_api.ts b/packages/commons/src/lib/server_api.ts index 46b403d0f..84a471670 100644 --- a/packages/commons/src/lib/server_api.ts +++ b/packages/commons/src/lib/server_api.ts @@ -185,3 +185,11 @@ export interface SubtreeSizeResponse { subTreeNoteCount: number; subTreeSize: number; } + +export interface SimilarNote { + score: number; + notePath: string[]; + noteId: string; +} + +export type SimilarNoteResponse = (SimilarNote[] | undefined); From 978d8291501e9b48cdb0629e952ca2e45c7241b2 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Aug 2025 20:17:00 +0300 Subject: [PATCH 058/191] feat(react/ribbon): port file notes --- .vscode/snippets.code-snippets | 5 + apps/client/src/services/open.ts | 4 +- .../src/widgets/react/FormFileUpload.tsx | 16 +- .../src/widgets/ribbon/FilePropertiesTab.tsx | 97 +++++++++++ apps/client/src/widgets/ribbon/Ribbon.tsx | 8 +- apps/client/src/widgets/ribbon/style.css | 18 ++ .../widgets/ribbon_widgets/file_properties.ts | 155 ------------------ 7 files changed, 141 insertions(+), 162 deletions(-) create mode 100644 apps/client/src/widgets/ribbon/FilePropertiesTab.tsx delete mode 100644 apps/client/src/widgets/ribbon_widgets/file_properties.ts diff --git a/.vscode/snippets.code-snippets b/.vscode/snippets.code-snippets index 77b251a4a..c7255af76 100644 --- a/.vscode/snippets.code-snippets +++ b/.vscode/snippets.code-snippets @@ -20,5 +20,10 @@ "scope": "typescript", "prefix": "jqf", "body": ["private $${1:name}!: JQuery;"] + }, + "region": { + "scope": "css", + "prefix": "region", + "body": ["/* #region ${1:name} */\n$0\n/* #endregion */"] } } diff --git a/apps/client/src/services/open.ts b/apps/client/src/services/open.ts index 7dab08a1a..0bcda805e 100644 --- a/apps/client/src/services/open.ts +++ b/apps/client/src/services/open.ts @@ -35,7 +35,7 @@ function download(url: string) { } } -function downloadFileNote(noteId: string) { +export function downloadFileNote(noteId: string) { const url = `${getFileUrl("notes", noteId)}?${Date.now()}`; // don't use cache download(url); @@ -163,7 +163,7 @@ async function openExternally(type: string, entityId: string, mime: string) { } } -const openNoteExternally = async (noteId: string, mime: string) => await openExternally("notes", noteId, mime); +export const openNoteExternally = async (noteId: string, mime: string) => await openExternally("notes", noteId, mime); const openAttachmentExternally = async (attachmentId: string, mime: string) => await openExternally("attachments", attachmentId, mime); function getHost() { diff --git a/apps/client/src/widgets/react/FormFileUpload.tsx b/apps/client/src/widgets/react/FormFileUpload.tsx index c2f53a5a9..0274aff8e 100644 --- a/apps/client/src/widgets/react/FormFileUpload.tsx +++ b/apps/client/src/widgets/react/FormFileUpload.tsx @@ -1,12 +1,22 @@ +import { Ref } from "preact"; + interface FormFileUploadProps { + name?: string; onChange: (files: FileList | null) => void; multiple?: boolean; + hidden?: boolean; + inputRef?: Ref; } -export default function FormFileUpload({ onChange, multiple }: FormFileUploadProps) { +export default function FormFileUpload({ inputRef, name, onChange, multiple, hidden }: FormFileUploadProps) { return ( - ) diff --git a/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx b/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx new file mode 100644 index 000000000..2af652135 --- /dev/null +++ b/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx @@ -0,0 +1,97 @@ +import { useEffect, useRef, useState } from "preact/hooks"; +import { t } from "../../services/i18n"; +import { formatSize } from "../../services/utils"; +import FormFileUpload from "../react/FormFileUpload"; +import { useNoteLabel, useTriliumEventBeta } from "../react/hooks"; +import { TabContext } from "./ribbon-interface"; +import FBlob from "../../entities/fblob"; +import Button from "../react/Button"; +import protected_session_holder from "../../services/protected_session_holder"; +import { downloadFileNote, openNoteExternally } from "../../services/open"; +import toast from "../../services/toast"; +import server from "../../services/server"; + +export default function FilePropertiesTab({ note }: TabContext) { + const [ originalFileName ] = useNoteLabel(note, "originalFileName"); + const [ blob, setBlob ] = useState(); + const canAccessProtectedNote = !note?.isProtected || protected_session_holder.isProtectedSessionAvailable(); + const inputRef = useRef(null); + + function refresh() { + note?.getBlob().then(setBlob); + } + + useEffect(refresh, [ note?.noteId ]); + useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { + if (note && loadResults.hasRevisionForNote(note.noteId)) { + refresh(); + } + }); + + return ( +
+ {note && ( + + + + + + + + + + + + + + + + + +
{t("file_properties.note_id")}:{note.noteId}{t("file_properties.original_file_name")}:{originalFileName ?? "?"}
{t("file_properties.file_type")}:{note.mime}{t("file_properties.file_size")}:{formatSize(blob?.contentLength ?? 0)}
+
+
+
+ )} +
+ ); +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index 14d448d45..bfff47091 100644 --- a/apps/client/src/widgets/ribbon/Ribbon.tsx +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -15,6 +15,7 @@ import EditedNotesTab from "./EditedNotesTab"; import NotePropertiesTab from "./NotePropertiesTab"; import NoteInfoTab from "./NoteInfoTab"; import SimilarNotesTab from "./SimilarNotesTab"; +import FilePropertiesTab from "./FilePropertiesTab"; interface TitleContext { note: FNote | null | undefined; @@ -77,9 +78,12 @@ const TAB_CONFIGURATION = numberObjectsInPlace([ activate: true }, { - // FilePropertiesWidget title: t("file_properties.title"), - icon: "bx bx-file" + icon: "bx bx-file", + content: FilePropertiesTab, + show: ({ note }) => note?.type === "file", + toggleCommand: "toggleRibbonTabFileProperties", + activate: true }, { // ImagePropertiesWidget diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css index 7200e6a00..87baedfc2 100644 --- a/apps/client/src/widgets/ribbon/style.css +++ b/apps/client/src/widgets/ribbon/style.css @@ -203,4 +203,22 @@ white-space: nowrap; overflow: hidden; } +/* #endregion */ + +/* #region File Properties */ +.file-table { + width: 100%; + margin-top: 10px; +} + +.file-table th, .file-table td { + padding: 5px; + overflow-wrap: anywhere; +} + +.file-buttons { + padding: 10px; + display: flex; + justify-content: space-evenly; +} /* #endregion */ \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon_widgets/file_properties.ts b/apps/client/src/widgets/ribbon_widgets/file_properties.ts deleted file mode 100644 index 4d4b419c3..000000000 --- a/apps/client/src/widgets/ribbon_widgets/file_properties.ts +++ /dev/null @@ -1,155 +0,0 @@ -import server from "../../services/server.js"; -import NoteContextAwareWidget from "../note_context_aware_widget.js"; -import toastService from "../../services/toast.js"; -import openService from "../../services/open.js"; -import utils from "../../services/utils.js"; -import protectedSessionHolder from "../../services/protected_session_holder.js"; -import { t } from "../../services/i18n.js"; -import type FNote from "../../entities/fnote.js"; - -const TPL = /*html*/` -
- - - - - - - - - - - - - - - - - - - -
${t("file_properties.note_id")}:${t("file_properties.original_file_name")}:
${t("file_properties.file_type")}:${t("file_properties.file_size")}:
-
- - - - - - - -
-
-
`; - -export default class FilePropertiesWidget extends NoteContextAwareWidget { - - private $fileNoteId!: JQuery; - private $fileName!: JQuery; - private $fileType!: JQuery; - private $fileSize!: JQuery; - private $downloadButton!: JQuery; - private $openButton!: JQuery; - private $uploadNewRevisionButton!: JQuery; - private $uploadNewRevisionInput!: JQuery; - - get name() { - return "fileProperties"; - } - - get toggleCommand() { - return "toggleRibbonTabFileProperties"; - } - - isEnabled() { - return this.note && this.note.type === "file"; - } - - getTitle() { - return { - show: this.isEnabled(), - activate: true, - - }; - } - - doRender() { - this.$widget = $(TPL); - this.contentSized(); - this.$fileNoteId = this.$widget.find(".file-note-id"); - this.$fileName = this.$widget.find(".file-filename"); - this.$fileType = this.$widget.find(".file-filetype"); - this.$fileSize = this.$widget.find(".file-filesize"); - this.$downloadButton = this.$widget.find(".file-download"); - this.$openButton = this.$widget.find(".file-open"); - this.$uploadNewRevisionButton = this.$widget.find(".file-upload-new-revision"); - this.$uploadNewRevisionInput = this.$widget.find(".file-upload-new-revision-input"); - - this.$downloadButton.on("click", () => this.noteId && openService.downloadFileNote(this.noteId)); - this.$openButton.on("click", () => this.noteId && this.note && openService.openNoteExternally(this.noteId, this.note.mime)); - - this.$uploadNewRevisionButton.on("click", () => { - this.$uploadNewRevisionInput.trigger("click"); - }); - - this.$uploadNewRevisionInput.on("change", async () => { - const fileToUpload = this.$uploadNewRevisionInput[0].files[0]; // copy to allow reset below - this.$uploadNewRevisionInput.val(""); - - const result = await server.upload(`notes/${this.noteId}/file`, fileToUpload); - - if (result.uploaded) { - toastService.showMessage(t("file_properties.upload_success")); - - this.refresh(); - } else { - toastService.showError(t("file_properties.upload_failed")); - } - }); - } - - async refreshWithNote(note: FNote) { - this.$widget.show(); - - if (!this.note) { - return; - } - - this.$fileNoteId.text(note.noteId); - this.$fileName.text(note.getLabelValue("originalFileName") || "?"); - this.$fileType.text(note.mime); - - const blob = await this.note.getBlob(); - - this.$fileSize.text(utils.formatSize(blob?.contentLength ?? 0)); - - // open doesn't work for protected notes since it works through a browser which isn't in protected session - this.$openButton.toggle(!note.isProtected); - this.$downloadButton.toggle(!note.isProtected || protectedSessionHolder.isProtectedSessionAvailable()); - this.$uploadNewRevisionButton.toggle(!note.isProtected || protectedSessionHolder.isProtectedSessionAvailable()); - } -} From 21683db0b887d4459226a4a9737b05516a5ce9c1 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Aug 2025 20:25:15 +0300 Subject: [PATCH 059/191] refactor(react/ribbon): dedicated component for file upload --- apps/client/src/widgets/react/Button.tsx | 2 +- .../src/widgets/react/FormFileUpload.tsx | 25 +++++++++++++++++++ .../src/widgets/ribbon/FilePropertiesTab.tsx | 13 +++------- 3 files changed, 29 insertions(+), 11 deletions(-) diff --git a/apps/client/src/widgets/react/Button.tsx b/apps/client/src/widgets/react/Button.tsx index 0ab6eae48..ddfe225fe 100644 --- a/apps/client/src/widgets/react/Button.tsx +++ b/apps/client/src/widgets/react/Button.tsx @@ -4,7 +4,7 @@ import { useRef, useMemo } from "preact/hooks"; import { memo } from "preact/compat"; import { CommandNames } from "../../components/app_context"; -interface ButtonProps { +export interface ButtonProps { name?: string; /** Reference to the button element. Mostly useful for requesting focus. */ buttonRef?: RefObject; diff --git a/apps/client/src/widgets/react/FormFileUpload.tsx b/apps/client/src/widgets/react/FormFileUpload.tsx index 0274aff8e..c43008b09 100644 --- a/apps/client/src/widgets/react/FormFileUpload.tsx +++ b/apps/client/src/widgets/react/FormFileUpload.tsx @@ -1,4 +1,6 @@ import { Ref } from "preact"; +import Button, { ButtonProps } from "./Button"; +import { useRef } from "preact/hooks"; interface FormFileUploadProps { name?: string; @@ -20,4 +22,27 @@ export default function FormFileUpload({ inputRef, name, onChange, multiple, hid onChange={e => onChange((e.target as HTMLInputElement).files)} /> ) +} + +/** + * Combination of a button with a hidden file upload field. + * + * @param param the change listener for the file upload and the properties for the button. + */ +export function FormFileUploadButton({ onChange, ...buttonProps }: Omit & Pick) { + const inputRef = useRef(null); + + return ( + <> +
+ + )} +
+ ) +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index bfff47091..4d6c84be7 100644 --- a/apps/client/src/widgets/ribbon/Ribbon.tsx +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -16,6 +16,7 @@ import NotePropertiesTab from "./NotePropertiesTab"; import NoteInfoTab from "./NoteInfoTab"; import SimilarNotesTab from "./SimilarNotesTab"; import FilePropertiesTab from "./FilePropertiesTab"; +import ImagePropertiesTab from "./ImagePropertiesTab"; interface TitleContext { note: FNote | null | undefined; @@ -86,9 +87,12 @@ const TAB_CONFIGURATION = numberObjectsInPlace([ activate: true }, { - // ImagePropertiesWidget title: t("image_properties.title"), - icon: "bx bx-image" + icon: "bx bx-image", + content: ImagePropertiesTab, + show: ({ note }) => note?.type === "image", + toggleCommand: "toggleRibbonTabImageProperties", + activate: true, }, { // BasicProperties @@ -135,7 +139,7 @@ const TAB_CONFIGURATION = numberObjectsInPlace([ ]); export default function Ribbon() { - const { note } = useNoteContext(); + const { note, ntxId } = useNoteContext(); const titleContext: TitleContext = { note }; const [ activeTabIndex, setActiveTabIndex ] = useState(); const filteredTabs = useMemo(() => TAB_CONFIGURATION.filter(tab => tab.show?.(titleContext)), [ titleContext, note ]); @@ -171,7 +175,11 @@ export default function Ribbon() { return; } - return tab?.content && tab.content({ note, hidden: !isActive }); + return tab?.content && tab.content({ + note, + hidden: !isActive, + ntxId + }); })}
diff --git a/apps/client/src/widgets/ribbon/ribbon-interface.ts b/apps/client/src/widgets/ribbon/ribbon-interface.ts index 030361fce..bc8186734 100644 --- a/apps/client/src/widgets/ribbon/ribbon-interface.ts +++ b/apps/client/src/widgets/ribbon/ribbon-interface.ts @@ -3,4 +3,5 @@ import FNote from "../../entities/fnote"; export interface TabContext { note: FNote | null | undefined; hidden: boolean; + ntxId?: string | null | undefined; } diff --git a/apps/client/src/widgets/ribbon_widgets/image_properties.ts b/apps/client/src/widgets/ribbon_widgets/image_properties.ts deleted file mode 100644 index dfa67d7db..000000000 --- a/apps/client/src/widgets/ribbon_widgets/image_properties.ts +++ /dev/null @@ -1,135 +0,0 @@ -import server from "../../services/server.js"; -import NoteContextAwareWidget from "../note_context_aware_widget.js"; -import toastService from "../../services/toast.js"; -import openService from "../../services/open.js"; -import utils from "../../services/utils.js"; -import { t } from "../../services/i18n.js"; -import type FNote from "../../entities/fnote.js"; - -const TPL = /*html*/` -
-
- - ${t("image_properties.original_file_name")}: - - - - - ${t("image_properties.file_type")}: - - - - - ${t("image_properties.file_size")}: - - -
- -
- - - - - - - -
- - -
`; - -export default class ImagePropertiesWidget extends NoteContextAwareWidget { - - private $copyReferenceToClipboardButton!: JQuery; - private $uploadNewRevisionButton!: JQuery; - private $uploadNewRevisionInput!: JQuery; - private $fileName!: JQuery; - private $fileType!: JQuery; - private $fileSize!: JQuery; - private $openButton!: JQuery; - private $imageDownloadButton!: JQuery; - - get name() { - return "imageProperties"; - } - - get toggleCommand() { - return "toggleRibbonTabImageProperties"; - } - - isEnabled() { - return this.note && this.note.type === "image"; - } - - getTitle() { - return { - show: this.isEnabled(), - activate: true, - - }; - } - - doRender() { - this.$widget = $(TPL); - this.contentSized(); - - this.$copyReferenceToClipboardButton = this.$widget.find(".image-copy-reference-to-clipboard"); - this.$copyReferenceToClipboardButton.on("click", () => this.triggerEvent(`copyImageReferenceToClipboard`, { ntxId: this.noteContext?.ntxId })); - - this.$uploadNewRevisionButton = this.$widget.find(".image-upload-new-revision"); - this.$uploadNewRevisionInput = this.$widget.find(".image-upload-new-revision-input"); - - this.$fileName = this.$widget.find(".image-filename"); - this.$fileType = this.$widget.find(".image-filetype"); - this.$fileSize = this.$widget.find(".image-filesize"); - - this.$openButton = this.$widget.find(".image-open"); - this.$openButton.on("click", () => this.noteId && this.note && openService.openNoteExternally(this.noteId, this.note.mime)); - - this.$imageDownloadButton = this.$widget.find(".image-download"); - this.$imageDownloadButton.on("click", () => this.noteId && openService.downloadFileNote(this.noteId)); - - this.$uploadNewRevisionButton.on("click", () => { - this.$uploadNewRevisionInput.trigger("click"); - }); - - this.$uploadNewRevisionInput.on("change", async () => { - const fileToUpload = this.$uploadNewRevisionInput[0].files[0]; // copy to allow reset below - this.$uploadNewRevisionInput.val(""); - - const result = await server.upload(`images/${this.noteId}`, fileToUpload); - - if (result.uploaded) { - toastService.showMessage(t("image_properties.upload_success")); - - await utils.clearBrowserCache(); - - this.refresh(); - } else { - toastService.showError(t("image_properties.upload_failed", { message: result.message })); - } - }); - } - - async refreshWithNote(note: FNote) { - this.$widget.show(); - - const blob = await this.note?.getBlob(); - - this.$fileName.text(note.getLabelValue("originalFileName") || "?"); - this.$fileSize.text(utils.formatSize(blob?.contentLength ?? 0)); - this.$fileType.text(note.mime); - } -} From 8f69b87dd16c429ef743e31ae78a0b19c12707d1 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Aug 2025 21:45:03 +0300 Subject: [PATCH 061/191] feat(react/ribbon): port note paths tab --- .../src/widgets/react/KeyboardShortcut.tsx | 4 +- apps/client/src/widgets/react/NoteLink.tsx | 10 +- apps/client/src/widgets/react/react_utils.tsx | 4 +- .../src/widgets/ribbon/EditedNotesTab.tsx | 4 +- .../src/widgets/ribbon/FilePropertiesTab.tsx | 6 +- .../src/widgets/ribbon/NotePathsTab.tsx | 107 ++++++++++++ apps/client/src/widgets/ribbon/Ribbon.tsx | 17 +- .../src/widgets/ribbon/ribbon-interface.ts | 2 + apps/client/src/widgets/ribbon/style.css | 24 +++ .../src/widgets/ribbon_widgets/note_paths.ts | 153 ------------------ 10 files changed, 161 insertions(+), 170 deletions(-) create mode 100644 apps/client/src/widgets/ribbon/NotePathsTab.tsx delete mode 100644 apps/client/src/widgets/ribbon_widgets/note_paths.ts diff --git a/apps/client/src/widgets/react/KeyboardShortcut.tsx b/apps/client/src/widgets/react/KeyboardShortcut.tsx index 852fc8733..bb44820dc 100644 --- a/apps/client/src/widgets/react/KeyboardShortcut.tsx +++ b/apps/client/src/widgets/react/KeyboardShortcut.tsx @@ -1,7 +1,7 @@ import { ActionKeyboardShortcut, KeyboardActionNames } from "@triliumnext/commons"; import { useEffect, useState } from "preact/hooks"; import keyboard_actions from "../../services/keyboard_actions"; -import { separateByCommas } from "./react_utils"; +import { joinElements } from "./react_utils"; interface KeyboardShortcutProps { actionName: KeyboardActionNames; @@ -22,7 +22,7 @@ export default function KeyboardShortcut({ actionName }: KeyboardShortcutProps) <> {action.effectiveShortcuts?.map((shortcut, i) => { const keys = shortcut.split("+"); - return separateByCommas(keys + return joinElements(keys .map((key, i) => ( <> {key} {i + 1 < keys.length && "+ "} diff --git a/apps/client/src/widgets/react/NoteLink.tsx b/apps/client/src/widgets/react/NoteLink.tsx index 21c0af3d3..b7f3a3409 100644 --- a/apps/client/src/widgets/react/NoteLink.tsx +++ b/apps/client/src/widgets/react/NoteLink.tsx @@ -6,9 +6,10 @@ interface NoteLinkOpts { notePath: string | string[]; showNotePath?: boolean; style?: Record; + noPreview?: boolean; } -export default function NoteLink({ notePath, showNotePath, style }: NoteLinkOpts) { +export default function NoteLink({ notePath, showNotePath, style, noPreview }: NoteLinkOpts) { const stringifiedNotePath = Array.isArray(notePath) ? notePath.join("/") : notePath; const [ jqueryEl, setJqueryEl ] = useState>(); @@ -21,6 +22,13 @@ export default function NoteLink({ notePath, showNotePath, style }: NoteLinkOpts jqueryEl?.css(style); } + const $linkEl = jqueryEl?.find("a"); + if (noPreview) { + $linkEl?.addClass("no-tooltip-preview"); + } + + $linkEl?.addClass("tn-link"); + return } \ No newline at end of file diff --git a/apps/client/src/widgets/react/react_utils.tsx b/apps/client/src/widgets/react/react_utils.tsx index 490dd2094..ebb4c6156 100644 --- a/apps/client/src/widgets/react/react_utils.tsx +++ b/apps/client/src/widgets/react/react_utils.tsx @@ -43,7 +43,7 @@ export function disposeReactWidget(container: Element) { render(null, container); } -export function separateByCommas(components: ComponentChild[]) { +export function joinElements(components: ComponentChild[], separator = ", ") { return components.reduce((acc, item) => - (acc.length ? [...acc, ", ", item] : [item]), []); + (acc.length ? [...acc, separator, item] : [item]), []); } diff --git a/apps/client/src/widgets/ribbon/EditedNotesTab.tsx b/apps/client/src/widgets/ribbon/EditedNotesTab.tsx index c85ac4ad1..ce7bcfc19 100644 --- a/apps/client/src/widgets/ribbon/EditedNotesTab.tsx +++ b/apps/client/src/widgets/ribbon/EditedNotesTab.tsx @@ -5,7 +5,7 @@ import server from "../../services/server"; import { t } from "../../services/i18n"; import froca from "../../services/froca"; import NoteLink from "../react/NoteLink"; -import { separateByCommas } from "../react/react_utils"; +import { joinElements } from "../react/react_utils"; export default function EditedNotesTab({ note }: TabContext) { const [ editedNotes, setEditedNotes ] = useState(); @@ -29,7 +29,7 @@ export default function EditedNotesTab({ note }: TabContext) { }}> {editedNotes ? (
- {separateByCommas(editedNotes.map(editedNote => { + {joinElements(editedNotes.map(editedNote => { return ( {editedNote.isDeleted ? ( diff --git a/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx b/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx index 916f17ff9..5d738d50f 100644 --- a/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx +++ b/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx @@ -1,10 +1,8 @@ -import { useEffect, useRef, useState } from "preact/hooks"; import { t } from "../../services/i18n"; import { formatSize } from "../../services/utils"; -import FormFileUpload, { FormFileUploadButton } from "../react/FormFileUpload"; -import { useNoteBlob, useNoteLabel, useTriliumEventBeta } from "../react/hooks"; +import { FormFileUploadButton } from "../react/FormFileUpload"; +import { useNoteBlob, useNoteLabel } from "../react/hooks"; import { TabContext } from "./ribbon-interface"; -import FBlob from "../../entities/fblob"; import Button from "../react/Button"; import protected_session_holder from "../../services/protected_session_holder"; import { downloadFileNote, openNoteExternally } from "../../services/open"; diff --git a/apps/client/src/widgets/ribbon/NotePathsTab.tsx b/apps/client/src/widgets/ribbon/NotePathsTab.tsx new file mode 100644 index 000000000..c5017af09 --- /dev/null +++ b/apps/client/src/widgets/ribbon/NotePathsTab.tsx @@ -0,0 +1,107 @@ +import { TabContext } from "./ribbon-interface"; +import { t } from "../../services/i18n"; +import Button from "../react/Button"; +import { useTriliumEventBeta } from "../react/hooks"; +import { useEffect, useMemo, useState } from "preact/hooks"; +import { NotePathRecord } from "../../entities/fnote"; +import NoteLink from "../react/NoteLink"; +import { joinElements } from "../react/react_utils"; + +export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabContext) { + const [ sortedNotePaths, setSortedNotePaths ] = useState(); + + function refresh() { + if (!note) return; + setSortedNotePaths(note + .getSortedNotePathRecords(hoistedNoteId) + .filter((notePath) => !notePath.isHidden)); + } + + useEffect(refresh, [ note?.noteId ]); + useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { + const noteId = note?.noteId; + if (!noteId) return; + if (loadResults.getBranchRows().find((branch) => branch.noteId === noteId) + || loadResults.isNoteReloaded(noteId)) { + refresh(); + } + }); + + return ( +
+ {sortedNotePaths && ( + <> +
+ {sortedNotePaths.length > 0 ? t("note_paths.intro_placed") : t("note_paths.intro_not_placed")} +
+ +
    + {sortedNotePaths.map(sortedNotePath => ( + + ))} +
+ +
+ ) +} + +function NotePath({ currentNotePath, notePathRecord }: { currentNotePath: string, notePathRecord?: NotePathRecord }) { + const notePath = notePathRecord?.notePath ?? []; + const notePathString = useMemo(() => notePath.join("/"), [ notePath ]); + + const [ classes, icons ] = useMemo(() => { + const classes: string[] = []; + const icons: { icon: string, title: string }[] = []; + + if (notePathString === currentNotePath) { + classes.push("path-current"); + } + + if (!notePathRecord || notePathRecord.isInHoistedSubTree) { + classes.push("path-in-hoisted-subtree"); + } else { + icons.push({ icon: "bx bx-trending-up", title: t("note_paths.outside_hoisted") }) + } + + if (notePathRecord?.isArchived) { + classes.push("path-archived"); + icons.push({ icon: "bx bx-archive", title: t("note_paths.archived") }) + } + + if (notePathRecord?.isSearch) { + classes.push("path-search"); + icons.push({ icon: "bx bx-search", title: t("note_paths.search") }) + } + + return [ classes.join(" "), icons ]; + }, [ notePathString, currentNotePath, notePathRecord ]); + + // Determine the full note path (for the links) of every component of the current note path. + const pathSegments: string[] = []; + const fullNotePaths: string[] = []; + for (const noteId of notePath) { + pathSegments.push(noteId); + fullNotePaths.push(pathSegments.join("/")); + } + + return ( +
  • + {joinElements(fullNotePaths.map(notePath => ( + + )), " / ")} + + {icons.map(({ icon, title }) => ( + + ))} +
    • + ) +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index 4d6c84be7..e14ae45c8 100644 --- a/apps/client/src/widgets/ribbon/Ribbon.tsx +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -17,6 +17,7 @@ import NoteInfoTab from "./NoteInfoTab"; import SimilarNotesTab from "./SimilarNotesTab"; import FilePropertiesTab from "./FilePropertiesTab"; import ImagePropertiesTab from "./ImagePropertiesTab"; +import NotePathsTab from "./NotePathsTab"; interface TitleContext { note: FNote | null | undefined; @@ -27,7 +28,7 @@ interface TabConfiguration { icon: string; // TODO: Mark as required after porting them all. content?: (context: TabContext) => VNode; - show?: (context: TitleContext) => boolean | null | undefined; + show?: boolean | ((context: TitleContext) => boolean | null | undefined); toggleCommand?: CommandNames; activate?: boolean | ((context: TitleContext) => boolean); /** @@ -113,9 +114,11 @@ const TAB_CONFIGURATION = numberObjectsInPlace([ icon: "bx bx-list-plus" }, { - // NotePathsWidget title: t("note_paths.title"), - icon: "bx bx-collection" + icon: "bx bx-collection", + content: NotePathsTab, + show: true, + toggleCommand: "toggleRibbonTabNotePaths" }, { // NoteMapRibbonWidget @@ -139,10 +142,10 @@ const TAB_CONFIGURATION = numberObjectsInPlace([ ]); export default function Ribbon() { - const { note, ntxId } = useNoteContext(); + const { note, ntxId, hoistedNoteId, notePath } = useNoteContext(); const titleContext: TitleContext = { note }; const [ activeTabIndex, setActiveTabIndex ] = useState(); - const filteredTabs = useMemo(() => TAB_CONFIGURATION.filter(tab => tab.show?.(titleContext)), [ titleContext, note ]); + const filteredTabs = useMemo(() => TAB_CONFIGURATION.filter(tab => typeof tab.show === "boolean" ? tab.show : tab.show?.(titleContext)), [ titleContext, note ]); return (
    @@ -178,7 +181,9 @@ export default function Ribbon() { return tab?.content && tab.content({ note, hidden: !isActive, - ntxId + ntxId, + hoistedNoteId, + notePath }); })}
    diff --git a/apps/client/src/widgets/ribbon/ribbon-interface.ts b/apps/client/src/widgets/ribbon/ribbon-interface.ts index bc8186734..1165447e2 100644 --- a/apps/client/src/widgets/ribbon/ribbon-interface.ts +++ b/apps/client/src/widgets/ribbon/ribbon-interface.ts @@ -4,4 +4,6 @@ export interface TabContext { note: FNote | null | undefined; hidden: boolean; ntxId?: string | null | undefined; + hoistedNoteId?: string; + notePath?: string; } diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css index 87baedfc2..dee220bf6 100644 --- a/apps/client/src/widgets/ribbon/style.css +++ b/apps/client/src/widgets/ribbon/style.css @@ -221,4 +221,28 @@ display: flex; justify-content: space-evenly; } +/* #endregion */ + +/* #region Note paths */ +.note-paths-widget { + padding: 12px; + max-height: 300px; + overflow-y: auto; +} + +.note-path-list { + margin-top: 10px; +} + +.note-path-list .path-current a { + font-weight: bold; +} + +.note-path-list .path-archived a { + color: var(--muted-text-color) !important; +} + +.note-path-list .path-search a { + font-style: italic; +} /* #endregion */ \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon_widgets/note_paths.ts b/apps/client/src/widgets/ribbon_widgets/note_paths.ts deleted file mode 100644 index 9377a2198..000000000 --- a/apps/client/src/widgets/ribbon_widgets/note_paths.ts +++ /dev/null @@ -1,153 +0,0 @@ -import NoteContextAwareWidget from "../note_context_aware_widget.js"; -import treeService from "../../services/tree.js"; -import linkService from "../../services/link.js"; -import { t } from "../../services/i18n.js"; -import type FNote from "../../entities/fnote.js"; -import type { NotePathRecord } from "../../entities/fnote.js"; -import type { EventData } from "../../components/app_context.js"; - -const TPL = /*html*/` -
    - - -
    - -
      - - -
      `; - -export default class NotePathsWidget extends NoteContextAwareWidget { - - private $notePathIntro!: JQuery; - private $notePathList!: JQuery; - - get name() { - return "notePaths"; - } - - get toggleCommand() { - return "toggleRibbonTabNotePaths"; - } - - getTitle() { - return { - show: true, - - }; - } - - doRender() { - this.$widget = $(TPL); - this.contentSized(); - - this.$notePathIntro = this.$widget.find(".note-path-intro"); - this.$notePathList = this.$widget.find(".note-path-list"); - } - - async refreshWithNote(note: FNote) { - this.$notePathList.empty(); - - if (!this.note || this.noteId === "root") { - this.$notePathList.empty().append(await this.getRenderedPath(["root"])); - - return; - } - - const sortedNotePaths = this.note.getSortedNotePathRecords(this.hoistedNoteId).filter((notePath) => !notePath.isHidden); - - if (sortedNotePaths.length > 0) { - this.$notePathIntro.text(t("note_paths.intro_placed")); - } else { - this.$notePathIntro.text(t("note_paths.intro_not_placed")); - } - - const renderedPaths: JQuery[] = []; - - for (const notePathRecord of sortedNotePaths) { - const notePath = notePathRecord.notePath; - - renderedPaths.push(await this.getRenderedPath(notePath, notePathRecord)); - } - - this.$notePathList.empty().append(...renderedPaths); - } - - async getRenderedPath(notePath: string[], notePathRecord: NotePathRecord | null = null) { - const $pathItem = $("
    • "); - const pathSegments: string[] = []; - const lastIndex = notePath.length - 1; - - for (let i = 0; i < notePath.length; i++) { - const noteId = notePath[i]; - pathSegments.push(noteId); - const title = await treeService.getNoteTitle(noteId); - const $noteLink = await linkService.createLink(pathSegments.join("/"), { title }); - - $noteLink.find("a").addClass("no-tooltip-preview tn-link"); - $pathItem.append($noteLink); - - if (i != lastIndex) { - $pathItem.append(" / "); - } - } - - const icons: string[] = []; - - if (this.notePath === notePath.join("/")) { - $pathItem.addClass("path-current"); - } - - if (!notePathRecord || notePathRecord.isInHoistedSubTree) { - $pathItem.addClass("path-in-hoisted-subtree"); - } else { - icons.push(``); - } - - if (notePathRecord?.isArchived) { - $pathItem.addClass("path-archived"); - - icons.push(``); - } - - if (notePathRecord?.isSearch) { - $pathItem.addClass("path-search"); - - icons.push(``); - } - - if (icons.length > 0) { - $pathItem.append(` ${icons.join(" ")}`); - } - - return $pathItem; - } - - entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { - if (loadResults.getBranchRows().find((branch) => branch.noteId === this.noteId) || (this.noteId != null && loadResults.isNoteReloaded(this.noteId))) { - this.refresh(); - } - } -} From b24d78693364a3380277209635e85420d9a542d1 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Aug 2025 21:58:35 +0300 Subject: [PATCH 062/191] chore(react/ribbon): fix a few type errors --- apps/client/src/widgets/ribbon/NotePathsTab.tsx | 2 +- apps/client/src/widgets/ribbon/ribbon-interface.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/client/src/widgets/ribbon/NotePathsTab.tsx b/apps/client/src/widgets/ribbon/NotePathsTab.tsx index c5017af09..469f32430 100644 --- a/apps/client/src/widgets/ribbon/NotePathsTab.tsx +++ b/apps/client/src/widgets/ribbon/NotePathsTab.tsx @@ -54,7 +54,7 @@ export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabConte ) } -function NotePath({ currentNotePath, notePathRecord }: { currentNotePath: string, notePathRecord?: NotePathRecord }) { +function NotePath({ currentNotePath, notePathRecord }: { currentNotePath?: string | null, notePathRecord?: NotePathRecord }) { const notePath = notePathRecord?.notePath ?? []; const notePathString = useMemo(() => notePath.join("/"), [ notePath ]); diff --git a/apps/client/src/widgets/ribbon/ribbon-interface.ts b/apps/client/src/widgets/ribbon/ribbon-interface.ts index 1165447e2..6fa15edc5 100644 --- a/apps/client/src/widgets/ribbon/ribbon-interface.ts +++ b/apps/client/src/widgets/ribbon/ribbon-interface.ts @@ -3,7 +3,7 @@ import FNote from "../../entities/fnote"; export interface TabContext { note: FNote | null | undefined; hidden: boolean; - ntxId?: string | null | undefined; + ntxId?: string | null; hoistedNoteId?: string; - notePath?: string; + notePath?: string | null; } From 7fadf4c6e1836356825a0d5b7dd8a2652eb3e7ec Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Aug 2025 23:12:14 +0300 Subject: [PATCH 063/191] chore(react): prototype hook to render legacy widgets --- apps/client/src/widgets/react/hooks.tsx | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 9868e9f55..dfaa029d0 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -7,10 +7,12 @@ import options, { type OptionValue } from "../../services/options"; import utils, { reloadFrontendApp } from "../../services/utils"; import Component from "../../components/component"; import NoteContext from "../../components/note_context"; -import { ReactWrappedWidget } from "../basic_widget"; +import BasicWidget, { ReactWrappedWidget } from "../basic_widget"; import FNote from "../../entities/fnote"; import attributes from "../../services/attributes"; import FBlob from "../../entities/fblob"; +import RawHtml from "./RawHtml"; +import NoteContextAwareWidget from "../note_context_aware_widget"; type TriliumEventHandler = (data: EventData) => void; const registeredHandlers: Map[]>> = new Map(); @@ -410,4 +412,22 @@ export function useNoteBlob(note: FNote | null | undefined): [ FBlob | null | un }); return [ blob ] as const; +} + +export function useLegacyWidget(widgetFactory: () => BasicWidget, { noteContext }: { + noteContext?: NoteContext; +} = {}) { + const widget = useMemo(widgetFactory, []); + const parentComponent = useContext(ParentComponent); + + if (parentComponent) { + parentComponent.child(widget); + } + + if (noteContext && widget instanceof NoteContextAwareWidget) { + console.log("Inject!"); + widget.setNoteContextEvent({ noteContext }); + } + + return } \ No newline at end of file From 4bd25a0d4ab24db0094a6ea7435ec6c9a83f411b Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Aug 2025 23:24:00 +0300 Subject: [PATCH 064/191] chore(react): use different injection mechanism --- apps/client/src/widgets/react/hooks.tsx | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index dfaa029d0..82fe5545e 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -417,17 +417,27 @@ export function useNoteBlob(note: FNote | null | undefined): [ FBlob | null | un export function useLegacyWidget(widgetFactory: () => BasicWidget, { noteContext }: { noteContext?: NoteContext; } = {}) { + const ref = useRef(null); const widget = useMemo(widgetFactory, []); const parentComponent = useContext(ParentComponent); + useEffect(() => { + if (!ref.current) return; + + const $container = $(ref.current); + $container.empty(); + widget.render().appendTo($container); + + if (noteContext && widget instanceof NoteContextAwareWidget) { + console.log("Injecting note context", noteContext); + widget.setNoteContextEvent({ noteContext }); + widget.activeContextChangedEvent({ noteContext }); + } + }, [ widget ]); + if (parentComponent) { parentComponent.child(widget); - } + } - if (noteContext && widget instanceof NoteContextAwareWidget) { - console.log("Inject!"); - widget.setNoteContextEvent({ noteContext }); - } - - return + return
      } \ No newline at end of file From df3aa047876aaa23c6b9d3181745ce4a883b347f Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Aug 2025 23:33:02 +0300 Subject: [PATCH 065/191] chore(react): proper legacy widget injection & event handling --- apps/client/src/widgets/basic_widget.ts | 2 ++ apps/client/src/widgets/react/hooks.tsx | 37 +++++++++++++++++-------- 2 files changed, 27 insertions(+), 12 deletions(-) diff --git a/apps/client/src/widgets/basic_widget.ts b/apps/client/src/widgets/basic_widget.ts index ff3ea276c..b783e7a21 100644 --- a/apps/client/src/widgets/basic_widget.ts +++ b/apps/client/src/widgets/basic_widget.ts @@ -302,6 +302,8 @@ export class ReactWrappedWidget extends BasicWidget { for (const listener of this.listeners[name]) { listener(data); } + + super.handleEvent(name, data); } registerHandler(name: T, handler: EventHandler) { diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 82fe5545e..a1654eb42 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -418,26 +418,39 @@ export function useLegacyWidget(widgetFactory: () => BasicWidget, { noteContext noteContext?: NoteContext; } = {}) { const ref = useRef(null); - const widget = useMemo(widgetFactory, []); const parentComponent = useContext(ParentComponent); - useEffect(() => { - if (!ref.current) return; + // Render the widget once. + const [ widget, renderedWidget ] = useMemo(() => { + const widget = widgetFactory(); - const $container = $(ref.current); - $container.empty(); - widget.render().appendTo($container); + if (parentComponent) { + parentComponent.child(widget); + } if (noteContext && widget instanceof NoteContextAwareWidget) { - console.log("Injecting note context", noteContext); widget.setNoteContextEvent({ noteContext }); + } + + const renderedWidget = widget.render(); + return [ widget, renderedWidget ]; + }, [widgetFactory]); + + // Attach the widget to the parent. + useEffect(() => { + if (ref.current) { + ref.current.innerHTML = ""; + renderedWidget.appendTo(ref.current); + } + }, [ renderedWidget ]); + + // Inject the note context. + useEffect(() => { + console.log("Injecting note context"); + if (noteContext && widget instanceof NoteContextAwareWidget) { widget.activeContextChangedEvent({ noteContext }); } - }, [ widget ]); - - if (parentComponent) { - parentComponent.child(widget); - } + }, [ noteContext ]); return
      } \ No newline at end of file From c33280bbb2aad8dd1f12d19fb5c56d6072a3a9e3 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Aug 2025 23:45:31 +0300 Subject: [PATCH 066/191] chore(react): fix leak & adjustable class name --- apps/client/src/widgets/react/hooks.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index a1654eb42..1a5be3e62 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -414,8 +414,9 @@ export function useNoteBlob(note: FNote | null | undefined): [ FBlob | null | un return [ blob ] as const; } -export function useLegacyWidget(widgetFactory: () => BasicWidget, { noteContext }: { +export function useLegacyWidget(widgetFactory: () => BasicWidget, { noteContext, containerClassName }: { noteContext?: NoteContext; + containerClassName?: string; } = {}) { const ref = useRef(null); const parentComponent = useContext(ParentComponent); @@ -434,7 +435,7 @@ export function useLegacyWidget(widgetFactory: () => BasicWidget, { noteContext const renderedWidget = widget.render(); return [ widget, renderedWidget ]; - }, [widgetFactory]); + }, []); // Attach the widget to the parent. useEffect(() => { @@ -452,5 +453,5 @@ export function useLegacyWidget(widgetFactory: () => BasicWidget, { noteContext } }, [ noteContext ]); - return
      + return
      } \ No newline at end of file From a85141ace2c94ba0c10371b4ca634d46a25ef388 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Aug 2025 23:47:02 +0300 Subject: [PATCH 067/191] feat(react/ribbon): port note map partially --- apps/client/src/widgets/ribbon/NoteMapTab.tsx | 16 +++++++ apps/client/src/widgets/ribbon/Ribbon.tsx | 12 +++-- .../src/widgets/ribbon/ribbon-interface.ts | 2 + apps/client/src/widgets/ribbon/style.css | 22 +++++++++ .../src/widgets/ribbon_widgets/note_map.ts | 45 +------------------ 5 files changed, 49 insertions(+), 48 deletions(-) create mode 100644 apps/client/src/widgets/ribbon/NoteMapTab.tsx diff --git a/apps/client/src/widgets/ribbon/NoteMapTab.tsx b/apps/client/src/widgets/ribbon/NoteMapTab.tsx new file mode 100644 index 000000000..e9e8b3436 --- /dev/null +++ b/apps/client/src/widgets/ribbon/NoteMapTab.tsx @@ -0,0 +1,16 @@ +import { TabContext } from "./ribbon-interface"; +import NoteMapWidget from "../note_map"; +import { useLegacyWidget } from "../react/hooks"; + +export default function NoteMapTab({ note, noteContext }: TabContext) { + const noteMapWidget = useLegacyWidget(() => new NoteMapWidget("ribbon"), { + noteContext, + containerClassName: "note-map-container" + }); + + return ( +
      + {noteMapWidget} +
      + ); +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index e14ae45c8..4702dcf07 100644 --- a/apps/client/src/widgets/ribbon/Ribbon.tsx +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -18,6 +18,7 @@ import SimilarNotesTab from "./SimilarNotesTab"; import FilePropertiesTab from "./FilePropertiesTab"; import ImagePropertiesTab from "./ImagePropertiesTab"; import NotePathsTab from "./NotePathsTab"; +import NoteMapTab from "./NoteMapTab"; interface TitleContext { note: FNote | null | undefined; @@ -121,9 +122,11 @@ const TAB_CONFIGURATION = numberObjectsInPlace([ toggleCommand: "toggleRibbonTabNotePaths" }, { - // NoteMapRibbonWidget title: t("note_map.title"), - icon: "bx bxs-network-chart" + icon: "bx bxs-network-chart", + content: NoteMapTab, + show: true, + toggleCommand: "toggleRibbonTabNoteMap" }, { title: t("similar_notes.title"), @@ -142,7 +145,7 @@ const TAB_CONFIGURATION = numberObjectsInPlace([ ]); export default function Ribbon() { - const { note, ntxId, hoistedNoteId, notePath } = useNoteContext(); + const { note, ntxId, hoistedNoteId, notePath, noteContext } = useNoteContext(); const titleContext: TitleContext = { note }; const [ activeTabIndex, setActiveTabIndex ] = useState(); const filteredTabs = useMemo(() => TAB_CONFIGURATION.filter(tab => typeof tab.show === "boolean" ? tab.show : tab.show?.(titleContext)), [ titleContext, note ]); @@ -183,7 +186,8 @@ export default function Ribbon() { hidden: !isActive, ntxId, hoistedNoteId, - notePath + notePath, + noteContext }); })}
      diff --git a/apps/client/src/widgets/ribbon/ribbon-interface.ts b/apps/client/src/widgets/ribbon/ribbon-interface.ts index 6fa15edc5..e7fcc4a75 100644 --- a/apps/client/src/widgets/ribbon/ribbon-interface.ts +++ b/apps/client/src/widgets/ribbon/ribbon-interface.ts @@ -1,3 +1,4 @@ +import NoteContext from "../../components/note_context"; import FNote from "../../entities/fnote"; export interface TabContext { @@ -6,4 +7,5 @@ export interface TabContext { ntxId?: string | null; hoistedNoteId?: string; notePath?: string | null; + noteContext?: NoteContext; } diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css index dee220bf6..c70463659 100644 --- a/apps/client/src/widgets/ribbon/style.css +++ b/apps/client/src/widgets/ribbon/style.css @@ -245,4 +245,26 @@ .note-path-list .path-search a { font-style: italic; } +/* #endregion */ + +/* #region Note map */ +.note-map-ribbon-widget { + position: relative; +} + +.note-map-ribbon-widget .note-map-container { + height: 300px; +} + +.note-map-ribbon-widget .open-full-button, .note-map-ribbon-widget .collapse-button { + position: absolute; + right: 5px; + bottom: 5px; + z-index: 1000; +} + +.style-resolver { + color: var(--muted-text-color); + display: none; +} /* #endregion */ \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon_widgets/note_map.ts b/apps/client/src/widgets/ribbon_widgets/note_map.ts index 574e44dc2..fe7a65479 100644 --- a/apps/client/src/widgets/ribbon_widgets/note_map.ts +++ b/apps/client/src/widgets/ribbon_widgets/note_map.ts @@ -3,63 +3,20 @@ import NoteMapWidget from "../note_map.js"; import { t } from "../../services/i18n.js"; const TPL = /*html*/` -
      - -
      +
      `; export default class NoteMapRibbonWidget extends NoteContextAwareWidget { private openState!: "small" | "full"; - private noteMapWidget: NoteMapWidget; private $container!: JQuery; private $openFullButton!: JQuery; private $collapseButton!: JQuery; - constructor() { - super(); - - this.noteMapWidget = new NoteMapWidget("ribbon"); - this.child(this.noteMapWidget); - } - - get name() { - return "noteMap"; - } - - get toggleCommand() { - return "toggleRibbonTabNoteMap"; - } - - getTitle() { - return { - show: this.isEnabled() - }; - } doRender() { this.$widget = $(TPL); From 86dd9aa42a8f26727ca5f57cc61ccb392f7f7677 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 10:47:46 +0300 Subject: [PATCH 068/191] chore(react/ribbon): integrate expand/collapse button --- .../client/src/widgets/react/ActionButton.tsx | 7 +-- apps/client/src/widgets/react/hooks.tsx | 8 ++-- apps/client/src/widgets/ribbon/NoteMapTab.tsx | 45 +++++++++++++++++-- apps/client/src/widgets/ribbon/style.css | 2 +- .../src/widgets/ribbon_widgets/note_map.ts | 38 ---------------- 5 files changed, 51 insertions(+), 49 deletions(-) diff --git a/apps/client/src/widgets/react/ActionButton.tsx b/apps/client/src/widgets/react/ActionButton.tsx index 5adacc5c1..65eb60469 100644 --- a/apps/client/src/widgets/react/ActionButton.tsx +++ b/apps/client/src/widgets/react/ActionButton.tsx @@ -1,13 +1,14 @@ interface ActionButtonProps { text: string; icon: string; + className?: string; onClick?: () => void; } -export default function ActionButton({ text, icon, onClick }: ActionButtonProps) { +export default function ActionButton({ text, icon, className, onClick }: ActionButtonProps) { return - - - -
      `; - export default class NoteMapRibbonWidget extends NoteContextAwareWidget { private openState!: "small" | "full"; @@ -50,37 +42,7 @@ export default class NoteMapRibbonWidget extends NoteContextAwareWidget { this.noteMapWidget.setDimensions(); }); - const handleResize = () => { - if (!this.noteMapWidget.graph) { - // no graph has been even rendered - return; - } - - if (this.openState === "full") { - this.setFullHeight(); - } else if (this.openState === "small") { - this.setSmallSize(); - } - }; - new ResizeObserver(handleResize).observe(this.$widget[0]); } - setSmallSize() { - const SMALL_SIZE_HEIGHT = 300; - const width = this.$widget.width() ?? 0; - - this.$widget.find(".note-map-container").height(SMALL_SIZE_HEIGHT).width(width); - } - - setFullHeight() { - const { top } = this.$widget[0].getBoundingClientRect(); - - const height = ($(window).height() ?? 0) - top; - const width = this.$widget.width() ?? 0; - - this.$widget.find(".note-map-container") - .height(height) - .width(width); - } } From f7c82d6b09cd289bc2ddec277f58761ac41f5158 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 11:00:25 +0300 Subject: [PATCH 069/191] chore(react/ribbon): watch note map size --- apps/client/src/widgets/react/hooks.tsx | 18 ++++++- apps/client/src/widgets/ribbon/NoteMapTab.tsx | 23 ++++----- .../src/widgets/ribbon_widgets/note_map.ts | 48 ------------------- 3 files changed, 29 insertions(+), 60 deletions(-) delete mode 100644 apps/client/src/widgets/ribbon_widgets/note_map.ts diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index d2a253377..6f1595bfb 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -12,7 +12,7 @@ import FNote from "../../entities/fnote"; import attributes from "../../services/attributes"; import FBlob from "../../entities/fblob"; import NoteContextAwareWidget from "../note_context_aware_widget"; -import { VNode } from "preact"; +import { RefObject, VNode } from "preact"; type TriliumEventHandler = (data: EventData) => void; const registeredHandlers: Map[]>> = new Map(); @@ -454,4 +454,20 @@ export function useLegacyWidget(widgetFactory: () => T, { }, [ noteContext ]); return [
      , widget ] +} + +export function useResizeObserver(ref: RefObject, callback: ResizeObserverCallback) { + useEffect(() => { + if (!ref.current) { + return; + } + + const element = ref.current; + const resizeObserver = new ResizeObserver(callback); + resizeObserver.observe(element); + return () => { + resizeObserver.unobserve(element); + resizeObserver.disconnect(); + } + }, [ ref, callback ]); } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/NoteMapTab.tsx b/apps/client/src/widgets/ribbon/NoteMapTab.tsx index 4a35ab3c0..a5b0a98e5 100644 --- a/apps/client/src/widgets/ribbon/NoteMapTab.tsx +++ b/apps/client/src/widgets/ribbon/NoteMapTab.tsx @@ -1,9 +1,9 @@ import { TabContext } from "./ribbon-interface"; import NoteMapWidget from "../note_map"; -import { useLegacyWidget } from "../react/hooks"; +import { useLegacyWidget, useResizeObserver } from "../react/hooks"; import ActionButton from "../react/ActionButton"; import { t } from "../../services/i18n"; -import { useEffect, useRef, useState } from "preact/hooks"; +import { useCallback, useEffect, useRef, useState } from "preact/hooks"; const SMALL_SIZE_HEIGHT = "300px"; @@ -17,19 +17,20 @@ export default function NoteMapTab({ note, noteContext }: TabContext) { containerClassName: "note-map-container" }); - useEffect(() => noteMapWidget.setDimensions(), [ height ]); - - function toggleExpanded(newValue: boolean) { - setExpanded(newValue); - - if (newValue && containerRef.current) { + const resizeIfNeeded = useCallback(() => { + console.log("Resize if needed"); + if (isExpanded && containerRef.current) { const { top } = containerRef.current.getBoundingClientRect(); const height = window.innerHeight - top; setHeight(height + "px"); } else { setHeight(SMALL_SIZE_HEIGHT); } - } + }, [ isExpanded, containerRef ]); + + useEffect(() => noteMapWidget.setDimensions(), [ height ]); + useEffect(() => resizeIfNeeded(), [ isExpanded ]); + useResizeObserver(containerRef, resizeIfNeeded); return (
      @@ -40,14 +41,14 @@ export default function NoteMapTab({ note, noteContext }: TabContext) { icon="bx bx-arrow-to-bottom" text={t("note_map.open_full")} className="open-full-button" - onClick={() => toggleExpanded(true)} + onClick={() => setExpanded(true)} /> ) : ( toggleExpanded(false)} + onClick={() => setExpanded(false)} /> )}
      diff --git a/apps/client/src/widgets/ribbon_widgets/note_map.ts b/apps/client/src/widgets/ribbon_widgets/note_map.ts deleted file mode 100644 index 93facf3db..000000000 --- a/apps/client/src/widgets/ribbon_widgets/note_map.ts +++ /dev/null @@ -1,48 +0,0 @@ -import NoteContextAwareWidget from "../note_context_aware_widget.js"; -import NoteMapWidget from "../note_map.js"; -import { t } from "../../services/i18n.js"; - -export default class NoteMapRibbonWidget extends NoteContextAwareWidget { - - private openState!: "small" | "full"; - private $container!: JQuery; - private $openFullButton!: JQuery; - private $collapseButton!: JQuery; - - - doRender() { - this.$widget = $(TPL); - this.contentSized(); - this.$container = this.$widget.find(".note-map-container"); - this.$container.append(this.noteMapWidget.render()); - - this.openState = "small"; - - this.$openFullButton = this.$widget.find(".open-full-button"); - this.$openFullButton.on("click", () => { - this.setFullHeight(); - - this.$openFullButton.hide(); - this.$collapseButton.show(); - - this.openState = "full"; - - this.noteMapWidget.setDimensions(); - }); - - this.$collapseButton = this.$widget.find(".collapse-button"); - this.$collapseButton.on("click", () => { - this.setSmallSize(); - - this.$openFullButton.show(); - this.$collapseButton.hide(); - - this.openState = "small"; - - this.noteMapWidget.setDimensions(); - }); - - new ResizeObserver(handleResize).observe(this.$widget[0]); - } - -} From 5f77ca31bd296b92ac9bdf2ac504bff99a13c054 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 11:12:14 +0300 Subject: [PATCH 070/191] chore(react/ribbon): react note map to height changes --- apps/client/src/widgets/react/hooks.tsx | 21 +++++++++++++++++++ apps/client/src/widgets/ribbon/NoteMapTab.tsx | 15 ++++++------- 2 files changed, 27 insertions(+), 9 deletions(-) diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 6f1595bfb..910daf0da 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -470,4 +470,25 @@ export function useResizeObserver(ref: RefObject, callback: ResizeO resizeObserver.disconnect(); } }, [ ref, callback ]); +} + +export function useWindowSize() { + const [ size, setSize ] = useState<{ windowWidth: number, windowHeight: number }>({ + windowWidth: window.innerWidth, + windowHeight: window.innerHeight + }); + + useEffect(() => { + function onResize() { + setSize({ + windowWidth: window.innerWidth, + windowHeight: window.innerHeight + }); + } + + window.addEventListener("resize", onResize); + return () => window.removeEventListener("resize", onResize); + }); + + return size; } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/NoteMapTab.tsx b/apps/client/src/widgets/ribbon/NoteMapTab.tsx index a5b0a98e5..05f47b9fc 100644 --- a/apps/client/src/widgets/ribbon/NoteMapTab.tsx +++ b/apps/client/src/widgets/ribbon/NoteMapTab.tsx @@ -1,6 +1,6 @@ import { TabContext } from "./ribbon-interface"; import NoteMapWidget from "../note_map"; -import { useLegacyWidget, useResizeObserver } from "../react/hooks"; +import { useLegacyWidget, useWindowSize } from "../react/hooks"; import ActionButton from "../react/ActionButton"; import { t } from "../../services/i18n"; import { useCallback, useEffect, useRef, useState } from "preact/hooks"; @@ -11,26 +11,23 @@ export default function NoteMapTab({ note, noteContext }: TabContext) { const [ isExpanded, setExpanded ] = useState(false); const [ height, setHeight ] = useState(SMALL_SIZE_HEIGHT); const containerRef = useRef(null); + const { windowHeight } = useWindowSize(); const [ noteMapContainer, noteMapWidget ] = useLegacyWidget(() => new NoteMapWidget("ribbon"), { noteContext, containerClassName: "note-map-container" }); - - const resizeIfNeeded = useCallback(() => { - console.log("Resize if needed"); + + useEffect(() => { if (isExpanded && containerRef.current) { const { top } = containerRef.current.getBoundingClientRect(); - const height = window.innerHeight - top; + const height = windowHeight - top; setHeight(height + "px"); } else { setHeight(SMALL_SIZE_HEIGHT); } - }, [ isExpanded, containerRef ]); - + }, [ isExpanded, containerRef, windowHeight ]); useEffect(() => noteMapWidget.setDimensions(), [ height ]); - useEffect(() => resizeIfNeeded(), [ isExpanded ]); - useResizeObserver(containerRef, resizeIfNeeded); return (
      From 6c30e0836f107b3210416c21935a9726cac21017 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 11:19:35 +0300 Subject: [PATCH 071/191] chore(react/ribbon): also react to width, not just height --- apps/client/src/widgets/react/hooks.tsx | 25 ++++++++++++++++--- apps/client/src/widgets/ribbon/NoteMapTab.tsx | 14 +++++------ 2 files changed, 29 insertions(+), 10 deletions(-) diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 910daf0da..af74c6873 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -456,22 +456,41 @@ export function useLegacyWidget(widgetFactory: () => T, { return [
      , widget ] } -export function useResizeObserver(ref: RefObject, callback: ResizeObserverCallback) { +/** + * Attaches a {@link ResizeObserver} to the given ref and reads the bounding client rect whenever it changes. + * + * @param ref a ref to a {@link HTMLElement} to determine the size and observe the changes in size. + * @returns the size of the element, reacting to changes. + */ +export function useElementSize(ref: RefObject) { + const [ size, setSize ] = useState(ref.current?.getBoundingClientRect()); + useEffect(() => { if (!ref.current) { return; } + function onResize() { + setSize(ref.current?.getBoundingClientRect()); + } + const element = ref.current; - const resizeObserver = new ResizeObserver(callback); + const resizeObserver = new ResizeObserver(onResize); resizeObserver.observe(element); return () => { resizeObserver.unobserve(element); resizeObserver.disconnect(); } - }, [ ref, callback ]); + }, [ ref ]); + + return size; } +/** + * Obtains the inner width and height of the window, as well as reacts to changes in size. + * + * @returns the width and height of the window. + */ export function useWindowSize() { const [ size, setSize ] = useState<{ windowWidth: number, windowHeight: number }>({ windowWidth: window.innerWidth, diff --git a/apps/client/src/widgets/ribbon/NoteMapTab.tsx b/apps/client/src/widgets/ribbon/NoteMapTab.tsx index 05f47b9fc..ab71d245b 100644 --- a/apps/client/src/widgets/ribbon/NoteMapTab.tsx +++ b/apps/client/src/widgets/ribbon/NoteMapTab.tsx @@ -1,9 +1,9 @@ import { TabContext } from "./ribbon-interface"; import NoteMapWidget from "../note_map"; -import { useLegacyWidget, useWindowSize } from "../react/hooks"; +import { useElementSize, useLegacyWidget, useWindowSize } from "../react/hooks"; import ActionButton from "../react/ActionButton"; import { t } from "../../services/i18n"; -import { useCallback, useEffect, useRef, useState } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; const SMALL_SIZE_HEIGHT = "300px"; @@ -12,6 +12,7 @@ export default function NoteMapTab({ note, noteContext }: TabContext) { const [ height, setHeight ] = useState(SMALL_SIZE_HEIGHT); const containerRef = useRef(null); const { windowHeight } = useWindowSize(); + const containerSize = useElementSize(containerRef); const [ noteMapContainer, noteMapWidget ] = useLegacyWidget(() => new NoteMapWidget("ribbon"), { noteContext, @@ -19,15 +20,14 @@ export default function NoteMapTab({ note, noteContext }: TabContext) { }); useEffect(() => { - if (isExpanded && containerRef.current) { - const { top } = containerRef.current.getBoundingClientRect(); - const height = windowHeight - top; + if (isExpanded && containerRef.current && containerSize) { + const height = windowHeight - containerSize.top; setHeight(height + "px"); } else { setHeight(SMALL_SIZE_HEIGHT); } - }, [ isExpanded, containerRef, windowHeight ]); - useEffect(() => noteMapWidget.setDimensions(), [ height ]); + }, [ isExpanded, containerRef, windowHeight, containerSize?.top ]); + useEffect(() => noteMapWidget.setDimensions(), [ containerSize?.width, height ]); return (
      From 2c33ef2b0d6b7be60363d130e9a3e06eec4a191b Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 11:28:10 +0300 Subject: [PATCH 072/191] chore(react/ribbon): similar notes style --- apps/client/src/widgets/react/NoteLink.tsx | 7 +++-- .../src/widgets/ribbon/SimilarNotesTab.tsx | 30 +++++++++++-------- 2 files changed, 23 insertions(+), 14 deletions(-) diff --git a/apps/client/src/widgets/react/NoteLink.tsx b/apps/client/src/widgets/react/NoteLink.tsx index b7f3a3409..ec3c33640 100644 --- a/apps/client/src/widgets/react/NoteLink.tsx +++ b/apps/client/src/widgets/react/NoteLink.tsx @@ -7,9 +7,10 @@ interface NoteLinkOpts { showNotePath?: boolean; style?: Record; noPreview?: boolean; + noTnLink?: boolean; } -export default function NoteLink({ notePath, showNotePath, style, noPreview }: NoteLinkOpts) { +export default function NoteLink({ notePath, showNotePath, style, noPreview, noTnLink }: NoteLinkOpts) { const stringifiedNotePath = Array.isArray(notePath) ? notePath.join("/") : notePath; const [ jqueryEl, setJqueryEl ] = useState>(); @@ -27,7 +28,9 @@ export default function NoteLink({ notePath, showNotePath, style, noPreview }: N $linkEl?.addClass("no-tooltip-preview"); } - $linkEl?.addClass("tn-link"); + if (!noTnLink) { + $linkEl?.addClass("tn-link"); + } return diff --git a/apps/client/src/widgets/ribbon/SimilarNotesTab.tsx b/apps/client/src/widgets/ribbon/SimilarNotesTab.tsx index b771f13bc..57299c92c 100644 --- a/apps/client/src/widgets/ribbon/SimilarNotesTab.tsx +++ b/apps/client/src/widgets/ribbon/SimilarNotesTab.tsx @@ -23,18 +23,24 @@ export default function SimilarNotesTab({ note }: TabContext) { }, [ note?.noteId ]); return ( -
      - {similarNotes?.length ? ( -
      - {similarNotes.map(({notePath, score}) => ( - - ))} -
      - ) : ( - <>{t("similar_notes.no_similar_notes_found")} - )} +
      +
      + {similarNotes?.length ? ( +
      + {similarNotes.map(({notePath, score}) => ( + + ))} +
      + ) : ( + <>{t("similar_notes.no_similar_notes_found")} + )} +
      ) } \ No newline at end of file From 6d37e19b40ac2db8d3acf49c0e89bf0d48e2804f Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 11:44:51 +0300 Subject: [PATCH 073/191] chore(react/ribbon): start implementing attribute editor --- .../attribute_widgets/attribute_editor.ts | 108 ------------------ .../src/widgets/ribbon/OwnedAttributesTab.tsx | 10 ++ apps/client/src/widgets/ribbon/Ribbon.tsx | 7 +- .../ribbon/components/AttributeEditor.tsx | 78 +++++++++++++ apps/client/src/widgets/ribbon/style.css | 64 +++++++++++ .../ribbon_widgets/owned_attribute_list.ts | 45 -------- 6 files changed, 157 insertions(+), 155 deletions(-) create mode 100644 apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx create mode 100644 apps/client/src/widgets/ribbon/components/AttributeEditor.tsx diff --git a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts index 3e97723a5..24a4e09d2 100644 --- a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts +++ b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts @@ -24,58 +24,6 @@ const HELP_TEXT = `

      ${t("attribute_editor.help_text_body3")}

      `; const TPL = /*html*/` -
      - - -
      @@ -84,61 +32,6 @@ const TPL = /*html*/`
      `; -const mentionSetup: MentionFeed[] = [ - { - marker: "@", - feed: (queryText) => noteAutocompleteService.autocompleteSourceForCKEditor(queryText), - itemRenderer: (_item) => { - const item = _item as Suggestion; - const itemElement = document.createElement("button"); - - itemElement.innerHTML = `${item.highlightedNotePathTitle} `; - - return itemElement; - }, - minimumCharacters: 0 - }, - { - marker: "#", - feed: async (queryText) => { - const names = await server.get(`attribute-names/?type=label&query=${encodeURIComponent(queryText)}`); - - return names.map((name) => { - return { - id: `#${name}`, - name: name - }; - }); - }, - minimumCharacters: 0 - }, - { - marker: "~", - feed: async (queryText) => { - const names = await server.get(`attribute-names/?type=relation&query=${encodeURIComponent(queryText)}`); - - return names.map((name) => { - return { - id: `~${name}`, - name: name - }; - }); - }, - minimumCharacters: 0 - } -]; - -const editorConfig: EditorConfig = { - toolbar: { - items: [] - }, - placeholder: t("attribute_editor.placeholder"), - mention: { - feeds: mentionSetup - }, - licenseKey: "GPL" -}; - type AttributeCommandNames = FilteredCommandNames; export default class AttributeEditorWidget extends NoteContextAwareWidget implements EventListener<"entitiesReloaded">, EventListener<"addNewLabel">, EventListener<"addNewRelation"> { @@ -324,7 +217,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem this.$editor.on("click", (e) => this.handleEditorClick(e)); - this.textEditor = await AttributeEditor.create(this.$editor[0], editorConfig); this.textEditor.model.document.on("change:data", () => this.dataChanged()); this.textEditor.editing.view.document.on( "enter", diff --git a/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx b/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx new file mode 100644 index 000000000..33554989c --- /dev/null +++ b/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx @@ -0,0 +1,10 @@ +import AttributeEditor from "./components/AttributeEditor"; +import { TabContext } from "./ribbon-interface"; + +export default function OwnedAttributesTab({ note }: TabContext) { + return ( +
      + +
      + ) +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index 4702dcf07..032a905a6 100644 --- a/apps/client/src/widgets/ribbon/Ribbon.tsx +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -19,6 +19,7 @@ import FilePropertiesTab from "./FilePropertiesTab"; import ImagePropertiesTab from "./ImagePropertiesTab"; import NotePathsTab from "./NotePathsTab"; import NoteMapTab from "./NoteMapTab"; +import OwnedAttributesTab from "./OwnedAttributesTab"; interface TitleContext { note: FNote | null | undefined; @@ -105,9 +106,11 @@ const TAB_CONFIGURATION = numberObjectsInPlace([ toggleCommand: "toggleRibbonTabBasicProperties" }, { - // OwnedAttributeListWidget title: t("owned_attribute_list.owned_attributes"), - icon: "bx bx-list-check" + icon: "bx bx-list-check", + content: OwnedAttributesTab, + show: ({note}) => !note?.isLaunchBarConfig(), + toggleCommand: "toggleRibbonTabOwnedAttributes" }, { // InheritedAttributesWidget diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx new file mode 100644 index 000000000..88bc85139 --- /dev/null +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -0,0 +1,78 @@ +import { useEffect, useRef } from "preact/hooks" +import { AttributeEditor as CKEditor, EditorConfig, MentionFeed } from "@triliumnext/ckeditor5"; +import { t } from "../../../services/i18n"; +import server from "../../../services/server"; +import note_autocomplete, { Suggestion } from "../../../services/note_autocomplete"; + +const mentionSetup: MentionFeed[] = [ + { + marker: "@", + feed: (queryText) => note_autocomplete.autocompleteSourceForCKEditor(queryText), + itemRenderer: (_item) => { + const item = _item as Suggestion; + const itemElement = document.createElement("button"); + + itemElement.innerHTML = `${item.highlightedNotePathTitle} `; + + return itemElement; + }, + minimumCharacters: 0 + }, + { + marker: "#", + feed: async (queryText) => { + const names = await server.get(`attribute-names/?type=label&query=${encodeURIComponent(queryText)}`); + + return names.map((name) => { + return { + id: `#${name}`, + name: name + }; + }); + }, + minimumCharacters: 0 + }, + { + marker: "~", + feed: async (queryText) => { + const names = await server.get(`attribute-names/?type=relation&query=${encodeURIComponent(queryText)}`); + + return names.map((name) => { + return { + id: `~${name}`, + name: name + }; + }); + }, + minimumCharacters: 0 + } +]; + +const editorConfig: EditorConfig = { + toolbar: { + items: [] + }, + placeholder: t("attribute_editor.placeholder"), + mention: { + feeds: mentionSetup + }, + licenseKey: "GPL" +}; + +export default function AttributeEditor() { + const editorContainerRef = useRef(null); + + useEffect(() => { + if (!editorContainerRef.current) return; + + CKEditor.create(editorContainerRef.current, editorConfig).then((textEditor) => { + + }); + }, []); + + return ( +
      +
      +
      + ) +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css index c09fa989f..22c9d7b43 100644 --- a/apps/client/src/widgets/ribbon/style.css +++ b/apps/client/src/widgets/ribbon/style.css @@ -267,4 +267,68 @@ color: var(--muted-text-color); display: none; } +/* #endregion */ + +/* #region Attribute editor */ +.attribute-list-editor { + border: 0 !important; + outline: 0 !important; + box-shadow: none !important; + padding: 0 0 0 5px !important; + margin: 0 !important; + max-height: 100px; + overflow: auto; + transition: opacity .1s linear; +} + +.attribute-list-editor.ck-content .mention { + color: var(--muted-text-color) !important; + background: transparent !important; +} + +.save-attributes-button { + color: var(--muted-text-color); + position: absolute; + bottom: 14px; + right: 25px; + cursor: pointer; + border: 1px solid transparent; + font-size: 130%; +} + +.add-new-attribute-button { + color: var(--muted-text-color); + position: absolute; + bottom: 13px; + right: 0; + cursor: pointer; + border: 1px solid transparent; + font-size: 130%; +} + +.add-new-attribute-button:hover, .save-attributes-button:hover { + border: 1px solid var(--button-border-color); + border-radius: var(--button-border-radius); + background: var(--button-background-color); + color: var(--button-text-color); +} + +.attribute-errors { + color: red; + padding: 5px 50px 0px 5px; /* large right padding to avoid buttons */ +} +/* #endregion */ + +/* #region Owned Attributes */ +.attribute-list { + margin-left: 7px; + margin-right: 7px; + margin-top: 5px; + margin-bottom: 2px; + position: relative; +} + +.attribute-list-editor p { + margin: 0 !important; +} /* #endregion */ \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts b/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts index 113e03e0d..6b036bd0e 100644 --- a/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts +++ b/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts @@ -5,40 +5,12 @@ import AttributeEditorWidget from "../attribute_widgets/attribute_editor.js"; import type { CommandListenerData } from "../../components/app_context.js"; import type FAttribute from "../../entities/fattribute.js"; -const TPL = /*html*/` -
      - - -
      -
      -`; - export default class OwnedAttributeListWidget extends NoteContextAwareWidget { private attributeDetailWidget: AttributeDetailWidget; private attributeEditorWidget: AttributeEditorWidget; private $title!: JQuery; - get name() { - return "ownedAttributes"; - } - - get toggleCommand() { - return "toggleRibbonTabOwnedAttributes"; - } - constructor() { super(); @@ -49,23 +21,6 @@ export default class OwnedAttributeListWidget extends NoteContextAwareWidget { this.child(this.attributeEditorWidget, this.attributeDetailWidget); } - getTitle() { - return { - show: !this.note?.isLaunchBarConfig(), - - }; - } - - doRender() { - this.$widget = $(TPL); - this.contentSized(); - - this.$widget.find(".attr-editor-placeholder").replaceWith(this.attributeEditorWidget.render()); - this.$widget.append(this.attributeDetailWidget.render()); - - this.$title = $("
      "); - } - async saveAttributesCommand() { await this.attributeEditorWidget.save(); } From 73038efccfda68104409a6b26f6aabc0ffb79d21 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 11:52:40 +0300 Subject: [PATCH 074/191] chore(react/ribbon): add some CKEditor events --- .../attribute_widgets/attribute_editor.ts | 23 -------------- .../ribbon/components/AttributeEditor.tsx | 30 +++++++++++++++++-- 2 files changed, 28 insertions(+), 25 deletions(-) diff --git a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts index 24a4e09d2..016bd8776 100644 --- a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts +++ b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts @@ -212,29 +212,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem return $("
      ").html(str).text(); } - async initEditor() { - this.$widget.show(); - - this.$editor.on("click", (e) => this.handleEditorClick(e)); - - this.textEditor.model.document.on("change:data", () => this.dataChanged()); - this.textEditor.editing.view.document.on( - "enter", - (event, data) => { - // disable entering new line - see https://github.com/ckeditor/ckeditor5/issues/9422 - data.preventDefault(); - event.stop(); - }, - { priority: "high" } - ); - - // disable spellcheck for attribute editor - const documentRoot = this.textEditor.editing.view.document.getRoot(); - if (documentRoot) { - this.textEditor.editing.view.change((writer) => writer.setAttribute("spellcheck", "false", documentRoot)); - } - } - dataChanged() { this.lastUpdatedNoteId = this.noteId; diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx index 88bc85139..55c2d5968 100644 --- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef } from "preact/hooks" +import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks" import { AttributeEditor as CKEditor, EditorConfig, MentionFeed } from "@triliumnext/ckeditor5"; import { t } from "../../../services/i18n"; import server from "../../../services/server"; @@ -61,17 +61,43 @@ const editorConfig: EditorConfig = { export default function AttributeEditor() { const editorContainerRef = useRef(null); + const [ attributeDetailVisible, setAttributeDetailVisible ] = useState(false); + + const onClick = useCallback(() => { + console.log("Clicked"); + }, []); useEffect(() => { if (!editorContainerRef.current) return; CKEditor.create(editorContainerRef.current, editorConfig).then((textEditor) => { + function onDataChanged() { + console.log("Data changed"); + } + // Prevent newlines + textEditor.editing.view.document.on( + "enter", + (event, data) => { + // disable entering new line - see https://github.com/ckeditor/ckeditor5/issues/9422 + data.preventDefault(); + event.stop(); + }, + { priority: "high" } + ); + + // disable spellcheck for attribute editor + const documentRoot = textEditor.editing.view.document.getRoot(); + if (documentRoot) { + textEditor.editing.view.change((writer) => writer.setAttribute("spellcheck", "false", documentRoot)); + } + + textEditor.model.document.on("change:data", onDataChanged); }); }, []); return ( -
      +
      ) From 1e004078649c47479c4f8286e99a283d56ee1e1c Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 12:05:03 +0300 Subject: [PATCH 075/191] chore(react/ribbon): use separate component for editor --- apps/client/src/widgets/react/CKEditor.tsx | 53 +++++++++++++++ .../ribbon/components/AttributeEditor.tsx | 66 ++++++------------- 2 files changed, 72 insertions(+), 47 deletions(-) create mode 100644 apps/client/src/widgets/react/CKEditor.tsx diff --git a/apps/client/src/widgets/react/CKEditor.tsx b/apps/client/src/widgets/react/CKEditor.tsx new file mode 100644 index 000000000..7b28c30cf --- /dev/null +++ b/apps/client/src/widgets/react/CKEditor.tsx @@ -0,0 +1,53 @@ +import type { AttributeEditor, EditorConfig } from "@triliumnext/ckeditor5"; +import { useEffect, useRef } from "preact/compat"; + +interface CKEditorOpts { + className: string; + tabIndex?: number; + config: EditorConfig; + editor: typeof AttributeEditor; + disableNewlines?: boolean; + disableSpellcheck?: boolean; + onChange?: () => void; +} + +export default function CKEditor({ className, tabIndex, editor, config, disableNewlines, disableSpellcheck, onChange }: CKEditorOpts) { + const editorContainerRef = useRef(null); + + useEffect(() => { + if (!editorContainerRef.current) return; + + editor.create(editorContainerRef.current, config).then((textEditor) => { + if (disableNewlines) { + textEditor.editing.view.document.on( + "enter", + (event, data) => { + // disable entering new line - see https://github.com/ckeditor/ckeditor5/issues/9422 + data.preventDefault(); + event.stop(); + }, + { priority: "high" } + ); + } + + if (disableSpellcheck) { + const documentRoot = textEditor.editing.view.document.getRoot(); + if (documentRoot) { + textEditor.editing.view.change((writer) => writer.setAttribute("spellcheck", "false", documentRoot)); + } + } + + if (onChange) { + textEditor.model.document.on("change:data", onChange); + } + }); + }, []); + + return ( +
      + ) +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx index 55c2d5968..9ae3f2372 100644 --- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -1,8 +1,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks" -import { AttributeEditor as CKEditor, EditorConfig, MentionFeed } from "@triliumnext/ckeditor5"; +import { AttributeEditor as CKEditorAttributeEditor, EditorConfig, MentionFeed } from "@triliumnext/ckeditor5"; import { t } from "../../../services/i18n"; import server from "../../../services/server"; import note_autocomplete, { Suggestion } from "../../../services/note_autocomplete"; +import CKEditor from "../../react/CKEditor"; const mentionSetup: MentionFeed[] = [ { @@ -48,57 +49,28 @@ const mentionSetup: MentionFeed[] = [ } ]; -const editorConfig: EditorConfig = { - toolbar: { - items: [] - }, - placeholder: t("attribute_editor.placeholder"), - mention: { - feeds: mentionSetup - }, - licenseKey: "GPL" -}; export default function AttributeEditor() { - const editorContainerRef = useRef(null); + const [ attributeDetailVisible, setAttributeDetailVisible ] = useState(false); - const onClick = useCallback(() => { - console.log("Clicked"); - }, []); - - useEffect(() => { - if (!editorContainerRef.current) return; - - CKEditor.create(editorContainerRef.current, editorConfig).then((textEditor) => { - function onDataChanged() { - console.log("Data changed"); - } - - // Prevent newlines - textEditor.editing.view.document.on( - "enter", - (event, data) => { - // disable entering new line - see https://github.com/ckeditor/ckeditor5/issues/9422 - data.preventDefault(); - event.stop(); - }, - { priority: "high" } - ); - - // disable spellcheck for attribute editor - const documentRoot = textEditor.editing.view.document.getRoot(); - if (documentRoot) { - textEditor.editing.view.change((writer) => writer.setAttribute("spellcheck", "false", documentRoot)); - } - - textEditor.model.document.on("change:data", onDataChanged); - }); - }, []); - return ( -
      -
      +
      + { + console.log("Data changed!"); + }} + disableNewlines disableSpellcheck + />
      ) } \ No newline at end of file From befc5a9530ef60c3f4277323d7dd0d1f684b3d2b Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 12:31:54 +0300 Subject: [PATCH 076/191] feat(react/ribbon): display help tooltip in attribute editor --- .../attribute_widgets/attribute_editor.ts | 25 +---------- apps/client/src/widgets/react/CKEditor.tsx | 14 ++++++- apps/client/src/widgets/react/hooks.tsx | 28 ++++++++++++- .../ribbon/components/AttributeEditor.tsx | 41 ++++++++++++++++--- 4 files changed, 76 insertions(+), 32 deletions(-) diff --git a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts index 016bd8776..4baecd691 100644 --- a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts +++ b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts @@ -16,12 +16,7 @@ import type { default as FAttribute, AttributeType } from "../../entities/fattri import type FNote from "../../entities/fnote.js"; import { escapeQuotes } from "../../services/utils.js"; -const HELP_TEXT = ` -

      ${t("attribute_editor.help_text_body1")}

      -

      ${t("attribute_editor.help_text_body2")}

      - -

      ${t("attribute_editor.help_text_body3")}

      `; const TPL = /*html*/` @@ -229,9 +224,7 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem } async handleEditorClick(e: JQuery.ClickEvent) { - const pos = this.textEditor.model.document.selection.getFirstPosition(); - - if (pos && pos.textNode && pos.textNode.data) { + if () { const clickIndex = this.getClickIndex(pos); let parsedAttrs; @@ -267,25 +260,9 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem this.showHelpTooltip(); } }, 100); - } else { - this.showHelpTooltip(); } } - showHelpTooltip() { - this.attributeDetailWidget.hide(); - - this.$editor.tooltip({ - trigger: "focus", - html: true, - title: HELP_TEXT, - placement: "bottom", - offset: "0,30" - }); - - this.$editor.tooltip("show"); - } - getClickIndex(pos: ModelPosition) { let clickIndex = pos.offset - (pos.textNode?.startOffset ?? 0); diff --git a/apps/client/src/widgets/react/CKEditor.tsx b/apps/client/src/widgets/react/CKEditor.tsx index 7b28c30cf..8f521a827 100644 --- a/apps/client/src/widgets/react/CKEditor.tsx +++ b/apps/client/src/widgets/react/CKEditor.tsx @@ -1,4 +1,4 @@ -import type { AttributeEditor, EditorConfig } from "@triliumnext/ckeditor5"; +import { CKTextEditor, type AttributeEditor, type EditorConfig, type ModelPosition } from "@triliumnext/ckeditor5"; import { useEffect, useRef } from "preact/compat"; interface CKEditorOpts { @@ -9,15 +9,19 @@ interface CKEditorOpts { disableNewlines?: boolean; disableSpellcheck?: boolean; onChange?: () => void; + onClick?: (pos?: ModelPosition | null) => void; } -export default function CKEditor({ className, tabIndex, editor, config, disableNewlines, disableSpellcheck, onChange }: CKEditorOpts) { +export default function CKEditor({ className, tabIndex, editor, config, disableNewlines, disableSpellcheck, onChange, onClick }: CKEditorOpts) { const editorContainerRef = useRef(null); + const textEditorRef = useRef(null); useEffect(() => { if (!editorContainerRef.current) return; editor.create(editorContainerRef.current, config).then((textEditor) => { + textEditorRef.current = textEditor; + if (disableNewlines) { textEditor.editing.view.document.on( "enter", @@ -48,6 +52,12 @@ export default function CKEditor({ className, tabIndex, editor, config, disableN ref={editorContainerRef} className={className} tabIndex={tabIndex} + onClick={() => { + if (onClick) { + const pos = textEditorRef.current?.model.document.selection.getFirstPosition(); + onClick(pos); + } + }} /> ) } \ No newline at end of file diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index af74c6873..6436b1734 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -12,7 +12,8 @@ import FNote from "../../entities/fnote"; import attributes from "../../services/attributes"; import FBlob from "../../entities/fblob"; import NoteContextAwareWidget from "../note_context_aware_widget"; -import { RefObject, VNode } from "preact"; +import { Ref, RefObject, VNode } from "preact"; +import { Tooltip } from "bootstrap"; type TriliumEventHandler = (data: EventData) => void; const registeredHandlers: Map[]>> = new Map(); @@ -510,4 +511,29 @@ export function useWindowSize() { }); return size; +} + +export function useTooltip(elRef: RefObject, config: Partial) { + useEffect(() => { + if (!elRef?.current) return; + + const $el = $(elRef.current); + $el.tooltip(config); + }, [ elRef, config ]); + + const showTooltip = useCallback(() => { + if (!elRef?.current) return; + + const $el = $(elRef.current); + $el.tooltip("show"); + }, [ elRef ]); + + const hideTooltip = useCallback(() => { + if (!elRef?.current) return; + + const $el = $(elRef.current); + $el.tooltip("hide"); + }, [ elRef ]); + + return { showTooltip, hideTooltip }; } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx index 9ae3f2372..d8071f7b9 100644 --- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -1,9 +1,17 @@ -import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks" -import { AttributeEditor as CKEditorAttributeEditor, EditorConfig, MentionFeed } from "@triliumnext/ckeditor5"; +import { useEffect, useRef, useState } from "preact/hooks" +import { AttributeEditor as CKEditorAttributeEditor, MentionFeed } from "@triliumnext/ckeditor5"; import { t } from "../../../services/i18n"; import server from "../../../services/server"; import note_autocomplete, { Suggestion } from "../../../services/note_autocomplete"; import CKEditor from "../../react/CKEditor"; +import { useTooltip } from "../../react/hooks"; + +const HELP_TEXT = ` +

      ${t("attribute_editor.help_text_body1")}

      + +

      ${t("attribute_editor.help_text_body2")}

      + +

      ${t("attribute_editor.help_text_body3")}

      `; const mentionSetup: MentionFeed[] = [ { @@ -51,11 +59,27 @@ const mentionSetup: MentionFeed[] = [ export default function AttributeEditor() { - - const [ attributeDetailVisible, setAttributeDetailVisible ] = useState(false); + const [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">(); + const wrapperRef = useRef(null); + const { showTooltip, hideTooltip } = useTooltip(wrapperRef, { + trigger: "focus", + html: true, + title: HELP_TEXT, + placement: "bottom", + offset: "0,30" + }); + + useEffect(() => { + if (state === "showHelpTooltip") { + showTooltip(); + } else { + hideTooltip(); + } + }, [ state ]); + return ( -
      +
      { console.log("Data changed!"); }} + onClick={(pos) => { + if (pos && pos.textNode && pos.textNode.data) { + setState("showAttributeDetail") + } else { + setState("showHelpTooltip"); + } + }} disableNewlines disableSpellcheck />
      From e5caf3769778459b0c6ff911ee150c597b0c1876 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 12:39:49 +0300 Subject: [PATCH 077/191] chore(react/ribbon): load current attributes in editor --- .../attribute_widgets/attribute_editor.ts | 15 ------------ apps/client/src/widgets/react/CKEditor.tsx | 12 +++++++++- .../src/widgets/ribbon/OwnedAttributesTab.tsx | 2 +- .../ribbon/components/AttributeEditor.tsx | 24 ++++++++++++++++++- 4 files changed, 35 insertions(+), 18 deletions(-) diff --git a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts index 4baecd691..3a9a62dbf 100644 --- a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts +++ b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts @@ -289,22 +289,7 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem $el.text(title); } - async refreshWithNote(note: FNote) { - await this.renderOwnedAttributes(note.getOwnedAttributes(), true); - } - async renderOwnedAttributes(ownedAttributes: FAttribute[], saved: boolean) { - // attrs are not resorted if position changes after the initial load - ownedAttributes.sort((a, b) => a.position - b.position); - - let htmlAttrs = (await attributeRenderer.renderAttributes(ownedAttributes, true)).html(); - - if (htmlAttrs.length > 0) { - htmlAttrs += " "; - } - - this.textEditor.setData(htmlAttrs); - if (saved) { this.lastSavedContent = this.textEditor.getData(); diff --git a/apps/client/src/widgets/react/CKEditor.tsx b/apps/client/src/widgets/react/CKEditor.tsx index 8f521a827..60d5f37ab 100644 --- a/apps/client/src/widgets/react/CKEditor.tsx +++ b/apps/client/src/widgets/react/CKEditor.tsx @@ -2,6 +2,7 @@ import { CKTextEditor, type AttributeEditor, type EditorConfig, type ModelPositi import { useEffect, useRef } from "preact/compat"; interface CKEditorOpts { + currentValue?: string; className: string; tabIndex?: number; config: EditorConfig; @@ -12,7 +13,7 @@ interface CKEditorOpts { onClick?: (pos?: ModelPosition | null) => void; } -export default function CKEditor({ className, tabIndex, editor, config, disableNewlines, disableSpellcheck, onChange, onClick }: CKEditorOpts) { +export default function CKEditor({ currentValue, className, tabIndex, editor, config, disableNewlines, disableSpellcheck, onChange, onClick }: CKEditorOpts) { const editorContainerRef = useRef(null); const textEditorRef = useRef(null); @@ -44,9 +45,18 @@ export default function CKEditor({ className, tabIndex, editor, config, disableN if (onChange) { textEditor.model.document.on("change:data", onChange); } + + if (currentValue) { + textEditor.setData(currentValue); + } }); }, []); + useEffect(() => { + if (!textEditorRef.current) return; + textEditorRef.current.setData(currentValue ?? ""); + }, [ currentValue ]); + return (
      - + { note && }
      ) } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx index d8071f7b9..716c0f25c 100644 --- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -5,6 +5,9 @@ import server from "../../../services/server"; import note_autocomplete, { Suggestion } from "../../../services/note_autocomplete"; import CKEditor from "../../react/CKEditor"; import { useTooltip } from "../../react/hooks"; +import FAttribute from "../../../entities/fattribute"; +import attribute_renderer from "../../../services/attribute_renderer"; +import FNote from "../../../entities/fnote"; const HELP_TEXT = `

      ${t("attribute_editor.help_text_body1")}

      @@ -58,9 +61,10 @@ const mentionSetup: MentionFeed[] = [ ]; -export default function AttributeEditor() { +export default function AttributeEditor({ note }: { note: FNote }) { const [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">(); + const [ currentValue, setCurrentValue ] = useState(""); const wrapperRef = useRef(null); const { showTooltip, hideTooltip } = useTooltip(wrapperRef, { trigger: "focus", @@ -77,6 +81,23 @@ export default function AttributeEditor() { hideTooltip(); } }, [ state ]); + + async function renderOwnedAttributes(ownedAttributes: FAttribute[], saved: boolean) { + // attrs are not resorted if position changes after the initial load + ownedAttributes.sort((a, b) => a.position - b.position); + + let htmlAttrs = (await attribute_renderer.renderAttributes(ownedAttributes, true)).html(); + + if (htmlAttrs.length > 0) { + htmlAttrs += " "; + } + + setCurrentValue(htmlAttrs); + } + + useEffect(() => { + renderOwnedAttributes(note.getOwnedAttributes(), true); + }, [ note ]); return (
      @@ -84,6 +105,7 @@ export default function AttributeEditor() { className="attribute-list-editor" tabIndex={200} editor={CKEditorAttributeEditor} + currentValue={currentValue} config={{ toolbar: { items: [] }, placeholder: t("attribute_editor.placeholder"), From 62372ed4c50b018f5c729e5b4be68abdfc6e6041 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 12:55:48 +0300 Subject: [PATCH 078/191] chore(react/ribbon): add logic for displaying attribute detail --- .../attribute_widgets/attribute_editor.ts | 71 ---------- apps/client/src/widgets/react/CKEditor.tsx | 12 +- .../ribbon/components/AttributeEditor.tsx | 126 ++++++++++++++---- 3 files changed, 104 insertions(+), 105 deletions(-) diff --git a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts index 3a9a62dbf..508153dc8 100644 --- a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts +++ b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts @@ -1,12 +1,10 @@ import { t } from "../../services/i18n.js"; import NoteContextAwareWidget from "../note_context_aware_widget.js"; -import noteAutocompleteService, { type Suggestion } from "../../services/note_autocomplete.js"; import server from "../../services/server.js"; import contextMenuService from "../../menus/context_menu.js"; import attributeParser, { type Attribute } from "../../services/attribute_parser.js"; import { AttributeEditor, type EditorConfig, type ModelElement, type MentionFeed, type ModelNode, type ModelPosition } from "@triliumnext/ckeditor5"; import froca from "../../services/froca.js"; -import attributeRenderer from "../../services/attribute_renderer.js"; import noteCreateService from "../../services/note_create.js"; import attributeService from "../../services/attributes.js"; import linkService from "../../services/link.js"; @@ -16,8 +14,6 @@ import type { default as FAttribute, AttributeType } from "../../entities/fattri import type FNote from "../../entities/fnote.js"; import { escapeQuotes } from "../../services/utils.js"; - - const TPL = /*html*/`
      @@ -198,15 +194,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem } } - getPreprocessedData() { - const str = this.textEditor - .getData() - .replace(/]+href="(#[A-Za-z0-9_/]*)"[^>]*>[^<]*<\/a>/g, "$1") - .replace(/ /g, " "); // otherwise .text() below outputs non-breaking space in unicode - - return $("
      ").html(str).text(); - } - dataChanged() { this.lastUpdatedNoteId = this.noteId; @@ -223,64 +210,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem } } - async handleEditorClick(e: JQuery.ClickEvent) { - if () { - const clickIndex = this.getClickIndex(pos); - - let parsedAttrs; - - try { - parsedAttrs = attributeParser.lexAndParse(this.getPreprocessedData(), true); - } catch (e) { - // the input is incorrect because the user messed up with it and now needs to fix it manually - return null; - } - - let matchedAttr: Attribute | null = null; - - for (const attr of parsedAttrs) { - if (attr.startIndex && clickIndex > attr.startIndex && attr.endIndex && clickIndex <= attr.endIndex) { - matchedAttr = attr; - break; - } - } - - setTimeout(() => { - if (matchedAttr) { - this.$editor.tooltip("hide"); - - this.attributeDetailWidget.showAttributeDetail({ - allAttributes: parsedAttrs, - attribute: matchedAttr, - isOwned: true, - x: e.pageX, - y: e.pageY - }); - } else { - this.showHelpTooltip(); - } - }, 100); - } - } - - getClickIndex(pos: ModelPosition) { - let clickIndex = pos.offset - (pos.textNode?.startOffset ?? 0); - - let curNode: ModelNode | Text | ModelElement | null = pos.textNode; - - while (curNode?.previousSibling) { - curNode = curNode.previousSibling; - - if ((curNode as ModelElement).name === "reference") { - clickIndex += (curNode.getAttribute("href") as string).length + 1; - } else if ("data" in curNode) { - clickIndex += (curNode.data as string).length; - } - } - - return clickIndex; - } - async loadReferenceLinkTitle($el: JQuery, href: string) { const { noteId } = linkService.parseNavigationStateFromUrl(href); const note = noteId ? await froca.getNote(noteId, true) : null; diff --git a/apps/client/src/widgets/react/CKEditor.tsx b/apps/client/src/widgets/react/CKEditor.tsx index 60d5f37ab..e9080e310 100644 --- a/apps/client/src/widgets/react/CKEditor.tsx +++ b/apps/client/src/widgets/react/CKEditor.tsx @@ -9,8 +9,8 @@ interface CKEditorOpts { editor: typeof AttributeEditor; disableNewlines?: boolean; disableSpellcheck?: boolean; - onChange?: () => void; - onClick?: (pos?: ModelPosition | null) => void; + onChange?: (newValue?: string) => void; + onClick?: (e, pos?: ModelPosition | null) => void; } export default function CKEditor({ currentValue, className, tabIndex, editor, config, disableNewlines, disableSpellcheck, onChange, onClick }: CKEditorOpts) { @@ -43,7 +43,9 @@ export default function CKEditor({ currentValue, className, tabIndex, editor, co } if (onChange) { - textEditor.model.document.on("change:data", onChange); + textEditor.model.document.on("change:data", () => { + onChange(textEditor.getData()) + }); } if (currentValue) { @@ -62,10 +64,10 @@ export default function CKEditor({ currentValue, className, tabIndex, editor, co ref={editorContainerRef} className={className} tabIndex={tabIndex} - onClick={() => { + onClick={(e) => { if (onClick) { const pos = textEditorRef.current?.model.document.selection.getFirstPosition(); - onClick(pos); + onClick(e, pos); } }} /> diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx index 716c0f25c..dc9e1aa1c 100644 --- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -1,13 +1,15 @@ import { useEffect, useRef, useState } from "preact/hooks" -import { AttributeEditor as CKEditorAttributeEditor, MentionFeed } from "@triliumnext/ckeditor5"; +import { AttributeEditor as CKEditorAttributeEditor, MentionFeed, ModelElement, ModelNode, ModelPosition } from "@triliumnext/ckeditor5"; import { t } from "../../../services/i18n"; import server from "../../../services/server"; import note_autocomplete, { Suggestion } from "../../../services/note_autocomplete"; import CKEditor from "../../react/CKEditor"; -import { useTooltip } from "../../react/hooks"; +import { useLegacyWidget, useTooltip } from "../../react/hooks"; import FAttribute from "../../../entities/fattribute"; import attribute_renderer from "../../../services/attribute_renderer"; import FNote from "../../../entities/fnote"; +import AttributeDetailWidget from "../../attribute_widgets/attribute_detail"; +import attribute_parser, { Attribute } from "../../../services/attribute_parser"; const HELP_TEXT = `

      ${t("attribute_editor.help_text_body1")}

      @@ -64,7 +66,8 @@ const mentionSetup: MentionFeed[] = [ export default function AttributeEditor({ note }: { note: FNote }) { const [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">(); - const [ currentValue, setCurrentValue ] = useState(""); + const [ initialValue, setInitialValue ] = useState(""); + const currentValueRef = useRef(initialValue); const wrapperRef = useRef(null); const { showTooltip, hideTooltip } = useTooltip(wrapperRef, { trigger: "focus", @@ -74,6 +77,8 @@ export default function AttributeEditor({ note }: { note: FNote }) { offset: "0,30" }); + const [ attributeDetailWidgetEl, attributeDetailWidget ] = useLegacyWidget(() => new AttributeDetailWidget()); + useEffect(() => { if (state === "showHelpTooltip") { showTooltip(); @@ -92,7 +97,7 @@ export default function AttributeEditor({ note }: { note: FNote }) { htmlAttrs += " "; } - setCurrentValue(htmlAttrs); + setInitialValue(htmlAttrs); } useEffect(() => { @@ -100,30 +105,93 @@ export default function AttributeEditor({ note }: { note: FNote }) { }, [ note ]); return ( -
      - { - console.log("Data changed!"); - }} - onClick={(pos) => { - if (pos && pos.textNode && pos.textNode.data) { - setState("showAttributeDetail") - } else { - setState("showHelpTooltip"); - } - }} - disableNewlines disableSpellcheck - /> -
      + <> +
      + { + currentValueRef.current = currentValue ?? ""; + }} + onClick={(e, pos) => { + if (pos && pos.textNode && pos.textNode.data) { + const clickIndex = getClickIndex(pos); + + let parsedAttrs; + + try { + parsedAttrs = attribute_parser.lexAndParse(getPreprocessedData(currentValueRef.current), true); + } catch (e) { + // the input is incorrect because the user messed up with it and now needs to fix it manually + return null; + } + + let matchedAttr: Attribute | null = null; + + for (const attr of parsedAttrs) { + if (attr.startIndex && clickIndex > attr.startIndex && attr.endIndex && clickIndex <= attr.endIndex) { + matchedAttr = attr; + break; + } + } + + setTimeout(() => { + if (matchedAttr) { + attributeDetailWidget.showAttributeDetail({ + allAttributes: parsedAttrs, + attribute: matchedAttr, + isOwned: true, + x: e.pageX, + y: e.pageY + }); + setState("showAttributeDetail"); + } else { + setState("showHelpTooltip"); + } + }, 100); + } else { + setState("showHelpTooltip"); + } + }} + disableNewlines disableSpellcheck + /> +
      + + {attributeDetailWidgetEl} + ) +} + +function getPreprocessedData(currentValue: string) { + const str = currentValue + .replace(/]+href="(#[A-Za-z0-9_/]*)"[^>]*>[^<]*<\/a>/g, "$1") + .replace(/ /g, " "); // otherwise .text() below outputs non-breaking space in unicode + + return $("
      ").html(str).text(); +} + +function getClickIndex(pos: ModelPosition) { + let clickIndex = pos.offset - (pos.textNode?.startOffset ?? 0); + + let curNode: ModelNode | Text | ModelElement | null = pos.textNode; + + while (curNode?.previousSibling) { + curNode = curNode.previousSibling; + + if ((curNode as ModelElement).name === "reference") { + clickIndex += (curNode.getAttribute("href") as string).length + 1; + } else if ("data" in curNode) { + clickIndex += (curNode.data as string).length; + } + } + + return clickIndex; } \ No newline at end of file From 12053e75bb600d31527b9dfe8207144beedeca29 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 13:13:01 +0300 Subject: [PATCH 079/191] chore(react/ribbon): fix size of attribute widget --- apps/client/src/widgets/react/CKEditor.tsx | 2 +- apps/client/src/widgets/react/hooks.tsx | 6 ++++-- apps/client/src/widgets/ribbon/style.css | 5 +++++ 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/apps/client/src/widgets/react/CKEditor.tsx b/apps/client/src/widgets/react/CKEditor.tsx index e9080e310..00399c6e8 100644 --- a/apps/client/src/widgets/react/CKEditor.tsx +++ b/apps/client/src/widgets/react/CKEditor.tsx @@ -10,7 +10,7 @@ interface CKEditorOpts { disableNewlines?: boolean; disableSpellcheck?: boolean; onChange?: (newValue?: string) => void; - onClick?: (e, pos?: ModelPosition | null) => void; + onClick?: (e: MouseEvent, pos?: ModelPosition | null) => void; } export default function CKEditor({ currentValue, className, tabIndex, editor, config, disableNewlines, disableSpellcheck, onChange, onClick }: CKEditorOpts) { diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 6436b1734..304b9b22f 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -14,6 +14,7 @@ import FBlob from "../../entities/fblob"; import NoteContextAwareWidget from "../note_context_aware_widget"; import { Ref, RefObject, VNode } from "preact"; import { Tooltip } from "bootstrap"; +import { CSSProperties } from "preact/compat"; type TriliumEventHandler = (data: EventData) => void; const registeredHandlers: Map[]>> = new Map(); @@ -415,9 +416,10 @@ export function useNoteBlob(note: FNote | null | undefined): [ FBlob | null | un return [ blob ] as const; } -export function useLegacyWidget(widgetFactory: () => T, { noteContext, containerClassName }: { +export function useLegacyWidget(widgetFactory: () => T, { noteContext, containerClassName, containerStyle }: { noteContext?: NoteContext; containerClassName?: string; + containerStyle?: CSSProperties; } = {}): [VNode, T] { const ref = useRef(null); const parentComponent = useContext(ParentComponent); @@ -454,7 +456,7 @@ export function useLegacyWidget(widgetFactory: () => T, { } }, [ noteContext ]); - return [
      , widget ] + return [
      , widget ] } /** diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css index 22c9d7b43..b66302a42 100644 --- a/apps/client/src/widgets/ribbon/style.css +++ b/apps/client/src/widgets/ribbon/style.css @@ -331,4 +331,9 @@ .attribute-list-editor p { margin: 0 !important; } + +.attribute-list .attr-detail { + contain: none; +} + /* #endregion */ \ No newline at end of file From f049b8b9156356a599faacbf008976564e08f649 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 18:23:38 +0300 Subject: [PATCH 080/191] chore(react/ribbon): save attribute changes --- .../attribute_widgets/attribute_editor.ts | 43 -------------- .../ribbon/components/AttributeEditor.tsx | 56 ++++++++++++++++++- 2 files changed, 54 insertions(+), 45 deletions(-) diff --git a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts index 508153dc8..0d173cf92 100644 --- a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts +++ b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts @@ -16,7 +16,6 @@ import { escapeQuotes } from "../../services/utils.js"; const TPL = /*html*/` -
      @@ -49,11 +48,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem this.initialized = this.initEditor(); this.$editor.on("keydown", async (e) => { - if (e.which === 13) { - // allow autocomplete to fill the result textarea - setTimeout(() => this.save(), 100); - } - this.attributeDetailWidget.hide(); }); @@ -62,7 +56,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem this.$addNewAttributeButton = this.$widget.find(".add-new-attribute-button"); this.$addNewAttributeButton.on("click", (e) => this.addNewAttribute(e)); - this.$saveAttributesButton = this.$widget.find(".save-attributes-button"); this.$saveAttributesButton.on("click", () => this.save()); this.$errors = this.$widget.find(".attribute-errors"); @@ -170,39 +163,11 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem console.warn("Ignoring blur event because a different note is loaded."); return; } - - const attributes = this.parseAttributes(); - - if (attributes) { - await server.put(`notes/${this.noteId}/attributes`, attributes, this.componentId); - - this.$saveAttributesButton.fadeOut(); - - // blink the attribute text to give a visual hint that save has been executed - this.$editor.css("opacity", 0); - - // revert back - setTimeout(() => this.$editor.css("opacity", 1), 100); - } - } - - parseAttributes() { - try { - return attributeParser.lexAndParse(this.getPreprocessedData()); - } catch (e: any) { - this.$errors.text(e.message).slideDown(); - } } dataChanged() { this.lastUpdatedNoteId = this.noteId; - if (this.lastSavedContent === this.textEditor.getData()) { - this.$saveAttributesButton.fadeOut(); - } else { - this.$saveAttributesButton.fadeIn(); - } - if (this.$errors.is(":visible")) { // using .hide() instead of .slideUp() since this will also hide the error after confirming // mention for relation name which suits up. When using.slideUp() error will appear and the slideUp which is weird @@ -218,14 +183,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem $el.text(title); } - async renderOwnedAttributes(ownedAttributes: FAttribute[], saved: boolean) { - if (saved) { - this.lastSavedContent = this.textEditor.getData(); - - this.$saveAttributesButton.fadeOut(0); - } - } - async createNoteForReferenceLink(title: string) { let result; if (this.notePath) { diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx index dc9e1aa1c..c1e59b114 100644 --- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -10,6 +10,8 @@ import attribute_renderer from "../../../services/attribute_renderer"; import FNote from "../../../entities/fnote"; import AttributeDetailWidget from "../../attribute_widgets/attribute_detail"; import attribute_parser, { Attribute } from "../../../services/attribute_parser"; +import ActionButton from "../../react/ActionButton"; +import { escapeQuotes } from "../../../services/utils"; const HELP_TEXT = `

      ${t("attribute_editor.help_text_body1")}

      @@ -63,10 +65,13 @@ const mentionSetup: MentionFeed[] = [ ]; -export default function AttributeEditor({ note }: { note: FNote }) { +export default function AttributeEditor({ note, componentId }: { note: FNote, componentId: string }) { const [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">(); + const [ error, setError ] = useState(); + const [ needsSaving, setNeedsSaving ] = useState(false); const [ initialValue, setInitialValue ] = useState(""); + const lastSavedContent = useRef(); const currentValueRef = useRef(initialValue); const wrapperRef = useRef(null); const { showTooltip, hideTooltip } = useTooltip(wrapperRef, { @@ -97,16 +102,55 @@ export default function AttributeEditor({ note }: { note: FNote }) { htmlAttrs += " "; } + if (saved) { + lastSavedContent.current = currentValueRef.current; + setNeedsSaving(false); + } + setInitialValue(htmlAttrs); } + function parseAttributes() { + try { + return attribute_parser.lexAndParse(getPreprocessedData(currentValueRef.current)); + } catch (e: any) { + setError(e); + } + } + + async function save() { + const attributes = parseAttributes(); + if (!attributes) { + // An error occurred and will be reported to the user. + return; + } + + await server.put(`notes/${note.noteId}/attributes`, attributes, componentId); + setNeedsSaving(false); + + // blink the attribute text to give a visual hint that save has been executed + if (wrapperRef.current) { + wrapperRef.current.style.opacity = "0"; + setTimeout(() => wrapperRef.current!.style.opacity = "1", 100); + } + } + useEffect(() => { renderOwnedAttributes(note.getOwnedAttributes(), true); }, [ note ]); return ( <> -
      +
      { + if (e.key === "Enter") { + // allow autocomplete to fill the result textarea + setTimeout(() => save(), 100); + } + }} + > { currentValueRef.current = currentValue ?? ""; + setNeedsSaving(lastSavedContent.current !== currentValue); }} onClick={(e, pos) => { if (pos && pos.textNode && pos.textNode.data) { @@ -163,6 +208,13 @@ export default function AttributeEditor({ note }: { note: FNote }) { }} disableNewlines disableSpellcheck /> + + { needsSaving && }
      {attributeDetailWidgetEl} From e8ae5486c844b08a4ce768f187dda08c8d8bc218 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 18:28:42 +0300 Subject: [PATCH 081/191] chore(react/ribbon): display attribute errors --- .../widgets/attribute_widgets/attribute_editor.ts | 13 ------------- .../widgets/ribbon/components/AttributeEditor.tsx | 9 ++++++++- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts index 0d173cf92..4d0bc64e5 100644 --- a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts +++ b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts @@ -11,14 +11,11 @@ import linkService from "../../services/link.js"; import type AttributeDetailWidget from "./attribute_detail.js"; import type { CommandData, EventData, EventListener, FilteredCommandNames } from "../../components/app_context.js"; import type { default as FAttribute, AttributeType } from "../../entities/fattribute.js"; -import type FNote from "../../entities/fnote.js"; import { escapeQuotes } from "../../services/utils.js"; const TPL = /*html*/`
      - -
      `; @@ -29,11 +26,9 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem private $editor!: JQuery; private $addNewAttributeButton!: JQuery; private $saveAttributesButton!: JQuery; - private $errors!: JQuery; private textEditor!: AttributeEditor; private lastUpdatedNoteId!: string | undefined; - private lastSavedContent!: string; constructor(attributeDetailWidget: AttributeDetailWidget) { super(); @@ -57,8 +52,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem this.$addNewAttributeButton.on("click", (e) => this.addNewAttribute(e)); this.$saveAttributesButton.on("click", () => this.save()); - - this.$errors = this.$widget.find(".attribute-errors"); } addNewAttribute(e: JQuery.ClickEvent) { @@ -167,12 +160,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem dataChanged() { this.lastUpdatedNoteId = this.noteId; - - if (this.$errors.is(":visible")) { - // using .hide() instead of .slideUp() since this will also hide the error after confirming - // mention for relation name which suits up. When using.slideUp() error will appear and the slideUp which is weird - this.$errors.hide(); - } } async loadReferenceLinkTitle($el: JQuery, href: string) { diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx index c1e59b114..36c0f6dcf 100644 --- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -165,12 +165,13 @@ export default function AttributeEditor({ note, componentId }: { note: FNote, co onChange={(currentValue) => { currentValueRef.current = currentValue ?? ""; setNeedsSaving(lastSavedContent.current !== currentValue); + setError(undefined); }} onClick={(e, pos) => { if (pos && pos.textNode && pos.textNode.data) { const clickIndex = getClickIndex(pos); - let parsedAttrs; + let parsedAttrs: Attribute[]; try { parsedAttrs = attribute_parser.lexAndParse(getPreprocessedData(currentValueRef.current), true); @@ -215,6 +216,12 @@ export default function AttributeEditor({ note, componentId }: { note: FNote, co text={escapeQuotes(t("attribute_editor.save_attributes"))} onClick={save} /> } + + { error && ( +
      + {typeof error === "object" && "message" in error && typeof error.message === "string" && error.message} +
      + )}
      {attributeDetailWidgetEl} From 168d25c0207a971560a9ef3487b71614dff27035 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 19:13:48 +0300 Subject: [PATCH 082/191] chore(react/ribbon): fix save icon displayed when it shouldn't --- .../ribbon/components/AttributeEditor.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx index 36c0f6dcf..6a8981431 100644 --- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -96,16 +96,16 @@ export default function AttributeEditor({ note, componentId }: { note: FNote, co // attrs are not resorted if position changes after the initial load ownedAttributes.sort((a, b) => a.position - b.position); - let htmlAttrs = (await attribute_renderer.renderAttributes(ownedAttributes, true)).html(); + let htmlAttrs = getPreprocessedData("

      " + (await attribute_renderer.renderAttributes(ownedAttributes, true)).html() + "

      "); + + if (saved) { + lastSavedContent.current = htmlAttrs; + setNeedsSaving(false); + } if (htmlAttrs.length > 0) { htmlAttrs += " "; - } - - if (saved) { - lastSavedContent.current = currentValueRef.current; - setNeedsSaving(false); - } + } setInitialValue(htmlAttrs); } @@ -164,7 +164,7 @@ export default function AttributeEditor({ note, componentId }: { note: FNote, co }} onChange={(currentValue) => { currentValueRef.current = currentValue ?? ""; - setNeedsSaving(lastSavedContent.current !== currentValue); + setNeedsSaving((lastSavedContent.current ?? "").trimEnd() !== getPreprocessedData(currentValue ?? "").trimEnd()); setError(undefined); }} onClick={(e, pos) => { From 73ca285b7a6973eadc263e329ff499810d9186f9 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 19:26:23 +0300 Subject: [PATCH 083/191] chore(react/ribbon): support reference links in attributes --- .../attribute_widgets/attribute_editor.ts | 8 ------ .../ribbon/components/AttributeEditor.tsx | 28 +++++++++++++++++-- 2 files changed, 25 insertions(+), 11 deletions(-) diff --git a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts index 4d0bc64e5..9dc426c6e 100644 --- a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts +++ b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts @@ -162,14 +162,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem this.lastUpdatedNoteId = this.noteId; } - async loadReferenceLinkTitle($el: JQuery, href: string) { - const { noteId } = linkService.parseNavigationStateFromUrl(href); - const note = noteId ? await froca.getNote(noteId, true) : null; - const title = note ? note.title : "[missing]"; - - $el.text(title); - } - async createNoteForReferenceLink(title: string) { let result; if (this.notePath) { diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx index 6a8981431..9ea7ebaca 100644 --- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from "preact/hooks" +import { useContext, useEffect, useRef, useState } from "preact/hooks" import { AttributeEditor as CKEditorAttributeEditor, MentionFeed, ModelElement, ModelNode, ModelPosition } from "@triliumnext/ckeditor5"; import { t } from "../../../services/i18n"; import server from "../../../services/server"; @@ -12,6 +12,10 @@ import AttributeDetailWidget from "../../attribute_widgets/attribute_detail"; import attribute_parser, { Attribute } from "../../../services/attribute_parser"; import ActionButton from "../../react/ActionButton"; import { escapeQuotes } from "../../../services/utils"; +import { ParentComponent } from "../../react/react_utils"; +import Component from "../../../components/component"; +import link from "../../../services/link"; +import froca from "../../../services/froca"; const HELP_TEXT = `

      ${t("attribute_editor.help_text_body1")}

      @@ -66,14 +70,18 @@ const mentionSetup: MentionFeed[] = [ export default function AttributeEditor({ note, componentId }: { note: FNote, componentId: string }) { + const parentComponent = useContext(ParentComponent); + injectLoadReferenceLinkTitle(parentComponent); const [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">(); const [ error, setError ] = useState(); const [ needsSaving, setNeedsSaving ] = useState(false); const [ initialValue, setInitialValue ] = useState(""); + const lastSavedContent = useRef(); const currentValueRef = useRef(initialValue); const wrapperRef = useRef(null); + const { showTooltip, hideTooltip } = useTooltip(wrapperRef, { trigger: "focus", html: true, @@ -96,7 +104,7 @@ export default function AttributeEditor({ note, componentId }: { note: FNote, co // attrs are not resorted if position changes after the initial load ownedAttributes.sort((a, b) => a.position - b.position); - let htmlAttrs = getPreprocessedData("

      " + (await attribute_renderer.renderAttributes(ownedAttributes, true)).html() + "

      "); + let htmlAttrs = ("

      " + (await attribute_renderer.renderAttributes(ownedAttributes, true)).html() + "

      "); if (saved) { lastSavedContent.current = htmlAttrs; @@ -164,7 +172,10 @@ export default function AttributeEditor({ note, componentId }: { note: FNote, co }} onChange={(currentValue) => { currentValueRef.current = currentValue ?? ""; - setNeedsSaving((lastSavedContent.current ?? "").trimEnd() !== getPreprocessedData(currentValue ?? "").trimEnd()); + + const oldValue = getPreprocessedData(lastSavedContent.current ?? "").trimEnd(); + const newValue = getPreprocessedData(currentValue ?? "").trimEnd(); + setNeedsSaving(oldValue !== newValue); setError(undefined); }} onClick={(e, pos) => { @@ -253,4 +264,15 @@ function getClickIndex(pos: ModelPosition) { } return clickIndex; +} + +function injectLoadReferenceLinkTitle(component: Component | null) { + if (!component) return; + (component as any).loadReferenceLinkTitle = async ($el: JQuery, href: string) => { + const { noteId } = link.parseNavigationStateFromUrl(href); + const note = noteId ? await froca.getNote(noteId, true) : null; + const title = note ? note.title : "[missing]"; + + $el.text(title); + } } \ No newline at end of file From 3f3c7cfe88d2bad6cf6fdb7837281d53814a7922 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 19:48:01 +0300 Subject: [PATCH 084/191] chore(react/ribbon): add menu --- .../attribute_widgets/attribute_editor.ts | 94 ------------------- .../client/src/widgets/react/ActionButton.tsx | 2 +- .../ribbon/components/AttributeEditor.tsx | 88 +++++++++++++++++ 3 files changed, 89 insertions(+), 95 deletions(-) diff --git a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts index 9dc426c6e..cb6d8272e 100644 --- a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts +++ b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts @@ -1,25 +1,12 @@ import { t } from "../../services/i18n.js"; import NoteContextAwareWidget from "../note_context_aware_widget.js"; -import server from "../../services/server.js"; import contextMenuService from "../../menus/context_menu.js"; -import attributeParser, { type Attribute } from "../../services/attribute_parser.js"; import { AttributeEditor, type EditorConfig, type ModelElement, type MentionFeed, type ModelNode, type ModelPosition } from "@triliumnext/ckeditor5"; -import froca from "../../services/froca.js"; import noteCreateService from "../../services/note_create.js"; import attributeService from "../../services/attributes.js"; -import linkService from "../../services/link.js"; import type AttributeDetailWidget from "./attribute_detail.js"; import type { CommandData, EventData, EventListener, FilteredCommandNames } from "../../components/app_context.js"; import type { default as FAttribute, AttributeType } from "../../entities/fattribute.js"; -import { escapeQuotes } from "../../services/utils.js"; - -const TPL = /*html*/` - -
      -
      -`; - -type AttributeCommandNames = FilteredCommandNames; export default class AttributeEditorWidget extends NoteContextAwareWidget implements EventListener<"entitiesReloaded">, EventListener<"addNewLabel">, EventListener<"addNewRelation"> { private attributeDetailWidget: AttributeDetailWidget; @@ -48,30 +35,9 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem this.$editor.on("blur", () => setTimeout(() => this.save(), 100)); // Timeout to fix https://github.com/zadam/trilium/issues/4160 - this.$addNewAttributeButton = this.$widget.find(".add-new-attribute-button"); - this.$addNewAttributeButton.on("click", (e) => this.addNewAttribute(e)); - this.$saveAttributesButton.on("click", () => this.save()); } - addNewAttribute(e: JQuery.ClickEvent) { - contextMenuService.show({ - x: e.pageX, - y: e.pageY, - orientation: "left", - items: [ - { title: t("attribute_editor.add_new_label"), command: "addNewLabel", uiIcon: "bx bx-hash" }, - { title: t("attribute_editor.add_new_relation"), command: "addNewRelation", uiIcon: "bx bx-transfer" }, - { title: "----" }, - { title: t("attribute_editor.add_new_label_definition"), command: "addNewLabelDefinition", uiIcon: "bx bx-empty" }, - { title: t("attribute_editor.add_new_relation_definition"), command: "addNewRelationDefinition", uiIcon: "bx bx-empty" } - ], - selectMenuItemHandler: ({ command }) => this.handleAddNewAttributeCommand(command) - }); - // Prevent automatic hiding of the context menu due to the button being clicked. - e.stopPropagation(); - } - // triggered from keyboard shortcut async addNewLabelEvent({ ntxId }: EventData<"addNewLabel">) { if (this.isNoteContext(ntxId)) { @@ -90,66 +56,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem } } - async handleAddNewAttributeCommand(command: AttributeCommandNames | undefined) { - // TODO: Not sure what the relation between FAttribute[] and Attribute[] is. - const attrs = this.parseAttributes() as FAttribute[]; - - if (!attrs) { - return; - } - - let type: AttributeType; - let name; - let value; - - if (command === "addNewLabel") { - type = "label"; - name = "myLabel"; - value = ""; - } else if (command === "addNewRelation") { - type = "relation"; - name = "myRelation"; - value = ""; - } else if (command === "addNewLabelDefinition") { - type = "label"; - name = "label:myLabel"; - value = "promoted,single,text"; - } else if (command === "addNewRelationDefinition") { - type = "label"; - name = "relation:myRelation"; - value = "promoted,single"; - } else { - return; - } - - // TODO: Incomplete type - //@ts-ignore - attrs.push({ - type, - name, - value, - isInheritable: false - }); - - await this.renderOwnedAttributes(attrs, false); - - this.$editor.scrollTop(this.$editor[0].scrollHeight); - - const rect = this.$editor[0].getBoundingClientRect(); - - setTimeout(() => { - // showing a little bit later because there's a conflict with outside click closing the attr detail - this.attributeDetailWidget.showAttributeDetail({ - allAttributes: attrs, - attribute: attrs[attrs.length - 1], - isOwned: true, - x: (rect.left + rect.right) / 2, - y: rect.bottom, - focus: "name" - }); - }, 100); - } - async save() { if (this.lastUpdatedNoteId !== this.noteId) { // https://github.com/zadam/trilium/issues/3090 diff --git a/apps/client/src/widgets/react/ActionButton.tsx b/apps/client/src/widgets/react/ActionButton.tsx index 65eb60469..a6a1ee740 100644 --- a/apps/client/src/widgets/react/ActionButton.tsx +++ b/apps/client/src/widgets/react/ActionButton.tsx @@ -2,7 +2,7 @@ interface ActionButtonProps { text: string; icon: string; className?: string; - onClick?: () => void; + onClick?: (e: MouseEvent) => void; } export default function ActionButton({ text, icon, className, onClick }: ActionButtonProps) { diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx index 9ea7ebaca..f868744c5 100644 --- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -16,6 +16,11 @@ import { ParentComponent } from "../../react/react_utils"; import Component from "../../../components/component"; import link from "../../../services/link"; import froca from "../../../services/froca"; +import contextMenu from "../../../menus/context_menu"; +import type { CommandData, FilteredCommandNames } from "../../../components/app_context"; +import { AttributeType } from "@triliumnext/commons"; + +type AttributeCommandNames = FilteredCommandNames; const HELP_TEXT = `

      ${t("attribute_editor.help_text_body1")}

      @@ -143,6 +148,65 @@ export default function AttributeEditor({ note, componentId }: { note: FNote, co } } + async function handleAddNewAttributeCommand(command: AttributeCommandNames | undefined) { + // TODO: Not sure what the relation between FAttribute[] and Attribute[] is. + const attrs = parseAttributes() as FAttribute[]; + + if (!attrs) { + return; + } + + let type: AttributeType; + let name; + let value; + + if (command === "addNewLabel") { + type = "label"; + name = "myLabel"; + value = ""; + } else if (command === "addNewRelation") { + type = "relation"; + name = "myRelation"; + value = ""; + } else if (command === "addNewLabelDefinition") { + type = "label"; + name = "label:myLabel"; + value = "promoted,single,text"; + } else if (command === "addNewRelationDefinition") { + type = "label"; + name = "relation:myRelation"; + value = "promoted,single"; + } else { + return; + } + + // TODO: Incomplete type + //@ts-ignore + attrs.push({ + type, + name, + value, + isInheritable: false + }); + + await renderOwnedAttributes(attrs, false); + + // this.$editor.scrollTop(this.$editor[0].scrollHeight); + const rect = wrapperRef.current?.getBoundingClientRect(); + + setTimeout(() => { + // showing a little bit later because there's a conflict with outside click closing the attr detail + attributeDetailWidget.showAttributeDetail({ + allAttributes: attrs, + attribute: attrs[attrs.length - 1], + isOwned: true, + x: rect ? (rect.left + rect.right) / 2 : 0, + y: rect?.bottom ?? 0, + focus: "name" + }); + }, 100); + } + useEffect(() => { renderOwnedAttributes(note.getOwnedAttributes(), true); }, [ note ]); @@ -228,6 +292,30 @@ export default function AttributeEditor({ note, componentId }: { note: FNote, co onClick={save} /> } + { + // Prevent automatic hiding of the context menu due to the button being clicked. + e.stopPropagation(); + + contextMenu.show({ + x: e.pageX, + y: e.pageY, + orientation: "left", + items: [ + { title: t("attribute_editor.add_new_label"), command: "addNewLabel", uiIcon: "bx bx-hash" }, + { title: t("attribute_editor.add_new_relation"), command: "addNewRelation", uiIcon: "bx bx-transfer" }, + { title: "----" }, + { title: t("attribute_editor.add_new_label_definition"), command: "addNewLabelDefinition", uiIcon: "bx bx-empty" }, + { title: t("attribute_editor.add_new_relation_definition"), command: "addNewRelationDefinition", uiIcon: "bx bx-empty" } + ], + selectMenuItemHandler: (item) => handleAddNewAttributeCommand(item.command) + }); + }} + /> + { error && (
      {typeof error === "object" && "message" in error && typeof error.message === "string" && error.message} From efd713dc6129114b5988352ea27f08de0628f3c7 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 19:54:02 +0300 Subject: [PATCH 085/191] chore(react/ribbon): add blur & keydown events --- .../attribute_widgets/attribute_editor.ts | 38 ------------------- apps/client/src/widgets/react/CKEditor.tsx | 7 ++-- .../ribbon/components/AttributeEditor.tsx | 2 + 3 files changed, 6 insertions(+), 41 deletions(-) diff --git a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts index cb6d8272e..719c77b85 100644 --- a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts +++ b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts @@ -1,42 +1,4 @@ -import { t } from "../../services/i18n.js"; -import NoteContextAwareWidget from "../note_context_aware_widget.js"; -import contextMenuService from "../../menus/context_menu.js"; -import { AttributeEditor, type EditorConfig, type ModelElement, type MentionFeed, type ModelNode, type ModelPosition } from "@triliumnext/ckeditor5"; -import noteCreateService from "../../services/note_create.js"; -import attributeService from "../../services/attributes.js"; -import type AttributeDetailWidget from "./attribute_detail.js"; -import type { CommandData, EventData, EventListener, FilteredCommandNames } from "../../components/app_context.js"; -import type { default as FAttribute, AttributeType } from "../../entities/fattribute.js"; - export default class AttributeEditorWidget extends NoteContextAwareWidget implements EventListener<"entitiesReloaded">, EventListener<"addNewLabel">, EventListener<"addNewRelation"> { - private attributeDetailWidget: AttributeDetailWidget; - private $editor!: JQuery; - private $addNewAttributeButton!: JQuery; - private $saveAttributesButton!: JQuery; - - private textEditor!: AttributeEditor; - private lastUpdatedNoteId!: string | undefined; - - constructor(attributeDetailWidget: AttributeDetailWidget) { - super(); - - this.attributeDetailWidget = attributeDetailWidget; - } - - doRender() { - this.$widget = $(TPL); - this.$editor = this.$widget.find(".attribute-list-editor"); - - this.initialized = this.initEditor(); - - this.$editor.on("keydown", async (e) => { - this.attributeDetailWidget.hide(); - }); - - this.$editor.on("blur", () => setTimeout(() => this.save(), 100)); // Timeout to fix https://github.com/zadam/trilium/issues/4160 - - this.$saveAttributesButton.on("click", () => this.save()); - } // triggered from keyboard shortcut async addNewLabelEvent({ ntxId }: EventData<"addNewLabel">) { diff --git a/apps/client/src/widgets/react/CKEditor.tsx b/apps/client/src/widgets/react/CKEditor.tsx index 00399c6e8..fcd61179b 100644 --- a/apps/client/src/widgets/react/CKEditor.tsx +++ b/apps/client/src/widgets/react/CKEditor.tsx @@ -11,9 +11,11 @@ interface CKEditorOpts { disableSpellcheck?: boolean; onChange?: (newValue?: string) => void; onClick?: (e: MouseEvent, pos?: ModelPosition | null) => void; + onKeyDown?: (e: KeyboardEvent) => void; + onBlur?: () => void; } -export default function CKEditor({ currentValue, className, tabIndex, editor, config, disableNewlines, disableSpellcheck, onChange, onClick }: CKEditorOpts) { +export default function CKEditor({ currentValue, editor, config, disableNewlines, disableSpellcheck, onChange, onClick, ...restProps }: CKEditorOpts) { const editorContainerRef = useRef(null); const textEditorRef = useRef(null); @@ -62,14 +64,13 @@ export default function CKEditor({ currentValue, className, tabIndex, editor, co return (
      { if (onClick) { const pos = textEditorRef.current?.model.document.selection.getFirstPosition(); onClick(e, pos); } }} + {...restProps} /> ) } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx index f868744c5..0e60d847e 100644 --- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -282,6 +282,8 @@ export default function AttributeEditor({ note, componentId }: { note: FNote, co setState("showHelpTooltip"); } }} + onKeyDown={() => attributeDetailWidget.hide()} + onBlur={() => save()} disableNewlines disableSpellcheck /> From db687197de06e0efd982b621130aa081e815435b Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 20:31:00 +0300 Subject: [PATCH 086/191] chore(react/ribbon): add focus to attribute editor --- .../attribute_widgets/attribute_editor.ts | 22 ---------------- apps/client/src/widgets/react/CKEditor.tsx | 23 +++++++++++++++-- apps/client/src/widgets/ribbon/Ribbon.tsx | 5 ++-- .../ribbon/components/AttributeEditor.tsx | 25 ++++++++++++++++--- .../src/widgets/ribbon/ribbon-interface.ts | 1 + 5 files changed, 46 insertions(+), 30 deletions(-) diff --git a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts index 719c77b85..6c732b779 100644 --- a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts +++ b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts @@ -18,14 +18,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem } } - async save() { - if (this.lastUpdatedNoteId !== this.noteId) { - // https://github.com/zadam/trilium/issues/3090 - console.warn("Ignoring blur event because a different note is loaded."); - return; - } - } - dataChanged() { this.lastUpdatedNoteId = this.noteId; } @@ -49,20 +41,6 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem focus() { this.$editor.trigger("focus"); - this.textEditor.model.change((writer) => { - const documentRoot = this.textEditor.editing.model.document.getRoot(); - if (!documentRoot) { - return; - } - const positionAt = writer.createPositionAt(documentRoot, "end"); - writer.setSelection(positionAt); - }); - } - - entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { - if (loadResults.getAttributeRows(this.componentId).find((attr) => attributeService.isAffecting(attr, this.note))) { - this.refresh(); - } } } diff --git a/apps/client/src/widgets/react/CKEditor.tsx b/apps/client/src/widgets/react/CKEditor.tsx index fcd61179b..a9f49d887 100644 --- a/apps/client/src/widgets/react/CKEditor.tsx +++ b/apps/client/src/widgets/react/CKEditor.tsx @@ -1,7 +1,13 @@ import { CKTextEditor, type AttributeEditor, type EditorConfig, type ModelPosition } from "@triliumnext/ckeditor5"; -import { useEffect, useRef } from "preact/compat"; +import { useEffect, useImperativeHandle, useRef } from "preact/compat"; +import { MutableRef } from "preact/hooks"; + +export interface CKEditorApi { + focus: () => void; +} interface CKEditorOpts { + apiRef: MutableRef; currentValue?: string; className: string; tabIndex?: number; @@ -15,9 +21,22 @@ interface CKEditorOpts { onBlur?: () => void; } -export default function CKEditor({ currentValue, editor, config, disableNewlines, disableSpellcheck, onChange, onClick, ...restProps }: CKEditorOpts) { +export default function CKEditor({ apiRef, currentValue, editor, config, disableNewlines, disableSpellcheck, onChange, onClick, ...restProps }: CKEditorOpts) { const editorContainerRef = useRef(null); const textEditorRef = useRef(null); + useImperativeHandle(apiRef, () => { + return { + focus() { + editorContainerRef.current?.focus(); + textEditorRef.current?.model.change((writer) => { + const documentRoot = textEditorRef.current?.editing.model.document.getRoot(); + if (documentRoot) { + writer.setSelection(writer.createPositionAt(documentRoot, "end")); + } + }); + } + }; + }, [ editorContainerRef ]); useEffect(() => { if (!editorContainerRef.current) return; diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index 032a905a6..74e1d19b4 100644 --- a/apps/client/src/widgets/ribbon/Ribbon.tsx +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -148,7 +148,7 @@ const TAB_CONFIGURATION = numberObjectsInPlace([ ]); export default function Ribbon() { - const { note, ntxId, hoistedNoteId, notePath, noteContext } = useNoteContext(); + const { note, ntxId, hoistedNoteId, notePath, noteContext, componentId } = useNoteContext(); const titleContext: TitleContext = { note }; const [ activeTabIndex, setActiveTabIndex ] = useState(); const filteredTabs = useMemo(() => TAB_CONFIGURATION.filter(tab => typeof tab.show === "boolean" ? tab.show : tab.show?.(titleContext)), [ titleContext, note ]); @@ -190,7 +190,8 @@ export default function Ribbon() { ntxId, hoistedNoteId, notePath, - noteContext + noteContext, + componentId }); })}
      diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx index 0e60d847e..7a82962cc 100644 --- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -3,8 +3,8 @@ import { AttributeEditor as CKEditorAttributeEditor, MentionFeed, ModelElement, import { t } from "../../../services/i18n"; import server from "../../../services/server"; import note_autocomplete, { Suggestion } from "../../../services/note_autocomplete"; -import CKEditor from "../../react/CKEditor"; -import { useLegacyWidget, useTooltip } from "../../react/hooks"; +import CKEditor, { CKEditorApi } from "../../react/CKEditor"; +import { useLegacyWidget, useTooltip, useTriliumEventBeta } from "../../react/hooks"; import FAttribute from "../../../entities/fattribute"; import attribute_renderer from "../../../services/attribute_renderer"; import FNote from "../../../entities/fnote"; @@ -19,6 +19,7 @@ import froca from "../../../services/froca"; import contextMenu from "../../../menus/context_menu"; import type { CommandData, FilteredCommandNames } from "../../../components/app_context"; import { AttributeType } from "@triliumnext/commons"; +import attributes from "../../../services/attributes"; type AttributeCommandNames = FilteredCommandNames; @@ -86,6 +87,7 @@ export default function AttributeEditor({ note, componentId }: { note: FNote, co const lastSavedContent = useRef(); const currentValueRef = useRef(initialValue); const wrapperRef = useRef(null); + const editorRef = useRef(); const { showTooltip, hideTooltip } = useTooltip(wrapperRef, { trigger: "focus", @@ -207,9 +209,23 @@ export default function AttributeEditor({ note, componentId }: { note: FNote, co }, 100); } - useEffect(() => { + // Refresh with note + function refresh() { renderOwnedAttributes(note.getOwnedAttributes(), true); - }, [ note ]); + } + + useEffect(() => refresh(), [ note ]); + useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { + if (loadResults.getAttributeRows(componentId).find((attr) => attributes.isAffecting(attr, note))) { + console.log("Trigger due to entities reloaded"); + refresh(); + } + }); + + // Focus on show. + useEffect(() => { + setTimeout(() => editorRef.current?.focus(), 0); + }, []); return ( <> @@ -224,6 +240,7 @@ export default function AttributeEditor({ note, componentId }: { note: FNote, co }} > Date: Sat, 23 Aug 2025 20:35:19 +0300 Subject: [PATCH 087/191] chore(react/ribbon): unable to create notes in attribute editor --- .../attribute_widgets/attribute_editor.ts | 22 ------------------- .../src/widgets/ribbon/OwnedAttributesTab.tsx | 10 +++++++-- .../ribbon/components/AttributeEditor.tsx | 18 ++++++++++++--- 3 files changed, 23 insertions(+), 27 deletions(-) diff --git a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts index 6c732b779..87db417f5 100644 --- a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts +++ b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts @@ -18,29 +18,7 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem } } - dataChanged() { - this.lastUpdatedNoteId = this.noteId; - } - - async createNoteForReferenceLink(title: string) { - let result; - if (this.notePath) { - result = await noteCreateService.createNoteWithTypePrompt(this.notePath, { - activate: false, - title: title - }); - } - - return result?.note?.getBestNotePathString(); - } - async updateAttributeList(attributes: FAttribute[]) { await this.renderOwnedAttributes(attributes, false); } - - focus() { - this.$editor.trigger("focus"); - - - } } diff --git a/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx b/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx index 2c168841f..daf9d1495 100644 --- a/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx +++ b/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx @@ -1,10 +1,16 @@ import AttributeEditor from "./components/AttributeEditor"; import { TabContext } from "./ribbon-interface"; -export default function OwnedAttributesTab({ note }: TabContext) { +export default function OwnedAttributesTab({ note, notePath, componentId }: TabContext) { return (
      - { note && } + { note && ( + + )}
      ) } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx index 7a82962cc..2ef34d22e 100644 --- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -20,6 +20,7 @@ import contextMenu from "../../../menus/context_menu"; import type { CommandData, FilteredCommandNames } from "../../../components/app_context"; import { AttributeType } from "@triliumnext/commons"; import attributes from "../../../services/attributes"; +import note_create from "../../../services/note_create"; type AttributeCommandNames = FilteredCommandNames; @@ -75,9 +76,9 @@ const mentionSetup: MentionFeed[] = [ ]; -export default function AttributeEditor({ note, componentId }: { note: FNote, componentId: string }) { +export default function AttributeEditor({ note, componentId, notePath }: { note: FNote, componentId: string, notePath?: string | null }) { const parentComponent = useContext(ParentComponent); - injectLoadReferenceLinkTitle(parentComponent); + injectLoadReferenceLinkTitle(parentComponent, notePath); const [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">(); const [ error, setError ] = useState(); @@ -373,7 +374,7 @@ function getClickIndex(pos: ModelPosition) { return clickIndex; } -function injectLoadReferenceLinkTitle(component: Component | null) { +function injectLoadReferenceLinkTitle(component: Component | null, notePath?: string | null) { if (!component) return; (component as any).loadReferenceLinkTitle = async ($el: JQuery, href: string) => { const { noteId } = link.parseNavigationStateFromUrl(href); @@ -382,4 +383,15 @@ function injectLoadReferenceLinkTitle(component: Component | null) { $el.text(title); } + (component as any).createNoteForReferenceLink = async (title: string) => { + let result; + if (notePath) { + result = await note_create.createNoteWithTypePrompt(notePath, { + activate: false, + title: title + }); + } + + return result?.note?.getBestNotePathString(); + } } \ No newline at end of file From a934760960ee69967418ba7c7eb3727365c81ce7 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 20:44:03 +0300 Subject: [PATCH 088/191] refactor(react/ribbon): use custom method for injecting handlers --- apps/client/src/widgets/react/hooks.tsx | 7 +++ .../ribbon/components/AttributeEditor.tsx | 51 +++++++++---------- 2 files changed, 31 insertions(+), 27 deletions(-) diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 304b9b22f..7a47674b8 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -538,4 +538,11 @@ export function useTooltip(elRef: RefObject, config: Partial) { + const parentComponent = useContext(ParentComponent); + useEffect(() => { + Object.assign(parentComponent as any, handlers); + }, [ handlers ]) } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx index 2ef34d22e..9670b06fe 100644 --- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -1,10 +1,10 @@ -import { useContext, useEffect, useRef, useState } from "preact/hooks" +import { useContext, useEffect, useMemo, useRef, useState } from "preact/hooks" import { AttributeEditor as CKEditorAttributeEditor, MentionFeed, ModelElement, ModelNode, ModelPosition } from "@triliumnext/ckeditor5"; import { t } from "../../../services/i18n"; import server from "../../../services/server"; import note_autocomplete, { Suggestion } from "../../../services/note_autocomplete"; import CKEditor, { CKEditorApi } from "../../react/CKEditor"; -import { useLegacyWidget, useTooltip, useTriliumEventBeta } from "../../react/hooks"; +import { useLegacyImperativeHandlers, useLegacyWidget, useTooltip, useTriliumEventBeta } from "../../react/hooks"; import FAttribute from "../../../entities/fattribute"; import attribute_renderer from "../../../services/attribute_renderer"; import FNote from "../../../entities/fnote"; @@ -77,9 +77,6 @@ const mentionSetup: MentionFeed[] = [ export default function AttributeEditor({ note, componentId, notePath }: { note: FNote, componentId: string, notePath?: string | null }) { - const parentComponent = useContext(ParentComponent); - injectLoadReferenceLinkTitle(parentComponent, notePath); - const [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">(); const [ error, setError ] = useState(); const [ needsSaving, setNeedsSaving ] = useState(false); @@ -227,6 +224,28 @@ export default function AttributeEditor({ note, componentId, notePath }: { note: useEffect(() => { setTimeout(() => editorRef.current?.focus(), 0); }, []); + + // Interaction with CKEditor. + useLegacyImperativeHandlers(useMemo(() => ({ + loadReferenceLinkTitle: async ($el: JQuery, href: string) => { + const { noteId } = link.parseNavigationStateFromUrl(href); + const note = noteId ? await froca.getNote(noteId, true) : null; + const title = note ? note.title : "[missing]"; + + $el.text(title); + }, + createNoteForReferenceLink: async (title: string) => { + let result; + if (notePath) { + result = await note_create.createNoteWithTypePrompt(notePath, { + activate: false, + title: title + }); + } + + return result?.note?.getBestNotePathString(); + } + }), [ notePath ])) return ( <> @@ -373,25 +392,3 @@ function getClickIndex(pos: ModelPosition) { return clickIndex; } - -function injectLoadReferenceLinkTitle(component: Component | null, notePath?: string | null) { - if (!component) return; - (component as any).loadReferenceLinkTitle = async ($el: JQuery, href: string) => { - const { noteId } = link.parseNavigationStateFromUrl(href); - const note = noteId ? await froca.getNote(noteId, true) : null; - const title = note ? note.title : "[missing]"; - - $el.text(title); - } - (component as any).createNoteForReferenceLink = async (title: string) => { - let result; - if (notePath) { - result = await note_create.createNoteWithTypePrompt(notePath, { - activate: false, - title: title - }); - } - - return result?.note?.getBestNotePathString(); - } -} \ No newline at end of file From d53faa8c01b60f14aef0f62f2fbdc61c6046876a Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 20:49:54 +0300 Subject: [PATCH 089/191] refactor(react/ribbon): imperative api for saving, reloading, updating attributes --- .../attribute_widgets/attribute_editor.ts | 4 -- .../ribbon/components/AttributeEditor.tsx | 11 ++++- .../ribbon_widgets/owned_attribute_list.ts | 40 ------------------- 3 files changed, 9 insertions(+), 46 deletions(-) delete mode 100644 apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts diff --git a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts index 87db417f5..38eec14e5 100644 --- a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts +++ b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts @@ -17,8 +17,4 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget implem this.handleAddNewAttributeCommand("addNewRelation"); } } - - async updateAttributeList(attributes: FAttribute[]) { - await this.renderOwnedAttributes(attributes, false); - } } diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx index 9670b06fe..bb0e9b27e 100644 --- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -17,7 +17,7 @@ import Component from "../../../components/component"; import link from "../../../services/link"; import froca from "../../../services/froca"; import contextMenu from "../../../menus/context_menu"; -import type { CommandData, FilteredCommandNames } from "../../../components/app_context"; +import type { CommandData, CommandListenerData, FilteredCommandNames } from "../../../components/app_context"; import { AttributeType } from "@triliumnext/commons"; import attributes from "../../../services/attributes"; import note_create from "../../../services/note_create"; @@ -245,7 +245,14 @@ export default function AttributeEditor({ note, componentId, notePath }: { note: return result?.note?.getBestNotePathString(); } - }), [ notePath ])) + }), [ notePath ])); + + // Interaction with the attribute editor. + useLegacyImperativeHandlers(useMemo(() => ({ + saveAttributesCommand: save, + reloadAttributesCommand: refresh, + updateAttributeListCommand: ({ attributes }: CommandListenerData<"updateAttributeList">) => renderOwnedAttributes(attributes as FAttribute[], false) + }), [])); return ( <> diff --git a/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts b/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts deleted file mode 100644 index 6b036bd0e..000000000 --- a/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { t } from "../../services/i18n.js"; -import NoteContextAwareWidget from "../note_context_aware_widget.js"; -import AttributeDetailWidget from "../attribute_widgets/attribute_detail.js"; -import AttributeEditorWidget from "../attribute_widgets/attribute_editor.js"; -import type { CommandListenerData } from "../../components/app_context.js"; -import type FAttribute from "../../entities/fattribute.js"; - -export default class OwnedAttributeListWidget extends NoteContextAwareWidget { - - private attributeDetailWidget: AttributeDetailWidget; - private attributeEditorWidget: AttributeEditorWidget; - private $title!: JQuery; - - constructor() { - super(); - - this.attributeDetailWidget = new AttributeDetailWidget().contentSized().setParent(this); - - this.attributeEditorWidget = new AttributeEditorWidget(this.attributeDetailWidget).contentSized().setParent(this); - - this.child(this.attributeEditorWidget, this.attributeDetailWidget); - } - - async saveAttributesCommand() { - await this.attributeEditorWidget.save(); - } - - async reloadAttributesCommand() { - await this.attributeEditorWidget.refresh(); - } - - async updateAttributeListCommand({ attributes }: CommandListenerData<"updateAttributeList">) { - // TODO: See why we need FAttribute[] and Attribute[] - await this.attributeEditorWidget.updateAttributeList(attributes as FAttribute[]); - } - - focus() { - this.attributeEditorWidget.focus(); - } -} From 9f217b88e45256452c47a0c8b24656e6a973cc4b Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 20:59:13 +0300 Subject: [PATCH 090/191] refactor(react/ribbon): set up keyboard shortcuts --- .../attribute_widgets/attribute_editor.ts | 20 ------------------- apps/client/src/widgets/react/hooks.tsx | 1 - .../src/widgets/ribbon/OwnedAttributesTab.tsx | 8 ++------ .../ribbon/components/AttributeEditor.tsx | 12 ++++++++++- 4 files changed, 13 insertions(+), 28 deletions(-) delete mode 100644 apps/client/src/widgets/attribute_widgets/attribute_editor.ts diff --git a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts deleted file mode 100644 index 38eec14e5..000000000 --- a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts +++ /dev/null @@ -1,20 +0,0 @@ -export default class AttributeEditorWidget extends NoteContextAwareWidget implements EventListener<"entitiesReloaded">, EventListener<"addNewLabel">, EventListener<"addNewRelation"> { - - // triggered from keyboard shortcut - async addNewLabelEvent({ ntxId }: EventData<"addNewLabel">) { - if (this.isNoteContext(ntxId)) { - await this.refresh(); - - this.handleAddNewAttributeCommand("addNewLabel"); - } - } - - // triggered from keyboard shortcut - async addNewRelationEvent({ ntxId }: EventData<"addNewRelation">) { - if (this.isNoteContext(ntxId)) { - await this.refresh(); - - this.handleAddNewAttributeCommand("addNewRelation"); - } - } -} diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 7a47674b8..45a751b10 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -450,7 +450,6 @@ export function useLegacyWidget(widgetFactory: () => T, { // Inject the note context. useEffect(() => { - console.log("Injecting note context"); if (noteContext && widget instanceof NoteContextAwareWidget) { widget.activeContextChangedEvent({ noteContext }); } diff --git a/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx b/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx index daf9d1495..bc1c73b3e 100644 --- a/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx +++ b/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx @@ -1,15 +1,11 @@ import AttributeEditor from "./components/AttributeEditor"; import { TabContext } from "./ribbon-interface"; -export default function OwnedAttributesTab({ note, notePath, componentId }: TabContext) { +export default function OwnedAttributesTab({ note, ...restProps }: TabContext) { return (
      { note && ( - + )}
      ) diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx index bb0e9b27e..14d96f6be 100644 --- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx +++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx @@ -76,7 +76,7 @@ const mentionSetup: MentionFeed[] = [ ]; -export default function AttributeEditor({ note, componentId, notePath }: { note: FNote, componentId: string, notePath?: string | null }) { +export default function AttributeEditor({ note, componentId, notePath, ntxId }: { note: FNote, componentId: string, notePath?: string | null, ntxId?: string | null }) { const [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">(); const [ error, setError ] = useState(); const [ needsSaving, setNeedsSaving ] = useState(false); @@ -253,6 +253,16 @@ export default function AttributeEditor({ note, componentId, notePath }: { note: reloadAttributesCommand: refresh, updateAttributeListCommand: ({ attributes }: CommandListenerData<"updateAttributeList">) => renderOwnedAttributes(attributes as FAttribute[], false) }), [])); + + // Keyboard shortcuts + useTriliumEventBeta("addNewLabel", ({ ntxId: eventNtxId }) => { + if (eventNtxId !== ntxId) return; + handleAddNewAttributeCommand("addNewLabel"); + }); + useTriliumEventBeta("addNewRelation", ({ ntxId: eventNtxId }) => { + if (eventNtxId !== ntxId) return; + handleAddNewAttributeCommand("addNewRelation"); + }); return ( <> From bc4378cb3ee690a0d9b2dbbfee70084153d2e8d8 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 22:02:33 +0300 Subject: [PATCH 091/191] chore(react/ribbon): port inherited attributes partially --- .../widgets/ribbon/InheritedAttributesTab.tsx | 56 +++++++++++++++ apps/client/src/widgets/ribbon/Ribbon.tsx | 7 +- apps/client/src/widgets/ribbon/style.css | 13 ++++ .../inherited_attribute_list.ts | 69 +------------------ 4 files changed, 75 insertions(+), 70 deletions(-) create mode 100644 apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx diff --git a/apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx b/apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx new file mode 100644 index 000000000..9bf9692f7 --- /dev/null +++ b/apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx @@ -0,0 +1,56 @@ +import { useEffect, useState } from "preact/hooks"; +import { TabContext } from "./ribbon-interface"; +import FAttribute from "../../entities/fattribute"; +import { useTriliumEventBeta } from "../react/hooks"; +import attributes from "../../services/attributes"; +import { t } from "../../services/i18n"; +import attribute_renderer from "../../services/attribute_renderer"; +import RawHtml from "../react/RawHtml"; +import { joinElements } from "../react/react_utils"; + +export default function InheritedAttributesTab({ note, componentId }: TabContext) { + const [ inheritedAttributes, setInheritedAttributes ] = useState(); + + function refresh() { + const attrs = note.getAttributes().filter((attr) => attr.noteId !== this.noteId); + attrs.sort((a, b) => { + if (a.noteId === b.noteId) { + return a.position - b.position; + } else { + // inherited attributes should stay grouped: https://github.com/zadam/trilium/issues/3761 + return a.noteId < b.noteId ? -1 : 1; + } + }); + + setInheritedAttributes(attrs); + } + + useEffect(refresh, [ note ]); + useTriliumEventBeta("entitiesReloaded", ({ loadResults }) => { + if (loadResults.getAttributeRows(componentId).find((attr) => attributes.isAffecting(attr, this.note))) { + this.refresh(); + } + }); + + return ( +
      +
      + {inheritedAttributes?.length > 0 ? ( + joinElements(inheritedAttributes.map(attribute => ( + + )), " ") + ) : ( + <>{t("inherited_attribute_list.no_inherited_attributes")} + )} +
      +
      + ) +} +function InheritedAttribute({ attribute }: { attribute: FAttribute }) { + const [ html, setHtml ] = useState | string>(""); + useEffect(() => { + attribute_renderer.renderAttribute(attribute, false).then(setHtml); + }, []); + + return +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index 74e1d19b4..52887938a 100644 --- a/apps/client/src/widgets/ribbon/Ribbon.tsx +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -20,6 +20,7 @@ import ImagePropertiesTab from "./ImagePropertiesTab"; import NotePathsTab from "./NotePathsTab"; import NoteMapTab from "./NoteMapTab"; import OwnedAttributesTab from "./OwnedAttributesTab"; +import InheritedAttributesTab from "./InheritedAttributesTab"; interface TitleContext { note: FNote | null | undefined; @@ -113,9 +114,11 @@ const TAB_CONFIGURATION = numberObjectsInPlace([ toggleCommand: "toggleRibbonTabOwnedAttributes" }, { - // InheritedAttributesWidget title: t("inherited_attribute_list.title"), - icon: "bx bx-list-plus" + icon: "bx bx-list-plus", + content: InheritedAttributesTab, + show: ({note}) => !note?.isLaunchBarConfig(), + toggleCommand: "toggleRibbonTabInheritedAttributes" }, { title: t("note_paths.title"), diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css index b66302a42..9b89090d5 100644 --- a/apps/client/src/widgets/ribbon/style.css +++ b/apps/client/src/widgets/ribbon/style.css @@ -336,4 +336,17 @@ contain: none; } +/* #endregion */ + +/* #region Inherited attributes */ +.inherited-attributes-widget { + position: relative; +} + +.inherited-attributes-container { + color: var(--muted-text-color); + max-height: 200px; + overflow: auto; + padding: 14px 12px 13px 12px; +} /* #endregion */ \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon_widgets/inherited_attribute_list.ts b/apps/client/src/widgets/ribbon_widgets/inherited_attribute_list.ts index 5524e0531..764d4cce4 100644 --- a/apps/client/src/widgets/ribbon_widgets/inherited_attribute_list.ts +++ b/apps/client/src/widgets/ribbon_widgets/inherited_attribute_list.ts @@ -6,37 +6,10 @@ import { t } from "../../services/i18n.js"; import type FNote from "../../entities/fnote.js"; import type { EventData } from "../../components/app_context.js"; -const TPL = /*html*/` -
      - - -
      -
      `; - export default class InheritedAttributesWidget extends NoteContextAwareWidget { private attributeDetailWidget: AttributeDetailWidget; - private $container!: JQuery; - - get name() { - return "inheritedAttributes"; - } - - get toggleCommand() { - return "toggleRibbonTabInheritedAttributes"; - } constructor() { super(); @@ -46,32 +19,15 @@ export default class InheritedAttributesWidget extends NoteContextAwareWidget { this.child(this.attributeDetailWidget); } - getTitle() { - return { - show: !this.note?.isLaunchBarConfig() - }; - } - doRender() { - this.$widget = $(TPL); this.contentSized(); - this.$container = this.$widget.find(".inherited-attributes-container"); this.$widget.append(this.attributeDetailWidget.render()); } async refreshWithNote(note: FNote) { - this.$container.empty(); - - const inheritedAttributes = this.getInheritedAttributes(note); - - if (inheritedAttributes.length === 0) { - this.$container.append(t("inherited_attribute_list.no_inherited_attributes")); - return; - } - for (const attribute of inheritedAttributes) { - const $attr = (await attributeRenderer.renderAttribute(attribute, false)).on("click", (e) => { + .on("click", (e) => { setTimeout( () => this.attributeDetailWidget.showAttributeDetail({ @@ -89,29 +45,6 @@ export default class InheritedAttributesWidget extends NoteContextAwareWidget { 100 ); }); - - this.$container.append($attr).append(" "); - } - } - - getInheritedAttributes(note: FNote) { - const attrs = note.getAttributes().filter((attr) => attr.noteId !== this.noteId); - - attrs.sort((a, b) => { - if (a.noteId === b.noteId) { - return a.position - b.position; - } else { - // inherited attributes should stay grouped: https://github.com/zadam/trilium/issues/3761 - return a.noteId < b.noteId ? -1 : 1; - } - }); - - return attrs; - } - - entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { - if (loadResults.getAttributeRows(this.componentId).find((attr) => attributeService.isAffecting(attr, this.note))) { - this.refresh(); } } } From 17cd2128fd87a596e91f728136814a45bd8a33a9 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 22:02:41 +0300 Subject: [PATCH 092/191] chore(react): add editorconfig for .tsx --- .editorconfig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.editorconfig b/.editorconfig index c965ea8c0..cd301498e 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,6 +1,6 @@ root = true -[*.{js,ts}] +[*.{js,ts,.tsx}] charset = utf-8 end_of_line = lf indent_size = 4 From 652114c7b5477feb1c30c90c4841077068551fc9 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 22:18:04 +0300 Subject: [PATCH 093/191] feat(react/ribbon): finalize port of inherited attributes tab --- apps/client/src/widgets/react/RawHtml.tsx | 6 ++- .../widgets/ribbon/InheritedAttributesTab.tsx | 37 ++++++++++++-- apps/client/src/widgets/ribbon/style.css | 3 +- .../inherited_attribute_list.ts | 50 ------------------- 4 files changed, 39 insertions(+), 57 deletions(-) delete mode 100644 apps/client/src/widgets/ribbon_widgets/inherited_attribute_list.ts diff --git a/apps/client/src/widgets/react/RawHtml.tsx b/apps/client/src/widgets/react/RawHtml.tsx index d74fda43a..a8b3b2820 100644 --- a/apps/client/src/widgets/react/RawHtml.tsx +++ b/apps/client/src/widgets/react/RawHtml.tsx @@ -6,6 +6,7 @@ interface RawHtmlProps { className?: string; html?: HTMLElementLike; style?: CSSProperties; + onClick?: (e: MouseEvent) => void; } export default function RawHtml(props: RawHtmlProps) { @@ -16,11 +17,12 @@ export function RawHtmlBlock(props: RawHtmlProps) { return
      } -function getProps({ className, html, style }: RawHtmlProps) { +function getProps({ className, html, style, onClick }: RawHtmlProps) { return { className: className, dangerouslySetInnerHTML: getHtml(html ?? ""), - style + style, + onClick } } diff --git a/apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx b/apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx index 9bf9692f7..56a8e4d11 100644 --- a/apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx +++ b/apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx @@ -1,15 +1,17 @@ import { useEffect, useState } from "preact/hooks"; import { TabContext } from "./ribbon-interface"; import FAttribute from "../../entities/fattribute"; -import { useTriliumEventBeta } from "../react/hooks"; +import { useLegacyWidget, useTriliumEventBeta } from "../react/hooks"; import attributes from "../../services/attributes"; import { t } from "../../services/i18n"; import attribute_renderer from "../../services/attribute_renderer"; import RawHtml from "../react/RawHtml"; import { joinElements } from "../react/react_utils"; +import AttributeDetailWidget from "../attribute_widgets/attribute_detail"; export default function InheritedAttributesTab({ note, componentId }: TabContext) { const [ inheritedAttributes, setInheritedAttributes ] = useState(); + const [ attributeDetailWidgetEl, attributeDetailWidget ] = useLegacyWidget(() => new AttributeDetailWidget()); function refresh() { const attrs = note.getAttributes().filter((attr) => attr.noteId !== this.noteId); @@ -37,20 +39,47 @@ export default function InheritedAttributesTab({ note, componentId }: TabContext
      {inheritedAttributes?.length > 0 ? ( joinElements(inheritedAttributes.map(attribute => ( - + { + setTimeout( + () => + attributeDetailWidget.showAttributeDetail({ + attribute: { + noteId: attribute.noteId, + type: attribute.type, + name: attribute.name, + value: attribute.value, + isInheritable: attribute.isInheritable + }, + isOwned: false, + x: e.pageX, + y: e.pageY + }), + 100 + ); + }} + /> )), " ") ) : ( <>{t("inherited_attribute_list.no_inherited_attributes")} )}
      + + {attributeDetailWidgetEl}
      ) } -function InheritedAttribute({ attribute }: { attribute: FAttribute }) { +function InheritedAttribute({ attribute, onClick }: { attribute: FAttribute, onClick: (e: MouseEvent) => void }) { const [ html, setHtml ] = useState | string>(""); useEffect(() => { attribute_renderer.renderAttribute(attribute, false).then(setHtml); }, []); - return + return ( + + ); } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css index 9b89090d5..cc9bc5380 100644 --- a/apps/client/src/widgets/ribbon/style.css +++ b/apps/client/src/widgets/ribbon/style.css @@ -332,7 +332,8 @@ margin: 0 !important; } -.attribute-list .attr-detail { +.attribute-list .attr-detail, +.inherited-attributes-widget .attr-detail { contain: none; } diff --git a/apps/client/src/widgets/ribbon_widgets/inherited_attribute_list.ts b/apps/client/src/widgets/ribbon_widgets/inherited_attribute_list.ts deleted file mode 100644 index 764d4cce4..000000000 --- a/apps/client/src/widgets/ribbon_widgets/inherited_attribute_list.ts +++ /dev/null @@ -1,50 +0,0 @@ -import NoteContextAwareWidget from "../note_context_aware_widget.js"; -import AttributeDetailWidget from "../attribute_widgets/attribute_detail.js"; -import attributeRenderer from "../../services/attribute_renderer.js"; -import attributeService from "../../services/attributes.js"; -import { t } from "../../services/i18n.js"; -import type FNote from "../../entities/fnote.js"; -import type { EventData } from "../../components/app_context.js"; - -export default class InheritedAttributesWidget extends NoteContextAwareWidget { - - private attributeDetailWidget: AttributeDetailWidget; - - - constructor() { - super(); - - this.attributeDetailWidget = new AttributeDetailWidget().contentSized().setParent(this); - - this.child(this.attributeDetailWidget); - } - - doRender() { - this.contentSized(); - - this.$widget.append(this.attributeDetailWidget.render()); - } - - async refreshWithNote(note: FNote) { - for (const attribute of inheritedAttributes) { - .on("click", (e) => { - setTimeout( - () => - this.attributeDetailWidget.showAttributeDetail({ - attribute: { - noteId: attribute.noteId, - type: attribute.type, - name: attribute.name, - value: attribute.value, - isInheritable: attribute.isInheritable - }, - isOwned: false, - x: e.pageX, - y: e.pageY - }), - 100 - ); - }); - } - } -} From ce1f5c62046a85dd687792e5d224ac182db53e9f Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 22:49:32 +0300 Subject: [PATCH 094/191] feat(react/ribbon): port view type --- apps/client/src/services/utils.ts | 8 ++ .../ribbon/CollectionPropertiesTab.tsx | 45 ++++++++++ apps/client/src/widgets/ribbon/Ribbon.tsx | 9 +- apps/client/src/widgets/ribbon/style.css | 37 ++++++++ .../widgets/ribbon_widgets/book_properties.ts | 87 ------------------- 5 files changed, 96 insertions(+), 90 deletions(-) create mode 100644 apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx diff --git a/apps/client/src/services/utils.ts b/apps/client/src/services/utils.ts index e58958f3c..67e4025b0 100644 --- a/apps/client/src/services/utils.ts +++ b/apps/client/src/services/utils.ts @@ -808,6 +808,14 @@ export function numberObjectsInPlace(items: T[]): Indexed[] return items as Indexed[]; } +export function mapToKeyValueArray(map: Record) { + const values: { key: K, value: V }[] = []; + for (const [ key, value ] of Object.entries(map)) { + values.push({ key: key as K, value: value as V }); + } + return values; +} + export default { reloadFrontendApp, restartDesktopApp, diff --git a/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx b/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx new file mode 100644 index 000000000..027dafd30 --- /dev/null +++ b/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx @@ -0,0 +1,45 @@ +import { useMemo } from "preact/hooks"; +import { t } from "../../services/i18n"; +import { ViewTypeOptions } from "../../services/note_list_renderer"; +import FormSelect from "../react/FormSelect"; +import { TabContext } from "./ribbon-interface"; +import { mapToKeyValueArray } from "../../services/utils"; +import { useNoteLabel } from "../react/hooks"; +import FNote from "../../entities/fnote"; +import FormGroup from "../react/FormGroup"; + +const VIEW_TYPE_MAPPINGS: Record = { + grid: t("book_properties.grid"), + list: t("book_properties.list"), + calendar: t("book_properties.calendar"), + table: t("book_properties.table"), + geoMap: t("book_properties.geo-map"), + board: t("book_properties.board") +}; + +export default function CollectionPropertiesTab({ note }: TabContext) { + return (note && +
      + + +
      +
      +
      + ); +} + +function CollectionTypeSwitcher({ note }: { note: FNote }) { + const collectionTypes = useMemo(() => mapToKeyValueArray(VIEW_TYPE_MAPPINGS), []); + const [ viewType, setViewType ] = useNoteLabel(note, "viewType"); + + return ( +
      + {t("book_properties.view_type")}:    + +
      + ) +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index 52887938a..6473ab278 100644 --- a/apps/client/src/widgets/ribbon/Ribbon.tsx +++ b/apps/client/src/widgets/ribbon/Ribbon.tsx @@ -21,6 +21,7 @@ import NotePathsTab from "./NotePathsTab"; import NoteMapTab from "./NoteMapTab"; import OwnedAttributesTab from "./OwnedAttributesTab"; import InheritedAttributesTab from "./InheritedAttributesTab"; +import CollectionPropertiesTab from "./CollectionPropertiesTab"; interface TitleContext { note: FNote | null | undefined; @@ -71,9 +72,11 @@ const TAB_CONFIGURATION = numberObjectsInPlace([ activate: ({ note }) => (note?.getPromotedDefinitionAttributes().length === 0 || !options.is("promotedAttributesOpenInRibbon")) && options.is("editedNotesOpenInRibbon") }, { - // BookPropertiesWidget title: t("book_properties.book_properties"), - icon: "bx bx-book" + icon: "bx bx-book", + content: CollectionPropertiesTab, + show: ({ note }) => note?.type === "book", + toggleCommand: "toggleRibbonTabBookProperties" }, { title: t("note_properties.info"), @@ -157,7 +160,7 @@ export default function Ribbon() { const filteredTabs = useMemo(() => TAB_CONFIGURATION.filter(tab => typeof tab.show === "boolean" ? tab.show : tab.show?.(titleContext)), [ titleContext, note ]); return ( -
      +
      {filteredTabs.map(({ title, icon, index }) => ( diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css index cc9bc5380..ef568a514 100644 --- a/apps/client/src/widgets/ribbon/style.css +++ b/apps/client/src/widgets/ribbon/style.css @@ -350,4 +350,41 @@ overflow: auto; padding: 14px 12px 13px 12px; } +/* #endregion */ + +/* #region Book properties */ +.book-properties-widget { + padding: 12px 12px 6px 12px; + display: flex; +} + +.book-properties-widget > * { + margin-right: 15px; +} + +.book-properties-container { + display: flex; + align-items: center; +} + +.book-properties-container > div { + margin-right: 15px; +} + +.book-properties-container > .type-number > label { + display: flex; + align-items: baseline; +} + +.book-properties-container input[type="checkbox"] { + margin-right: 5px; +} + +.book-properties-container label { + display: flex; + justify-content: center; + align-items: center; + text-overflow: clip; + white-space: nowrap; +} /* #endregion */ \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon_widgets/book_properties.ts b/apps/client/src/widgets/ribbon_widgets/book_properties.ts index 04fb61c02..31ca63a2d 100644 --- a/apps/client/src/widgets/ribbon_widgets/book_properties.ts +++ b/apps/client/src/widgets/ribbon_widgets/book_properties.ts @@ -5,72 +5,6 @@ import type FNote from "../../entities/fnote.js"; import type { EventData } from "../../components/app_context.js"; import { bookPropertiesConfig, BookProperty } from "./book_properties_config.js"; import attributes from "../../services/attributes.js"; -import type { ViewTypeOptions } from "../../services/note_list_renderer.js"; - -const VIEW_TYPE_MAPPINGS: Record = { - grid: t("book_properties.grid"), - list: t("book_properties.list"), - calendar: t("book_properties.calendar"), - table: t("book_properties.table"), - geoMap: t("book_properties.geo-map"), - board: t("book_properties.board") -}; - -const TPL = /*html*/` -
      - - -
      - ${t("book_properties.view_type")}:    - - -
      - -
      -
      -
      -`; export default class BookPropertiesWidget extends NoteContextAwareWidget { @@ -78,28 +12,7 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget { private $propertiesContainer!: JQuery; private labelsToWatch: string[] = []; - get name() { - return "bookProperties"; - } - - get toggleCommand() { - return "toggleRibbonTabBookProperties"; - } - - isEnabled() { - return this.note && this.note.type === "book"; - } - - getTitle() { - return { - show: this.isEnabled(), - - }; - } - doRender() { - this.$widget = $(TPL); - this.contentSized(); this.$viewTypeSelect = this.$widget.find(".view-type-select"); this.$viewTypeSelect.on("change", () => this.toggleViewType(String(this.$viewTypeSelect.val()))); From ea1397de63836be858bda5471fcddae03736d96e Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 23 Aug 2025 23:22:07 +0300 Subject: [PATCH 095/191] feat(react/ribbon): reintroduce button collection properties --- apps/client/src/widgets/react/Button.tsx | 4 +- .../ribbon/CollectionPropertiesTab.tsx | 55 ++++++++++++++++--- .../widgets/ribbon_widgets/book_properties.ts | 31 ----------- .../ribbon_widgets/book_properties_config.ts | 2 +- 4 files changed, 51 insertions(+), 41 deletions(-) diff --git a/apps/client/src/widgets/react/Button.tsx b/apps/client/src/widgets/react/Button.tsx index ddfe225fe..f5317f843 100644 --- a/apps/client/src/widgets/react/Button.tsx +++ b/apps/client/src/widgets/react/Button.tsx @@ -19,9 +19,10 @@ export interface ButtonProps { size?: "normal" | "small" | "micro"; style?: CSSProperties; triggerCommand?: CommandNames; + title?: string; } -const Button = memo(({ name, buttonRef: _buttonRef, className, text, onClick, keyboardShortcut, icon, primary, disabled, size, style, triggerCommand }: ButtonProps) => { +const Button = memo(({ name, buttonRef: _buttonRef, className, text, onClick, keyboardShortcut, icon, primary, disabled, size, style, triggerCommand, ...restProps }: ButtonProps) => { // Memoize classes array to prevent recreation const classes = useMemo(() => { const classList: string[] = ["btn"]; @@ -65,6 +66,7 @@ const Button = memo(({ name, buttonRef: _buttonRef, className, text, onClick, ke disabled={disabled} style={style} data-trigger-command={triggerCommand} + {...restProps} > {icon && } {text} {shortcutElements} diff --git a/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx b/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx index 027dafd30..d1066f6a9 100644 --- a/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx +++ b/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx @@ -1,12 +1,14 @@ -import { useMemo } from "preact/hooks"; +import { useContext, useMemo } from "preact/hooks"; import { t } from "../../services/i18n"; import { ViewTypeOptions } from "../../services/note_list_renderer"; import FormSelect from "../react/FormSelect"; import { TabContext } from "./ribbon-interface"; import { mapToKeyValueArray } from "../../services/utils"; import { useNoteLabel } from "../react/hooks"; +import { bookPropertiesConfig, BookProperty, ButtonProperty } from "../ribbon_widgets/book_properties_config"; +import Button from "../react/Button"; +import { ParentComponent } from "../react/react_utils"; import FNote from "../../entities/fnote"; -import FormGroup from "../react/FormGroup"; const VIEW_TYPE_MAPPINGS: Record = { grid: t("book_properties.grid"), @@ -18,19 +20,20 @@ const VIEW_TYPE_MAPPINGS: Record = { }; export default function CollectionPropertiesTab({ note }: TabContext) { + const [ viewType, setViewType ] = useNoteLabel(note, "viewType"); + const viewTypeWithDefault = viewType ?? "grid"; + const properties = bookPropertiesConfig[viewTypeWithDefault].properties; + return (note &&
      - - -
      -
      + +
      ); } -function CollectionTypeSwitcher({ note }: { note: FNote }) { +function CollectionTypeSwitcher({ viewType, setViewType }: { viewType: string, setViewType: (newValue: string) => void }) { const collectionTypes = useMemo(() => mapToKeyValueArray(VIEW_TYPE_MAPPINGS), []); - const [ viewType, setViewType ] = useNoteLabel(note, "viewType"); return (
      @@ -42,4 +45,40 @@ function CollectionTypeSwitcher({ note }: { note: FNote }) { />
      ) +} + +function BookProperties({ note, properties }: { note: FNote, properties: BookProperty[] }) { + return ( +
      + {properties.map(property => ( +
      + {mapPropertyView({ note, property })} +
      + ))} +
      + ) +} + +function mapPropertyView({ note, property }: { note: FNote, property: BookProperty }) { + switch (property.type) { + case "button": + return + } +} + +function ButtonPropertyView({ note, property }: { note: FNote, property: ButtonProperty }) { + const parentComponent = useContext(ParentComponent); + + return
      + +
      @@ -114,7 +163,21 @@ function SearchOption({ note, title, children, help, attributeName, attributeTyp ) } -function SearchStringOption() { +function SearchStringOption({ note, refreshResults }: { note: FNote, refreshResults: () => void }) { + const currentValue = useRef(""); + const spacedUpdate = useSpacedUpdate(async () => { + const searchString = currentValue.current; + appContext.lastSearchString = searchString; + + await attributes.setAttribute(note, "label", "searchString", searchString); + + if (note.title.startsWith(t("search_string.search_prefix"))) { + await server.put(`notes/${note.noteId}/title`, { + title: `${t("search_string.search_prefix")} ${searchString.length < 30 ? searchString : `${searchString.substr(0, 30)}…`}` + }); + } + }, 1000); + return @@ -133,6 +196,21 @@ function SearchStringOption() { { + currentValue.current = text; + spacedUpdate.scheduleUpdate(); + }} + onKeyDown={async (e) => { + if (e.key === "Enter") { + e.preventDefault(); + + // this also in effect disallows new lines in query string. + // on one hand, this makes sense since search string is a label + // on the other hand, it could be nice for structuring long search string. It's probably a niche case though. + await spacedUpdate.updateNowIfNecessary(); + refreshResults(); + } + }} /> } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon_widgets/search_definition.ts b/apps/client/src/widgets/ribbon_widgets/search_definition.ts index 24e59c473..ed3f3dde7 100644 --- a/apps/client/src/widgets/ribbon_widgets/search_definition.ts +++ b/apps/client/src/widgets/ribbon_widgets/search_definition.ts @@ -43,7 +43,7 @@ const TPL = /*html*/`
      + + + + + }
      ) @@ -163,7 +191,7 @@ function SearchOption({ note, title, children, help, attributeName, attributeTyp ) } -function SearchStringOption({ note, refreshResults }: { note: FNote, refreshResults: () => void }) { +function SearchStringOption({ note, refreshResults }: SearchOptionProps) { const currentValue = useRef(""); const spacedUpdate = useSpacedUpdate(async () => { const searchString = currentValue.current; diff --git a/apps/client/src/widgets/ribbon_widgets/search_definition.ts b/apps/client/src/widgets/ribbon_widgets/search_definition.ts index ed3f3dde7..a77ebc743 100644 --- a/apps/client/src/widgets/ribbon_widgets/search_definition.ts +++ b/apps/client/src/widgets/ribbon_widgets/search_definition.ts @@ -153,24 +153,6 @@ export default class SearchDefinitionWidget extends NoteContextAwareWidget { this.$searchOptions.empty(); - for (const OptionClass of OPTION_CLASSES) { - const { attributeType, optionName } = OptionClass; - - const attr = this.note.getAttribute(attributeType as AttributeType, optionName); - - this.$widget.find(`[data-search-option-add='${optionName}'`).toggle(!attr); - - if (attr) { - const searchOption = new OptionClass(attr, this.note).setParent(this); - this.child(searchOption); - - const renderedEl = searchOption.render(); - if (renderedEl) { - this.$searchOptions.append(renderedEl); - } - } - } - const actions = bulkActionService.parseActions(this.note); const renderedEls = actions .map((action) => renderReactWidget(this, action.doRender())) diff --git a/apps/client/src/widgets/search_options/ancestor.ts b/apps/client/src/widgets/search_options/ancestor.ts index 8a29b675a..fa9fc672e 100644 --- a/apps/client/src/widgets/search_options/ancestor.ts +++ b/apps/client/src/widgets/search_options/ancestor.ts @@ -51,13 +51,6 @@ const TPL = /*html*/` `; export default class Ancestor extends AbstractSearchOption { - static get optionName() { - return "ancestor"; - } - static get attributeType() { - return "relation"; - } - static async create(noteId: string) { await AbstractSearchOption.setAttribute(noteId, "relation", "ancestor", "root"); } diff --git a/apps/client/src/widgets/search_options/debug.ts b/apps/client/src/widgets/search_options/debug.ts index fb19541b4..bdcf585e4 100644 --- a/apps/client/src/widgets/search_options/debug.ts +++ b/apps/client/src/widgets/search_options/debug.ts @@ -20,13 +20,6 @@ const TPL = /*html*/` `; export default class Debug extends AbstractSearchOption { - static get optionName() { - return "debug"; - } - static get attributeType() { - return "label"; - } - static async create(noteId: string) { await AbstractSearchOption.setAttribute(noteId, "label", "debug"); } diff --git a/apps/client/src/widgets/search_options/fast_search.ts b/apps/client/src/widgets/search_options/fast_search.ts index 52cc4acfc..7b77b1ca8 100644 --- a/apps/client/src/widgets/search_options/fast_search.ts +++ b/apps/client/src/widgets/search_options/fast_search.ts @@ -19,12 +19,6 @@ const TPL = /*html*/` `; export default class FastSearch extends AbstractSearchOption { - static get optionName() { - return "fastSearch"; - } - static get attributeType() { - return "label"; - } static async create(noteId: string) { await AbstractSearchOption.setAttribute(noteId, "label", "fastSearch"); diff --git a/apps/client/src/widgets/search_options/include_archived_notes.ts b/apps/client/src/widgets/search_options/include_archived_notes.ts index 7e8eea778..98f33f4d6 100644 --- a/apps/client/src/widgets/search_options/include_archived_notes.ts +++ b/apps/client/src/widgets/search_options/include_archived_notes.ts @@ -13,12 +13,6 @@ const TPL = /*html*/` `; export default class IncludeArchivedNotes extends AbstractSearchOption { - static get optionName() { - return "includeArchivedNotes"; - } - static get attributeType() { - return "label"; - } static async create(noteId: string) { await AbstractSearchOption.setAttribute(noteId, "label", "includeArchivedNotes"); diff --git a/apps/client/src/widgets/search_options/limit.ts b/apps/client/src/widgets/search_options/limit.ts index 20fe0ec0a..1925f29f1 100644 --- a/apps/client/src/widgets/search_options/limit.ts +++ b/apps/client/src/widgets/search_options/limit.ts @@ -26,13 +26,6 @@ export default class Limit extends AbstractSearchOption { private $limit!: JQuery; - static get optionName() { - return "limit"; - } - static get attributeType() { - return "label"; - } - static async create(noteId: string) { await AbstractSearchOption.setAttribute(noteId, "label", "limit", "10"); } diff --git a/apps/client/src/widgets/search_options/order_by.ts b/apps/client/src/widgets/search_options/order_by.ts index 491693c84..1c6ddd46d 100644 --- a/apps/client/src/widgets/search_options/order_by.ts +++ b/apps/client/src/widgets/search_options/order_by.ts @@ -37,13 +37,6 @@ const TPL = /*html*/` export default class OrderBy extends AbstractSearchOption { - static get optionName() { - return "orderBy"; - } - static get attributeType() { - return "label"; - } - static async create(noteId: string) { await AbstractSearchOption.setAttribute(noteId, "label", "orderBy", "relevancy"); await AbstractSearchOption.setAttribute(noteId, "label", "orderDirection", "asc"); diff --git a/apps/client/src/widgets/search_options/search_script.ts b/apps/client/src/widgets/search_options/search_script.ts index d93a64a83..931886424 100644 --- a/apps/client/src/widgets/search_options/search_script.ts +++ b/apps/client/src/widgets/search_options/search_script.ts @@ -33,12 +33,6 @@ const TPL = /*html*/` `; export default class SearchScript extends AbstractSearchOption { - static get optionName() { - return "searchScript"; - } - static get attributeType() { - return "relation"; - } static async create(noteId: string) { await AbstractSearchOption.setAttribute(noteId, "relation", "searchScript", "root"); diff --git a/apps/client/src/widgets/search_options/search_string.ts b/apps/client/src/widgets/search_options/search_string.ts index 913dcb249..fe5dcf57b 100644 --- a/apps/client/src/widgets/search_options/search_string.ts +++ b/apps/client/src/widgets/search_options/search_string.ts @@ -11,13 +11,6 @@ export default class SearchString extends AbstractSearchOption { private $searchString!: JQuery; private spacedUpdate!: SpacedUpdate; - static get optionName() { - return "searchString"; - } - static get attributeType() { - return "label"; - } - static async create(noteId: string) { await AbstractSearchOption.setAttribute(noteId, "label", "searchString"); } From 80ad87671af29915e41bf95262cf9646eae966d3 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 24 Aug 2025 16:02:15 +0300 Subject: [PATCH 105/191] chore(react/ribbon): search & execute button --- .../widgets/ribbon/SearchDefinitionTab.tsx | 10 ++++++++ .../ribbon_widgets/search_definition.ts | 25 ------------------- 2 files changed, 10 insertions(+), 25 deletions(-) diff --git a/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx b/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx index 9607f3784..45954f1e8 100644 --- a/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx +++ b/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx @@ -156,6 +156,16 @@ export default function SearchDefinitionTab({ note, ntxId }: TabContext) { keyboardShortcut="Enter" onClick={refreshResults} /> + +
      diff --git a/apps/client/src/widgets/ribbon_widgets/search_definition.ts b/apps/client/src/widgets/ribbon_widgets/search_definition.ts index a77ebc743..a948bc89b 100644 --- a/apps/client/src/widgets/ribbon_widgets/search_definition.ts +++ b/apps/client/src/widgets/ribbon_widgets/search_definition.ts @@ -41,16 +41,6 @@ const TPL = /*html*/`
      - - - -