added Blockly to launcher

README.md

@@ -13,7 +13,7 @@ Repo: https://github.com/google/blockly
 
 ## Requirements
 
-* JupyterLab >= 4.0.0a0
+* JupyterLab == 3.4
 
 ## Install
 
@@ -45,7 +45,7 @@ The `jlpm` command is JupyterLab's pinned version of
 `yarn` or `npm` in lieu of `jlpm` below.
 
 ```bash
-micromamba create -n blockly -c conda-forge python nodejs yarn jupyterlab==3.3 jupyter-packaging
+micromamba create -n blockly -c conda-forge python nodejs yarn jupyterlab==3.4 jupyter-packaging
 micromamba activate blockly
 # Clone the repo to your local environment
 # Change directory to the jupyterlab_blockly directory

package.json

@@ -46,22 +46,24 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
-    "@jupyterlab/application": "^3.3",
-    "@jupyterlab/apputils": "^3.3",
-    "@jupyterlab/docregistry": "^3.3",
-    "@jupyterlab/outputarea": "^3.3",
-    "@jupyterlab/rendermime": "^3.3",
-    "@lumino/algorithm": "^1.9.1",
-    "@lumino/coreutils": "^1.12.0",
-    "@lumino/messaging": "^1.10.1",
-    "@lumino/signaling": "^1.10.1",
-    "@lumino/widgets": "^1.31.1",
+    "@jupyterlab/application": "^3.4",
+    "@jupyterlab/apputils": "^3.4",
+    "@jupyterlab/docregistry": "^3.4",
+    "@jupyterlab/filebrowser": "^3.4",
+    "@jupyterlab/launcher": "^3.4",
+    "@jupyterlab/outputarea": "^3.4",
+    "@jupyterlab/rendermime": "^3.4",
+    "@lumino/algorithm": "^1.9.0",
+    "@lumino/coreutils": "^1.11.0",
+    "@lumino/messaging": "^1.10.0",
+    "@lumino/signaling": "^1.10.0",
+    "@lumino/widgets": "^1.30.0",
     "blockly": "^7.20211209.2",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0"
   },
   "devDependencies": {
-    "@jupyterlab/builder": "^3.3",
+    "@jupyterlab/builder": "^3.4",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
     "@typescript-eslint/parser": "^5.12.1",
     "eslint": "^8.9.0",

src/icons.ts

@@ -0,0 +1,8 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+
+import blockly_logo from '/style/icons/blockly_logo.svg';
+
+export const blockly_icon = new LabIcon({
+  name: 'blockly:icon/logo',
+  svgstr: blockly_logo
+});

src/index.ts

@@ -5,28 +5,43 @@ import {
 } from '@jupyterlab/application';
 import { WidgetTracker } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ICommandPalette } from '@jupyterlab/apputils';
+import { IFileBrowserFactory } from '@jupyterlab/filebrowser';
+import { ILauncher } from '@jupyterlab/launcher';
 
 import { BlocklyEditorFactory } from './factory';
 import { IBlocklyManager } from './token';
 import { BlocklyEditor } from './widget';
 
+import { blockly_icon } from './icons';
+
 /**
  * The name of the factory that creates the editor widgets.
  */
 const FACTORY = 'Blockly editor';
 
+const PALETTE_CATEGORY = 'Blockly editor';
+
+namespace CommandIDs {
+  export const createNew = 'blockly:create-new-blockly-file';
+}
+
 /**
  * Initialization data for the jupyterlab-blocky extension.
  */
 const plugin: JupyterFrontEndPlugin<IBlocklyManager> = {
   id: 'jupyterlab-blocky:plugin',
   autoStart: true,
-  requires: [ILayoutRestorer, IRenderMimeRegistry],
+  requires: [ILayoutRestorer, IRenderMimeRegistry, IFileBrowserFactory],
+  optional: [ILauncher, ICommandPalette],
   provides: IBlocklyManager,
   activate: (
     app: JupyterFrontEnd,
     restorer: ILayoutRestorer,
-    rendermime: IRenderMimeRegistry
+    rendermime: IRenderMimeRegistry,
+    browserFactory: IFileBrowserFactory,
+    launcher: ILauncher | null,
+    palette: ICommandPalette | null
   ): IBlocklyManager => {
     console.log('JupyterLab extension jupyterlab-blocky is activated!');
 
@@ -46,6 +61,9 @@ const plugin: JupyterFrontEndPlugin<IBlocklyManager> = {
       });
     }
 
+    const { commands } = app;
+    const command = CommandIDs.createNew;
+
     // Creating the widget factory to register it so the document manager knows about
     // our new DocumentWidget
     const widgetFactory = new BlocklyEditorFactory({
@@ -69,6 +87,9 @@ const plugin: JupyterFrontEndPlugin<IBlocklyManager> = {
 
     // Add the widget to the tracker when it's created
     widgetFactory.widgetCreated.connect((sender, widget) => {
+      // Adding the Blockly icon for the widget so it appears next to the file name.
+      widget.title.icon = blockly_icon;
+
       // Notify the instance tracker if restore data needs to update.
       widget.context.pathChanged.connect(() => {
         tracker.save(widget);
@@ -78,6 +99,50 @@ const plugin: JupyterFrontEndPlugin<IBlocklyManager> = {
     // Registering the widget factory
     app.docRegistry.addWidgetFactory(widgetFactory);
 
+    commands.addCommand(command, {
+      label: args =>
+        args['isPalette'] ? 'New Blockly Editor' : 'Blockly Editor',
+      caption: 'Create a new Blockly Editor',
+      icon: args => (args['isPalette'] ? null : blockly_icon),
+      execute: async args => {
+        // Get the directory in which the Blockly file must be created;
+        // otherwise take the current filebrowser directory
+        const cwd =
+          args['cwd'] || browserFactory.tracker.currentWidget.model.path;
+
+        // Create a new untitled Blockly file
+        const model = await commands.execute('docmanager:new-untitled', {
+          path: cwd,
+          type: 'file',
+          ext: '.json'
+        });
+
+        // Open the newly created file with the 'Editor'
+        return commands.execute('docmanager:open', {
+          path: model.path,
+          factory: FACTORY
+        });
+      }
+    });
+
+    // Add the command to the launcher
+    if (launcher) {
+      launcher.add({
+        command,
+        category: 'Other',
+        rank: 1
+      });
+    }
+
+    // Add the command to the palette
+    if (palette) {
+      palette.addItem({
+        command,
+        args: { isPalette: true },
+        category: PALETTE_CATEGORY
+      });
+    }
+
     return widgetFactory.manager;
   }
 };

src/layout.ts

@@ -54,9 +54,10 @@ export class BlocklyLayout extends PanelLayout {
   }
 
   set workspace(workspace: PartialJSONValue) {
+    const data = workspace === null ? { variables: [] } : workspace;
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    Blockly.serialization.workspaces.load(workspace, this._workspace);
+    Blockly.serialization.workspaces.load(data, this._workspace);
   }
 
   /**

src/svg.d.ts

@@ -0,0 +1,13 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+// including this file in a package allows for the use of import statements
+// with svg files. Example: `import xSvg from 'path/xSvg.svg'`
+
+// for use with raw-loader in Webpack.
+// The svg will be imported as a raw string
+
+declare module '*.svg' {
+  const value: string;
+  export default value;
+}

tsconfig.json

@@ -17,6 +17,6 @@
     "target": "es2017",
     "types": []
   },
-  "include": ["src/**/*.ts"],
+  "include": ["src/**/*.ts", "style/icons"],
   "exclude": ["node_modules"]
 }