Restore colormode

packages/lexical/babel.config.js

@@ -3,5 +3,3 @@
  *
  * MIT License
  */
-
-module.exports = require('@jupyterlab/testutils/lib/babel.config');

packages/lexical/src/components/index.ts

@@ -13,7 +13,6 @@ export * from './DropDown';
 export * from './EquationEditor';
 export * from './FileInput';
 export * from './ImageResizer';
-export * from './JupyterOutputComponent';
 export * from './KatexEquationAlterer';
 export * from './KatexEquationAlterer';
 export * from './KatexRenderer';

packages/lexical/src/convert/LexicalToNbformat.tsx

@@ -17,7 +17,7 @@ import {
 } from '@jupyterlab/nbformat';
 import EquationNode, { $isEquationNode } from './../nodes/EquationNode';
 import { $isYouTubeNode } from './../nodes/YouTubeNode';
-import { $isJupyterCodeNode } from './../nodes/JupyterCodeNode';
+import { $isJupyterInputNode } from './../nodes/JupyterInputNode';
 import { exportTopLevelElements } from './markdown/MarkdownExport';
 import { transformersByType } from './markdown/utils';
 import { TRANSFORMERS } from './markdown/index';
@@ -49,7 +49,7 @@ export const lexicalToNbformat = (nodes: LexicalNode[]) => {
     cells: [],
   };
   nodes.map(node => {
-    if ($isJupyterCodeNode(node)) {
+    if ($isJupyterInputNode(node)) {
       nb.cells.push(newCodeCell(node.getTextContent()));
     } else if (
       $isParagraphNode(node) &&

packages/lexical/src/convert/NbformatToLexical.tsx

@@ -6,8 +6,8 @@
 
 import { LexicalEditor, INSERT_PARAGRAPH_COMMAND } from 'lexical';
 import { INotebookContent, IOutput } from '@jupyterlab/nbformat';
-// import { INSERT_JUPYTER_CELL_OUTPUT_COMMAND } from "../plugins/JupyterCellOutputPlugin";
-import { INSERT_JUPYTER_CELL_COMMAND } from '../plugins/JupyterCellPlugin';
+// import { INSERT_JUPYTER_CELL_COMMAND } from '../plugins/JupyterCellPlugin';
+import { INSERT_JUPYTER_INPUT_OUTPUT_COMMAND } from '../plugins/JupyterInputOutputPlugin';
 import { $convertFromMarkdownString, TRANSFORMERS } from './markdown';
 
 export const nbformatToLexical = (
@@ -28,11 +28,11 @@ export const nbformatToLexical = (
       }
       if (cell.cell_type === 'code') {
         const outputs = cell.outputs as IOutput[];
-        editor.dispatchCommand(INSERT_JUPYTER_CELL_COMMAND, {
+        editor.dispatchCommand(INSERT_JUPYTER_INPUT_OUTPUT_COMMAND, {
           code,
           outputs,
           loading: 'Loading...',
-          autoStart: false,
+          // autoStart: false,
         });
       }
       editor.dispatchCommand(INSERT_PARAGRAPH_COMMAND, undefined);

packages/lexical/src/convert/markdown/MarkdownImport.ts

@@ -13,9 +13,9 @@ import type {
 import type { LexicalNode, RootNode, TextNode } from 'lexical';
 
 import {
-  JupyterCodeNode,
-  $createJupyterCodeNode,
-} from './../../nodes/JupyterCodeNode';
+  JupyterInputNode,
+  $createJupyterInputNode,
+} from './../../nodes/JupyterInputNode';
 import { $isListItemNode, $isListNode } from '@lexical/list';
 import { $isQuoteNode } from '@lexical/rich-text';
 import { $findMatchingParent } from '@lexical/utils';
@@ -167,7 +167,7 @@ function importCodeBlock(
   lines: Array<string>,
   startLineIndex: number,
   rootNode: RootNode,
-): [JupyterCodeNode | null, number] {
+): [JupyterInputNode | null, number] {
   const openMatch = lines[startLineIndex].match(CODE_BLOCK_REG_EXP);
 
   if (openMatch) {
@@ -178,7 +178,7 @@ function importCodeBlock(
       const closeMatch = lines[endLineIndex].match(CODE_BLOCK_REG_EXP);
 
       if (closeMatch) {
-        const codeBlockNode = $createJupyterCodeNode(openMatch[1]);
+        const codeBlockNode = $createJupyterInputNode(openMatch[1]);
         const textNode = $createTextNode(
           lines.slice(startLineIndex + 1, endLineIndex).join('\n'),
         );

packages/lexical/src/convert/markdown/MarkdownShortcuts.ts

@@ -12,7 +12,7 @@ import type {
 } from '.';
 import type { ElementNode, LexicalEditor, TextNode } from 'lexical';
 
-import { $isJupyterCodeNode } from './../../nodes/JupyterCodeNode';
+import { $isJupyterInputNode } from './../../nodes/JupyterInputNode';
 import {
   $createRangeSelection,
   $getSelection,
@@ -417,7 +417,7 @@ export function registerMarkdownShortcuts(
 
         const parentNode = anchorNode.getParent();
 
-        if (parentNode === null || $isJupyterCodeNode(parentNode)) {
+        if (parentNode === null || $isJupyterInputNode(parentNode)) {
           return;
         }
 

packages/lexical/src/convert/markdown/MarkdownTransformers.ts

@@ -15,10 +15,10 @@ import type {
 } from 'lexical';
 
 import {
-  $createJupyterCodeNode,
-  $isJupyterCodeNode,
-  JupyterCodeNode,
-} from './../../nodes/JupyterCodeNode';
+  $createJupyterInputNode,
+  $isJupyterInputNode,
+  JupyterInputNode,
+} from './../../nodes/JupyterInputNode';
 import { $createLinkNode, $isLinkNode, LinkNode } from '@lexical/link';
 import {
   $createListItemNode,
@@ -212,9 +212,9 @@ export const QUOTE: ElementTransformer = {
 };
 
 export const CODE: ElementTransformer = {
-  dependencies: [JupyterCodeNode],
+  dependencies: [JupyterInputNode],
   export: (node: LexicalNode) => {
-    if (!$isJupyterCodeNode(node)) {
+    if (!$isJupyterInputNode(node)) {
       return null;
     }
     const textContent = node.getTextContent();
@@ -228,7 +228,7 @@ export const CODE: ElementTransformer = {
   },
   regExp: /^```(\w{1,10})?\s/,
   replace: replaceWithBlock(match => {
-    return $createJupyterCodeNode(match ? match[1] : undefined);
+    return $createJupyterInputNode(match ? match[1] : undefined);
   }),
   type: 'element',
 };

packages/lexical/src/convert/markdown/utils.ts

@@ -13,7 +13,7 @@ import type {
 } from '.';
 import type { ElementNode, LexicalNode, TextFormatType } from 'lexical';
 
-import { $isJupyterCodeNode } from './../../nodes/JupyterCodeNode';
+import { $isJupyterInputNode } from './../../nodes/JupyterInputNode';
 import { $isListItemNode, $isListNode } from '@lexical/list';
 import { $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
 
@@ -379,7 +379,7 @@ function blockQuoteExport(
 }
 
 function codeBlockExport(node: LexicalNode) {
-  if (!$isJupyterCodeNode(node)) {
+  if (!$isJupyterInputNode(node)) {
     return null;
   }
 

packages/lexical/src/editor/Editor.tsx

@@ -27,8 +27,9 @@ import { MarkNode } from '@lexical/mark';
 import { AutoLinkNode, LinkNode } from '@lexical/link';
 import { CodeNode } from '@lexical/code';
 import { INotebookContent } from '@jupyterlab/nbformat';
+import { useJupyter } from '@datalayer/jupyter-react';
 import {
-  JupyterCellOutputPlugin,
+  JupyterInputOutputPlugin,
   EquationNode,
   HorizontalRulePlugin,
   ListMaxIndentLevelPlugin,
@@ -39,16 +40,16 @@ import {
   YouTubePlugin,
   ImageNode,
   YouTubeNode,
-  JupyterCodeHighlightNode,
-  JupyterCodeNode,
+  JupyterInputHighlightNode,
+  JupyterInputNode,
   JupyterOutputNode,
-  JupyterCellNode,
+  // JupyterCellNode,
+  // JupyterCellPlugin,
   CodeActionMenuPlugin,
   AutoEmbedPlugin,
   NbformatContentPlugin,
   TableOfContentsPlugin,
   MarkdownPlugin,
-  JupyterCellPlugin,
   CommentPlugin,
   FloatingTextFormatToolbarPlugin,
 } from './..';
@@ -58,6 +59,7 @@ import { TreeViewPlugin, ToolbarPlugin } from '../plugins';
 import DraggableBlockPlugin from '../plugins/DraggableBlockPlugin';
 
 import './../../style/index.css';
+import { CounterNode } from '../nodes/CounterNode';
 
 type Props = {
   notebook?: INotebookContent;
@@ -81,9 +83,9 @@ const initialConfig = {
     HeadingNode,
     HorizontalRuleNode,
     ImageNode,
-    JupyterCellNode,
-    JupyterCodeHighlightNode,
-    JupyterCodeNode,
+    // JupyterCellNode,
+    JupyterInputHighlightNode,
+    JupyterInputNode,
     JupyterOutputNode,
     LinkNode,
     ListItemNode,
@@ -94,6 +96,7 @@ const initialConfig = {
     TableNode,
     TableRowNode,
     YouTubeNode,
+    CounterNode,
   ],
 };
 
@@ -103,12 +106,13 @@ const EditorContextPlugin = () => {
   useEffect(() => {
     setEditor(editor);
     //    return () => setEditor(undefined);
-  }, [editor]);
+  }, [editor, setEditor]);
   return null;
 };
 
 export function Editor(props: Props) {
   const { notebook } = props;
+  const { defaultKernel } = useJupyter();
   const [floatingAnchorElem, setFloatingAnchorElem] =
     useState<HTMLDivElement | null>(null);
 
@@ -149,8 +153,10 @@ export function Editor(props: Props) {
             <AutoLinkPlugin />
             <ListMaxIndentLevelPlugin maxDepth={7} />
             <MarkdownPlugin />
-            <JupyterCellPlugin />
-            <JupyterCellOutputPlugin />
+            {/* <JupyterCellPlugin /> */}
+            {defaultKernel && (
+              <JupyterInputOutputPlugin kernel={defaultKernel} />
+            )}
             <ComponentPickerMenuPlugin />
             <EquationsPlugin />
             <ImagesPlugin />

packages/lexical/src/examples/AppNbformat.tsx

@@ -14,7 +14,8 @@ import {
   CellSidebar,
   CellSidebarExtension,
 } from '@datalayer/jupyter-react';
-import { Box, UnderlineNav, Button } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { UnderlineNav, Button } from '@primer/react';
 import { ThreeBarsIcon } from '@primer/octicons-react';
 import { JSONTree } from 'react-json-tree';
 import { INotebookContent } from '@jupyterlab/nbformat';
@@ -168,12 +169,12 @@ export function AppNbformat() {
           </div>
         </div>
         <br />
-        <a href="https://datalayer.io" target="_blank" rel="noreferrer">
+        <a href="https://datalayer.ai" target="_blank" rel="noreferrer">
           <ThreeBarsIcon />
         </a>
         <h2>
           copyright ©{' '}
-          <a href="https://datalayer.io" target="_blank" rel="noreferrer">
+          <a href="https://datalayer.ai" target="_blank" rel="noreferrer">
             2022-2024 Datalayer, Inc.
           </a>
         </h2>