SuperAPI AI 工具集

markstream-custom-components

前端与建站

查看项目

更新于 10-16 09:28

技能介绍

用途:用于定制 Markstream 中特定节点或可信自定义标签的渲染,而无需替换解析器或污染全局渲染器状态。可替换 image、link、code_block、mermaid、inline_code 等内置节点,也可渲染如 thinking 这类可信标签,或将覆盖范围限定在单个渲染器或应用内。仅当需要重排 token 或 AST 时才使用解析器转换。

用法与流程:改动依赖或源码前,先检查现有包管理器与项目约定,预览预期修改并取得用户明确同意。将改动归类为内置覆盖、可信标签或解析器转换。优先使用作用域映射:Vue、Vue 2、Svelte、Angular 可用 setCustomComponents(customId, mapping);Svelte 和 Angular 也可传渲染器本地映射。React 中解析器支撑的节点优先用 streamingComponents,需保留净化属性加子节点时用 htmlComponents。先处理叶子节点,再处理需保留子节点的容器。含 Markdown 的可信标签体应使用同一允许列表的嵌套渲染器,且不要再加第二个平滑流式循环。保留节点与加载 props、身份键、作用域 ID、主题状态及异步图表的预览高度估算。清理时移除临时作用域注册,并验证重复与嵌套标签。

示例:以 markstream-react 导入 MarkdownRender、NodeComponentProps、setCustomComponents 与样式,定义 ThinkingNode,通过 setCustomComponents('assistant-panel', { thinking: ThinkingNode }) 注册,在 MarkdownRender 上传入 content、customId="assistant-panel"、customHtmlTags={['thinking']} 与 htmlPolicy="safe"。

限制:组件覆盖无法复现任意 remark/rehype 转换;容器覆盖需谨慎处理子节点渲染与无障碍;各框架注册 API 不可互换。安全方面:自定义 HTML 类标签只能视为可信输入,保持安全 HTML 开启,不要将未净化属性传入宿主组件。