chore(react/ribbon): add disable rules for context menu

apps/client/src/services/utils.ts

@@ -148,7 +148,7 @@ export function isElectron() {
     return !!(window && window.process && window.process.type);
 }
 
-function isMac() {
+export function isMac() {
     return navigator.platform.indexOf("Mac") > -1;
 }
 

apps/client/src/widgets/buttons/note_actions.ts

@@ -37,88 +37,3 @@ const TPL = /*html*/`
 
     </style>
 </div>`;
-
-export default class NoteActionsWidget extends NoteContextAwareWidget {
-
-    private $convertNoteIntoAttachmentButton!: JQuery<HTMLElement>;
-    private $findInTextButton!: JQuery<HTMLElement>;
-    private $printActiveNoteButton!: JQuery<HTMLElement>;
-    private $exportAsPdfButton!: JQuery<HTMLElement>;
-    private $showSourceButton!: JQuery<HTMLElement>;
-    private $showAttachmentsButton!: JQuery<HTMLElement>;
-    private $renderNoteButton!: JQuery<HTMLElement>;
-    private $saveRevisionButton!: JQuery<HTMLElement>;
-    private $exportNoteButton!: JQuery<HTMLElement>;
-    private $importNoteButton!: JQuery<HTMLElement>;
-    private $openNoteExternallyButton!: JQuery<HTMLElement>;
-    private $openNoteCustomButton!: JQuery<HTMLElement>;
-    private $deleteNoteButton!: JQuery<HTMLElement>;
-
-    isEnabled() {
-        return this.note?.type !== "launcher";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$widget.on("show.bs.dropdown", () => {
-            if (this.note) {
-                this.refreshVisibility(this.note);
-            }
-        });
-
-        this.$convertNoteIntoAttachmentButton = this.$widget.find("[data-trigger-command='convertNoteIntoAttachment']");
-        this.$findInTextButton = this.$widget.find(".find-in-text-button");
-        this.$printActiveNoteButton = this.$widget.find(".print-active-note-button");
-        this.$exportAsPdfButton = this.$widget.find(".export-as-pdf-button");
-        this.$showSourceButton = this.$widget.find(".show-source-button");
-        this.$showAttachmentsButton = this.$widget.find(".show-attachments-button");
-        this.$renderNoteButton = this.$widget.find(".render-note-button");
-        this.$saveRevisionButton = this.$widget.find(".save-revision-button");
-
-        this.$widget.on("click", ".dropdown-item", () => this.$widget.find("[data-bs-toggle='dropdown']").dropdown("toggle"));
-
-        this.$openNoteExternallyButton = this.$widget.find(".open-note-externally-button");
-        this.$openNoteCustomButton = this.$widget.find(".open-note-custom-button");
-    }
-
-    async refreshVisibility(note: FNote) {
-        this.$convertNoteIntoAttachmentButton.toggle(note.isEligibleForConversionToAttachment());
-
-        this.toggleDisabled(this.$showAttachmentsButton, !isInOptions);
-        this.toggleDisabled(this.$showSourceButton, ["text", "code", "relationMap", "mermaid", "canvas", "mindMap"].includes(note.type));
-
-
-        this.toggleDisabled(this.$printActiveNoteButton, canPrint);
-        this.toggleDisabled(this.$exportAsPdfButton, canPrint);
-        this.$exportAsPdfButton.toggleClass("hidden-ext", !utils.isElectron());
-
-        this.toggleDisabled(this.$openNoteExternallyButton, utils.isElectron() && !["search", "book"].includes(note.type));
-        this.toggleDisabled(
-            this.$openNoteCustomButton,
-            utils.isElectron() &&
-                !utils.isMac() && // no implementation for Mac yet
-                !["search", "book"].includes(note.type)
-        );
-
-        // I don't want to handle all special notes like this, but intuitively user might want to export content of backend log
-        this.toggleDisabled(this.$exportNoteButton, !["_backendLog"].includes(note.noteId) && !isInOptions);
-
-        this.toggleDisabled(this.$importNoteButton, !["search"].includes(note.type) && !isInOptions);
-        this.toggleDisabled(this.$deleteNoteButton, !isInOptions);
-        this.toggleDisabled(this.$saveRevisionButton, !isInOptions);
-    }
-
-    toggleDisabled($el: JQuery<HTMLElement>, enable: boolean) {
-        if (enable) {
-            $el.removeAttr("disabled");
-        } else {
-            $el.attr("disabled", "disabled");
-        }
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.isNoteReloaded(this.noteId)) {
-            this.refresh();
-        }
-    }
-}

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

@@ -9,7 +9,7 @@ import ws from "../../services/ws";
 import ActionButton from "../react/ActionButton"
 import Dropdown from "../react/Dropdown";
 import { FormDropdownDivider, FormListItem } from "../react/FormList";
-import { isElectron as getIsElectron } from "../../services/utils";
+import { isElectron as getIsElectron, isMac as getIsMac } from "../../services/utils";
 import { ParentComponent } from "../react/react_utils";
 import { useContext } from "preact/hooks";
 import NoteContext from "../../components/note_context";
@@ -44,15 +44,19 @@ function RevisionsButton({ note }: NoteActionsProps) {
 
 function NoteContextMenu(props: NoteActionsProps) {
   const { note, noteContext } = props;
-  if (!note) {
+  if (!note || note.type === "launcher") {
     return <></>;
   }
 
   const parentComponent = useContext(ParentComponent);
+  const canBeConvertedToAttachment = note?.isEligibleForConversionToAttachment();
   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();
+  const isMac = getIsMac();
+  const hasSource = ["text", "code", "relationMap", "mermaid", "canvas", "mindMap"].includes(note.type);
+  const isSearchOrBook = ["search", "book"].includes(note.type);  
 
   return (
     <Dropdown
@@ -60,34 +64,37 @@ function NoteContextMenu(props: NoteActionsProps) {
       hideToggleArrow
       noSelectButtonStyle
     >
-      <ConvertToAttachment {...props} />
+      {canBeConvertedToAttachment && <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")} />}
+      {isElectron && <CommandItem command="exportAsPdf" icon="bx bxs-file-pdf" disabled={!isPrintable} text={t("note_actions.print_pdf")} />}
       <FormDropdownDivider />
 
       <CommandItem icon="bx bx-import" text={t("note_actions.import_files")}
+        disabled={isInOptions || note.type === "search"}
         command={() => parentComponent?.triggerCommand("showImportDialog", { noteId: note.noteId })} />
       <CommandItem icon="bx bx-export" text={t("note_actions.export_note")}
+        disabled={isInOptions || note.noteId === "_backendLog"}
         command={() => noteContext?.notePath && parentComponent?.triggerCommand("showExportDialog", {
           notePath: noteContext.notePath, 
           defaultType: "single"
         })} />
       <FormDropdownDivider />
 
-      <CommandItem command="openNoteExternally" icon="bx bx-file-find" text={t("note_actions.open_note_externally")} title={t("note_actions.open_note_externally_title")} />
+      <CommandItem command="openNoteExternally" icon="bx bx-file-find" disabled={isSearchOrBook || !isElectron} text={t("note_actions.open_note_externally")} title={t("note_actions.open_note_externally_title")} />
-      <CommandItem command="openNoteCustom" icon="bx bx-customize" text={t("note_actions.open_note_custom")} />
+      <CommandItem command="openNoteCustom" icon="bx bx-customize" disabled={isSearchOrBook || isMac || !isElectron} text={t("note_actions.open_note_custom")} />
-      <CommandItem command="showNoteSource" icon="bx bx-code" text={t("note_actions.note_source")} />
+      <CommandItem command="showNoteSource" icon="bx bx-code" disabled={!hasSource} text={t("note_actions.note_source")} />
       <FormDropdownDivider />
 
-      <CommandItem command="forceSaveRevision" icon="bx bx-save" text={t("note_actions.save_revision")} />
+      <CommandItem command="forceSaveRevision" icon="bx bx-save" disabled={isInOptions} text={t("note_actions.save_revision")} />
       <CommandItem icon="bx bx-trash destructive-action-icon" text={t("note_actions.delete_note")} destructive
+        disabled={isInOptions}
         command={() => branches.deleteNotes([note.getParentBranches()[0].branchId])}
       />
       <FormDropdownDivider />
 
-      <CommandItem command="showAttachments" icon="bx bx-paperclip" text={t("note_actions.note_attachments")} />
+      <CommandItem command="showAttachments" icon="bx bx-paperclip" disabled={isInOptions} text={t("note_actions.note_attachments")} />
     </Dropdown>
   );
 }
@@ -103,7 +110,7 @@ function CommandItem({ icon, text, title, command, disabled }: { icon: string, t
 }
 
 function ConvertToAttachment({ note }: NoteActionsProps) {
-  return (note?.isEligibleForConversionToAttachment() &&
+  return (
     <FormListItem
         icon="bx bx-paperclip"
         onClick={async () => {