Input: Reverse lookup API (#1365)

* Add 'getBoundKeys' method and unit tests

* Show bound keys in command palette

* Add keyparser info

* Merge master

* Get parsing tests green

* Fix missed semicolon

* Revert suppressing the file open behavior

* Clean up typescript package file

* Fix lint issue

* Add KeyBindingInfo

* Improve look and feel of reverse bindings

* Restore pinned icon in quick open

* Fix lint issues

Author: bryphe

browser/src/Editor/NeovimEditor/WelcomeBufferLayer.tsx

@@ -8,6 +8,8 @@ import * as React from "react"
 
 import styled, { keyframes } from "styled-components"
 
+import { inputManager, InputManager } from "./../../Services/InputManager"
+
 import * as Oni from "oni-api"
 
 import { withProps } from "./../../UI/components/common"
@@ -167,20 +169,24 @@ export class WelcomeBufferLayer implements Oni.EditorLayer {
                 className="enable-mouse"
                 style={{ animation: `${entranceFull} 0.25s ease-in 0.1s forwards` }}
             >
-                <WelcomeView />
+                <WelcomeView inputManager={inputManager} />
             </WelcomeWrapper>
         )
     }
 }
 
+export interface WelcomeViewProps {
+    inputManager: InputManager
+}
+
 export interface WelcomeViewState {
     version: string
 }
 
 import { getMetadata } from "./../../Services/Metadata"
 
-export class WelcomeView extends React.PureComponent<{}, WelcomeViewState> {
-    constructor(props: any) {
+export class WelcomeView extends React.PureComponent<WelcomeViewProps, WelcomeViewState> {
+    constructor(props: WelcomeViewProps) {
         super(props)
 
         this.state = {
@@ -282,7 +288,9 @@ export class WelcomeView extends React.PureComponent<{}, WelcomeViewState> {
                             />
                             <WelcomeButton
                                 title="Command Palette"
-                                description="Control + Shift + P"
+                                description={
+                                    this.props.inputManager.getBoundKeys("commands.show")[0]
+                                }
                                 command="oni.configuration.open"
                             />
                             <WelcomeButton

browser/src/Input/KeyParser.ts

@@ -0,0 +1,86 @@
+/**
+ * KeyParser.ts
+ *
+ * Simple parsing logic to take vim key bindings / chords,
+ * and return a normalized object.
+ */
+
+export interface IKey {
+    character: string
+    shift: boolean
+    alt: boolean
+    control: boolean
+    meta: boolean
+}
+
+export interface IKeyChord {
+    chord: IKey[]
+}
+
+export const parseKeysFromVimString = (keys: string): IKeyChord => {
+    const chord: IKey[] = []
+
+    let idx = 0
+
+    while (idx < keys.length) {
+        if (keys[idx] !== "<") {
+            chord.push(parseKey(keys[idx]))
+        } else {
+            const endIndex = getNextCharacter(keys, idx + 1)
+            // Malformed if there isn't a corresponding '>'
+            if (endIndex === -1) {
+                return { chord }
+            }
+
+            const keyContents = keys.substring(idx + 1, endIndex)
+            chord.push(parseKey(keyContents))
+            idx = endIndex + 1
+        }
+
+        idx++
+    }
+
+    return {
+        chord,
+    }
+}
+
+const getNextCharacter = (str: string, startIndex: number): number => {
+    let i = startIndex
+    while (i < str.length) {
+        if (str[i] === ">") {
+            return i
+        }
+        i++
+    }
+
+    return -1
+}
+
+export const parseKey = (key: string): IKey => {
+    if (key.indexOf("-") === -1) {
+        return {
+            character: key,
+            shift: false,
+            alt: false,
+            control: false,
+            meta: false,
+        }
+    }
+
+    const hasControl = key.indexOf("c-") >= 0 || key.indexOf("C-") >= 0
+    const hasShift = key.indexOf("s-") >= 0 || key.indexOf("S-") >= 0
+    const hasAlt = key.indexOf("a-") >= 0 || key.indexOf("A-") >= 0
+    const hasMeta = key.indexOf("m-") >= 0 || key.indexOf("M-") >= 0
+
+    const lastIndexoFHyphen = key.lastIndexOf("-")
+    const finalKey = key.substring(lastIndexoFHyphen + 1, key.length)
+
+    return {
+        character: finalKey,
+        shift: hasShift,
+        alt: hasAlt,
+        control: hasControl,
+        meta: hasMeta,
+    }
+}

browser/src/Services/InputManager.ts

@@ -8,6 +8,8 @@ export type ActionOrCommand = string | ActionFunction
 
 export type FilterFunction = () => boolean
 
+import { IKeyChord, parseKeysFromVimString } from "./../Input/KeyParser"
+
 export interface KeyBinding {
     action: ActionOrCommand
     filter?: FilterFunction
@@ -69,6 +71,25 @@ export class InputManager implements Oni.InputManager {
         return !!this._boundKeys[keyChord]
     }
 
+    // Returns an array of keys bound to a command
+    public getBoundKeys(command: string): string[] {
+        return Object.keys(this._boundKeys).reduce(
+            (prev: string[], currentValue: string) => {
+                const bindings = this._boundKeys[currentValue]
+                if (bindings.find(b => b.action === command)) {
+                    return [...prev, currentValue]
+                } else {
+                    return prev
+                }
+            },
+            [] as string[],
+        )
+    }
+
+    public parseKeys(keys: string): IKeyChord {
+        return parseKeysFromVimString(keys)
+    }
+
     /**
      * Internal Methods
      */

browser/src/Services/Menu/MenuComponent.tsx

@@ -6,7 +6,7 @@ import * as take from "lodash/take"
 import * as Oni from "oni-api"
 
 import { HighlightTextByIndex } from "./../../UI/components/HighlightText"
-import { Visible } from "./../../UI/components/Visible"
+// import { Visible } from "./../../UI/components/Visible"
 import { Icon, IconSize } from "./../../UI/Icon"
 
 import { focusManager } from "./../FocusManager"
@@ -156,6 +156,7 @@ export interface IMenuItemProps {
     detail: string
     detailHighlights: number[]
     pinned: boolean
+    additionalComponent?: JSX.Element
     onClick: () => void
 }
 
@@ -173,7 +174,6 @@ export class MenuItem extends React.PureComponent<IMenuItemProps, {}> {
             ) : (
                 this.props.icon
             )
-
         return (
             <div className={className} onClick={() => this.props.onClick()}>
                 {icon}
@@ -189,9 +189,7 @@ export class MenuItem extends React.PureComponent<IMenuItemProps, {}> {
                     highlightIndices={this.props.detailHighlights}
                     highlightClassName={"highlight"}
                 />
-                <Visible visible={this.props.pinned}>
-                    <Icon name="clock-o" />
-                </Visible>
+                {this.props.additionalComponent}
             </div>
         )
     }

browser/src/Services/Menu/MenuFilter.ts

@@ -7,7 +7,7 @@
 import * as Fuse from "fuse.js"
 import * as sortBy from "lodash/sortBy"
 
-import * as Oni from "oni-api"
+// import * as Oni from "oni-api"
 
 import { configuration } from "./../../Services/Configuration"
 
@@ -38,10 +38,7 @@ export const shouldFilterbeCaseSensitive = (searchString: string): boolean => {
     }
 }
 
-export const fuseFilter = (
-    options: Oni.Menu.MenuOption[],
-    searchString: string,
-): IMenuOptionWithHighlights[] => {
+export const fuseFilter = (options: any[], searchString: string): IMenuOptionWithHighlights[] => {
     if (!searchString) {
         const opt = options.map(o => {
             return {
@@ -53,6 +50,7 @@ export const fuseFilter = (
                 metadata: o.metadata,
                 detailHighlights: [],
                 labelHighlights: [],
+                additionalComponent: o.additionalComponent,
             }
         })
 
@@ -123,6 +121,7 @@ export const fuseFilter = (
             metadata: f.item.metadata,
             labelHighlights: convertArrayOfPairsToIndices(labelHighlights),
             detailHighlights: convertArrayOfPairsToIndices(detailHighlights),
+            additionalComponent: f.item.additionalComponent,
         }
     })
 

browser/src/Services/Notifications/Notifications.ts

@@ -14,14 +14,11 @@ import { createStore, INotificationsState } from "./NotificationStore"
 import { getView } from "./NotificationsView"
 
 export class Notifications {
-
     private _id: number = 0
     private _overlay: Overlay
     private _store: Store<INotificationsState>
 
-    constructor(
-        private _overlayManager: OverlayManager,
-    ) {
+    constructor(private _overlayManager: OverlayManager) {
         this._store = createStore()
 
         this._overlay = this._overlayManager.createItem()

browser/src/Services/QuickOpen/PinnedIconView.tsx

@@ -0,0 +1,18 @@
+/**
+ * PinnedIconView.tsx
+ *
+ * Shows the pinned icon for recently navigated items in quick open
+ */
+
+import * as React from "react"
+
+import { Visible } from "./../../UI/components/Visible"
+import { Icon } from "./../../UI/Icon"
+
+export const render = (props: { pinned: boolean }) => {
+    return (
+        <Visible visible={props.pinned}>
+            <Icon name="clock-o" />
+        </Visible>
+    )
+}

browser/src/Services/QuickOpen/QuickOpen.ts

@@ -18,6 +18,7 @@ import { editorManager } from "./../EditorManager"
 import { fuseFilter, Menu, MenuManager } from "./../Menu"
 
 import { FinderProcess } from "./FinderProcess"
+import { render as renderPinnedIcon } from "./PinnedIconView"
 import { QuickOpenItem, QuickOpenType } from "./QuickOpenItem"
 import { regexFilter } from "./RegExFilter"
 import * as RipGrep from "./RipGrep"
@@ -248,19 +249,20 @@ export class QuickOpen {
             process.env[process.platform === "win32" ? "USERPROFILE" : "HOME"] === process.cwd()
         )
     }
-
     // Show menu based on items given
     private _setItemsFromQuickOpenItems(items: QuickOpenItem[]): void {
         const options = items.map(qitem => {
             const f = qitem.item.trim()
             const file = path.basename(f)
             const folder = path.dirname(f)
+            const pinned = this._seenItems.indexOf(f) >= 0
 
             return {
                 icon: getFileIcon(file) as any,
                 label: file,
                 detail: folder,
-                pinned: this._seenItems.indexOf(f) >= 0,
+                pinned,
+                additionalComponent: renderPinnedIcon({ pinned }),
             }
         })
 

browser/src/Services/Tasks.ts

@@ -17,6 +17,8 @@ import * as Oni from "oni-api"
 
 import { Menu, MenuManager } from "./../Services/Menu"
 
+import { render as renderKeyBindingInfo } from "./../UI/components/KeyBindingInfo"
+
 export interface ITask {
     name: string
     detail: string
@@ -50,9 +52,9 @@ export class Tasks {
                 .filter(t => t.name || t.detail)
                 .map(f => {
                     return {
-                        icon: "tasks",
                         label: f.name,
                         detail: f.detail,
+                        additionalComponent: renderKeyBindingInfo({ command: f.command }),
                     }
                 })
 

browser/src/UI/components/KeyBindingInfo.tsx

@@ -0,0 +1,70 @@
+/**
+ * KeyBindingInfo.tsx
+ *
+ * Helper component to show a key binding, based on a command
+ */
+
+import styled from "styled-components"
+
+import * as React from "react"
+
+import { inputManager } from "./../../Services/InputManager"
+
+export interface IKeyBindingInfoProps {
+    command: string
+}
+
+const KeyWrapper = styled.span`
+    color: ${props => props.theme["highlight.mode.normal.background"]};
+    font-size: 0.9em;
+`
+
+export class KeyBindingInfo extends React.PureComponent<IKeyBindingInfoProps, {}> {
+    public render(): JSX.Element {
+        if (!inputManager) {
+            return null
+        }
+
+        const boundKeys = inputManager.getBoundKeys(this.props.command)
+
+        if (!boundKeys || !boundKeys.length) {
+            return null
+        }
+
+        const parsedKeys = inputManager.parseKeys(boundKeys[0])
+
+        if (!parsedKeys || !parsedKeys.chord || !parsedKeys.chord.length) {
+            return null
+        }
+
+        const firstChord = parsedKeys.chord[0]
+
+        const elems: JSX.Element[] = []
+
+        if (firstChord.meta) {
+            elems.push(<KeyWrapper>{"meta"}</KeyWrapper>)
+            elems.push(<KeyWrapper>{"+"}</KeyWrapper>)
+        }
+
+        if (firstChord.control) {
+            elems.push(<KeyWrapper>{"control"}</KeyWrapper>)
+            elems.push(<KeyWrapper>{"+"}</KeyWrapper>)
+        }
+
+        if (firstChord.alt) {
+            elems.push(<KeyWrapper>{"alt"}</KeyWrapper>)
+            elems.push(<KeyWrapper>{"+"}</KeyWrapper>)
+        }
+
+        if (firstChord.shift) {
+            elems.push(<KeyWrapper>{"shift"}</KeyWrapper>)
+            elems.push(<KeyWrapper>{"+"}</KeyWrapper>)
+        }
+
+        elems.push(<KeyWrapper>{firstChord.character}</KeyWrapper>)
+
+        return <span>{elems}</span>
+    }
+}
+
+export const render = (props: IKeyBindingInfoProps) => <KeyBindingInfo {...props} />