npm - @jupyterlab/shortcuts-extension - Versions diffs - 4.0.0-alpha.2 → 4.0.0-alpha.21 - Mend

@jupyterlab/shortcuts-extension 4.0.0-alpha.2 → 4.0.0-alpha.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/lib/components/ShortcutInput.d.ts +78 -0
package/lib/components/ShortcutInput.js +348 -0
package/lib/components/ShortcutInput.js.map +1 -0
package/lib/components/ShortcutItem.d.ts +62 -0
package/lib/components/ShortcutItem.js +282 -0
package/lib/components/ShortcutItem.js.map +1 -0
package/lib/components/ShortcutList.d.ts +23 -0
package/lib/components/ShortcutList.js +19 -0
package/lib/components/ShortcutList.js.map +1 -0
package/lib/components/ShortcutTitleItem.d.ts +9 -0
package/lib/components/ShortcutTitleItem.js +16 -0
package/lib/components/ShortcutTitleItem.js.map +1 -0
package/lib/components/ShortcutUI.d.ts +56 -0
package/lib/components/ShortcutUI.js +363 -0
package/lib/components/ShortcutUI.js.map +1 -0
package/lib/components/TopNav.d.ts +48 -0
package/lib/components/TopNav.js +92 -0
package/lib/components/TopNav.js.map +1 -0
package/lib/components/index.d.ts +2 -0
package/lib/components/index.js +6 -0
package/lib/components/index.js.map +1 -0
package/lib/index.js +48 -5
package/lib/index.js.map +1 -1
package/lib/renderer.d.ts +4 -0
package/lib/renderer.js +10 -0
package/lib/renderer.js.map +1 -0
package/package.json +34 -15
package/src/components/ShortcutInput.tsx +501 -0
package/src/components/ShortcutItem.tsx +491 -0
package/src/components/ShortcutList.tsx +61 -0
package/src/components/ShortcutTitleItem.tsx +33 -0
package/src/components/ShortcutUI.tsx +512 -0
package/src/components/TopNav.tsx +193 -0
package/src/components/index.ts +7 -0
package/src/index.ts +297 -0
package/src/renderer.tsx +13 -0
package/style/base.css +393 -0
package/style/index.css +10 -0
package/style/index.js +10 -0

package/src/index.ts ADDED Viewed

@@ -0,0 +1,297 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+/**
+ * @packageDocumentation
+ * @module shortcuts-extension
+ */
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+import { ISettingRegistry, SettingRegistry } from '@jupyterlab/settingregistry';
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+import {
+  IFormRenderer,
+  IFormRendererRegistry
+} from '@jupyterlab/ui-components';
+import { CommandRegistry } from '@lumino/commands';
+import {
+  JSONExt,
+  ReadonlyPartialJSONObject,
+  ReadonlyPartialJSONValue
+} from '@lumino/coreutils';
+import { DisposableSet, IDisposable } from '@lumino/disposable';
+import { Platform } from '@lumino/domutils';
+import { Menu } from '@lumino/widgets';
+import { IShortcutUIexternal } from './components';
+import { renderShortCut } from './renderer';
+function getExternalForJupyterLab(
+  settingRegistry: ISettingRegistry,
+  app: JupyterFrontEnd,
+  translator: ITranslator
+): IShortcutUIexternal {
+  const { commands } = app;
+  const shortcutPluginLocation = '@jupyterlab/shortcuts-extension:shortcuts';
+  return {
+    translator,
+    getAllShortCutSettings: () =>
+      settingRegistry.reload(shortcutPluginLocation),
+    removeShortCut: (key: string) =>
+      settingRegistry.remove(shortcutPluginLocation, key),
+    createMenu: () => new Menu({ commands }),
+    hasCommand: (id: string) => commands.hasCommand(id),
+    addCommand: (id: string, options: CommandRegistry.ICommandOptions) =>
+      commands.addCommand(id, options),
+    getLabel: (id: string) => commands.label(id)
+  };
+}
+/**
+ * The default shortcuts extension.
+ *
+ * #### Notes
+ * Shortcut values are stored in the setting system. The default values for each
+ * shortcut are preset in the settings schema file of this extension.
+ * Additionally, each shortcut can be individually set by the end user by
+ * modifying its setting (either in the text editor or by modifying its
+ * underlying JSON schema file).
+ *
+ * When setting shortcut selectors, there are two concepts to consider:
+ * specificity and matchability. These two interact in sometimes
+ * counterintuitive ways. Keyboard events are triggered from an element and
+ * they propagate up the DOM until they reach the `documentElement` (`<body>`).
+ *
+ * When a registered shortcut sequence is fired, the shortcut manager checks
+ * the node that fired the event and each of its ancestors until a node matches
+ * one or more registered selectors. The *first* matching selector in the
+ * chain of ancestors will invoke the shortcut handler and the traversal will
+ * end at that point. If a node matches more than one selector, the handler for
+ * whichever selector is more *specific* fires.
+ * @see https://www.w3.org/TR/css3-selectors/#specificity
+ *
+ * The practical consequence of this is that a very broadly matching selector,
+ * e.g. `'*'` or `'div'` may match and therefore invoke a handler *before* a
+ * more specific selector. The most common pitfall is to use the universal
+ * (`'*'`) selector. For almost any use case where a global keyboard shortcut is
+ * required, using the `'body'` selector is more appropriate.
+ */
+const shortcuts: JupyterFrontEndPlugin<void> = {
+  id: '@jupyterlab/shortcuts-extension:shortcuts',
+  requires: [ISettingRegistry],
+  optional: [ITranslator, IFormRendererRegistry],
+  activate: async (
+    app: JupyterFrontEnd,
+    registry: ISettingRegistry,
+    translator: ITranslator | null,
+    editorRegistry: IFormRendererRegistry | null
+  ) => {
+    const translator_ = translator ?? nullTranslator;
+    const trans = translator_.load('jupyterlab');
+    const { commands } = app;
+    let canonical: ISettingRegistry.ISchema | null;
+    let loaded: { [name: string]: ISettingRegistry.IShortcut[] } = {};
+    if (editorRegistry) {
+      const component: IFormRenderer = {
+        fieldRenderer: (props: any) => {
+          return renderShortCut({
+            external: getExternalForJupyterLab(registry, app, translator_),
+            ...props
+          });
+        }
+      };
+      editorRegistry.addRenderer(`${shortcuts.id}.shortcuts`, component);
+    }
+    /**
+     * Populate the plugin's schema defaults.
+     */
+    function populate(schema: ISettingRegistry.ISchema) {
+      const commands = app.commands.listCommands().join('\n');
+      loaded = {};
+      schema.properties!.shortcuts.default = Object.keys(registry.plugins)
+        .map(plugin => {
+          const shortcuts =
+            registry.plugins[plugin]!.schema['jupyter.lab.shortcuts'] || [];
+          loaded[plugin] = shortcuts;
+          return shortcuts;
+        })
+        .concat([schema.properties!.shortcuts.default as any[]])
+        .reduce((acc, val) => {
+          if (Platform.IS_MAC) {
+            return acc.concat(val);
+          } else {
+            // If platform is not MacOS, remove all shortcuts containing Cmd
+            // as they will be modified; e.g. `Cmd A` becomes `A`
+            return acc.concat(
+              val.filter(
+                shortcut =>
+                  !shortcut.keys.some(key => {
+                    const { cmd } = CommandRegistry.parseKeystroke(key);
+                    return cmd;
+                  })
+              )
+            );
+          }
+        }, []) // flatten one level
+        .sort((a, b) => a.command.localeCompare(b.command));
+      schema.properties!.shortcuts.description = trans.__(
+        `Note: To disable a system default shortcut,
+copy it to User Preferences and add the
+"disabled" key, for example:
+{
+    "command": "application:activate-next-tab",
+    "keys": [
+        "Ctrl Shift ]"
+    ],
+    "selector": "body",
+    "disabled": true
+}
+List of commands followed by keyboard shortcuts:
+%1
+List of keyboard shortcuts:`,
+        commands
+      );
+    }
+    registry.pluginChanged.connect(async (sender, plugin) => {
+      if (plugin !== shortcuts.id) {
+        // If the plugin changed its shortcuts, reload everything.
+        const oldShortcuts = loaded[plugin];
+        const newShortcuts =
+          registry.plugins[plugin]!.schema['jupyter.lab.shortcuts'] || [];
+        if (
+          oldShortcuts === undefined ||
+          !JSONExt.deepEqual(oldShortcuts, newShortcuts)
+        ) {
+          canonical = null;
+          await registry.reload(shortcuts.id);
+        }
+      }
+    });
+    // Transform the plugin object to return different schema than the default.
+    registry.transform(shortcuts.id, {
+      compose: plugin => {
+        // Only override the canonical schema the first time.
+        if (!canonical) {
+          canonical = JSONExt.deepCopy(plugin.schema);
+          populate(canonical);
+        }
+        const defaults = canonical.properties?.shortcuts?.default ?? [];
+        const user = {
+          shortcuts: plugin.data.user.shortcuts ?? []
+        };
+        const composite = {
+          shortcuts: SettingRegistry.reconcileShortcuts(
+            defaults as ISettingRegistry.IShortcut[],
+            user.shortcuts as ISettingRegistry.IShortcut[]
+          )
+        };
+        plugin.data = { composite, user };
+        return plugin;
+      },
+      fetch: plugin => {
+        // Only override the canonical schema the first time.
+        if (!canonical) {
+          canonical = JSONExt.deepCopy(plugin.schema);
+          populate(canonical);
+        }
+        return {
+          data: plugin.data,
+          id: plugin.id,
+          raw: plugin.raw,
+          schema: canonical,
+          version: plugin.version
+        };
+      }
+    });
+    try {
+      // Repopulate the canonical variable after the setting registry has
+      // preloaded all initial plugins.
+      canonical = null;
+      const settings = await registry.load(shortcuts.id);
+      Private.loadShortcuts(commands, settings.composite);
+      settings.changed.connect(() => {
+        Private.loadShortcuts(commands, settings.composite);
+      });
+    } catch (error) {
+      console.error(`Loading ${shortcuts.id} failed.`, error);
+    }
+  },
+  autoStart: true
+};
+/**
+ * Export the shortcut plugin as default.
+ */
+export default shortcuts;
+/**
+ * A namespace for private module data.
+ */
+namespace Private {
+  /**
+   * The internal collection of currently loaded shortcuts.
+   */
+  let disposables: IDisposable;
+  /**
+   * Load the keyboard shortcuts from settings.
+   */
+  export function loadShortcuts(
+    commands: CommandRegistry,
+    composite: ReadonlyPartialJSONObject | undefined
+  ): void {
+    const shortcuts = (composite?.shortcuts ??
+      []) as ISettingRegistry.IShortcut[];
+    if (disposables) {
+      disposables.dispose();
+    }
+    disposables = shortcuts.reduce((acc, val): DisposableSet => {
+      const options = normalizeOptions(val);
+      if (options) {
+        acc.add(commands.addKeyBinding(options));
+      }
+      return acc;
+    }, new DisposableSet());
+  }
+  /**
+   * Normalize potential keyboard shortcut options.
+   */
+  function normalizeOptions(
+    value:
+      | ReadonlyPartialJSONValue
+      | Partial<CommandRegistry.IKeyBindingOptions>
+  ): CommandRegistry.IKeyBindingOptions | undefined {
+    if (!value || typeof value !== 'object') {
+      return undefined;
+    }
+    const { isArray } = Array;
+    const valid =
+      'command' in value &&
+      'keys' in value &&
+      'selector' in value &&
+      isArray((value as Partial<CommandRegistry.IKeyBindingOptions>).keys);
+    return valid ? (value as CommandRegistry.IKeyBindingOptions) : undefined;
+  }
+}

package/src/renderer.tsx ADDED Viewed

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React from 'react';
+import { IShortcutUIexternal, ShortcutUI } from './components';
+export const renderShortCut = (props: {
+  external: IShortcutUIexternal;
+}): JSX.Element => {
+  return <ShortcutUI external={props.external} height={1000} width={1000} />;
+};

package/style/base.css ADDED Viewed

@@ -0,0 +1,393 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+/* Shortcut Input Style */
+.jp-Shortcuts-InputBox {
+  display: inline-flex;
+  padding-top: 2px;
+}
+.jp-Shortcuts-InputBoxNew {
+  margin-left: 10px;
+}
+.jp-mod-hidden {
+  display: hidden;
+}
+@keyframes slide-animation {
+  from {
+    width: 0;
+    left: 0;
+  }
+  to {
+    width: 120px;
+    left: 0;
+  }
+}
+.jp-Shortcuts-Input {
+  animation-duration: 0.5 s;
+  animation-timing-function: ease-out;
+  animation-name: 'slide-animation';
+  border-width: var(--jp-border-width);
+  border-color: var(--jp-border-color3);
+  border-style: solid;
+  background-color: var(--jp-layout-color0);
+  margin-left: auto;
+  padding-left: 10px;
+  width: 120px;
+  height: 25px;
+  line-height: 25px;
+  display: block;
+}
+.jp-Shortcuts-Input:focus {
+  outline: none;
+  color: var(--jp-content-font-color1);
+  border-color: var(--jp-brand-color2);
+}
+.jp-mod-unavailable-Input:focus {
+  border-color: var(--jp-error-color2);
+}
+.jp-Shortcuts-InputText {
+  overflow-x: hidden;
+  overflow-y: hidden;
+  margin: 0;
+  margin-top: 4px;
+  padding: 0 5px;
+  height: 17px;
+  line-height: 17px;
+  width: fit-content;
+}
+.jp-mod-selected-InputText {
+  background-color: var(--jp-brand-color3);
+  overflow: hidden;
+}
+.jp-mod-waiting-InputText {
+  color: var(--jp-content-font-color3);
+}
+.jp-Shortcuts-Submit {
+  background-color: var(--jp-brand-color2);
+  border-radius: 0;
+  border: none;
+  color: var(--jp-layout-color0);
+  font-family: var(--jp-ui-font-family);
+  display: block;
+  height: 27px;
+  width: 26px;
+  cursor: pointer;
+}
+.jp-Shortcuts-Submit:focus {
+  outline: none;
+}
+.jp-Shortcuts-Submit .jp-icon3[fill] {
+  fill: var(--jp-layout-color1);
+}
+.jp-Shortcuts-Submit.jp-mod-defunc-Submit {
+  background-color: var(--jp-layout-color3);
+}
+.jp-Shortcuts-Submit.jp-mod-defunc-Submit .jp-icon3[fill] {
+  fill: var(--jp-inverse-layout-color1);
+}
+.jp-Shortcuts-Submit.jp-mod-conflict-Submit {
+  background-color: var(--jp-error-color1);
+}
+/* Shortcut Item Style */
+.jp-Shortcuts-Cell {
+  padding: 6px 12px;
+  display: table-cell;
+  width: 20%;
+  vertical-align: middle;
+}
+.jp-Shortcuts-ShortcutCell {
+  display: flex;
+  min-width: 100px;
+  flex-wrap: wrap;
+}
+.jp-Shortcuts-EmptyCell {
+  height: 32px;
+}
+.jp-Shortcuts-Row {
+  padding: 10px;
+  width: 100%;
+  display: table-row;
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
+  vertical-align: middle;
+  background-color: var(--jp-layout-color0);
+}
+.jp-Shortcuts-Row:hover .jp-Shortcuts-ShortcutKeys {
+  border-color: var(--jp-border-color1);
+  background: var(--jp-layout-color2);
+}
+.jp-Shortcuts-Row:hover #add-link,
+.jp-Shortcuts-Row:hover #or {
+  display: block;
+}
+.jp-Shortcuts-ErrorMessage {
+  color: var(--jp-error-color1);
+  margin-top: 9px;
+}
+.jp-Shortcuts-ErrorButton {
+  line-height: 34px;
+  margin-left: 10px;
+}
+.jp-Shortcuts-ErrorButton button:nth-of-type(1) {
+  height: 25px;
+  margin-right: 5px;
+  background-color: var(--jp-border-color0);
+  color: white;
+  outline: none;
+}
+.jp-Shortcuts-ErrorButton button:nth-of-type(1):active,
+.jp-Shortcuts-ErrorButton button:nth-of-type(1):focus {
+  outline: none;
+  border: none;
+}
+.jp-Shortcuts-ErrorButton button:nth-of-type(2) {
+  height: 25px;
+  background-color: var(--jp-error-color1);
+  color: white;
+  outline: none;
+}
+.jp-Shortcuts-ErrorButton button:nth-of-type(2):active,
+.jp-Shortcuts-ErrorButton button:nth-of-type(2):focus {
+  outline: none;
+  border: none;
+}
+.jp-Shortcuts-ShortcutContainer {
+  display: flex;
+  flex-wrap: wrap;
+}
+.jp-Shortcuts-ShortcutContainer:hover .jp-Shortcuts-ShortcutKeys {
+  border-color: var(--jp-border-color3);
+  background: var(--jp-layout-color3);
+}
+.jp-Shortcuts-ShortcutKeysContainer {
+  font-size: var(--jp-code-font-size);
+  font-family: var(--jp-ui-font-family);
+  display: flex;
+}
+.jp-Shortcuts-ConflictContainer {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 6px 12px;
+  margin-left: 20%;
+}
+.jp-Shortcuts-ShortcutKeys {
+  border-width: var(--jp-border-width);
+  border-color: var(--jp-layout-color0);
+  border-radius: var(--jp-border-radius);
+  padding: 5px 6px;
+  margin: 3px 0;
+}
+.jp-Shortcuts-Or {
+  margin-right: 12px;
+  margin-left: 12px;
+  margin-top: 8px;
+  color: var(--jp-content-font-color3);
+  display: none;
+}
+.jp-Shortcuts-Or:hover {
+  display: block;
+}
+.jp-Shortcuts-OrTwo {
+  margin-right: 12px;
+  margin-left: 12px;
+  margin-top: 8px;
+  color: var(--jp-content-font-color3);
+  display: block;
+}
+.jp-Shortcuts-Comma {
+  margin-top: 10px;
+  margin-right: 2px;
+  margin-left: 2px;
+}
+.jp-Shortcuts-Plus {
+  display: none;
+  background: var(--jp-brand-color3);
+  border-color: var(--jp-layout-color0);
+  border-radius: var(--jp-border-radius);
+  border-width: var(--jp-border-width);
+  margin: 3px 0;
+  padding: 5px 6px;
+}
+.jp-Shortcuts-Plus:hover {
+  background-color: var(--jp-brand-color2);
+}
+.jp-Shortcuts-Plus:active {
+  background-color: var(--jp-brand-color2);
+}
+.jp-Shortcuts-Reset {
+  color: var(--jp-brand-color2);
+  padding-left: 10px;
+}
+.jp-Shortcuts-Reset:hover {
+  color: var(--jp-brand-color1);
+}
+.jp-Shortcuts-SourceCell {
+  display: inline-block;
+}
+/* Shortcut List Style */
+.jp-Shortcuts-ShortcutList {
+  width: 100%;
+  display: table;
+  border-collapse: collapse;
+}
+.jp-Shortcuts-ShortcutListContainer {
+  overflow-y: scroll;
+  border: var(--jp-border-width) solid var(--jp-border-color1);
+}
+/* Shortcut Title Item Style */
+.jp-Shortcuts-Header {
+  display: flex;
+  cursor: pointer;
+}
+.jp-Shortcuts-Header:hover .jp-ShortcutTitleItem-sortButton .jp-icon3[fill],
+.jp-Shortcuts-Header:focus .jp-ShortcutTitleItem-sortButton .jp-icon3[fill] {
+  fill: var(--jp-ui-font-color0);
+}
+.jp-Shortcuts-Header:active .jp-ShortcutTitleItem-sortButton {
+  outline: none;
+}
+.jp-Shortcuts-CurrentHeader .jp-icon3[fill] {
+  fill: var(--jp-ui-font-color0);
+}
+/* Shortcut UI Style */
+.jp-Shortcuts-ShortcutUI {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--jp-ui-font-size1);
+  font-family: var(--jp-ui-font-family);
+  color: var(--jp-content-font-color1);
+  min-width: 450px;
+  width: 100%;
+}
+/* TopNav Style */
+.jp-Shortcuts-Top {
+  display: block;
+}
+.jp-Shortcuts-TopNav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  font-size: var(--jp-ui-font-size1);
+  background-color: var(--jp-layout-color0);
+}
+.jp-Shortcuts-Symbols {
+  padding: 0 12px;
+}
+.jp-Shortcuts-Symbols td:nth-child(2) {
+  padding-right: 10px;
+}
+.jp-Shortcuts-Search {
+  height: 30px;
+}
+.jp-Shortcuts-Search > input {
+  box-shadow: none;
+}
+.jp-Shortcuts-AdvancedOptionsSmall {
+  width: 30%;
+}
+.jp-Shortcuts-AdvancedOptionsRight {
+  margin-top: 8px;
+}
+.jp-Shortcuts-AdvancedOptionsLink {
+  color: var(--jp-content-link-color);
+  text-decoration: none;
+  margin-right: 15px;
+}
+.jp-Shortcuts-AdvancedOptionsLink:hover {
+  color: var(--jp-brand-color0);
+}
+.jp-Shortcuts-AdvancedOptionsLink:active {
+  color: var(--jp-brand-color0);
+}
+.jp-Shortcuts-HeaderRowContainer {
+  padding-right: 14px;
+}
+.jp-Shortcuts-HeaderRow {
+  font-weight: bold;
+  font-size: var(--jp-ui-font-size1);
+  background-color: var(--jp-layout-color0);
+  width: 100%;
+  z-index: 1;
+  display: table;
+  padding: 10px 0;
+}
+.jp-Shortcuts-commandIcon {
+  margin-right: 13px;
+}
+.jp-Shortcuts-altIcon {
+  margin-right: 14px;
+}
+.jp-Shortcuts-controlIcon {
+  margin-left: 8px;
+  margin-right: 16px;
+}

package/style/index.css ADDED Viewed

@@ -0,0 +1,10 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+@import url('~@lumino/widgets/style/index.css');
+@import url('~@jupyterlab/ui-components/style/index.css');
+@import url('./base.css');

package/style/index.js ADDED Viewed

@@ -0,0 +1,10 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+import '@lumino/widgets/style/index.js';
+import '@jupyterlab/ui-components/style/index.js';
+import './base.css';