Add example of a file editor toolbar button to the toolbar examples

.github/workflows/main.yml

@@ -30,7 +30,7 @@ jobs:
           - react-widget
           - settings
           - state
-          - toolbar-button
+          - toolbar-buttons
           - widgets
           - completer
           - contentheader

README.md

@@ -100,7 +100,7 @@ Start with the [Hello World](hello-world) and then jump to the topic you are int
 - [Settings](settings)
 - [Signals](signals)
 - [State](state)
-- [Toolbar item](toolbar-button)
+- [Toolbar item](toolbar-buttons)
 - [Widgets](widgets)
 
 You can expect from each example:
@@ -228,11 +228,11 @@ Use State persistence in an extension.
 
 [![State](state/preview.gif)](state)
 
-### [Toolbar Item](toolbar-button)
+### [Toolbar Item](toolbar-buttons)
 
-Add a new button to the notebook toolbar.
+Add a new buttons to the notebook and editor toolbars.
 
-[![Toolbar button](toolbar-button/Preview.gif)](toolbar-button)
+[![Toolbar buttons](toolbar-buttons/Preview.gif)](toolbar-buttons)
 
 ### [Widgets](widgets)
 

lerna.json

@@ -18,7 +18,7 @@
     "settings",
     "signals",
     "state",
-    "toolbar-button",
+    "toolbar-buttons",
     "widgets"
   ],
   "npmClient": "jlpm",

package.json

@@ -39,7 +39,7 @@
       "settings",
       "signals",
       "state",
-      "toolbar-button",
+      "toolbar-buttons",
       "widgets"
     ]
   },

scripts/run_all_ui_tests.sh

@@ -5,7 +5,7 @@ HERE=$(dirname $0)
 ## To update all screenshots run ./scripts/run_all_ui_tests.sh npx playwright test -u
 COMMAND=${*:-npx playwright test}
 
-declare -a extensions=("command-palette" "commands" "completer" "context-menu" "custom-log-console" "datagrid" "documents" "hello-world" "kernel-messaging" "kernel-output" "launcher" "log-messages" "main-menu" "react-widget" "settings" "server-extension" "signals" "state" "toolbar-button" "widgets")
+declare -a extensions=("command-palette" "commands" "completer" "context-menu" "custom-log-console" "datagrid" "documents" "hello-world" "kernel-messaging" "kernel-output" "launcher" "log-messages" "main-menu" "react-widget" "settings" "server-extension" "signals" "state" "toolbar-buttons" "widgets")
 
 # Build docker image
 docker-compose -f $HERE/../end-to-end-tests/docker-compose.yml build --no-cache

toolbar-button/README.md → toolbar-buttons/README.md

@@ -36,7 +36,7 @@ Firstly you have to register the plugin information. For that you have to pass a
 
 const plugin: JupyterFrontEndPlugin<void> = {
   activate,
-  id: 'toolbar-button',
+  id: 'toolbar-buttons',
   autoStart: true,
 };
 ```

toolbar-button/package.json → toolbar-buttons/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@jupyterlab-examples/toolbar-button",
+  "name": "@jupyterlab-examples/toolbar-buttons",
   "version": "0.1.0",
   "description": "A JupyterLab extension for clearing all cells output at once.",
   "keywords": [

toolbar-button/setup.py → toolbar-buttons/setup.py

@@ -20,7 +20,7 @@
     str(lab_path / "static/style.js")
 ]
 
-labext_name = "@jupyterlab-examples/toolbar-button"
+labext_name = "@jupyterlab-examples/toolbar-buttons"
 
 data_files_spec = [
     ("share/jupyter/labextensions/%s" % labext_name, str(lab_path.relative_to(HERE)), "**"),

toolbar-buttons/src/index.ts

@@ -0,0 +1,110 @@
+import { IDisposable, DisposableDelegate } from '@lumino/disposable';
+
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin,
+} from '@jupyterlab/application';
+
+import { ToolbarButton } from '@jupyterlab/apputils';
+
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+
+import {
+  NotebookActions,
+  NotebookPanel,
+  INotebookModel,
+} from '@jupyterlab/notebook';
+
+/**
+ * The plugin registration information.
+ */
+const plugin: JupyterFrontEndPlugin<void> = {
+  activate,
+  id: 'toolbar-buttons',
+  autoStart: true,
+};
+
+/**
+ * A notebook widget extension that adds a button to the toolbar.
+ */
+ export class NotebookButtonExtension
+ implements DocumentRegistry.IWidgetExtension<NotebookPanel, INotebookModel>
+{
+ /**
+  * Create a new extension for the notebook panel widget.
+  *
+  * @param panel Notebook panel
+  * @param context Notebook context
+  * @returns Disposable on the added button
+  */
+ createNew(
+   panel: NotebookPanel,
+   context: DocumentRegistry.IContext<INotebookModel>
+ ): IDisposable {
+   const clearOutput = () => {
+     NotebookActions.clearAllOutputs(panel.content);
+   };
+   const button = new ToolbarButton({
+     className: 'clear-output-button',
+     label: 'Clear All Outputs',
+     onClick: clearOutput,
+     tooltip: 'Clear All Outputs',
+   });
+
+   panel.toolbar.insertItem(10, 'clearOutputs', button);
+   return new DisposableDelegate(() => {
+     button.dispose();
+   });
+ }
+}
+
+/**
+ * An editor widget extension that adds a button to the toolbar.
+ */
+export class EditorButtonExtension
+  implements DocumentRegistry.IWidgetExtension<NotebookPanel, INotebookModel>
+{
+  /**
+   * Create a new extension for the editor panel widget.
+   *
+   * @param panel Editor panel
+   * @param context Editor context
+   * @returns Disposable on the added button
+   */
+  createNew(
+    panel: NotebookPanel,
+    context: DocumentRegistry.IContext<INotebookModel>
+  ): IDisposable {
+    const testCommand = () => {
+      console.log('TESTING BUTTON');
+    };
+    const button = new ToolbarButton({
+      className: 'run-test-command',
+      label: 'Test Command',
+      onClick: testCommand,
+      tooltip: 'Test Command',
+    });
+
+    if (context.path.endsWith('.tex')) {
+      panel.toolbar.insertItem(10, 'clearOutputs', button);
+    }
+    return new DisposableDelegate(() => {
+      button.dispose();
+    });
+  }
+}
+
+/**
+ * Activate the extension.
+ *
+ * @param app Main application object
+ */
+ function activate(app: JupyterFrontEnd): void {
+  app.docRegistry.addWidgetExtension('Notebook', new NotebookButtonExtension());
+  app.docRegistry.addWidgetExtension('Editor', new EditorButtonExtension());
+}
+
+/**
+ * Export the plugin as default.
+ */
+export default plugin;

toolbar-buttons/ui-tests/.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+coverage
+**/*.d.ts
+ui-tests

toolbar-button/ui-tests/package.json → toolbar-buttons/ui-tests/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@jupyterlab-examples/toolbar-button-tests",
+  "name": "@jupyterlab-examples/toolbar-buttons-tests",
   "version": "0.1.0",
-  "description": "Integration test for toolbar-button example",
+  "description": "Integration test for toolbar-buttons example",
   "repository": "https://github.com/jupyterlab/extension-examples",
   "author": "Project Jupyter Contributors",
   "license": "BSD-3-Clause",

widgets/README.md

@@ -101,4 +101,4 @@ widgets in the following examples:
 - Widget showing a [Datagrid](../datagrid/README.md)
 - Widget integrating [React components](../react-widget/README.md)
 - Widget interacting with a [Kernel](../kernel-messaging/README.md)
-- Extending document widget (like the notebook panel) with a new [Toolbar Button](../toolbar-button/README.md)
+- Extending document widget (like the notebook panel and editor) with new [Toolbar Buttons](../toolbar-buttons/README.md)