Support for markdown cells in the Cell component

[MarcosVn]

I am working on a web application, and the <Cell> component meets exactly what I need; however, in version 0.10.0 it only allows code cells. When I use a <Notebook>, I can manipulate and add markdown cells programmatically.

Would it be possible to add the same support to <Cell>? This could be through a new type prop or even an action provided by whatever you consider best. If feasible, could this be included in the evolution pipeline? I can contribute with a PR to have this ASAP.

[echarles]

@MarcosVn You will need to add a prop type: 'code' | 'markdown' | 'raw' here

jupyter-ui/packages/react/src/components/cell/Cell.tsx

Lines 16 to 25 in 3197d24

	export type ICellProps = {
	/**
	* Code cell source.
	*/
	source?: string;
	/**
	* Whether to execute directly the code cell or not.
	*/
	autoStart?: boolean;
	};

... and pass that prop to the CellAdapter which will import a MarkdownCell and RawCell here https://github.com/datalayer/jupyter-ui/blob/3197d240947f5e1ce80abe10801c3679e9cd5acc/packages/react/src/components/cell/CellAdapter.ts#L16C25-L16C33

... and instantiate those MarkdownCell and RawCell based on that prop.

[MarcosVn]

Hello @echarles, thank you very much for your quick response.

I opened a very partial PR with the mentioned evolutions, but it seems there are some issues beyond that I would like to request an opinion/help:

• Even implementing the MarkdownCellCode instance, the cell is not rendered as expected (resulting in a blank output). Could it be something related to the execution interface, for example? I noticed that in markdown cells, the interface that transforms the input into a result appears to be quite different;

• I think the ideal would be to rename the CellAdapter _codeCell property to _cell, however, I was a bit hesitant to make this modification due to not knowing the possible impacts;

• I believe we will have other areas to evolve as well, such as in Cell.tsx, where we will need to consider the case of autoStart (perhaps point 1 above is related to this).

[sok82]

Hi @MarcosVn ,

it seems to me we are working on somewhat similar tasks)

Can you please share how you work with multiple cells?

I've tried to build very basic example, but struggling to make it work properly with more than one cell

For example when I add more than one cell I have following issues with an example

1. Run action in toolbar doesn't seem to work
2. Shit+Tab action also doesn't work with the second and following cells

Made documentation request

My example is

import {Cell, Jupyter, selectCell, cellActions, selectActiveCell} from '@datalayer/jupyter-react';
import React from "react";
import { useDispatch } from "react-redux";
import { Button, Text } from '@primer/react';

const CellPreview = () => {
  const cell = selectCell();  
  return (
    <>
      <div>source: {cell.source}</div>
      <br/>
      <div>kernel available: {String(cell.kernelAvailable)}</div>
      <br/>
    </>
  )
}

const CellComponents = () => (
  <>
    <CellPreview/>
    <CellToolbar />
    <Cell key="1" source="" />
    <Cell key="2" source="" />
  </>
)

const CellToolbar = () => {
  const cell = selectCell();  
  const dispatch = useDispatch();
  

  const handleExecuteClick = () => {
    console.log(cell.source);
    cell.adapter?.execute();
  }

  return (
    <>
      <Text as="h5">Cell Example</Text>
      <Button
        color="primary"
        onClick={handleExecuteClick}
        >
          Execute active
      </Button>
      <Button
        color="primary"
        onClick={() => dispatch(cellActions.execute())}
        >
          Run
      </Button>
      <Button
        color="secondary"
        onClick={() => dispatch(cellActions.outputsCount(0))}
        >
          Reset outputs count
      </Button>
      <Text>
        Outputs count: {cell.outputsCount}
      </Text>
    </>
  );
}


export default function EntryComponent() {
  return  <Jupyter 
                jupyterServerHttpUrl="http://localhost:8888"
                jupyterServerWsUrl="ws://localhost:8888"
                jupyterToken="3c8d3dda652807dfaf5edc9df0fc32427f8a4d841fc714b3"     
                lite={false}
                useRunningKernelIndex={-1}
                startDefaultKernel={true}
                terminals={false}             
            >
                <CellComponents/>
            </Jupyter>

}

[echarles]

A prerequisite to support multiple Cells on a same page is to upgrade the zustand store to support many cells, like the output store does.

[MarcosVn]

Hello @echarles,

Regarding the markdown support, could you please review my last comment when possible?

I would be happy to help with this evolution in the library, and it will also be useful for my use case.

[echarles]

@MarcosVn Thanks a lot for this contribution and sorry for the delay... I have commented here #248 (comment)

[MarcosVn]

Thank you, @echarles! I posted an update on the work on this issue with some comments directly on #248.

[MarcosVn]

Hello, @echarles.

With the release of #278 in a new version, we can close this issue here by my part.

[echarles]

@MarcosVn sure, doing that now.

@sok82 feel free to reopen this issue or a new one for any questions. fyi the code for this features is merged in main branch, but not yet released.