feat(react/floating_buttons): port toc

This commit is contained in:
Elian Doran 2025-08-27 22:44:11 +03:00
parent cdbb89482e
commit 53e0c05290
No known key found for this signature in database
3 changed files with 26 additions and 62 deletions

View file

@ -49,6 +49,13 @@ const FLOATING_BUTTON_DEFINITIONS: FloatingButtonDefinition[] = [
&& (!note.isProtected || protected_session_holder.isProtectedSessionAvailable())
&& !options.is("databaseReadonly")
&& await noteContext?.isReadOnly()
},
{
component: ShowTocWidgetButton,
isEnabled: ({ note, noteContext }) =>
note.type === "text"
&& noteContext?.viewScope?.viewMode === "default"
&& !!noteContext.viewScope?.tocTemporarilyHidden
}
];
@ -94,6 +101,11 @@ export default function FloatingButtons() {
setRefreshCounter(refreshCounter + 1);
}
});
useTriliumEvent("reEvaluateTocWidgetVisibility", ({ noteId }) => {
if (noteId === note?.noteId) {
setRefreshCounter(refreshCounter + 1);
}
});
// Manage the list of items
const noteMime = useNoteProperty(note, "mime");
@ -170,6 +182,19 @@ function EditButton({ noteContext }: FloatingButtonContext) {
/>
}
function ShowTocWidgetButton({ noteContext }: FloatingButtonContext) {
return <ActionButton
text={t("show_toc_widget_button.show_toc")}
icon="bx bx-tn-toc"
onClick={() => {
if (noteContext?.viewScope && noteContext.noteId) {
noteContext.viewScope.tocTemporarilyHidden = false;
appContext.triggerEvent("showTocWidget", { noteId: noteContext.noteId });
}
}}
/>
}
/**
* Show button that displays floating button after click on close button
*/

View file

@ -1,62 +0,0 @@
import OnClickButtonWidget from "./onclick_button.js";
import appContext from "../../components/app_context.js";
import attributeService from "../../services/attributes.js";
import { t } from "../../services/i18n.js";
import LoadResults from "../../services/load_results.js";
import type { AttributeRow } from "../../services/load_results.js";
export default class ShowTocWidgetButton extends OnClickButtonWidget {
isEnabled(): boolean {
return Boolean(super.isEnabled() && this.note && this.note.type === "text" && this.noteContext?.viewScope?.viewMode === "default");
}
constructor() {
super();
this.icon("bx-tn-toc")
.title(t("show_toc_widget_button.show_toc"))
.titlePlacement("bottom")
.onClick(() => {
if (this.noteContext?.viewScope && this.noteId) {
this.noteContext.viewScope.tocTemporarilyHidden = false;
appContext.triggerEvent("showTocWidget", { noteId: this.noteId });
}
this.toggleInt(false);
});
}
async refreshWithNote(): Promise<void> {
if (this.noteContext?.viewScope) {
this.toggleInt(this.noteContext.viewScope.tocTemporarilyHidden);
}
}
async reEvaluateTocWidgetVisibilityEvent({ noteId }: { noteId: string }): Promise<void> {
if (noteId === this.noteId) {
await this.refresh();
}
}
async entitiesReloadedEvent({ loadResults }: { loadResults: LoadResults }): Promise<void> {
if (this.noteId && loadResults.isNoteContentReloaded(this.noteId)) {
await this.refresh();
} else if (
loadResults
.getAttributeRows()
.find((attr: AttributeRow) =>
attr.type === "label" &&
(attr.name?.toLowerCase().includes("readonly") || attr.name === "toc") &&
this.note &&
attributeService.isAffecting(attr, this.note)
)
) {
await this.refresh();
}
}
async noteTypeMimeChangedEvent({ noteId }: { noteId: string }): Promise<void> {
if (this.isNote(noteId)) {
await this.refresh();
}
}
}

View file

@ -475,6 +475,7 @@ export default class TocWidget extends RightPanelWidget {
if (this.noteId === noteId) {
await this.refresh();
this.triggerCommand("reEvaluateRightPaneVisibility");
appContext.triggerEvent("reEvaluateTocWidgetVisibility", { noteId: this.noteId });
}
}