Parametrize button toolbars (#12)

* Improve styling

* WIP parametrize

* First version

* Improve settings schema

.gitignore

@@ -6,3 +6,4 @@ node_modules/
 *.tsbuildinfo
 *.log
 .vscode/
+jlab_enhanced_cell_toolbar/labextension/

Example.ipynb

@@ -17,32 +17,23 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 6,
+   "execution_count": null,
    "metadata": {
     "tags": [
      "hello"
     ]
    },
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "2"
-      ]
-     },
-     "execution_count": 6,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
     "a"
    ]
   },
   {
    "cell_type": "markdown",
    "metadata": {},
-   "source": []
+   "source": [
+    "This is a markdown cell."
+   ]
   },
   {
    "cell_type": "code",
@@ -54,7 +45,9 @@
   {
    "cell_type": "raw",
    "metadata": {},
-   "source": []
+   "source": [
+    "This is a raw cell"
+   ]
   },
   {
    "cell_type": "code",
@@ -66,9 +59,9 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "python3 (jlab3) *",
    "language": "python",
-   "name": "python3"
+   "name": "conda-env-jlab3-py"
   },
   "language_info": {
    "codemirror_mode": {
@@ -80,7 +73,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.9.1"
+   "version": "3.8.6"
   }
  },
  "nbformat": 4,

schema/plugin.json

@@ -1,18 +1,106 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema",
   "title": "Cell Toolbar",
   "description": "Cell Toolbar Settings.",
   "properties": {
     "defaultTags": {
       "title": "List of Default Tags",
       "description": "List of tags to always display for quick selection.",
-      "default": ["parameters"],
+      "default": [
+        "parameters"
+      ],
       "type": "array",
       "items": {
         "type": "string",
         "pattern": "^[\\w-]+$"
       }
+    },
+    "leftMenu": {
+      "title": "List of left menu items",
+      "description": "An item is defined by a 'command' name and an 'icon' name + optionally a 'tooltip' and the 'cellType' on which it applies",
+      "oneOf": [
+        {
+          "type": "null"
+        },
+        {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/menuItem"
+          }
+        }
+      ],
+      "default": [
+        {
+          "cellType": "markdown",
+          "command": "notebook:change-cell-to-code",
+          "icon": "@jlab-enhanced/cell-toolbar:code",
+          "tooltip": "Convert to Code Cell"
+        },
+        {
+          "cellType": "code",
+          "command": "notebook:change-cell-to-markdown",
+          "icon": "ui-components:markdown",
+          "tooltip": "Convert to Markdown Cell"
+        },
+        {
+          "cellType": "code",
+          "command": "jupyterlab_code_formatter:format",
+          "icon": "@jlab-enhanced/cell-toolbar:format",
+          "tooltip": "Format Cell"
+        },
+        {
+          "command": "notebook:delete-cell",
+          "icon": "@jlab-enhanced/cell-toolbar:delete",
+          "tooltip": "Delete Selected Cells"
+        }
+      ]
+    },
+    "rightMenu": {
+      "title": "List of left menu items",
+      "description": "An item is defined by a 'command' name and an 'icon' name + optionally a 'tooltip' and the 'cellType' on which it applies",
+      "oneOf": [
+        {
+          "type": "null"
+        },
+        {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/menuItem"
+          }
+        }
+      ],
+      "default": null
     }
   },
   "additionalProperties": false,
-  "type": "object"
+  "type": "object",
+  "definitions": {
+    "menuItem": {
+      "type": "object",
+      "properties": {
+        "command": {
+          "type": "string"
+        },
+        "icon": {
+          "type": "string"
+        },
+        "tooltip": {
+          "type": "string"
+        },
+        "cellType": {
+          "type": "string",
+          "enum": [
+            "code",
+            "markdown",
+            "raw"
+          ]
+        }
+      },
+      "additionalProperties": false,
+      "required": [
+        "command",
+        "icon"
+      ]
+    }
+  }
 }

src/cellmenu.ts

@@ -1,65 +1,64 @@
 import { ToolbarButton } from '@jupyterlab/apputils';
-import { markdownIcon } from '@jupyterlab/ui-components';
+import { IObservableList } from '@jupyterlab/observables';
+import { LabIcon } from '@jupyterlab/ui-components';
+import { each } from '@lumino/algorithm';
 import { CommandRegistry } from '@lumino/commands';
 import { PanelLayout, Widget } from '@lumino/widgets';
-import { codeIcon, deleteIcon, formatIcon } from './icon';
 import { ICellMenuItem } from './tokens';
 
 const CELL_MENU_CLASS = 'jp-enh-cell-menu';
 
-const FOREIGN_COMMANDS: ICellMenuItem[] = [
-  // Originate from @jupyterlab/notebook-extension
-  {
-    className: 'jp-enh-cell-to-code',
-    command: 'notebook:change-cell-to-code',
-    icon: codeIcon,
-    tooltip: 'Convert to Code Cell'
-  },
-  {
-    className: 'jp-enh-cell-to-md',
-    command: 'notebook:change-cell-to-markdown',
-    icon: markdownIcon,
-    tooltip: 'Convert to Markdown Cell'
-  },
-  // Originate from @ryantam626/jupyterlab_code_formatter
-  {
-    className: 'jp-enh-cell-format',
-    command: 'jupyterlab_code_formatter:format',
-    icon: formatIcon,
-    tooltip: 'Format Cell'
-  },
-  // Originate from @jupyterlab/notebook-extension
-  {
-    command: 'notebook:delete-cell',
-    icon: deleteIcon,
-    tooltip: 'Delete Selected Cells'
-  }
-];
-
 /**
  * Toolbar icon menu container
  */
 export class CellMenu extends Widget {
-  constructor(commands: CommandRegistry) {
+  constructor(
+    commands: CommandRegistry,
+    items: IObservableList<ICellMenuItem>
+  ) {
     super();
+    this._commands = commands;
+    this._items = items;
     this.layout = new PanelLayout();
     this.addClass(CELL_MENU_CLASS);
-    this._createMenu(commands);
+    this._itemsChanged(items);
+    this._items.changed.connect(this._itemsChanged, this);
+  }
+
+  dispose(): void {
+    if (this.isDisposed) {
+      return;
+    }
+    this._items.changed.disconnect(this._itemsChanged, this);
+
+    super.dispose();
   }
 
-  private _createMenu(commands: CommandRegistry): void {
+  protected _itemsChanged(
+    items: IObservableList<ICellMenuItem>,
+    changes?: IObservableList.IChangedArgs<ICellMenuItem>
+  ): void {
+    each(this.children(), widget => {
+      widget.dispose();
+    });
+
     const layout = this.layout as PanelLayout;
-    FOREIGN_COMMANDS.forEach(entry => {
-      if (commands.hasCommand(entry.command)) {
+    each(items.iter(), entry => {
+      if (this._commands.hasCommand(entry.command)) {
         layout.addWidget(
           new ToolbarButton({
-            ...entry,
+            icon: LabIcon.resolve({ icon: entry.icon }),
+            tooltip: entry.tooltip,
+            className: `jp-enh-cell-${entry.cellType || 'all'}`,
             onClick: (): void => {
-              commands.execute(entry.command);
+              this._commands.execute(entry.command);
             }
           })
         );
       }
     });
   }
+
+  private _commands: CommandRegistry;
+  private _items: IObservableList<ICellMenuItem>;
 }