@jupyterlab/shortcuts-extension 3.3.0-alpha.9 → 3.3.0

package/lib/components/ShortcutUI.js

@@ -0,0 +1,361 @@
+import { ArrayExt, StringExt } from '@lumino/algorithm';
+import { ShortcutUIStyle, TopWhitespaceStyle } from '../componentStyle/ShortcutUIStyle';
+import { ShortcutList } from './ShortcutList';
+import { TopNav } from './TopNav';
+import * as React from 'react';
+import { ErrorObject, ShortcutObject, TakenByObject } from './ShortcutInput';
+/** Normalize the query text for a fuzzy search. */
+function normalizeQuery(text) {
+    return text.replace(/\s+/g, '').toLowerCase();
+}
+/** Perform a fuzzy search on a single command item. */
+function fuzzySearch(item, query) {
+    // Create the source text to be searched.
+    const category = item.category.toLowerCase();
+    const label = item['label'].toLowerCase();
+    const source = `${category} ${label}`;
+    // Set up the match score and indices array.
+    let score = Infinity;
+    let indices = null;
+    // The regex for search word boundaries
+    const rgx = /\b\w/g;
+    // Search the source by word boundary.
+    // eslint-disable-next-line
+    while (true) {
+        // Find the next word boundary in the source.
+        const rgxMatch = rgx.exec(source);
+        // Break if there is no more source context.
+        if (!rgxMatch) {
+            break;
+        }
+        // Run the string match on the relevant substring.
+        const match = StringExt.matchSumOfDeltas(source, query, rgxMatch.index);
+        // Break if there is no match.
+        if (!match) {
+            break;
+        }
+        // Update the match if the score is better.
+        if (match && match.score <= score) {
+            score = match.score;
+            indices = match.indices;
+        }
+    }
+    // Bail if there was no match.
+    if (!indices || score === Infinity) {
+        return null;
+    }
+    // Compute the pivot index between category and label text.
+    const pivot = category.length + 1;
+    // Find the slice index to separate matched indices.
+    const j = ArrayExt.lowerBound(indices, pivot, (a, b) => a - b);
+    // Extract the matched category and label indices.
+    const categoryIndices = indices.slice(0, j);
+    const labelIndices = indices.slice(j);
+    // Adjust the label indices for the pivot offset.
+    for (let i = 0, n = labelIndices.length; i < n; ++i) {
+        labelIndices[i] -= pivot;
+    }
+    // Handle a pure label match.
+    if (categoryIndices.length === 0) {
+        return {
+            matchType: 0 /* Label */,
+            categoryIndices: null,
+            labelIndices,
+            score,
+            item
+        };
+    }
+    // Handle a pure category match.
+    if (labelIndices.length === 0) {
+        return {
+            matchType: 1 /* Category */,
+            categoryIndices,
+            labelIndices: null,
+            score,
+            item
+        };
+    }
+    // Handle a split match.
+    return {
+        matchType: 2 /* Split */,
+        categoryIndices,
+        labelIndices,
+        score,
+        item
+    };
+}
+/** Perform a fuzzy match on an array of command items. */
+function matchItems(items, query) {
+    // Normalize the query text to lower case with no whitespace.
+    query = normalizeQuery(query);
+    // Create the array to hold the scores.
+    let scores = [];
+    // Iterate over the items and match against the query.
+    let itemList = Object.keys(items);
+    for (let i = 0, n = itemList.length; i < n; ++i) {
+        let item = items[itemList[i]];
+        // If the query is empty, all items are matched by default.
+        if (!query) {
+            scores.push({
+                matchType: 3 /* Default */,
+                categoryIndices: null,
+                labelIndices: null,
+                score: 0,
+                item
+            });
+            continue;
+        }
+        // Run the fuzzy search for the item and query.
+        let score = fuzzySearch(item, query);
+        // Ignore the item if it is not a match.
+        if (!score) {
+            continue;
+        }
+        // Add the score to the results.
+        scores.push(score);
+    }
+    // Return the final array of scores.
+    return scores;
+}
+/** Transform SettingRegistry's shortcut list to list of ShortcutObjects */
+function getShortcutObjects(external, settings) {
+    const shortcuts = settings.composite.shortcuts;
+    let shortcutObjects = {};
+    shortcuts.forEach((shortcut) => {
+        let key = shortcut.command + '_' + shortcut.selector;
+        if (Object.keys(shortcutObjects).indexOf(key) !== -1) {
+            let currentCount = shortcutObjects[key].numberOfShortcuts;
+            shortcutObjects[key].keys[currentCount] = shortcut.keys;
+            shortcutObjects[key].numberOfShortcuts++;
+        }
+        else {
+            let shortcutObject = new ShortcutObject();
+            shortcutObject.commandName = shortcut.command;
+            let label = external.getLabel(shortcut.command);
+            if (!label) {
+                label = shortcut.command.split(':')[1];
+            }
+            shortcutObject.label = label;
+            shortcutObject.category = shortcut.command.split(':')[0];
+            shortcutObject.keys[0] = shortcut.keys;
+            shortcutObject.selector = shortcut.selector;
+            // TODO needs translation
+            shortcutObject.source = 'Default';
+            shortcutObject.id = key;
+            shortcutObject.numberOfShortcuts = 1;
+            shortcutObjects[key] = shortcutObject;
+        }
+    });
+    // find all the shortcuts that have custom settings
+    const userShortcuts = settings.user.shortcuts;
+    userShortcuts.forEach((userSetting) => {
+        const command = userSetting.command;
+        const selector = userSetting.selector;
+        const keyTo = command + '_' + selector;
+        if (shortcutObjects[keyTo]) {
+            // TODO needs translation
+            shortcutObjects[keyTo].source = 'Custom';
+        }
+    });
+    return shortcutObjects;
+}
+/** Get list of all shortcut keybindings currently in use
+ * An object where keys are unique keyBinding_selector and values are shortcut objects **/
+function getKeyBindingsUsed(shortcutObjects) {
+    let keyBindingsUsed = {};
+    Object.keys(shortcutObjects).forEach((shortcut) => {
+        Object.keys(shortcutObjects[shortcut].keys).forEach((key) => {
+            const takenBy = new TakenByObject(shortcutObjects[shortcut]);
+            takenBy.takenByKey = key;
+            keyBindingsUsed[shortcutObjects[shortcut].keys[key].join(' ') +
+                '_' +
+                shortcutObjects[shortcut].selector] = takenBy;
+        });
+    });
+    return keyBindingsUsed;
+}
+/** Top level React component for widget */
+export class ShortcutUI extends React.Component {
+    constructor(props) {
+        super(props);
+        /** Set the current seach query */
+        this.updateSearchQuery = (event) => {
+            this.setState({
+                searchQuery: event.target['value']
+            }, () => this.setState({
+                filteredShortcutList: this.searchFilterShortcuts(this.state.shortcutList)
+            }, () => {
+                this.sortShortcuts();
+            }));
+        };
+        /** Reset all shortcuts to their defaults */
+        this.resetShortcuts = async () => {
+            const settings = await this.props.external.getAllShortCutSettings();
+            for (const key of Object.keys(settings.user)) {
+                await this.props.external.removeShortCut(key);
+            }
+            await this._refreshShortcutList();
+        };
+        /** Set new shortcut for command, refresh state */
+        this.handleUpdate = async (shortcutObject, keys) => {
+            const settings = await this.props.external.getAllShortCutSettings();
+            const userShortcuts = settings.user.shortcuts;
+            const newUserShortcuts = [];
+            let found = false;
+            for (let shortcut of userShortcuts) {
+                if (shortcut['command'] === shortcutObject.commandName &&
+                    shortcut['selector'] === shortcutObject.selector) {
+                    newUserShortcuts.push({
+                        command: shortcut['command'],
+                        selector: shortcut['selector'],
+                        keys: keys
+                    });
+                    found = true;
+                }
+                else {
+                    newUserShortcuts.push(shortcut);
+                }
+            }
+            if (!found) {
+                newUserShortcuts.push({
+                    command: shortcutObject.commandName,
+                    selector: shortcutObject.selector,
+                    keys: keys
+                });
+            }
+            await settings.set('shortcuts', newUserShortcuts);
+            await this._refreshShortcutList();
+        };
+        /** Delete shortcut for command, refresh state */
+        this.deleteShortcut = async (shortcutObject, shortcutId) => {
+            await this.handleUpdate(shortcutObject, ['']);
+            await this._refreshShortcutList();
+        };
+        /** Reset a specific shortcut to its default settings */
+        this.resetShortcut = async (shortcutObject) => {
+            const settings = await this.props.external.getAllShortCutSettings();
+            const userShortcuts = settings.user.shortcuts;
+            const newUserShortcuts = [];
+            for (let shortcut of userShortcuts) {
+                if (shortcut['command'] !== shortcutObject.commandName ||
+                    shortcut['selector'] !== shortcutObject.selector) {
+                    newUserShortcuts.push(shortcut);
+                }
+            }
+            await settings.set('shortcuts', newUserShortcuts);
+            await this._refreshShortcutList();
+        };
+        /** Toggles showing command selectors */
+        this.toggleSelectors = () => {
+            this.setState({ showSelectors: !this.state.showSelectors });
+        };
+        /** Set the current list sort order */
+        this.updateSort = (value) => {
+            if (value !== this.state.currentSort) {
+                this.setState({ currentSort: value }, this.sortShortcuts);
+            }
+        };
+        /** Sort shortcut list so that an error row is right below the one currently being set */
+        this.sortConflict = (newShortcut, takenBy) => {
+            const shortcutList = this.state.filteredShortcutList;
+            if (shortcutList.filter(shortcut => shortcut.id === 'error_row').length === 0) {
+                const errorRow = new ErrorObject();
+                errorRow.takenBy = takenBy;
+                errorRow.id = 'error_row';
+                shortcutList.splice(shortcutList.indexOf(newShortcut) + 1, 0, errorRow);
+                errorRow.hasConflict = true;
+                this.setState({ filteredShortcutList: shortcutList });
+            }
+        };
+        /** Remove conflict flag from all shortcuts */
+        this.clearConflicts = () => {
+            /** Remove error row */
+            const shortcutList = this.state.filteredShortcutList.filter(shortcut => shortcut.id !== 'error_row');
+            shortcutList.forEach((shortcut) => {
+                shortcut.hasConflict = false;
+            });
+            this.setState({ filteredShortcutList: shortcutList });
+        };
+        this.contextMenu = (event, commandIDs) => {
+            event.persist();
+            this.setState({
+                contextMenu: this.props.external.createMenu()
+            }, () => {
+                event.preventDefault();
+                for (let command of commandIDs) {
+                    this.state.contextMenu.addItem({ command });
+                }
+                this.state.contextMenu.open(event.clientX, event.clientY);
+            });
+        };
+        this.state = {
+            shortcutList: {},
+            filteredShortcutList: new Array(),
+            shortcutsFetched: false,
+            searchQuery: '',
+            showSelectors: false,
+            currentSort: 'category',
+            keyBindingsUsed: {},
+            contextMenu: this.props.external.createMenu()
+        };
+    }
+    /** Fetch shortcut list on mount */
+    componentDidMount() {
+        void this._refreshShortcutList();
+    }
+    /** Fetch shortcut list from SettingRegistry  */
+    async _refreshShortcutList() {
+        const shortcuts = await this.props.external.getAllShortCutSettings();
+        const shortcutObjects = getShortcutObjects(this.props.external, shortcuts);
+        this.setState({
+            shortcutList: shortcutObjects,
+            filteredShortcutList: this.searchFilterShortcuts(shortcutObjects),
+            shortcutsFetched: true
+        }, () => {
+            let keyBindingsUsed = getKeyBindingsUsed(shortcutObjects);
+            this.setState({ keyBindingsUsed });
+            this.sortShortcuts();
+        });
+    }
+    /** Filter shortcut list using current search query */
+    searchFilterShortcuts(shortcutObjects) {
+        const filteredShortcuts = matchItems(shortcutObjects, this.state.searchQuery).map((item) => {
+            return item.item;
+        });
+        return filteredShortcuts;
+    }
+    /** Sort shortcut list using current sort property  */
+    sortShortcuts() {
+        const shortcuts = this.state.filteredShortcutList;
+        let filterCritera = this.state.currentSort;
+        if (filterCritera === 'command') {
+            filterCritera = 'label';
+        }
+        if (filterCritera !== '') {
+            shortcuts.sort((a, b) => {
+                const compareA = a.get(filterCritera);
+                const compareB = b.get(filterCritera);
+                if (compareA < compareB) {
+                    return -1;
+                }
+                else if (compareA > compareB) {
+                    return 1;
+                }
+                else {
+                    return a['label'] < b['label'] ? -1 : a['label'] > b['label'] ? 1 : 0;
+                }
+            });
+        }
+        this.setState({ filteredShortcutList: shortcuts });
+    }
+    render() {
+        if (!this.state.shortcutsFetched) {
+            return null;
+        }
+        return (React.createElement("div", { className: ShortcutUIStyle, id: "jp-shortcutui" },
+            React.createElement("div", { className: TopWhitespaceStyle }),
+            React.createElement(TopNav, { updateSearchQuery: this.updateSearchQuery, resetShortcuts: this.resetShortcuts, toggleSelectors: this.toggleSelectors, showSelectors: this.state.showSelectors, updateSort: this.updateSort, currentSort: this.state.currentSort, width: this.props.width, external: this.props.external }),
+            React.createElement(ShortcutList, { shortcuts: this.state.filteredShortcutList, resetShortcut: this.resetShortcut, handleUpdate: this.handleUpdate, deleteShortcut: this.deleteShortcut, showSelectors: this.state.showSelectors, keyBindingsUsed: this.state.keyBindingsUsed, sortConflict: this.sortConflict, clearConflicts: this.clearConflicts, height: this.props.height, errorSize: this.props.width < 775 ? 1 /* Small */ : 0 /* Regular */, contextMenu: this.contextMenu, external: this.props.external })));
+    }
+}
+//# sourceMappingURL=ShortcutUI.js.map

package/lib/components/ShortcutUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutUI.js","sourceRoot":"","sources":["../../src/components/ShortcutUI.tsx"],"names":[],"mappings":"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"}

package/lib/components/TopNav.d.ts

@@ -0,0 +1,52 @@
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { ITranslator } from '@jupyterlab/translation';
+import { CommandRegistry } from '@lumino/commands';
+import { IDisposable } from '@lumino/disposable';
+import { Menu } from '@lumino/widgets';
+import * as React from 'react';
+import { UISize } from './ShortcutUI';
+export interface IAdvancedOptionsProps {
+    size: UISize;
+    toggleSelectors: Function;
+    showSelectors: boolean;
+    resetShortcuts: Function;
+    menu: Menu;
+    translator: ITranslator;
+}
+export interface ISymbolsProps {
+    size: UISize;
+}
+/** All external actions, setting commands, getting command list ... */
+export interface IShortcutUIexternal {
+    translator: ITranslator;
+    getAllShortCutSettings: () => Promise<ISettingRegistry.ISettings>;
+    removeShortCut: (key: string) => Promise<void>;
+    createMenu: () => Menu;
+    hasCommand: (id: string) => boolean;
+    addCommand: (id: string, options: CommandRegistry.ICommandOptions) => IDisposable;
+    getLabel: (id: string) => string;
+}
+export declare namespace CommandIDs {
+    const showSelectors = "shortcutui:showSelectors";
+    const resetAll = "shortcutui:resetAll";
+}
+/** State for TopNav component */
+export interface ITopNavProps {
+    resetShortcuts: Function;
+    updateSearchQuery: Function;
+    toggleSelectors: Function;
+    showSelectors: boolean;
+    updateSort: Function;
+    currentSort: string;
+    width: number;
+    external: IShortcutUIexternal;
+}
+/** React component for top navigation */
+export declare class TopNav extends React.Component<ITopNavProps> {
+    menu: Menu;
+    constructor(props: ITopNavProps);
+    addMenuCommands(): void;
+    getSize: (width: number) => UISize;
+    getShortCutTitleItem(title: string): JSX.Element;
+    render(): JSX.Element;
+}

package/lib/components/TopNav.js

@@ -0,0 +1,143 @@
+import * as React from 'react';
+import { classes } from 'typestyle';
+import { CellStyle } from '../componentStyle/ShortcutItemStyle';
+import { AdvancedOptionsContainerStyle, AdvancedOptionsLinkStyle, AdvancedOptionsSmallStyle, AdvancedOptionsStyle, altIconStyle, commandIconStyle, controlIconStyle, HeaderRowContainerStyle, HeaderRowStyle, SearchContainerStyle, SearchStyle, SymbolsRowStyle, SymbolsSmallStyle, SymbolsStyle, TopNavStyle, TopStyle } from '../componentStyle/TopNavStyle';
+import { ShortcutTitleItem } from './ShortcutTitleItem';
+export var CommandIDs;
+(function (CommandIDs) {
+    CommandIDs.showSelectors = 'shortcutui:showSelectors';
+    CommandIDs.resetAll = 'shortcutui:resetAll';
+})(CommandIDs || (CommandIDs = {}));
+class Symbols extends React.Component {
+    getRegularSymbols() {
+        return (React.createElement("div", { className: SymbolsStyle },
+            React.createElement("div", { className: SymbolsRowStyle },
+                React.createElement("div", null, "Cmd \u2318"),
+                React.createElement("div", null, "Alt \u2325"),
+                React.createElement("div", null, "Ctrl \u2303"),
+                React.createElement("div", null, "Shift \u21E7"))));
+    }
+    getSmallSymbols() {
+        return (React.createElement("div", { className: classes(SymbolsStyle, SymbolsSmallStyle) },
+            React.createElement("div", { className: SymbolsRowStyle },
+                React.createElement("span", null, "Cmd "),
+                React.createElement("span", { className: commandIconStyle }, "\u2318"),
+                React.createElement("span", null, "Alt "),
+                React.createElement("span", { className: altIconStyle }, "\u2325")),
+            React.createElement("div", { className: SymbolsRowStyle },
+                React.createElement("span", null, "Ctrl "),
+                React.createElement("span", { className: controlIconStyle }, "\u2303"),
+                React.createElement("span", null, "Shift "),
+                React.createElement("span", null, "\u21E7"))));
+    }
+    getTinySymbols() {
+        return (React.createElement("div", { className: classes(SymbolsStyle, SymbolsSmallStyle) },
+            React.createElement("div", { className: SymbolsRowStyle },
+                React.createElement("span", null, "Cmd"),
+                React.createElement("span", null, "\u2318")),
+            React.createElement("div", { className: SymbolsRowStyle },
+                React.createElement("span", null, "Alt"),
+                React.createElement("span", null, "\u2325")),
+            React.createElement("div", { className: SymbolsRowStyle },
+                React.createElement("span", null, "Ctrl"),
+                React.createElement("span", null, "\u2303")),
+            React.createElement("div", { className: SymbolsRowStyle },
+                React.createElement("span", null, "Shift"),
+                React.createElement("span", null, "\u21E7"))));
+    }
+    render() {
+        switch (this.props.size) {
+            case 0 /* Regular */:
+                return this.getRegularSymbols();
+            case 1 /* Small */:
+                return this.getSmallSymbols();
+            case 2 /* Tiny */:
+                return this.getTinySymbols();
+        }
+    }
+}
+class AdvancedOptions extends React.Component {
+    render() {
+        const trans = this.props.translator.load('jupyterlab');
+        if (this.props.size === 0 /* Regular */) {
+            return (React.createElement("div", { className: AdvancedOptionsContainerStyle },
+                React.createElement("div", { className: AdvancedOptionsStyle },
+                    React.createElement("a", { className: AdvancedOptionsLinkStyle(this.props.size), onClick: () => this.props.toggleSelectors() }, this.props.showSelectors
+                        ? trans.__('Hide Selectors')
+                        : trans.__('Show Selectors')),
+                    React.createElement("a", { className: classes(AdvancedOptionsLinkStyle(this.props.size)), onClick: () => this.props.resetShortcuts() }, trans.__('Reset All')))));
+        }
+        else {
+            return (React.createElement("div", { className: classes(AdvancedOptionsStyle, AdvancedOptionsSmallStyle) },
+                React.createElement("a", { className: AdvancedOptionsLinkStyle(this.props.size), onClick: () => this.props.toggleSelectors() }, this.props.showSelectors
+                    ? trans.__('Hide Selectors')
+                    : trans.__('Show Selectors')),
+                React.createElement("a", { className: classes(AdvancedOptionsLinkStyle(this.props.size)), onClick: () => this.props.resetShortcuts() }, trans.__('Reset All'))));
+        }
+    }
+}
+/** React component for top navigation */
+export class TopNav extends React.Component {
+    constructor(props) {
+        super(props);
+        this.getSize = (width) => {
+            if (width < 730) {
+                return 2 /* Tiny */;
+            }
+            else if (width < 1260) {
+                return 1 /* Small */;
+            }
+            else {
+                return 0 /* Regular */;
+            }
+        };
+        this.addMenuCommands();
+        this.menu = this.props.external.createMenu();
+        this.menu.addItem({ command: CommandIDs.showSelectors });
+        this.menu.addItem({ command: CommandIDs.resetAll });
+    }
+    addMenuCommands() {
+        const trans = this.props.external.translator.load('jupyterlab');
+        if (!this.props.external.hasCommand(CommandIDs.showSelectors)) {
+            this.props.external.addCommand(CommandIDs.showSelectors, {
+                label: trans.__('Toggle Selectors'),
+                caption: trans.__('Toggle command selectors'),
+                execute: () => {
+                    this.props.toggleSelectors();
+                }
+            });
+        }
+        if (!this.props.external.hasCommand(CommandIDs.resetAll)) {
+            this.props.external.addCommand(CommandIDs.resetAll, {
+                label: trans.__('Reset All'),
+                caption: trans.__('Reset all shortcuts'),
+                execute: () => {
+                    this.props.resetShortcuts();
+                }
+            });
+        }
+    }
+    getShortCutTitleItem(title) {
+        return (React.createElement("div", { className: CellStyle },
+            React.createElement(ShortcutTitleItem, { title: title, updateSort: this.props.updateSort, active: this.props.currentSort })));
+    }
+    render() {
+        const trans = this.props.external.translator.load('jupyterlab');
+        return (React.createElement("div", { className: TopStyle },
+            React.createElement("div", { className: TopNavStyle },
+                React.createElement(Symbols, { size: this.getSize(this.props.width) }),
+                React.createElement("div", { className: SearchContainerStyle },
+                    React.createElement("input", { onChange: event => this.props.updateSearchQuery(event), className: SearchStyle, placeholder: trans.__('Search') })),
+                React.createElement(AdvancedOptions, { size: this.getSize(this.props.width), toggleSelectors: this.props.toggleSelectors, showSelectors: this.props.showSelectors, resetShortcuts: this.props.resetShortcuts, menu: this.menu, translator: this.props.external.translator })),
+            React.createElement("div", { className: HeaderRowContainerStyle },
+                React.createElement("div", { className: HeaderRowStyle },
+                    this.getShortCutTitleItem(trans.__('Category')),
+                    this.getShortCutTitleItem(trans.__('Command')),
+                    React.createElement("div", { className: CellStyle },
+                        React.createElement("div", { className: "title-div" }, trans.__('Shortcut'))),
+                    this.getShortCutTitleItem(trans.__('Source')),
+                    this.props.showSelectors &&
+                        this.getShortCutTitleItem(trans.__('Selectors'))))));
+    }
+}
+//# sourceMappingURL=TopNav.js.map

package/lib/components/TopNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNav.js","sourceRoot":"","sources":["../../src/components/TopNav.tsx"],"names":[],"mappings":"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"}

package/lib/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ShortcutUI';
+export { IShortcutUIexternal } from './TopNav';

package/lib/components/index.js

@@ -0,0 +1,2 @@
+export * from './ShortcutUI';
+//# sourceMappingURL=index.js.map

package/lib/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/lib/index.js

@@ -6,8 +6,24 @@
  */
 import { ISettingRegistry, SettingRegistry } from '@jupyterlab/settingregistry';
 import { ITranslator } from '@jupyterlab/translation';
+import { IFormComponentRegistry } from '@jupyterlab/ui-components';
 import { JSONExt } from '@lumino/coreutils';
 import { DisposableSet } from '@lumino/disposable';
+import { Menu } from '@lumino/widgets';
+import { renderShortCut } from './renderer';
+function getExternalForJupyterLab(settingRegistry, app, translator) {
+    const { commands } = app;
+    const shortcutPluginLocation = '@jupyterlab/shortcuts-extension:shortcuts';
+    return {
+        translator,
+        getAllShortCutSettings: () => settingRegistry.reload(shortcutPluginLocation),
+        removeShortCut: (key) => settingRegistry.remove(shortcutPluginLocation, key),
+        createMenu: () => new Menu({ commands }),
+        hasCommand: (id) => commands.hasCommand(id),
+        addCommand: (id, options) => commands.addCommand(id, options),
+        getLabel: (id) => commands.label(id)
+    };
+}
 /**
  * The default shortcuts extension.
  *
@@ -40,11 +56,17 @@ import { DisposableSet } from '@lumino/disposable';
 const shortcuts = {
     id: '@jupyterlab/shortcuts-extension:shortcuts',
     requires: [ISettingRegistry, ITranslator],
-    activate: async (app, registry, translator) => {
+    optional: [IFormComponentRegistry],
+    activate: async (app, registry, translator, editorRegistry) => {
         const trans = translator.load('jupyterlab');
         const { commands } = app;
         let canonical;
         let loaded = {};
+        if (editorRegistry) {
+            editorRegistry.addRenderer('shortcuts', (props) => {
+                return renderShortCut(Object.assign({ external: getExternalForJupyterLab(registry, app, translator) }, props));
+            });
+        }
         /**
          * Populate the plugin's schema defaults.
          */