@difizen/libro-jupyter 0.2.0 → 0.2.1

package/es/widget/widget-view.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="react" resolution-mode="require"/>
+import type { JSONObject, JSONValue } from '@difizen/libro-common';
+import type { CellView, LibroExecutableCellView } from '@difizen/libro-core';
+import { LibroContextKey } from '@difizen/libro-core';
+import type { KernelMessage } from '@difizen/libro-kernel';
+import { BaseView } from '@difizen/mana-app';
+import type { ViewComponent, Disposable } from '@difizen/mana-app';
+import type { Dict, IWidgets, IWidgetView, IClassicComm, ICallbacks, IWidgetViewProps, WidgetState } from './protocol.js';
+import { LibroWidgetManager } from './widget-manager.js';
+export declare const LibroWidgetComponent: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLDivElement>>;
+export declare class WidgetView extends BaseView implements IWidgetView {
+    view: ViewComponent;
+    libroContextKey: LibroContextKey;
+    widgetsId: string;
+    protected _msgHook: (msg: KernelMessage.IIOPubMessage) => boolean;
+    libroWidgetManager: LibroWidgetManager;
+    state: JSONObject & WidgetState;
+    cell?: LibroExecutableCellView;
+    get outputs(): import("@difizen/libro-core").BaseOutputArea | undefined;
+    disableCommandMode: boolean;
+    toDisposeOnMsgChanged?: Disposable;
+    constructor(props: IWidgetViewProps, libroContextKey: LibroContextKey);
+    setCell(cell: CellView): void;
+    /**
+     * Register a new kernel
+     */
+    handleKernelChanged: () => void;
+    /**
+     * Reset the message id.
+     */
+    resetMsgId(): void;
+    addFromMessage(msg: KernelMessage.IIOPubMessage): void;
+    clearOutput(wait?: boolean): void;
+    onViewMount(): void;
+    /**
+     * Handle incoming comm msg.
+     */
+    handleCommMsg(msg: KernelMessage.ICommMsgMsg): Promise<void>;
+    handleCommClosed: () => void;
+    /**
+     * Handle when a widget is updated from the backend.
+     *
+     * This function is meant for internal use only. Values set here will not be propagated on a sync.
+     */
+    setState(state: Dict<any>): void;
+    /**
+     * Serialize the model.  See the deserialization function at the top of this file
+     * and the kernel-side serializer/deserializer.
+     */
+    toJSON(): string;
+    toModelKey(): string;
+    /**
+     * Send a custom msg over the comm.
+     */
+    send: (data: JSONValue, callbacks?: ICallbacks, buffers?: ArrayBuffer[] | ArrayBufferView[]) => string | undefined;
+    comm: IClassicComm;
+    widgets?: IWidgets;
+    model_id: string;
+    state_change: Promise<any>;
+    name: string;
+    module: string;
+    isCommClosed: boolean;
+    model_module: string;
+    model_name: string;
+    model_module_version: string;
+    view_module: string;
+    view_name: string | null;
+    view_module_version: string;
+    view_count: number | null;
+}
+//# sourceMappingURL=widget-view.d.ts.map

package/es/widget/widget-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-view.d.ts","sourceRoot":"","sources":["../../src/widget/widget-view.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAuB,MAAM,uBAAuB,CAAC;AACxF,OAAO,KAAK,EAAE,QAAQ,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAE7E,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAKL,QAAQ,EAGT,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAMnE,OAAO,KAAK,EACV,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,WAAW,EACZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,eAAO,MAAM,oBAAoB,0FAIhC,CAAC;AAEF,qBAEa,UAAW,SAAQ,QAAS,YAAW,WAAW;IACpD,IAAI,EAAE,aAAa,CAAwB;IACpD,eAAe,EAAE,eAAe,CAAC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,aAAa,CAAC,aAAa,KAAK,OAAO,CAAC;IAEtC,kBAAkB,EAAE,kBAAkB,CAAC;IAGnE,KAAK,EAAE,UAAU,GAAG,WAAW,CAAsB;IAErD,IAAI,CAAC,EAAE,uBAAuB,CAAC;IAE/B,IAAI,OAAO,6DAKV;IAED,kBAAkB,UAAQ;IAE1B,qBAAqB,CAAC,EAAE,UAAU,CAAC;gBAGb,KAAK,EAAE,gBAAgB,EAClB,eAAe,EAAE,eAAe;IAqC3D,OAAO,CAAC,IAAI,EAAE,QAAQ;IAiBtB;;OAEG;IACH,mBAAmB,QAAO,IAAI,CAE5B;IAEF;;OAEG;IACH,UAAU,IAAI,IAAI;IAelB,cAAc,CAAC,GAAG,EAAE,aAAa,CAAC,aAAa;IAoB/C,WAAW,CAAC,IAAI,UAAQ,GAAG,IAAI;IAItB,WAAW;IAiBpB;;OAEG;IACH,aAAa,CAAC,GAAG,EAAE,aAAa,CAAC,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAW5D,gBAAgB,aAEd;IACF;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI;IAUhC;;;OAGG;IACH,MAAM,IAAI,MAAM;IAIhB,UAAU,IAAI,MAAM;IAIpB;;OAEG;IACH,IAAI,SACI,SAAS,cACH,UAAU,YACZ,WAAW,EAAE,GAAG,eAAe,EAAE,wBAM3C;IAEF,IAAI,EAAE,YAAY,CAAC;IACX,OAAO,CAAC,EAAE,QAAQ,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,UAAS;IAErB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B"}

package/es/widget/widget-view.js

@@ -0,0 +1,273 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _dec, _dec2, _dec3, _dec4, _dec5, _class, _class2, _descriptor, _descriptor2, _descriptor3;
+function _initializerDefineProperty(target, property, descriptor, context) { if (!descriptor) return; Object.defineProperty(target, property, { enumerable: descriptor.enumerable, configurable: descriptor.configurable, writable: descriptor.writable, value: descriptor.initializer ? descriptor.initializer.call(context) : void 0 }); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) { var desc = {}; Object.keys(descriptor).forEach(function (key) { desc[key] = descriptor[key]; }); desc.enumerable = !!desc.enumerable; desc.configurable = !!desc.configurable; if ('value' in desc || desc.initializer) { desc.writable = true; } desc = decorators.slice().reverse().reduce(function (desc, decorator) { return decorator(target, property, desc) || desc; }, desc); if (context && desc.initializer !== void 0) { desc.value = desc.initializer ? desc.initializer.call(context) : void 0; desc.initializer = undefined; } if (desc.initializer === void 0) { Object.defineProperty(target, property, desc); desc = null; } return desc; }
+function _initializerWarningHelper(descriptor, context) { throw new Error('Decorating class property failed. Please ensure that ' + 'transform-class-properties is enabled and runs after the decorators transform.'); }
+import { ExecutableCellView } from '@difizen/libro-core';
+import { LibroContextKey } from '@difizen/libro-core';
+import { inject, transient, ViewOption, view, BaseView, prop, watch } from '@difizen/mana-app';
+import { forwardRef } from 'react';
+import { LibroJupyterModel } from "../libro-jupyter-model.js";
+import { defaultWidgetState } from "./protocol.js";
+import { LibroWidgetManager } from "./widget-manager.js";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var LibroWidgetComponent = /*#__PURE__*/forwardRef(function LibroWidgetComponent() {
+  return /*#__PURE__*/_jsx(_Fragment, {});
+});
+export var WidgetView = (_dec = transient(), _dec2 = view('libro-widget-view'), _dec3 = inject(LibroWidgetManager), _dec4 = prop(), _dec5 = prop(), _dec(_class = _dec2(_class = (_class2 = /*#__PURE__*/function (_BaseView) {
+  _inherits(WidgetView, _BaseView);
+  var _super = _createSuper(WidgetView);
+  function WidgetView(props, libroContextKey) {
+    var _this;
+    _classCallCheck(this, WidgetView);
+    _this = _super.call(this);
+    _this.view = LibroWidgetComponent;
+    _this.libroContextKey = void 0;
+    _this.widgetsId = void 0;
+    _this._msgHook = void 0;
+    _initializerDefineProperty(_this, "libroWidgetManager", _descriptor, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "state", _descriptor2, _assertThisInitialized(_this));
+    _this.cell = void 0;
+    _this.disableCommandMode = true;
+    _this.toDisposeOnMsgChanged = void 0;
+    /**
+     * Register a new kernel
+     */
+    _this.handleKernelChanged = function () {
+      _this.setState({
+        msg_id: undefined
+      });
+    };
+    _this.handleCommClosed = function () {
+      _this.isCommClosed = true;
+    };
+    /**
+     * Send a custom msg over the comm.
+     */
+    _this.send = function (data, callbacks, buffers) {
+      if (_this.comm !== undefined) {
+        return _this.comm.send(data, callbacks, {}, buffers);
+      }
+      return undefined;
+    };
+    _this.comm = void 0;
+    _initializerDefineProperty(_this, "widgets", _descriptor3, _assertThisInitialized(_this));
+    _this.model_id = void 0;
+    _this.state_change = void 0;
+    _this.name = void 0;
+    _this.module = void 0;
+    _this.isCommClosed = false;
+    _this.model_module = void 0;
+    _this.model_name = void 0;
+    _this.model_module_version = void 0;
+    _this.view_module = void 0;
+    _this.view_name = void 0;
+    _this.view_module_version = void 0;
+    _this.view_count = void 0;
+    _this.widgetsId = props.widgetsId;
+    var attributes = props.attributes;
+    _this.model_module = attributes._model_module;
+    _this.model_name = attributes._model_name;
+    _this.model_module_version = attributes._model_module_version;
+    _this.view_module = attributes._view_module;
+    _this.view_name = attributes._view_name;
+    _this.view_module_version = attributes._view_module_version;
+    _this.view_count = attributes._view_count;
+    _this._msgHook = function (msg) {
+      _this.addFromMessage(msg);
+      return false;
+    };
+
+    // Attributes should be initialized here, since user initialization may depend on it
+    var comm = props.options.comm;
+    if (comm) {
+      // Remember comm associated with the model.
+      _this.comm = comm;
+
+      // Hook comm messages up to model.
+      comm.onClose(_this.handleCommClosed.bind(_assertThisInitialized(_this)));
+      comm.onMsg(_this.handleCommMsg.bind(_assertThisInitialized(_this)));
+    } else {
+      _this.isCommClosed = false;
+    }
+    _this.model_id = props.options.model_id;
+    _this.state_change = Promise.resolve();
+    _this.setState(attributes);
+    _this.libroContextKey = libroContextKey;
+    return _this;
+  }
+  WidgetView = inject(LibroContextKey)(WidgetView, undefined, 1) || WidgetView;
+  WidgetView = inject(ViewOption)(WidgetView, undefined, 0) || WidgetView;
+  _createClass(WidgetView, [{
+    key: "outputs",
+    get: function get() {
+      if (this.cell) {
+        return this.cell.outputArea;
+      }
+      return undefined;
+    }
+  }, {
+    key: "setCell",
+    value: function setCell(cell) {
+      var _this2 = this;
+      if (ExecutableCellView.is(cell)) {
+        this.cell = cell;
+        if (this.cell) {
+          this.cell.parentReady.then(function () {
+            var _this2$cell;
+            var notebookModel = (_this2$cell = _this2.cell) === null || _this2$cell === void 0 ? void 0 : _this2$cell.parent.model;
+            if (notebookModel instanceof LibroJupyterModel) {
+              watch(notebookModel, 'kernelConnection', _this2.handleKernelChanged);
+            }
+            return;
+          }).catch(console.error);
+        }
+      }
+    }
+  }, {
+    key: "resetMsgId",
+    value:
+    /**
+     * Reset the message id.
+     */
+    function resetMsgId() {
+      var _this$toDisposeOnMsgC, _this$cell;
+      (_this$toDisposeOnMsgC = this.toDisposeOnMsgChanged) === null || _this$toDisposeOnMsgC === void 0 || _this$toDisposeOnMsgC.dispose();
+      var notebookModel = (_this$cell = this.cell) === null || _this$cell === void 0 || (_this$cell = _this$cell.parent) === null || _this$cell === void 0 ? void 0 : _this$cell.model;
+      if (notebookModel instanceof LibroJupyterModel) {
+        var kernel = notebookModel.kernelConnection;
+        if (kernel && this.state['msg_id']) {
+          this.toDisposeOnMsgChanged = kernel.registerMessageHook(this.state['msg_id'], this._msgHook);
+        }
+      }
+    }
+  }, {
+    key: "addFromMessage",
+    value: function addFromMessage(msg) {
+      var msgType = msg.header.msg_type;
+      switch (msgType) {
+        case 'execute_result':
+        case 'display_data':
+        case 'stream':
+        case 'error':
+          {
+            var _this$outputs;
+            var model = msg.content;
+            model.output_type = msgType;
+            (_this$outputs = this.outputs) === null || _this$outputs === void 0 || _this$outputs.add(model);
+            break;
+          }
+        case 'clear_output':
+          this.clearOutput(msg.content.wait);
+          break;
+        default:
+          break;
+      }
+    }
+  }, {
+    key: "clearOutput",
+    value: function clearOutput() {
+      var _this$outputs2;
+      var wait = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      (_this$outputs2 = this.outputs) === null || _this$outputs2 === void 0 || _this$outputs2.clear(wait);
+    }
+  }, {
+    key: "onViewMount",
+    value: function onViewMount() {
+      var _this3 = this;
+      this.widgets = this.libroWidgetManager.getWidgets(this.widgetsId);
+      if (this.container && this.container.current && this.disableCommandMode) {
+        this.container.current.addEventListener('focusin', function () {
+          _this3.libroContextKey.disableCommandMode();
+        });
+        this.container.current.addEventListener('blur', function (e) {
+          var _this3$container;
+          if ((_this3$container = _this3.container) !== null && _this3$container !== void 0 && (_this3$container = _this3$container.current) !== null && _this3$container !== void 0 && _this3$container.contains(e.relatedTarget)) {
+            _this3.libroContextKey.disableCommandMode();
+          } else {
+            _this3.libroContextKey.enableCommandMode();
+          }
+        });
+      }
+    }
+
+    /**
+     * Handle incoming comm msg.
+     */
+  }, {
+    key: "handleCommMsg",
+    value: function handleCommMsg(msg) {
+      var data = msg.content.data;
+      var method = data.method;
+      switch (method) {
+        case 'update':
+        case 'echo_update':
+          this.setState(data.state);
+      }
+      return Promise.resolve();
+    }
+  }, {
+    key: "setState",
+    value:
+    /**
+     * Handle when a widget is updated from the backend.
+     *
+     * This function is meant for internal use only. Values set here will not be propagated on a sync.
+     */
+    function setState(state) {
+      for (var key in state) {
+        var oldMsgId = this.state['msg_id'];
+        this.state[key] = state[key];
+        if (key === 'msg_id' && oldMsgId !== state['msg_id']) {
+          this.resetMsgId();
+        }
+      }
+    }
+
+    /**
+     * Serialize the model.  See the deserialization function at the top of this file
+     * and the kernel-side serializer/deserializer.
+     */
+  }, {
+    key: "toJSON",
+    value: function toJSON() {
+      return this.toModelKey();
+    }
+  }, {
+    key: "toModelKey",
+    value: function toModelKey() {
+      return "IPY_MODEL_".concat(this.model_id);
+    }
+  }]);
+  return WidgetView;
+}(BaseView), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, "libroWidgetManager", [_dec3], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+}), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, "state", [_dec4], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function initializer() {
+    return defaultWidgetState;
+  }
+}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, "widgets", [_dec5], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+})), _class2)) || _class) || _class);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@difizen/libro-jupyter",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "",
   "keywords": [
     "libro"
@@ -31,22 +31,22 @@
     "src"
   ],
   "dependencies": {
-    "@difizen/libro-cofine-editor": "^0.2.0",
-    "@difizen/libro-code-editor": "^0.2.0",
-    "@difizen/libro-code-cell": "^0.2.0",
-    "@difizen/libro-codemirror": "^0.2.0",
-    "@difizen/libro-rendermime": "^0.2.0",
-    "@difizen/libro-common": "^0.2.0",
-    "@difizen/libro-core": "^0.2.0",
-    "@difizen/libro-kernel": "^0.2.0",
-    "@difizen/libro-l10n": "^0.2.0",
-    "@difizen/libro-output": "^0.2.0",
-    "@difizen/libro-search": "^0.2.0",
-    "@difizen/libro-search-code-cell": "^0.2.0",
-    "@difizen/libro-lsp": "^0.2.0",
-    "@difizen/libro-markdown-cell": "^0.2.0",
-    "@difizen/libro-raw-cell": "^0.2.0",
-    "@difizen/libro-language-client": "^0.2.0",
+    "@difizen/libro-cofine-editor": "^0.2.1",
+    "@difizen/libro-code-editor": "^0.2.1",
+    "@difizen/libro-code-cell": "^0.2.1",
+    "@difizen/libro-codemirror": "^0.2.1",
+    "@difizen/libro-rendermime": "^0.2.1",
+    "@difizen/libro-common": "^0.2.1",
+    "@difizen/libro-core": "^0.2.1",
+    "@difizen/libro-kernel": "^0.2.1",
+    "@difizen/libro-l10n": "^0.2.1",
+    "@difizen/libro-output": "^0.2.1",
+    "@difizen/libro-search": "^0.2.1",
+    "@difizen/libro-search-code-cell": "^0.2.1",
+    "@difizen/libro-lsp": "^0.2.1",
+    "@difizen/libro-markdown-cell": "^0.2.1",
+    "@difizen/libro-raw-cell": "^0.2.1",
+    "@difizen/libro-language-client": "^0.2.1",
     "@difizen/mana-app": "latest",
     "@difizen/mana-l10n": "latest",
     "@ant-design/colors": "^7.0.0",
@@ -57,7 +57,7 @@
   },
   "peerDependencies": {
     "antd": "^5.8.6",
-    "react": "^18.2.0"
+    "react": ">=16"
   },
   "devDependencies": {
     "@types/react": "^18.2.25"

package/src/add-between-cell/add-between-cell.tsx

@@ -203,7 +203,7 @@ export const LibroWrappedBetweenCellContent: BetweenCellProvider = (props: {
   const { index, addCell } = props;
   const instance = useInject<LibroView>(ViewInstance);
   return (
-    <DisplayWrapComponent mode={instance.model.readOnly}>
+    <DisplayWrapComponent mode={instance.model.cellsEditable}>
       <LibroCommonBetweenCellContent index={index} addCell={addCell} />
     </DisplayWrapComponent>
   );

package/src/cell/jupyter-code-cell-view.tsx

@@ -7,8 +7,8 @@ import type {
   TooltipProviderOption,
 } from '@difizen/libro-code-editor';
 import { KernelError } from '@difizen/libro-kernel';
-import { LibroCellURIScheme } from '@difizen/libro-language-client';
-import { transient, URI } from '@difizen/mana-app';
+import { getCellURI } from '@difizen/libro-language-client';
+import { transient } from '@difizen/mana-app';
 import { view, ViewInstance } from '@difizen/mana-app';
 import { getOrigin, useInject } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n';
@@ -39,7 +39,16 @@ const JupyterCodeCellComponent = forwardRef<HTMLDivElement>(
 @transient()
 @view('jupyter-code-cell-view')
 export class JupyterCodeCellView extends LibroCodeCellView {
-  declare parent: LibroJupyterView;
+  protected declare _parent: LibroJupyterView;
+
+  override get parent() {
+    return this._parent;
+  }
+  override set parent(value: LibroJupyterView) {
+    this._parent = value;
+    this.parentDefer.resolve(this.parent);
+  }
+
   override view = JupyterCodeCellComponent;
   declare model: JupyterCodeCellModel;
 
@@ -55,9 +64,8 @@ export class JupyterCodeCellView extends LibroCodeCellView {
 
   protected override getEditorOption(): CodeEditorViewOptions {
     const options = super.getEditorOption();
-    let uri = new URI(this.parent.model.filePath);
-    uri = URI.withScheme(uri, LibroCellURIScheme);
-    uri = URI.withQuery(uri, `cellid=${this.model.id}`);
+    const uri = getCellURI(this.parent.model, this.model);
+
     return {
       ...options,
       uuid: uri.toString(),

package/src/command/command-contribution.ts

@@ -1,3 +1,4 @@
+import type { LibroModel } from '@difizen/libro-core';
 import {
   KernelCommands,
   LibroCommandRegister,
@@ -40,8 +41,7 @@ export class LibroJupyterCommandContribution implements CommandContribution {
             return false;
           }
           return (
-            !libro?.model.quickEditMode &&
-            !libro?.model.readOnly &&
+            (libro?.model as LibroModel).executable &&
             path === LibroToolbarArea.HeaderLeft
           );
         },
@@ -72,8 +72,7 @@ export class LibroJupyterCommandContribution implements CommandContribution {
           }
           if (
             path !== LibroToolbarArea.HeaderCenter ||
-            libro.model.quickEditMode ||
-            libro.model.readOnly
+            !(libro?.model as LibroModel).executable
           ) {
             return false;
           }
@@ -108,8 +107,7 @@ export class LibroJupyterCommandContribution implements CommandContribution {
             return false;
           }
           return (
-            !libro?.model.quickEditMode &&
-            !libro?.model.readOnly &&
+            (libro?.model as LibroModel).executable &&
             path === LibroToolbarArea.CellRight
           );
         },
@@ -142,13 +140,16 @@ export class LibroJupyterCommandContribution implements CommandContribution {
             return false;
           }
           return (
-            !libro?.model.quickEditMode &&
-            path === LibroToolbarArea.HeaderCenter &&
-            !libro.model.readOnly
+            (libro?.model as LibroJupyterModel).executable &&
+            path === LibroToolbarArea.HeaderCenter
           );
         },
         isEnabled: (cell, libro) => {
-          if (!libro || !(libro instanceof LibroView) || libro.model.readOnly) {
+          if (
+            !libro ||
+            !(libro instanceof LibroView) ||
+            !(libro?.model as LibroJupyterModel).executable
+          ) {
             return false;
           }
           return (

package/src/components/icons.tsx

@@ -100,7 +100,7 @@ export const Location: React.FC = () => (
       <g
         id="2.0-kernel-启动前"
         transform="translate(-738.000000, -80.000000)"
-        fill="#7B7B7B"
+        fill="currentColor"
         // fillRule="nonzero"
       >
         <g id="编组-24" transform="translate(637.000000, 80.000000)">

package/src/contents/content-contribution.ts

@@ -22,7 +22,7 @@ export class LibroJupyterContentContribution implements ContentContribution {
       jupyterModel.filePath = currentFileContents.path;
       jupyterModel.lastModified = jupyterModel.currentFileContents.last_modified;
 
-      if (!jupyterModel.quickEditMode && !jupyterModel.readOnly) {
+      if (jupyterModel.executable) {
         jupyterModel.startKernelConnection();
       }
 

package/src/contents/save-content-contribution.ts

@@ -0,0 +1,67 @@
+import type { NotebookOption } from '@difizen/libro-core';
+import { ContentSaveContribution } from '@difizen/libro-core';
+import type { IContentsModel } from '@difizen/libro-kernel';
+import { ModalService, inject, singleton } from '@difizen/mana-app';
+
+import type { LibroJupyterModel } from '../libro-jupyter-model.js';
+import { SaveFileErrorModal } from '../toolbar/save-file-error.js';
+
+@singleton({ contrib: ContentSaveContribution })
+export class LibroJupyterContentSaveContribution implements ContentSaveContribution {
+  @inject(ModalService) protected readonly modalService: ModalService;
+
+  canHandle = () => {
+    return 2;
+  };
+  saveContent = async (options: NotebookOption, model: LibroJupyterModel) => {
+    const notebookContent = model.toJSON();
+    if (!model.currentFileContents) {
+      throw new Error('currentFileContents is undefined');
+    }
+
+    let res = {} as IContentsModel | undefined;
+
+    try {
+      res = await model.fileService.write(notebookContent, model.currentFileContents);
+      if (!res) {
+        return;
+      }
+      // 文件保存失败
+      if (res.last_modified === model.lastModified || res.size === 0) {
+        const errorMsg = `File Save Error: ${res?.message} `;
+        model.fileService.fileSaveErrorEmitter.fire({
+          cause: res.message,
+          msg: errorMsg,
+          name: res.name,
+          path: res.path,
+          created: res.created,
+          last_modified: res.last_modified,
+          size: res.size,
+          type: res.type,
+        });
+        this.modalService.openModal(SaveFileErrorModal);
+
+        throw new Error(errorMsg);
+      }
+    } catch (e: any) {
+      if (!res) {
+        return;
+      }
+      model.fileService.fileSaveErrorEmitter.fire({
+        cause: e.errorCause,
+        msg: e.message,
+        name: res.name || model.currentFileContents.name,
+        path: res.path || model.currentFileContents.path,
+        created: res.created || model.currentFileContents.created,
+        last_modified: res.last_modified || model.currentFileContents.last_modified,
+        size: res.size || model.currentFileContents.size,
+        type: res.type || model.currentFileContents.type,
+      });
+      this.modalService.openModal(SaveFileErrorModal);
+
+      throw new Error('File Save Error');
+    }
+
+    await model.createCheckpoint();
+  };
+}

package/src/file/file-create-modal.tsx

@@ -1,4 +1,5 @@
 import type { ModalItemProps, ModalItem } from '@difizen/mana-app';
+import { CommandRegistry } from '@difizen/mana-app';
 import { URI, useInject, ViewManager } from '@difizen/mana-app';
 import { Col, Form, message, Row, Input, Modal } from 'antd';
 import type { InputRef } from 'antd';
@@ -27,6 +28,7 @@ export const FileCreateModalComponent: React.FC<ModalItemProps<ModalItemType>> =
   data,
 }: ModalItemProps<ModalItemType>) => {
   const fileService = useInject(JupyterFileService);
+  const commands = useInject(CommandRegistry);
   const viewManager = useInject(ViewManager);
   const [fileType, setFileType] = useState<FileType>(data?.fileType);
   const [fileView, setFileView] = useState<FileView>();
@@ -37,13 +39,20 @@ export const FileCreateModalComponent: React.FC<ModalItemProps<ModalItemType>> =
     await form.validateFields();
     close();
     try {
-      await fileService.newFile(
+      const stat = await fileService.newFile(
         values.fileName + (fileType || ''),
         new URI(data?.path),
       );
       if (fileView) {
         fileView.model.refresh();
       }
+      if (stat.isFile) {
+        commands.executeCommand('fileTree.command.openfile', {
+          fileStat: stat,
+          uri: stat.resource,
+        });
+      }
+      // message.success('新建文件成功');
     } catch {
       message.error('新建文件失败');
     }

package/src/file/file-service.ts

@@ -205,7 +205,7 @@ export class JupyterFileService extends FileService {
       ext,
     });
     await this.rename(new URI(res.path.toString()), fileName);
-    return this.resolve(target);
+    return this.resolve(targetFileUri);
   }
 
   async newFileDir(dirName: string, target: URI): Promise<FileStatWithMetadata> {

package/src/file/index.ts

@@ -7,3 +7,4 @@ export * from './file-protocol.js';
 export * from './file-icon.js';
 export * from './file-create-modal.js';
 export * from './file-createdir-modal.js';
+export * from './file-command.js';

package/src/index.ts

@@ -32,3 +32,4 @@ export * from './toolbar/index.js';
 export * from './file/index.js';
 export * from './libro-jupyter-view.js';
 export * from './config/index.js';
+export * from './widget/index.js';