weavefox · BroKun · Apr 17, 2024 · Apr 17, 2024 · Apr 17, 2024
diff --git a/.changeset/tiny-cobras-bake.md b/.changeset/tiny-cobras-bake.md
@@ -0,0 +1,33 @@
+---
+"@difizen/libro-cofine-editor-contribution": patch
+"@difizen/libro-cofine-editor-core": patch
+"@difizen/libro-search-code-cell": patch
+"@difizen/libro-cofine-textmate": patch
+"@difizen/libro-language-client": patch
+"@difizen/libro-cofine-editor": patch
+"@difizen/libro-markdown-cell": patch
+"@difizen/libro-shared-model": patch
+"@difizen/libro-code-editor": patch
+"@difizen/libro-prompt-cell": patch
+"@difizen/libro-virtualized": patch
+"@difizen/libro-codemirror": patch
+"@difizen/libro-rendermime": patch
+"@difizen/libro-code-cell": patch
+"@difizen/libro-markdown": patch
+"@difizen/libro-raw-cell": patch
+"@difizen/libro-terminal": patch
+"@difizen/libro-jupyter": patch
+"@difizen/libro-common": patch
+"@difizen/libro-kernel": patch
+"@difizen/libro-output": patch
+"@difizen/libro-search": patch
+"@difizen/libro-widget": patch
+"@difizen/libro-core": patch
+"@difizen/libro-l10n": patch
+"@difizen/libro-lab": patch
+"@difizen/libro-lsp": patch
+"@difizen/libro-toc": patch
+"@difizen/libro-docs": patch
+---
+
+Jupyter: integrate jupyter-widgets
diff --git a/packages/libro-code-cell/src/code-cell-view.tsx b/packages/libro-code-cell/src/code-cell-view.tsx
@@ -16,7 +16,7 @@ import {
   LibroExecutableCellView,
   LibroOutputArea,
   VirtualizedManagerHelper,
-  LirboContextKey,
+  LibroContextKey,
 } from '@difizen/libro-core';
 import type { ViewSize } from '@difizen/mana-app';
 import { Disposable } from '@difizen/mana-app';
@@ -103,7 +103,7 @@ const CodeEditorViewComponent = forwardRef<HTMLDivElement>(
 @view('code-editor-cell-view')
 export class LibroCodeCellView extends LibroExecutableCellView {
   protected toDisposeOnEditor = new DisposableCollection();
-  @inject(LirboContextKey) protected readonly lirboContextKey: LirboContextKey;
+  @inject(LibroContextKey) protected readonly libroContextKey: LibroContextKey;
   override view = CodeEditorViewComponent;
 
   viewManager: ViewManager;
@@ -292,7 +292,7 @@ export class LibroCodeCellView extends LibroExecutableCellView {
       this.editorView.editorStatus === 'ready' &&
       this.parent.model.active?.id === this.id &&
       !this.parent.model.commandMode &&
-      this.lirboContextKey.commandModeEnabled === true && // 排除弹窗等情况
+      this.libroContextKey.commandModeEnabled === true && // 排除弹窗等情况
       this.parent.model.readOnly === false
     ) {
       this.editorView?.editor.setOption('styleActiveLine', true);

diff --git a/packages/libro-core/src/command/libro-command-contribution.ts b/packages/libro-core/src/command/libro-command-contribution.ts
@@ -11,7 +11,7 @@ import { v4 } from 'uuid';
 
 import { LibroCellView, ExecutableCellModel, EditorCellView } from '../cell/index.js';
 import type { LibroEditorCellView } from '../cell/index.js';
-import { LirboContextKey } from '../libro-context-key.js';
+import { LibroContextKey } from '../libro-context-key.js';
 import type { CellView, NotebookView } from '../libro-protocol.js';
 import { LibroToolbarArea } from '../libro-protocol.js';
 import { LibroService } from '../libro-service.js';
@@ -29,7 +29,7 @@ export class LibroCommandContribution implements CommandContribution {
   @inject(ModalService) protected readonly modalService: ModalService;
   @inject(LibroCommandRegister) protected readonly libroCommand: LibroCommandRegister;
   @inject(LibroService) protected readonly libroService: LibroService;
-  @inject(LirboContextKey) protected readonly lirboContextKey: LirboContextKey;
+  @inject(LibroContextKey) protected readonly libroContextKey: LibroContextKey;
 
   registerCommands(command: CommandRegistry): void {
     this.libroCommand.registerLibroCommand(command, NotebookCommands['EnterEditMode'], {

diff --git a/packages/libro-core/src/libro-context-key.ts b/packages/libro-core/src/libro-context-key.ts
@@ -7,7 +7,7 @@ import { LibroContextKeys } from './libro-protocol.js';
 import { LibroService } from './libro-service.js';
 
 @singleton()
-export class LirboContextKey {
+export class LibroContextKey {
   protected readonly contextKeyService: ContextKeyService;
   protected readonly libroService: LibroService;
   protected toDisposeOnActiveChanged?: Disposable;

diff --git a/packages/libro-core/src/libro-view.tsx b/packages/libro-core/src/libro-view.tsx
@@ -49,7 +49,7 @@ import {
   DndList,
 } from './components/index.js';
 import { LibroViewHeader } from './components/libro-view-header.js';
-import { LirboContextKey } from './libro-context-key.js';
+import { LibroContextKey } from './libro-context-key.js';
 import { LibroModel } from './libro-model.js';
 import { NotebookService, notebookViewFactoryId } from './libro-protocol.js';
 import type {
@@ -295,7 +295,7 @@ export class LibroView extends BaseView implements NotebookView {
   @inject(CellService) cellService: CellService;
   @inject(LibroService) libroService: LibroService;
   @inject(LibroSlotManager) libroSlotManager: LibroSlotManager;
-  @inject(LirboContextKey) contextKey: LirboContextKey;
+  @inject(LibroContextKey) contextKey: LibroContextKey;
 
   @inject(ViewManager) protected viewManager: ViewManager;
   @inject(ConfigurationService) protected configurationService: ConfigurationService;

diff --git a/packages/libro-core/src/module.ts b/packages/libro-core/src/module.ts
@@ -22,7 +22,7 @@ import {
 } from './components/index.js';
 import { LibroContentModule } from './content/index.js';
 import { LibroFormatterModule } from './formatter/index.js';
-import { LirboContextKey } from './libro-context-key.js';
+import { LibroContextKey } from './libro-context-key.js';
 import { LibroModel } from './libro-model.js';
 import {
   ModelFactory,
@@ -46,7 +46,7 @@ export const LibroModule = ManaModule.create()
     BaseWorkspaceService,
     VirtualizedManager,
     LibroService,
-    LirboContextKey,
+    LibroContextKey,
     LibroModel,
     LibroView,
     LibroSettingContribution,

diff --git a/packages/libro-jupyter/package.json b/packages/libro-jupyter/package.json
@@ -60,6 +60,7 @@
     "@difizen/libro-markdown-cell": "^0.1.30",
     "@difizen/libro-raw-cell": "^0.1.30",
     "@difizen/libro-language-client": "^0.1.30",
+    "@difizen/libro-widget": "^0.1.30",
     "@difizen/mana-app": "latest",
     "@difizen/mana-l10n": "latest",
     "@ant-design/colors": "^7.0.0",

diff --git a/packages/libro-jupyter/src/keybind-instructions/keybind-instructions-view.tsx b/packages/libro-jupyter/src/keybind-instructions/keybind-instructions-view.tsx
@@ -1,4 +1,4 @@
-import { LirboContextKey } from '@difizen/libro-core';
+import { LibroContextKey } from '@difizen/libro-core';
 import { inject, singleton } from '@difizen/mana-app';
 import { getOrigin, prop, useInject } from '@difizen/mana-app';
 import type { ModalItem, ModalItemProps } from '@difizen/mana-app';
@@ -49,7 +49,7 @@ const getSearchResult = (
 
 @singleton()
 export class KeybindInstrutionsService implements Disposable {
-  @inject(LirboContextKey) contextKey: LirboContextKey;
+  @inject(LibroContextKey) contextKey: LibroContextKey;
   isKeybindInstructionsMask = false;
   @prop() searchCommandModeData: DataType[] = [];
   @prop() searchEditModeData: DataType[] = [];

diff --git a/packages/libro-jupyter/src/module.ts b/packages/libro-jupyter/src/module.ts
@@ -25,6 +25,7 @@ import {
 import { RawCellModule } from '@difizen/libro-raw-cell';
 import { LibroSearchModule } from '@difizen/libro-search';
 import { SearchCodeCellModule } from '@difizen/libro-search-code-cell';
+import { WidgetModule } from '@difizen/libro-widget';
 import { ManaModule } from '@difizen/mana-app';
 
 import { LibroBetweenCellModule } from './add-between-cell/index.js';
@@ -56,6 +57,7 @@ import {
   LibroJupyterToolbarContribution,
   SaveFileErrorContribution,
 } from './toolbar/index.js';
+import { LibroWidgetMimeContribution } from './widget/index.js';
 
 export const LibroJupyterModule = ManaModule.create()
   .register(
@@ -74,6 +76,7 @@ export const LibroJupyterModule = ManaModule.create()
     LibroJupyterSettingContribution,
     JupyterServerLaunchManager,
     LibroJupyterView,
+    LibroWidgetMimeContribution,
     {
       token: CellExecutionTimeProvider,
       useValue: CellExecutionTip,
@@ -114,4 +117,5 @@ export const LibroJupyterModule = ManaModule.create()
     PlotlyModule,
     LibroJupyterFileModule,
     LibroLanguageClientModule,
+    WidgetModule,
   );
diff --git a/packages/libro-jupyter/src/widget/index.less b/packages/libro-jupyter/src/widget/index.less
@@ -0,0 +1,7 @@
+.libro-widget-render {
+  margin: 10px 24px;
+}
+
+.libro-widget-render:empty {
+  margin: unset;
+}
diff --git a/packages/libro-jupyter/src/widget/index.ts b/packages/libro-jupyter/src/widget/index.ts
@@ -0,0 +1,2 @@
+export * from './widget-render.js';
+export * from './widget-rendermime-contribution.js';
diff --git a/packages/libro-jupyter/src/widget/widget-render.tsx b/packages/libro-jupyter/src/widget/widget-render.tsx
@@ -0,0 +1,47 @@
+import type { BaseOutputView } from '@difizen/libro-core';
+import { RenderMimeRegistry } from '@difizen/libro-rendermime';
+import type { IRenderMimeRegistry } from '@difizen/libro-rendermime';
+import { LibroWidgetManager } from '@difizen/libro-widget';
+import { getOrigin, useInject, ViewRender } from '@difizen/mana-app';
+import React from 'react';
+import './index.less';
+
+import { LibroJupyterModel } from '../libro-jupyter-model.js';
+
+export const WidgetRender: React.FC<{ model: BaseOutputView }> = (props: {
+  model: BaseOutputView;
+}) => {
+  const { model } = props;
+
+  const widgetManager = useInject(LibroWidgetManager);
+  const defaultRenderMime = useInject<IRenderMimeRegistry>(RenderMimeRegistry);
+  const libro = model.cell.parent;
+  if (!(libro.model instanceof LibroJupyterModel) || !libro.model.kernelConnection) {
+    return null;
+  }
+  const widgets = widgetManager.getOrCreateWidgets(
+    getOrigin(libro.model.kernelConnection),
+  );
+  const mimeType = defaultRenderMime.preferredMimeType(model);
+  if (mimeType) {
+    const model_id = JSON.parse(JSON.stringify(model.data[mimeType])).model_id;
+    if (model_id) {
+      const widgetView = widgets.getModel(model_id);
+      if (widgetView.isCommClosed) {
+        return null;
+      }
+      return (
+        <div className="libro-widget-render-container">
+          <div className="libro-widget-render">
+            <ViewRender view={widgetView} />
+          </div>
+        </div>
+      );
+    }
+  }
+  return (
+    <div className="libro-widget-render-container">
+      <div className="libro-widget-render" />
+    </div>
+  );
+};
diff --git a/packages/libro-jupyter/src/widget/widget-rendermime-contribution.ts b/packages/libro-jupyter/src/widget/widget-rendermime-contribution.ts
@@ -0,0 +1,35 @@
+import type { BaseOutputView } from '@difizen/libro-core';
+import { RenderMimeContribution } from '@difizen/libro-rendermime';
+import { LibroWidgetManager } from '@difizen/libro-widget';
+import { inject, singleton } from '@difizen/mana-app';
+
+import { LibroJupyterModel } from '../libro-jupyter-model.js';
+
+import { WidgetRender } from './widget-render.js';
+
+@singleton({ contrib: RenderMimeContribution })
+export class LibroWidgetMimeContribution implements RenderMimeContribution {
+  @inject(LibroWidgetManager) libroWidgetManager: LibroWidgetManager;
+  canHandle = (model: BaseOutputView) => {
+    const libroModel = model.cell.parent.model;
+    let rank = 0;
+    if (libroModel instanceof LibroJupyterModel && libroModel.kernelConnection) {
+      const kc = libroModel.kernelConnection;
+      const widget = this.libroWidgetManager.getOrCreateWidgets(kc);
+      this.mimeTypes.forEach((mimeType) => {
+        const mimeData = model.data[mimeType];
+        if (mimeData && mimeData !== null) {
+          const data = JSON.parse(JSON.stringify(mimeData)).model_id;
+          if (Object.keys(model.data).includes(mimeType) && widget.hasModel(data)) {
+            rank = 100;
+          }
+        }
+      });
+    }
+    return rank;
+  };
+  renderType = 'widgetRenderer';
+  safe = true;
+  mimeTypes = ['application/vnd.jupyter.widget-view+json'];
+  render = WidgetRender;
+}
diff --git a/packages/libro-kernel/src/kernel/kernel-connection.ts b/packages/libro-kernel/src/kernel/kernel-connection.ts
@@ -1287,7 +1287,7 @@ export class KernelConnection implements IKernelConnection {
       // Close the comm asynchronously. We cannot block message processing on
       // kernel messages to wait for another kernel message.
       comm.close();
-      console.error('Exception opening new comm');
+      console.error('Exception opening new comm', e);
       throw e;
     }
   }

diff --git a/packages/libro-prompt-cell/src/input-handler/chat-record-input.tsx b/packages/libro-prompt-cell/src/input-handler/chat-record-input.tsx
@@ -1,5 +1,5 @@
 import { EditFilled } from '@ant-design/icons';
-import { LirboContextKey } from '@difizen/libro-core';
+import { LibroContextKey } from '@difizen/libro-core';
 import { useInject } from '@difizen/mana-app';
 import { Select, Tag } from 'antd';
 import classNames from 'classnames';
@@ -25,7 +25,7 @@ export const ChatRecordInput: FC<ChatRecordInputProps> = (
   const selectRef = useRef<BaseSelectRef>(null);
   const [selecting, setSelecting] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
-  const contextKey = useInject(LirboContextKey);
+  const contextKey = useInject(LibroContextKey);
 
   useEffect(() => {
     if (selecting) {

diff --git a/packages/libro-prompt-cell/src/input-handler/variable-name-input.tsx b/packages/libro-prompt-cell/src/input-handler/variable-name-input.tsx
@@ -1,5 +1,5 @@
 import { EditFilled } from '@ant-design/icons';
-import { LirboContextKey } from '@difizen/libro-core';
+import { LibroContextKey } from '@difizen/libro-core';
 import { useInject } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n';
 import { Input, Popover } from 'antd';
@@ -80,7 +80,7 @@ export const VariableNameInput: FC<VariableNameInputProps> = (
 ) => {
   const { value } = props;
   const [popoverVisible, setPopoverVisible] = useState(false);
-  const contextKey = useInject(LirboContextKey);
+  const contextKey = useInject(LibroContextKey);
   const ref = useRef<HTMLDivElement>(null);
   return (
     <div className={classNames(variableNameInputCls, props.classname)} ref={ref}>

diff --git a/packages/libro-prompt-cell/src/prompt-cell-view.tsx b/packages/libro-prompt-cell/src/prompt-cell-view.tsx
@@ -17,7 +17,7 @@ import {
   LibroExecutableCellView,
   LibroViewTracker,
   EditorStatus,
-  LirboContextKey,
+  LibroContextKey,
 } from '@difizen/libro-core';
 import type { ExecutionMeta, KernelMessage } from '@difizen/libro-jupyter';
 import { KernelError, LibroJupyterModel } from '@difizen/libro-jupyter';
@@ -214,7 +214,7 @@ const PropmtEditorViewComponent = React.forwardRef<HTMLDivElement>(
 @transient()
 @view('prompt-editor-cell-view')
 export class LibroPromptCellView extends LibroExecutableCellView {
-  @inject(LirboContextKey) protected lirboContextKey: LirboContextKey;
+  @inject(LibroContextKey) protected libroContextKey: LibroContextKey;
   override view = PropmtEditorViewComponent;
 
   declare model: LibroPromptCellModel;
@@ -410,7 +410,7 @@ export class LibroPromptCellView extends LibroExecutableCellView {
       this.editorView.editorStatus === 'ready' &&
       this.parent.model.active?.id === this.id &&
       !this.parent.model.commandMode &&
-      this.lirboContextKey.commandModeEnabled === true && // 排除弹窗等情况
+      this.libroContextKey.commandModeEnabled === true && // 排除弹窗等情况
       this.parent.model.readOnly === false
     ) {
       this.editorView?.editor.setOption('styleActiveLine', true);

diff --git a/packages/libro-raw-cell/src/raw-cell-view.tsx b/packages/libro-raw-cell/src/raw-cell-view.tsx
@@ -3,7 +3,7 @@
 import type { CodeEditorViewOptions, CodeEditorView } from '@difizen/libro-code-editor';
 import { CodeEditorManager } from '@difizen/libro-code-editor';
 import type { CellViewOptions } from '@difizen/libro-core';
-import { CellService, LibroEditorCellView, LirboContextKey } from '@difizen/libro-core';
+import { CellService, LibroEditorCellView, LibroContextKey } from '@difizen/libro-core';
 import { getOrigin, prop, useInject, watch } from '@difizen/mana-app';
 import {
   view,
@@ -43,7 +43,7 @@ const CodeEditorViewComponent = React.forwardRef<HTMLDivElement>(
 @transient()
 @view('raw-cell-view')
 export class LibroRawCellView extends LibroEditorCellView {
-  @inject(LirboContextKey) protected readonly lirboContextKey: LirboContextKey;
+  @inject(LibroContextKey) protected readonly libroContextKey: LibroContextKey;
   declare model: LibroRawCellModel;
   override view = CodeEditorViewComponent;
 
@@ -126,7 +126,7 @@ export class LibroRawCellView extends LibroEditorCellView {
       this.editorView.editorStatus === 'ready' &&
       this.parent.model.active?.id === this.id &&
       !this.parent.model.commandMode &&
-      this.lirboContextKey.commandModeEnabled === true && // 排除弹窗等情况
+      this.libroContextKey.commandModeEnabled === true && // 排除弹窗等情况
       this.parent.model.readOnly === false
     ) {
       this.editorView?.editor.setOption('styleActiveLine', true);

diff --git a/packages/libro-search/src/libro-search-provider.ts b/packages/libro-search/src/libro-search-provider.ts
@@ -4,7 +4,7 @@ import {
   EditorCellView,
   LibroView,
   VirtualizedManagerHelper,
-  LirboContextKey,
+  LibroContextKey,
 } from '@difizen/libro-core';
 import { inject, prop, transient, equals } from '@difizen/mana-app';
 import { Deferred, DisposableCollection } from '@difizen/mana-app';
@@ -40,7 +40,7 @@ export const LibroSearchProviderFactory = Symbol('LibroSearchProviderFactory');
  */
 @transient()
 export class LibroSearchProvider extends AbstractSearchProvider {
-  @inject(LirboContextKey) contextKey: LirboContextKey;
+  @inject(LibroContextKey) contextKey: LibroContextKey;
   @inject(LibroCellSearchProvider) libroCellSearchProvider: LibroCellSearchProvider;
   protected cellsChangeDeferred: Deferred<void> | undefined;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './widget-render.js';
		export * from './widget-rendermime-contribution.js';