rwb-codemirror-helix 0.2.2 → 0.2.3

package/dist/index.cjs

@@ -30,7 +30,7 @@ __export(index_exports, {
   searchStateField: () => searchStateField
 });
 module.exports = __toCommonJS(index_exports);
-var import_state18 = require("@codemirror/state");
+var import_state19 = require("@codemirror/state");
 var import_commands2 = require("@codemirror/commands");
 
 // src/state.ts
@@ -219,7 +219,48 @@ var helixBaseTheme = import_view.EditorView.baseTheme({
     fontStyle: "italic",
     opacity: "0.7"
   },
-  "& .helix-status-register": { color: "var(--helix-register-color, #7000c0)" }
+  "& .helix-status-register": { color: "var(--helix-register-color, #7000c0)" },
+  // Which-key panel
+  "& .helix-whichkey-panel": {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: "2px 14px",
+    padding: "4px 8px",
+    fontSize: "0.82em",
+    fontFamily: "monospace",
+    background: "var(--helix-status-bg, inherit)",
+    color: "var(--helix-status-fg, inherit)",
+    borderTop: "1px solid var(--helix-status-border, #999)",
+    userSelect: "none"
+  },
+  "& .helix-whichkey-title": {
+    fontWeight: "bold",
+    opacity: "0.45",
+    marginRight: "6px",
+    textTransform: "uppercase",
+    letterSpacing: "0.06em",
+    fontSize: "0.9em"
+  },
+  "& .helix-whichkey-item": {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "5px"
+  },
+  "& .helix-whichkey-key": {
+    fontWeight: "bold",
+    color: "var(--helix-normal-color, #0080e0)",
+    background: "rgba(128, 128, 128, 0.12)",
+    padding: "0 5px",
+    borderRadius: "3px",
+    border: "1px solid rgba(128, 128, 128, 0.25)",
+    minWidth: "1.5em",
+    textAlign: "center",
+    lineHeight: "1.5"
+  },
+  "& .helix-whichkey-desc": {
+    opacity: "0.7"
+  }
 });
 
 // src/keymap.ts
@@ -3802,12 +3843,99 @@ function buildHelixKeymap() {
   ];
 }
 
+// src/whichkey.ts
+var import_view7 = require("@codemirror/view");
+var MENUS = {
+  goto: [
+    ["g", "file start"],
+    ["e", "file end"],
+    ["h", "line start"],
+    ["l", "line end"],
+    ["s", "first non-ws"],
+    ["t", "screen top"],
+    ["c", "screen middle"],
+    ["b", "screen bottom"],
+    ["j", "move down"],
+    ["k", "move up"],
+    [".", "last change"],
+    ["w", "word jump"],
+    ["|", "column"]
+  ],
+  view: [
+    ["z / c", "center"],
+    ["t", "scroll top"],
+    ["b", "scroll bottom"],
+    ["j / \u2193", "scroll down"],
+    ["k / \u2191", "scroll up"]
+  ],
+  match: [
+    ["m", "matching bracket"],
+    ["s", "surround add"],
+    ["d", "surround delete"],
+    ["r", "surround replace"],
+    ["i", "select inside"],
+    ["a", "select around"]
+  ],
+  bracket_next: [
+    ["p", "next paragraph"],
+    ["Space", "newline below"]
+  ],
+  bracket_prev: [
+    ["p", "prev paragraph"],
+    ["Space", "newline above"]
+  ]
+};
+var TITLE = {
+  goto: "goto",
+  view: "view",
+  match: "match",
+  bracket_next: "]",
+  bracket_prev: "["
+};
+function render(dom, view) {
+  const hs = getHelixState(view.state);
+  const entries = hs.pendingOp ? MENUS[hs.pendingOp.type] ?? null : null;
+  if (!entries) {
+    dom.style.display = "none";
+    return;
+  }
+  dom.style.display = "";
+  dom.innerHTML = "";
+  const title = dom.appendChild(document.createElement("span"));
+  title.className = "helix-whichkey-title";
+  title.textContent = TITLE[hs.pendingOp.type] ?? "";
+  for (const [key, desc] of entries) {
+    const item = dom.appendChild(document.createElement("span"));
+    item.className = "helix-whichkey-item";
+    const keyEl = item.appendChild(document.createElement("span"));
+    keyEl.className = "helix-whichkey-key";
+    keyEl.textContent = key;
+    const descEl = item.appendChild(document.createElement("span"));
+    descEl.className = "helix-whichkey-desc";
+    descEl.textContent = desc;
+  }
+}
+var whichKeyExtension = import_view7.showPanel.of((view) => {
+  const dom = document.createElement("div");
+  dom.className = "helix-whichkey-panel";
+  render(dom, view);
+  return {
+    dom,
+    top: false,
+    update(u) {
+      const prev = getHelixState(u.startState).pendingOp;
+      const next = getHelixState(u.state).pendingOp;
+      if (prev !== next) render(dom, u.view);
+    }
+  };
+});
+
 // src/index.ts
 function helixKeymap(options = {}) {
   const { defaultMode = "normal", statusBar = true } = options;
   const extensions = [
     // Core state
-    import_state18.EditorState.allowMultipleSelections.of(true),
+    import_state19.EditorState.allowMultipleSelections.of(true),
     helixStateField,
     searchStateField,
     multiSelectStateField,
@@ -3826,6 +3954,7 @@ function helixKeymap(options = {}) {
     // Panels
     searchPanelExtension,
     multiSelectPanelExtension,
+    whichKeyExtension,
     // Keybindings + input blocking
     ...buildHelixKeymap()
   ];