add command palette, add disable global

src/components/DiscourseNodeMenu.tsx

@@ -1,4 +1,13 @@
-import { Menu, MenuItem, Popover, Position } from "@blueprintjs/core";
+import {
+  Menu,
+  MenuItem,
+  Popover,
+  Position,
+  Button,
+  InputGroup,
+  getKeyCombo,
+  IKeyCombo,
+} from "@blueprintjs/core";
 import React, {
   useCallback,
   useEffect,
@@ -14,6 +23,7 @@ import { getCoordsFromTextarea } from "roamjs-components/components/CursorMenu";
 import getDiscourseNodes from "../utils/getDiscourseNodes";
 import createDiscourseNode from "../utils/createDiscourseNode";
 import { getNewDiscourseNodeText } from "../utils/formatUtils";
+import { OnloadArgs } from "roamjs-components/types";
 
 type Props = {
   textarea: HTMLTextAreaElement;
@@ -154,4 +164,101 @@ export const render = (props: Props) => {
   );
 };
 
+// node_modules\@blueprintjs\core\lib\esm\components\hotkeys\hotkeyParser.js
+const isMac = () => {
+  const platform =
+    typeof navigator !== "undefined" ? navigator.platform : undefined;
+  return platform == null ? false : /Mac|iPod|iPhone|iPad/.test(platform);
+};
+const MODIFIER_BIT_MASKS = {
+  alt: 1,
+  ctrl: 2,
+  meta: 4,
+  shift: 8,
+};
+const ALIASES: { [key: string]: string } = {
+  cmd: "meta",
+  command: "meta",
+  escape: "esc",
+  minus: "-",
+  mod: isMac() ? "meta" : "ctrl",
+  option: "alt",
+  plus: "+",
+  return: "enter",
+  win: "meta",
+};
+const normalizeKeyCombo = (combo: string) => {
+  const keys = combo.replace(/\s/g, "").split("+");
+  return keys.map(function (key) {
+    const keyName = ALIASES[key] != null ? ALIASES[key] : key;
+    return keyName === "meta" ? (isMac() ? "cmd" : "win") : keyName;
+  });
+};
+
+export const getModifiersFromCombo = (comboKey: IKeyCombo) => {
+  if (!comboKey) return [];
+  return [
+    comboKey.modifiers & MODIFIER_BIT_MASKS.alt && "alt",
+    comboKey.modifiers & MODIFIER_BIT_MASKS.ctrl && "ctrl",
+    comboKey.modifiers & MODIFIER_BIT_MASKS.shift && "shift",
+    comboKey.modifiers & MODIFIER_BIT_MASKS.meta && "meta",
+  ].filter(Boolean);
+};
+
+export const NodeMenuTriggerComponent = (
+  extensionAPI: OnloadArgs["extensionAPI"]
+) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isActive, setIsActive] = useState(false);
+  const [comboKey, setComboKey] = useState<IKeyCombo>(
+    () =>
+      (extensionAPI.settings.get(
+        "personal-node-menu-trigger"
+      ) as IKeyCombo) || { modifiers: 0, key: "" }
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      const comboObj = getKeyCombo(e.nativeEvent);
+      if (!comboObj.key) return;
+
+      setComboKey({ key: comboObj.key, modifiers: comboObj.modifiers });
+      extensionAPI.settings.set("personal-node-menu-trigger", comboObj);
+    },
+    [extensionAPI]
+  );
+
+  const shortcut = useMemo(() => {
+    if (!comboKey.key) return "";
+
+    const modifiers = getModifiersFromCombo(comboKey);
+    const comboString = [...modifiers, comboKey.key].join("+");
+    return normalizeKeyCombo(comboString).join("+");
+  }, [comboKey]);
+
+  return (
+    <InputGroup
+      inputRef={inputRef}
+      placeholder={isActive ? "Press keys ..." : "Click to set trigger"}
+      value={shortcut}
+      onKeyDown={handleKeyDown}
+      onFocus={() => setIsActive(true)}
+      onBlur={() => setIsActive(false)}
+      rightElement={
+        <Button
+          hidden={!comboKey.key}
+          icon={"remove"}
+          onClick={() => {
+            setComboKey({ modifiers: 0, key: "" });
+            extensionAPI.settings.set("personal-node-menu-trigger", "");
+          }}
+          minimal
+        />
+      }
+    />
+  );
+};
+
 export default NodeMenu;

src/discourseGraphsMode.ts

@@ -25,7 +25,7 @@ import getDiscourseNodes from "./utils/getDiscourseNodes";
 import refreshConfigTree from "./utils/refreshConfigTree";
 import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
 import getSettingValueFromTree from "roamjs-components/util/getSettingValueFromTree";
-import { render } from "./components/DiscourseNodeMenu";
+import { getModifiersFromCombo, render } from "./components/DiscourseNodeMenu";
 import { render as discourseOverlayRender } from "./components/DiscourseContextOverlay";
 import { render as previewRender } from "./components/LivePreview";
 import { render as renderReferenceContext } from "./components/ReferenceContext";
@@ -57,6 +57,7 @@ import fireQuery from "./utils/fireQuery";
 import { render as renderGraphOverviewExport } from "./components/ExportDiscourseContext";
 import { Condition, QBClause } from "./utils/types";
 import { DiscourseExportResult } from "./utils/getExportTypes";
+import { IKeyCombo } from "@blueprintjs/core";
 
 export const SETTING = "discourse-graphs";
 
@@ -722,13 +723,45 @@ const initializeDiscourseGraphsMode = async (args: OnloadArgs) => {
       });
       const configTree = getBasicTreeByParentUid(pageUid);
 
-      const trigger = getSettingValueFromTree({
+      const globalTrigger = getSettingValueFromTree({
         tree: configTree,
         key: "trigger",
         defaultValue: "\\",
       }).trim();
+      const personalTriggerCombo =
+        (args.extensionAPI.settings.get(
+          "personal-node-menu-trigger"
+        ) as IKeyCombo) || undefined;
+      const personalTrigger = personalTriggerCombo?.key;
+      const personalModifiers = getModifiersFromCombo(personalTriggerCombo);
+
       const keydownListener = (e: KeyboardEvent) => {
-        if (e.key === trigger) {
+        // Personal Trigger overrides Global Trigger
+        if (personalTrigger) {
+          if (e.key !== personalTrigger) return;
+
+          if (
+            (personalModifiers.includes("ctrl") && !e.ctrlKey) ||
+            (personalModifiers.includes("shift") && !e.shiftKey) ||
+            (personalModifiers.includes("alt") && !e.altKey) ||
+            (personalModifiers.includes("meta") && !e.metaKey)
+          ) {
+            return;
+          }
+
+          const target = e.target as HTMLElement;
+          if (
+            target.tagName === "TEXTAREA" &&
+            target.classList.contains("rm-block-input")
+          ) {
+            render({ textarea: target as HTMLTextAreaElement });
+            e.preventDefault();
+            e.stopPropagation();
+          }
+          return;
+        }
+
+        if (e.key === globalTrigger) {
           const target = e.target as HTMLElement;
           if (
             target.tagName === "TEXTAREA" &&
@@ -740,6 +773,7 @@ const initializeDiscourseGraphsMode = async (args: OnloadArgs) => {
           }
         }
       };
+
       document.addEventListener("keydown", keydownListener);
       unloads.add(function removeKeydownListener() {
         document.removeEventListener("keydown", keydownListener);

src/index.ts

@@ -52,7 +52,10 @@ import { fireQuerySync } from "./utils/fireQuery";
 import parseQuery from "./utils/parseQuery";
 import { render as exportRender } from "./components/Export";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
-
+import {
+  NodeMenuTriggerComponent,
+  render as renderDiscourseNodeMenu,
+} from "./components/DiscourseNodeMenu";
 const loadedElsewhere = document.currentScript
   ? document.currentScript.getAttribute("data-source") === "discourse-graph"
   : false;
@@ -391,6 +394,17 @@ svg.rs-svg-container {
           },
         },
       },
+      {
+        id: "discourse-node-menu-trigger",
+        name: "Personal Node Menu Trigger",
+        action: {
+          type: "reactComponent",
+          component: () => NodeMenuTriggerComponent(extensionAPI),
+        },
+
+        description:
+          "Override the global trigger for the Discourse Node Menu. Must refresh after editing.",
+      },
     ],
   });
   if (loadedElsewhere) {