Align BaseNotebook with Notebook feat'; part 1 (#350)

* Fix shortcuts

* More shortcuts fixes

* Fix completer

* Finalize cell sidebar as extension
Remove store from `BaseNotebook`

* Use extension for cell sidebar

* Use homogeneous `commands` name for command registry

* Migrate all sidebar as extension

* Fix styling for sidebar as extension

* Fix cell sidebar styling

* Restore ipywidgets

* Remove obsolete FIXME

* Automatic application of license header

---------

Co-authored-by: Frédéric Collonval <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: fcollonval

packages/react/src/app/tabs/components/NotebookComponent.tsx

@@ -4,10 +4,10 @@
  * MIT License
  */
 
+import { CellSidebarExtension } from '../../../components';
 import Notebook from '../../../components/notebook/Notebook';
-import CellSidebarNew from './../../../components/notebook/cell/sidebar/CellSidebarButton';
-
 import nbformat from './../../..//examples/notebooks/NotebookExample1.ipynb.json';
+import CellSidebarNew from './../../../components/notebook/cell/sidebar/CellSidebarButton';
 
 export const NotebookComponent = () => {
   return (
@@ -18,7 +18,7 @@ export const NotebookComponent = () => {
         id="notebook-id"
         cellSidebarMargin={60}
         height="calc(100vh - 2.6rem)" // (Height - Toolbar Height).
-        CellSidebar={CellSidebarNew}
+        extensions={[new CellSidebarExtension({ factory: CellSidebarNew })]}
       />
     </>
   );

packages/react/src/components/cell/CellCommands.ts

@@ -15,20 +15,20 @@ const cmdIds = {
 };
 
 export const CellCommands = (
-  commandRegistry: CommandRegistry,
+  commands: CommandRegistry,
   cell: CodeCell | MarkdownCell | RawCell,
   completerHandler: CompletionHandler,
   cellAdapter: CellAdapter,
 ): void => {
-  commandRegistry.addCommand(cmdIds.invoke, {
+  commands.addCommand(cmdIds.invoke, {
     label: 'Completer: Invoke',
     execute: () => completerHandler.invoke(),
   });
-  commandRegistry.addCommand(cmdIds.select, {
+  commands.addCommand(cmdIds.select, {
     label: 'Completer: Select',
     execute: () => completerHandler.completer.selectActive(),
   });
-  commandRegistry.addCommand('run:cell', {
+  commands.addCommand('run:cell', {
     execute: () => {
       if (cell instanceof CodeCell) {
         cellAdapter.execute();
@@ -37,12 +37,12 @@ export const CellCommands = (
       }
     },
   });
-  commandRegistry.addKeyBinding({
+  commands.addKeyBinding({
     selector: '.jp-InputArea-editor.jp-mod-completer-enabled',
     keys: ['Tab'],
     command: cmdIds.invoke,
   });
-  commandRegistry.addKeyBinding({
+  commands.addKeyBinding({
     selector: '.jp-InputArea-editor',
     keys: ['Shift Enter'],
     command: 'run:cell',
@@ -54,7 +54,7 @@ export const CellCommands = (
       command: cmdIds.select,
     },
   ];
-  bindings.map(binding => commandRegistry.addKeyBinding(binding));
+  bindings.map(binding => commands.addKeyBinding(binding));
 };
 
 export default CellCommands;