Json viewer

CONTRIBUTING.md

@@ -35,8 +35,9 @@ npm install --global lerna
 npm run bootstrap
 ```
  - 接下来进行你想要做的修改，可以是 bug 修复，也可以是新功能的开发
- - 你可以通过运行 storybook(`npm start`)和官网(`npm run docsite`)来验证逻辑
- - 为你的修改编写测试用例，并确保测试通过
+ - 你可以通过运行 storybook(`npm start`)和文档站官网(`npm run docsite`)来验证逻辑
+ - 为你的修改编写测试用例（可以是 Jest Unit Test，也可以是 Cypress E2E Test），并确保测试通过
+    - 如果你想详细了解 Semi Design的测试机制，可查阅 [How We Test Semi Design Component Libraries](https://medium.com/front-end-weekly/how-we-test-semi-design-component-libraries-64b854f63b65)
 ```bash
 npm run test:unit
 ```
@@ -50,10 +51,10 @@ npm run test:unit
 ## 帮助改善文档
 文档站基于 [gatsby](https://www.gatsbyjs.com/) 构建，核心代码在 `src` 目录。
 
-**组件文档位于 `semi-ui` 组件文件夹下的 md 文件。** 以 tooltip 为例：
+**组件文档位于 `content` 组件文件夹下, 根据组件分类对应不同的二级目录下的 md 文件** 以 banner 为例：
 
-* 中文文档 `packages/semi-ui/tooltip/index.md` 
-* 英文文档 `packages/semi-ui/tooltip/index-en-US.md`
+* 中文文档 `content/feedback/banner/index.md` 
+* 英文文档 `content/feedback/banner/index-en-US.md`
 
 启动文档站点
 ```sh

content/order.js

@@ -84,6 +84,7 @@ const order = [
     'configprovider',
     'locale',
     'chat',
+    'jsonviewer',
 ];
 let { exec } = require('child_process');
 let fs = require('fs');

content/show/jsonviewer/index.md

@@ -0,0 +1,145 @@
+---
+localeCode: zh-CN
+order: 86
+category: 展示类
+title: Json-Viewer JSON编辑器
+icon: doc-list
+dir: column
+noInline: true
+brief: 用于展示和编辑 JSON 数据
+---
+
+## 代码演示
+
+### 如何引入
+
+```jsx import
+import { JsonViewer } from '@douyinfe/semi-ui';
+```
+
+### 基本用法
+
+JsonViewer 的基本用法。传入 value height 和 width 参数，设置组件的高度和宽度和初始值。
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import { JsonViewer } from '@douyinfe/semi-ui';
+
+class SimpleList extends React.Component {
+    render() {
+        const data = `{
+            "name": "Semi",
+            "version": "0.0.0"
+        }`;
+
+        return (
+            <div>
+                <div style={{ marginRight: 16 }}>
+                    <h3 style={{ marginBottom: 16 }}>Default Size</h3>
+                    <JsonViewer height={400} width={700} value={data} />
+                </div>
+            </div>
+        );
+    }
+}
+
+render(SimpleList);
+```
+
+### 设置行高
+
+配置 options 的 lineHeight 参数，设置固定行高（单位：px, 默认 20）。
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import { JsonViewer } from '@douyinfe/semi-ui';
+
+class SimpleList extends React.Component {
+    render() {
+        const data = `{
+            "name": "Semi",
+            "version": "0.0.0"
+        }`;
+
+        return (
+            <div>
+                <div style={{ marginRight: 16 }}>
+                    <h3 style={{ marginBottom: 16 }}>Default Size</h3>
+                    <JsonViewer height={400} width={700} value={data} options={{ lineHeight: 25 }} />
+                </div>
+            </div>
+        );
+    }
+}
+
+render(SimpleList);
+```
+
+### 自动换行
+
+配置 options 的 autoHeight 参数，设置组件是否自动换行。
+
+```jsx live=true dir="column" noInline=true
+import React from 'react';
+import { JsonViewer } from '@douyinfe/semi-ui';
+
+class SimpleList extends React.Component {
+    render() {
+        const data = `{
+            "name": "Semi",
+            "version": "0.0.0",
+            "description": "lorem ipsum dolor sit amet, consectetur adipiscing elit.lorem ipsum dolor sit amet, consectetur adipiscing elit.lorem ipsum dolor sit amet, consectetur adipiscing elit.lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        }`;
+
+        return (
+            <div>
+                <div style={{ marginRight: 16 }}>
+                    <h3 style={{ marginBottom: 16 }}>Default Size</h3>
+                    <JsonViewer height={400} width={700} value={data} options={{ autoHeight: true }} />
+                </div>
+            </div>
+        );
+    }
+}
+
+render(SimpleList);
+```
+
+### 格式化配置
+
+配置 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 from 'react';
+import { JsonViewer } from '@douyinfe/semi-ui';
+
+class SimpleList extends React.Component {
+    render() {
+        const data = `{
+            "name": "Semi",
+            "version": "0.0.0",
+            "description": "lorem ipsum dolor sit amet, consectetur adipiscing elit.lorem ipsum dolor sit amet, consectetur adipiscing elit.lorem ipsum dolor sit amet, consectetur adipiscing elit.lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        }`;
+
+        return (
+            <div>
+                <div style={{ marginRight: 16 }}>
+                    <h3 style={{ marginBottom: 16 }}>Default Size</h3>
+                    <JsonViewer
+                        height={400}
+                        width={700}
+                        value={data}
+                        options={{ formatOptions: { tabSize: 2, insertSpaces: true, eol: '\n' } }}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+render(SimpleList);
+```

gatsby-node.js

@@ -155,7 +155,7 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
                 },
                 {
                   test:/\.m?js/,
-                  include: [/micromark-util-sanitize-uri/,/mdast-util-from-markdown/,/micromark/,/mdast-util-to-markdown/,/semi-foundation\/node_modules\/@mdx-js/],
+                  include: [/micromark-util-sanitize-uri/,/mdast-util-from-markdown/,/micromark/,/mdast-util-to-markdown/,/semi-foundation\/node_modules\/@mdx-js/,/jsonc-parser/],
                   use: ["esbuild-loader"]
                 },
                 {
@@ -184,7 +184,8 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
                     test: /\.mjs$/,
                     include: /node_modules/,
                     type: "javascript/auto"
-                }
+                },
+                { test: /\.worker\.ts$/, use: ['worker-loader', 'ts-loader'] }
             ],
         },
         plugins: [plugins.extractText(), plugins.define({

package.json

@@ -217,7 +217,8 @@
         "webpack": "^5.77.0",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^3.11.2",
-        "webpackbar": "^5.0.0-3"
+        "webpackbar": "^5.0.0-3",
+        "worker-loader": "^3.0.8"
     },
     "husky": {
         "hooks": {
@@ -242,5 +243,6 @@
             "stylelint"
         ]
     },
-    "license": "MIT"
+    "license": "MIT",
+    "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

packages/semi-foundation/jsonViewer/core/common/async.ts

@@ -0,0 +1,15 @@
+/** Based on https://github.com/microsoft/vscode-json-languageservice with modifications for custom requirements */
+export function runWhenGlobalIdle(callback: (idleDeadline: IdleDeadline) => void) {
+    const handler = window.requestIdleCallback(callback);
+    let disposed = false;
+
+    return {
+        dispose: () => {
+            if (disposed) {
+                return;
+            }
+            disposed = true;
+            window.cancelIdleCallback(handler);
+        },
+    };
+}