chore(react/ribbon): add part of the note actions menu

This commit is contained in:
Elian Doran
2025-08-24 23:56:05 +03:00
parent a3e8fd374f
commit 6f6f280bdd
3 changed files with 43 additions and 54 deletions

View File

@@ -1,5 +1,5 @@
import { ConvertToAttachmentResponse } from "@triliumnext/commons";
import appContext from "../../components/app_context";
import appContext, { CommandNames } from "../../components/app_context";
import FNote from "../../entities/fnote"
import dialog from "../../services/dialog";
import { t } from "../../services/i18n"
@@ -8,10 +8,15 @@ import toast from "../../services/toast";
import ws from "../../services/ws";
import ActionButton from "../react/ActionButton"
import Dropdown from "../react/Dropdown";
import { FormListItem } from "../react/FormList";
import { FormDropdownDivider, FormListItem } from "../react/FormList";
import { isElectron as getIsElectron } from "../../services/utils";
import { ParentComponent } from "../react/react_utils";
import { useContext } from "preact/hooks";
import NoteContext from "../../components/note_context";
interface NoteActionsProps {
note?: FNote;
noteContext?: NoteContext;
}
export default function NoteActions(props: NoteActionsProps) {
@@ -37,6 +42,17 @@ function RevisionsButton({ note }: NoteActionsProps) {
}
function NoteContextMenu(props: NoteActionsProps) {
const { note, noteContext } = props;
if (!note) {
return <></>;
}
const parentComponent = useContext(ParentComponent);
const isSearchable = ["text", "code", "book", "mindMap", "doc"].includes(note.type);
const isInOptions = note.noteId.startsWith("_options");
const isPrintable = ["text", "code"].includes(note.type);
const isElectron = getIsElectron();
return (
<Dropdown
buttonClassName="bx bx-dots-vertical-rounded"
@@ -44,10 +60,33 @@ function NoteContextMenu(props: NoteActionsProps) {
noSelectButtonStyle
>
<ConvertToAttachment {...props} />
{note.type === "render" && <CommandItem command="renderActiveNote" icon="bx bx-extension" text={t("note_actions.re_render_note")} />}
<CommandItem command="findInText" icon="bx bx-search" disabled={!isSearchable} text={t("note_actions.search_in_note")} />
<CommandItem command="printActiveNote" icon="bx bx-printer" disabled={!isPrintable} text={t("note_actions.print_note")} />
{isElectron && <CommandItem command="exportAsPdf" icon="bx bxs-file-pdf" text={t("note_actions.print_pdf")} />}
<FormDropdownDivider />
<CommandItem icon="bx bx-import" text={t("note_actions.import_files")}
command={() => parentComponent?.triggerCommand("showImportDialog", { noteId: note.noteId })} />
<CommandItem icon="bx bx-export" text={t("note_actions.export_note")}
command={() => noteContext?.notePath && parentComponent?.triggerCommand("showExportDialog", {
notePath: noteContext.notePath,
defaultType: "single"
})} />
<FormDropdownDivider />
</Dropdown>
);
}
function CommandItem({ icon, text, command, disabled }: { icon: string, text: string, command: CommandNames | (() => void), disabled?: boolean }) {
return <FormListItem
icon={icon}
triggerCommand={typeof command === "string" ? command : undefined}
onClick={typeof command === "function" ? command : undefined}
disabled={disabled}
>{text}</FormListItem>
}
function ConvertToAttachment({ note }: NoteActionsProps) {
return (note?.isEligibleForConversionToAttachment() &&
<FormListItem