From ba052cfcbdc1c5b334624ff65ed34aa4dc3985dc Mon Sep 17 00:00:00 2001
From: Marcos Alves <marcos@aevotech.com.br>
Date: Wed, 19 Jun 2024 15:30:33 -0300
Subject: [PATCH] feat: partially adding support to markdown cells (#247)

---
 packages/react/src/components/cell/Cell.tsx   | 14 +++--
 .../react/src/components/cell/CellAdapter.ts  | 60 +++++++++++++------
 2 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/packages/react/src/components/cell/Cell.tsx b/packages/react/src/components/cell/Cell.tsx
index 82a583b7..8debbe4f 100644
--- a/packages/react/src/components/cell/Cell.tsx
+++ b/packages/react/src/components/cell/Cell.tsx
@@ -15,7 +15,12 @@ import useCellStore from './CellState';
 
 export type ICellProps = {
   /**
-   * Code cell source.
+   * Cell type
+   */
+  type: 'code' | 'markdown' | 'raw';
+
+  /**
+   * Cell source
    */
   source?: string;
   /**
@@ -25,7 +30,7 @@ export type ICellProps = {
 };
 
 export const Cell = (props: ICellProps) => {
-  const { source = '', autoStart } = props;
+  const { type='code', source = '', autoStart } = props;
   const { serverSettings, defaultKernel } = useJupyter();
   const cellStore = useCellStore();
   const [adapter, setAdapter] = useState<CellAdapter>();
@@ -33,18 +38,19 @@ export const Cell = (props: ICellProps) => {
     if (defaultKernel && serverSettings) {
       defaultKernel.ready.then(() => {
         const adapter = new CellAdapter({
+          type,
           source,
           serverSettings,
           kernel: defaultKernel,
         });
         cellStore.setAdapter(adapter);
         cellStore.setSource(source);
-        adapter.codeCell.model.contentChanged.connect(
+        adapter.codeCell.model?.contentChanged?.connect(
           (cellModel, changedArgs) => {
             cellStore.setSource(cellModel.sharedModel.getSource());
           }
         );
-        adapter.codeCell.outputArea.outputLengthChanged.connect(
+        adapter.codeCell.outputArea?.outputLengthChanged?.connect(
           (outputArea, outputsCount) => {
             cellStore.setOutputsCount(outputsCount);
           }
diff --git a/packages/react/src/components/cell/CellAdapter.ts b/packages/react/src/components/cell/CellAdapter.ts
index 341dcc4d..3441d7fd 100755
--- a/packages/react/src/components/cell/CellAdapter.ts
+++ b/packages/react/src/components/cell/CellAdapter.ts
@@ -13,7 +13,7 @@ import {
   Toolbar,
   ToolbarButton,
 } from '@jupyterlab/apputils';
-import { CodeCellModel, CodeCell, Cell } from '@jupyterlab/cells';
+import { CodeCellModel, CodeCell, Cell, MarkdownCell, RawCell, MarkdownCellModel } from '@jupyterlab/cells';
 import {
   ybinding,
   CodeMirrorMimeTypeService,
@@ -41,7 +41,7 @@ import {
   KernelSpecManager,
 } from '@jupyterlab/services';
 import { runIcon } from '@jupyterlab/ui-components';
-import { createStandaloneCell, YCodeCell, IYText } from '@jupyter/ydoc';
+import { createStandaloneCell, YCodeCell, IYText, YMarkdownCell, ISharedMarkdownCell } from '@jupyter/ydoc';
 import {
   WIDGET_MIMETYPE,
   WidgetRenderer,
@@ -52,18 +52,19 @@ import Kernel from '../../jupyter/kernel/Kernel';
 import CellCommands from './CellCommands';
 
 export class CellAdapter {
-  private _codeCell: CodeCell;
+  private _codeCell: CodeCell | MarkdownCell | RawCell;
   private _kernel: Kernel;
   private _panel: BoxPanel;
   private _sessionContext: SessionContext;
 
   constructor(options: CellAdapter.ICellAdapterOptions) {
-    const { source, serverSettings, kernel } = options;
+    const { type, source, serverSettings, kernel } = options;
     this._kernel = kernel;
-    this.setupCell(source, serverSettings, kernel);
+    this.setupCell(type, source, serverSettings, kernel);
   }
 
   private setupCell(
+    type = 'code',
     source: string,
     serverSettings: ServerConnection.ISettings,
     kernel: Kernel
@@ -200,21 +201,41 @@ export class CellAdapter {
       extensions: editorExtensions(),
       languages,
     });
-    this._codeCell = new CodeCell({
-      rendermime,
-      model: new CodeCellModel({
-        sharedModel: createStandaloneCell({
-          cell_type: 'code',
-          source: source,
-          metadata: {},
-        }) as YCodeCell,
-      }),
-      contentFactory: new Cell.ContentFactory({
-        editorFactory: factoryService.newInlineEditor.bind(factoryService),
-      }),
-    });
+
+    if (type === 'code') {
+      this._codeCell = new CodeCell({
+        rendermime,
+        model: new CodeCellModel({
+          sharedModel: createStandaloneCell({
+            cell_type: 'code',
+            source: source,
+            metadata: {},
+          }) as YCodeCell,
+        }),
+        contentFactory: new Cell.ContentFactory({
+          editorFactory: factoryService.newInlineEditor.bind(factoryService),
+        }),
+      });
+    }  else if (type === 'markdown') {
+      this._codeCell = new MarkdownCell({
+        rendermime,
+        model: new MarkdownCellModel({
+          sharedModel: createStandaloneCell({
+            cell_type: 'markdown',
+            source: source,
+            metadata: {},
+          }) as YMarkdownCell,
+        }),
+        contentFactory: new Cell.ContentFactory({
+          editorFactory: factoryService.newInlineEditor.bind(factoryService),
+        }),
+      });
+    }
+
     this._codeCell.addClass('dla-Jupyter-Cell');
     this._codeCell.initializeState();
+
+
     this._sessionContext.kernelChanged.connect(
       (_, arg: Session.ISessionConnection.IKernelChangedArgs) => {
         const kernelConnection = arg.newValue;
@@ -316,7 +337,7 @@ export class CellAdapter {
     return this._panel;
   }
 
-  get codeCell(): CodeCell {
+  get codeCell(): CodeCell | MarkdownCell | RawCell {
     return this._codeCell;
   }
 
@@ -335,6 +356,7 @@ export class CellAdapter {
 
 export namespace CellAdapter {
   export type ICellAdapterOptions = {
+    type: 'code' | 'markdown' | 'raw';
     source: string;
     serverSettings: ServerConnection.ISettings;
     kernel: Kernel;