@difizen/libro-jupyter 0.3.29 → 0.3.30

package/es/module-noeditor.js

@@ -23,7 +23,7 @@ import { KernelStatusAndSelectorProvider } from "./libro-jupyter-protocol.js";
 import { JupyterServerLaunchManager } from "./libro-jupyter-server-launch-manager.js";
 import { LibroJupyterView } from "./libro-jupyter-view.js";
 import { LibroJupyterOutputArea } from "./output/index.js";
-import { PlotlyModule } from "./rendermime/index.js";
+import { CustomRenderMimeModule } from "./rendermime/index.js";
 import { LibroJupyterColorContribution } from "./theme/index.js";
 import { KernelStatusSelector, LibroJupyterToolbarContribution, SaveFileErrorContribution } from "./toolbar/index.js";
 import { WidgetModule } from "./widget/index.js";
@@ -51,4 +51,4 @@ export var LibroJupyterNoEditorModule = ManaModule.create().register(LibroJupyte
   useClass: JupyterCodeCellView
 }).dependOn(LibroModule, CodeCellModule, MarkdownCellModule, RawCellModule, StreamOutputModule, ErrorOutputModule, DisplayDataOutputModule, LibroToolbarModule, LibroKernelManageModule, LibroSearchModule, SearchCodeCellModule, LibroAddCellModule,
 // custom module
-LibroBetweenCellModule, KeybindInstructionsModule, PlotlyModule, LibroJupyterFileModule, WidgetModule);
+LibroBetweenCellModule, KeybindInstructionsModule, CustomRenderMimeModule, LibroJupyterFileModule, WidgetModule);

package/es/module.js

@@ -27,7 +27,7 @@ import { JupyterServerLaunchManager } from "./libro-jupyter-server-launch-manage
 import { LibroJupyterView } from "./libro-jupyter-view.js";
 import { JupyterWorkspaceService } from "./libro-jupyter-workspace.js";
 import { LibroJupyterOutputArea } from "./output/index.js";
-import { PlotlyModule } from "./rendermime/index.js";
+import { CustomRenderMimeModule } from "./rendermime/index.js";
 import { LibroJupyterColorContribution } from "./theme/index.js";
 import { KernelStatusSelector, LibroJupyterToolbarContribution, SaveFileErrorContribution } from "./toolbar/index.js";
 import { WidgetModule } from "./widget/index.js";
@@ -55,5 +55,5 @@ export var LibroJupyterNoEditorModule = ManaModule.create().register(LibroJupyte
   useClass: JupyterCodeCellView
 }).dependOn(LibroModule, CodeCellModule, MarkdownCellModule, RawCellModule, StreamOutputModule, ErrorOutputModule, DisplayDataOutputModule, LibroToolbarModule, LibroKernelManageModule, LibroSearchModule, SearchCodeCellModule, LibroAddCellModule,
 // custom module
-LibroBetweenCellModule, KeybindInstructionsModule, PlotlyModule, LibroJupyterFileModule, WidgetModule);
+LibroBetweenCellModule, KeybindInstructionsModule, CustomRenderMimeModule, LibroJupyterFileModule, WidgetModule);
 export var LibroJupyterModule = ManaModule.create().register(JupyterWorkspaceService).dependOn(LibroE2EditorModule, CodeMirrorEditorModule, LibroJupyterNoEditorModule, LibroLanguageClientModule);

package/es/rendermime/image-url/image-url-render.d.ts

@@ -0,0 +1,11 @@
+import type { BaseOutputView } from '@difizen/libro-core';
+import type { FC } from 'react';
+export declare const imageUrlMimeTypes: string[];
+/**
+ * 图片 URL 渲染组件
+ * 专门处理图片 URL 数据的渲染
+ */
+export declare const ImageUrlRender: FC<{
+    model: BaseOutputView;
+}>;
+//# sourceMappingURL=image-url-render.d.ts.map

package/es/rendermime/image-url/image-url-render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-url-render.d.ts","sourceRoot":"","sources":["../../../src/rendermime/image-url/image-url-render.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAK1D,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,eAAO,MAAM,iBAAiB,UAAgC,CAAC;AAE/D;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC;IAAE,KAAK,EAAE,cAAc,CAAA;CAAE,CAyCxD,CAAC"}

package/es/rendermime/image-url/image-url-render.js

@@ -0,0 +1,115 @@
+import { RenderMimeRegistry } from '@difizen/libro-rendermime';
+import { useInject } from '@difizen/mana-app';
+import { useEffect, useRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var imageUrlMimeTypes = ['image/vnd.libro.image-url'];
+
+/**
+ * 图片 URL 渲染组件
+ * 专门处理图片 URL 数据的渲染
+ */
+export var ImageUrlRender = function ImageUrlRender(props) {
+  var model = props.model;
+  var renderImageRef = useRef(null);
+  var defaultRenderMime = useInject(RenderMimeRegistry);
+
+  // 获取首选的图片 MIME 类型
+  var mimeType = defaultRenderMime.preferredMimeType(model);
+  useEffect(function () {
+    if (mimeType && renderImageRef.current) {
+      var imageData = model.data[mimeType];
+      if (typeof imageData === 'string') {
+        var _model$metadata$mimeT, _model$metadata$mimeT2;
+        renderImageUrl({
+          host: renderImageRef.current,
+          source: imageData,
+          width: model.metadata['width'] || ((_model$metadata$mimeT = model.metadata[mimeType]) === null || _model$metadata$mimeT === void 0 ? void 0 : _model$metadata$mimeT['width']),
+          height: model.metadata['height'] || ((_model$metadata$mimeT2 = model.metadata[mimeType]) === null || _model$metadata$mimeT2 === void 0 ? void 0 : _model$metadata$mimeT2['height']),
+          needsBackground: model.metadata['needs_background'],
+          unconfined: model.metadata && model.metadata['unconfined'],
+          mimeType: mimeType
+        });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    className: "libro-image-url-render-container",
+    children: /*#__PURE__*/_jsx("div", {
+      className: "libro-image-url-render",
+      ref: renderImageRef
+    })
+  });
+};
+
+/**
+ * 渲染图片 URL 的选项接口
+ */
+
+/**
+ * 渲染图片 URL 到指定的宿主节点
+ * 支持 HTTP/HTTPS URL 和相对路径
+ */
+function renderImageUrl(options) {
+  var host = options.host,
+    source = options.source,
+    width = options.width,
+    height = options.height,
+    needsBackground = options.needsBackground,
+    unconfined = options.unconfined;
+
+  // 清空宿主节点内容
+  host.textContent = '';
+
+  // 创建图片元素
+  var img = document.createElement('img');
+
+  // 设置图片源
+  // 如果是 URL（以 http 开头），直接使用
+  // 否则按照原有逻辑处理（兼容 base64 数据）
+  if (source.startsWith('http://') || source.startsWith('https://') || !source.startsWith('data:') && source.includes('/')) {
+    img.src = source;
+  } else {
+    // 兜底处理，按照原有的 base64 逻辑
+    img.src = source.startsWith('data:') ? source : "data:".concat(options.mimeType, ";base64,").concat(source);
+  }
+
+  // 设置图片尺寸
+  if (typeof height === 'number') {
+    img.height = height;
+  }
+  if (typeof width === 'number') {
+    img.width = width;
+  }
+
+  // 设置背景样式
+  if (needsBackground === 'light') {
+    img.classList.add('jp-needs-light-background');
+  } else if (needsBackground === 'dark') {
+    img.classList.add('jp-needs-dark-background');
+  }
+
+  // 设置无约束样式
+  if (unconfined === true) {
+    img.classList.add('jp-mod-unconfined');
+  }
+
+  // 添加错误处理
+  img.onerror = function () {
+    // 可以在这里添加占位符或错误提示
+    var errorDiv = document.createElement('div');
+    errorDiv.className = 'libro-image-url-error';
+    errorDiv.textContent = "\u65E0\u6CD5\u52A0\u8F7D\u56FE\u7247: ".concat(source);
+    errorDiv.style.cssText = "\n      padding: 10px;\n      border: 1px dashed #ccc;\n      color: #666;\n      text-align: center;\n      background-color: #f9f9f9;\n    ";
+    host.replaceChild(errorDiv, img);
+  };
+
+  // 添加加载成功处理
+  img.onload = function () {
+    // 图片加载成功
+  };
+
+  // 将图片添加到宿主节点
+  host.appendChild(img);
+  return Promise.resolve(undefined);
+}

package/es/rendermime/image-url/image-url-rendermime-contribution.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" resolution-mode="require"/>
+import type { BaseOutputView } from '@difizen/libro-core';
+import { RenderMimeContribution } from '@difizen/libro-rendermime';
+import './index.less';
+/**
+ * 自定义图片 URL MIME 渲染器贡献类
+ * 优先级高于默认图片渲染器，专门处理图片 URL 数据
+ */
+export declare class LibroImageUrlMimeTypeContribution implements RenderMimeContribution {
+    private imageUrlMimeTypes;
+    /**
+     * 判断是否能处理该模型数据
+     * 返回值越高，优先级越高
+     * 只有当数据是图片 URL 时才返回高优先级
+     */
+    canHandle: (model: BaseOutputView) => number;
+    /**
+     * 检查字符串是否为图片 URL
+     */
+    private isImageUrl;
+    renderType: string;
+    safe: boolean;
+    mimeTypes: string[];
+    render: import("react").FC<{
+        model: BaseOutputView;
+    }>;
+}
+//# sourceMappingURL=image-url-rendermime-contribution.d.ts.map

package/es/rendermime/image-url/image-url-rendermime-contribution.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-url-rendermime-contribution.d.ts","sourceRoot":"","sources":["../../../src/rendermime/image-url/image-url-rendermime-contribution.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAInE,OAAO,cAAc,CAAC;AAEtB;;;GAGG;AACH,qBACa,iCAAkC,YAAW,sBAAsB;IAC9E,OAAO,CAAC,iBAAiB,CAAqB;IAE9C;;;;OAIG;IACH,SAAS,UAAW,cAAc,KAAG,MAAM,CAazC;IAEF;;OAEG;IACH,OAAO,CAAC,UAAU;IASlB,UAAU,SAAoB;IAC9B,IAAI,UAAQ;IACZ,SAAS,WAA0B;IACnC,MAAM;;OAAkB;CACzB"}

package/es/rendermime/image-url/image-url-rendermime-contribution.js

@@ -0,0 +1,74 @@
+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, _class;
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+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); }
+import { RenderMimeContribution } from '@difizen/libro-rendermime';
+import { singleton } from '@difizen/mana-app';
+import { ImageUrlRender, imageUrlMimeTypes } from "./image-url-render.js";
+import "./index.less";
+
+/**
+ * 自定义图片 URL MIME 渲染器贡献类
+ * 优先级高于默认图片渲染器，专门处理图片 URL 数据
+ */
+export var LibroImageUrlMimeTypeContribution = (_dec = singleton({
+  contrib: RenderMimeContribution
+}), _dec(_class = /*#__PURE__*/function () {
+  function LibroImageUrlMimeTypeContribution() {
+    var _this = this;
+    _classCallCheck(this, LibroImageUrlMimeTypeContribution);
+    this.imageUrlMimeTypes = imageUrlMimeTypes;
+    /**
+     * 判断是否能处理该模型数据
+     * 返回值越高，优先级越高
+     * 只有当数据是图片 URL 时才返回高优先级
+     */
+    this.canHandle = function (model) {
+      // 检查是否包含图片 MIME 类型
+      var _iterator = _createForOfIteratorHelper(_this.imageUrlMimeTypes),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var mimeType = _step.value;
+          if (mimeType in model.data) {
+            var data = model.data[mimeType];
+            // 检查数据是否为字符串且看起来像 URL
+            if (typeof data === 'string' && _this.isImageUrl(data)) {
+              return 200; // 高优先级，超过默认图片渲染器的 90
+            }
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      return 0; // 不处理非 URL 图片数据
+    };
+    this.renderType = 'imageUrlRender';
+    this.safe = true;
+    this.mimeTypes = this.imageUrlMimeTypes;
+    this.render = ImageUrlRender;
+  }
+  _createClass(LibroImageUrlMimeTypeContribution, [{
+    key: "isImageUrl",
+    value:
+    /**
+     * 检查字符串是否为图片 URL
+     */
+    function isImageUrl(data) {
+      // 检查是否以 http:// 或 https:// 开头
+      if (data.startsWith('http://') || data.startsWith('https://')) {
+        return true;
+      }
+      return false;
+    }
+  }]);
+  return LibroImageUrlMimeTypeContribution;
+}()) || _class);

package/es/rendermime/image-url/index.less

@@ -0,0 +1,4 @@
+.libro-image-url-render-container {
+  border-radius: 4px;
+  padding: 10px 24px;
+}

package/es/rendermime/index.d.ts

@@ -1,5 +1,7 @@
 export * from './module.js';
-export * from './plotly-renderers.js';
-export * from './plotly-render.js';
-export * from './plotly-rendermime-contribution.js';
+export * from './ploty/plotly-renderers.js';
+export * from './ploty/plotly-render.js';
+export * from './ploty/plotly-rendermime-contribution.js';
+export * from './image-url/image-url-rendermime-contribution.js';
+export * from './image-url/image-url-render.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/rendermime/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qCAAqC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/rendermime/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,2CAA2C,CAAC;AAC1D,cAAc,kDAAkD,CAAC;AACjE,cAAc,iCAAiC,CAAC"}

package/es/rendermime/index.js

@@ -1,4 +1,6 @@
 export * from "./module.js";
-export * from "./plotly-renderers.js";
-export * from "./plotly-render.js";
-export * from "./plotly-rendermime-contribution.js";
+export * from "./ploty/plotly-renderers.js";
+export * from "./ploty/plotly-render.js";
+export * from "./ploty/plotly-rendermime-contribution.js";
+export * from "./image-url/image-url-rendermime-contribution.js";
+export * from "./image-url/image-url-render.js";

package/es/rendermime/module.d.ts

@@ -1,3 +1,3 @@
 import { ManaModule } from '@difizen/mana-app';
-export declare const PlotlyModule: ManaModule;
+export declare const CustomRenderMimeModule: ManaModule;
 //# sourceMappingURL=module.d.ts.map

package/es/rendermime/module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../src/rendermime/module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAI/C,eAAO,MAAM,YAAY,YAExB,CAAC"}
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../src/rendermime/module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAK/C,eAAO,MAAM,sBAAsB,YAGlC,CAAC"}

package/es/rendermime/module.js

@@ -1,3 +1,4 @@
 import { ManaModule } from '@difizen/mana-app';
-import { LibroPlotlyMimeTypeContribution } from "./plotly-rendermime-contribution.js";
-export var PlotlyModule = ManaModule.create().register(LibroPlotlyMimeTypeContribution);
+import { LibroImageUrlMimeTypeContribution } from "./image-url/image-url-rendermime-contribution.js";
+import { LibroPlotlyMimeTypeContribution } from "./ploty/plotly-rendermime-contribution.js";
+export var CustomRenderMimeModule = ManaModule.create().register(LibroPlotlyMimeTypeContribution, LibroImageUrlMimeTypeContribution);

package/es/rendermime/ploty/plotly-render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plotly-render.d.ts","sourceRoot":"","sources":["../../../src/rendermime/ploty/plotly-render.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAK1D,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,cAAc,CAAC;AAEtB,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC;IAAE,KAAK,EAAE,cAAc,CAAA;CAAE,CAwBtD,CAAC"}

package/es/rendermime/ploty/plotly-renderers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plotly-renderers.d.ts","sourceRoot":"","sources":["../../../src/rendermime/ploty/plotly-renderers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,KAAK,UAAU,MAAM,WAAW,CAAC;AACxC;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,IAAI,EAAE,WAAW,CAAC;IAClB;;OAEG;IACH,MAAM,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB,KAAK,EAAE,cAAc,CAAC;CACvB;AACD;;;GAGG;AACH,eAAO,MAAM,SAAS,mCAAmC,CAAC;AAO1D,qBAAa,cAAc;IACzB;;OAEG;gBACS,OAAO,EAAE,sBAAsB;IAc3C;;OAEG;IACH,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC;IAqBjD,SAAS,CAAC,eAAe;IAMzB,SAAS,CAAC,WAAW,CAAC,QAAQ,EAAE,MAAM;IAMtC,SAAS,CAAC,SAAS;IAQnB,SAAS,CAAC,SAAS;IAQnB,SAAS,CAAC,SAAS;IAQnB,SAAS,CAAC,SAAS;IAQnB,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC;IA+C3D,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,OAAO,EAAE,gBAAgB,CAAC;IACpC,SAAS,CAAC,MAAM,EAAE,cAAc,CAAC;IACjC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC;IAC5B,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,UAAU,GAAG,IAAI,CAAQ;IACzD,SAAS,CAAC,MAAM,CAAC,qBAAqB,EAAE,MAAM,IAAI,CAAC;IACnD,SAAS,CAAC,MAAM,CAAC,aAAa,gBAE3B;CACJ;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,sBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,CAI3E"}

package/es/rendermime/ploty/plotly-rendermime-contribution.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plotly-rendermime-contribution.d.ts","sourceRoot":"","sources":["../../../src/rendermime/ploty/plotly-rendermime-contribution.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAKnE,qBACa,+BAAgC,YAAW,sBAAsB;IAC5E,SAAS,eAEP;IACF,UAAU,SAAkB;IAC5B,IAAI,UAAQ;IACZ,SAAS,WAAsC;IAC/C,MAAM;;OAAgB;CACvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@difizen/libro-jupyter",
-  "version": "0.3.29",
+  "version": "0.3.30",
   "description": "",
   "keywords": [
     "libro"
@@ -37,22 +37,22 @@
   "dependencies": {
     "@ant-design/colors": "^7.0.0",
     "@ant-design/icons": "^5.1.0",
-    "@difizen/libro-code-cell": "^0.3.29",
-    "@difizen/libro-code-editor": "^0.3.29",
-    "@difizen/libro-codemirror": "^0.3.29",
-    "@difizen/libro-cofine-editor": "^0.3.29",
-    "@difizen/libro-common": "^0.3.29",
-    "@difizen/libro-core": "^0.3.29",
-    "@difizen/libro-kernel": "^0.3.29",
-    "@difizen/libro-l10n": "^0.3.29",
-    "@difizen/libro-language-client": "^0.3.29",
-    "@difizen/libro-lsp": "^0.3.29",
-    "@difizen/libro-markdown-cell": "^0.3.29",
-    "@difizen/libro-output": "^0.3.29",
-    "@difizen/libro-raw-cell": "^0.3.29",
-    "@difizen/libro-rendermime": "^0.3.29",
-    "@difizen/libro-search": "^0.3.29",
-    "@difizen/libro-search-code-cell": "^0.3.29",
+    "@difizen/libro-code-cell": "^0.3.30",
+    "@difizen/libro-code-editor": "^0.3.30",
+    "@difizen/libro-codemirror": "^0.3.30",
+    "@difizen/libro-cofine-editor": "^0.3.30",
+    "@difizen/libro-common": "^0.3.30",
+    "@difizen/libro-core": "^0.3.30",
+    "@difizen/libro-kernel": "^0.3.30",
+    "@difizen/libro-l10n": "^0.3.30",
+    "@difizen/libro-language-client": "^0.3.30",
+    "@difizen/libro-lsp": "^0.3.30",
+    "@difizen/libro-markdown-cell": "^0.3.30",
+    "@difizen/libro-output": "^0.3.30",
+    "@difizen/libro-raw-cell": "^0.3.30",
+    "@difizen/libro-rendermime": "^0.3.30",
+    "@difizen/libro-search": "^0.3.30",
+    "@difizen/libro-search-code-cell": "^0.3.30",
     "@difizen/mana-app": "latest",
     "@difizen/mana-l10n": "latest",
     "classnames": "^2.3.2",

package/src/module-noeditor.ts

@@ -46,7 +46,7 @@ import { KernelStatusAndSelectorProvider } from './libro-jupyter-protocol.js';
 import { JupyterServerLaunchManager } from './libro-jupyter-server-launch-manager.js';
 import { LibroJupyterView } from './libro-jupyter-view.js';
 import { LibroJupyterOutputArea } from './output/index.js';
-import { PlotlyModule } from './rendermime/index.js';
+import { CustomRenderMimeModule } from './rendermime/index.js';
 import { LibroJupyterColorContribution } from './theme/index.js';
 import {
   KernelStatusSelector,
@@ -110,7 +110,7 @@ export const LibroJupyterNoEditorModule = ManaModule.create()
     // custom module
     LibroBetweenCellModule,
     KeybindInstructionsModule,
-    PlotlyModule,
+    CustomRenderMimeModule,
     LibroJupyterFileModule,
     WidgetModule,
   );

package/src/module.ts

@@ -50,7 +50,7 @@ import { JupyterServerLaunchManager } from './libro-jupyter-server-launch-manage
 import { LibroJupyterView } from './libro-jupyter-view.js';
 import { JupyterWorkspaceService } from './libro-jupyter-workspace.js';
 import { LibroJupyterOutputArea } from './output/index.js';
-import { PlotlyModule } from './rendermime/index.js';
+import { CustomRenderMimeModule } from './rendermime/index.js';
 import { LibroJupyterColorContribution } from './theme/index.js';
 import {
   KernelStatusSelector,
@@ -114,7 +114,7 @@ export const LibroJupyterNoEditorModule = ManaModule.create()
     // custom module
     LibroBetweenCellModule,
     KeybindInstructionsModule,
-    PlotlyModule,
+    CustomRenderMimeModule,
     LibroJupyterFileModule,
     WidgetModule,
   );

package/src/rendermime/image-url/image-url-render.tsx

@@ -0,0 +1,145 @@
+import type { JSONObject } from '@difizen/libro-common';
+import type { BaseOutputView } from '@difizen/libro-core';
+import type { IRenderMimeRegistry } from '@difizen/libro-rendermime';
+import { RenderMimeRegistry } from '@difizen/libro-rendermime';
+import { useInject } from '@difizen/mana-app';
+import { useEffect, useRef } from 'react';
+import type { FC } from 'react';
+
+export const imageUrlMimeTypes = ['image/vnd.libro.image-url'];
+
+/**
+ * 图片 URL 渲染组件
+ * 专门处理图片 URL 数据的渲染
+ */
+export const ImageUrlRender: FC<{ model: BaseOutputView }> = (props: {
+  model: BaseOutputView;
+}) => {
+  const { model } = props;
+  const renderImageRef = useRef<HTMLDivElement>(null);
+  const defaultRenderMime = useInject<IRenderMimeRegistry>(RenderMimeRegistry);
+
+  // 获取首选的图片 MIME 类型
+  const mimeType = defaultRenderMime.preferredMimeType(model);
+
+  useEffect(() => {
+    if (mimeType && renderImageRef.current) {
+      const imageData = model.data[mimeType];
+
+      if (typeof imageData === 'string') {
+        renderImageUrl({
+          host: renderImageRef.current,
+          source: imageData,
+          width: (model.metadata['width'] ||
+            (model.metadata[mimeType] as JSONObject)?.['width']) as unknown as
+            | number
+            | undefined,
+          height: (model.metadata['height'] ||
+            (model.metadata[mimeType] as JSONObject)?.['height']) as unknown as
+            | number
+            | undefined,
+          needsBackground: model.metadata['needs_background'] as string | undefined,
+          unconfined:
+            model.metadata && (model.metadata['unconfined'] as boolean | undefined),
+          mimeType: mimeType,
+        });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="libro-image-url-render-container">
+      <div className="libro-image-url-render" ref={renderImageRef} />
+    </div>
+  );
+};
+
+/**
+ * 渲染图片 URL 的选项接口
+ */
+interface IRenderImageUrlOptions {
+  host: HTMLElement;
+  mimeType: string;
+  source: string;
+  width?: number;
+  height?: number;
+  needsBackground?: string;
+  unconfined?: boolean;
+}
+
+/**
+ * 渲染图片 URL 到指定的宿主节点
+ * 支持 HTTP/HTTPS URL 和相对路径
+ */
+function renderImageUrl(options: IRenderImageUrlOptions): Promise<void> {
+  const { host, source, width, height, needsBackground, unconfined } = options;
+
+  // 清空宿主节点内容
+  host.textContent = '';
+
+  // 创建图片元素
+  const img = document.createElement('img');
+
+  // 设置图片源
+  // 如果是 URL（以 http 开头），直接使用
+  // 否则按照原有逻辑处理（兼容 base64 数据）
+  if (
+    source.startsWith('http://') ||
+    source.startsWith('https://') ||
+    (!source.startsWith('data:') && source.includes('/'))
+  ) {
+    img.src = source;
+  } else {
+    // 兜底处理，按照原有的 base64 逻辑
+    img.src = source.startsWith('data:')
+      ? source
+      : `data:${options.mimeType};base64,${source}`;
+  }
+
+  // 设置图片尺寸
+  if (typeof height === 'number') {
+    img.height = height;
+  }
+  if (typeof width === 'number') {
+    img.width = width;
+  }
+
+  // 设置背景样式
+  if (needsBackground === 'light') {
+    img.classList.add('jp-needs-light-background');
+  } else if (needsBackground === 'dark') {
+    img.classList.add('jp-needs-dark-background');
+  }
+
+  // 设置无约束样式
+  if (unconfined === true) {
+    img.classList.add('jp-mod-unconfined');
+  }
+
+  // 添加错误处理
+  img.onerror = () => {
+    // 可以在这里添加占位符或错误提示
+    const errorDiv = document.createElement('div');
+    errorDiv.className = 'libro-image-url-error';
+    errorDiv.textContent = `无法加载图片: ${source}`;
+    errorDiv.style.cssText = `
+      padding: 10px;
+      border: 1px dashed #ccc;
+      color: #666;
+      text-align: center;
+      background-color: #f9f9f9;
+    `;
+    host.replaceChild(errorDiv, img);
+  };
+
+  // 添加加载成功处理
+  img.onload = () => {
+    // 图片加载成功
+  };
+
+  // 将图片添加到宿主节点
+  host.appendChild(img);
+
+  return Promise.resolve(undefined);
+}

package/src/rendermime/image-url/image-url-rendermime-contribution.ts

@@ -0,0 +1,52 @@
+import type { BaseOutputView } from '@difizen/libro-core';
+import { RenderMimeContribution } from '@difizen/libro-rendermime';
+import { singleton } from '@difizen/mana-app';
+
+import { ImageUrlRender, imageUrlMimeTypes } from './image-url-render.js';
+import './index.less';
+
+/**
+ * 自定义图片 URL MIME 渲染器贡献类
+ * 优先级高于默认图片渲染器，专门处理图片 URL 数据
+ */
+@singleton({ contrib: RenderMimeContribution })
+export class LibroImageUrlMimeTypeContribution implements RenderMimeContribution {
+  private imageUrlMimeTypes = imageUrlMimeTypes;
+
+  /**
+   * 判断是否能处理该模型数据
+   * 返回值越高，优先级越高
+   * 只有当数据是图片 URL 时才返回高优先级
+   */
+  canHandle = (model: BaseOutputView): number => {
+    // 检查是否包含图片 MIME 类型
+    for (const mimeType of this.imageUrlMimeTypes) {
+      if (mimeType in model.data) {
+        const data = model.data[mimeType];
+        // 检查数据是否为字符串且看起来像 URL
+        if (typeof data === 'string' && this.isImageUrl(data)) {
+          return 200; // 高优先级，超过默认图片渲染器的 90
+        }
+      }
+    }
+
+    return 0; // 不处理非 URL 图片数据
+  };
+
+  /**
+   * 检查字符串是否为图片 URL
+   */
+  private isImageUrl(data: string): boolean {
+    // 检查是否以 http:// 或 https:// 开头
+    if (data.startsWith('http://') || data.startsWith('https://')) {
+      return true;
+    }
+
+    return false;
+  }
+
+  renderType = 'imageUrlRender';
+  safe = true;
+  mimeTypes = this.imageUrlMimeTypes;
+  render = ImageUrlRender;
+}

package/src/rendermime/image-url/index.less

@@ -0,0 +1,4 @@
+.libro-image-url-render-container {
+  border-radius: 4px;
+  padding: 10px 24px;
+}

package/src/rendermime/index.ts

@@ -1,4 +1,6 @@
 export * from './module.js';
-export * from './plotly-renderers.js';
-export * from './plotly-render.js';
-export * from './plotly-rendermime-contribution.js';
+export * from './ploty/plotly-renderers.js';
+export * from './ploty/plotly-render.js';
+export * from './ploty/plotly-rendermime-contribution.js';
+export * from './image-url/image-url-rendermime-contribution.js';
+export * from './image-url/image-url-render.js';

package/src/rendermime/module.ts

@@ -1,7 +1,9 @@
 import { ManaModule } from '@difizen/mana-app';
 
-import { LibroPlotlyMimeTypeContribution } from './plotly-rendermime-contribution.js';
+import { LibroImageUrlMimeTypeContribution } from './image-url/image-url-rendermime-contribution.js';
+import { LibroPlotlyMimeTypeContribution } from './ploty/plotly-rendermime-contribution.js';
 
-export const PlotlyModule = ManaModule.create().register(
+export const CustomRenderMimeModule = ManaModule.create().register(
   LibroPlotlyMimeTypeContribution,
+  LibroImageUrlMimeTypeContribution,
 );

package/es/rendermime/plotly-render.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"plotly-render.d.ts","sourceRoot":"","sources":["../../src/rendermime/plotly-render.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAK1D,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,cAAc,CAAC;AAEtB,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC;IAAE,KAAK,EAAE,cAAc,CAAA;CAAE,CAwBtD,CAAC"}

package/es/rendermime/plotly-renderers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"plotly-renderers.d.ts","sourceRoot":"","sources":["../../src/rendermime/plotly-renderers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,KAAK,UAAU,MAAM,WAAW,CAAC;AACxC;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,IAAI,EAAE,WAAW,CAAC;IAClB;;OAEG;IACH,MAAM,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB,KAAK,EAAE,cAAc,CAAC;CACvB;AACD;;;GAGG;AACH,eAAO,MAAM,SAAS,mCAAmC,CAAC;AAO1D,qBAAa,cAAc;IACzB;;OAEG;gBACS,OAAO,EAAE,sBAAsB;IAc3C;;OAEG;IACH,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC;IAqBjD,SAAS,CAAC,eAAe;IAMzB,SAAS,CAAC,WAAW,CAAC,QAAQ,EAAE,MAAM;IAMtC,SAAS,CAAC,SAAS;IAQnB,SAAS,CAAC,SAAS;IAQnB,SAAS,CAAC,SAAS;IAQnB,SAAS,CAAC,SAAS;IAQnB,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC;IA+C3D,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,OAAO,EAAE,gBAAgB,CAAC;IACpC,SAAS,CAAC,MAAM,EAAE,cAAc,CAAC;IACjC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC;IAC5B,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,UAAU,GAAG,IAAI,CAAQ;IACzD,SAAS,CAAC,MAAM,CAAC,qBAAqB,EAAE,MAAM,IAAI,CAAC;IACnD,SAAS,CAAC,MAAM,CAAC,aAAa,gBAE3B;CACJ;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,sBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,CAI3E"}

package/es/rendermime/plotly-rendermime-contribution.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"plotly-rendermime-contribution.d.ts","sourceRoot":"","sources":["../../src/rendermime/plotly-rendermime-contribution.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAKnE,qBACa,+BAAgC,YAAW,sBAAsB;IAC5E,SAAS,eAEP;IACF,UAAU,SAAkB;IAC5B,IAAI,UAAQ;IACZ,SAAS,WAAsC;IAC/C,MAAM;;OAAgB;CACvB"}