@@ -83,4 +83,4 @@ function InheritedAttribute({ attribute, onClick }: { attribute: FAttribute, onC
onClick={onClick}
/>
);
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/widgets/ribbon/NoteActions.tsx b/apps/client/src/widgets/ribbon/NoteActions.tsx
index 3d1f8b4cc..1710a27dd 100644
--- a/apps/client/src/widgets/ribbon/NoteActions.tsx
+++ b/apps/client/src/widgets/ribbon/NoteActions.tsx
@@ -184,11 +184,16 @@ function EditabilityDropdown({ note }: { note: FNote }) {
function NoteTypeDropdown({ note }: { note: FNote }) {
const currentNoteType = useNoteProperty(note, "type") ?? undefined;
const currentNoteMime = useNoteProperty(note, "mime");
- const [ modalShown, setModalShown ] = useState(false);
return (
-
+ { /* no-op since no code notes are displayed here */ }}
+ noCodeNotes
+ />
);
}
diff --git a/apps/client/src/widgets/ribbon/NotePathsTab.tsx b/apps/client/src/widgets/ribbon/NotePathsTab.tsx
index 0b997cfb2..d639a8928 100644
--- a/apps/client/src/widgets/ribbon/NotePathsTab.tsx
+++ b/apps/client/src/widgets/ribbon/NotePathsTab.tsx
@@ -1,33 +1,23 @@
-import { TabContext } from "./ribbon-interface";
+import { useEffect, useMemo, useState } from "preact/hooks";
+
+import FNote, { NotePathRecord } from "../../entities/fnote";
import { t } from "../../services/i18n";
+import { NOTE_PATH_TITLE_SEPARATOR } from "../../services/tree";
import Button from "../react/Button";
import { useTriliumEvent } 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";
-import { NOTE_PATH_TITLE_SEPARATOR } from "../../services/tree";
+import { TabContext } from "./ribbon-interface";
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 ]);
- useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
- const noteId = note?.noteId;
- if (!noteId) return;
- if (loadResults.getBranchRows().find((branch) => branch.noteId === noteId)
- || loadResults.isNoteReloaded(noteId)) {
- refresh();
- }
- });
+ const sortedNotePaths = useSortedNotePaths(note, hoistedNoteId);
+ return ;
+}
+export function NotePathsWidget({ sortedNotePaths, currentNotePath }: {
+ sortedNotePaths: NotePathRecord[] | undefined;
+ currentNotePath?: string | null | undefined;
+}) {
return (
- )
+ );
+}
+
+export function useSortedNotePaths(note: FNote | null | undefined, hoistedNoteId?: string) {
+ const [ sortedNotePaths, setSortedNotePaths ] = useState();
+
+ function refresh() {
+ if (!note) return;
+ setSortedNotePaths(note
+ .getSortedNotePathRecords(hoistedNoteId)
+ .filter((notePath) => !notePath.isHidden));
+ }
+
+ useEffect(refresh, [ note, hoistedNoteId ]);
+ useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+ const noteId = note?.noteId;
+ if (!noteId) return;
+ if (loadResults.getBranchRows().find((branch) => branch.noteId === noteId)
+ || loadResults.isNoteReloaded(noteId)) {
+ refresh();
+ }
+ });
+
+ return sortedNotePaths;
}
function NotePath({ currentNotePath, notePathRecord }: { currentNotePath?: string | null, notePathRecord?: NotePathRecord }) {
- const notePath = notePathRecord?.notePath ?? [];
- const notePathString = useMemo(() => notePath.join("/"), [ notePath ]);
+ const notePath = notePathRecord?.notePath;
+ const notePathString = useMemo(() => (notePath ?? []).join("/"), [ notePath ]);
const [ classes, icons ] = useMemo(() => {
const classes: string[] = [];
@@ -68,17 +82,17 @@ function NotePath({ currentNotePath, notePathRecord }: { currentNotePath?: strin
if (!notePathRecord || notePathRecord.isInHoistedSubTree) {
classes.push("path-in-hoisted-subtree");
} else {
- icons.push({ icon: "bx bx-trending-up", title: t("note_paths.outside_hoisted") })
+ 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") })
+ 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") })
+ icons.push({ icon: "bx bx-search", title: t("note_paths.search") });
}
return [ classes.join(" "), icons ];
@@ -87,7 +101,7 @@ function NotePath({ currentNotePath, notePathRecord }: { currentNotePath?: strin
// 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) {
+ for (const noteId of notePath ?? []) {
pathSegments.push(noteId);
fullNotePaths.push(pathSegments.join("/"));
}
@@ -95,12 +109,12 @@ function NotePath({ currentNotePath, notePathRecord }: { currentNotePath?: strin
return (
{joinElements(fullNotePaths.map(notePath => (
-
+
)), NOTE_PATH_TITLE_SEPARATOR)}
{icons.map(({ icon, title }) => (
-
+
))}
- )
+ );
}
diff --git a/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx b/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx
index ae3d90c07..b80d748b5 100644
--- a/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx
+++ b/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx
@@ -1,4 +1,5 @@
import { useMemo, useRef } from "preact/hooks";
+
import { useLegacyImperativeHandlers, useTriliumEvents } from "../react/hooks";
import AttributeEditor, { AttributeEditorImperativeHandlers } from "./components/AttributeEditor";
import { TabContext } from "./ribbon-interface";
@@ -25,5 +26,5 @@ export default function OwnedAttributesTab({ note, hidden, activate, ntxId, ...r
)}
- )
+ );
}
diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx
index aff2c148f..c8352ee02 100644
--- a/apps/client/src/widgets/ribbon/Ribbon.tsx
+++ b/apps/client/src/widgets/ribbon/Ribbon.tsx
@@ -1,14 +1,15 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
-import { useElementSize, useNoteContext, useNoteProperty, useStaticTooltipWithKeyboardShortcut, useTriliumEvents } from "../react/hooks";
import "./style.css";
-import { Indexed, numberObjectsInPlace } from "../../services/utils";
-import { EventNames } from "../../components/app_context";
import { KeyboardActionNames } from "@triliumnext/commons";
-import { RIBBON_TAB_DEFINITIONS } from "./RibbonDefinition";
-import { TabConfiguration, TitleContext } from "./ribbon-interface";
import clsx from "clsx";
+import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
+
+import { EventNames } from "../../components/app_context";
import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
+import { Indexed, numberObjectsInPlace } from "../../services/utils";
+import { useNoteContext, useNoteProperty, useStaticTooltipWithKeyboardShortcut, useTriliumEvents } from "../react/hooks";
+import { TabConfiguration, TitleContext } from "./ribbon-interface";
+import { RIBBON_TAB_DEFINITIONS } from "./RibbonDefinition";
const TAB_CONFIGURATION = numberObjectsInPlace
(RIBBON_TAB_DEFINITIONS);
@@ -45,16 +46,6 @@ export default function Ribbon({ children }: { children?: preact.ComponentChildr
refresh();
}, [ note, noteType, isReadOnlyTemporarilyDisabled ]);
- // Manage height.
- const containerRef = useRef(null);
- const size = useElementSize(containerRef);
- useEffect(() => {
- if (!containerRef.current || !size) return;
- const parentEl = containerRef.current.closest(".note-split");
- if (!parentEl) return;
- parentEl.style.setProperty("--ribbon-height", `${size.height}px`);
- }, [ size ]);
-
// Automatically activate the first ribbon tab that needs to be activated whenever a note changes.
useEffect(() => {
if (!computedTabs) return;
@@ -79,7 +70,6 @@ export default function Ribbon({ children }: { children?: preact.ComponentChildr
const shouldShowRibbon = (noteContext?.viewScope?.viewMode === "default" && !noteContext.noteId?.startsWith("_options"));
return (
@@ -133,7 +123,7 @@ export default function Ribbon({ children }: { children?: preact.ComponentChildr
})}
- )
+ );
}
function RibbonTab({ icon, title, active, onClick, toggleCommand }: { icon: string; title: string; active: boolean, onClick: () => void, toggleCommand?: KeyboardActionNames }) {
@@ -156,7 +146,7 @@ function RibbonTab({ icon, title, active, onClick, toggleCommand }: { icon: stri