Feat: JsonViewer New Feature & BugFix (#2658)

* feat: support readonly mode * feat: support hidden searchbar * feat: correct cursor position * fix: correct cursor position with click * fix: resolve missing content issue when copy * fix: resolve cursor positioning issue after indentation * fix: ensure error messages render correctly after rerender * refactor: restructure FoldingModel underlying data structure * docs: update jsonViewer api doc * docs: update jsonViewer storybook instance * v2.72.2-alpha.0 * fix: resolve scroll rendering issue after folding * v2.72.2-alpha.1 * chore: remove console log statements * fix: resolve rendering issue after deletion in folded state * v2.72.2-alpha.2 * fix: resolve search box blur issue in read-only mode * fix: disable replace functionality in read-only mode * fix: correct logic for automatic line wrapping --------- Co-authored-by: 田丰 <[email protected]>
DouyinFE · Jan 7, 2025 · de38239 · de38239
1 parent 7c205ed
commit de38239
Show file tree

Hide file tree

Showing 23 changed files with 982 additions and 251 deletions.
diff --git a/content/plus/jsonviewer/index-en-US.md b/content/plus/jsonviewer/index-en-US.md
@@ -161,6 +161,7 @@ render(FormatJsonComponent);
 | width | Width of wrapper DOM | number | - |
 | className | className of wrapper DOM | string | - |
 | style | InlineStyle of wrapper DOM | object | - |
+| showSearch | Whether to show search icon | boolean | true |
 | options | Formatting configuration | JsonViewerOptions | - |
 | onChange | Callback for content change | (value: string) => void | - |
 
@@ -170,6 +171,7 @@ render(FormatJsonComponent);
 | ------------- | --------------------------------------- | ----------------- | ------- |
 | lineHeight    | Height of each line of content, unit:px | number            | 20      |
 | autoWrap      | Whether to wrap lines automatically.    | boolean           | true    |
+| readOnly      | Whether to be read-only.    | boolean           | false    |
 | formatOptions | Content format setting                  | FormattingOptions | -       |
 
 ### FormattingOptions

diff --git a/content/plus/jsonviewer/index.md b/content/plus/jsonviewer/index.md
@@ -158,6 +158,7 @@ render(FormatJsonComponent);
 | width             | 宽度                                     | number                                  | -  |
 | className         | 类名                           | string                                  | -   |
 | style             | 内联样式                           | object                                  | -   |
+| showSearch        | 是否显示搜索Icon                           | boolean                                  | true   |
 | options           | 格式化配置                                | JsonViewerOptions                       | -   |
 | onChange          | 内容变化回调                           | (value: string) => void                  | -   |
 
@@ -167,6 +168,7 @@ render(FormatJsonComponent);
 |-------------------|------------------------------------------------|---------------------------------|-----------|
 | lineHeight        | 行高                                    | number                          | 20  |
 | autoWrap        | 是否自动换行                             | boolean                            | true  |
+| readOnly        | 是否只读                             | boolean                            | false  |
 | formatOptions     | 格式化配置                               | FormattingOptions                |  -  |
 
 ### FormattingOptions

diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.72.0"
+    "version": "2.72.2-alpha.2"
 }
diff --git a/packages/semi-foundation/jsonViewer/foundation.ts b/packages/semi-foundation/jsonViewer/foundation.ts
@@ -53,10 +53,16 @@ class JsonViewerFoundation extends BaseFoundation<JsonViewerAdapter> {
     }
 
     replace(replaceText: string) {
+        if (this.getProps().options.readOnly) {
+            return;
+        }
         this.jsonViewer?.getSearchWidget().replace(replaceText);
     }
 
     replaceAll(replaceText: string) {
+        if (this.getProps().options.readOnly) {
+            return;
+        }
         this.jsonViewer?.getSearchWidget().replaceAll(replaceText);
     }
 

diff --git a/packages/semi-foundation/jsonViewer/jsonViewer.scss b/packages/semi-foundation/jsonViewer/jsonViewer.scss
@@ -68,8 +68,8 @@ $module: #{$prefix}-json-viewer;
         font-variation-settings: normal;
         letter-spacing: 0px;
         color: #237893;
-        word-wrap: break-word;
-        white-space: pre-wrap;
+        word-break: break-all !important;
+        white-space: pre-wrap !important;
     }
 
     &-line-number {
@@ -82,6 +82,7 @@ $module: #{$prefix}-json-viewer;
         color: $color-json-viewer-line-number;
         text-align: center;
         width: 50px;
+        user-select: none;
     }
 
     &-content-container {

diff --git a/packages/semi-foundation/package.json b/packages/semi-foundation/package.json
@@ -1,14 +1,14 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.72.0",
+    "version": "2.72.2-alpha.2",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
         "@douyinfe/semi-animation": "2.72.0",
-        "@douyinfe/semi-json-viewer-core": "2.72.0",
+        "@douyinfe/semi-json-viewer-core": "2.72.2-alpha.2",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",

diff --git a/packages/semi-json-viewer-core/package.json b/packages/semi-json-viewer-core/package.json
@@ -1,56 +1,56 @@
 {
-  "name": "@douyinfe/semi-json-viewer-core",
-  "version": "2.72.0",
-  "description": "",
-  "main": "lib/index.js",
-  "module": "lib/index.js",
-  "typings": "src/index.ts",
-  "scripts": {
-    "build:lib": "node ./script/compileLib.js",
-    "prepublishOnly": "npm run build:lib"
-  },
-  "files": [
-    "dist/*",
-    "lib/*"
-  ],
-  "dependencies": {
-    "jsonc-parser": "^3.3.1"
-  },
-  "devDependencies": {
-    "esbuild": "^0.24.0"
-  },
-  "sideEffects": [
-    "*.scss",
-    "*.css",
-    "lib/es/index.js",
-    "./index.ts"
-  ],
-  "keywords": [
-    "bytedance douyin design system",
-    "semi design to any design",
-    "a11y react component library",
-    "design to code",
-    "code to design",
-    "3000+ design token",
-    "dark mode",
-    "semi design",
-    "design ops",
-    "modern design system",
-    "figma ui kit"
-  ],
-  "homepage": "https://semi.design",
-  "bugs": {
-    "url": "https://github.com/DouyinFE/semi-design/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/DouyinFE/semi-design"
-  },
-  "_unpkg": true,
-  "unpkgFiles": [
-    "dist/css",
-    "dist/umd/*.js"
-  ],
-  "author": "",
-  "license": "MIT"
+    "name": "@douyinfe/semi-json-viewer-core",
+    "version": "2.72.2-alpha.2",
+    "description": "",
+    "main": "lib/index.js",
+    "module": "lib/index.js",
+    "typings": "src/index.ts",
+    "scripts": {
+        "build:lib": "node ./script/compileLib.js",
+        "prepublishOnly": "npm run build:lib"
+    },
+    "files": [
+        "dist/*",
+        "lib/*"
+    ],
+    "dependencies": {
+        "jsonc-parser": "^3.3.1"
+    },
+    "devDependencies": {
+        "esbuild": "^0.24.0"
+    },
+    "sideEffects": [
+        "*.scss",
+        "*.css",
+        "lib/es/index.js",
+        "./index.ts"
+    ],
+    "keywords": [
+        "bytedance douyin design system",
+        "semi design to any design",
+        "a11y react component library",
+        "design to code",
+        "code to design",
+        "3000+ design token",
+        "dark mode",
+        "semi design",
+        "design ops",
+        "modern design system",
+        "figma ui kit"
+    ],
+    "homepage": "https://semi.design",
+    "bugs": {
+        "url": "https://github.com/DouyinFE/semi-design/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/DouyinFE/semi-design"
+    },
+    "_unpkg": true,
+    "unpkgFiles": [
+        "dist/css",
+        "dist/umd/*.js"
+    ],
+    "author": "",
+    "license": "MIT"
 }
diff --git a/packages/semi-json-viewer-core/src/common/emitterEvents.ts b/packages/semi-json-viewer-core/src/common/emitterEvents.ts
@@ -6,7 +6,8 @@ export interface GlobalEvents {
     contentChanged: IModelContentChangeEvent | IModelContentChangeEvent[];
     problemsChanged: IProblemsChangedEvent;
     hoverNode: IHoverNodeEvent;
-    renderHoverNode: IRenderHoverNodeEvent
+    renderHoverNode: IRenderHoverNodeEvent;
+    forceRender: undefined
 }
 
 interface IRange {

diff --git a/packages/semi-json-viewer-core/src/common/strings.ts b/packages/semi-json-viewer-core/src/common/strings.ts
@@ -138,3 +138,48 @@ export function firstNonWhitespaceIndex(str: string): number {
     }
     return -1;
 }
+
+export const enum StringEOL {
+    Unknown = 0,
+    Invalid = 3,
+    LF = 1,
+    CRLF = 2,
+}
+
+export function countEOL(text: string): [number, number, number, StringEOL] {
+    let eolCount = 0;
+    let firstLineLength = 0;
+    let lastLineStart = 0;
+    let eol: StringEOL = StringEOL.Unknown;
+    for (let i = 0, len = text.length; i < len; i++) {
+        const chr = text.charCodeAt(i);
+
+        if (chr === CharCode.CarriageReturn) {
+            if (eolCount === 0) {
+                firstLineLength = i;
+            }
+            eolCount++;
+            if (i + 1 < len && text.charCodeAt(i + 1) === CharCode.LineFeed) {
+                // \r\n... case
+                eol |= StringEOL.CRLF;
+                i++; // skip \n
+            } else {
+                // \r... case
+                eol |= StringEOL.Invalid;
+            }
+            lastLineStart = i + 1;
+        } else if (chr === CharCode.LineFeed) {
+            // \n... case
+            eol |= StringEOL.LF;
+            if (eolCount === 0) {
+                firstLineLength = i;
+            }
+            eolCount++;
+            lastLineStart = i + 1;
+        }
+    }
+    if (eolCount === 0) {
+        firstLineLength = text.length;
+    }
+    return [eolCount, firstLineLength, text.length - lastLineStart, eol];
+}
diff --git a/packages/semi-json-viewer-core/src/common/utils.ts b/packages/semi-json-viewer-core/src/common/utils.ts
@@ -4,4 +4,23 @@ export function isObject(val: any): val is Record<string, any> {
 
 export function isNumber(val: any): val is number {
     return typeof val === 'number';
+}
+
+export function findFirstIdxMonotonousOrArrLen<T>(
+    array: readonly T[],
+    predicate: (item: T) => boolean,
+    startIdx = 0,
+    endIdxEx = array.length
+): number {
+    let i = startIdx;
+    let j = endIdxEx;
+    while (i < j) {
+        const k = Math.floor((i + j) / 2);
+        if (predicate(array[k])) {
+            j = k;
+        } else {
+            i = k + 1;
+        }
+    }
+    return i;
 }
diff --git a/packages/semi-json-viewer-core/src/json-viewer/jsonViewer.ts b/packages/semi-json-viewer-core/src/json-viewer/jsonViewer.ts
@@ -12,6 +12,7 @@ import { setCurrentNameSpaceId } from '../common/nameSpace';
 export interface JsonViewerOptions {
     lineHeight?: number;
     autoWrap?: boolean;
+    readOnly?: boolean;
     formatOptions?: FormattingOptions;
     completionOptions?: CompletionOptions
 }