@king-design/vue 3.7.0 → 3.8.0-beta.0

package/components/xmarkdown/markdown/renderer.js

@@ -0,0 +1,461 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+/**
+ * Markdown 渲染器
+ *
+ * 基于 markdown-it 生成 token，再转换为 Intact VNode。
+ */
+import MarkdownIt from 'markdown-it';
+import { registerHighlightLanguages, normalizeLanguage } from './highlight';
+import { renderCodeBlock } from './codeblock';
+import { renderMermaidBlock } from './mermaid';
+import { createElementNode, createKeyGenerator, createTextNode, parseHtmlFragment, parseSanitizedHtmlFragment, renderTreeNodes } from './renderTree';
+// 初始化语法高亮语言
+registerHighlightLanguages();
+/**
+ * 创建 Markdown 渲染器
+ */
+export function createMarkdownRenderer(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  var prefixCls = options.prefixCls || 'k';
+  // 创建 Markdown-it 实例
+  var markdown = new MarkdownIt({
+    html: !!options.allowHtml,
+    linkify: true,
+    breaks: true,
+    typographer: true,
+    langPrefix: 'language-'
+  });
+  // 启用数学公式渲染
+  if (options.enableFormula !== false && options.formulaRuntime) {
+    markdown.use(options.formulaRuntime.texmath, {
+      engine: options.formulaRuntime.katex,
+      delimiters: options.formulaDelimiters || ['dollars', 'beg_end'],
+      katexOptions: {
+        throwOnError: false,
+        strict: 'ignore',
+        macros: options.formulaMacros || {}
+      }
+    });
+  }
+  // 应用 Markdown 扩展插件
+  applyMarkdownPlugins(markdown, options.plugins);
+  return {
+    // 渲染整段 Markdown 源码
+    render: function render(source) {
+      return renderSource(source, createDocumentKey(source));
+    },
+    // 解析顶层块级源码片段
+    parseBlocks: function parseBlocks(source) {
+      return parseSourceBlocks(source);
+    },
+    // 渲染单个块级源码片段
+    renderBlock: function renderBlock(block, registerBlock) {
+      var result = renderSource(block.source, block.key, registerBlock);
+      return {
+        key: block.key,
+        source: block.source,
+        nodes: result.nodes,
+        blocks: result.blocks
+      };
+    }
+  };
+  /**
+   * 渲染整段 Markdown 源码
+   */
+  function renderSource(source, keySeed, registerBlock) {
+    var nextKey = createKeyGenerator("xmarkdown-" + keySeed);
+    var _createRenderEnv = createRenderEnv(registerBlock),
+      env = _createRenderEnv.env,
+      blocks = _createRenderEnv.blocks;
+    // 解析 Markdown 源码
+    var tokens = markdown.parse(source || '', env);
+    // 将 tokens 转换为渲染树节点
+    var builtNodes = buildNodesFromTokens(tokens, options, nextKey, env);
+    // 应用渲染树转换插件
+    var nodes = applyRenderTreeTransforms(builtNodes, source, options);
+    return {
+      nodes: renderTreeNodes(nodes, options),
+      blocks: blocks
+    };
+  }
+  /**
+   * 解析顶层块级源码片段
+   */
+  function parseSourceBlocks(source) {
+    var normalized = normalizeSource(source);
+    if (!normalized) return [];
+    if (!_trimInstanceProperty(normalized).call(normalized)) return [];
+    var tokens = markdown.parse(normalized, {});
+    var ranges = collectTopLevelBlockRanges(tokens);
+    if (!ranges.length) {
+      return [{
+        key: createBlockKey('document', 0, normalized),
+        source: normalized
+      }];
+    }
+    var lines = normalized.split('\n');
+    return _mapInstanceProperty(ranges).call(ranges, function (_ref, index) {
+      var type = _ref.type,
+        start = _ref.start,
+        end = _ref.end;
+      var blockSource = _sliceInstanceProperty(lines).call(lines, start, end).join('\n');
+      return {
+        key: createBlockKey(type, index, blockSource),
+        source: blockSource
+      };
+    });
+  }
+  /**
+   * 将 block token 转成渲染树节点
+   */
+  function buildNodesFromTokens(tokens, rendererOptions, nextNodeKey, env) {
+    var root = createElementNode('div', {}, [], nextNodeKey('root'));
+    var stack = [root];
+    for (var i = 0; i < tokens.length; i++) {
+      var token = tokens[i];
+      var parent = stack[stack.length - 1];
+      if (token.type === 'inline') {
+        var _parent$children;
+        (_parent$children = parent.children).push.apply(_parent$children, buildInlineNodes(token.children || [], rendererOptions, nextNodeKey));
+        continue;
+      }
+      if (token.type === 'fence' || token.type === 'code_block') {
+        var info = String(token.info || '');
+        var language = normalizeLanguage(info);
+        var source = String(token.content || '').replace(/\n$/, '');
+        parent.children.push(language === 'mermaid' && rendererOptions.enableMermaid !== false ? renderMermaidBlock(source, info, rendererOptions, env) : renderCodeBlock(source, info, rendererOptions, env));
+        continue;
+      }
+      if (token.type === 'math_block') {
+        var _parent$children2;
+        (_parent$children2 = parent.children).push.apply(_parent$children2, renderMathNodes(String(token.content || ''), true, rendererOptions, nextNodeKey));
+        continue;
+      }
+      if (token.type === 'html_block') {
+        var _parent$children3;
+        (_parent$children3 = parent.children).push.apply(_parent$children3, parseSanitizedHtmlFragment(String(token.content || ''), rendererOptions, nextNodeKey));
+        continue;
+      }
+      if (token.type === 'hr') {
+        parent.children.push(createElementNode('hr', tokenAttrsToObject(token), [], nextNodeKey('hr')));
+        continue;
+      }
+      if (token.nesting === 1) {
+        if (token.type === 'table_open') {
+          var wrapper = createElementNode('div', {
+            className: prefixCls + "-xmarkdown-table-wrap"
+          }, [], nextNodeKey('table-wrap'));
+          var table = createElementNode('table', tokenAttrsToObject(token), [], nextNodeKey('table'));
+          wrapper.children.push(table);
+          parent.children.push(wrapper);
+          stack.push(wrapper);
+          stack.push(table);
+          continue;
+        }
+        var element = createElementNode(token.tag, tokenAttrsToObject(token), [], nextNodeKey(token.tag));
+        parent.children.push(element);
+        stack.push(element);
+        continue;
+      }
+      if (token.nesting === -1) {
+        if (token.type === 'table_close') {
+          stack.pop();
+          stack.pop();
+          continue;
+        }
+        stack.pop();
+      }
+    }
+    return root.children;
+  }
+  /**
+   * 将 inline token 转成渲染树节点
+   */
+  function buildInlineNodes(tokens, rendererOptions, nextNodeKey) {
+    var root = createElementNode('span', {}, [], nextNodeKey('inline-root'));
+    var stack = [root];
+    for (var i = 0; i < tokens.length; i++) {
+      var token = tokens[i];
+      var parent = stack[stack.length - 1];
+      if (token.type === 'text') {
+        parent.children.push(createTextNode(String(token.content || '')));
+        continue;
+      }
+      if (token.type === 'softbreak' || token.type === 'hardbreak') {
+        parent.children.push(createElementNode('br', {}, [], nextNodeKey('br')));
+        continue;
+      }
+      if (token.type === 'code_inline') {
+        parent.children.push(createElementNode('code', {
+          className: prefixCls + "-xmarkdown-inline-code"
+        }, [createTextNode(String(token.content || ''))], nextNodeKey('code-inline')));
+        continue;
+      }
+      if (token.type === 'image') {
+        parent.children.push(createElementNode('img', _extends({}, tokenAttrsToObject(token), {
+          alt: token.content || (token.attrGet == null ? void 0 : token.attrGet('alt')) || ''
+        }), [], nextNodeKey('image')));
+        continue;
+      }
+      if (token.type === 'math_inline' || token.type === 'math_inline_double') {
+        var _parent$children4;
+        (_parent$children4 = parent.children).push.apply(_parent$children4, renderMathNodes(String(token.content || ''), token.type !== 'math_inline', rendererOptions, nextNodeKey));
+        continue;
+      }
+      if (token.type === 'html_inline') {
+        var _parent$children6;
+        var collected = collectInlineHtmlFragment(tokens, i, rendererOptions, nextNodeKey);
+        if (collected) {
+          var _parent$children5;
+          (_parent$children5 = parent.children).push.apply(_parent$children5, collected.nodes);
+          i = collected.endIndex;
+          continue;
+        }
+        (_parent$children6 = parent.children).push.apply(_parent$children6, parseSanitizedHtmlFragment(String(token.content || ''), rendererOptions, nextNodeKey));
+        continue;
+      }
+      if (token.nesting === 1) {
+        var element = createElementNode(token.tag, tokenAttrsToObject(token), [], nextNodeKey(token.tag || token.type));
+        parent.children.push(element);
+        stack.push(element);
+        continue;
+      }
+      if (token.nesting === -1) {
+        stack.pop();
+      }
+    }
+    return root.children;
+  }
+  /**
+   * 收集成对的 inline HTML 片段
+   */
+  function collectInlineHtmlFragment(tokens, startIndex, rendererOptions, nextNodeKey) {
+    var current = parseHtmlToken(String(tokens[startIndex].content || ''));
+    if (!current || current.kind !== 'open') return null;
+    var depth = 1;
+    var fragment = String(tokens[startIndex].content || '');
+    for (var i = startIndex + 1; i < tokens.length; i++) {
+      var token = tokens[i];
+      fragment += getInlineTokenRawContent(token);
+      if (token.type === 'html_inline') {
+        var next = parseHtmlToken(String(token.content || ''));
+        if (next && next.tag === current.tag) {
+          if (next.kind === 'open') {
+            depth++;
+          } else if (next.kind === 'close') {
+            depth--;
+          }
+        }
+      }
+      if (depth === 0) {
+        return {
+          endIndex: i,
+          nodes: parseSanitizedHtmlFragment(fragment, rendererOptions, nextNodeKey)
+        };
+      }
+    }
+    return null;
+  }
+}
+/**
+ * 应用 Markdown 扩展插件
+ */
+function applyMarkdownPlugins(markdown, plugins) {
+  if (!plugins || !plugins.length) return;
+  plugins.forEach(function (plugin) {
+    plugin.extendMarkdown == null || plugin.extendMarkdown(markdown);
+  });
+}
+/**
+ * 应用渲染树转换插件
+ */
+function applyRenderTreeTransforms(nodes, source, options) {
+  var plugins = options.plugins;
+  if (!plugins || !plugins.length) return nodes;
+  var nextNodes = nodes;
+  plugins.forEach(function (plugin) {
+    if (!plugin.transformRenderTree) return;
+    var transformed = plugin.transformRenderTree(nextNodes, {
+      source: source,
+      options: options
+    });
+    if (transformed) {
+      nextNodes = transformed;
+    }
+  });
+  return nextNodes;
+}
+/**
+ * 创建渲染期上下文
+ */
+function createRenderEnv(_registerBlock) {
+  var blocks = {};
+  var blockId = 0;
+  return {
+    env: {
+      registerBlock: function registerBlock(type, blockSource, language) {
+        var id = _registerBlock ? _registerBlock(type, blockSource, language) : "xmarkdown-block-" + blockId++;
+        blocks[id] = {
+          id: id,
+          type: type,
+          source: blockSource,
+          language: language
+        };
+        return id;
+      }
+    },
+    blocks: blocks
+  };
+}
+/**
+ * 渲染数学公式节点
+ */
+function renderMathNodes(source, displayMode, options, nextKey) {
+  var runtime = options.formulaRuntime;
+  if (!runtime || !runtime.katex || typeof runtime.katex.renderToString !== 'function') {
+    return [createTextNode(source)];
+  }
+  try {
+    var html = runtime.katex.renderToString(source, {
+      displayMode: displayMode,
+      throwOnError: false,
+      strict: 'ignore',
+      macros: options.formulaMacros || {}
+    });
+    return parseHtmlFragment(html, nextKey);
+  } catch (e) {
+    return [createTextNode(source)];
+  }
+}
+/**
+ * 提取 token 属性对象
+ */
+function tokenAttrsToObject(token) {
+  if (!token || !Array.isArray(token.attrs)) return {};
+  return token.attrs.reduce(function (result, _ref2) {
+    var name = _ref2[0],
+      value = _ref2[1];
+    result[name === 'class' ? 'className' : name] = value;
+    return result;
+  }, {});
+}
+/**
+ * 解析 HTML token 的标签信息
+ */
+function parseHtmlToken(content) {
+  var normalized = _trimInstanceProperty(content).call(content);
+  if (!normalized) return null;
+  var closeMatch = normalized.match(/^<\/([A-Za-z][\w-]*)\s*>$/);
+  if (closeMatch) {
+    return {
+      kind: 'close',
+      tag: closeMatch[1].toLowerCase()
+    };
+  }
+  var openMatch = normalized.match(/^<([A-Za-z][\w-]*)([\s\S]*?)>$/);
+  if (!openMatch) return null;
+  return {
+    kind: /\/>$/.test(normalized) ? 'self' : 'open',
+    tag: openMatch[1].toLowerCase()
+  };
+}
+/**
+ * 还原 inline token 的原始文本
+ */
+function getInlineTokenRawContent(token) {
+  if (!token) return '';
+  switch (token.type) {
+    case 'text':
+      return String(token.content || '');
+    case 'softbreak':
+    case 'hardbreak':
+      return '\n';
+    case 'html_inline':
+      return String(token.content || '');
+    default:
+      return String(token.content || '');
+  }
+}
+/**
+ * 收集顶层 block 的行号范围
+ */
+function collectTopLevelBlockRanges(tokens) {
+  var ranges = [];
+  var depth = 0;
+  tokens.forEach(function (token) {
+    var atTopLevel = depth === 0;
+    if (atTopLevel) {
+      var range = getTokenLineRange(token);
+      if (range) {
+        ranges.push(_extends({
+          type: token.type || token.tag || 'block'
+        }, range));
+      }
+    }
+    if (token.nesting === 1) {
+      depth++;
+    } else if (token.nesting === -1) {
+      depth = Math.max(depth - 1, 0);
+    }
+  });
+  return mergeAdjacentRanges(ranges);
+}
+/**
+ * 获取 token 对应的源码行号范围
+ */
+function getTokenLineRange(token) {
+  if (token && Array.isArray(_mapInstanceProperty(token)) && _mapInstanceProperty(token).length === 2) {
+    return {
+      start: _mapInstanceProperty(token)[0],
+      end: _mapInstanceProperty(token)[1]
+    };
+  }
+  return null;
+}
+/**
+ * 合并重复的顶层 block 范围
+ */
+function mergeAdjacentRanges(ranges) {
+  var merged = [];
+  ranges.forEach(function (range) {
+    var previous = merged[merged.length - 1];
+    if (!previous || previous.start !== range.start || previous.end !== range.end) {
+      merged.push(range);
+    }
+  });
+  return merged;
+}
+/**
+ * 生成整段文档的渲染 key
+ */
+function createDocumentKey(source) {
+  return "document-" + hashString(normalizeSource(source));
+}
+/**
+ * 生成顶层 block 的稳定 key
+ */
+function createBlockKey(type, index, source) {
+  return type + "-" + index + "-" + hashString(source);
+}
+/**
+ * 统一标准化 Markdown 源码
+ */
+function normalizeSource(source) {
+  return String(source || '').replace(/\r\n?/g, '\n');
+}
+/**
+ * 生成轻量级字符串哈希
+ */
+function hashString(source) {
+  var hash = 0;
+  for (var i = 0; i < source.length; i++) {
+    hash = hash * 33 + source.charCodeAt(i) >>> 0;
+  }
+  return hash.toString(36);
+}
+export { renderCodeBlock, renderMermaidBlock };

package/components/xmarkdown/markdown/streaming.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 流式渲染
+ */
+import type { OpenFenceInfo, StreamingMarkdownSegments, XMarkdownRenderOptions, XMarkdownStreamingTailCache } from './types';
+/**
+ * 创建流式尾部缓存
+ */
+export declare function createStreamingTailCache(): XMarkdownStreamingTailCache;
+/**
+ * 判断源码中是否包含公式语法
+ */
+export declare function containsFormulaSyntax(source: string, delimiters?: string | string[]): boolean;
+/**
+ * 将流式 Markdown 拆分为 stable 和 tail 两段
+ */
+export declare function splitMarkdownForStreaming(source: string, cache?: XMarkdownStreamingTailCache): StreamingMarkdownSegments;
+/**
+ * 渲染尚未进入 stable 区的尾部内容
+ */
+export declare function renderMarkdownTail(tailText: string, openFence?: OpenFenceInfo | null, options?: XMarkdownRenderOptions): any[];
+/**
+ * 转义 tail 中的 HTML 文本
+ */
+export declare function escapeMarkdownHtml(text: string): string;