JupyterLab custom cell toolbar item

README.md

JupyterLab extension adding a cell toolbar item

This add a checkbox cell toolbar item (using React).

The plugin.json file is the schema to be defined by the extension (should be placed in schema/plugin.json).

index.tsx

import {
  JupyterFrontEnd,
  JupyterFrontEndPlugin
} from '@jupyterlab/application';
import { IToolbarWidgetRegistry, ReactWidget } from '@jupyterlab/apputils';
import { Cell } from '@jupyterlab/cells';
import React from 'react';

/**
 * Initialization data for the demo_cell_toolbar_item extension.
 */
const plugin: JupyterFrontEndPlugin<void> = {
  id: 'demo_cell_toolbar_item:plugin',
  autoStart: true,
  requires: [IToolbarWidgetRegistry],
  activate: (app: JupyterFrontEnd, toolbarRegistry: IToolbarWidgetRegistry) => {
    console.log('JupyterLab extension demo_cell_toolbar_item is activated!');

    toolbarRegistry.registerFactory<Cell>(
      'Cell',
      'demo-checkbox',
      (cell: Cell) => new Checkbox()
    );
  }
};

export default plugin;

class Checkbox extends ReactWidget {
  render(): JSX.Element {
    return (
      <label>
        <input type={'checkbox'}></input>Check me!
      </label>
    );
  }
}

package.json

{
  "name": "demo_cell_toolbar_item",
  "version": "0.1.0",
  "description": "A demo for adding a cell toolbar item",
  "keywords": [
    "jupyter",
    "jupyterlab",
    "jupyterlab-extension"
  ],
  "homepage": "https://github.com/fcollonval/demo_Cell_toolbar_item",
  "bugs": {
    "url": "https://github.com/fcollonval/demo_Cell_toolbar_item/issues"
  },
  "license": "BSD-3-Clause",
  "author": {
    "name": "Frederic Collonval",
    "email": "[email protected]"
  },
  "files": [
    "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
    "schema/*.json",
    "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}"
  ],
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "style": "style/index.css",
  "repository": {
    "type": "git",
    "url": "https://github.com/fcollonval/demo_Cell_toolbar_item.git"
  },
  "scripts": {
    "build": "jlpm build:lib && jlpm build:labextension:dev",
    "build:prod": "jlpm clean && jlpm build:lib && jlpm build:labextension",
    "build:labextension": "jupyter labextension build .",
    "build:labextension:dev": "jupyter labextension build --development True .",
    "build:lib": "tsc",
    "clean": "jlpm clean:lib",
    "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
    "clean:lintcache": "rimraf .eslintcache .stylelintcache",
    "clean:labextension": "rimraf demo_cell_toolbar_item/labextension",
    "clean:all": "jlpm clean:lib && jlpm clean:labextension && jlpm clean:lintcache",
    "eslint": "jlpm eslint:check --fix",
    "eslint:check": "eslint . --cache --ext .ts,.tsx",
    "install:extension": "jlpm build",
    "lint": "jlpm stylelint && jlpm prettier && jlpm eslint",
    "lint:check": "jlpm stylelint:check && jlpm prettier:check && jlpm eslint:check",
    "prettier": "jlpm prettier:base --write --list-different",
    "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
    "prettier:check": "jlpm prettier:base --check",
    "stylelint": "jlpm stylelint:check --fix",
    "stylelint:check": "stylelint --cache \"style/**/*.css\"",
    "watch": "run-p watch:src watch:labextension",
    "watch:src": "tsc -w",
    "watch:labextension": "jupyter labextension watch ."
  },
  "dependencies": {
    "@jupyterlab/application": "^3.4.0",
    "@jupyterlab/apputils": "^3.4.0",
    "@jupyterlab/cells": "^3.4.0",
    "@jupyterlab/ui-components": "^3.4.0",
    "react": "^17.0.0"
  },
  "devDependencies": {
    "@jupyterlab/builder": "^3.4.0",
    "@types/react": "^17.0.0",
    "@typescript-eslint/eslint-plugin": "^4.8.1",
    "@typescript-eslint/parser": "^4.8.1",
    "eslint": "^7.14.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-prettier": "^3.1.4",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.1.1",
    "rimraf": "^3.0.2",
    "stylelint": "^14.3.0",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-recommended": "^6.0.0",
    "stylelint-config-standard": "~24.0.0",
    "stylelint-prettier": "^2.0.0",
    "typescript": "~4.1.3"
  },
  "sideEffects": [
    "style/*.css",
    "style/index.js"
  ],
  "styleModule": "style/index.js",
  "publishConfig": {
    "access": "public"
  },
  "jupyterlab": {
    "extension": true,
    "outputDir": "demo_cell_toolbar_item/labextension",
    "schemaDir": "schema"
  },
  "jupyter-releaser": {
    "hooks": {
      "before-build-npm": [
        "python -m pip install jupyterlab~=3.1",
        "jlpm"
      ],
      "before-build-python": [
        "jlpm clean:all"
      ]
    }
  }
}

plugin.json

{
  "$schema": "http://json-schema.org/draft-07/schema",
  "title": "My demo extension",
  "jupyter.lab.toolbars": {
    "Cell": [
      {
        "name": "demo-checkbox"
      }
    ]
  },
  "additionalProperties": false,
  "type": "object"
}