lexical: initcode

Author: echarles

packages/lexical/src/plugins/ComponentPickerMenuPlugin.tsx

@@ -125,10 +125,12 @@ function ComponentPickerMenuItem({
 
 export interface ComponentPickerMenuPluginProps {
   kernel?: Kernel;
+  initCode?: string;
 }
 
 export const ComponentPickerMenuPlugin = ({
   kernel,
+  initCode = "print('Hello Jupyter UI')",
 }: ComponentPickerMenuPluginProps = {}): JSX.Element => {
   const [editor] = useLexicalComposerContext();
   const [modal, showModal] = useModal();
@@ -198,7 +200,7 @@ export const ComponentPickerMenuPlugin = ({
           }
 
           editor.dispatchCommand(INSERT_JUPYTER_INPUT_OUTPUT_COMMAND, {
-            code: "print('Hello Jupyter UI')",
+            code: initCode,
             outputs: DEFAULT_INITIAL_OUTPUTS,
             loading: 'Loading...',
           });
@@ -359,7 +361,7 @@ export const ComponentPickerMenuPlugin = ({
           }),
         ]
       : baseOptions;
-  }, [editor, getDynamicOptions, queryString, showModal, kernel]);
+  }, [editor, getDynamicOptions, queryString, showModal, kernel, initCode]);
 
   const onSelectOption = useCallback(
     (

packages/react/src/examples/Notebook2Lite.tsx

@@ -0,0 +1,77 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+import { useMemo, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { INotebookContent } from '@jupyterlab/nbformat';
+import { JupyterReactTheme } from '../theme/JupyterReactTheme';
+import { useJupyter } from '../jupyter';
+import {
+  Notebook2,
+  CellSidebarExtension,
+  CellSidebarButton,
+  NotebookToolbar,
+  KernelIndicator,
+} from '../components';
+import { CellToolbarExtension } from './extensions';
+
+import nbformat from './notebooks/NotebookExample1.ipynb.json';
+import { Session } from '@jupyterlab/services';
+import { OnSessionConnection } from '../state';
+
+const Notebook2Example = () => {
+  const { serviceManager } = useJupyter({ lite: true });
+  const [session, setSession] = useState<Session.ISessionConnection>();
+  const onSessionConnection: OnSessionConnection = (
+    session: Session.ISessionConnection | undefined
+  ) => {
+    console.log(
+      'Received a Kernel Session.',
+      session?.id,
+      session?.kernel?.clientId
+    );
+    setSession(session);
+  };
+  const extensions = useMemo(
+    () => [
+      new CellToolbarExtension(),
+      new CellSidebarExtension({ factory: CellSidebarButton }),
+    ],
+    []
+  );
+  return serviceManager ? (
+    <JupyterReactTheme>
+      <Box display="flex">
+        <Box>
+          <Text>Kernel Indicator</Text>
+        </Box>
+        <Box ml={3}>
+          <KernelIndicator kernel={session?.kernel} />
+        </Box>
+      </Box>
+      <Notebook2
+        nbformat={nbformat as INotebookContent}
+        id="notebook-nbformat-id"
+        startDefaultKernel
+        serviceManager={serviceManager}
+        height="calc(100vh - 2.6rem)" // (Height - Toolbar Height).
+        extensions={extensions}
+        onSessionConnection={onSessionConnection}
+        Toolbar={NotebookToolbar}
+      />
+    </JupyterReactTheme>
+  ) : (
+    <></>
+  );
+};
+
+const div = document.createElement('div');
+document.body.appendChild(div);
+const root = createRoot(div);
+
+root.render(<Notebook2Example />);

packages/react/src/examples/NotebookLite.tsx

@@ -6,7 +6,8 @@
 
 import { INotebookContent } from '@jupyterlab/nbformat';
 import { Session } from '@jupyterlab/services';
-import { Box, Text } from '@primer/react';
+import { Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { CellSidebarExtension, KernelIndicator, Notebook } from '../components';

packages/react/webpack.config.js

@@ -51,32 +51,33 @@ const ENTRY =
   // './src/examples/NotebookColormode';
   // './src/examples/NotebookCollaborative';
   // './src/examples/Notebook2Collaborative';
-  // './src/examples/NotebookExtension';
-  // './src/examples/NotebookKernel';
-  // './src/examples/NotebookKernelChange';
-  // './src/examples/NotebookLess';
-  // './src/examples/NotebookLite';
-  // './src/examples/NotebookLiteContext';
-  // './src/examples/NotebookLocalServer';
-  // './src/examples/NotebookMutationsKernel';
-  // './src/examples/NotebookMutationsServiceManager';
-  // './src/examples/NotebookNbformat';
-  // './src/examples/NotebookNbformatChange';
-  // './src/examples/NotebookNoContext';
-  // './src/examples/NotebookNoPrimer';
-  // './src/examples/NotebookOnSessionConnection';
-  // './src/examples/NotebookPathChange';
-  // './src/examples/NotebookReadonly';
-  // './src/examples/NotebookServiceManager';
-  // './src/examples/NotebookSimple';
-  // './src/examples/NotebookSkeleton';
-  // './src/examples/NotebookTheme';
-  // './src/examples/NotebookThemeColormode';
-  // './src/examples/NotebookToc';
-  // './src/examples/NotebookURL';
-  // './src/examples/NotebookURL';
-  // './src/examples/ObservableHQ';
-  './src/examples/Output';
+  './src/examples/Notebook2Lite';
+// './src/examples/NotebookExtension';
+// './src/examples/NotebookKernel';
+// './src/examples/NotebookKernelChange';
+// './src/examples/NotebookLess';
+// './src/examples/NotebookLite';
+// './src/examples/NotebookLiteContext';
+// './src/examples/NotebookLocalServer';
+// './src/examples/NotebookMutationsKernel';
+// './src/examples/NotebookMutationsServiceManager';
+// './src/examples/NotebookNbformat';
+// './src/examples/NotebookNbformatChange';
+// './src/examples/NotebookNoContext';
+// './src/examples/NotebookNoPrimer';
+// './src/examples/NotebookOnSessionConnection';
+// './src/examples/NotebookPathChange';
+// './src/examples/NotebookReadonly';
+// './src/examples/NotebookServiceManager';
+// './src/examples/NotebookSimple';
+// './src/examples/NotebookSkeleton';
+// './src/examples/NotebookTheme';
+// './src/examples/NotebookThemeColormode';
+// './src/examples/NotebookToc';
+// './src/examples/NotebookURL';
+// './src/examples/NotebookURL';
+// './src/examples/ObservableHQ';
+// './src/examples/Output';
 // './src/examples/OutputIpynb';
 // './src/examples/OutputWithMonitoring';
 // './src/examples/Plotly';