Restore colormode (#393)

* lexical: css placeholder

* bump: jupyter-react

* fix: lexical theme list

* lexical: favor jupyter cell output

* lexical: favor code input cell

* lexical: favor code input cell

* prune: lexical jupyter components

* fix enter

* fix: codemirror shift-run

* wip: dark theme

* add colormode to cellsidebar extension

Author: echarles

packages/lexical/babel.config.js

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

packages/lexical/src/components/JupyterCellComponent.tsx

@@ -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/components/JupyterOutputComponent.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/components/index.ts

@@ -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/LexicalToNbformat.tsx

@@ -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/NbformatToLexical.tsx

@@ -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/MarkdownImport.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/MarkdownShortcuts.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;
   }