@difizen/libro-lab 0.1.4 → 0.1.6

package/es/welcome/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/welcome/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAML,WAAW,EAEZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,cAAc,CAAC;AAEtB,eAAO,MAAM,gBAAgB,mFAqB3B,CAAC;AAEH,qBAEa,WAAY,SAAQ,QAAQ;IAC9B,IAAI,oFAAoB;IACjC,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,cAAc,CAAC;gBACE,WAAW,EAAE,WAAW;CAc1D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/welcome/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC"}

package/es/welcome/index.js

@@ -1,70 +1,2 @@
-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, _class;
-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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-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); }
-import { ServerConnection } from '@difizen/libro-jupyter';
-import { inject, singleton, useInject, view, ViewInstance, ViewManager, ViewRender } from '@difizen/mana-app';
-import { BaseView } from '@difizen/mana-app';
-import { forwardRef } from 'react';
-import { LayoutService } from "../layout/layout-service.js";
-import { EntryPointView } from "./entry-point-view.js";
-import "./index.less";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export var WelcomeComponent = /*#__PURE__*/forwardRef(function WelcomeComponent() {
-  var instance = useInject(ViewInstance);
-  var layoutService = useInject(LayoutService);
-  var serverConnection = useInject(ServerConnection);
-  return /*#__PURE__*/_jsxs("div", {
-    className: "libro-lab-welcome-page",
-    children: [/*#__PURE__*/_jsx("div", {
-      className: "libro-lab-welcome-page-title",
-      children: "\u6B22\u8FCE\u4F7F\u7528 Notebook \u5DE5\u4F5C\u53F0 \uD83C\uDF89\uD83C\uDF89"
-    }), /*#__PURE__*/_jsxs("div", {
-      className: "libro-lab-welcome-page-server-info",
-      children: [/*#__PURE__*/_jsx("div", {
-        className: "libro-lab-welcome-page-server-info-title",
-        children: "\u670D\u52A1\u8FDE\u63A5\u4FE1\u606F"
-      }), /*#__PURE__*/_jsxs("div", {
-        className: "libro-lab-welcome-page-server-info-item",
-        children: ["BaseURL: ", "".concat(serverConnection.settings.baseUrl)]
-      }), /*#__PURE__*/_jsxs("div", {
-        className: "libro-lab-welcome-page-server-info-item",
-        children: ["WsURL: ", "".concat(serverConnection.settings.wsUrl)]
-      })]
-    }), layoutService.serverSatus === 'success' && /*#__PURE__*/_jsx(ViewRender, {
-      view: instance.entryPointView
-    })]
-  });
-});
-export var WelcomeView = (_dec = singleton(), _dec2 = view('welcome-view'), _dec(_class = _dec2(_class = /*#__PURE__*/function (_BaseView) {
-  _inherits(WelcomeView, _BaseView);
-  var _super = _createSuper(WelcomeView);
-  function WelcomeView(viewManager) {
-    var _this;
-    _classCallCheck(this, WelcomeView);
-    _this = _super.call(this);
-    _this.view = WelcomeComponent;
-    _this.title.icon = '🙌 ';
-    _this.title.label = '欢迎使用';
-    _this.title.closable = false;
-    _this.viewManager = viewManager;
-    _this.viewManager.getOrCreateView(EntryPointView).then(function (entryPointView) {
-      _this.entryPointView = entryPointView;
-      return;
-    }).catch(console.error);
-    return _this;
-  }
-  WelcomeView = inject(ViewManager)(WelcomeView, undefined, 0) || WelcomeView;
-  return _createClass(WelcomeView);
-}(BaseView)) || _class) || _class);
+export * from "./welcome-view.js";
+export * from "./entry-point-view.js";

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

@@ -0,0 +1,13 @@
+/// <reference types="react" resolution-mode="require"/>
+import { ViewManager } from '@difizen/mana-app';
+import { BaseView } from '@difizen/mana-app';
+import { EntryPointView } from './entry-point-view.js';
+import './index.less';
+export declare const WelcomeComponent: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+export declare class WelcomeView extends BaseView {
+    view: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+    viewManager: ViewManager;
+    entryPointView: EntryPointView;
+    constructor(viewManager: ViewManager);
+}
+//# sourceMappingURL=welcome-view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"welcome-view.d.ts","sourceRoot":"","sources":["../../src/welcome/welcome-view.tsx"],"names":[],"mappings":";AACA,OAAO,EAML,WAAW,EAEZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,cAAc,CAAC;AAEtB,eAAO,MAAM,gBAAgB,mFAqB3B,CAAC;AAEH,qBAEa,WAAY,SAAQ,QAAQ;IAC9B,IAAI,oFAAoB;IACjC,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,cAAc,CAAC;gBACE,WAAW,EAAE,WAAW;CAc1D"}

package/es/welcome/welcome-view.js

@@ -0,0 +1,70 @@
+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, _class;
+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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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); }
+import { ServerConnection } from '@difizen/libro-jupyter';
+import { inject, singleton, useInject, view, ViewInstance, ViewManager, ViewRender } from '@difizen/mana-app';
+import { BaseView } from '@difizen/mana-app';
+import { forwardRef } from 'react';
+import { LayoutService } from "../layout/layout-service.js";
+import { EntryPointView } from "./entry-point-view.js";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var WelcomeComponent = /*#__PURE__*/forwardRef(function WelcomeComponent() {
+  var instance = useInject(ViewInstance);
+  var layoutService = useInject(LayoutService);
+  var serverConnection = useInject(ServerConnection);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "libro-lab-welcome-page",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "libro-lab-welcome-page-title",
+      children: "\u6B22\u8FCE\u4F7F\u7528 Notebook \u5DE5\u4F5C\u53F0 \uD83C\uDF89\uD83C\uDF89"
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "libro-lab-welcome-page-server-info",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "libro-lab-welcome-page-server-info-title",
+        children: "\u670D\u52A1\u8FDE\u63A5\u4FE1\u606F"
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "libro-lab-welcome-page-server-info-item",
+        children: ["BaseURL: ", "".concat(serverConnection.settings.baseUrl)]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "libro-lab-welcome-page-server-info-item",
+        children: ["WsURL: ", "".concat(serverConnection.settings.wsUrl)]
+      })]
+    }), layoutService.serverSatus === 'success' && /*#__PURE__*/_jsx(ViewRender, {
+      view: instance.entryPointView
+    })]
+  });
+});
+export var WelcomeView = (_dec = singleton(), _dec2 = view('welcome-view'), _dec(_class = _dec2(_class = /*#__PURE__*/function (_BaseView) {
+  _inherits(WelcomeView, _BaseView);
+  var _super = _createSuper(WelcomeView);
+  function WelcomeView(viewManager) {
+    var _this;
+    _classCallCheck(this, WelcomeView);
+    _this = _super.call(this);
+    _this.view = WelcomeComponent;
+    _this.title.icon = '🙌 ';
+    _this.title.label = '欢迎使用';
+    _this.title.closable = false;
+    _this.viewManager = viewManager;
+    _this.viewManager.getOrCreateView(EntryPointView).then(function (entryPointView) {
+      _this.entryPointView = entryPointView;
+      return;
+    }).catch(console.error);
+    return _this;
+  }
+  WelcomeView = inject(ViewManager)(WelcomeView, undefined, 0) || WelcomeView;
+  return _createClass(WelcomeView);
+}(BaseView)) || _class) || _class);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@difizen/libro-lab",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "",
   "keywords": [
     "libro",
@@ -33,19 +33,23 @@
     "src"
   ],
   "dependencies": {
+    "@ant-design/icons": "^5.1.0",
+    "@difizen/libro-core": "^0.1.6",
+    "@difizen/libro-jupyter": "^0.1.6",
+    "@difizen/libro-kernel": "^0.1.6",
+    "@difizen/libro-prompt-cell": "^0.1.6",
+    "@difizen/libro-terminal": "^0.1.6",
+    "@difizen/libro-toc": "^0.1.6",
+    "@difizen/libro-cofine-editor-core": "^0.1.6",
     "@difizen/mana-app": "latest",
     "@difizen/mana-react": "latest",
-    "@difizen/libro-jupyter": "^0.1.4",
-    "@difizen/libro-toc": "^0.1.4",
-    "@difizen/libro-prompt-cell": "^0.1.4",
-    "@difizen/libro-terminal": "^0.1.4",
-    "@ant-design/icons": "^5.1.0",
     "classnames": "^2.3.2",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "viewerjs": "^1.11.6"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "antd": "^5.8.6"
+    "antd": "^5.8.6",
+    "react": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.25",

package/src/editor-viewer/code-editor-open-handler.ts

@@ -0,0 +1,42 @@
+import { LibroJupyterConfiguration } from '@difizen/libro-jupyter';
+import type { URI, ViewOpenHandlerOptions } from '@difizen/mana-app';
+import { ConfigurationService, inject } from '@difizen/mana-app';
+import { Priority } from '@difizen/mana-app';
+import { NavigatableViewOpenHandler, OpenHandler, singleton } from '@difizen/mana-app';
+
+import type { CodeEditorViewer } from './code-editor-viewer.js';
+import { CodeEditorViewerFactory } from './protocol.js';
+
+@singleton({ contrib: OpenHandler })
+export class CodeEditorViewerOpenHandler extends NavigatableViewOpenHandler<CodeEditorViewer> {
+  @inject(ConfigurationService) protected configurationService: ConfigurationService;
+
+  id = CodeEditorViewerFactory;
+
+  canHandle(uri: URI, options?: ViewOpenHandlerOptions) {
+    if (
+      uri.scheme === 'file' &&
+      !['.tar', '.zip', '.7z', '.gz', 'rar'].includes(uri.path.ext)
+    ) {
+      return 100;
+    }
+    return Priority.IDLE;
+  }
+
+  override async open(uri: URI, options: ViewOpenHandlerOptions = {}) {
+    const { viewOptions, ...extra } = options;
+    const slot = await this.configurationService.get(
+      LibroJupyterConfiguration['OpenSlot'],
+    );
+
+    return super.open(uri, {
+      slot,
+      viewOptions: {
+        path: uri.path.toString(),
+        ...viewOptions,
+      },
+      reveal: true,
+      ...extra,
+    });
+  }
+}

package/src/editor-viewer/code-editor-viewer.tsx

@@ -0,0 +1,183 @@
+import { EditorProvider, MonacoEnvironment } from '@difizen/libro-cofine-editor-core';
+import type { LanguageSpec, MonacoEditorOptions } from '@difizen/libro-jupyter';
+import { LibroConfigAutoSave } from '@difizen/libro-jupyter';
+import { MonacoUri } from '@difizen/libro-jupyter';
+import { JupyterFileService, LanguageSpecRegistry } from '@difizen/libro-jupyter';
+import type { NavigatableView, Saveable } from '@difizen/mana-app';
+import { ConfigurationService } from '@difizen/mana-app';
+import { Disposable } from '@difizen/mana-app';
+import {
+  DisposableCollection,
+  Emitter,
+  getOrigin,
+  inject,
+  LabelProvider,
+  prop,
+  URI,
+  URIIconReference,
+  ViewOption,
+} from '@difizen/mana-app';
+import { BaseView, transient, useInject, view, ViewInstance } from '@difizen/mana-app';
+import React from 'react';
+import './index.less';
+
+import type { EditorOption } from './protocol.js';
+import { CodeEditorViewerFactory } from './protocol.js';
+
+const EditorComponent: React.FC = () => {
+  const viewInstance = useInject<CodeEditorViewer>(ViewInstance);
+  return <div className="libro-lab-editor-viewer" ref={viewInstance.codeRef}></div>;
+};
+
+type EditorType = ReturnType<EditorProvider['create']>;
+export const LibroLabE2URIScheme = 'libro-lab-e2';
+
+@transient()
+@view(CodeEditorViewerFactory)
+export class CodeEditorViewer extends BaseView implements NavigatableView, Saveable {
+  override view = EditorComponent;
+
+  codeRef = React.createRef<HTMLDivElement>();
+
+  protected e2Editor?: EditorType;
+
+  @prop()
+  dirty = false;
+
+  language = 'text';
+
+  value: string;
+
+  @prop() filePath?: string;
+
+  autoSaveDelay = 1000;
+
+  dirtyEmitter = new Emitter<void>();
+
+  languageSpecRegistry: LanguageSpecRegistry;
+
+  get onDirtyChanged() {
+    return this.dirtyEmitter.event;
+  }
+
+  autoSave: 'on' | 'off' = 'off';
+
+  protected readonly toDisposeOnAutoSave = new DisposableCollection();
+
+  languageSpec?: LanguageSpec;
+
+  fileService: JupyterFileService;
+
+  constructor(
+    @inject(ViewOption)
+    options: EditorOption,
+    @inject(LabelProvider) labelProvider: LabelProvider,
+    @inject(JupyterFileService) fileService: JupyterFileService,
+    @inject(LanguageSpecRegistry)
+    languageSpecRegistry: LanguageSpecRegistry,
+    @inject(ConfigurationService) configurationService: ConfigurationService,
+  ) {
+    super();
+    this.filePath = options.path;
+    this.title.caption = options.path;
+    const uri = new URI(options.path);
+    const uriRef = URIIconReference.create('file', new URI(options.path));
+    const iconClass = labelProvider.getIcon(uriRef);
+    this.fileService = fileService;
+    this.title.icon = <div className={iconClass} />;
+    this.title.label = uri.path.base;
+    this.languageSpecRegistry = languageSpecRegistry;
+    this.languageSpec = this.languageSpecRegistry.languageSpecs.find((item) =>
+      item.ext.includes(uri.path.ext),
+    );
+    configurationService
+      .get(LibroConfigAutoSave)
+      .then((value) => {
+        if (value) {
+          this.autoSave = 'on';
+          return;
+        } else {
+          this.autoSave = 'off';
+          return;
+        }
+      })
+      .catch(() => {
+        //
+      });
+  }
+
+  override async onViewMount() {
+    if (!this.filePath) {
+      return;
+    }
+    const content = await getOrigin(this.fileService).read(this.filePath);
+    if (typeof content !== 'string' || !this.languageSpec) {
+      return;
+    }
+    if (!this.codeRef || !this.codeRef.current) {
+      return;
+    }
+
+    await MonacoEnvironment.init();
+    await this.languageSpec.beforeEditorInit?.();
+    const editorPorvider =
+      MonacoEnvironment.container.get<EditorProvider>(EditorProvider);
+
+    const uri = MonacoUri.from({
+      scheme: LibroLabE2URIScheme,
+      path: `${this.filePath}${this.languageSpec.ext[0]}`,
+    });
+
+    const options: MonacoEditorOptions = {
+      /**
+       * language ia an uri:
+       */
+      theme: 'libro-light',
+      language: this.languageSpec.language,
+      uri,
+      value: content,
+    };
+
+    this.e2Editor = editorPorvider.create(this.codeRef.current, options);
+    this.toDispose.push(
+      getOrigin(this.e2Editor.codeEditor).onDidChangeModelContent(() => {
+        this.dirty = true;
+        if (this.autoSave === 'on') {
+          this.doAutoSave();
+        }
+      }),
+    );
+  }
+
+  protected doAutoSave = () => {
+    this.toDisposeOnAutoSave.dispose();
+    if (!this.e2Editor) {
+      return;
+    }
+    const handle = window.setTimeout(async () => {
+      this.save();
+    }, this.autoSaveDelay);
+    this.toDisposeOnAutoSave.push(Disposable.create(() => window.clearTimeout(handle)));
+  };
+
+  save = async () => {
+    this.value = this.e2Editor?.codeEditor.getValue() || '';
+    await this.fileService.write(this.filePath!, this.value);
+    this.dirty = false;
+  };
+
+  getResourceUri(): URI | undefined {
+    return new URI(this.filePath);
+  }
+
+  createMoveToUri(resourceUri: URI): URI | undefined {
+    this.filePath = resourceUri.path.toString();
+    return resourceUri;
+  }
+
+  override dispose(): void {
+    this.toDispose.dispose();
+    this.toDisposeOnAutoSave.dispose();
+    super.dispose();
+  }
+}

package/src/editor-viewer/index.less

@@ -0,0 +1,3 @@
+.libro-lab-editor-viewer {
+  height: 100%;
+}

package/src/editor-viewer/index.ts

@@ -0,0 +1,2 @@
+export * from './module.js';
+export * from './code-editor-viewer.js';

package/src/editor-viewer/module.ts

@@ -0,0 +1,8 @@
+import { ManaModule } from '@difizen/mana-app';
+
+import { CodeEditorViewerOpenHandler } from './code-editor-open-handler.js';
+import { CodeEditorViewer } from './code-editor-viewer.js';
+
+export const CodeEditorViewerModule = ManaModule.create(
+  'CodeEditorViewerModule',
+).register(CodeEditorViewer, CodeEditorViewerOpenHandler);

package/src/editor-viewer/protocol.ts

@@ -0,0 +1,7 @@
+export const CodeEditorViewerFactory = 'libro-lab-editor-viewer';
+
+export interface EditorOption {
+  path: string;
+  loadType?: string;
+  name?: string;
+}

package/src/image-viewer/index.less

@@ -0,0 +1,3 @@
+.libro-lab-image-viewer {
+  background: var(--mana-color-bg-container);
+}

package/src/image-viewer/index.ts

@@ -0,0 +1,2 @@
+export * from './module.js';
+export * from './viewer.js';

package/src/image-viewer/module.ts

@@ -0,0 +1,9 @@
+import { ManaModule } from '@difizen/mana-app';
+
+import { ImageViewerOpenHandler } from './open-handler.js';
+import { NavigatableImageViewerView } from './viewer.js';
+
+export const ImageViewerModule = ManaModule.create('ImageViewerModule').register(
+  NavigatableImageViewerView,
+  ImageViewerOpenHandler,
+);

package/src/image-viewer/open-handler.ts

@@ -0,0 +1,47 @@
+import { LibroJupyterConfiguration } from '@difizen/libro-jupyter';
+import type { URI, ViewOpenHandlerOptions } from '@difizen/mana-app';
+import { ConfigurationService, inject } from '@difizen/mana-app';
+import {
+  NavigatableViewOpenHandler,
+  OpenHandler,
+  singleton,
+  Priority,
+} from '@difizen/mana-app';
+
+import { imageExtToTypes } from './protocol.js';
+import { NavigatableImageViewerViewFactoryId } from './viewer.js';
+import type { NavigatableImageViewerView } from './viewer.js';
+
+@singleton({ contrib: OpenHandler })
+export class ImageViewerOpenHandler extends NavigatableViewOpenHandler<NavigatableImageViewerView> {
+  @inject(ConfigurationService) protected configurationService: ConfigurationService;
+
+  id = NavigatableImageViewerViewFactoryId;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  canHandle(uri: URI, _options?: ViewOpenHandlerOptions) {
+    if (uri.scheme === 'file') {
+      const ext = uri.path.ext;
+      if (imageExtToTypes.has(ext)) {
+        return 100;
+      }
+    }
+    return Priority.IDLE;
+  }
+
+  override async open(uri: URI, options: ViewOpenHandlerOptions = {}) {
+    const { viewOptions, ...extra } = options;
+    const slot = await this.configurationService.get(
+      LibroJupyterConfiguration['OpenSlot'],
+    );
+    return super.open(uri, {
+      slot,
+      viewOptions: {
+        path: uri.path.toString(),
+        ...viewOptions,
+      },
+      reveal: true,
+      ...extra,
+    });
+  }
+}

package/src/image-viewer/protocol.ts

@@ -0,0 +1,43 @@
+import type { ContentsFileFormat } from '@difizen/libro-kernel';
+
+interface ImageFormat {
+  name: string;
+  extensions: string[];
+  format: ContentsFileFormat;
+}
+
+export const imageFileTypes: ImageFormat[] = [
+  {
+    name: 'jpeg',
+    extensions: ['.jpg', '.jpeg'],
+    format: 'base64',
+  },
+  {
+    name: 'gif',
+    extensions: ['.gif'],
+    format: 'base64',
+  },
+  {
+    name: 'png',
+    extensions: ['.png'],
+    format: 'base64',
+  },
+  {
+    name: 'bmp',
+    extensions: ['.bmp'],
+    format: 'base64',
+  },
+  {
+    name: 'webp',
+    extensions: ['.webp'],
+    format: 'base64',
+  },
+];
+
+export const imageExtToTypes = new Map<string, ImageFormat>();
+
+imageFileTypes.forEach((imageType) => {
+  imageType.extensions.forEach((ext) => {
+    imageExtToTypes.set(ext, imageType);
+  });
+});