Update the examples to use the new menu definitions from settings

Author: fcollonval

README.md

@@ -66,7 +66,7 @@ jlpm run build
 jupyter lab
 ```
 
-The examples currently target **JupyterLab 3.x**.
+The examples currently target **JupyterLab 3.1 or later**.
 
 If you would like to use the examples with JupyterLab 2.x, check out the [2.x branch](https://github.com/jupyterlab/extension-examples/tree/2.x).
 

command-palette/package.json

@@ -18,8 +18,7 @@
   },
   "files": [
     "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
-    "style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
-    "style/index.js"
+    "style/**/*.{css,eot,js,gif,html,jpg,json,png,svg,woff2,ttf}"
   ],
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

commands/package.json

@@ -18,8 +18,7 @@
   },
   "files": [
     "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
-    "style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
-    "style/index.js"
+    "style/**/*.{css,eot,js,gif,html,jpg,json,png,svg,woff2,ttf}"
   ],
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

completer/README.md

@@ -124,7 +124,7 @@ fetch(
 [_JupyterLab_'s completer-extension](https://github.com/jupyterlab/jupyterlab/tree/master/packages/completer-extension) includes a notebooks plugin that registers notebooks for code completion. Your extension will override the notebooks plugin's behavior, so you can [disable notebooks](https://jupyterlab.readthedocs.io/en/stable/extension/extension_dev.html#disabling-other-extensions) in your `.package.json`:
 
 ```json5
-// package.json#L83-L90
+// package.json#L81-L88
 
 "jupyterlab": {
   "extension": true,

completer/package.json

@@ -18,8 +18,7 @@
   },
   "files": [
     "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
-    "style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
-    "style/index.js"
+    "style/**/*.{css,eot,js,gif,html,jpg,json,png,svg,woff2,ttf}"
   ],
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -52,7 +51,6 @@
     "@jupyterlab/codeeditor": "^3.1.0",
     "@jupyterlab/completer": "^3.1.0",
     "@jupyterlab/launcher": "^3.1.0",
-    "@jupyterlab/mainmenu": "^3.1.0",
     "@jupyterlab/notebook": "^3.1.0",
     "@jupyterlab/outputarea": "^3.1.0",
     "@jupyterlab/statedb": "^3.1.0",

context-menu/README.md

@@ -6,7 +6,7 @@ This is a basic example to show how to add a new entry to an existent context me
 
 ![context menu example](preview.gif)
 
-In JupyterLab plugins can expose context menus to offer an easy way to execute commands and perform actions. In this example, you will learn how to add a new entry to the file browser context menu, and at the same time how to register a new file type.
+In JupyterLab plugins can expose context menus to offer an easy way to execute commands and perform actions. In this example, you will learn how to add a new entry to the file browser context menu to be displayed on files with extension `.example`.
 
 > It is strongly recommended to read [commands](https://github.com/jupyterlab/extension-examples/tree/master/commands) example before diving into this one.
 
@@ -18,50 +18,23 @@ First of all, you will start looking into the declaration of the extension:
 
 <!-- prettier-ignore-start -->
 ```ts
-// src/index.ts#L9-L14
+// src/index.ts#L9-L13
 
 const extension: JupyterFrontEndPlugin<void> = {
   id: 'context-menu',
   autoStart: true,
   requires: [IFileBrowserFactory],
-  optional: [],
   activate: (app: JupyterFrontEnd, factory: IFileBrowserFactory) => {
 ```
 <!-- prettier-ignore-end -->
 
 For this extension, you need to require `IFileBrowserFactory` to track the file browser item clicked by the user.
 
-The example shows you how to create a new file type and add the entry to the context menu only to this file type. The first step is optional, you can also add your button to an existing file type (or all of them!).
-
-To register a new file type, you need to call the `addFileType()` method of `docRegistry` property present in the `JupyterFrontEnd` object. This method requires an `IFileType` object with some properties to define your file type. The most important are:
-
-- `name`: the new file type.
-- `extension`: the list of extensions.
-- `fileFormat`: the file content format (_base64_, _json_ or _text_).
-- `contentType`: the file type (_directory_, _notebook_ or _file_).
-- `mimeType`: the content mime type.
+The first step is to define the command that will be executed when clicking on the context menu entry. If you want to access the item information, you need to use the `IFileBrowserFactory` object to obtain the file browser selected item.
 
 <!-- prettier-ignore-start -->
 ```ts
-// src/index.ts#L15-L23
-
-app.docRegistry.addFileType({
-  name: 'example',
-  icon: runIcon,
-  displayName: 'Example File',
-  extensions: ['.example'],
-  fileFormat: 'text',
-  contentType: 'file',
-  mimeTypes: ['text/plain'],
-});
-```
-<!-- prettier-ignore-end -->
-
-The next step is to define the command that will be executed when clicking on the context menu entry. If you want to access the item information, you need to use the `IFileBrowserFactory` object to obtain the file browser selected item.
-
-<!-- prettier-ignore-start -->
-```ts
-// src/index.ts#L25-L38
+// src/index.ts#L14-L27
 
 app.commands.addCommand('jlab-examples/context-menu:open', {
   label: 'Example',
@@ -80,24 +53,32 @@ app.commands.addCommand('jlab-examples/context-menu:open', {
 ```
 <!-- prettier-ignore-end -->
 
-Finally, you can add the command to a context menu using the `addItem()` method present in the `contextMenu` property. This method requires an `IItemOptions` object with the following properties:
+Then, you can add the command to a context menu using the settings file.
+You will need to define a context menu item under the property `context` of the special key
+`jupyter.lab.menus`. And the properties of the context menu item are:
 
 - `command`: the command to execute.
-- `selector`: the CSS classes of the element where you want to add the entry.
-- `rank`: the position in the context menu
+- `selector`: the CSS classes of the element on which you want to add the entry.
+- `rank`: (optional) number to order the context menu entries
 
 <!-- prettier-ignore-start -->
-```ts
-// src/index.ts#L40-L44
-
-app.contextMenu.addItem({
-  command: 'jlab-examples/context-menu:open',
-  selector: '.jp-DirListing-item[data-file-type="example"]',
-  rank: 0,
-});
+```json5
+// schema/plugin.json#L4-L12
+
+"jupyter.lab.menus": {
+  "context": [
+    {
+      "command": "jlab-examples/context-menu:open",
+      "selector": ".jp-DirListing-item[data-file-type=\"example\"]",
+      "rank": 0
+    }
+  ]
+},
 ```
 <!-- prettier-ignore-end -->
 
-The `selector` can be any valid [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). In this case, the first part is the CSS class that identifies the file browser items `.jp-DirListing-item` and the second part `[data-file-type="example"]` is a attribute value to be found on the item. You can omit the second part to add the button to every file type.
+The `selector` can be any valid [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). In this case, the first part is the CSS class that identifies the file browser items `.jp-DirListing-item` and the second part `[data-file-type="example"]` is a attribute value to be found on the item; the `data-file-type` attribute is set with the file extension. You can omit the second part to add the command to every file type.
 
 You can find some of the CSS classes that identify different widgets in JupyterLab in the [developer documentation](https://jupyterlab.readthedocs.io/en/stable/developer/css.html#commonly-used-css-selectors).
+
+> See also the [documentation](https://jupyterlab.readthedocs.io/en/stable/extension/extension_points.html#context-menu).

context-menu/package.json

@@ -18,8 +18,8 @@
   },
   "files": [
     "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
-    "style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
-    "style/index.js"
+    "style/**/*.{css,eot,js,gif,html,jpg,json,png,svg,woff2,ttf}",
+    "schema/**/*.json"
   ],
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -73,7 +73,8 @@
   ],
   "jupyterlab": {
     "extension": true,
-    "outputDir": "jupyterlab_examples_context_menu/labextension"
+    "outputDir": "jupyterlab_examples_context_menu/labextension",
+    "schemaDir": "schema"
   },
   "styleModule": "style/index.js"
 }

context-menu/schema/plugin.json

@@ -0,0 +1,15 @@
+{
+  "title": "Context Menu Example",
+  "description": "Context Menu Example settings.",
+  "jupyter.lab.menus": {
+    "context": [
+      {
+        "command": "jlab-examples/context-menu:open",
+        "selector": ".jp-DirListing-item[data-file-type=\"example\"]",
+        "rank": 0
+      }
+    ]
+  },
+  "additionalProperties": false,
+  "type": "object"
+}

context-menu/src/index.ts

@@ -4,24 +4,13 @@ import {
 } from '@jupyterlab/application';
 import { IFileBrowserFactory } from '@jupyterlab/filebrowser';
 import { showDialog, Dialog } from '@jupyterlab/apputils';
-import { buildIcon, runIcon } from '@jupyterlab/ui-components';
+import { buildIcon } from '@jupyterlab/ui-components';
 
 const extension: JupyterFrontEndPlugin<void> = {
   id: 'context-menu',
   autoStart: true,
   requires: [IFileBrowserFactory],
-  optional: [],
   activate: (app: JupyterFrontEnd, factory: IFileBrowserFactory) => {
-    app.docRegistry.addFileType({
-      name: 'example',
-      icon: runIcon,
-      displayName: 'Example File',
-      extensions: ['.example'],
-      fileFormat: 'text',
-      contentType: 'file',
-      mimeTypes: ['text/plain'],
-    });
-
     app.commands.addCommand('jlab-examples/context-menu:open', {
       label: 'Example',
       caption: "Example context menu button for file browser's items.",
@@ -36,12 +25,6 @@ const extension: JupyterFrontEndPlugin<void> = {
         }).catch((e) => console.log(e));
       },
     });
-
-    app.contextMenu.addItem({
-      command: 'jlab-examples/context-menu:open',
-      selector: '.jp-DirListing-item[data-file-type="example"]',
-      rank: 0,
-    });
   },
 };
 

custom-log-console/README.md

@@ -25,18 +25,16 @@ First of all, you will start by looking into the declaration of the extension:
 
 <!-- prettier-ignore-start -->
 ```ts
-// src/index.ts#L28-L39
+// src/index.ts#L26-L35
 
 const extension: JupyterFrontEndPlugin<void> = {
   id: 'custom-log-console',
   autoStart: true,
-  requires: [ICommandPalette, IRenderMimeRegistry, IMainMenu, ILayoutRestorer],
-  optional: [],
+  requires: [ICommandPalette, IRenderMimeRegistry, ILayoutRestorer],
   activate: (
     app: JupyterFrontEnd,
     palette: ICommandPalette,
     rendermime: IRenderMimeRegistry,
-    mainMenu: IMainMenu,
     restorer: ILayoutRestorer
   ) => {
 ```
@@ -48,7 +46,7 @@ In the `activate` function, the first step is to declare `logConsolePanel` and `
 
 <!-- prettier-ignore-start -->
 ```ts
-// src/index.ts#L42-L43
+// src/index.ts#L38-L39
 
 let logConsolePanel: LogConsolePanel = null;
 let logConsoleWidget: MainAreaWidget<LogConsolePanel> = null;
@@ -59,7 +57,7 @@ The next step is to create a new widget when clicking on the button to open the
 
 <!-- prettier-ignore-start -->
 ```ts
-// src/index.ts#L76-L76
+// src/index.ts#L72-L72
 
 const createLogConsoleWidget = (): void => {
 ```
@@ -69,7 +67,7 @@ To initialize a new `LogConsoleWidget` you have to create a `LogConsolePanel` to
 
 <!-- prettier-ignore-start -->
 ```ts
-// src/index.ts#L77-L82
+// src/index.ts#L73-L78
 
 logConsolePanel = new LogConsolePanel(
   new LoggerRegistry({
@@ -84,7 +82,7 @@ The `source` property identifies where the message comes from and is necessary t
 
 <!-- prettier-ignore-start -->
 ```ts
-// src/index.ts#L84-L84
+// src/index.ts#L80-L80
 
 logConsolePanel.source = 'custom-log-console';
 ```
@@ -94,7 +92,7 @@ Now you are ready to initialize a new `MainAreaWidget` passing the `logConsolePa
 
 <!-- prettier-ignore-start -->
 ```ts
-// src/index.ts#L86-L88
+// src/index.ts#L82-L84
 
 logConsoleWidget = new MainAreaWidget<LogConsolePanel>({
   content: logConsolePanel,
@@ -106,7 +104,7 @@ The last step of the function `createLogConsoleWidget` is to establish how to pr
 
 <!-- prettier-ignore-start -->
 ```ts
-// src/index.ts#L112-L116
+// src/index.ts#L108-L112
 
 logConsoleWidget.disposed.connect(() => {
   logConsoleWidget = null;
@@ -121,7 +119,7 @@ To launch a new log console, you can add a new command. In this case, you can us
 <!-- prettier-ignore-start -->
 
 ```ts
-// src/index.ts#L125-L136
+// src/index.ts#L121-L132
 
 commands.addCommand('jlab-examples/custom-log-console:open', {
   label: 'Custom Log Console',
@@ -142,7 +140,7 @@ Finally, you can send log messages calling `log` method present on the `logger`
 - HTML message with `IHtmlLog`:
 <!-- prettier-ignore-start -->
 ```ts
-// src/index.ts#L147-L153
+// src/index.ts#L143-L149
 
 const msg: IHtmlLog = {
   type: 'html',
@@ -158,7 +156,7 @@ logConsolePanel?.logger?.log(msg);
   <!-- prettier-ignore-start -->
 
 ```ts
-// src/index.ts#L161-L167
+// src/index.ts#L157-L163
 
 const msg: ITextLog = {
   type: 'text',
@@ -175,7 +173,7 @@ logConsolePanel?.logger?.log(msg);
 
 <!-- prettier-ignore-start -->
 ```ts
-// src/index.ts#L175-L188
+// src/index.ts#L171-L184
 
 const data: nbformat.IOutput = {
   output_type: 'display_data',