feat: add new component Json viewer (#2561)

---------
Co-authored-by: 田丰 <[email protected]>
Co-authored-by: 代强 <[email protected]>
Co-authored-by: zhangyumei.0319 <[email protected]>
Co-authored-by: point.halo <[email protected]>

.eslintrc.js

@@ -121,6 +121,8 @@ module.exports = {
                 "space-infix-ops": ["error", { "int32Hint": false }],
                 'space-before-blocks': ['error', 'always'],
                 "space-infix-ops": "error",
+                '@typescript-eslint/prefer-as-const': 'off',
+                '@typescript-eslint/no-namespace': 'off',
                 "@typescript-eslint/type-annotation-spacing": ['error', {"after": true}],
                 "@typescript-eslint/member-delimiter-style": [
                     "error",

content/feedback/banner/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 79
+order: 80
 category: Feedback
 title:  Banner
 subTitle: Banner

content/feedback/banner/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 79
+order: 80
 category: 反馈类
 title:  Banner 通知横幅
 icon: doc-banner

content/feedback/notification/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 80
+order: 81
 category: Feedback
 title:  Notification
 subTitle: Notification

content/feedback/notification/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 80
+order: 81
 category: 反馈类
 title: Notification 通知
 icon: doc-notification

content/feedback/popconfirm/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 81
+order: 82
 category: Feedback
 title:  Popconfirm
 subTitle: Popconfirm

content/feedback/popconfirm/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 81
+order: 82
 category: 反馈类
 title:  Popconfirm 气泡确认框
 icon: doc-popconfirm

content/feedback/progress/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 82
+order: 83
 category: Feedback
 title: Progress
 subTitle: Progress

content/feedback/progress/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 82
+order: 83
 category: 反馈类
 title: Progress 进度条
 icon: doc-progress

content/feedback/skeleton/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 83
+order: 84
 category: Feedback
 title: Skeleton
 subTitle: Skeleton

content/feedback/skeleton/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 83
+order: 84
 category: 反馈类
 title: Skeleton 骨架屏
 icon: doc-skeleton

content/feedback/spin/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 84
+order: 85
 category: Feedback
 title: Spin
 subTitle: Spin

content/feedback/spin/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 84
+order: 85
 category: 反馈类
 title: Spin 加载器
 icon: doc-spin

content/feedback/toast/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 85
+order: 86
 category: Feedback
 title: Toast
 subTitle: Toast

content/feedback/toast/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 85
+order: 86
 category: 反馈类
 title: Toast 提示
 icon: doc-toast

content/input/autocomplete/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 29
+order: 30
 category: Input
 title: AutoComplete
 icon: doc-autocomplete

content/input/autocomplete/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 29
+order: 30
 category: 输入类
 title: AutoComplete 自动完成
 icon: doc-autocomplete

content/input/cascader/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 30
+order: 31
 category: Input
 title:  Cascader
 subTitle: Cascade

content/input/cascader/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 30
+order: 31
 category: 输入类
 title:  Cascader 级联选择
 icon: doc-cascader

content/input/checkbox/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 31
+order: 32
 category: Input
 title:  Checkbox
 subTitle: Checkbox

content/input/checkbox/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 31
+order: 32
 category: 输入类
 title: Checkbox 复选框
 icon: doc-checkbox

content/input/colorpicker/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 32
+order: 33
 category: Input
 title: ColorPicker
 icon: doc-colorPlatteNew

content/input/colorpicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 32
+order: 33
 category: 输入类
 title: ColorPicker 颜色选择器
 icon: doc-colorPlatteNew

content/input/datepicker/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 33
+order: 34
 category: Input
 title: DatePicker
 subTitle: Date Selector

content/input/datepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 33
+order: 34
 category: 输入类
 title: DatePicker 日期选择器
 icon: doc-datepicker

content/input/form/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 34
+order: 35
 category: Input
 title:  Form
 subTitle: Form

content/input/form/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 34
+order: 35
 category: 输入类
 title:  Form 表单
 icon: doc-form

content/input/input/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 35
+order: 36
 category: Input
 title:  Input
 subTitle: Input

content/input/input/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 35
+order: 36
 category: 输入类
 title:  Input 输入框
 icon: doc-input

content/input/inputnumber/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 36
+order: 37
 category: Input
 title:  InputNumber
 subTitle: InputNumber

content/input/inputnumber/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 36
+order: 37
 category: 输入类
 title: InputNumber 数字输入框
 icon: doc-inputnumber

content/input/pincode/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 37
+order: 38
 category: Input
 title: PinCode
 icon: doc-pincode

content/input/pincode/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 37
+order: 38
 category: 输入类
 title: PinCode 验证码输入
 icon: doc-pincode

content/input/radio/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 38
+order: 39
 category: Input
 title: Radio
 subTitle: Radio

content/input/radio/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 38
+order: 39
 category: 输入类
 title: Radio 单选框
 icon: doc-radio

content/input/rating/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 39
+order: 40
 category: Input
 title: Rating
 subTitle: Rating

content/input/rating/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 39
+order: 40
 category: 输入类
 title:  Rating 评分
 icon: doc-rating

content/input/select/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 40
+order: 41
 category: Input
 title: Select
 subTitle: Select

content/input/select/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 40
+order: 41
 category: 输入类
 title: Select 选择器
 icon: doc-select

content/input/slider/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 41
+order: 42
 category: Input
 title:  Slider
 subTitle: Slider

content/input/slider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 41
+order: 42
 category: 输入类
 title:  Slider 滑动选择器
 icon: doc-slider

content/input/switch/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 42
+order: 43
 category: Input
 title: Switch
 subTitle: Switch

content/input/switch/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 42
+order: 43
 category: 输入类
 title: Switch 开关
 icon: doc-switch

content/input/taginput/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 43
+order: 44
 category: Input
 title: TagInput
 subTitle: TagInput

content/input/taginput/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 43
+order: 44
 category: 输入类
 title: TagInput 标签输入框
 icon: doc-tagInput

content/input/timepicker/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 44
+order: 45
 category: Input
 title: TimePicker
 subTitle: TimePicker

content/input/timepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 44
+order: 45
 category: 输入类
 title: TimePicker 时间选择器
 icon: doc-timepicker

content/input/transfer/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 45
+order: 46
 category: Input
 title: Transfer
 icon: doc-transfer

content/input/transfer/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 45
+order: 46
 category: 输入类
 title: Transfer 穿梭框
 icon: doc-transfer

content/input/treeselect/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 46
+order: 47
 category: Input
 title:  TreeSelect
 subTitle: TreeSelect

content/input/treeselect/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 46
+order: 47
 category: 输入类
 title: TreeSelect 树选择器
 icon: doc-treeselect

content/input/upload/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 47
+order: 48
 category: Input
 title: Upload
 icon: doc-upload

content/input/upload/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 47
+order: 48
 category: 输入类
 title: Upload 上传
 icon: doc-upload

content/navigation/anchor/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 48
+order: 49
 category: Navigation
 title:  Anchor
 subTitle: Anchor

content/navigation/anchor/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 48
+order: 49
 category: 导航类
 title:  Anchor 锚点
 icon: doc-anchor

content/navigation/backtop/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 49
+order: 50
 category: Navigation
 title: BackTop
 subTitle: BackTop

content/navigation/backtop/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 49
+order: 50
 category: 导航类
 title: BackTop 回到顶部
 icon: doc-backtop

content/navigation/breadcrumb/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 50
+order: 51
 category: Navigation
 title:  Breadcrumb
 subTitle: Breadcrumb

content/navigation/breadcrumb/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 50
+order: 51
 category: 导航类
 title:  Breadcrumb 面包屑
 icon: doc-breadcrumb

content/navigation/navigation/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 51
+order: 52
 category: Navigation
 title:  Navigation
 subTitle: Navigation

content/navigation/navigation/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 51
+order: 52
 category: 导航类
 title:  Navigation 导航
 icon: doc-navigation

content/navigation/pagination/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 52
+order: 53
 category: Navigation
 title:  Pagination
 subTitle: Pagination

content/navigation/pagination/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 52
+order: 53
 category: 导航类
 title:  Pagination 翻页器
 icon: doc-pagination

content/navigation/steps/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 53
+order: 54
 category: Navigation
 title: Steps
 subTitle: Steps

content/navigation/steps/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 53
+order: 54
 category: 导航类
 title:  Steps 步骤
 icon: doc-steps

content/navigation/tabs/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 54
+order: 55
 category: Navigation
 title: Tabs
 subTitle: Tabs

content/navigation/tabs/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 54
+order: 55
 category: 导航类
 title: Tabs 标签栏
 icon: doc-tabs

content/navigation/tree/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 55
+order: 56
 category: Navigation
 title:  Tree
 subTitle: Tree

content/navigation/tree/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 55
+order: 56
 category: 导航类
 title:  Tree 树形控件
 icon: doc-tree

content/order.js

@@ -25,6 +25,7 @@ const order = [
     'codehighlight',
     "markdownrender",
     "dragMove",
+    "jsonviewer",
     'hotkeys',
     "lottie",
     'autocomplete',
@@ -85,7 +86,8 @@ const order = [
     'spin',
     'toast',
     'configprovider',
-    'locale'
+    'locale',
+    'jsonviewer',
 ];
 let { exec } = require('child_process');
 let fs = require('fs');

content/other/configprovider/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 86
+order: 87
 category: Other
 title: ConfigProvider
 icon: doc-configprovider

content/other/configprovider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 86
+order: 87
 category: 其他
 title:  ConfigProvider 全局配置
 icon: doc-configprovider

content/other/locale/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 87
+order: 88
 category: Other
 title: LocaleProvider
 subTitle: LocaleProvider

content/other/locale/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 87
+order: 88
 category: 其他
 title:  LocaleProvider 多语言
 icon: doc-i18n

content/plus/hotkeys/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 27
+order: 28
 category: Plus
 title:  HotKeys
 icon: doc-configprovider

content/plus/hotkeys/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 27
+order: 28
 category: Plus
 title: HotKeys 快捷键
 icon: doc-configprovider

content/plus/jsonviewer/index-en-US.md

@@ -0,0 +1,210 @@
+---
+localeCode: en-US
+order: 27
+category: Plus
+title: JsonViewer
+icon: doc-jsonviewer
+dir: column
+noInline: true
+brief: Used for displaying and editing JSON data
+showNew: true
+---
+
+## When to use
+
+The JsonViewer component can be used for the display and editing of JSON data.
+
+Semi mainly referred to the design concept of the `text-buffer` data structure of [VS Code](https://github.com/microsoft/vscode), reused some utilities and data type definitions (Token parsing, language services, etc.), and implemented the JsonViewer component in combination with our functional/style customization requirements. Visually, it will be more coordinated with other components within the Semi Design system, and it will be more convenient for customized rendering and customization of specific data types.
+
+Compared with directly using MonacoEditor, Semi JsonViewer has additional processing in engineering construction, is simpler to use, and there is no need to pay attention to complex configurations such as Webpack plugins and worker loaders. At the same time, since we only focus on the JSON data format, it is more lightweight. While being ready to use out of the box, it has a smaller size **(📦-96%)**, a more extreme loading speed **(🚀 -53.5%)**, and less memory occupation **(⬇️71.6% reduction)**. For data with five million lines and below, data loading and parsing can be completed within 1 second.
+
+Detailed comparison data can be referred to in the [Performance](#Performance) section.
+
+-   If you only need to preview/edit JSON and don't need to modify other more complex programming languages, we recommend that you choose `JsonViewer`.
+-   If you also need to handle data/code files in other formats and the full capabilities of a code editor (syntax highlighting, code completion, error prompts, complex editing, etc.) are essential and the build product size is not a key concern, we recommend that you choose `Monaco Editor`.
+
+## Demos
+
+### How to import
+
+JsonViewer supported from v2.71.0
+
+```jsx import
+import { JsonViewer } from '@douyinfe/semi-ui';
+```
+
+### Basic Usage
+
+Basic usage of JsonViewer. Pass in the `height` and `width` parameters to set the height, width and initial value of the component. Pass in the JSON string through the `value`.
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import { JsonViewer } from '@douyinfe/semi-ui';
+const data = `{
+    "name": "Semi",
+    "version": "0.0.0"
+}`;
+class SimpleJsonViewer extends React.Component {
+    render() {
+        return (
+            <div style={{ marginBottom: 16 }}>
+                <JsonViewer height={100} width={400} value={data} />
+            </div>
+        );
+    }
+}
+
+render(SimpleJsonViewer);
+```
+
+### Differrent lineHeight
+
+Configure the `lineHeight` parameter of `options` to set a fixed line height (unit: px, default 18).
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import { JsonViewer, Space } from '@douyinfe/semi-ui';
+const data = `{
+    "name": "Semi",
+    "version": "0.0.0"
+}`;
+class SimpleJsonViewerWithLineHeight extends React.Component {
+    render() {
+        return (
+            <div>
+                <div style={{ marginBottom: 20 }}>
+                    <JsonViewer height={100} width={320} value={data} options={{ lineHeight: 20 }} />
+                </div>
+                <div style={{ marginBottom: 20 }}>
+                    <JsonViewer height={120} width={320} value={data} options={{ lineHeight: 24 }} />
+                </div>
+                <div style={{ marginBottom: 20 }}>
+                    <JsonViewer height={120} width={320} value={data} options={{ lineHeight: 26 }} />
+                </div>
+            </div>
+        );
+    }
+}
+
+render(SimpleJsonViewerWithLineHeight);
+```
+
+### Autowrap
+
+Configure the `autoWrap` parameter of `options`. When it is set to `true`, the component will automatically wrap lines according to the length of the content.
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import { JsonViewer } from '@douyinfe/semi-ui';
+const data = `{
+    "name": "Semi",
+    "version": "0.0.0",
+    "description": "Semi Design is a design system that defines a set of mid_back design and front_end basic components."
+}`;
+class SimpleJsonViewerWithAutoWrap extends React.Component {
+    render() {
+        return (
+            <div style={{ marginBottom: 16 }}>
+                <JsonViewer height={120} width={800} value={data} options={{ autoWrap: true }} />
+            </div>
+        );
+    }
+}
+
+render(SimpleJsonViewerWithAutoWrap);
+```
+
+### Format options
+
+Configure `options.formatOptions` to set the formatting configuration of the component.
+
+-   tabSize: number，set the indent size to 4, which means each level of indentation is 4 spaces.
+-   insertSpaces: boolean，when it is true, it means using spaces for indentation, and when it is false, it means using tabs.
+-   eol: string，set the line break character, which can be `\n`，`\r\n`，
+
+```jsx live=true dir="column" noInline=true
+import React, { useRef } from 'react';
+import { JsonViewer, Button } from '@douyinfe/semi-ui';
+const data = `{
+  "name": "Semi",
+  "version": "0.0.0"
+}`;
+function FormatJsonComponent() {
+    const jsonviewerRef = useRef();
+    return (
+        <div>
+            <Button onClick={() => console.log(jsonviewerRef.current.format())}>Manual Format</Button>
+            <div style={{ marginBottom: 16, marginTop: 16 }}>
+                <JsonViewer
+                    ref={jsonviewerRef}
+                    height={100}
+                    width={400}
+                    value={data}
+                    options={{ formatOptions: { tabSize: 4, insertSpaces: true, eol: '\n' } }}
+                />
+            </div>
+        </div>
+    );
+}
+
+render(FormatJsonComponent);
+```
+
+## API Reference
+
+### JsonViewer
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| value | Display content | string | - |
+| height | Height of wrapper DOM | number | - |
+| width | Width of wrapper DOM | number | - |
+| className | className of wrapper DOM | string | - |
+| style | InlineStyle of wrapper DOM | object | - |
+| options | Formatting configuration | JsonViewerOptions | - |
+| onChange | Callback for content change | (value: string) => void | - |
+
+### JsonViewerOptions
+
+| Attribute     | Description                             | Type              | Default |
+| ------------- | --------------------------------------- | ----------------- | ------- |
+| lineHeight    | Height of each line of content, unit:px | number            | 20      |
+| autoWrap      | Whether to wrap lines automatically.    | boolean           | true    |
+| formatOptions | Content format setting                  | FormattingOptions | -       |
+
+### FormattingOptions
+
+| Attribute    | Description                           | Type    | Default |
+| ------------ | ------------------------------------- | ------- | ------- |
+| tabSize      | Indent size. Unit: px                 | number  | 4       |
+| insertSpaces | Whether to use spaces for indentation | boolean | true    |
+| eol          | Line break character                  | string  | '\n'    |
+
+## Methods
+
+Methods bound to the component instance can be called via `ref` to achieve certain special interactions.
+
+| Method     | Description            |
+| ---------- | ---------------------- |
+| getValue() | Get current value      |
+| format()   | Format current content |
+
+### Performance
+
+#### Bundle Size
+
+| Libs Name    | Size      | Size (Gzip) |
+| ------------ | --------- | ----------- |
+| JsonViewer   | 203.14kb  | 51.23kb     |
+| MonacoEditor | 5102.0 KB | 1322.7 KB   |
+
+#### Time for rendering data of different magnitudes.
+
+> For details on the generation method of the test data, please refer to [URL](https://github.com/DouyinFE/semi-design/blob/main/packages/semi-ui/jsonViewer/_story/jsonViewer.stories.jsx)  
+> When the data volume exceeds 500,000 lines, ReactMonacoEditor turns off highlighting and other behaviors by default, and the data comparison does not follow the principle of a single variable.
+
+| Libs Name | 1k lines | 5k lines | 10 thousand lines | 100 thousand lines | 500 thousand lines | 1 million lines | 3 million lines |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| JsonViewer | 30.42ms | 30.66ms | 36.87ms | 52.73ms | 111.02ms | 178.81ms | 506.25ms |
+| ReactMonacoEditor | 72.01ms | 73.76ms | 76.64ms | 97.89ms | 133.31ms | 202.79ms | 495.53ms |
+| Performance improvement | 57.70% | 58.41% | 51.87% | 46.11% | - | - | - |

content/plus/jsonviewer/index.md

@@ -0,0 +1,206 @@
+---
+localeCode: zh-CN
+order: 27
+category: Plus
+title: JsonViewer Json编辑器
+icon: doc-jsonviewer
+dir: column
+noInline: true
+brief: 用于展示和编辑 JSON 数据
+showNew: true
+---
+
+## 使用场景
+JsonViewer 组件可用于 JSON 数据的展示与编辑。
+Semi 重点参考了 [VS Code](https://github.com/microsoft/vscode)的 text-buffer 数据结构设计思路，复用了部分 utils与数据类型定义（Token解析，语言服务等），结合我们的功能/样式定制需求，实现了 JsonViewer 组件, 视觉上会与 Semi Design 体系内的其他组件更协调，对于特定数据类型的定制化渲染定制会更方便。  
+相比于直接使用 MonacoEditor，Semi JsonViewer 在工程化构建上做了额外处理，使用更为简单，无需关注 Webpack插件、worker loader等复杂的配置。  
+同时由于我们仅关注 Json 数据格式，更轻量化，在开箱即用的同时，拥有更小的体积**（📦 -96%）** ，更极致的加载速度**（🚀 -53.5%）** ，更少的内存占用**（⬇️ 71.6%）**。  
+对于五百万行及以下的数据，均可以做到1s内完成数据加载与解析。
+详细的对比数据可查阅 [Performance](#Performance) 章节
+- 如果你仅需要对 Json 做预览/编辑，无需对更复杂的其他编程语言作修改，我们建议你选用 JsonViewer
+- 如果你还需要处理其他格式的数据/代码文件，完整的代码编辑器能力（语法高亮、代码不全、错误提示、复杂编辑等）是刚需，构建产物体积不是关注重点，我们建议你选用 Monaco Editor
+
+
+## 代码演示
+
+### 如何引入
+JsonViewer 从 v2.71.0 开始支持
+```jsx import
+import { JsonViewer } from '@douyinfe/semi-ui';
+```
+
+### 基本用法
+
+JsonViewer 的基本用法。传入 height 和 width 参数，设置组件的高度和宽度和初始值。通过 value 传入 Json 字符串
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import { JsonViewer } from '@douyinfe/semi-ui';
+const data = `{
+    "name": "Semi",
+    "version": "0.0.0"
+}`;
+class SimpleJsonViewer extends React.Component {
+    render() {
+        return (
+            <div style={{ marginBottom: 16 }}>
+                <JsonViewer height={100} width={400} value={data} />
+            </div>
+        );
+    }
+}
+
+render(SimpleJsonViewer);
+```
+
+### 设置行高
+
+配置 options 的 lineHeight 参数，设置固定行高（单位：px, 默认 18）。
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import { JsonViewer, Space } from '@douyinfe/semi-ui';
+const data = `{
+    "name": "Semi",
+    "version": "0.0.0"
+}`;
+class SimpleJsonViewerWithLineHeight extends React.Component {
+    render() {
+        return (
+            <div>
+                <div style={{ marginBottom: 12, overflow: 'hidden' }}>
+                    <JsonViewer height={100} width={320} value={data} options={{ lineHeight: 20 }} />
+                </div>
+                <div style={{ marginBottom: 12, overflow: 'hidden' }}>
+                    <JsonViewer height={120} width={320} value={data} options={{ lineHeight: 24 }} />
+                </div>
+                <div style={{ marginBottom: 12, overflow: 'hidden' }}>
+                    <JsonViewer height={120} width={320} value={data} options={{ lineHeight: 26 }} />
+                </div>
+            </div>
+        );
+    }
+}
+
+render(SimpleJsonViewerWithLineHeight);
+```
+
+### 自动换行
+
+配置 options 的 autoWrap 参数，设置为 true 时，组件会根据内容长度自动换行。
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import { JsonViewer } from '@douyinfe/semi-ui';
+const data = `{
+    "name": "Semi",
+    "version": "0.0.0",
+    "description": "Semi Design is a design system that defines a set of mid_back design and front_end basic components."
+}`;
+class SimpleJsonViewerWithAutoWrap extends React.Component {
+    render() {
+        return (
+            <div style={{ marginBottom: 16 }}>
+                <JsonViewer height={120} width={800} value={data} options={{ autoWrap: true }} />
+            </div>
+        );
+    }
+}
+
+render(SimpleJsonViewerWithAutoWrap);
+```
+
+### 格式化配置
+
+配置 options 的 formatOptions 参数，设置组件的格式化配置。
+
+-   tabSize: number，设置缩进大小为4，表示每级缩进 4 个空格
+-   insertSpaces: boolean，true 表示使用空格进行缩进，false 表示使用制表符(Tab)
+-   eol: string，设置换行符，可以是\n，\r\n，
+
+```jsx live=true dir="column" noInline=true
+import React, { useRef } from 'react';
+import { JsonViewer, Button } from '@douyinfe/semi-ui';
+const data = `{
+  "name": "Semi",
+  "version": "0.0.0"
+}`;
+function FormatJsonComponent() {
+    const jsonviewerRef = useRef();
+    return (
+        <div>
+            <Button onClick={() => console.log(jsonviewerRef.current.format())}>格式化</Button>
+            <div style={{ marginBottom: 16, marginTop: 16 }}>
+                <JsonViewer
+                    ref={jsonviewerRef}
+                    height={100}
+                    width={400}
+                    value={data}
+                    options={{ formatOptions: { tabSize: 4, insertSpaces: true, eol: '\n' } }}
+                />
+            </div>
+        </div>
+    );
+}
+
+render(FormatJsonComponent);
+```
+
+
+## API 参考
+
+### JsonViewer
+
+| 属性                | 说明                                             | 类型                              | 默认值    |
+|-------------------|------------------------------------------------|---------------------------------|--------------|
+| value             | 展示内容                                    | string                                  | -  |
+| height            | 高度                                     | number                                  | -  |
+| width             | 宽度                                     | number                                  | -  |
+| className         | 类名                           | string                                  | -   |
+| style             | 内联样式                           | object                                  | -   |
+| options           | 格式化配置                                | JsonViewerOptions                       | -   |
+| onChange          | 内容变化回调                           | (value: string) => void                  | -   |
+
+### JsonViewerOptions
+
+| 属性                | 说明                                          | 类型                              | 默认值    |
+|-------------------|------------------------------------------------|---------------------------------|-----------|
+| lineHeight        | 行高                                    | number                          | 20  |
+| autoWrap        | 是否自动换行                             | boolean                            | true  |
+| formatOptions     | 格式化配置                               | FormattingOptions                |  -  |
+
+### FormattingOptions
+
+| 属性                | 说明                                          | 类型                              | 默认值    |
+|-------------------|------------------------------------------------|---------------------------------|-----------|
+| tabSize           | 缩进大小                                 | number                          | 4  |
+| insertSpaces      | 是否使用空格进行缩进                       | boolean                         | true  |
+| eol               | 换行符                                   | string                          | '\n'  |
+
+## Methods
+
+绑定在组件实例上的方法，可以通过 ref 调用实现某些特殊交互
+
+| 名称    | 描述     |
+|---------|--------|
+| getValue()  | 获取当前值 |
+| format() | 格式化 |
+
+
+### Performance 
+#### Bundle Size 
+| 组件         | 体积      | 体积(Gzip) |
+| ------------ | --------- | ---------- |
+| JsonViewer   | 203.14kb  | 51.23kb    |
+| MonacoEditor | 5102.0 KB | 1322.7 KB  |
+
+#### 渲染不同量级数据耗时
+> 注：
+> - 测试数据生成方式详情可查阅 [url](https://github.com/DouyinFE/semi-design/blob/main/packages/semi-ui/jsonViewer/_story/jsonViewer.stories.jsx)  
+> - 当数据量级超出50w行时，ReactMonacoEditor 默认关闭高亮等行为，数据对比不遵循单一变量原则
+
+| 组件              | 1k行    | 5k行    | 1w行    | 10w行   | 50w行    | 100w行   | 300w行   |
+| ----------------- | ------- | ------- | ------- | ------- | -------- | -------- | -------- |
+| JsonViewer        | 30.42ms | 30.66ms | 36.87ms | 52.73ms | 111.02ms | 178.81ms | 506.25ms |
+| ReactMonacoEditor | 72.01ms | 73.76ms | 76.64ms | 97.89ms | 133.31ms | 202.79ms | 495.53ms |
+| 性能提升          | 57.70%  | 58.41%  | 51.87%  | 46.11%  | -        | -        | -        |

content/plus/lottie/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 28
+order: 29
 category: Plus
 title: Lottie Animation
 icon: doc-lottie

content/plus/lottie/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 28
+order: 29
 category: Plus
 title: Lottie 动画
 icon: doc-lottie

content/show/avatar/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 56
+order: 57
 category: Show
 title:  Avatar
 subTitle: avatar

content/show/avatar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 56
+order: 57
 category: 展示类
 title: Avatar 头像
 icon: doc-avatar

content/show/badge/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 57
+order: 58
 category: Show
 title:  Badge
 subTitle: Badge

content/show/badge/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 57
+order: 58
 category: 展示类
 title:  Badge 徽章
 icon: doc-badge

content/show/calendar/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 58
+order: 59
 category: Show
 title:  Calendar
 subTitle: Calendar

content/show/calendar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 58
+order: 59
 category: 展示类
 title: Calendar 日历
 icon: doc-calendar

content/show/card/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 59
+order: 60
 category: Show
 title:  Card
 subTitle: Card

content/show/card/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 59
+order: 60
 category: 展示类
 title:  Card 卡片
 subTitle: 卡片

content/show/carousel/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 60
+order: 61
 category: Show
 title: Carousel
 subTitle: Carousel

content/show/carousel/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 60
+order: 61
 category: 展示类
 title: Carousel 轮播图
 icon: doc-carousel

content/show/chart/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 78
+order: 79
 category: Show
 title: Data Visualization
 icon: doc-vchart

content/show/chart/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 78
+order: 79
 category: 展示类
 title:  Data Visualization 数据可视化
 icon: doc-vchart

content/show/collapse/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 61
+order: 62
 category: Show
 title: Collapse
 subTitle: Collapse

content/show/collapse/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 61
+order: 62
 category: 展示类
 title: Collapse 折叠面板
 icon: doc-accordion

content/show/collapsible/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 62
+order: 63
 category: Show
 title: Collapsible
 subTitle: Collapsible

content/show/collapsible/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 62
+order: 63
 category: 展示类
 title: Collapsible 折叠
 icon: doc-collapsible

content/show/descriptions/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 63
+order: 64
 category: Show
 title: Description
 subTitle: Descriptions

content/show/descriptions/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 63
+order: 64
 category: 展示类
 title: Descriptions 描述列表
 icon: doc-descriptions

content/show/dropdown/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 64
+order: 65
 category: Show
 title: Dropdown
 subTitle: Dropdown

content/show/dropdown/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 64
+order: 65
 category: 展示类
 title: Dropdown 下拉框
 icon: doc-dropdown