lexical: jupyter cell (#359)

echarles · web-flow · commit fd95ae81f625 · 2025-03-19T14:56:39.000+01:00
* bump: icons

* lexical: code

* fix: lexical code

* bump: yjs

* lexical: sparkle

* bump: version
diff --git a/attic/slate/package.json b/attic/slate/package.json
@@ -23,7 +23,7 @@
     "kill": "./../dev/sh/kill.sh || true"
   },
   "dependencies": {
-    "@datalayer/icons-react": "^0.3.4",
+    "@datalayer/icons-react": "^1.0.0",
     "@datalayer/jupyter-react": "^0.18.12",
     "@datalayer/primer-addons": "^0.3.2",
     "@emotion/css": "^11.1.3",
diff --git a/examples/cra/package.json b/examples/cra/package.json
@@ -12,7 +12,7 @@
     "eject": "react-scripts eject"
   },
   "dependencies": {
-    "@datalayer/icons-react": "^0.3.4",
+    "@datalayer/icons-react": "^1.0.0",
     "@datalayer/jupyter-react": "^0.18.12",
     "@datalayer/primer-addons": "^0.3.2",
     "jupyterlab-plotly": "^5.17.0",
diff --git a/examples/next-js/package.json b/examples/next-js/package.json
@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@datalayer/icons-react": "^0.3.4",
+    "@datalayer/icons-react": "^1.0.0",
     "@datalayer/jupyter-react": "^0.18.12",
     "@datalayer/primer-addons": "^0.3.2",
     "autoprefixer": "^10.4.14",
diff --git a/package.json b/package.json
@@ -203,7 +203,7 @@
     "webpack-cli": "4.10.0",
     "webpack-dev-server": "4.9.3",
     "y-websocket": "1.4.5",
-    "yjs": "13.5.47"
+    "yjs": "13.6.24"
   },
   "overrides": {
     "@jupyter-widgets/base": "6.0.6",
@@ -314,6 +314,6 @@
     "webpack-cli": "4.10.0",
     "webpack-dev-server": "4.9.3",
     "y-websocket": "1.4.5",
-    "yjs": "13.5.47"
+    "yjs": "13.6.24"
   }
 }
diff --git a/packages/docusaurus-plugin/package.json b/packages/docusaurus-plugin/package.json
@@ -22,7 +22,7 @@
     "directory": "packages/docusaurus-plugin"
   },
   "dependencies": {
-    "@datalayer/icons-react": "^0.3.4",
+    "@datalayer/icons-react": "^1.0.0",
     "@datalayer/jupyter-react": "^0.17.0",
     "@datalayer/primer-addons": "^0.3.2",
     "@docusaurus/core": "^2.4.0",
diff --git a/packages/lexical/package.json b/packages/lexical/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/jupyter-lexical",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Jupyter UI for Lexical",
   "license": "MIT",
   "main": "lib/index.js",
@@ -60,7 +60,7 @@
   },
   "dependencies": {
     "@datalayer/icons-react": "^0.3.7",
-    "@datalayer/jupyter-react": "^0.19.9",
+    "@datalayer/jupyter-react": "^0.20.0",
     "@datalayer/primer-addons": "^0.3.2",
     "@jupyterlab/application": "^4.0.0",
     "@jupyterlab/coreutils": "^6.0.0",
diff --git a/packages/lexical/src/components/JupyterCellComponent.tsx b/packages/lexical/src/components/JupyterCellComponent.tsx
@@ -4,14 +4,24 @@
  * MIT License
  */
 
+import { IOutput } from '@jupyterlab/nbformat';
 import { Cell } from '@datalayer/jupyter-react';
 
-export const JupyterCellComponent = (props: any) => {
+type IJupyterCellComponentProps = {
+  code: string;
+  outputs: IOutput[];
+  loading: string;
+  autoStart: boolean;
+}
+
+export const JupyterCellComponent = (props: IJupyterCellComponentProps) => {
+  const { autoStart, code, outputs } = props;
   return (
     <Cell
 //      startDefaultKernel
-      source="print('Hello Jupyter React')"
-      autoStart
+      source={code}      
+      autoStart={autoStart}
+      outputs={outputs}
     />
   )
 }
diff --git a/packages/lexical/src/convert/NbformatToLexical.tsx b/packages/lexical/src/convert/NbformatToLexical.tsx
@@ -6,25 +6,31 @@
 
 import { LexicalEditor, INSERT_PARAGRAPH_COMMAND } from "lexical";
 import { INotebookContent, IOutput } from "@jupyterlab/nbformat";
-import { INSERT_JUPYTER_COMMAND } from "../plugins/JupyterPlugin";
+// import { INSERT_JUPYTER_CELL_OUTPUT_COMMAND } from "../plugins/JupyterCellOutputPlugin";
+import { INSERT_JUPYTER_CELL_COMMAND } from "../plugins/JupyterCellPlugin";
 import { $convertFromMarkdownString, TRANSFORMERS } from "./markdown";
 
 export const nbformatToLexical = (notebook: INotebookContent, editor: LexicalEditor) => {
   editor.update(() => {
     notebook.cells.map(cell => {
-      let source = '';
+      let code = '';
       if (typeof cell.source === 'object') {
-        source = (cell.source as string[]).join('\n');
+        code = (cell.source as string[]).join('\n');
       }
       if (typeof cell.source === 'string') {
-        source = cell.source as string;
+        code = cell.source as string;
       }
       if (cell.cell_type === 'markdown') {
-        $convertFromMarkdownString(source, TRANSFORMERS);
+        $convertFromMarkdownString(code, TRANSFORMERS);
       }
       if (cell.cell_type === 'code') {
         const outputs = cell.outputs as IOutput[];
-        editor.dispatchCommand(INSERT_JUPYTER_COMMAND, { code: source, outputs: outputs, loading: "initial" })
+        editor.dispatchCommand(INSERT_JUPYTER_CELL_COMMAND, {
+          code,
+          outputs,
+          loading: "Loading...",
+          autoStart: false
+        });
       }
       editor.dispatchCommand(INSERT_PARAGRAPH_COMMAND, undefined);
     });
diff --git a/packages/lexical/src/editor/Editor.tsx b/packages/lexical/src/editor/Editor.tsx
@@ -28,7 +28,7 @@ import { AutoLinkNode, LinkNode } from "@lexical/link";
 import { CodeNode } from '@lexical/code';
 import { INotebookContent } from "@jupyterlab/nbformat";
 import {
-  JupyterPlugin, EquationNode, HorizontalRulePlugin,
+  JupyterCellOutputPlugin, EquationNode, HorizontalRulePlugin,
   ListMaxIndentLevelPlugin, AutoLinkPlugin, ComponentPickerMenuPlugin,
   EquationsPlugin, ImagesPlugin, YouTubePlugin, ImageNode, YouTubeNode,
   JupyterCodeHighlightNode, JupyterCodeNode, JupyterOutputNode, JupyterCellNode,
@@ -132,7 +132,7 @@ export function Editor(props: Props) {
             <ListMaxIndentLevelPlugin maxDepth={7} />
             <MarkdownPlugin />
             <JupyterCellPlugin />
-            <JupyterPlugin />
+            <JupyterCellOutputPlugin />
             <ComponentPickerMenuPlugin/>
             <EquationsPlugin/>
             <ImagesPlugin/>
diff --git a/packages/lexical/src/nodes/JupyterCellNode.tsx b/packages/lexical/src/nodes/JupyterCellNode.tsx
@@ -6,25 +6,37 @@
 
 import { ReactNode } from "react";
 import { DecoratorNode, EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode } from "lexical";
+import { IOutput } from "@jupyterlab/nbformat";
+import { JupyterCellProps } from "./../plugins/JupyterCellPlugin";
 import JupyterCellNodeComponent from "./JupyterCellNodeComponent";
 
+const TYPE = "jupyter-cell";
+
 export class JupyterCellNode extends DecoratorNode<ReactNode> {
+  private __code: string;
+  private __outputs: IOutput[];
+  private __loading: string;
+  private __autoStart: boolean;
   private __data: any;
 
   /** @override */
   static getType() {
-    return "custom";
+    return TYPE;
   }
 
   /** @override */
   static clone(node: JupyterCellNode) {
-    console.log(`clone: node.__data: ${node.__data} node.__key: ${node.__key} node: ${JSON.stringify(node, null, 2)}`);
-    return new JupyterCellNode(node.__data, node.__key);
+    console.debug(`clone: node: ${JSON.stringify(node, null, 2)}`);
+    return new JupyterCellNode(node.__code, node.__outputs, node.__loading, node.__autoStart, node.__data, node.__key);
   }
 
   /** @override */
-  constructor(data = "[]", key?: NodeKey) {
+  constructor(code: string, outputs: IOutput[], loading: string, autoStart: boolean, data = "[]", key?: NodeKey) {
     super(key);
+    this.__code = code;
+    this.__outputs = outputs;
+    this.__loading = loading;
+    this.__autoStart = autoStart;
     this.__data = data;
   }
 
@@ -47,38 +59,82 @@ export class JupyterCellNode extends DecoratorNode<ReactNode> {
 
   /** @override */
   decorate(editor: LexicalEditor) {
-    console.log(`decorate -> this.getKey(): ${this.getKey()} this.__data: ${this.__data}`);
-    return <JupyterCellNodeComponent nodeKey={this.getKey()} data={this.__data} />;
+    console.log(`decorate -> key: ${this.getKey()} outputs: ${this.__outputs} data: ${this.__data}`);
+    return <JupyterCellNodeComponent
+      nodeKey={this.getKey()}
+      code={this.__code}
+      outputs={this.__outputs}
+      loading={this.__loading}
+      autoStart={this.__autoStart}
+      data={this.__data}
+    />
+  }
+
+  setCode(code: string) {
+    const self = this.getWritable();
+    self.__code = code;
+  }
+  get code() {
+    return this.__code;
+  }
+
+  setOutputs(outputs: IOutput[]) {
+    const self = this.getWritable();
+    self.__outputs = outputs;
+  }
+  get outputs() {
+    return this.__outputs;
+  }
+
+  setLoading(loading: string) {
+    const self = this.getWritable();
+    self.__loading = loading;
+  }
+  get loading() {
+    return this.__loading;
+  }
+
+  setAutostart(autoStart: boolean) {
+    const self = this.getWritable();
+    self.__autoStart = autoStart;
+  }
+  get autoStart() {
+    return this.__autoStart;
   }
 
   /** @override */
   setData(data: any) {
     const self = this.getWritable();
     self.__data = data;
   }
-
   get data() {
     return this.__data;
   }
 
   /** @override */
   static importJSON(serializedNode: SerializedLexicalNode) {
-    return new JupyterCellNode((serializedNode as unknown as JupyterCellNode).data);
+    const n = serializedNode as unknown as JupyterCellNode;
+    return new JupyterCellNode(n.code, n.outputs, n.loading, n.autoStart, n.data);
   }
 
   /** @override */
   exportJSON() {
     return {
+      code: this.__code,
+      outputs: this.__outputs,
+      loading: this.__loading,
+      autoStart: this.__autoStart,
       data: this.__data,
-      type: 'custom',
+      type: TYPE,
       version: 1,
     };
   }
 
 }
 
-export function $createJupyterCellNode() {
-  return new JupyterCellNode();
+export function $createJupyterCellNode(props: JupyterCellProps) {
+  const { code, outputs, loading, autoStart } = props;
+  return new JupyterCellNode(code, outputs, loading, autoStart);
 }
 
 export function $isJupyterCellNode(node: LexicalNode) {
diff --git a/packages/lexical/src/nodes/JupyterCellNodeComponent.tsx b/packages/lexical/src/nodes/JupyterCellNodeComponent.tsx
@@ -5,17 +5,28 @@
  */
 
 import { NodeKey } from "lexical";
+import { IOutput } from '@jupyterlab/nbformat';
 import { JupyterCellComponent } from "./../components/JupyterCellComponent";
 
-type Props = {
+type IJupyterCellNodeComponentProps = {
   nodeKey: NodeKey;
+  code: string;
+  outputs: IOutput[];
+  loading: string;
+  autoStart: boolean;
   data: any;
 }
 
-export const JupyterCellNodeComponent = ({ nodeKey, data }: Props) => {
+export const JupyterCellNodeComponent = (props: IJupyterCellNodeComponentProps) => {
+  const { code, outputs, loading, autoStart } = props;
   return (
     <>
-      <JupyterCellComponent/>
+      <JupyterCellComponent
+        code={code}
+        outputs={outputs}
+        loading={loading}
+        autoStart={autoStart}
+      />
     </>
   );
 }
diff --git a/packages/lexical/src/nodes/JupyterCodeNode.ts b/packages/lexical/src/nodes/JupyterCodeNode.ts
@@ -27,7 +27,7 @@ import {addClassNamesToElement} from '@lexical/utils';
 import { UUID } from '@lumino/coreutils';
 import type {JupyterCodeHighlightNode} from './JupyterCodeHighlightNode';
 import { $createJupyterCodeHighlightNode, getFirstJupyterCodeHighlightNodeOfLine } from './JupyterCodeHighlightNode';
-import { CODE_UUID_TO_CODE_KEY } from "../plugins/JupyterPlugin";
+import { CODE_UUID_TO_CODE_KEY } from "../plugins/JupyterCellOutputPlugin";
 
 import * as Prism from 'prismjs';
 import 'prismjs/components/prism-clike';
diff --git a/packages/lexical/src/nodes/JupyterOutputNode.tsx b/packages/lexical/src/nodes/JupyterOutputNode.tsx
@@ -7,7 +7,7 @@
 import { LexicalEditor, EditorConfig, DecoratorNode, LexicalNode, NodeKey, Spread, SerializedLexicalNode } from "lexical";
 import { UUID } from '@lumino/coreutils';
 import { IOutput } from '@jupyterlab/nbformat';
-import { OUTPUT_UUID_TO_CODE_UUID, CODE_UUID_TO_OUTPUT_KEY, CODE_UUID_TO_OUTPUT_UUID, OUTPUT_UUID_TO_OUTPUT_KEY } from "../plugins/JupyterPlugin";
+import { OUTPUT_UUID_TO_CODE_UUID, CODE_UUID_TO_OUTPUT_KEY, CODE_UUID_TO_OUTPUT_UUID, OUTPUT_UUID_TO_OUTPUT_KEY } from "../plugins/JupyterCellOutputPlugin";
 import { OutputAdapter, newUuid } from "@datalayer/jupyter-react";
 import JupyterOutputComponent from "../components/JupyterOutputComponent";
 
diff --git a/packages/lexical/src/plugins/ComponentPickerMenuPlugin.tsx b/packages/lexical/src/plugins/ComponentPickerMenuPlugin.tsx
@@ -167,7 +167,12 @@ export const ComponentPickerMenuPlugin = (): JSX.Element => {
         onSelect: () => {
 //          const selection = $getSelection();
 //          const code = selection?.getTextContent() || "";
-          editor.dispatchCommand(INSERT_JUPYTER_CELL_COMMAND, undefined);
+          editor.dispatchCommand(INSERT_JUPYTER_CELL_COMMAND, {
+            code: "print('Hello Jupyter UI')",
+            outputs: [],
+            loading: "Loading...",
+            autoStart: true,
+          });
         }
       }),
       /*
diff --git a/packages/lexical/src/plugins/JupyterCellOutputPlugin.tsx b/packages/lexical/src/plugins/JupyterCellOutputPlugin.tsx
@@ -38,23 +38,23 @@ export const DEFAULT_INITIAL_OUTPUTS: IOutput[] = [
   }
 ];
 
-export type JupyterOutputProps = {
+export type JupyterCellOutputProps = {
   code: string;
   outputs?: IOutput[];
   loading?: string;
 }
 
-export const INSERT_JUPYTER_COMMAND = createCommand<JupyterOutputProps>();
+export const INSERT_JUPYTER_CELL_OUTPUT_COMMAND = createCommand<JupyterCellOutputProps>();
 
-export const JupyterPlugin = () => {
+export const JupyterCellOutputPlugin = () => {
   const [editor] = useLexicalComposerContext();
   useEffect(() => {
     return registerCodeHighlighting(editor);
   }, [editor]);
   useEffect(() => {
     if (!editor.hasNodes([JupyterOutputNode])) {
       throw new Error(
-        "JupyterPlugin: JupyterOutputNode not registered on editor"
+        "JupyterCellOutputPlugin: JupyterOutputNode not registered on editor"
       );
     }
   }, [editor]);
@@ -129,7 +129,7 @@ export const JupyterPlugin = () => {
     )
   }, [editor]);
   useEffect(() => {
-    return editor.registerCommand(INSERT_JUPYTER_COMMAND, (props: JupyterOutputProps) => {
+    return editor.registerCommand(INSERT_JUPYTER_CELL_OUTPUT_COMMAND, (props: JupyterCellOutputProps) => {
       const { code, outputs, loading } = props;
       const selection = $getSelection();
       if ($isRangeSelection(selection)) {
@@ -187,4 +187,4 @@ export const JupyterPlugin = () => {
   return null;
 }
 
-export default JupyterPlugin;
+export default JupyterCellOutputPlugin;
diff --git a/packages/lexical/src/plugins/JupyterCellPlugin.tsx b/packages/lexical/src/plugins/JupyterCellPlugin.tsx
diff --git a/packages/lexical/src/plugins/index.ts b/packages/lexical/src/plugins/index.ts
diff --git a/packages/lexical/style/lexical/Editor.css b/packages/lexical/style/lexical/Editor.css
diff --git a/packages/lexical/style/lexical/images/icons/sparkle.svg b/packages/lexical/style/lexical/images/icons/sparkle.svg
diff --git a/packages/react/package.json b/packages/react/package.json
diff --git a/packages/react/src/components/cell/Cell.tsx b/packages/react/src/components/cell/Cell.tsx
diff --git a/packages/react/src/components/cell/CellAdapter.ts b/packages/react/src/components/cell/CellAdapter.ts
