You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: completer/README.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -124,7 +124,7 @@ fetch(
124
124
[_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`:
Copy file name to clipboardExpand all lines: context-menu/README.md
+24-43Lines changed: 24 additions & 43 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ This is a basic example to show how to add a new entry to an existent context me
6
6
7
7
8
8
9
-
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.
9
+
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`.
10
10
11
11
> It is strongly recommended to read [commands](https://github.com/jupyterlab/extension-examples/tree/master/commands) example before diving into this one.
12
12
@@ -18,50 +18,23 @@ First of all, you will start looking into the declaration of the extension:
For this extension, you need to require `IFileBrowserFactory` to track the file browser item clicked by the user.
33
32
34
-
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!).
35
-
36
-
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:
37
-
38
-
- `name`: the new file type.
39
-
- `extension`: the list of extensions.
40
-
- `fileFormat`: the file content format (_base64_, _json_ or _text_).
41
-
- `contentType`: the file type (_directory_, _notebook_ or _file_).
42
-
- `mimeType`: the content mime type.
33
+
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.
43
34
44
35
<!-- prettier-ignore-start -->
45
36
```ts
46
-
// src/index.ts#L15-L23
47
-
48
-
app.docRegistry.addFileType({
49
-
name: 'example',
50
-
icon: runIcon,
51
-
displayName: 'Example File',
52
-
extensions: ['.example'],
53
-
fileFormat: 'text',
54
-
contentType: 'file',
55
-
mimeTypes: ['text/plain'],
56
-
});
57
-
```
58
-
<!-- prettier-ignore-end -->
59
-
60
-
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.
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:
56
+
Then, you can add the command to a context menu using the settings file.
57
+
You will need to define a context menu item under the property `context` of the special key
58
+
`jupyter.lab.menus`. And the properties of the context menu item are:
84
59
85
60
- `command`: the command to execute.
86
-
- `selector`: the CSS classes of the element where you want to add the entry.
87
-
- `rank`: the position in the context menu
61
+
- `selector`: the CSS classes of the element on which you want to add the entry.
62
+
- `rank`: (optional) number to order the context menu entries
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.
80
+
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="text"]` is a attribute value to be found on the item; the `data-file-type` attribute is set with the file type name or `text` for generic files. You can omit the second part to add the command to every file type.
102
81
103
82
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).
83
+
84
+
> See also the [documentation](https://jupyterlab.readthedocs.io/en/stable/extension/extension_points.html#context-menu).
0 commit comments