Feat: better lexical for code (#397)

* fix: lexical cell output

* jupyter: cursor

* fix: jupyter input and output move

* lint: lexical

* fix: output adpater

* lexical: optional kernel

* fix: output reload

* fix: output rendering on load

* bump: jupyter-react

* feat: picker

* feat: disabled prop for component picker plugin

* jupyter: onsessionconnection

* react: onsession

* wip

* fix: flood

* fix: mutations

* fix: load

* wip

* lint

* lexical: initcode

Author: echarles

.eslintrc.js

@@ -13,6 +13,9 @@ module.exports = {
     ecmaFeatures: {
       jsx: true,
     },
+    // Explicitly set tsconfigRootDir and project to resolve multiple candidate TSConfigRootDirs error
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.eslint.json',
   },
   settings: {
     react: {

packages/lexical/src/convert/NbformatToLexical.tsx

@@ -15,7 +15,7 @@ export const nbformatToLexical = (
   editor: LexicalEditor,
 ) => {
   editor.update(() => {
-    notebook.cells.map(cell => {
+    notebook.cells.map((cell, index) => {
       let code = '';
       if (typeof cell.source === 'object') {
         code = (cell.source as string[]).join('\n');
@@ -35,7 +35,10 @@ export const nbformatToLexical = (
           // autoStart: false,
         });
       }
-      editor.dispatchCommand(INSERT_PARAGRAPH_COMMAND, undefined);
+      // Only add paragraph between cells, not after the last cell
+      if (index < notebook.cells.length - 1) {
+        editor.dispatchCommand(INSERT_PARAGRAPH_COMMAND, undefined);
+      }
     });
   });
 };

packages/lexical/src/editor/Editor.tsx

@@ -29,55 +29,60 @@ import { CodeNode } from '@lexical/code';
 import { INotebookContent } from '@jupyterlab/nbformat';
 import { useJupyter } from '@datalayer/jupyter-react';
 import {
-  JupyterInputOutputPlugin,
+  CounterNode,
   EquationNode,
-  HorizontalRulePlugin,
-  ListMaxIndentLevelPlugin,
-  AutoLinkPlugin,
-  ComponentPickerMenuPlugin,
-  EquationsPlugin,
-  ImagesPlugin,
-  YouTubePlugin,
   ImageNode,
-  YouTubeNode,
   JupyterInputHighlightNode,
   JupyterInputNode,
   JupyterOutputNode,
   // JupyterCellNode,
-  // JupyterCellPlugin,
-  CodeActionMenuPlugin,
+  YouTubeNode,
+} from '../nodes';
+import {
   AutoEmbedPlugin,
-  NbformatContentPlugin,
-  TableOfContentsPlugin,
-  MarkdownPlugin,
+  AutoLinkPlugin,
+  CodeActionMenuPlugin,
   CommentPlugin,
+  ComponentPickerMenuPlugin,
+  DraggableBlockPlugin,
+  EquationsPlugin,
   FloatingTextFormatToolbarPlugin,
+  HorizontalRulePlugin,
+  ImagesPlugin,
+  // JupyterCellPlugin,
+  JupyterInputOutputPlugin,
+  ListMaxIndentLevelPlugin,
+  MarkdownPlugin,
+  NbformatContentPlugin,
+  TableOfContentsPlugin,
+  YouTubePlugin,
 } from './..';
 import { commentTheme } from '../themes';
-import { useLexical } from '../context/LexicalContext';
+import { useLexical } from '../context';
 import { TreeViewPlugin, ToolbarPlugin } from '../plugins';
-import DraggableBlockPlugin from '../plugins/DraggableBlockPlugin';
+import { OnSessionConnection } from '@datalayer/jupyter-react';
 
 import './../../style/index.css';
-import { CounterNode } from '../nodes/CounterNode';
 
 type Props = {
   notebook?: INotebookContent;
+  onSessionConnection?: OnSessionConnection;
 };
 
 function Placeholder() {
   return <div className="editor-placeholder">Code and analyse data.</div>;
 }
 
 const initialConfig = {
-  namespace: 'Jupyter Lexical example',
+  namespace: 'Jupyter Lexical Example',
   theme: commentTheme,
   onError(error: Error) {
     throw error;
   },
   nodes: [
     AutoLinkNode,
     CodeNode,
+    CounterNode,
     EquationNode,
     HashtagNode,
     HeadingNode,
@@ -96,7 +101,6 @@ const initialConfig = {
     TableNode,
     TableRowNode,
     YouTubeNode,
-    CounterNode,
   ],
 };
 
@@ -111,7 +115,7 @@ const EditorContextPlugin = () => {
 };
 
 export function Editor(props: Props) {
-  const { notebook } = props;
+  const { notebook, onSessionConnection } = props;
   const { defaultKernel } = useJupyter();
   const [floatingAnchorElem, setFloatingAnchorElem] =
     useState<HTMLDivElement | null>(null);
@@ -154,10 +158,11 @@ export function Editor(props: Props) {
             <ListMaxIndentLevelPlugin maxDepth={7} />
             <MarkdownPlugin />
             {/* <JupyterCellPlugin /> */}
-            {defaultKernel && (
-              <JupyterInputOutputPlugin kernel={defaultKernel} />
-            )}
-            <ComponentPickerMenuPlugin />
+            <JupyterInputOutputPlugin
+              kernel={defaultKernel}
+              onSessionConnection={onSessionConnection}
+            />
+            <ComponentPickerMenuPlugin kernel={defaultKernel} />
             <EquationsPlugin />
             <ImagesPlugin />
             <HorizontalRulePlugin />

packages/lexical/src/examples/AppNbformat.tsx

@@ -97,7 +97,12 @@ const Tabs = () => {
       </UnderlineNav>
       {tab === 'editor' && (
         <Box>
-          <Editor notebook={nbformat} />
+          <Editor
+            notebook={nbformat}
+            onSessionConnection={session => {
+              console.log('Session changed:', session);
+            }}
+          />
           <Button
             onClick={(e: React.MouseEvent) => {
               e.preventDefault();

packages/lexical/src/examples/AppSimple.tsx

@@ -19,7 +19,12 @@ const LexicalEditor = () => {
   return (
     <Box className="center">
       <Box>
-        <Editor notebook={NBFORMAT_MODEL} />
+        <Editor
+          notebook={NBFORMAT_MODEL}
+          onSessionConnection={session => {
+            console.log('Session changed:', session);
+          }}
+        />
         <Button
           onClick={(e: React.MouseEvent) => {
             e.preventDefault();

packages/lexical/src/examples/content/Example.lexical.json

@@ -32,6 +32,16 @@
             "type": "jupyter-input-highlight",
             "version": 1,
             "highlightType": "string"
+          },
+          {
+            "detail": 0,
+            "format": 0,
+            "mode": "normal",
+            "style": "",
+            "text": ")",
+            "type": "jupyter-input-highlight",
+            "version": 1,
+            "highlightType": "punctuation"
           }
         ],
         "direction": "ltr",

packages/lexical/src/nodes/JupyterOutputNode.tsx

@@ -21,7 +21,12 @@ import {
   INPUT_UUID_TO_OUTPUT_UUID,
   OUTPUT_UUID_TO_OUTPUT_KEY,
 } from '../plugins/JupyterInputOutputPlugin';
-import { Output, OutputAdapter, newUuid } from '@datalayer/jupyter-react';
+import {
+  Output,
+  OutputAdapter,
+  newUuid,
+  Kernel,
+} from '@datalayer/jupyter-react';
 
 export type SerializedJupyterOutputNode = Spread<
   {
@@ -43,6 +48,7 @@ export class JupyterOutputNode extends DecoratorNode<JSX.Element> {
   __jupyterInputNodeUuid: string;
   __jupyterOutputNodeUuid: string;
   __executeTrigger: number;
+  __renderTrigger: number;
 
   /** @override */
   static getType() {
@@ -68,7 +74,7 @@ export class JupyterOutputNode extends DecoratorNode<JSX.Element> {
   ): JupyterOutputNode {
     return $createJupyterOutputNode(
       serializedNode.source,
-      new OutputAdapter(newUuid(), undefined, []),
+      new OutputAdapter(newUuid(), undefined, serializedNode.outputs),
       serializedNode.outputs,
       false,
       serializedNode.jupyterInputNodeUuid,
@@ -93,10 +99,11 @@ export class JupyterOutputNode extends DecoratorNode<JSX.Element> {
     this.__outputs = outputs;
     this.__outputAdapter = outputAdapter;
     this.__executeTrigger = 0;
+    this.__renderTrigger = 0;
     this.__autoRun = autoRun;
     OUTPUT_UUID_TO_CODE_UUID.set(
       this.__jupyterOutputNodeUuid,
-      jupyterInputNodeUuid,
+      this.__jupyterInputNodeUuid,
     );
     INPUT_UUID_TO_OUTPUT_KEY.set(this.__jupyterInputNodeUuid, this.__key);
     INPUT_UUID_TO_OUTPUT_UUID.set(
@@ -194,7 +201,7 @@ export class JupyterOutputNode extends DecoratorNode<JSX.Element> {
         outputs={this.__outputs}
         adapter={this.__outputAdapter}
         id={this.__jupyterOutputNodeUuid}
-        executeTrigger={this.getExecuteTrigger()}
+        executeTrigger={this.getExecuteTrigger() + this.__renderTrigger}
         autoRun={this.__autoRun}
       />
     );
@@ -222,9 +229,41 @@ export class JupyterOutputNode extends DecoratorNode<JSX.Element> {
   }
 
   public executeCode(code: string) {
+    console.warn(
+      '🎯 JupyterOutputNode.executeCode called with:',
+      code.slice(0, 50),
+    );
+    console.warn(
+      '🔧 OutputAdapter kernel available:',
+      !!this.__outputAdapter.kernel,
+    );
+
     this.setJupyterInput(code);
+
+    if (!this.__outputAdapter.kernel) {
+      console.error('❌ OutputAdapter has no kernel - cannot execute!');
+      return;
+    }
+
+    console.warn('✅ Calling OutputAdapter.execute()');
     this.__outputAdapter.execute(code);
-    this.setExecuteTrigger(this.getExecuteTrigger() + 1);
+    console.warn('✅ OutputAdapter.execute() completed');
+    // this.setExecuteTrigger(this.getExecuteTrigger() + 1);
+  }
+
+  public updateKernel(kernel: Kernel | undefined) {
+    console.warn('🔄 JupyterOutputNode.updateKernel called with:', !!kernel);
+    console.warn('🔧 Previous kernel:', !!this.__outputAdapter.kernel);
+
+    const self = this.getWritable();
+    self.__outputAdapter.kernel = kernel;
+    // Don't increment renderTrigger immediately - let execution complete first
+    // The renderTrigger will be incremented after execution if needed
+
+    console.warn(
+      '✅ Kernel updated, new kernel:',
+      !!self.__outputAdapter.kernel,
+    );
   }
 }
 

packages/lexical/src/nodes/index.ts

@@ -4,6 +4,7 @@
  * MIT License
  */
 
+export * from './CounterNode';
 export * from './EquationNode';
 export * from './ImageNode';
 export * from './JupyterInputHighlightNode';