feat: collaborative notebook (#346)

echarles · web-flow · commit a035f88458b9 · 2025-01-14T14:19:23.000+01:00
* chore: notebook collaborative

* chore: collaborative notebook

* chore: collaboration

* deps: jupyter ydoc

* fix: build

* license
diff --git a/LICENSE b/LICENSE
@@ -25,4 +25,5 @@ This repository contains source code from the following repositories under BSD-3
 - JupyterLab https://github.com/jupyterlab/jupyterlab
 - JupyterLite https://github.com/jupyterlite/jupyterlite
 - JupyterLab KernelSpy: https://github.com/jupyterlab-contrib/jupyterlab-kernelspy
-- JupyterLab Variables Inspecdtor: https://github.com/jupyterlab-contrib/jupyterlab-variableInspector
+- JupyterLab Variables Inspector: https://github.com/jupyterlab-contrib/jupyterlab-variableInspector
+- Jupyter Collaboration: https://github.com/jupyterlab/jupyter-collaboration
diff --git a/examples/lexical/src/App.tsx b/examples/lexical/src/App.tsx
@@ -90,10 +90,10 @@ const Tabs = () => {
         <StyledNotebook>
           <Box mb={3}>
             <Notebook
-              uid={NOTEBOOK_UID}
+              id={NOTEBOOK_UID}
               nbformat={notebookContent}
               CellSidebar={CellSidebar}
-              />
+            />
             <Button
               onClick={(e: React.MouseEvent) => {
                 e.preventDefault();
@@ -119,7 +119,7 @@ export default function App() {
       <div className="App">
         <h1>Jupyter UI ❤️ Lexical</h1>
       </div>
-      <Jupyter>
+      <Jupyter startDefaultKernel>
         <LexicalProvider>
           <Tabs/>
         </LexicalProvider>
diff --git a/examples/lexical/src/context/LexicalContext.tsx b/examples/lexical/src/context/LexicalContext.tsx
@@ -7,12 +7,12 @@
 import React, {useState, createContext, useContext} from 'react';
 import { LexicalEditor } from "lexical";
 
-type LexicalCntextType = {
+type LexicalContextType = {
   editor?: LexicalEditor;
   setEditor: (editor?: LexicalEditor) => void;
 };
 
-const context = createContext<LexicalCntextType | undefined>(undefined);
+const context = createContext<LexicalContextType | undefined>(undefined);
 
 export function useLexical() {
   const lexicalContext = useContext(context);
diff --git a/package.json b/package.json
@@ -133,7 +133,7 @@
     "@jupyterlab/ui-components": "4.1.0",
     "@jupyterlite/server": "^0.4.0",
     "@jupyterlite/server-extension": "^0.4.0",
-    "@jupyter/ydoc": "1.1.1",
+    "@jupyter/ydoc": "3.0.2",
     "@lumino/algorithm": "2.0.1",
     "@lumino/application": "2.2.0",
     "@lumino/collections": "2.0.1",
@@ -244,7 +244,7 @@
     "@jupyterlab/ui-components": "4.1.0",
     "@jupyterlite/server": "^0.4.0",
     "@jupyterlite/server-extension": "^0.4.0",
-    "@jupyter/ydoc": "1.1.1",
+    "@jupyter/ydoc": "3.0.2",
     "@lumino/algorithm": "2.0.1",
     "@lumino/application": "2.2.0",
     "@lumino/collections": "2.0.1",
diff --git a/packages/lexical/package.json b/packages/lexical/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/jupyter-lexical",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Jupyter UI for Lexical",
   "license": "MIT",
   "main": "lib/index.js",
diff --git a/packages/lexical/src/components/JupyterCellComponent.tsx b/packages/lexical/src/components/JupyterCellComponent.tsx
@@ -9,9 +9,9 @@ import { Cell } from '@datalayer/jupyter-react';
 export const JupyterCellComponent = (props: any) => {
   return (
     <Cell
-//      startDefaultKernel={true}
+//      startDefaultKernel
       source="print('Hello Jupyter React')"
-      autoStart={true}
+      autoStart
     />
   )
 }
diff --git a/packages/lexical/src/examples/App1.tsx b/packages/lexical/src/examples/App1.tsx
@@ -41,7 +41,7 @@ export const App1 = () => {
       <div className="App">
         <h1>Jupyter UI ❤️ Lexical</h1>
       </div>
-      <Jupyter startDefaultKernel={true}>
+      <Jupyter startDefaultKernel>
         <LexicalProvider>
           <LexicalEditor/>
         </LexicalProvider>
diff --git a/packages/lexical/src/examples/App2.tsx b/packages/lexical/src/examples/App2.tsx
@@ -119,7 +119,7 @@ export default function App() {
       <div className="App">
         <h1>Jupyter UI ❤️ Lexical</h1>
       </div>
-      <Jupyter startDefaultKernel={true}>
+      <Jupyter startDefaultKernel>
         <LexicalProvider>
           <Tabs/>
         </LexicalProvider>
diff --git a/packages/lexical/src/examples/index.tsx b/packages/lexical/src/examples/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import { createRoot } from "react-dom/client";
-import App from "./App1";
+import App from "./App2";
 
 const rootElement = document.getElementById("root");
 
diff --git a/packages/lexical/src/examples/plugins/DraggableBlockPlugin/index.tsx b/packages/lexical/src/examples/plugins/DraggableBlockPlugin/index.tsx
@@ -421,7 +421,7 @@ function useDraggableBlockMenu(
       <div
         className="icon draggable-block-menu"
         ref={menuRef}
-        draggable={true}
+        draggable
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}>
         <div className={isEditable ? 'icon' : ''} />
diff --git a/packages/lexical/src/examples/plugins/ToolbarPlugin.tsx b/packages/lexical/src/examples/plugins/ToolbarPlugin.tsx
@@ -228,7 +228,7 @@ function FloatingLinkEditor({ editor }: any) {
 function Select({ onChange, className, options, value }: any) {
   return (
     <select className={className} onChange={onChange} value={value}>
-      <option hidden={true} value="" />
+      <option hidden value="" />
       {options.map((option: string) => (
         <option key={option} value={option}>
           {option}
diff --git a/packages/lexical/src/nodes/ImageNode.tsx b/packages/lexical/src/nodes/ImageNode.tsx
@@ -547,7 +547,7 @@ export class ImageNode extends DecoratorNode<JSX.Element> {
         nodeKey={this.getKey()}
         showCaption={this.__showCaption}
         caption={this.__caption}
-        resizable={true}
+        resizable
       />
     );
   }
diff --git a/packages/lexical/src/nodes/YouTubeNode.tsx b/packages/lexical/src/nodes/YouTubeNode.tsx
@@ -49,7 +49,7 @@ function YouTubeComponent({
         src={`https://www.youtube.com/embed/${videoID}`}
         frameBorder="0"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowFullScreen={true}
+        allowFullScreen
         title="YouTube video"
       />
     </BlockWithAlignableContents>
diff --git a/packages/lexical/src/ui/EquationEditor.tsx b/packages/lexical/src/ui/EquationEditor.tsx
@@ -69,7 +69,7 @@ function InlineEquationEditor({
         className="EquationEditor_inlineEditor"
         value={equation}
         onChange={onChange}
-        autoFocus={true}
+        autoFocus
         ref={inputRef}
       />
       <span className="EquationEditor_dollarSign">$</span>
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/jupyter-react",
-  "version": "0.19.2",
+  "version": "0.19.3",
   "description": "Jupyter React - React.js components 100% compatible with Jupyter.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -72,9 +72,8 @@
     "@jupyter-widgets/html-manager": "^1.0.0",
     "@jupyter-widgets/jupyterlab-manager": "^5.0.0",
     "@jupyter-widgets/output": "^6.0.0",
-    "@jupyter/collaboration-extension": "^1.0.0",
     "@jupyter/web-components": "^0.15.3",
-    "@jupyter/ydoc": "^2.0.1",
+    "@jupyter/ydoc": "3.0.2",
     "@jupyterlab/application": "^4.0.0",
     "@jupyterlab/application-extension": "^4.0.0",
     "@jupyterlab/apputils": "^4.0.0",
@@ -151,6 +150,7 @@
     "usehooks-ts": "^2.9.1",
     "utf-8-validate": "^6.0.3",
     "wildcard-match": "^5.1.2",
+    "y-websocket": "^2.1.0",
     "zustand": "^4.4.1"
   },
   "devDependencies": {
diff --git a/packages/react/src/components/jupyterlab/JupyterLabApp.tsx b/packages/react/src/components/jupyterlab/JupyterLabApp.tsx
@@ -59,21 +59,21 @@ const JupyterLabAppComponent = (props: JupyterLabAppProps) => {
     theme,
     width,
   } = props;
-  const { serviceManager, collaborative } = useJupyter({
+  const { serviceManager } = useJupyter({
     serverless,
     serviceManager: propsServiceManager,
     startDefaultKernel,
   });
   const defaultMimeExtensionPromises = useMemo(
     () =>
       props.mimeRendererPromises ??
-      JupyterLabAppCorePlugins(collaborative).mimeExtensionPromises,
+      JupyterLabAppCorePlugins().mimeExtensionPromises,
     []
   );
   const defaultExtensionPromises = useMemo(
     () =>
       props.pluginPromises ??
-      JupyterLabAppCorePlugins(collaborative).extensionPromises,
+      JupyterLabAppCorePlugins().extensionPromises,
     []
   );
   const ref = useRef<HTMLDivElement>(null);
@@ -84,7 +84,6 @@ const JupyterLabAppComponent = (props: JupyterLabAppProps) => {
         ...props,
         mimeRendererPromises: defaultMimeExtensionPromises,
         pluginPromises: defaultExtensionPromises,
-        collaborative,
         serviceManager,
       });
       adapter.ready.then(() => {
diff --git a/packages/react/src/components/jupyterlab/JupyterLabAppPlugins.ts b/packages/react/src/components/jupyterlab/JupyterLabAppPlugins.ts
@@ -35,7 +35,7 @@ export const JupyterLabAppMinimumPlugins = {
   ] as Array<Promise<IRenderMime.IExtensionModule>>,
 };
 
-export const JupyterLabAppCorePlugins = (collaborative?: boolean) => {
+export const JupyterLabAppCorePlugins = () => {
   return {
     extensionPromises: [
       import('@jupyterlab/application-extension'),
diff --git a/packages/react/src/components/notebook/Notebook.tsx b/packages/react/src/components/notebook/Notebook.tsx
@@ -7,20 +7,22 @@
 import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { Box } from '@primer/react';
+import { CommandRegistry } from '@lumino/commands';
+import { URLExt } from '@jupyterlab/coreutils';
 import { Cell, ICellModel } from '@jupyterlab/cells';
 import { NotebookPanel, INotebookModel } from '@jupyterlab/notebook';
-import { CommandRegistry } from '@lumino/commands';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
 import { INotebookContent } from '@jupyterlab/nbformat';
 import { ServiceManager, Kernel as JupyterKernel } from '@jupyterlab/services';
-import { useJupyter, Lite, Kernel } from './../../jupyter';
+import { WebsocketProvider as YWebsocketProvider } from 'y-websocket';
+import { useJupyter, Lite, Kernel, requestDocSession, COLLABORATION_ROOM_URL_PATH } from './../../jupyter';
 import { asObservable, Lumino } from '../lumino';
+import { newUuid } from '../../utils';
+import { OnSessionConnection, KernelTransfer } from '../../state';
 import { CellMetadataEditor } from './cell/metadata';
 import { ICellSidebarProps } from './cell/sidebar';
 import { INotebookToolbarProps } from './toolbar/NotebookToolbar';
-import { newUuid } from '../../utils';
-import { OnSessionConnection, KernelTransfer } from '../../state';
 import { useNotebookStore } from './NotebookState';
 import { NotebookAdapter } from './NotebookAdapter';
 
@@ -50,6 +52,7 @@ export type INotebookProps = {
   Toolbar?: (props: INotebookToolbarProps) => JSX.Element;
   cellMetadataPanel: boolean;
   cellSidebarMargin: number;
+  collaborative?: boolean;
   extensions: DatalayerNotebookExtension[]
   height?: string;
   id: string;
@@ -97,6 +100,7 @@ export const Notebook = (props: INotebookProps) => {
   });
   const {
     Toolbar,
+    collaborative,
     extensions,
     height,
     maxHeight,
@@ -114,7 +118,7 @@ export const Notebook = (props: INotebookProps) => {
   const notebookStore = useNotebookStore();
   const portals = notebookStore.selectNotebookPortals(id);
   // Bootstrap the Notebook Adapter.
-  const bootstrapAdapter = (serviceManager?: ServiceManager.IManager, kernel?: Kernel) => {
+  const bootstrapAdapter = async (collaborative: boolean, serviceManager?: ServiceManager.IManager, kernel?: Kernel) => {
     const adapter = new NotebookAdapter({
       ...props,
       id,
@@ -132,18 +136,35 @@ export const Notebook = (props: INotebookProps) => {
       extension.createNew(adapter.notebookPanel!, adapter.context!);
       setExtensionComponents(extensionComponents.concat(extension.component ?? <></>));
     });
-    // Update the global state.
-    notebookStore.update({ id, state: { adapter } });
-    // Update the global state based on events.
-    adapter.notebookPanel?.model?.contentChanged.connect((notebookModel, _) => {
-      notebookStore.changeModel({ id, notebookModel })
-    });
+    if (collaborative) {
+      // Setup Collaboration.
+      const ydoc = (adapter.notebookPanel?.model?.sharedModel as any).ydoc;
+      const session = await requestDocSession("json", "notebook", path!);
+      const yWebsocketProvider = new YWebsocketProvider(
+        URLExt.join(serviceManager?.serverSettings.wsUrl!, COLLABORATION_ROOM_URL_PATH),
+        `${session.format}:${session.type}:${session.fileId}`,
+        ydoc,
+        {
+          disableBc: true,
+          params: { sessionId: session.sessionId },
+  //       awareness: this._awareness
+        }
+      );
+      console.log('Collaboration is setup with websocket provider.', yWebsocketProvider);
+      // Update the notebook state with the adapter.
+      notebookStore.update({ id, state: { adapter } });
+      // Update the notebook state further to events.
+      adapter.notebookPanel?.model?.contentChanged.connect((notebookModel, _) => {
+        notebookStore.changeModel({ id, notebookModel });
+      });
+    }
     /*
-    adapter.notebookPanel?.model!.sharedModel.changed.connect((_, notebookChange) => {
-      notebookStore.notebookChange({ id, notebookChange });
+    adapter.notebookPanel?.model?.sharedModel.changed.connect((_, notebookChange) => {
+      notebookStore.changeNotebook({ id, notebookChange });
     });
+    /*
     adapter.notebookPanel?.content.modelChanged.connect((notebook, _) => {
-      dispatÅch(notebookStore.notebookChange({ id, notebook }));
+      notebookStore.changeModel({ id, notebookModel: notebook.model! });
     });
     */
     adapter.notebookPanel?.content.activeCellChanged.connect((_, cellModel) => {
@@ -185,12 +206,12 @@ export const Notebook = (props: INotebookProps) => {
     });
   }
   //
-  const createAdapter = (serviceManager?: ServiceManager.IManager, kernel?: Kernel) => {
+  const createAdapter = (collaborative: boolean, serviceManager?: ServiceManager.IManager, kernel?: Kernel) => {
     if (!kernel) {
-      bootstrapAdapter(serviceManager, kernel);
+      bootstrapAdapter(collaborative, serviceManager, kernel);
     } else {
       kernel.ready.then(() => {
-        bootstrapAdapter(serviceManager, kernel);
+        bootstrapAdapter(collaborative, serviceManager, kernel);
       });
     }
   }
@@ -206,12 +227,12 @@ export const Notebook = (props: INotebookProps) => {
   // Mutation Effects.
   useEffect(() => {
     if (serviceManager && serverless) {
-      createAdapter(serviceManager, kernel);
+      createAdapter(collaborative ?? false, serviceManager, kernel);
     }
     else if (serviceManager && kernel) {
-      createAdapter(serviceManager, kernel);
+      createAdapter(collaborative ?? false, serviceManager, kernel);
     }
-  }, [serviceManager, kernel]);
+  }, [collaborative, serviceManager, kernel]);
   useEffect(() => {
     if (adapter && adapter.kernel !== kernel) {
       adapter.setKernel(kernel);
@@ -235,15 +256,15 @@ export const Notebook = (props: INotebookProps) => {
   useEffect(() => {
     if (adapter && path && adapter.path !== path) {
       disposeAdapter();
-      createAdapter(serviceManager);
+      createAdapter(collaborative ?? false, serviceManager);
     }
   }, [path]);
   useEffect(() => {
     if (adapter && url && adapter.url !== url) {
       disposeAdapter();
-      createAdapter(serviceManager);
+      createAdapter(collaborative ?? false, serviceManager);
     }
-  }, [url]);
+  }, [collaborative, url]);
   // Dispose Effects.
   useEffect(() => {
     return () => {
@@ -339,6 +360,7 @@ export const Notebook = (props: INotebookProps) => {
 Notebook.defaultProps = {
   cellMetadataPanel: false,
   cellSidebarMargin: 120,
+  collaborative: false,
   extensions: [],
   height: '100vh',
   kernelClients: [],
diff --git a/packages/react/src/examples/NotebookCollaborative.tsx b/packages/react/src/examples/NotebookCollaborative.tsx
diff --git a/packages/react/src/jupyter/JupyterConfig.ts b/packages/react/src/jupyter/JupyterConfig.ts
diff --git a/packages/react/src/jupyter/JupyterContext.tsx b/packages/react/src/jupyter/JupyterContext.tsx
diff --git a/packages/react/src/jupyter/collaboration/DatalayerCollaboration.ts b/packages/react/src/jupyter/collaboration/DatalayerCollaboration.ts
diff --git a/packages/react/src/jupyter/collaboration/JupyterCollaboration.ts b/packages/react/src/jupyter/collaboration/JupyterCollaboration.ts
diff --git a/packages/react/src/jupyter/collaboration/index.ts b/packages/react/src/jupyter/collaboration/index.ts
diff --git a/packages/react/src/jupyter/index.ts b/packages/react/src/jupyter/index.ts
diff --git a/packages/react/src/state/JupyterReactState.ts b/packages/react/src/state/JupyterReactState.ts
diff --git a/packages/react/webpack.config.js b/packages/react/webpack.config.js

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@datalayer/jupyter-lexical",`
`3`		`- "version": "0.1.0",`
	`3`	`+ "version": "0.1.1",`
`4`	`4`	`"description": "Jupyter UI for Lexical",`
`5`	`5`	`"license": "MIT",`
`6`	`6`	`"main": "lib/index.js",`
Original file line number	Diff line number	Diff line change
`@@ -9,9 +9,9 @@ import { Cell } from '@datalayer/jupyter-react';`
`9`	`9`	`export const JupyterCellComponent = (props: any) => {`
`10`	`10`	`return (`
`11`	`11`	`<Cell`
`12`		`-// startDefaultKernel={true}`
	`12`	`+// startDefaultKernel`
`13`	`13`	`source="print('Hello Jupyter React')"`
`14`		`- autoStart={true}`
	`14`	`+ autoStart`
`15`	`15`	`/>`
`16`	`16`	`)`
`17`	`17`	`}`