Fix SmartBlock button rendering, vim keybindings, and hotkey overflow

README.md

@@ -1,6 +1,12 @@
+<a href="https://roamjs.com/">
+    <img src="https://avatars.githubusercontent.com/u/138642184" alt="RoamJS Logo" title="RoamJS" align="right" height="60" />
+</a>
+
 # SmartBlocks
 
-Create custom and programmable templates from within Roam!
+**Build powerful, dynamic workflows in Roam—like programmable templates that can write, transform, and fetch data from your graph. Automate daily notes, meeting prep, task flows, and repeatable processes with a rich command system.**
+
+[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/RoamJS/smartblocks)
 
 ## Overview
 
@@ -30,10 +36,6 @@ The following steps dive into all the features SmartBlocks has to offer in incre
 
 <!-- <div style="position: relative; padding-bottom: 66.66666666666666%; height: 0;"><iframe src="https://www.loom.com/embed/954d916643754027a3889fd5bf7f24dd" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div> -->
 
-## Migration
-
-This extension was inspired by and acts as version 2 of the original SmartBlocks module in the Roam42 extension. It will soon replace the current SmartBlocks module in Roam42. For a list of all the non-backward compatible changes from V1 to V2, check out the [Migration Guide](https://github.com/RoamJS/smartblocks/blob/main/docs/migration-guide.md).
-
 ## Support
 
 There is an active community at [roamresearch.slack.com](https://join.slack.com/t/roamresearch/shared_invite/zt-ni1vw9yf-HzeWr05ZJBt55j_zfddPsw) in the `#roamjs` channel discussing and building SmartBlocks.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartblocks",
-  "version": "1.12.3",
+  "version": "1.14.0",
   "description": "Create custom and programmable templates from within Roam!",
   "main": "./build/main.js",
   "scripts": {

src/HotKeyPanel.tsx

@@ -81,6 +81,7 @@ const HotKeyEntry = ({
           }}
           transformItem={(e) => workflowNamesByUid[e]}
           className={"w-full"}
+          popoverProps={{ portalClassName: "roamjs-hotkey-dropdown" }}
         />
       </Label>
       <Button

src/SmartblocksMenu.tsx

@@ -108,13 +108,19 @@ const SmartblocksMenu = ({
   const keydownListener = useCallback(
     (e: KeyboardEvent) => {
       if (!menuRef.current) return;
-      if (e.key === "ArrowDown") {
+      const isDown =
+        e.key === "ArrowDown" ||
+        (e.ctrlKey && (e.key === "n" || e.key === "j"));
+      const isUp =
+        e.key === "ArrowUp" ||
+        (e.ctrlKey && (e.key === "p" || e.key === "k"));
+      if (isDown) {
         const index = Number(menuRef.current.getAttribute("data-active-index"));
         const count = menuRef.current.childElementCount;
         setActiveIndex((index + 1) % count);
         e.stopPropagation();
         e.preventDefault();
-      } else if (e.key === "ArrowUp") {
+      } else if (isUp) {
         const index = Number(menuRef.current.getAttribute("data-active-index"));
         const count = menuRef.current.childElementCount;
         setActiveIndex((index - 1 + count) % count);