@theia/notebook 1.41.0

package/src/browser/service/notebook-service.ts

@@ -0,0 +1,178 @@
+// *****************************************************************************
+// Copyright (C) 2023 TypeFox and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { Disposable, DisposableCollection, Emitter, URI } from '@theia/core';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { BinaryBuffer } from '@theia/core/lib/common/buffer';
+import { NotebookData, NotebookExtensionDescription, TransientOptions } from '../../common';
+import { NotebookModel, NotebookModelFactory, NotebookModelProps } from '../view-model/notebook-model';
+import { FileService } from '@theia/filesystem/lib/browser/file-service';
+import { MonacoTextModelService } from '@theia/monaco/lib/browser/monaco-text-model-service';
+import { NotebookCellModel, NotebookCellModelFactory, NotebookCellModelProps } from '../view-model/notebook-cell-model';
+import { Deferred } from '@theia/core/lib/common/promise-util';
+
+export const NotebookProvider = Symbol('notebook provider');
+
+export interface SimpleNotebookProviderInfo {
+    readonly notebookType: string,
+    readonly serializer: NotebookSerializer,
+    readonly extensionData: NotebookExtensionDescription
+}
+
+export interface NotebookSerializer {
+    options: TransientOptions;
+    dataToNotebook(data: BinaryBuffer): Promise<NotebookData>;
+    notebookToData(data: NotebookData): Promise<BinaryBuffer>;
+}
+
+@injectable()
+export class NotebookService implements Disposable {
+
+    @inject(FileService)
+    protected fileService: FileService;
+
+    @inject(MonacoTextModelService)
+    protected modelService: MonacoTextModelService;
+
+    @inject(NotebookModelFactory)
+    protected notebookModelFactory: (props: NotebookModelProps) => NotebookModel;
+
+    @inject(NotebookCellModelFactory)
+    protected notebookCellModelFactory: (props: NotebookCellModelProps) => NotebookCellModel;
+
+    protected notebookSerializerEmitter = new Emitter<string>();
+    readonly onNotebookSerializer = this.notebookSerializerEmitter.event;
+
+    protected readonly disposables = new DisposableCollection();
+
+    protected readonly notebookProviders = new Map<string, SimpleNotebookProviderInfo>();
+    protected readonly notebookModels = new Map<string, NotebookModel>();
+
+    protected readonly didAddViewTypeEmitter = new Emitter<string>();
+    readonly onDidAddViewType = this.didAddViewTypeEmitter.event;
+
+    protected readonly didRemoveViewTypeEmitter = new Emitter<string>();
+    readonly onDidRemoveViewType = this.didRemoveViewTypeEmitter.event;
+
+    protected readonly willOpenNotebookTypeEmitter = new Emitter<string>();
+    readonly onWillOpenNotebook = this.willOpenNotebookTypeEmitter.event;
+
+    protected readonly willAddNotebookDocumentEmitter = new Emitter<URI>();
+    readonly onWillAddNotebookDocument = this.willAddNotebookDocumentEmitter.event;
+    protected readonly didAddNotebookDocumentEmitter = new Emitter<NotebookModel>();
+    readonly onDidAddNotebookDocument = this.didAddNotebookDocumentEmitter.event;
+    protected readonly willRemoveNotebookDocumentEmitter = new Emitter<NotebookModel>();
+    readonly onWillRemoveNotebookDocument = this.willRemoveNotebookDocumentEmitter.event;
+    protected readonly didRemoveNotebookDocumentEmitter = new Emitter<NotebookModel>();
+    readonly onDidRemoveNotebookDocument = this.didRemoveNotebookDocumentEmitter.event;
+
+    dispose(): void {
+        this.disposables.dispose();
+    }
+
+    protected readonly ready = new Deferred();
+
+    /**
+     * Marks the notebook service as ready. From this point on, the service will start dispatching the `onNotebookSerializer` event.
+     */
+    markReady(): void {
+        this.ready.resolve();
+    }
+
+    registerNotebookSerializer(notebookType: string, extensionData: NotebookExtensionDescription, serializer: NotebookSerializer): Disposable {
+        if (this.notebookProviders.has(notebookType)) {
+            throw new Error(`notebook provider for viewtype '${notebookType}' already exists`);
+        }
+
+        this.notebookProviders.set(notebookType, { notebookType: notebookType, serializer, extensionData });
+        this.didAddViewTypeEmitter.fire(notebookType);
+
+        return Disposable.create(() => {
+            this.notebookProviders.delete(notebookType);
+            this.didRemoveViewTypeEmitter.fire(notebookType);
+        });
+    }
+
+    async createNotebookModel(data: NotebookData, viewType: string, uri: URI): Promise<NotebookModel> {
+        const serializer = this.notebookProviders.get(viewType)?.serializer;
+        if (!serializer) {
+            throw new Error('no notebook serializer for ' + viewType);
+        }
+
+        this.willAddNotebookDocumentEmitter.fire(uri);
+        const model = this.notebookModelFactory({ data, uri, viewType, serializer });
+        this.notebookModels.set(uri.toString(), model);
+        // Resolve cell text models right after creating the notebook model
+        // This ensures that all text models are available in the plugin host
+        await Promise.all(model.cells.map(e => e.resolveTextModel()));
+        this.didAddNotebookDocumentEmitter.fire(model);
+        return model;
+    }
+
+    async getNotebookDataProvider(viewType: string): Promise<SimpleNotebookProviderInfo> {
+        await this.ready.promise;
+        await this.notebookSerializerEmitter.sequence(async listener => listener(`onNotebookSerializer:${viewType}`));
+
+        const result = await this.waitForNotebookProvider(viewType);
+        if (!result) {
+            throw new Error(`No provider registered for view type: '${viewType}'`);
+        }
+        return result;
+    }
+
+    /**
+     * When the application starts up, notebook providers from plugins are not registered yet.
+     * It takes a few seconds for the plugin host to start so that notebook data providers can be registered.
+     * This methods waits until the notebook provider is registered.
+     */
+    protected async waitForNotebookProvider(type: string): Promise<SimpleNotebookProviderInfo | undefined> {
+        if (this.notebookProviders.has(type)) {
+            return this.notebookProviders.get(type);
+        }
+        const deferred = new Deferred<SimpleNotebookProviderInfo | undefined>();
+        // 20 seconds of timeout
+        const timeoutDuration = 20_000;
+        const disposable = this.onDidAddViewType(viewType => {
+            if (viewType === type) {
+                clearTimeout(timeout);
+                disposable.dispose();
+                deferred.resolve(this.notebookProviders.get(type));
+            }
+        });
+        const timeout = setTimeout(() => {
+            clearTimeout(timeout);
+            disposable.dispose();
+            deferred.reject();
+        }, timeoutDuration);
+        return deferred.promise;
+    }
+
+    getNotebookEditorModel(uri: URI): NotebookModel | undefined {
+        return this.notebookModels.get(uri.toString());
+    }
+
+    getNotebookModels(): Iterable<NotebookModel> {
+        return this.notebookModels.values();
+    }
+
+    async willOpenNotebook(type: string): Promise<void> {
+        return this.willOpenNotebookTypeEmitter.sequence(async listener => listener(type));
+    }
+
+    listNotebookDocuments(): NotebookModel[] {
+        return [...this.notebookModels.values()];
+    }
+}

package/src/browser/style/index.css

@@ -0,0 +1,236 @@
+/********************************************************************************
+ * Copyright (C) 2023 TypeFox and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+:root {
+  --theia-notebook-markdown-size: 17px;
+}
+
+.theia-notebook-cell-list {
+  overflow-y: auto;
+  list-style: none;
+  padding-left: 0px;
+  background-color: var(--theia-notebook-editorBackground);
+}
+
+.theia-notebook-cell {
+  cursor: grab;
+  display: flex;
+  margin: 10px 0px;
+}
+
+.theia-notebook-cell:hover .theia-notebook-cell-marker {
+  visibility: visible;
+}
+
+.theia-notebook-cell-marker {
+  background-color: var(--theia-notebook-inactiveFocusedCellBorder);
+  width: 3px;
+  margin: 0px 8px 0px 4px;
+  border-radius: 4px;
+  visibility: hidden;
+}
+
+.theia-notebook-cell-marker-selected {
+  visibility: visible;
+  background-color: var(--theia-notebook-focusedCellBorder);
+}
+
+.theia-notebook-cell-marker:hover {
+  width: 5px;
+  margin: 0px 6px 0px 4px;
+}
+
+.theia-notebook-cell-content {
+  flex: 1;
+  width: calc(100% - 15px);
+}
+
+.theia-notebook-markdown-content {
+  padding: 8px 16px 8px 36px;
+  font-size: var(--theia-notebook-markdown-size);
+}
+
+.theia-notebook-markdown-content > *:first-child {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.theia-notebook-markdown-content > *:only-child,
+.theia-notebook-markdown-content > *:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.theia-notebook-empty-markdown {
+  opacity: 0.6;
+}
+
+.theia-notebook-cell-editor {
+  padding: 10px 10px 0 10px;
+}
+
+.theia-notebook-cell-editor-container {
+  width: calc(100% - 46px);
+  flex: 1;
+  outline: 1px solid var(--theia-notebook-cellBorderColor);
+  margin: 0px 10px;
+}
+
+.theia-notebook-cell.focused .theia-notebook-cell-editor-container {
+  outline-color: var(--theia-notebook-focusedEditorBorder);
+}
+
+.notebook-cell-status {
+  display: flex;
+  flex-direction: row;
+  font-size: 12px;
+  height: 16px;
+}
+
+.notebook-cell-status-left {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+}
+
+.notebook-cell-status-right {
+  margin: 0 5px;
+}
+
+.notebook-cell-status-item {
+  margin: 0 3px;
+  padding: 0 3px;
+  display: flex;
+  align-items: center;
+}
+
+.theia-notebook-cell-toolbar {
+  border: 1px solid var(--theia-notebook-cellToolbarSeparator);
+  display: flex;
+  position: absolute;
+  margin: -20px 0 0 66px;
+  padding: 2px;
+  background-color: var(--theia-editor-background);
+}
+
+.theia-notebook-cell-sidebar {
+  display: flex;
+  flex-direction: column;
+  padding: 2px;
+  background-color: var(--theia-editor-background);
+}
+
+.theia-notebook-cell-toolbar-item {
+  height: 18px;
+  width: 18px;
+}
+
+.theia-notebook-cell-toolbar-item:hover {
+  background-color: var(--theia-toolbar-hoverBackground);
+}
+
+.theia-notebook-cell-toolbar-item:active {
+  background-color: var(--theia-toolbar-active);
+}
+
+.theia-notebook-cell-divider {
+  height: 20px;
+  width: 100%;
+}
+
+.theia-notebook-cell-with-sidebar {
+  display: flex;
+  flex-direction: row;
+}
+
+.theia-notebook-cell-sidebar {
+  display: flex;
+  flex-direction: column;
+}
+
+.theia-notebook-main-toolbar {
+  position: sticky;
+  top: 0;
+  background: var(--theia-editor-background);
+  display: flex;
+  flex-direction: row;
+  z-index: 1;
+  /*needed to be on rendered on top of monaco editors*/
+}
+
+.theia-notebook-main-toolbar-item {
+  height: 22px;
+  display: flex;
+  align-items: center;
+  margin: 0 4px;
+  padding: 2px;
+  text-align: center;
+  color: var(--theia-foreground) !important;
+  cursor: pointer;
+}
+
+.theia-notebook-main-toolbar-item:hover {
+  background-color: var(--theia-toolbar-hoverBackground);
+}
+
+.theia-notebook-main-toolbar-item-text {
+  padding: 0 4px;
+}
+
+.theia-notebook-toolbar-separator {
+  width: 1px;
+  background-color: var(--theia-notebook-cellToolbarSeparator);
+  margin: 0 4px;
+}
+
+.theia-notebook-add-cell-buttons {
+  justify-content: center;
+  display: flex;
+}
+
+.theia-notebook-add-cell-button {
+  border: 1px solid var(--theia-notebook-cellToolbarSeparator);
+  background-color: var(--theia-editor-background);
+  color: var(--theia-foreground);
+  vertical-align: middle;
+  text-align: center;
+  height: 24px;
+  margin: 0 8px;
+}
+
+.theia-notebook-add-cell-button:hover {
+  background-color: var(--theia-toolbar-hoverBackground);
+}
+
+.theia-notebook-add-cell-button:active {
+  background-color: var(--theia-toolbar-active);
+}
+
+.theia-notebook-add-cell-button-icon {
+  vertical-align: middle;
+}
+
+.theia-notebook-cell-output-webview {
+  padding: 5px 0px;
+  margin: 0px 10px;
+  width: 100%;
+}
+
+.theia-notebook-cell-drop-indicator {
+  height: 2px;
+  background-color: var(--theia-notebook-focusedCellBorder);
+  width: 100%;
+}

package/src/browser/view/notebook-cell-editor.tsx

@@ -0,0 +1,97 @@
+// *****************************************************************************
+// Copyright (C) 2023 TypeFox and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import * as React from '@theia/core/shared/react';
+import { NotebookModel } from '../view-model/notebook-model';
+import { NotebookCellModel } from '../view-model/notebook-cell-model';
+import { MonacoCodeEditor } from '@theia/monaco/lib/browser/monaco-code-editor';
+import { MonacoEditorServices } from '@theia/monaco/lib/browser/monaco-editor';
+import { MonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';
+import { DisposableCollection } from '@theia/core';
+
+interface CellEditorProps {
+    notebookModel: NotebookModel,
+    cell: NotebookCellModel,
+    monacoServices: MonacoEditorServices
+}
+
+const DEFAULT_EDITOR_OPTIONS = {
+    ...MonacoEditorProvider.inlineOptions,
+    minHeight: -1,
+    maxHeight: -1,
+    scrollbar: {
+        ...MonacoEditorProvider.inlineOptions.scrollbar,
+        alwaysConsumeMouseWheel: false
+    }
+};
+
+export class CellEditor extends React.Component<CellEditorProps, {}> {
+
+    protected editor?: MonacoCodeEditor;
+    protected toDispose = new DisposableCollection();
+    protected container?: HTMLDivElement;
+
+    override componentDidMount(): void {
+        this.disposeEditor();
+        this.initEditor();
+    }
+
+    override componentWillUnmount(): void {
+        this.disposeEditor();
+    }
+
+    protected disposeEditor(): void {
+        this.toDispose.dispose();
+        this.toDispose = new DisposableCollection();
+    }
+
+    protected async initEditor(): Promise<void> {
+        const { cell, notebookModel, monacoServices } = this.props;
+        if (this.container) {
+            const editorNode = this.container;
+            const editorModel = await cell.resolveTextModel();
+            const uri = cell.uri;
+            this.editor = new MonacoCodeEditor(uri,
+                editorModel,
+                editorNode,
+                monacoServices,
+                DEFAULT_EDITOR_OPTIONS);
+            this.toDispose.push(this.editor);
+            this.editor.setLanguage(cell.language);
+            this.toDispose.push(this.editor.getControl().onDidContentSizeChange(() => {
+                editorNode.style.height = this.editor!.getControl().getContentHeight() + 7 + 'px';
+                this.editor!.setSize({ width: -1, height: this.editor!.getControl().getContentHeight() });
+            }));
+            this.toDispose.push(this.editor.onDocumentContentChanged(e => {
+                notebookModel.cellDirtyChanged(cell, true);
+                cell.source = e.document.getText();
+            }));
+        }
+    }
+
+    protected assignRef = (component: HTMLDivElement) => {
+        this.container = component;
+    };
+
+    protected handleResize = () => {
+        this.editor?.refresh();
+    };
+
+    override render(): React.ReactNode {
+        return <div className='theia-notebook-cell-editor' onResize={this.handleResize} id={this.props.cell.uri.toString()} ref={this.assignRef}></div>;
+    }
+
+}

package/src/browser/view/notebook-cell-list-view.tsx

@@ -0,0 +1,171 @@
+// *****************************************************************************
+// Copyright (C) 2023 TypeFox and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+import * as React from '@theia/core/shared/react';
+import { CellEditType, CellKind } from '../../common';
+import { NotebookCellModel } from '../view-model/notebook-cell-model';
+import { NotebookModel } from '../view-model/notebook-model';
+import { NotebookCellToolbarFactory } from './notebook-cell-toolbar-factory';
+import { codicon } from '@theia/core/lib/browser';
+import { CommandRegistry, DisposableCollection, nls } from '@theia/core';
+import { NotebookCommands } from '../contributions/notebook-actions-contribution';
+import { NotebookCellActionContribution } from '../contributions/notebook-cell-actions-contribution';
+
+export interface CellRenderer {
+    render(notebookData: NotebookModel, cell: NotebookCellModel, index: number): React.ReactNode
+}
+
+interface CellListProps {
+    renderers: Map<CellKind, CellRenderer>;
+    notebookModel: NotebookModel;
+    toolbarRenderer: NotebookCellToolbarFactory;
+    commandRegistry: CommandRegistry
+}
+
+interface NotebookCellListState {
+    selectedCell?: NotebookCellModel;
+    dragOverIndicator: { cell: NotebookCellModel, position: 'top' | 'bottom' } | undefined;
+}
+
+export class NotebookCellListView extends React.Component<CellListProps, NotebookCellListState> {
+
+    protected toDispose = new DisposableCollection();
+
+    constructor(props: CellListProps) {
+        super(props);
+        this.state = { selectedCell: undefined, dragOverIndicator: undefined };
+        this.toDispose.push(props.notebookModel.onDidAddOrRemoveCell(e => {
+            this.setState({ selectedCell: undefined });
+        }));
+    }
+
+    override componentWillUnmount(): void {
+        this.toDispose.dispose();
+    }
+
+    override render(): React.ReactNode {
+        return <ul className='theia-notebook-cell-list'>
+            {this.props.notebookModel.cells
+                .map((cell, index) =>
+                    <React.Fragment key={'cell-' + cell.handle}>
+                        <NotebookCellDivider onAddNewCell={(kind: CellKind) => this.onAddNewCell(kind, index)}
+                            onDrop={e => this.onDrop(e, index)}
+                            onDragOver={e => this.onDragOver(e, cell, 'top')} />
+                        {this.shouldRenderDragOverIndicator(cell, 'top') && <CellDropIndicator />}
+                        <li className={'theia-notebook-cell' + (this.state.selectedCell === cell ? ' focused' : '')}
+                            onClick={() => {
+                                this.setState({ selectedCell: cell });
+                                this.props.notebookModel.setSelectedCell(cell);
+                            }}
+                            onDragStart={e => this.onDragStart(e, index)}
+                            onDragOver={e => this.onDragOver(e, cell)}
+                            onDrop={e => this.onDrop(e, index)}
+                            draggable={true}
+                            ref={(node: HTMLLIElement) => cell.refChanged(node)}>
+                            <div className={'theia-notebook-cell-marker' + (this.state.selectedCell === cell ? ' theia-notebook-cell-marker-selected' : '')}></div>
+                            <div className='theia-notebook-cell-content'>
+                                {this.renderCellContent(cell, index)}
+                            </div>
+                            {this.state.selectedCell === cell &&
+                                this.props.toolbarRenderer.renderCellToolbar(NotebookCellActionContribution.ACTION_MENU, this.props.notebookModel, cell)}
+                        </li>
+                        {this.shouldRenderDragOverIndicator(cell, 'bottom') && <CellDropIndicator />}
+                    </React.Fragment>
+                )
+            }
+            <NotebookCellDivider onAddNewCell={(kind: CellKind) => this.onAddNewCell(kind, this.props.notebookModel.cells.length)}
+                onDrop={e => this.onDrop(e, this.props.notebookModel.cells.length - 1)}
+                onDragOver={e => this.onDragOver(e, this.props.notebookModel.cells[this.props.notebookModel.cells.length - 1], 'bottom')} />
+        </ul>;
+    }
+
+    renderCellContent(cell: NotebookCellModel, index: number): React.ReactNode {
+        const renderer = this.props.renderers.get(cell.cellKind);
+        if (!renderer) {
+            throw new Error(`No renderer found for cell type ${cell.cellKind}`);
+        }
+        return renderer.render(this.props.notebookModel, cell, index);
+    }
+
+    protected onDragStart(event: React.DragEvent<HTMLLIElement>, index: number): void {
+        event.stopPropagation();
+        event.dataTransfer.setData('text/notebook-cell-index', index.toString());
+    }
+
+    protected onDragOver(event: React.DragEvent<HTMLLIElement>, cell: NotebookCellModel, position?: 'top' | 'bottom'): void {
+        event.preventDefault();
+        event.stopPropagation();
+        // show indicator
+        this.setState({ ...this.state, dragOverIndicator: { cell, position: position ?? event.nativeEvent.offsetY < event.currentTarget.clientHeight / 2 ? 'top' : 'bottom' } });
+    }
+
+    protected onDrop(event: React.DragEvent<HTMLLIElement>, dropElementIndex: number): void {
+        const index = parseInt(event.dataTransfer.getData('text/notebook-cell-index'));
+        const isTargetBelow = index < dropElementIndex;
+        let newIdx = this.state.dragOverIndicator?.position === 'top' ? dropElementIndex : dropElementIndex + 1;
+        newIdx = isTargetBelow ? newIdx - 1 : newIdx;
+        if (index !== undefined && index !== dropElementIndex) {
+            this.props.notebookModel.applyEdits([{
+                editType: CellEditType.Move,
+                length: 1,
+                index,
+                newIdx
+            }], true);
+        }
+        this.setState({ ...this.state, dragOverIndicator: undefined });
+    }
+
+    protected onAddNewCell(kind: CellKind, index: number): void {
+        this.props.commandRegistry.executeCommand(NotebookCommands.ADD_NEW_CELL_COMMAND.id,
+            this.props.notebookModel,
+            kind,
+            index
+        );
+    }
+
+    protected shouldRenderDragOverIndicator(cell: NotebookCellModel, position: 'top' | 'bottom'): boolean {
+        return this.state.dragOverIndicator !== undefined &&
+            this.state.dragOverIndicator.cell === cell &&
+            this.state.dragOverIndicator.position === position;
+    }
+
+}
+
+export interface NotebookCellDividerProps {
+    onAddNewCell: (type: CellKind) => void;
+    onDrop: (event: React.DragEvent<HTMLLIElement>) => void;
+    onDragOver: (event: React.DragEvent<HTMLLIElement>) => void;
+}
+
+export function NotebookCellDivider({ onAddNewCell, onDrop, onDragOver }: NotebookCellDividerProps): React.JSX.Element {
+    const [hover, setHover] = React.useState(false);
+
+    return <li className='theia-notebook-cell-divider' onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onDrop={onDrop} onDragOver={onDragOver}>
+        {hover && <div className='theia-notebook-add-cell-buttons'>
+            <button className='theia-notebook-add-cell-button' onClick={() => onAddNewCell(CellKind.Code)} title={nls.localizeByDefault('Add Code Cell')}>
+                <div className={codicon('add') + ' theia-notebook-add-cell-button-icon'} />
+                {nls.localizeByDefault('Code')}
+            </button>
+            <button className='theia-notebook-add-cell-button' onClick={() => onAddNewCell(CellKind.Markup)} title={nls.localizeByDefault('Add Markdown Cell')}>
+                <div className={codicon('add') + ' theia-notebook-add-cell-button-icon'} />
+                {nls.localizeByDefault('Markdown')}
+            </button>
+        </div>}
+    </li>;
+}
+
+function CellDropIndicator(): React.JSX.Element {
+    return <div className='theia-notebook-cell-drop-indicator' />;
+}