@jupyterlab/celltags-extension 4.0.0-alpha.9 → 4.0.0-beta.0

package/README.md

@@ -1,4 +1,3 @@
 # @jupyterlab/celltags-extension
 
-A JupyterLab extension which provides an entry point for
-[@jupyterlab/celltags](../celltags).
+A JupyterLab extension which provides a form renderer for NotebookTools common tool.

package/lib/celltag.d.ts

@@ -0,0 +1,24 @@
+import { FieldProps } from '@rjsf/utils';
+import { INotebookTracker } from '@jupyterlab/notebook';
+import { ITranslator } from '@jupyterlab/translation';
+export declare class CellTagField {
+    constructor(tracker: INotebookTracker, translator?: ITranslator);
+    addTag(props: FieldProps, tag: string): void;
+    /**
+     * Pull from cell metadata all the tags used in the notebook and update the
+     * stored tag list.
+     */
+    pullTags(): string[];
+    private _emptyAddTag;
+    private _onAddTagKeyDown;
+    private _onAddTagFocus;
+    private _onAddTagBlur;
+    private _onChange;
+    private _onAddTagClick;
+    private _onTagClick;
+    render(props: FieldProps): JSX.Element;
+    private _tracker;
+    private _translator;
+    private _trans;
+    private _editing;
+}

package/lib/celltag.js

@@ -0,0 +1,153 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React from 'react';
+import { addIcon, checkIcon, LabIcon } from '@jupyterlab/ui-components';
+import { reduce } from '@lumino/algorithm';
+import { nullTranslator } from '@jupyterlab/translation';
+/**
+ * The class name added to the cell-tags field.
+ */
+const CELL_TAGS_WIDGET_CLASS = 'jp-CellTags';
+/**
+ * The class name added to each tag element.
+ */
+const CELL_TAGS_ELEMENT_CLASS = 'jp-CellTags-Tag';
+/**
+ * The class name added to each applied tag element.
+ */
+const CELL_TAGS_ELEMENT_APPLIED_CLASS = 'jp-CellTags-Applied';
+/**
+ * The class name added to each unapplied tag element.
+ */
+const CELL_TAGS_ELEMENT_UNAPPLIED_CLASS = 'jp-CellTags-Unapplied';
+/**
+ * The class name added to the tag holder.
+ */
+const CELL_TAGS_HOLDER_CLASS = 'jp-CellTags-Holder';
+/**
+ * The class name added to the add-tag input.
+ */
+const CELL_TAGS_ADD_CLASS = 'jp-CellTags-Add';
+/**
+ * The class name added to an empty input.
+ */
+const CELL_TAGS_EMPTY_CLASS = 'jp-CellTags-Empty';
+export class CellTagField {
+    constructor(tracker, translator) {
+        this._tracker = tracker;
+        this._translator = translator || nullTranslator;
+        this._trans = this._translator.load('jupyterlab');
+        this._editing = false;
+    }
+    addTag(props, tag) {
+        const data = props.formData;
+        if (tag && !data.includes(tag)) {
+            data.push(tag);
+            props.formContext.updateMetadata({ [props.name]: data }, true);
+        }
+    }
+    /**
+     * Pull from cell metadata all the tags used in the notebook and update the
+     * stored tag list.
+     */
+    pullTags() {
+        var _a, _b;
+        const notebook = (_a = this._tracker) === null || _a === void 0 ? void 0 : _a.currentWidget;
+        const cells = (_b = notebook === null || notebook === void 0 ? void 0 : notebook.model) === null || _b === void 0 ? void 0 : _b.cells;
+        if (cells === undefined) {
+            return [];
+        }
+        const allTags = reduce(cells, (allTags, cell) => {
+            var _a;
+            const tags = (_a = cell.getMetadata('tags')) !== null && _a !== void 0 ? _a : [];
+            return [...allTags, ...tags];
+        }, []);
+        return [...new Set(allTags)].filter(tag => tag !== '');
+    }
+    _emptyAddTag(target) {
+        target.value = '';
+        target.style.width = '';
+        target.classList.add(CELL_TAGS_EMPTY_CLASS);
+    }
+    _onAddTagKeyDown(props, event) {
+        const input = event.target;
+        if (event.ctrlKey)
+            return;
+        if (event.key === 'Enter') {
+            this.addTag(props, input.value);
+        }
+        else if (event.key === 'Escape') {
+            this._emptyAddTag(input);
+        }
+    }
+    _onAddTagFocus(event) {
+        if (!this._editing) {
+            event.target.blur();
+        }
+    }
+    _onAddTagBlur(input) {
+        if (this._editing) {
+            this._editing = false;
+            this._emptyAddTag(input);
+        }
+    }
+    _onChange(event) {
+        if (!event.target.value) {
+            this._emptyAddTag(event.target);
+        }
+        else {
+            event.target.classList.remove(CELL_TAGS_EMPTY_CLASS);
+            const tmp = document.createElement('span');
+            tmp.className = CELL_TAGS_ADD_CLASS;
+            tmp.textContent = event.target.value;
+            // set width to the pixel length of the text
+            document.body.appendChild(tmp);
+            event.target.style.setProperty('width', `calc(${tmp.getBoundingClientRect().width}px + var(--jp-add-tag-extra-width))`);
+            document.body.removeChild(tmp);
+        }
+    }
+    _onAddTagClick(props, event) {
+        const elem = event.target.closest('div');
+        const input = elem === null || elem === void 0 ? void 0 : elem.childNodes[0];
+        if (!this._editing) {
+            this._editing = true;
+            input.value = '';
+            input.focus();
+        }
+        else if (event.target !== input) {
+            this.addTag(props, input.value);
+        }
+        event.preventDefault();
+    }
+    _onTagClick(props, tag) {
+        const data = props.formData;
+        if (data.includes(tag)) {
+            data.splice(data.indexOf(tag), 1);
+        }
+        else {
+            data.push(tag);
+        }
+        props.formContext.updateMetadata({ [props.name]: data }, true);
+    }
+    render(props) {
+        const allTags = this.pullTags();
+        return (React.createElement("div", { className: CELL_TAGS_WIDGET_CLASS },
+            React.createElement("div", { className: "jp-FormGroup-fieldLabel jp-FormGroup-contentItem" }, "Cell Tags"),
+            allTags &&
+                allTags.map((tag, i) => (React.createElement("div", { key: i, className: `${CELL_TAGS_ELEMENT_CLASS} ${props.formData.includes(tag)
+                        ? CELL_TAGS_ELEMENT_APPLIED_CLASS
+                        : CELL_TAGS_ELEMENT_UNAPPLIED_CLASS}`, onClick: () => this._onTagClick(props, tag) },
+                    React.createElement("div", { className: CELL_TAGS_HOLDER_CLASS },
+                        React.createElement("span", null, tag),
+                        props.formData.includes(tag) && (React.createElement(LabIcon.resolveReact, { icon: checkIcon, tag: "span", elementPosition: "center", height: "18px", width: "18px", marginLeft: "5px", marginRight: "-3px" })))))),
+            React.createElement("div", { className: `${CELL_TAGS_ELEMENT_CLASS} ${CELL_TAGS_ELEMENT_UNAPPLIED_CLASS}` },
+                React.createElement("div", { className: CELL_TAGS_HOLDER_CLASS, onMouseDown: (e) => this._onAddTagClick(props, e) },
+                    React.createElement("input", { className: `${CELL_TAGS_ADD_CLASS} ${CELL_TAGS_EMPTY_CLASS}`, type: "text", placeholder: this._trans.__('Add Tag'), onKeyDown: (e) => this._onAddTagKeyDown(props, e), onFocus: (e) => this._onAddTagFocus(e), onBlur: (e) => this._onAddTagBlur(e.target), onChange: (e) => {
+                            this._onChange(e);
+                        } }),
+                    React.createElement(LabIcon.resolveReact, { icon: addIcon, tag: "span", height: "18px", width: "18px", marginLeft: "5px", marginRight: "-3px" })))));
+    }
+}
+//# sourceMappingURL=celltag.js.map

package/lib/celltag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"celltag.js","sourceRoot":"","sources":["../src/celltag.tsx"],"names":[],"mappings":"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"}

package/lib/index.d.ts

@@ -3,8 +3,5 @@
  * @module celltags-extension
  */
 import { JupyterFrontEndPlugin } from '@jupyterlab/application';
-/**
- * Initialization data for the celltags extension.
- */
-declare const celltags: JupyterFrontEndPlugin<void>;
-export default celltags;
+declare const _default: JupyterFrontEndPlugin<void>[];
+export default _default;

package/lib/index.js

@@ -4,20 +4,28 @@
  * @packageDocumentation
  * @module celltags-extension
  */
-import { INotebookTools, INotebookTracker } from '@jupyterlab/notebook';
-import { TagTool } from '@jupyterlab/celltags';
-import { ITranslator } from '@jupyterlab/translation';
+import { INotebookTracker } from '@jupyterlab/notebook';
+import { CellTagField } from './celltag';
+import { IFormRendererRegistry } from '@jupyterlab/ui-components';
 /**
- * Initialization data for the celltags extension.
+ * Registering cell tag field.
  */
-const celltags = {
-    id: '@jupyterlab/celltags',
+const customCellTag = {
+    id: '@jupyterlab/celltags-extension:plugin',
     autoStart: true,
-    requires: [INotebookTools, INotebookTracker, ITranslator],
-    activate: (app, tools, tracker, translator) => {
-        const tool = new TagTool(tracker, app, translator);
-        tools.addItem({ tool: tool, rank: 1.6 });
+    requires: [INotebookTracker],
+    optional: [IFormRendererRegistry],
+    activate: (app, tracker, formRegistry) => {
+        // Register the custom field
+        if (formRegistry) {
+            const component = {
+                fieldRenderer: (props) => {
+                    return new CellTagField(tracker).render(props);
+                }
+            };
+            formRegistry.addRenderer('celltags-extension:plugin.renderer', component);
+        }
     }
 };
-export default celltags;
+export default [customCellTag];
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,2DAA2D;AAC3D;;;GAGG;AAOH,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD;;GAEG;AACH,MAAM,QAAQ,GAAgC;IAC5C,EAAE,EAAE,sBAAsB;IAC1B,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,CAAC,cAAc,EAAE,gBAAgB,EAAE,WAAW,CAAC;IACzD,QAAQ,EAAE,CACR,GAAoB,EACpB,KAAqB,EACrB,OAAyB,EACzB,UAAuB,EACvB,EAAE;QACF,MAAM,IAAI,GAAG,IAAI,OAAO,CAAC,OAAO,EAAE,GAAG,EAAE,UAAU,CAAC,CAAC;QACnD,KAAK,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;IAC3C,CAAC;CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,2DAA2D;AAC3D;;;GAGG;AAQH,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAEL,qBAAqB,EACtB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,aAAa,GAAgC;IACjD,EAAE,EAAE,uCAAuC;IAC3C,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE,CAAC,gBAAgB,CAAC;IAC5B,QAAQ,EAAE,CAAC,qBAAqB,CAAC;IACjC,QAAQ,EAAE,CACR,GAAoB,EACpB,OAAyB,EACzB,YAAoC,EACpC,EAAE;QACF,4BAA4B;QAC5B,IAAI,YAAY,EAAE;YAChB,MAAM,SAAS,GAAkB;gBAC/B,aAAa,EAAE,CAAC,KAAiB,EAAE,EAAE;oBACnC,OAAO,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACjD,CAAC;aACF,CAAC;YACF,YAAY,CAAC,WAAW,CAAC,oCAAoC,EAAE,SAAS,CAAC,CAAC;SAC3E;IACH,CAAC;CACF,CAAC;AAEF,eAAe,CAAC,aAAa,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyterlab/celltags-extension",
-  "version": "4.0.0-alpha.9",
+  "version": "4.0.0-beta.0",
   "description": "An extension for manipulating tags in cell metadata",
   "keywords": [
     "jupyter",
@@ -30,7 +30,9 @@
   "files": [
     "lib/*.{d.ts,js,js.map}",
     "style/*.css",
-    "style/index.js"
+    "style/index.js",
+    "src/**/*.{ts,tsx}",
+    "schema/*.json"
   ],
   "scripts": {
     "build": "tsc",
@@ -38,20 +40,24 @@
     "watch": "tsc -b --watch"
   },
   "dependencies": {
-    "@jupyterlab/application": "^4.0.0-alpha.9",
-    "@jupyterlab/celltags": "^4.0.0-alpha.9",
-    "@jupyterlab/notebook": "^4.0.0-alpha.9",
-    "@jupyterlab/translation": "^4.0.0-alpha.9"
+    "@jupyterlab/application": "^4.0.0-beta.0",
+    "@jupyterlab/notebook": "^4.0.0-beta.0",
+    "@jupyterlab/translation": "^4.0.0-beta.0",
+    "@jupyterlab/ui-components": "^4.0.0-beta.0",
+    "@lumino/algorithm": "^2.0.0",
+    "@rjsf/utils": "^5.1.0",
+    "react": "^18.2.0"
   },
   "devDependencies": {
     "rimraf": "~3.0.0",
-    "typescript": "~4.6.3"
+    "typescript": "~5.0.2"
   },
   "publishConfig": {
     "access": "public"
   },
   "jupyterlab": {
-    "extension": true
+    "extension": true,
+    "schemaDir": "schema"
   },
   "styleModule": "style/index.js"
 }

package/schema/plugin.json

@@ -0,0 +1,33 @@
+{
+  "type": "object",
+  "title": "Common tools",
+  "description": "Setting for the common tools",
+  "jupyter.lab.metadataforms": [
+    {
+      "id": "commonToolsSection",
+      "label": "Common tools",
+      "metadataSchema": {
+        "type": "object",
+        "properties": {
+          "/tags": {
+            "title": "Cell tag",
+            "type": "array",
+            "default": [],
+            "items": {
+              "type": "string"
+            }
+          }
+        }
+      },
+      "uiSchema": {
+        "ui:order": ["_CELL-TOOL", "/tags", "*"]
+      },
+      "metadataOptions": {
+        "/tags": {
+          "customRenderer": "celltags-extension:plugin.renderer"
+        }
+      }
+    }
+  ],
+  "additionalProperties": false
+}

package/src/celltag.tsx

@@ -0,0 +1,243 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import React from 'react';
+import { FieldProps } from '@rjsf/utils';
+import { INotebookTracker } from '@jupyterlab/notebook';
+import { addIcon, checkIcon, LabIcon } from '@jupyterlab/ui-components';
+import { reduce } from '@lumino/algorithm';
+import {
+  ITranslator,
+  nullTranslator,
+  TranslationBundle
+} from '@jupyterlab/translation';
+
+/**
+ * The class name added to the cell-tags field.
+ */
+const CELL_TAGS_WIDGET_CLASS = 'jp-CellTags';
+/**
+ * The class name added to each tag element.
+ */
+const CELL_TAGS_ELEMENT_CLASS = 'jp-CellTags-Tag';
+/**
+ * The class name added to each applied tag element.
+ */
+const CELL_TAGS_ELEMENT_APPLIED_CLASS = 'jp-CellTags-Applied';
+/**
+ * The class name added to each unapplied tag element.
+ */
+const CELL_TAGS_ELEMENT_UNAPPLIED_CLASS = 'jp-CellTags-Unapplied';
+/**
+ * The class name added to the tag holder.
+ */
+const CELL_TAGS_HOLDER_CLASS = 'jp-CellTags-Holder';
+/**
+ * The class name added to the add-tag input.
+ */
+const CELL_TAGS_ADD_CLASS = 'jp-CellTags-Add';
+/**
+ * The class name added to an empty input.
+ */
+const CELL_TAGS_EMPTY_CLASS = 'jp-CellTags-Empty';
+
+export class CellTagField {
+  constructor(tracker: INotebookTracker, translator?: ITranslator) {
+    this._tracker = tracker;
+    this._translator = translator || nullTranslator;
+    this._trans = this._translator.load('jupyterlab');
+    this._editing = false;
+  }
+
+  addTag(props: FieldProps, tag: string) {
+    const data = props.formData;
+    if (tag && !data.includes(tag)) {
+      data.push(tag);
+      props.formContext.updateMetadata({ [props.name]: data }, true);
+    }
+  }
+
+  /**
+   * Pull from cell metadata all the tags used in the notebook and update the
+   * stored tag list.
+   */
+  pullTags(): string[] {
+    const notebook = this._tracker?.currentWidget;
+    const cells = notebook?.model?.cells;
+    if (cells === undefined) {
+      return [];
+    }
+    const allTags = reduce(
+      cells,
+      (allTags: string[], cell) => {
+        const tags: string[] = (cell.getMetadata('tags') as string[]) ?? [];
+        return [...allTags, ...tags];
+      },
+      []
+    );
+    return [...new Set(allTags)].filter(tag => tag !== '');
+  }
+
+  private _emptyAddTag(target: HTMLInputElement) {
+    target.value = '';
+    target.style.width = '';
+    target.classList.add(CELL_TAGS_EMPTY_CLASS);
+  }
+
+  private _onAddTagKeyDown(
+    props: FieldProps,
+    event: React.KeyboardEvent<HTMLInputElement>
+  ) {
+    const input = event.target as HTMLInputElement;
+
+    if (event.ctrlKey) return;
+
+    if (event.key === 'Enter') {
+      this.addTag(props, input.value);
+    } else if (event.key === 'Escape') {
+      this._emptyAddTag(input);
+    }
+  }
+
+  private _onAddTagFocus(event: React.FocusEvent<HTMLInputElement>) {
+    if (!this._editing) {
+      (event.target as HTMLInputElement).blur();
+    }
+  }
+
+  private _onAddTagBlur(input: HTMLInputElement) {
+    if (this._editing) {
+      this._editing = false;
+      this._emptyAddTag(input);
+    }
+  }
+
+  private _onChange(event: React.ChangeEvent<HTMLInputElement>) {
+    if (!event.target.value) {
+      this._emptyAddTag(event.target);
+    } else {
+      event.target.classList.remove(CELL_TAGS_EMPTY_CLASS);
+      const tmp = document.createElement('span');
+      tmp.className = CELL_TAGS_ADD_CLASS;
+      tmp.textContent = event.target.value;
+      // set width to the pixel length of the text
+      document.body.appendChild(tmp);
+      event.target.style.setProperty(
+        'width',
+        `calc(${
+          tmp.getBoundingClientRect().width
+        }px + var(--jp-add-tag-extra-width))`
+      );
+      document.body.removeChild(tmp);
+    }
+  }
+
+  private _onAddTagClick(
+    props: FieldProps,
+    event: React.MouseEvent<HTMLElement>
+  ) {
+    const elem = (event.target as HTMLElement).closest('div');
+    const input = elem?.childNodes[0] as HTMLInputElement;
+    if (!this._editing) {
+      this._editing = true;
+      input.value = '';
+      input.focus();
+    } else if (event.target !== input) {
+      this.addTag(props, input.value);
+    }
+    event.preventDefault();
+  }
+
+  private _onTagClick(props: FieldProps, tag: string) {
+    const data = props.formData;
+    if (data.includes(tag)) {
+      data.splice(data.indexOf(tag), 1);
+    } else {
+      data.push(tag);
+    }
+
+    props.formContext.updateMetadata({ [props.name]: data }, true);
+  }
+
+  render(props: FieldProps): JSX.Element {
+    const allTags: string[] = this.pullTags();
+
+    return (
+      <div className={CELL_TAGS_WIDGET_CLASS}>
+        <div className="jp-FormGroup-fieldLabel jp-FormGroup-contentItem">
+          Cell Tags
+        </div>
+        {allTags &&
+          allTags.map((tag: string, i: number) => (
+            <div
+              key={i}
+              className={`${CELL_TAGS_ELEMENT_CLASS} ${
+                props.formData.includes(tag)
+                  ? CELL_TAGS_ELEMENT_APPLIED_CLASS
+                  : CELL_TAGS_ELEMENT_UNAPPLIED_CLASS
+              }`}
+              onClick={() => this._onTagClick(props, tag)}
+            >
+              <div className={CELL_TAGS_HOLDER_CLASS}>
+                <span>{tag}</span>
+                {props.formData.includes(tag) && (
+                  <LabIcon.resolveReact
+                    icon={checkIcon}
+                    tag="span"
+                    elementPosition="center"
+                    height="18px"
+                    width="18px"
+                    marginLeft="5px"
+                    marginRight="-3px"
+                  />
+                )}
+              </div>
+            </div>
+          ))}
+        <div
+          className={`${CELL_TAGS_ELEMENT_CLASS} ${CELL_TAGS_ELEMENT_UNAPPLIED_CLASS}`}
+        >
+          <div
+            className={CELL_TAGS_HOLDER_CLASS}
+            onMouseDown={(e: React.MouseEvent<HTMLElement>) =>
+              this._onAddTagClick(props, e)
+            }
+          >
+            <input
+              className={`${CELL_TAGS_ADD_CLASS} ${CELL_TAGS_EMPTY_CLASS}`}
+              type="text"
+              placeholder={this._trans.__('Add Tag')}
+              onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) =>
+                this._onAddTagKeyDown(props, e)
+              }
+              onFocus={(e: React.FocusEvent<HTMLInputElement>) =>
+                this._onAddTagFocus(e)
+              }
+              onBlur={(e: React.FocusEvent<HTMLInputElement>) =>
+                this._onAddTagBlur(e.target)
+              }
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                this._onChange(e);
+              }}
+            />
+            <LabIcon.resolveReact
+              icon={addIcon}
+              tag="span"
+              height="18px"
+              width="18px"
+              marginLeft="5px"
+              marginRight="-3px"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  private _tracker: INotebookTracker;
+  private _translator: ITranslator;
+  private _trans: TranslationBundle;
+  private _editing: boolean;
+}

package/src/index.ts

@@ -0,0 +1,47 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+/**
+ * @packageDocumentation
+ * @module celltags-extension
+ */
+
+import type { FieldProps } from '@rjsf/utils';
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+
+import { INotebookTracker } from '@jupyterlab/notebook';
+
+import { CellTagField } from './celltag';
+import {
+  IFormRenderer,
+  IFormRendererRegistry
+} from '@jupyterlab/ui-components';
+
+/**
+ * Registering cell tag field.
+ */
+const customCellTag: JupyterFrontEndPlugin<void> = {
+  id: '@jupyterlab/celltags-extension:plugin',
+  autoStart: true,
+  requires: [INotebookTracker],
+  optional: [IFormRendererRegistry],
+  activate: (
+    app: JupyterFrontEnd,
+    tracker: INotebookTracker,
+    formRegistry?: IFormRendererRegistry
+  ) => {
+    // Register the custom field
+    if (formRegistry) {
+      const component: IFormRenderer = {
+        fieldRenderer: (props: FieldProps) => {
+          return new CellTagField(tracker).render(props);
+        }
+      };
+      formRegistry.addRenderer('celltags-extension:plugin.renderer', component);
+    }
+  }
+};
+
+export default [customCellTag];

package/style/base.css

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+:root {
+  --jp-add-tag-extra-width: 8px;
+}
+
+.jp-CellTags-Tag {
+  height: 20px;
+  border-radius: 10px;
+  margin-right: 5px;
+  margin-bottom: 10px;
+  padding: 0 8px;
+  font-size: var(--jp-ui-font-size1);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  max-width: calc(100% - 25px);
+  border: 1px solid var(--jp-border-color1);
+  color: var(--jp-ui-font-color1);
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.jp-CellTags-Unapplied {
+  background-color: var(--jp-layout-color2);
+}
+
+.jp-CellTags-Applied {
+  background-color: var(--jp-layout-color3);
+}
+
+.jp-CellTags-Add {
+  white-space: nowrap;
+  overflow: hidden;
+  border: none;
+  outline: none;
+  resize: horizontal;
+  font-size: var(--jp-ui-font-size1);
+  color: var(--jp-ui-font-color1);
+  background: var(--jp-layout-color2);
+}
+
+.jp-CellTags-Holder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.jp-CellTags-Empty {
+  width: 4em;
+}

package/style/index.css

@@ -4,6 +4,8 @@
 |----------------------------------------------------------------------------*/
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+@import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@jupyterlab/application/style/index.css');
 @import url('~@jupyterlab/notebook/style/index.css');
-@import url('~@jupyterlab/celltags/style/index.css');
+
+@import url('./base.css');

package/style/index.js

@@ -4,6 +4,8 @@
 |----------------------------------------------------------------------------*/
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+import '@jupyterlab/ui-components/style/index.js';
 import '@jupyterlab/application/style/index.js';
 import '@jupyterlab/notebook/style/index.js';
-import '@jupyterlab/celltags/style/index.js';
+
+import './base.css';