Skip to content

Commit

Permalink
feat: partially adding support to markdown cells (#247)
Browse files Browse the repository at this point in the history
  • Loading branch information
Marcos Alves committed Jun 19, 2024
1 parent 3197d24 commit ba052cf
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 23 deletions.
14 changes: 10 additions & 4 deletions packages/react/src/components/cell/Cell.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,12 @@ import useCellStore from './CellState';

export type ICellProps = {
/**
* Code cell source.
* Cell type
*/
type: 'code' | 'markdown' | 'raw';

/**
* Cell source
*/
source?: string;
/**
Expand All @@ -25,26 +30,27 @@ 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>();
useEffect(() => {
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);
}
Expand Down
60 changes: 41 additions & 19 deletions packages/react/src/components/cell/CellAdapter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -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
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -316,7 +337,7 @@ export class CellAdapter {
return this._panel;
}

get codeCell(): CodeCell {
get codeCell(): CodeCell | MarkdownCell | RawCell {
return this._codeCell;
}

Expand All @@ -335,6 +356,7 @@ export class CellAdapter {

export namespace CellAdapter {
export type ICellAdapterOptions = {
type: 'code' | 'markdown' | 'raw';
source: string;
serverSettings: ServerConnection.ISettings;
kernel: Kernel;
Expand Down

0 comments on commit ba052cf

Please sign in to comment.