migrate commands to command palette (Closes #389)

src/data/quickReference.ts

@@ -664,7 +664,7 @@ const quickReference: {
         c1: "Follow me on Twitter at <a href='https://twitter.com/dvargas92495' target='_blank'>@dvargas92495</a><br/>DM me with bugs, suggestions and whatever<br/><br/>",
       },
       {
-        c1: "Follow RoamJS at <a href='https://twitter.com/roam_jd' target='_blank'>@roam_jd</a><br/>for all of the latest news and updates surrounding our extensions.<br/><br/>",
+        c1: "Follow RoamJS at <a href='https://twitter.com/roam_js' target='_blank'>@roam_jd</a><br/>for all of the latest news and updates surrounding our extensions.<br/><br/>",
       },
       {
         c1: "<b>Credits to:</b><br/> <a href='https://twitter.com/tfthacker' target='_blank'>@TfTHacker</a> for being the original author of this extension<br /><a href='https://www.roamhacks.com/' target='_blank'>RoamHacks.com</a> for their tips <br/><a href='https://twitter.com/beauhaan' target='_blank'>Beau Haan</a> for the creative input, follow him on Twitter <br/><a href='https://twitter.com/billpetro' target='_blank'>Bill Petro</a> for experience and calmness.  ",

src/features/alert.tsx

@@ -23,6 +23,7 @@ import {
 } from "@blueprintjs/core";
 import parseNlpDate from "roamjs-components/date/parseNlpDate";
 import formatDistanceToNow from "date-fns/formatDistanceToNow";
+import type { OnloadArgs } from "roamjs-components/types";
 
 type AlertContent = {
   when: string;
@@ -257,11 +258,27 @@ const openAlertDashboard = () =>
   renderOverlay({ id: "alert-dashboard", Overlay: AlertDashboard });
 
 let enabled = false;
-export const toggleFeature = (flag: boolean) => {
+export const toggleFeature = (flag: boolean, extensionAPI: OnloadArgs["extensionAPI"]) => {
   enabled = flag;
   if (enabled) {
-    unloads.add(addCommand("Create New Alert", createNewAlert));
-    unloads.add(addCommand("View Current Alerts", openAlertDashboard));
+    unloads.add(
+      addCommand(
+        {
+          label: "Create New Alert",
+          callback: createNewAlert,
+        },
+        extensionAPI
+      )
+    );
+    unloads.add(
+      addCommand(
+        {
+          label: "View Current Alerts",
+          callback: openAlertDashboard,
+        },
+        extensionAPI
+      )
+    );
     const storage = localStorage.getItem(LOCAL_STORAGE_KEY);
     if (storage) {
       const { alerts } = JSON.parse(storage) as {

src/features/article.tsx

@@ -19,7 +19,7 @@ import { Readability } from "@mozilla/readability";
 import TurndownService from "turndown";
 import iconv from "iconv-lite";
 import charset from "charset";
-import { InputTextNode } from "roamjs-components/types/native";
+import { InputTextNode, OnloadArgs } from "roamjs-components/types/native";
 import updateBlock from "roamjs-components/writes/updateBlock";
 import createBlock from "roamjs-components/writes/createBlock";
 import getUidsFromId from "roamjs-components/dom/getUidsFromId";
@@ -314,29 +314,21 @@ const inlineImportArticle = async ({
 };
 
 const unloads = new Set<() => void>();
-export const toggleFeature = (flag: boolean) => {
+export const toggleFeature = (flag: boolean, extensionAPI: OnloadArgs["extensionAPI"]) => {
   if (flag) {
     unloads.add(
-      addCommand("Import Article Into Roam", () =>
-        renderImportArticle(
-          window.roamAlphaAPI.ui.getFocusedBlock()?.["block-uid"]
-        )
+      addCommand(
+        {
+          label: "Import Article Into Roam",
+          callback: () =>
+            renderImportArticle(
+              window.roamAlphaAPI.ui.getFocusedBlock()?.["block-uid"]
+            ),
+        },
+        extensionAPI
       )
     );
 
-    const keydownListener = async (e: KeyboardEvent) => {
-      if (e.altKey && e.shiftKey && (e.key === "I" || e.code === "KeyI")) {
-        const target = e.target as HTMLElement;
-        if (target.tagName === "TEXTAREA") {
-          const value = (target as HTMLTextAreaElement).value;
-          const { blockUid } = getUidsFromId(target.id);
-          await inlineImportArticle({ value, parentUid: blockUid });
-        }
-      }
-    };
-    document.addEventListener("keydown", keydownListener);
-    unloads.add(() => document.removeEventListener("keydown", keydownListener));
-
     unloads.add(
       registerSmartBlocksCommand({
         text: "ARTICLE",

src/features/decorators.tsx

@@ -48,6 +48,7 @@ import getParentUidByBlockUid from "roamjs-components/queries/getParentUidByBloc
 import getFullTreeByParentUid from "roamjs-components/queries/getFullTreeByParentUid";
 import createBlockObserver from "roamjs-components/dom/createBlockObserver";
 import getReferenceBlockUid from "roamjs-components/dom/getReferenceBlockUid";
+import type { OnloadArgs } from "roamjs-components/types";
 
 const TODO_REGEX = /{{(\[\[)?TODO(\]\])?}}\s*/;
 
@@ -263,7 +264,7 @@ const settings = [
   "Context Enabled",
   "Hex Color Preview Enabled",
 ] as const;
-const DecoratorSettings = ({ isOpen, onClose }: RoamOverlayProps) => {
+const DecoratorSettings = ({ isOpen, onClose, extensionAPI }: RoamOverlayProps) => {
   const [opts, setOpts] = useState(() =>
     JSON.parse(localStorageGet("decorators") || "{}")
   );
@@ -295,8 +296,8 @@ const DecoratorSettings = ({ isOpen, onClose }: RoamOverlayProps) => {
             text={"Save"}
             onClick={() => {
               localStorageSet("decorators", JSON.stringify(opts));
-              toggleFeature(false);
-              toggleFeature(true);
+              toggleFeature(false, extensionAPI);
+              toggleFeature(true, extensionAPI);
               renderToast({
                 content: "Successfully saved new decorators!",
                 id: "decorators-saved",
@@ -311,15 +312,15 @@ const DecoratorSettings = ({ isOpen, onClose }: RoamOverlayProps) => {
 };
 
 const unloads = new Set<() => void>();
-export const toggleFeature = (flag: boolean) => {
+export const toggleFeature = (flag: boolean, extensionAPI: OnloadArgs["extensionAPI"] ) => {
   if (flag) {
     const archivedDefault = !!get("decoratorsMoveArchives"); // Improve the UX for this if feature is re-requested
-    window.roamAlphaAPI.ui.commandPalette.addCommand({
+    extensionAPI.ui.commandPalette.addCommand({
       label: "Toggle Block Decorators",
-      callback: () => renderOverlay({ Overlay: DecoratorSettings }),
+      callback: () => renderOverlay({ Overlay: DecoratorSettings, props: { extensionAPI } }),
     });
     unloads.add(() =>
-      window.roamAlphaAPI.ui.commandPalette.removeCommand({
+    extensionAPI.ui.commandPalette.removeCommand({
         label: "Toggle Block Decorators",
       })
     );

src/features/tutorials.tsx

@@ -38,6 +38,7 @@ import {
   navigate as triggerDeepNav,
 } from "./deepnav";
 import quickReference from "../data/quickReference";
+import type { OnloadArgs } from "roamjs-components/types";
 
 const TutorialOverlay = ({ onClose, isOpen }: RoamOverlayProps<{}>) => {
   const [bigPictureLink, setBigPictureLink] = useState("");
@@ -1077,26 +1078,6 @@ const displayGraphStats = async () => {
     });
 };
 
-const keyDownListener = (ev: KeyboardEvent) => {
-  if (ev.shiftKey == true && ev.code == "KeyQ") {
-    if (ev.ctrlKey) {
-      ev.preventDefault();
-      ev.stopPropagation();
-      toggleQuickReference();
-    }
-    if (ev.altKey) {
-      ev.preventDefault();
-      ev.stopPropagation();
-      showTutorials();
-    }
-  }
-  if (ev.altKey && ev.shiftKey == true && ev.code == "KeyB") {
-    ev.preventDefault();
-    ev.stopPropagation();
-    displayGraphStats();
-  }
-};
-
 const WorkbenchMenu = () => {
   const [isOpen, setIsOpen] = useState(false);
   const closeMenu = useCallback(() => setIsOpen(false), [setIsOpen]);
@@ -1149,21 +1130,18 @@ const WorkbenchMenu = () => {
       onClick: toggleQuickReference,
       icon: "help",
       label: "Help",
-      shortcut: "Ctrl-Shift-q",
     },
     {
       enabled: true,
       onClick: showTutorials,
       icon: "learning",
       label: "Tutorials",
-      shortcut: "Alt-Shift-q",
     },
     {
       enabled: true,
       onClick: displayGraphStats,
       icon: "database",
       label: "Graph DB Stats",
-      shortcut: "Alt-Shift-b",
     },
   ] as const;
 
@@ -1195,7 +1173,6 @@ const WorkbenchMenu = () => {
                     <>
                       <Icon icon={mi.icon} className={"mr-2"} />
                       {mi.label}{" "}
-                      <span style={{ fontSize: "7pt" }}>({mi.shortcut})</span>
                     </>
                   }
                 />
@@ -1246,20 +1223,44 @@ export const setVersion = (v: string) => {
   version = v;
 };
 
+
 const workbenchCommands = new Set<() => void>();
 let topbarObserver: MutationObserver;
 export let enabled = false;
-export const toggleFeature = (flag: boolean) => {
+export const toggleFeature = (flag: boolean, extensionAPI: OnloadArgs["extensionAPI"]) => {
   enabled = flag;
   if (flag) {
     displayMenu();
     topbarObserver = new MutationObserver(() => {
       // fix from sidebar moving
     });
-    workbenchCommands.add(addCommand("WorkBench Help", toggleQuickReference));
-    workbenchCommands.add(addCommand("Tutorials", showTutorials));
-    workbenchCommands.add(addCommand("Graph DB Stats", displayGraphStats));
-    document.body.addEventListener("keydown", keyDownListener);
+    workbenchCommands.add(
+      addCommand(
+        {
+          label: "WorkBench Help",
+          callback: toggleQuickReference,
+        },
+        extensionAPI
+      )
+    );
+    workbenchCommands.add(
+      addCommand(
+        {
+          label: "Tutorials",
+          callback: showTutorials,
+        },
+        extensionAPI
+      )
+    );
+    workbenchCommands.add(
+      addCommand(
+        {
+          label: "Graph DB Stats",
+          callback: displayGraphStats,
+        },
+        extensionAPI
+      )
+    );
   } else {
     const workbenchMenu = document.getElementById("workbench-menu");
     if (workbenchMenu) {
@@ -1269,6 +1270,5 @@ export const toggleFeature = (flag: boolean) => {
     }
     workbenchCommands.forEach((r) => r());
     workbenchCommands.clear();
-    document.body.removeEventListener("keydown", keyDownListener);
   }
-};
+};