@difizen/libro-rendermime 0.3.35 → 0.3.37

package/es/renderers.d.ts

@@ -1,10 +1,11 @@
 import type { IRenderHTMLOptions, IRenderImageOptions, IRenderMarkdownOptions, IRenderSVGOptions, IRenderTextOptions } from './rendermime-protocol.js';
 /**
- * Render text into a host node.
- *
- * @param options - The options for rendering.
- *
- * @returns A promise which resolves when rendering is complete.
+ * renderText
+ * - 使用 autolinkRanges 得到全局的链接区间信息（start/end/url）。
+ * - 在脱离文档的 parsed fragment（template.content）上按子节点边界切片，
+ *   仅创建必要的 Text / shallow-clone element / <a> 节点。
+ * - 对跨子节点的链接，使用 pendingAnchor 把分片累计到同一个 <a>，直到 range 结束。
+ * - 最后一次性将构建好的 DocumentFragment 插回 pre 中，减少重排与 GC 压力。
  */
 export declare function renderText(options: IRenderTextOptions): Promise<void>;
 /**

package/es/renderers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderers.d.ts","sourceRoot":"","sources":["../src/renderers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EACnB,sBAAsB,EACtB,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAUlC;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,CAmFrE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,CAqCvE;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,CAuErE;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CA+BnE;AAED;;;;;;GAMG;AACH,wBAAsB,cAAc,CAAC,OAAO,EAAE,sBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,CAyBnF"}
+{"version":3,"file":"renderers.d.ts","sourceRoot":"","sources":["../src/renderers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EACnB,sBAAsB,EACtB,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAWlC;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,CAwIrE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,CAqCvE;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,CAuErE;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CA+BnE;AAED;;;;;;GAMG;AACH,wBAAsB,cAAc,CAAC,OAAO,EAAE,sBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,CAyBnF"}

package/es/renderers.js

@@ -11,89 +11,145 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 import { concatMultilineString } from '@difizen/libro-common';
-import { ansiSpan, autolink, evalInnerHTMLScriptTags, handleDefaults, handleUrls, splitShallowNode } from "./rendermime-utils.js";
+import { ansiSpan, autolinkRanges, createAnchorForUrl, evalInnerHTMLScriptTags, handleDefaults, handleUrls, pieceFromNodeSlice } from "./rendermime-utils.js";
 
 /**
- * Render text into a host node.
- *
- * @param options - The options for rendering.
- *
- * @returns A promise which resolves when rendering is complete.
+ * renderText
+ * - 使用 autolinkRanges 得到全局的链接区间信息（start/end/url）。
+ * - 在脱离文档的 parsed fragment（template.content）上按子节点边界切片，
+ *   仅创建必要的 Text / shallow-clone element / <a> 节点。
+ * - 对跨子节点的链接，使用 pendingAnchor 把分片累计到同一个 <a>，直到 range 结束。
+ * - 最后一次性将构建好的 DocumentFragment 插回 pre 中，减少重排与 GC 压力。
  */
 export function renderText(options) {
   var host = options.host,
     sanitizer = options.sanitizer,
     source = options.source,
     mimeType = options.mimeType;
-  var data = concatMultilineString(JSON.parse(JSON.stringify(source)));
+  var data = concatMultilineString(source);
+
+  // 对文本做 ansi -> span 的转换并 sanitize（仅允许 <span>）
   var content = sanitizer.sanitize(ansiSpan(data), {
     allowedTags: ['span']
   });
   if (mimeType === 'application/vnd.jupyter.stderr') {
     host.setAttribute('data-mime-type', 'application/vnd.jupyter.stderr');
   }
+
+  // 确保存在 <pre>，但不要马上把 innerHTML 写入实际文档（我们将在脱离文档的 fragment 上操作）
   var pre = host.querySelector('pre');
   if (!pre) {
     pre = document.createElement('pre');
     host.appendChild(pre);
   }
-  pre.innerHTML = content;
-  var preTextContent = pre.textContent;
-  if (preTextContent) {
-    var linkedNodes = autolink(preTextContent);
-    var inAnchorElement = false;
-    var combinedNodes = [];
-    var preNodes = Array.from(pre.childNodes);
-
-    // 使用 shift/unshift 替代索引遍历，确保所有节点被处理
-    while (preNodes.length && linkedNodes.length) {
-      var _preNode$textContent, _linkNode$textContent;
-      var preNode = preNodes.shift();
-      var linkNode = linkedNodes.shift();
-      var preLen = ((_preNode$textContent = preNode.textContent) === null || _preNode$textContent === void 0 ? void 0 : _preNode$textContent.length) || 0;
-      var linkLen = ((_linkNode$textContent = linkNode.textContent) === null || _linkNode$textContent === void 0 ? void 0 : _linkNode$textContent.length) || 0;
-
-      // 如果长度不一致，进行分割处理
-      if (preLen > linkLen) {
-        var _splitShallowNode = splitShallowNode(preNode, linkLen),
-          keep = _splitShallowNode.pre,
-          postpone = _splitShallowNode.post;
-        preNodes.unshift(postpone); // 剩余部分放回数组头部
-        preNode.textContent = keep.textContent;
-      } else if (linkLen > preLen) {
-        var _splitShallowNode2 = splitShallowNode(linkNode, preLen),
-          _keep = _splitShallowNode2.pre,
-          _postpone = _splitShallowNode2.post;
-        linkedNodes.unshift(_postpone);
-        linkNode.textContent = _keep.textContent;
+
+  // 使用 template 元素来解析 HTML，但 template.content 尚未插入到文档中 -> 不触发重排
+  var tpl = document.createElement('template');
+  tpl.innerHTML = content;
+  var parsedFrag = tpl.content;
+
+  // 全文文本（用于按字符位置计算 ranges）
+  var fullText = parsedFrag.textContent || '';
+  if (!fullText) {
+    // 若没有文本，清空并返回（保持 class）
+    pre.innerHTML = '';
+    host.classList.add('libro-text-render');
+    return Promise.resolve(undefined);
+  }
+
+  // 计算链接 ranges
+  var ranges = autolinkRanges(fullText);
+
+  // 准备输出 fragment（最终将一次性 append 到 pre）
+  var outFrag = document.createDocumentFragment();
+
+  // pendingAnchor 用于处理链接跨多个原始子节点的情形：
+  // 当链接在一个子节点中没有结束时，把该子节点片段 append 到 pendingAnchor，
+  // 等到链接结束时再把 pendingAnchor push 到 outFrag。
+  var pendingAnchor = null;
+  // 当前处理到的 range 索引
+  var rangeIdx = 0;
+
+  // 遍历 parsedFrag 的顶层子节点（这些通常是由 sanitizer/ansiSpan 产生的 span/text 节点）
+  var globalOffset = 0;
+  var childNodes = Array.from(parsedFrag.childNodes);
+  for (var ni = 0; ni < childNodes.length; ni++) {
+    var node = childNodes[ni];
+    var nodeText = node.textContent || '';
+    var nodeLen = nodeText.length;
+    if (nodeLen === 0) {
+      // 空节点直接跳过（同时 pendingAnchor 不受影响）
+      continue;
+    }
+    var localPos = 0; // 当前在该节点内的偏移
+    while (localPos < nodeLen) {
+      var absPos = globalOffset + localPos;
+      // 跳过已经结束在当前位置之前的 ranges（将 rangeIdx 推到第一个可能相关的 range）
+      while (rangeIdx < ranges.length && ranges[rangeIdx].end <= absPos) {
+        rangeIdx++;
+      }
+      var curRange = rangeIdx < ranges.length ? ranges[rangeIdx] : null;
+
+      // 如果当前有正在构建的 pendingAnchor（链接已经开始但尚未结束）
+      if (pendingAnchor) {
+        // 计算本次可以从该节点中“消费”的长度（尽量多取，直到链接结束或节点结束）
+        var take = Math.min(nodeLen - localPos, (curRange ? curRange.end : absPos) - absPos);
+        var piece = pieceFromNodeSlice(node, localPos, localPos + take);
+        pendingAnchor.appendChild(piece);
+        localPos += take;
+
+        // 若到达了当前 range 的结束位置，则关闭 pendingAnchor
+        if (curRange && globalOffset + localPos >= curRange.end) {
+          outFrag.appendChild(pendingAnchor);
+          pendingAnchor = null;
+          rangeIdx++; // 当前 range 完成，推进到下一个
+        }
+        // 继续循环：可能在同一节点内就完成多个 ranges
+        continue;
       }
-      var lastCombined = combinedNodes[combinedNodes.length - 1];
-      if (inAnchorElement && linkNode.href === lastCombined.href) {
-        lastCombined.appendChild(preNode);
+
+      // 没有 pendingAnchor：决定当前段是普通文本还是链接起点
+      if (!curRange || curRange.start >= globalOffset + nodeLen) {
+        // 当前剩余的节点内容中，没有链接开始 -> 全部作为普通片段
+        var _piece = pieceFromNodeSlice(node, localPos, nodeLen);
+        outFrag.appendChild(_piece);
+        localPos = nodeLen;
+      } else if (curRange.start > absPos) {
+        // 有链接，但还没到链接起点：把从 localPos 到链接起点之前的文本作为普通片段
+        var until = Math.min(nodeLen, curRange.start - globalOffset);
+        var _piece2 = pieceFromNodeSlice(node, localPos, until);
+        outFrag.appendChild(_piece2);
+        localPos = until;
       } else {
-        var isAnchor = linkNode.nodeType !== Node.TEXT_NODE;
-        if (!isAnchor) {
-          combinedNodes.push(preNode);
-          inAnchorElement = false;
-        } else {
-          linkNode.textContent = '';
-          linkNode.appendChild(preNode);
-          combinedNodes.push(linkNode);
-          inAnchorElement = true;
+        // 当前绝对位置处于链接范围之内（curRange.start <= absPos < curRange.end）
+        // 新建一个 anchor 并把该节点中属于该链接的部分 append 到 anchor
+        pendingAnchor = createAnchorForUrl(curRange.url);
+        var _take = Math.min(nodeLen - localPos, curRange.end - absPos);
+        var _piece3 = pieceFromNodeSlice(node, localPos, localPos + _take);
+        pendingAnchor.appendChild(_piece3);
+        localPos += _take;
+
+        // 如果这个 range 在当前节点内就结束，则立即关闭 pendingAnchor
+        if (globalOffset + localPos >= curRange.end) {
+          outFrag.appendChild(pendingAnchor);
+          pendingAnchor = null;
+          rangeIdx++;
         }
+        // 否则 pendingAnchor 会在后续节点继续被填充
       }
     }
+    globalOffset += nodeLen;
+  }
 
-    // 使用 DocumentFragment 一次性插入 DOM，提升性能
-    var fragment = document.createDocumentFragment();
-    for (var _i = 0, _combinedNodes = combinedNodes; _i < _combinedNodes.length; _i++) {
-      var child = _combinedNodes[_i];
-      fragment.appendChild(child);
-    }
-    pre.innerHTML = ''; // 清空内容
-    pre.appendChild(fragment); // 一次性插入
+  // 如果循环结束后仍有 pendingAnchor（理论上不应发生，但以防万一），追加它
+  if (pendingAnchor) {
+    outFrag.appendChild(pendingAnchor);
+    pendingAnchor = null;
   }
-  host.appendChild(pre);
+
+  // 一次性替换 pre 的内容：先清空再 append（减少中间重排）
+  pre.innerHTML = '';
+  pre.appendChild(outFrag);
   host.classList.add('libro-text-render');
   return Promise.resolve(undefined);
 }

package/es/rendermime-utils.d.ts

@@ -1,21 +1,5 @@
 import type { ISanitizer } from '@difizen/libro-common';
 import type { ILinkHandler, IResolver, RankMap } from './rendermime-protocol.js';
-/**
- * Transform ANSI color escape codes into HTML <span> tags with CSS
- * classes such as "ansi-green-intense-fg".
- * The actual colors used are set in the CSS file.
- * This also removes non-color escape sequences.
- * This is supposed to have the same behavior as nbconvert.filters.ansi2html()
- */
-export declare function ansiSpan(str: string): string;
-/**
- * Replace URLs with links.
- *
- * @param content - The text content of a node.
- *
- * @returns A list of text nodes and anchor elements.
- */
-export declare function autolink(content: string): (HTMLAnchorElement | Text)[];
 export interface IRenderOptions {
     /**
      * The host node for the text content.
@@ -30,6 +14,34 @@ export interface IRenderOptions {
      */
     source: string;
 }
+/**
+ * Transform ANSI color escape codes into HTML <span> tags with CSS
+ * classes such as "ansi-green-intense-fg".
+ * The actual colors used are set in the CSS file.
+ * This also removes non-color escape sequences.
+ * This is supposed to have the same behavior as nbconvert.filters.ansi2html()
+ */
+export declare function ansiSpan(str: string): string;
+export interface LinkRange {
+    start: number;
+    end: number;
+    url: string;
+}
+/**
+ * 根据原始节点、start/end 在该节点的偏移，创建对应的片段节点（不修改原节点）
+ * - 若原节点是 Text，则创建 document.createTextNode(substring)
+ * - 若原节点是 Element（如 span），则 cloneNode(false) shallow clone 后设 textContent 为 substring（保留属性/类）
+ */
+export declare function pieceFromNodeSlice(node: Node, startInNode: number, endInNode: number): Node;
+/**
+ * 创建 <a> 的 helper（保留 rel/target，并处理 www. 前缀）
+ */
+export declare function createAnchorForUrl(urlText: string): HTMLAnchorElement;
+/**
+ * 在字符串中查找链接范围（不创建 DOM），返回按 start 升序、不重叠的 LinkRange 数组。
+ * 该函数仅做正则匹配与位置信息记录，避免任何 DOM 分配以降低开销。
+ */
+export declare function autolinkRanges(content: string): LinkRange[];
 /**
  * Split a shallow node (node without nested nodes inside) at a given text content position.
  *

package/es/rendermime-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rendermime-utils.d.ts","sourceRoot":"","sources":["../src/rendermime-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAKxD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAmIjF;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAqI5C;AACD;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,CAAC,iBAAiB,GAAG,IAAI,CAAC,EAAE,CAuCtE;AACD,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,IAAI,EAAE,WAAW,CAAC;IAElB;;OAEG;IACH,SAAS,EAAE,UAAU,CAAC;IAEtB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB;AACD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,IAAI,EAC7C,IAAI,EAAE,CAAC,EACP,EAAE,EAAE,MAAM,GACT;IAAE,GAAG,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,CAAC,CAAA;CAAE,CASrB;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,EAAE,CASlD;AAED;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CA2B/D;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CA8BnF;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,SAAS,EACnB,WAAW,EAAE,YAAY,GAAG,IAAI,GAC/B,OAAO,CAAC,IAAI,CAAC,CAwBf;AAoFD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,CAEtD;AAED;;GAEG"}
+{"version":3,"file":"rendermime-utils.d.ts","sourceRoot":"","sources":["../src/rendermime-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAKxD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAEjF,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,IAAI,EAAE,WAAW,CAAC;IAElB;;OAEG;IACH,SAAS,EAAE,UAAU,CAAC;IAEtB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB;AAoID;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAqI5C;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,MAAM,GAChB,IAAI,CASN;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,GAAG,iBAAiB,CAMrE;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,EAAE,CAuC3D;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,IAAI,EAC7C,IAAI,EAAE,CAAC,EACP,EAAE,EAAE,MAAM,GACT;IAAE,GAAG,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,CAAC,CAAA;CAAE,CASrB;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,EAAE,CASlD;AAED;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CA2B/D;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CA8BnF;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,WAAW,EACjB,QAAQ,EAAE,SAAS,EACnB,WAAW,EAAE,YAAY,GAAG,IAAI,GAC/B,OAAO,CAAC,IAAI,CAAC,CAwBf;AAoFD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,CAEtD;AAED;;GAEG"}

package/es/rendermime-utils.js

@@ -107,6 +107,7 @@ function getExtendedColors(numbers) {
   }
   return [r, g, b];
 }
+
 /**
  * Transform ANSI color escape codes into HTML <span> tags with CSS
  * classes such as "ansi-green-intense-fg".
@@ -246,43 +247,72 @@ export function ansiSpan(str) {
   return out.join('');
 }
 /**
- * Replace URLs with links.
- *
- * @param content - The text content of a node.
- *
- * @returns A list of text nodes and anchor elements.
+ * 根据原始节点、start/end 在该节点的偏移，创建对应的片段节点（不修改原节点）
+ * - 若原节点是 Text，则创建 document.createTextNode(substring)
+ * - 若原节点是 Element（如 span），则 cloneNode(false) shallow clone 后设 textContent 为 substring（保留属性/类）
+ */
+export function pieceFromNodeSlice(node, startInNode, endInNode) {
+  var text = (node.textContent || '').slice(startInNode, endInNode);
+  if (node.nodeType === Node.TEXT_NODE) {
+    return document.createTextNode(text);
+  } else {
+    var el = node.cloneNode(false);
+    el.textContent = text;
+    return el;
+  }
+}
+
+/**
+ * 创建 <a> 的 helper（保留 rel/target，并处理 www. 前缀）
+ */
+export function createAnchorForUrl(urlText) {
+  var a = document.createElement('a');
+  a.href = urlText.startsWith('www.') ? 'https://' + urlText : urlText;
+  a.rel = 'noopener';
+  a.target = '_blank';
+  return a;
+}
+
+/**
+ * 在字符串中查找链接范围（不创建 DOM），返回按 start 升序、不重叠的 LinkRange 数组。
+ * 该函数仅做正则匹配与位置信息记录，避免任何 DOM 分配以降低开销。
  */
-export function autolink(content) {
+export function autolinkRanges(content) {
+  if (!content) {
+    return [];
+  }
+  var MAX_AUTOLINK_LENGTH = 100000;
+
+  // 长度保护，超长文本直接不检测链接，返回空
+  // 避免超长文本正则匹配引起栈溢出
+  if (content.length > MAX_AUTOLINK_LENGTH) {
+    return [];
+  }
+
   // Taken from Visual Studio Code:
   // https://github.com/microsoft/vscode/blob/9f709d170b06e991502153f281ec3c012add2e42/src/vs/workbench/contrib/debug/browser/linkDetector.ts#L17-L18
   var controlCodes = "\\u0000-\\u0020\\u007f-\\u009f";
   var webLinkRegex = new RegExp('(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\\/\\/|data:|www\\.)[^\\s' + controlCodes + '"]{2,}[^\\s' + controlCodes + '"\'(){}\\[\\],:;.!?]', 'ug');
-  var nodes = [];
-  var lastIndex = 0;
+  var ranges = [];
   var match;
-  while (null !== (match = webLinkRegex.exec(content))) {
-    if (match.index !== lastIndex) {
-      nodes.push(document.createTextNode(content.slice(lastIndex, match.index)));
-    }
+  while (match = webLinkRegex.exec(content)) {
     var url = match[0];
-    // Special case when the URL ends with ">" or "<"
+    // 处理特殊情况：末尾为 '>' 或 '<' 时排除该字符
     var lastChars = url.slice(-1);
-    var endsWithGtLt = ['>', '<'].indexOf(lastChars) !== -1;
+    var endsWithGtLt = lastChars === '>' || lastChars === '<';
     var len = endsWithGtLt ? url.length - 1 : url.length;
-    var anchor = document.createElement('a');
-    url = url.slice(0, len);
-    anchor.href = url.startsWith('www.') ? 'https://' + url : url;
-    anchor.rel = 'noopener';
-    anchor.target = '_blank';
-    anchor.appendChild(document.createTextNode(url.slice(0, len)));
-    nodes.push(anchor);
-    lastIndex = match.index + len;
+    var start = match.index;
+    var end = match.index + len;
+    ranges.push({
+      start: start,
+      end: end,
+      url: url.slice(0, len)
+    });
+    // 正则使用全局标志 'g'，exec 会自动推进位置
   }
-  if (lastIndex !== content.length) {
-    nodes.push(document.createTextNode(content.slice(lastIndex, content.length)));
-  }
-  return nodes;
+  return ranges;
 }
+
 /**
  * Split a shallow node (node without nested nodes inside) at a given text content position.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@difizen/libro-rendermime",
-  "version": "0.3.35",
+  "version": "0.3.37",
   "description": "",
   "keywords": [
     "libro",
@@ -32,9 +32,9 @@
     "src"
   ],
   "dependencies": {
-    "@difizen/libro-common": "^0.3.35",
-    "@difizen/libro-core": "^0.3.35",
-    "@difizen/libro-markdown": "^0.3.35",
+    "@difizen/libro-common": "^0.3.37",
+    "@difizen/libro-core": "^0.3.37",
+    "@difizen/libro-markdown": "^0.3.37",
     "@difizen/mana-app": "latest",
     "lodash.escape": "^4.0.1"
   },

package/src/renderers.ts

@@ -9,23 +9,27 @@ import type {
 } from './rendermime-protocol.js';
 import {
   ansiSpan,
-  autolink,
+  autolinkRanges,
+  createAnchorForUrl,
   evalInnerHTMLScriptTags,
   handleDefaults,
   handleUrls,
-  splitShallowNode,
+  pieceFromNodeSlice,
 } from './rendermime-utils.js';
 
 /**
- * Render text into a host node.
- *
- * @param options - The options for rendering.
- *
- * @returns A promise which resolves when rendering is complete.
+ * renderText
+ * - 使用 autolinkRanges 得到全局的链接区间信息（start/end/url）。
+ * - 在脱离文档的 parsed fragment（template.content）上按子节点边界切片，
+ *   仅创建必要的 Text / shallow-clone element / <a> 节点。
+ * - 对跨子节点的链接，使用 pendingAnchor 把分片累计到同一个 <a>，直到 range 结束。
+ * - 最后一次性将构建好的 DocumentFragment 插回 pre 中，减少重排与 GC 压力。
  */
 export function renderText(options: IRenderTextOptions): Promise<void> {
   const { host, sanitizer, source, mimeType } = options;
-  const data = concatMultilineString(JSON.parse(JSON.stringify(source)));
+  const data = concatMultilineString(source);
+
+  // 对文本做 ansi -> span 的转换并 sanitize（仅允许 <span>）
   const content = sanitizer.sanitize(ansiSpan(data), {
     allowedTags: ['span'],
   });
@@ -34,75 +38,126 @@ export function renderText(options: IRenderTextOptions): Promise<void> {
     host.setAttribute('data-mime-type', 'application/vnd.jupyter.stderr');
   }
 
+  // 确保存在 <pre>，但不要马上把 innerHTML 写入实际文档（我们将在脱离文档的 fragment 上操作）
   let pre = host.querySelector('pre');
   if (!pre) {
     pre = document.createElement('pre');
     host.appendChild(pre);
   }
 
-  pre.innerHTML = content;
-
-  const preTextContent = pre.textContent;
-  if (preTextContent) {
-    const linkedNodes = autolink(preTextContent);
-    let inAnchorElement = false;
-
-    const combinedNodes: (HTMLAnchorElement | Text | HTMLSpanElement)[] = [];
-    const preNodes = Array.from(pre.childNodes) as (Text | HTMLSpanElement)[];
-
-    // 使用 shift/unshift 替代索引遍历，确保所有节点被处理
-    while (preNodes.length && linkedNodes.length) {
-      const preNode = preNodes.shift()!;
-      const linkNode = linkedNodes.shift()!;
-
-      const preLen = preNode.textContent?.length || 0;
-      const linkLen = linkNode.textContent?.length || 0;
-
-      // 如果长度不一致，进行分割处理
-      if (preLen > linkLen) {
-        const { pre: keep, post: postpone } = splitShallowNode(preNode, linkLen);
-        preNodes.unshift(postpone); // 剩余部分放回数组头部
-        preNode.textContent = keep.textContent;
-      } else if (linkLen > preLen) {
-        const { pre: keep, post: postpone } = splitShallowNode(linkNode, preLen);
-        linkedNodes.unshift(postpone);
-        linkNode.textContent = keep.textContent;
-      }
+  // 使用 template 元素来解析 HTML，但 template.content 尚未插入到文档中 -> 不触发重排
+  const tpl = document.createElement('template');
+  tpl.innerHTML = content;
+  const parsedFrag = tpl.content;
+
+  // 全文文本（用于按字符位置计算 ranges）
+  const fullText = parsedFrag.textContent || '';
+  if (!fullText) {
+    // 若没有文本，清空并返回（保持 class）
+    pre.innerHTML = '';
+    host.classList.add('libro-text-render');
+    return Promise.resolve(undefined);
+  }
 
-      const lastCombined = combinedNodes[combinedNodes.length - 1];
+  // 计算链接 ranges
+  const ranges = autolinkRanges(fullText);
+
+  // 准备输出 fragment（最终将一次性 append 到 pre）
+  const outFrag = document.createDocumentFragment();
+
+  // pendingAnchor 用于处理链接跨多个原始子节点的情形：
+  // 当链接在一个子节点中没有结束时，把该子节点片段 append 到 pendingAnchor，
+  // 等到链接结束时再把 pendingAnchor push 到 outFrag。
+  let pendingAnchor: HTMLAnchorElement | null = null;
+  // 当前处理到的 range 索引
+  let rangeIdx = 0;
+
+  // 遍历 parsedFrag 的顶层子节点（这些通常是由 sanitizer/ansiSpan 产生的 span/text 节点）
+  let globalOffset = 0;
+  const childNodes = Array.from(parsedFrag.childNodes) as Node[];
+  for (let ni = 0; ni < childNodes.length; ni++) {
+    const node = childNodes[ni];
+    const nodeText = node.textContent || '';
+    const nodeLen = nodeText.length;
+    if (nodeLen === 0) {
+      // 空节点直接跳过（同时 pendingAnchor 不受影响）
+      continue;
+    }
+
+    let localPos = 0; // 当前在该节点内的偏移
+    while (localPos < nodeLen) {
+      const absPos = globalOffset + localPos;
+      // 跳过已经结束在当前位置之前的 ranges（将 rangeIdx 推到第一个可能相关的 range）
+      while (rangeIdx < ranges.length && ranges[rangeIdx].end <= absPos) {
+        rangeIdx++;
+      }
+      const curRange = rangeIdx < ranges.length ? ranges[rangeIdx] : null;
+
+      // 如果当前有正在构建的 pendingAnchor（链接已经开始但尚未结束）
+      if (pendingAnchor) {
+        // 计算本次可以从该节点中“消费”的长度（尽量多取，直到链接结束或节点结束）
+        const take = Math.min(
+          nodeLen - localPos,
+          (curRange ? curRange.end : absPos) - absPos,
+        );
+        const piece = pieceFromNodeSlice(node, localPos, localPos + take);
+        pendingAnchor.appendChild(piece);
+        localPos += take;
+
+        // 若到达了当前 range 的结束位置，则关闭 pendingAnchor
+        if (curRange && globalOffset + localPos >= curRange.end) {
+          outFrag.appendChild(pendingAnchor);
+          pendingAnchor = null;
+          rangeIdx++; // 当前 range 完成，推进到下一个
+        }
+        // 继续循环：可能在同一节点内就完成多个 ranges
+        continue;
+      }
 
-      if (
-        inAnchorElement &&
-        (linkNode as HTMLAnchorElement).href ===
-          (lastCombined as HTMLAnchorElement).href
-      ) {
-        lastCombined.appendChild(preNode);
+      // 没有 pendingAnchor：决定当前段是普通文本还是链接起点
+      if (!curRange || curRange.start >= globalOffset + nodeLen) {
+        // 当前剩余的节点内容中，没有链接开始 -> 全部作为普通片段
+        const piece = pieceFromNodeSlice(node, localPos, nodeLen);
+        outFrag.appendChild(piece);
+        localPos = nodeLen;
+      } else if (curRange.start > absPos) {
+        // 有链接，但还没到链接起点：把从 localPos 到链接起点之前的文本作为普通片段
+        const until = Math.min(nodeLen, curRange.start - globalOffset);
+        const piece = pieceFromNodeSlice(node, localPos, until);
+        outFrag.appendChild(piece);
+        localPos = until;
       } else {
-        const isAnchor = linkNode.nodeType !== Node.TEXT_NODE;
-
-        if (!isAnchor) {
-          combinedNodes.push(preNode);
-          inAnchorElement = false;
-        } else {
-          linkNode.textContent = '';
-          linkNode.appendChild(preNode);
-          combinedNodes.push(linkNode);
-          inAnchorElement = true;
+        // 当前绝对位置处于链接范围之内（curRange.start <= absPos < curRange.end）
+        // 新建一个 anchor 并把该节点中属于该链接的部分 append 到 anchor
+        pendingAnchor = createAnchorForUrl(curRange.url);
+        const take = Math.min(nodeLen - localPos, curRange.end - absPos);
+        const piece = pieceFromNodeSlice(node, localPos, localPos + take);
+        pendingAnchor.appendChild(piece);
+        localPos += take;
+
+        // 如果这个 range 在当前节点内就结束，则立即关闭 pendingAnchor
+        if (globalOffset + localPos >= curRange.end) {
+          outFrag.appendChild(pendingAnchor);
+          pendingAnchor = null;
+          rangeIdx++;
         }
+        // 否则 pendingAnchor 会在后续节点继续被填充
       }
     }
 
-    // 使用 DocumentFragment 一次性插入 DOM，提升性能
-    const fragment = document.createDocumentFragment();
-    for (const child of combinedNodes) {
-      fragment.appendChild(child);
-    }
+    globalOffset += nodeLen;
+  }
 
-    pre.innerHTML = ''; // 清空内容
-    pre.appendChild(fragment); // 一次性插入
+  // 如果循环结束后仍有 pendingAnchor（理论上不应发生，但以防万一），追加它
+  if (pendingAnchor) {
+    outFrag.appendChild(pendingAnchor);
+    pendingAnchor = null;
   }
 
-  host.appendChild(pre);
+  // 一次性替换 pre 的内容：先清空再 append（减少中间重排）
+  pre.innerHTML = '';
+  pre.appendChild(outFrag);
+
   host.classList.add('libro-text-render');
 
   return Promise.resolve(undefined);

package/src/rendermime-utils.ts

@@ -5,6 +5,23 @@ import escape from 'lodash.escape';
 
 import type { ILinkHandler, IResolver, RankMap } from './rendermime-protocol.js';
 
+export interface IRenderOptions {
+  /**
+   * The host node for the text content.
+   */
+  host: HTMLElement;
+
+  /**
+   * The html sanitizer for untrusted source.
+   */
+  sanitizer: ISanitizer;
+
+  /**
+   * The source text to render.
+   */
+  source: string;
+}
+
 const ANSI_COLORS = [
   'ansi-black',
   'ansi-red',
@@ -134,6 +151,7 @@ function getExtendedColors(numbers: number[]): number | number[] {
   }
   return [r, g, b];
 }
+
 /**
  * Transform ANSI color escape codes into HTML <span> tags with CSS
  * classes such as "ansi-green-intense-fg".
@@ -275,14 +293,61 @@ export function ansiSpan(str: string): string {
   }
   return out.join('');
 }
+
+export interface LinkRange {
+  start: number; // inclusive index in whole content string
+  end: number; // exclusive index
+  url: string; // raw matched url text (without trailing > or <)
+}
+
 /**
- * Replace URLs with links.
- *
- * @param content - The text content of a node.
- *
- * @returns A list of text nodes and anchor elements.
+ * 根据原始节点、start/end 在该节点的偏移，创建对应的片段节点（不修改原节点）
+ * - 若原节点是 Text，则创建 document.createTextNode(substring)
+ * - 若原节点是 Element（如 span），则 cloneNode(false) shallow clone 后设 textContent 为 substring（保留属性/类）
+ */
+export function pieceFromNodeSlice(
+  node: Node,
+  startInNode: number,
+  endInNode: number,
+): Node {
+  const text = (node.textContent || '').slice(startInNode, endInNode);
+  if (node.nodeType === Node.TEXT_NODE) {
+    return document.createTextNode(text);
+  } else {
+    const el = (node as Element).cloneNode(false) as Element;
+    el.textContent = text;
+    return el;
+  }
+}
+
+/**
+ * 创建 <a> 的 helper（保留 rel/target，并处理 www. 前缀）
  */
-export function autolink(content: string): (HTMLAnchorElement | Text)[] {
+export function createAnchorForUrl(urlText: string): HTMLAnchorElement {
+  const a = document.createElement('a');
+  a.href = urlText.startsWith('www.') ? 'https://' + urlText : urlText;
+  a.rel = 'noopener';
+  a.target = '_blank';
+  return a;
+}
+
+/**
+ * 在字符串中查找链接范围（不创建 DOM），返回按 start 升序、不重叠的 LinkRange 数组。
+ * 该函数仅做正则匹配与位置信息记录，避免任何 DOM 分配以降低开销。
+ */
+export function autolinkRanges(content: string): LinkRange[] {
+  if (!content) {
+    return [];
+  }
+
+  const MAX_AUTOLINK_LENGTH = 100_000;
+
+  // 长度保护，超长文本直接不检测链接，返回空
+  // 避免超长文本正则匹配引起栈溢出
+  if (content.length > MAX_AUTOLINK_LENGTH) {
+    return [];
+  }
+
   // Taken from Visual Studio Code:
   // https://github.com/microsoft/vscode/blob/9f709d170b06e991502153f281ec3c012add2e42/src/vs/workbench/contrib/debug/browser/linkDetector.ts#L17-L18
   const controlCodes = '\\u0000-\\u0020\\u007f-\\u009f';
@@ -295,49 +360,22 @@ export function autolink(content: string): (HTMLAnchorElement | Text)[] {
     'ug',
   );
 
-  const nodes = [];
-  let lastIndex = 0;
-
+  const ranges: LinkRange[] = [];
   let match: RegExpExecArray | null;
-  while (null !== (match = webLinkRegex.exec(content))) {
-    if (match.index !== lastIndex) {
-      nodes.push(document.createTextNode(content.slice(lastIndex, match.index)));
-    }
-    let url = match[0];
-    // Special case when the URL ends with ">" or "<"
+  while ((match = webLinkRegex.exec(content))) {
+    const url = match[0];
+    // 处理特殊情况：末尾为 '>' 或 '<' 时排除该字符
     const lastChars = url.slice(-1);
-    const endsWithGtLt = ['>', '<'].indexOf(lastChars) !== -1;
+    const endsWithGtLt = lastChars === '>' || lastChars === '<';
     const len = endsWithGtLt ? url.length - 1 : url.length;
-    const anchor = document.createElement('a');
-    url = url.slice(0, len);
-    anchor.href = url.startsWith('www.') ? 'https://' + url : url;
-    anchor.rel = 'noopener';
-    anchor.target = '_blank';
-    anchor.appendChild(document.createTextNode(url.slice(0, len)));
-    nodes.push(anchor);
-    lastIndex = match.index + len;
-  }
-  if (lastIndex !== content.length) {
-    nodes.push(document.createTextNode(content.slice(lastIndex, content.length)));
+    const start = match.index;
+    const end = match.index + len;
+    ranges.push({ start, end, url: url.slice(0, len) });
+    // 正则使用全局标志 'g'，exec 会自动推进位置
   }
-  return nodes;
+  return ranges;
 }
-export interface IRenderOptions {
-  /**
-   * The host node for the text content.
-   */
-  host: HTMLElement;
-
-  /**
-   * The html sanitizer for untrusted source.
-   */
-  sanitizer: ISanitizer;
 
-  /**
-   * The source text to render.
-   */
-  source: string;
-}
 /**
  * Split a shallow node (node without nested nodes inside) at a given text content position.
  *