Add react-perfect-scrollbar directly to notebook (#13338)

Author: jbicker

packages/notebook/package.json

@@ -7,6 +7,7 @@
     "@theia/editor": "1.46.0",
     "@theia/filesystem": "1.46.0",
     "@theia/monaco": "1.46.0",
+    "react-perfect-scrollbar": "^1.5.8",
     "uuid": "^8.3.2"
   },
   "publishConfig": {

packages/notebook/src/browser/notebook-editor-widget.tsx

@@ -30,6 +30,8 @@ import { NotebookEditorWidgetService } from './service/notebook-editor-widget-se
 import { NotebookMainToolbarRenderer } from './view/notebook-main-toolbar';
 import { Deferred } from '@theia/core/lib/common/promise-util';
 
+const PerfectScrollbar = require('react-perfect-scrollbar');
+
 export const NotebookEditorWidgetContainerFactory = Symbol('NotebookEditorWidgetContainerFactory');
 
 export function createNotebookEditorWidgetContainer(parent: interfaces.Container, props: NotebookEditorProps): interfaces.Container {
@@ -102,6 +104,10 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
         this.id = NOTEBOOK_EDITOR_ID_PREFIX + this.props.uri.toString();
         this.node.tabIndex = -1;
 
+        this.scrollOptions = {
+            suppressScrollY: true
+        };
+
         this.title.closable = true;
         this.update();
 
@@ -145,12 +151,14 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
 
     protected render(): ReactNode {
         if (this._model) {
-            return <div>
+            return <div className='theia-notebook-main-container'>
                 {this.notebookMainToolbarRenderer.render(this._model)}
-                <NotebookCellListView renderers={this.renderers}
-                    notebookModel={this._model}
-                    toolbarRenderer={this.cellToolbarFactory}
-                    commandRegistry={this.commandRegistry} />
+                <PerfectScrollbar className='theia-notebook-scroll-container'>
+                    <NotebookCellListView renderers={this.renderers}
+                        notebookModel={this._model}
+                        toolbarRenderer={this.cellToolbarFactory}
+                        commandRegistry={this.commandRegistry} />
+                </PerfectScrollbar>
             </div>;
         } else {
             return <div></div>;

packages/notebook/src/browser/style/index.css

@@ -161,9 +161,20 @@
   flex-direction: column;
 }
 
+.theia-notebook-main-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.theia-notebook-scroll-container {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+}
+
 .theia-notebook-main-toolbar {
-  position: sticky;
-  top: 0;
   background: var(--theia-editor-background);
   display: flex;
   flex-direction: row;

yarn.lock

@@ -9700,7 +9700,7 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-perfect-scrollbar@^1.5.3:
+react-perfect-scrollbar@^1.5.3, react-perfect-scrollbar@^1.5.8:
   version "1.5.8"
   resolved "https://registry.yarnpkg.com/react-perfect-scrollbar/-/react-perfect-scrollbar-1.5.8.tgz#380959387a325c5c9d0268afc08b3f73ed5b3078"
   integrity sha512-bQ46m70gp/HJtiBOF3gRzBISSZn8FFGNxznTdmTG8AAwpxG1bJCyn7shrgjEvGSQ5FJEafVEiosY+ccER11OSA==