Add Personal Node Menu Trigger, style Node Menu

apps/roam/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,8 @@ 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";
+import { formatHexColor } from "./settings/DiscourseNodeCanvasSettings";
 
 type Props = {
   textarea: HTMLTextAreaElement;
@@ -118,14 +129,28 @@ const NodeMenu = ({ onClose, textarea }: { onClose: () => void } & Props) => {
       content={
         <Menu ulRef={menuRef} data-active-index={activeIndex}>
           {discourseNodes.map((item, i) => {
+            const nodeColor =
+              formatHexColor(item?.canvasSettings?.color) || "#000";
             return (
               <MenuItem
                 key={item.text}
                 data-node={item.type}
-                text={`${item.text} - (${item.shortcut})`}
+                text={item.text}
                 active={i === activeIndex}
                 onMouseEnter={() => setActiveIndex(i)}
                 onClick={() => onSelect(i)}
+                className="flex items-center"
+                icon={
+                  <div
+                    className="mr-2 h-4 w-4 select-none rounded-full"
+                    style={{
+                      backgroundColor: nodeColor,
+                    }}
+                  />
+                }
+                labelElement={
+                  <span className="font-mono">{item.shortcut}</span>
+                }
               />
             );
           })}
@@ -154,4 +179,100 @@ 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;

apps/roam/src/settings/settingsPanel.ts

@@ -1,4 +1,5 @@
 import { OnloadArgs } from "roamjs-components/types";
+import { NodeMenuTriggerComponent } from "~/components/DiscourseNodeMenu";
 import { SettingsPanel } from "~/components/settings/Settings";
 
 export const createSettingsPanel = (onloadArgs: OnloadArgs) => {
@@ -15,6 +16,17 @@ export const createSettingsPanel = (onloadArgs: OnloadArgs) => {
           component: () => SettingsPanel({ onloadArgs }),
         },
       },
+      {
+        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.",
+      },
     ],
   });
 };

apps/roam/src/utils/initializeObserversAndListeners.ts

@@ -29,7 +29,11 @@ import refreshConfigTree from "~/utils/refreshConfigTree";
 import { render as renderGraphOverviewExport } from "~/components/ExportDiscourseContext";
 import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
 import { getSettingValueFromTree } from "roamjs-components/util";
-import { render as renderDiscourseNodeMenu } from "~/components/DiscourseNodeMenu";
+import {
+  getModifiersFromCombo,
+  render as renderDiscourseNodeMenu,
+} from "~/components/DiscourseNodeMenu";
+import { IKeyCombo } from "@blueprintjs/core";
 
 export const initObservers = async ({
   onloadArgs,
@@ -127,23 +131,49 @@ export const initObservers = async ({
   };
 
   const configTree = getBasicTreeByParentUid(configPageUid);
-  const trigger = getSettingValueFromTree({
+  const globalTrigger = getSettingValueFromTree({
     tree: configTree,
     key: "trigger",
     defaultValue: "\\",
   }).trim();
+  const personalTriggerCombo =
+    (onloadArgs.extensionAPI.settings.get(
+      "personal-node-menu-trigger",
+    ) as IKeyCombo) || undefined;
+  const personalTrigger = personalTriggerCombo?.key;
+  const personalModifiers = getModifiersFromCombo(personalTriggerCombo);
+  const handleNodeMenuRender = (target: HTMLElement, evt: KeyboardEvent) => {
+    if (
+      target.tagName === "TEXTAREA" &&
+      target.classList.contains("rm-block-input")
+    ) {
+      renderDiscourseNodeMenu({ textarea: target as HTMLTextAreaElement });
+      evt.preventDefault();
+      evt.stopPropagation();
+    }
+  };
+
   const nodeMenuTriggerListener = (e: Event) => {
     const evt = e as KeyboardEvent;
-    if (evt.key === trigger) {
-      const target = evt.target as HTMLElement;
+    const target = evt.target as HTMLElement;
+
+    // Personal Trigger overrides Global Trigger
+    if (personalTrigger) {
+      if (evt.key !== personalTrigger) return;
       if (
-        target.tagName === "TEXTAREA" &&
-        target.classList.contains("rm-block-input")
+        (personalModifiers.includes("ctrl") && !evt.ctrlKey) ||
+        (personalModifiers.includes("shift") && !evt.shiftKey) ||
+        (personalModifiers.includes("alt") && !evt.altKey) ||
+        (personalModifiers.includes("meta") && !evt.metaKey)
       ) {
-        renderDiscourseNodeMenu({ textarea: target as HTMLTextAreaElement });
-        evt.preventDefault();
-        evt.stopPropagation();
+        return;
       }
+      handleNodeMenuRender(target, evt);
+      return;
+    }
+
+    if (evt.key === globalTrigger) {
+      handleNodeMenuRender(target, evt);
     }
   };