Use correct cell type for selected language

packages/notebook/src/browser/contributions/cell-operations.ts

@@ -22,7 +22,7 @@ import { NotebookModel } from '../view-model/notebook-model';
  * a collection of different reusable notbook cell operations
  */
 
-export function changeCellType(notebookModel: NotebookModel, cell: NotebookCellModel, type: CellKind): void {
+export function changeCellType(notebookModel: NotebookModel, cell: NotebookCellModel, type: CellKind, language?: string): void {
  if (cell.cellKind === type) {
  return;
  }
@@ -32,7 +32,8 @@ export function changeCellType(notebookModel: NotebookModel, cell: NotebookCellM
  count: 1,
  cells: [{
  ...cell.getData(),
- cellKind: type
+ cellKind: type,
+ language: language ?? cell.language
  }]
  }], true);
 }

packages/notebook/src/browser/contributions/notebook-cell-actions-contribution.ts

@@ -370,18 +370,25 @@ export class NotebookCellActionContribution implements MenuContribution, Command
  return;
  }
  const language = await this.languageQuickPickService.pickEditorLanguage(selectedCell.language);
- if (!language?.value || language.value === 'autoDetect') {
+ if (!language?.value || language.value === 'autoDetect' || language.value.id === selectedCell.language) {
  return;
  }
- if (language.value.id === 'markdown') {
- selectedCell.language = 'markdown';
- changeCellType(activeNotebook, selectedCell, CellKind.Markup);
+ const isMarkdownCell = selectedCell.cellKind === CellKind.Markup;
+ const isMarkdownLanguage = language.value.id === 'markdown';
+ if (isMarkdownLanguage) {
+ if (!isMarkdownCell) {
+ changeCellType(activeNotebook, selectedCell, CellKind.Markup, language.value.id);
+ }
  } else {
- this.notebookEditorWidgetService.focusedEditor?.model?.applyEdits([{
- editType: CellEditType.CellLanguage,
- index: activeNotebook.cells.indexOf(selectedCell),
- language: language.value.id
- }], true);
+ if (isMarkdownCell) {
+ changeCellType(activeNotebook, selectedCell, CellKind.Code, language.value.id);
+ } else {
+ this.notebookEditorWidgetService.focusedEditor?.model?.applyEdits([{
+ editType: CellEditType.CellLanguage,
+ index: activeNotebook.cells.indexOf(selectedCell),
+ language: language.value.id
+ }], true);
+ }
  }
  }
  });

packages/notebook/src/browser/style/index.css

@@ -79,14 +79,14 @@
 }
 
 /* Markdown cell edit mode */
-.theia-notebook-cell-content:has(> .theia-notebook-cell-editor) {
+.theia-notebook-cell-content:has(.theia-notebook-markdown-editor-container>.theia-notebook-cell-editor) {
  margin-left: 37px;
  margin-right: var(--theia-notebook-cell-editor-margin-right);
  outline: 1px solid var(--theia-notebook-cellBorderColor);
 }
 
 /* Markdown cell edit mode focused */
-.theia-notebook-cell.focused .theia-notebook-cell-content:has(> .theia-notebook-cell-editor) {
+.theia-notebook-cell.focused .theia-notebook-cell-content:has(.theia-notebook-markdown-editor-container>.theia-notebook-cell-editor) {
  outline-color: var(--theia-notebook-focusedEditorBorder);
 }
 

packages/notebook/src/browser/view/notebook-code-cell-view.tsx

@@ -150,7 +150,7 @@ export interface NotebookCodeCellStatusProps {
  notebook: NotebookModel;
  cell: NotebookCellModel;
  commandRegistry: CommandRegistry;
- executionStateService: NotebookExecutionStateService;
+ executionStateService?: NotebookExecutionStateService;
  onClick: () => void;
 }
 
@@ -171,22 +171,24 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
  };
 
  let currentInterval: NodeJS.Timeout | undefined;
- this.toDispose.push(props.executionStateService.onDidChangeExecution(event => {
- if (event.affectsCell(this.props.cell.uri)) {
- this.setState({ currentExecution: event.changed, executionTime: 0 });
- clearInterval(currentInterval);
- if (event.changed?.state === NotebookCellExecutionState.Executing) {
- const startTime = Date.now();
- // The resolution of the time display is only a single digit after the decimal point.
- // Therefore, we only need to update the display every 100ms.
- currentInterval = setInterval(() => {
- this.setState({
- executionTime: Date.now() - startTime
- });
- }, 100);
+ if (props.executionStateService) {
+ this.toDispose.push(props.executionStateService.onDidChangeExecution(event => {
+ if (event.affectsCell(this.props.cell.uri)) {
+ this.setState({ currentExecution: event.changed, executionTime: 0 });
+ clearInterval(currentInterval);
+ if (event.changed?.state === NotebookCellExecutionState.Executing) {
+ const startTime = Date.now();
+ // The resolution of the time display is only a single digit after the decimal point.
+ // Therefore, we only need to update the display every 100ms.
+ currentInterval = setInterval(() => {
+ this.setState({
+ executionTime: Date.now() - startTime
+ });
+ }, 100);
+ }
  }
- }
- }));
+ }));
+ }
 
  this.toDispose.push(props.cell.onDidChangeLanguage(() => {
  this.forceUpdate();
@@ -200,7 +202,7 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
  override render(): React.ReactNode {
  return <div className='notebook-cell-status' onClick={() => this.props.onClick()}>
  <div className='notebook-cell-status-left'>
- {this.renderExecutionState()}
+ {this.props.executionStateService && this.renderExecutionState()}
  </div>
  <div className='notebook-cell-status-right'>
  <span className='notebook-cell-language-label' onClick={() => {

packages/notebook/src/browser/view/notebook-markdown-cell-view.tsx

@@ -23,8 +23,10 @@ import { NotebookCellModel } from '../view-model/notebook-cell-model';
 import { CellEditor } from './notebook-cell-editor';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { MonacoEditorServices } from '@theia/monaco/lib/browser/monaco-editor';
-import { nls } from '@theia/core';
+import { CommandRegistry, nls } from '@theia/core';
 import { NotebookContextManager } from '../service/notebook-context-manager';
+import { NotebookOptionsService } from '../service/notebook-options';
+import { NotebookCodeCellStatus } from './notebook-code-cell-view';
 import { NotebookEditorFindMatch, NotebookEditorFindMatchOptions } from './notebook-find-widget';
 import * as mark from 'advanced-mark.js';
 
@@ -39,9 +41,21 @@ export class NotebookMarkdownCellRenderer implements CellRenderer {
  @inject(NotebookContextManager)
  protected readonly notebookContextManager: NotebookContextManager;
 
+ @inject(CommandRegistry)
+ protected readonly commandRegistry: CommandRegistry;
+
+ @inject(NotebookOptionsService)
+ protected readonly notebookOptionsService: NotebookOptionsService;
+
  render(notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode {
- return <MarkdownCell markdownRenderer={this.markdownRenderer} monacoServices={this.monacoServices}
- cell={cell} notebookModel={notebookModel} notebookContextManager={this.notebookContextManager} />;
+ return <MarkdownCell
+ markdownRenderer={this.markdownRenderer}
+ commandRegistry={this.commandRegistry}
+ monacoServices={this.monacoServices}
+ notebookOptionsService={this.notebookOptionsService}
+ cell={cell}
+ notebookModel={notebookModel}
+ notebookContextManager={this.notebookContextManager} />;
  }
 
  renderDragImage(cell: NotebookCellModel): HTMLElement {
@@ -55,15 +69,19 @@ export class NotebookMarkdownCellRenderer implements CellRenderer {
 }
 
 interface MarkdownCellProps {
- markdownRenderer: MarkdownRenderer
- monacoServices: MonacoEditorServices
-
- cell: NotebookCellModel
- notebookModel: NotebookModel
- notebookContextManager: NotebookContextManager
+ markdownRenderer: MarkdownRenderer;
+ monacoServices: MonacoEditorServices;
+
+ commandRegistry: CommandRegistry;
+ cell: NotebookCellModel;
+ notebookModel: NotebookModel;
+ notebookContextManager: NotebookContextManager;
+ notebookOptionsService: NotebookOptionsService;
 }
 
-function MarkdownCell({ markdownRenderer, monacoServices, cell, notebookModel, notebookContextManager }: MarkdownCellProps): React.JSX.Element {
+function MarkdownCell({
+ markdownRenderer, monacoServices, cell, notebookModel, notebookContextManager, notebookOptionsService, commandRegistry
+}: MarkdownCellProps): React.JSX.Element {
  const [editMode, setEditMode] = React.useState(cell.editing);
  let empty = false;
 
@@ -111,11 +129,19 @@ function MarkdownCell({ markdownRenderer, monacoServices, cell, notebookModel, n
  }
 
  return editMode ?
- <CellEditor cell={cell} notebookModel={notebookModel} monacoServices={monacoServices} notebookContextManager={notebookContextManager} /> :
- <div className='theia-notebook-markdown-content'
+ (<div className='theia-notebook-markdown-editor-container' key="code">
+ <CellEditor notebookModel={notebookModel} cell={cell}
+ monacoServices={monacoServices}
+ notebookContextManager={notebookContextManager}
+ fontInfo={notebookOptionsService.editorFontInfo} />
+ <NotebookCodeCellStatus cell={cell} notebook={notebookModel}
+ commandRegistry={commandRegistry}
+ onClick={() => cell.requestFocusEditor()} />
+ </div >) :
+ (<div className='theia-notebook-markdown-content' key="markdown"
  onDoubleClick={() => cell.requestEdit()}
  ref={node => node?.replaceChildren(markdownContent)}
- />;
+ />);
 }
 
 function searchInMarkdown(instance: mark, options: NotebookEditorFindMatchOptions): NotebookEditorFindMatch[] {