JsonViewer
JSON 预览 / 编辑器：底层直接引 Semi 自研框架无关内核 @douyinfe/semi-json-viewer-core（仿 VS Code text-buffer，虚拟化大数据、jsonc-parser 解析），内核经动态 import 异步加载（不进主 bundle，加载中 loading 态）。非受控（value 仅初始，不回写）。语法高亮全走 token（key/string/number/boolean·null/标点/注释/行号/搜索命中）深浅双主题。搜索/替换工具条由 Svelte 壳自渲染（内核仅提供检索 API），文案/aria 走 i18n。ref 暴露 getValue/format/search/getSearchResults/prevSearch/nextSearch/replace/replaceAll。options 支持 lineHeight/autoWrap/readOnly/customRenderRule（仅只读经 customRender 事件透出）/formatOptions。renderSearchButton 自定义搜索按钮（对齐 Semi ≥2.95）。
如何引入
import { JsonViewer } from '@chenzy-design/svelte';基础用法
value 传入 JSON 字符串，展示与编辑（非受控）。
只读
options.readOnly 开启只读模式。
格式化配置
options.formatOptions 控制缩进与换行。
API 参考
JsonViewer
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 展示内容（JSON 字符串）。非受控：仅初始建实例，后续变化不重建（对齐 Semi） | string | '' |
height | 高度（number 记为 px） | number | string | undefined |
width | 宽度（number 记为 px） | number | string | undefined |
showSearch | 是否显示搜索入口 | boolean | true |
renderSearchButton | 自定义渲染搜索按钮（传入默认按钮 snippet 与控制句柄，对齐 Semi ≥2.95） | Snippet<[Snippet, SearchControls]> | undefined |
options | 编辑器配置：lineHeight(20)/autoWrap(true)/readOnly(false)/customRenderRule/formatOptions | JsonViewerOptions | undefined |
onChange | 内容变化回调（非受控，不回写 value） | (value: string) => void | undefined |
onCustomRender | 只读模式命中 customRenderRule 时透出 customRenderMap | (map: Map<HTMLElement, unknown>) => void | undefined |
class | 自定义类名 | string | undefined |
style | 自定义内联样式 | string | undefined |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onChange | — | 内容变化（非受控，不回写 value） |
onCustomRender | — | 只读 + customRenderRule 命中，透出 customRenderMap |
Methods
| 属性 | 类型 | 说明 |
|---|---|---|
getValue | — | 取当前 JSON 字符串 |
format | — | 格式化当前内容 |
search | — | 检索文本 |
getSearchResults | — | 取当前搜索命中列表 |
prevSearch | — | 跳到上一个匹配 |
nextSearch | — | 跳到下一个匹配 |
replace | — | 替换当前命中（只读时忽略） |
replaceAll | — | 替换全部命中（只读时忽略） |
Accessibility
- 编辑器容器 role=textbox + aria-multiline + aria-label（i18n）；只读时 aria-readonly；容器 tabindex=0 可聚焦。搜索/替换工具条按钮均带 aria-label（i18n），选项切换按钮带 aria-pressed。编辑键位由内核处理，不覆盖。
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-color-json-viewer-bg | var(--cd-color-fill-0) | 编辑器容器背景 |
--cd-color-json-viewer-border | var(--cd-color-border) | 编辑器容器边框色 |
--cd-color-json-viewer-comment | var(--cd-color-text-3) | comment-*：JSONC 注释 |
--cd-color-json-viewer-error | var(--cd-color-danger) | error：语法错误提示色 |
--cd-color-json-viewer-key | var(--cd-color-primary) | string-key：对象键名 |
--cd-color-json-viewer-keyword | var(--cd-color-link) | keyword：布尔与 null（内核归一同一 scope） |
--cd-color-json-viewer-line-number | var(--cd-color-text-3) | line-number：行号文字色 |
--cd-color-json-viewer-line-number-bg | var(--cd-color-fill-0) | line-number-container：行号列背景 |
--cd-color-json-viewer-number | var(--cd-color-warning) | number：数字值 |
--cd-color-json-viewer-punctuation | var(--cd-color-text-2) | delimiter-*：括号/逗号/冒号等标点 |