Json viewer #2561
Json viewer #2561
Conversation
| ```jsx import | ||
| import { JsonViewer } from '@douyinfe/semi-ui'; | ||
| ``` | ||
|
|
There was a problem hiding this comment.
后续加一个 【使用场景】
描述一下与直接使用 Monaco的区别
什么场景建议使用 Mocaco
什么场景建议使用 JsonViewer
There was a problem hiding this comment.
以及 我们底层依赖什么包来做什么事情，例如使用 jsonc-parser来干什么，而在什么地方做了额外的改动处理。（2-3句话简短解释就行）
| @@ -242,5 +243,6 @@ | |||
| "stylelint" | |||
| ] | |||
| }, | |||
| "license": "MIT" | |||
| "license": "MIT", | |||
| "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" | |||
There was a problem hiding this comment.
这个pacakgeMannger 这行不要带上去
| }); | ||
| }); | ||
|
|
||
| this._view.contentDom.addEventListener('beforeinput', (e: InputEvent) => { |
| @@ -0,0 +1,10 @@ | |||
|
|
|||
|
|
|||
| import BaseFoundation from '../base/foundation'; | |||
There was a problem hiding this comment.
index.ts 可以直接跟 foudation 合成一个文件。就叫 foundation就行。
| } | ||
|
|
||
| render() { | ||
| return <div style={this.getStyle()} ref={this.editorRef}></div>; |
There was a problem hiding this comment.
最外层元素统一暴露 className、style 的 api，对齐其他组件。
一些 method可以通过 ref 暴露出来。例如主动格式化、折叠什么的。
packages/semi-foundation/jsonViewer/core/common/characterClassifier.ts
Outdated
Show resolved
Hide resolved
packages/semi-foundation/jsonViewer/core/json-viewer/jsonViewer.ts
Outdated
Show resolved
Hide resolved
content/show/jsonviewer/index.md
Outdated
| | 属性 | 说明 | 类型 | 默认值 | | ||
| |-------------------|------------------------------------------------|---------------------------------|-----------| | ||
| | lineHeight | 设置行高 属性 | number | 20 | | ||
| | autoHeight | 设置是否自动换行 属性 | boolean | true | |
There was a problem hiding this comment.
autoHeight 作为是否自动换行的 api 名字是不是有点抽象？
| | width | 设置宽度 属性 | number | - | | ||
| | options | 设置格式化配置 属性 | JsonViewerOptions | - | | ||
| | onChange | 设置 value 变化回调 属性 | (value: string) => void | - | | ||
| | onValueHover | 设置 value 悬浮回调 属性 | ({value: string, target: HTMLElement}) => HTMLElement | - | |
There was a problem hiding this comment.
这个是你 storybook 里写的 hoverHandler 吗？
| e.preventDefault(); | ||
| let insertText = ''; | ||
|
|
||
| if (this._view.options?.formatOptions?.insertSpaces) { |
There was a problem hiding this comment.
为啥要在 this._view.options?.formatOptions?.insertSpaces 为 true 的时候才能让 Tab 自定义缩进生效？
There was a problem hiding this comment.
另外我试了一下，给 formatOptions { tabSize: 8 } 的默认值以后，insertSpaces 的值也不是 true 而是 undefined
There was a problem hiding this comment.
tabSize表示缩进的距离，insertSpaces为true表示用空格表示缩进，比如4个空格，为fasle表示用制表符缩进，不过我发现逻辑存在问题，我后续修一下
| "lib/*" | ||
| ], | ||
| "dependencies": { | ||
| "esbuild": "0.24.0", |
There was a problem hiding this comment.
esbuild挪到 devDepenencies里去吧，用这个的用户不需要装 esbuild
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit bf4630c:
|
中文模板 / Chinese Template
What kind of change does this PR introduce? (check at least one)
PR description
Fixes #
Changelog
🇨🇳 Chinese
🇺🇸 English
Checklist
Other
Additional information