Customize the shell layout with the settings

app/package.json

@@ -10,8 +10,8 @@
     "watch": "webpack --config ./webpack.config.watch.js"
   },
   "resolutions": {
-    "@codemirror/state": "~6.2.0",
-    "@codemirror/view": "~6.11.0",
+    "@codemirror/state": "~6.2.1",
+    "@codemirror/view": "~6.13.2",
     "@jupyter-notebook/application": "~7.0.0-beta.4",
     "@jupyter-notebook/application-extension": "~7.0.0-beta.4",
     "@jupyter-notebook/console-extension": "~7.0.0-beta.4",
@@ -24,76 +24,79 @@
     "@jupyter-notebook/tree-extension": "~7.0.0-beta.4",
     "@jupyter-notebook/ui-components": "~7.0.0-beta.4",
     "@jupyter/ydoc": "~1.0.2",
-    "@jupyterlab/application": "~4.0.1",
-    "@jupyterlab/application-extension": "~4.0.1",
-    "@jupyterlab/apputils": "~4.1.1",
-    "@jupyterlab/apputils-extension": "~4.0.1",
-    "@jupyterlab/cell-toolbar": "~4.0.1",
-    "@jupyterlab/cell-toolbar-extension": "~4.0.1",
-    "@jupyterlab/celltags-extension": "~4.0.1",
-    "@jupyterlab/codeeditor": "~4.0.1",
-    "@jupyterlab/codemirror": "~4.0.1",
-    "@jupyterlab/codemirror-extension": "~4.0.1",
-    "@jupyterlab/completer": "~4.0.1",
-    "@jupyterlab/completer-extension": "~4.0.1",
-    "@jupyterlab/console": "~4.0.1",
-    "@jupyterlab/console-extension": "~4.0.1",
-    "@jupyterlab/coreutils": "~6.0.1",
-    "@jupyterlab/csvviewer-extension": "~4.0.1",
-    "@jupyterlab/debugger": "~4.0.1",
-    "@jupyterlab/debugger-extension": "~4.0.1",
-    "@jupyterlab/docmanager": "~4.0.1",
-    "@jupyterlab/docmanager-extension": "~4.0.1",
-    "@jupyterlab/documentsearch": "~4.0.1",
-    "@jupyterlab/documentsearch-extension": "~4.0.1",
-    "@jupyterlab/extensionmanager": "~4.0.1",
-    "@jupyterlab/extensionmanager-extension": "~4.0.1",
-    "@jupyterlab/filebrowser": "~4.0.1",
-    "@jupyterlab/filebrowser-extension": "~4.0.1",
-    "@jupyterlab/fileeditor": "~4.0.1",
-    "@jupyterlab/fileeditor-extension": "~4.0.1",
-    "@jupyterlab/htmlviewer": "~4.0.1",
-    "@jupyterlab/htmlviewer-extension": "~4.0.1",
-    "@jupyterlab/hub-extension": "~4.0.1",
-    "@jupyterlab/javascript-extension": "~4.0.1",
-    "@jupyterlab/json-extension": "~4.0.1",
-    "@jupyterlab/lsp": "~4.0.1",
-    "@jupyterlab/lsp-extension": "~4.0.1",
-    "@jupyterlab/mainmenu": "~4.0.1",
-    "@jupyterlab/mainmenu-extension": "~4.0.1",
-    "@jupyterlab/markedparser-extension": "~4.0.1",
-    "@jupyterlab/mathjax-extension": "~4.0.1",
-    "@jupyterlab/metadataform": "~4.0.1",
-    "@jupyterlab/metadataform-extension": "~4.0.1",
-    "@jupyterlab/notebook": "~4.0.1",
-    "@jupyterlab/notebook-extension": "~4.0.1",
-    "@jupyterlab/observables": "~5.0.1",
-    "@jupyterlab/outputarea": "~4.0.1",
-    "@jupyterlab/pdf-extension": "~4.0.1",
-    "@jupyterlab/rendermime": "~4.0.1",
-    "@jupyterlab/rendermime-interfaces": "~3.8.1",
-    "@jupyterlab/running-extension": "~4.0.1",
-    "@jupyterlab/services": "~7.0.1",
-    "@jupyterlab/settingeditor": "~4.0.1",
-    "@jupyterlab/settingeditor-extension": "~4.0.1",
-    "@jupyterlab/settingregistry": "~4.0.1",
-    "@jupyterlab/shortcuts-extension": "~4.0.1",
-    "@jupyterlab/statedb": "~4.0.1",
-    "@jupyterlab/statusbar": "~4.0.1",
-    "@jupyterlab/terminal": "~4.0.1",
-    "@jupyterlab/terminal-extension": "~4.0.1",
-    "@jupyterlab/theme-dark-extension": "~4.0.1",
-    "@jupyterlab/theme-light-extension": "~4.0.1",
-    "@jupyterlab/toc-extension": "~6.0.1",
-    "@jupyterlab/tooltip": "~4.0.1",
-    "@jupyterlab/tooltip-extension": "~4.0.1",
-    "@jupyterlab/translation": "~4.0.1",
-    "@jupyterlab/translation-extension": "~4.0.1",
-    "@jupyterlab/ui-components": "~4.0.1",
-    "@jupyterlab/ui-components-extension": "~4.0.1",
-    "@jupyterlab/vega5-extension": "~4.0.1",
-    "@lezer/common": "~1.0.2",
-    "@lezer/highlight": "~1.1.4",
+    "@jupyterlab/application": "~4.0.2",
+    "@jupyterlab/application-extension": "~4.0.2",
+    "@jupyterlab/apputils": "~4.1.2",
+    "@jupyterlab/apputils-extension": "~4.0.2",
+    "@jupyterlab/attachments": "~4.0.2",
+    "@jupyterlab/cell-toolbar": "~4.0.2",
+    "@jupyterlab/cell-toolbar-extension": "~4.0.2",
+    "@jupyterlab/celltags-extension": "~4.0.2",
+    "@jupyterlab/codeeditor": "~4.0.2",
+    "@jupyterlab/codemirror": "~4.0.2",
+    "@jupyterlab/codemirror-extension": "~4.0.2",
+    "@jupyterlab/completer": "~4.0.2",
+    "@jupyterlab/completer-extension": "~4.0.2",
+    "@jupyterlab/console": "~4.0.2",
+    "@jupyterlab/console-extension": "~4.0.2",
+    "@jupyterlab/coreutils": "~6.0.2",
+    "@jupyterlab/csvviewer-extension": "~4.0.2",
+    "@jupyterlab/debugger": "~4.0.2",
+    "@jupyterlab/debugger-extension": "~4.0.2",
+    "@jupyterlab/docmanager": "~4.0.2",
+    "@jupyterlab/docmanager-extension": "~4.0.2",
+    "@jupyterlab/documentsearch": "~4.0.2",
+    "@jupyterlab/documentsearch-extension": "~4.0.2",
+    "@jupyterlab/extensionmanager": "~4.0.2",
+    "@jupyterlab/extensionmanager-extension": "~4.0.2",
+    "@jupyterlab/filebrowser": "~4.0.2",
+    "@jupyterlab/filebrowser-extension": "~4.0.2",
+    "@jupyterlab/fileeditor": "~4.0.2",
+    "@jupyterlab/fileeditor-extension": "~4.0.2",
+    "@jupyterlab/htmlviewer": "~4.0.2",
+    "@jupyterlab/htmlviewer-extension": "~4.0.2",
+    "@jupyterlab/hub-extension": "~4.0.2",
+    "@jupyterlab/javascript-extension": "~4.0.2",
+    "@jupyterlab/json-extension": "~4.0.2",
+    "@jupyterlab/lsp": "~4.0.2",
+    "@jupyterlab/lsp-extension": "~4.0.2",
+    "@jupyterlab/mainmenu": "~4.0.2",
+    "@jupyterlab/mainmenu-extension": "~4.0.2",
+    "@jupyterlab/markdownviewer": "~4.0.2",
+    "@jupyterlab/markdownviewer-extension": "~4.0.2",
+    "@jupyterlab/markedparser-extension": "~4.0.2",
+    "@jupyterlab/mathjax-extension": "~4.0.2",
+    "@jupyterlab/metadataform": "~4.0.2",
+    "@jupyterlab/metadataform-extension": "~4.0.2",
+    "@jupyterlab/notebook": "~4.0.2",
+    "@jupyterlab/notebook-extension": "~4.0.2",
+    "@jupyterlab/observables": "~5.0.2",
+    "@jupyterlab/outputarea": "~4.0.2",
+    "@jupyterlab/pdf-extension": "~4.0.2",
+    "@jupyterlab/rendermime": "~4.0.2",
+    "@jupyterlab/rendermime-interfaces": "~3.8.2",
+    "@jupyterlab/running-extension": "~4.0.2",
+    "@jupyterlab/services": "~7.0.2",
+    "@jupyterlab/settingeditor": "~4.0.2",
+    "@jupyterlab/settingeditor-extension": "~4.0.2",
+    "@jupyterlab/settingregistry": "~4.0.2",
+    "@jupyterlab/shortcuts-extension": "~4.0.2",
+    "@jupyterlab/statedb": "~4.0.2",
+    "@jupyterlab/statusbar": "~4.0.2",
+    "@jupyterlab/terminal": "~4.0.2",
+    "@jupyterlab/terminal-extension": "~4.0.2",
+    "@jupyterlab/theme-dark-extension": "~4.0.2",
+    "@jupyterlab/theme-light-extension": "~4.0.2",
+    "@jupyterlab/toc-extension": "~6.0.2",
+    "@jupyterlab/tooltip": "~4.0.2",
+    "@jupyterlab/tooltip-extension": "~4.0.2",
+    "@jupyterlab/translation": "~4.0.2",
+    "@jupyterlab/translation-extension": "~4.0.2",
+    "@jupyterlab/ui-components": "~4.0.2",
+    "@jupyterlab/ui-components-extension": "~4.0.2",
+    "@jupyterlab/vega5-extension": "~4.0.2",
+    "@lezer/common": "~1.0.3",
+    "@lezer/highlight": "~1.1.6",
     "@lumino/algorithm": "~2.0.0",
     "@lumino/application": "~2.1.1",
     "@lumino/commands": "~2.1.1",
@@ -108,7 +111,7 @@
     "@lumino/widgets": "~2.1.1",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "yjs": "~13.6.1"
+    "yjs": "~13.6.2"
   },
   "dependencies": {
     "@jupyter-notebook/application": "^7.0.0-beta.4",
@@ -124,6 +127,7 @@
     "@jupyter-notebook/ui-components": "^7.0.0-beta.4",
     "@jupyterlab/application-extension": "^4.0.1",
     "@jupyterlab/apputils-extension": "^4.0.1",
+    "@jupyterlab/attachments": "^4.0.1",
     "@jupyterlab/cell-toolbar-extension": "^4.0.1",
     "@jupyterlab/celltags-extension": "^4.0.1",
     "@jupyterlab/codemirror": "^4.0.1",
@@ -145,6 +149,7 @@
     "@jupyterlab/lsp": "^4.0.1",
     "@jupyterlab/lsp-extension": "^4.0.1",
     "@jupyterlab/mainmenu-extension": "^4.0.1",
+    "@jupyterlab/markdownviewer-extension": "^4.0.1",
     "@jupyterlab/markedparser-extension": "^4.0.1",
     "@jupyterlab/mathjax-extension": "^4.0.1",
     "@jupyterlab/metadataform-extension": "^4.0.1",
@@ -322,7 +327,8 @@
         "@jupyterlab/fileeditor-extension": [
           "@jupyterlab/fileeditor-extension:completer",
           "@jupyterlab/fileeditor-extension:search"
-        ]
+        ],
+        "@jupyterlab/markdownviewer-extension": true
       }
     },
     "singletonPackages": [
@@ -347,6 +353,7 @@
       "@jupyterlab/htmlviewer",
       "@jupyterlab/lsp",
       "@jupyterlab/mainmenu",
+      "@jupyterlab/markdownviewer",
       "@jupyterlab/metadataform",
       "@jupyterlab/notebook",
       "@jupyterlab/observables",

docs/source/configuration.md

@@ -5,7 +5,6 @@
 :maxdepth: 1
 
 configuring/config_overview
-configuring/plugins
 Security <https://jupyter-server.readthedocs.io/en/stable/operators/security.html>
 extending/index.rst
 ```

docs/source/configuring/interface_customization.md

@@ -0,0 +1,62 @@
+# Interface Customization
+
+Multiple elements in the Notebook interface can be customized via the Settings Editor.
+
+## Layout
+
+By default some widgets are displayed in pre-defined parts of the user interface, which are often called "areas" or "regions".
+For example the table of contents will be displayed in the `left` area by default, while the debugger will be displayed in the `right` area.
+
+However the positioning of some of these components can also be customized via the Settings Editor. Below are a few examples of how to do this.
+
+### Open the Markdown Preview on the left
+
+It is often useful to be able to see a rendered preview of a Markdown document while editing it.
+
+By default the Markdown Preview opens on the right side of the application. However it is also possible to open it on the left side by changing the Notebook Shell settings in the Advanced Settings Editor:
+
+```json
+{
+  "layout": {
+    "Markdown Preview": {
+      "area": "left"
+    }
+  }
+}
+```
+
+![a screenshot showing the markdown preview in Notebook 7](https://github.com/jupyter/notebook/assets/591645/3faf0823-ec6f-4d5f-a66f-d6f53dc383de)
+
+### Configuring a third-party widget
+
+Third-party extensions can also add widgets to the application shell. This is for example the case with the [Voila extension](https://github.com/voila-dashboards/voila), which adds a preview widget to visualize a notebook as a dashboard.
+
+By default in JupyterLab the Voila Preview is added to the `main` area next to the corresponding notebook. With Notebook 7 it is possible to move the Voila Preview to the `right` area by changing the Notebook Shell setting in the Advanced Settings Editor as follows:
+
+```json
+{
+  "layout": {
+    "Voila Preview": {
+      "area": "right"
+    }
+  }
+}
+```
+
+![a screenshot showing the voila preview in Notebook 7](https://github.com/jupyter/notebook/assets/591645/524ade3b-05de-4d3b-8ff9-089f2d38ac77)
+
+```{note}
+Refer to the [JupyterLab Layout Documentation](https://jupyterlab.readthedocs.io/en/latest/user/interface_customization.html#layout)
+to learn more about the default positioning of other UI elements.
+```
+
+## Toolbars, Menu bar and Context Menu
+
+It is also possible to customize toolbars, menus and context menu entries via the Settings Editor.
+
+For example the items of the notebook toolbar can be reordered, or some menu entries can be hidden.
+
+```{note}
+Refer to the [JupyterLab Documentation](https://jupyterlab.readthedocs.io/en/latest/user/interface_customization.html)
+to learn more about general interface customization via the settings editor.
+```

docs/source/user-documentation.md

@@ -10,6 +10,8 @@ ui_components
 notebook_7_features
 examples/Notebook/examples_index.rst
 custom_css
+configuring/plugins
+configuring/interface_customization
 troubleshooting
 changelog
 ```

packages/application-extension/schema/shell.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "title": "Notebook Shell",
+  "description": "Notebook Shell layout settings.",
+  "properties": {
+    "layout": {
+      "$ref": "#/definitions/layout",
+      "type": "object",
+      "title": "Customize shell widget positioning",
+      "description": "Overrides default widget position in the application layout",
+      "default": {
+        "Markdown Preview": { "area": "right" }
+      }
+    }
+  },
+  "additionalProperties": false,
+  "type": "object",
+  "definitions": {
+    "layout": {
+      "type": "object",
+      "properties": {
+        "[\\w-]+": {
+          "type": "object",
+          "properties": {
+            "area": {
+              "enum": ["left", "right"]
+            }
+          },
+          "additionalProperties": false
+        }
+      }
+    }
+  }
+}

packages/application-extension/src/index.ts

@@ -384,14 +384,36 @@ const rendermime: JupyterFrontEndPlugin<IRenderMimeRegistry> = {
  */
 const shell: JupyterFrontEndPlugin<INotebookShell> = {
   id: '@jupyter-notebook/application-extension:shell',
-  activate: (app: JupyterFrontEnd) => {
+  autoStart: true,
+  provides: INotebookShell,
+  optional: [ISettingRegistry],
+  activate: (
+    app: JupyterFrontEnd,
+    settingRegistry: ISettingRegistry | null
+  ) => {
     if (!(app.shell instanceof NotebookShell)) {
       throw new Error(`${shell.id} did not find a NotebookShell instance.`);
     }
-    return app.shell;
+    const notebookShell = app.shell;
+
+    if (settingRegistry) {
+      settingRegistry
+        .load(shell.id)
+        .then((settings) => {
+          // Add a layer of customization to support app shell mode
+          const customLayout = settings.composite['layout'] as any;
+
+          // Restore the layout.
+          void notebookShell.restoreLayout(customLayout);
+        })
+        .catch((reason) => {
+          console.error('Fail to load settings for the layout restorer.');
+          console.error(reason);
+        });
+    }
+
+    return notebookShell;
   },
-  autoStart: true,
-  provides: INotebookShell,
 };
 
 /**