@douyinfe/semi-json-viewer-core 2.71.0-beta.0 → 2.71.1-alpha

package/lib/index.js

@@ -192,6 +192,22 @@ var SelectionModel = class {
     row = lineElement.lineNumber || 1;
     return { row, col: col + 1 };
   }
+  savePreviousSelection() {
+    this.preStartRow = this.startRow;
+    this.preStartCol = this.startCol;
+    this.preEndRow = this.endRow;
+    this.preEndCol = this.endCol;
+  }
+  restorePreviousSelection() {
+    this.startRow = this.preStartRow;
+    this.startCol = this.preStartCol;
+    this.endRow = this.preEndRow;
+    this.endCol = this.preEndCol;
+    this._jsonModel.lastChangeBufferPos = {
+      lineNumber: this.startRow,
+      column: this.startCol
+    };
+  }
 };
 
 // src/worker/jsonWorkerManager.ts
@@ -644,6 +660,7 @@ function onEnter(beforeText, afterText, previousLineText) {
 var EditWidget = class {
   constructor(view, jsonModel, selectionModel, foldingModel, _jsonWorkerManager = getJsonWorkerManager()) {
     this._jsonWorkerManager = _jsonWorkerManager;
+    this._isComposition = false;
     this._autoClosingPairs = {
       "{": "}",
       "[": "]",
@@ -667,13 +684,17 @@ var EditWidget = class {
     this._view.contentDom.addEventListener("beforeinput", (e) => {
       this._handleBeforeInput(e);
     });
+    this._view.contentDom.addEventListener("compositionstart", (e) => {
+      this._handleCompositionStart(e);
+    });
+    this._view.contentDom.addEventListener("compositionend", (e) => {
+      this._handleCompositionEnd(e);
+    });
     this._view.contentDom.addEventListener("keydown", (e) => {
       this._handleKeyDown(e);
     });
   }
-  _handleBeforeInput(e) {
-    e.preventDefault();
-    this._selectionModel.updateFromSelection();
+  buildBaseOperation(type = "insert") {
     const startRow = this._selectionModel.startRow;
     const startCol = this._selectionModel.startCol;
     const endRow = this._selectionModel.endRow;
@@ -681,7 +702,7 @@ var EditWidget = class {
     const startOffset = this._jsonModel.getOffsetAt(startRow, startCol);
     const endOffset = this._jsonModel.getOffsetAt(endRow, endCol);
     const op = {
-      type: "insert",
+      type,
       range: {
         startLineNumber: startRow,
         startColumn: startCol,
@@ -690,9 +711,47 @@ var EditWidget = class {
       },
       rangeOffset: startOffset,
       rangeLength: endOffset - startOffset,
-      oldText: "",
+      oldText: this._jsonModel.getValueInRange({
+        startLineNumber: startRow,
+        startColumn: startCol,
+        endLineNumber: endRow,
+        endColumn: endCol
+      }),
       newText: ""
     };
+    if (this._selectionModel.isSelectedAll) {
+      op.range = {
+        startLineNumber: 1,
+        startColumn: 1,
+        endLineNumber: this._jsonModel.getLineCount(),
+        endColumn: this._jsonModel.getLineLength(this._jsonModel.getLineCount()) + 1
+      };
+      op.rangeOffset = 0;
+      op.rangeLength = this._jsonModel.getValue().length;
+      op.oldText = this._jsonModel.getValue();
+    }
+    return op;
+  }
+  _handleCompositionStart(e) {
+    e.preventDefault();
+    this._isComposition = true;
+    this._selectionModel.savePreviousSelection();
+  }
+  _handleCompositionEnd(e) {
+    e.preventDefault();
+    this._isComposition = false;
+    this._selectionModel.restorePreviousSelection();
+    const op = this.buildBaseOperation("replace");
+    op.newText = e.data || "";
+    this._selectionModel.isSelectedAll = false;
+    this._jsonModel.applyOperation(op);
+  }
+  _handleBeforeInput(e) {
+    if (this._isComposition) return;
+    e.preventDefault();
+    this._selectionModel.updateFromSelection();
+    const op = this.buildBaseOperation();
+    const { startLineNumber, startColumn, endLineNumber, endColumn } = op.range;
     switch (e.inputType) {
       case "insertText":
         if (this._selectionModel.isCollapsed) {
@@ -701,37 +760,31 @@ var EditWidget = class {
           op.type = "replace";
         }
         op.newText = e.data || "";
-        op.oldText = this._jsonModel.getValueInRange({
-          startLineNumber: startRow,
-          startColumn: startCol,
-          endLineNumber: endRow,
-          endColumn: endCol
-        });
         if (this._autoClosingPairs[op.newText]) {
           op.newText += this._autoClosingPairs[op.newText];
           op.keepPosition = {
-            lineNumber: startRow,
-            column: endCol + 1
+            lineNumber: startLineNumber,
+            column: startColumn + 1
           };
         }
         break;
       case "insertParagraph":
         op.newText = "\n";
         op.keepPosition = {
-          lineNumber: startRow + 1,
+          lineNumber: startLineNumber + 1,
           column: 1
         };
         const enterAction = processJsonEnterAction(this._jsonModel, {
-          startLineNumber: startRow,
-          startColumn: startCol,
-          endLineNumber: endRow,
-          endColumn: endCol
+          startLineNumber,
+          startColumn,
+          endLineNumber,
+          endColumn
         });
         if (enterAction) {
           if (enterAction.indentAction === 1 /* Indent */) {
             op.newText = "\n" + this.normalizeIndentation(enterAction.appendText + enterAction.indentation) || "";
             op.keepPosition = {
-              lineNumber: startRow + 1,
+              lineNumber: startLineNumber + 1,
               column: enterAction.appendText.length + enterAction.indentation.length + 1
             };
           } else {
@@ -739,65 +792,39 @@ var EditWidget = class {
             const increasedIndent = this.normalizeIndentation(enterAction.indentation + enterAction.appendText);
             op.newText = "\n" + increasedIndent + "\n" + normalIndent;
             op.keepPosition = {
-              lineNumber: startRow + 1,
+              lineNumber: startLineNumber + 1,
               column: increasedIndent.length + 1
             };
           }
         } else {
-          const lineText = this._jsonModel.getLineContent(startRow);
-          const indentation = getLeadingWhitespace(lineText).substring(0, startCol - 1);
+          const lineText = this._jsonModel.getLineContent(startLineNumber);
+          const indentation = getLeadingWhitespace(lineText).substring(0, startColumn - 1);
           op.newText = "\n" + this.normalizeIndentation(indentation) || "";
           op.keepPosition = {
-            lineNumber: startRow + 1,
+            lineNumber: startLineNumber + 1,
             column: indentation.length + 1
           };
         }
         break;
       case "deleteContentBackward":
-        let oldText = "";
         if (this._selectionModel.isCollapsed) {
-          op.rangeOffset = startOffset - 1;
-          oldText = this._jsonModel.getValueInRange({
-            startLineNumber: startRow,
-            startColumn: startCol - 1,
-            endLineNumber: endRow,
-            endColumn: endCol
-          });
-        } else {
-          oldText = this._jsonModel.getValueInRange({
-            startLineNumber: startRow,
-            startColumn: startCol,
-            endLineNumber: endRow,
-            endColumn: endCol
+          op.rangeOffset -= 1;
+          op.oldText = this._jsonModel.getValueInRange({
+            startLineNumber,
+            startColumn: startColumn - 1,
+            endLineNumber,
+            endColumn
           });
         }
-        op.oldText = oldText;
         op.type = "delete";
-        op.rangeLength = oldText.length;
+        op.rangeLength = op.oldText.length;
         break;
       case "insertFromPaste":
         const pasteData = e.dataTransfer?.getData("text/plain");
         op.type = "replace";
         op.newText = pasteData || "";
-        op.oldText = this._jsonModel.getValueInRange({
-          startLineNumber: startRow,
-          startColumn: startCol,
-          endLineNumber: endRow,
-          endColumn: endCol
-        });
         break;
     }
-    if (this._selectionModel.isSelectedAll) {
-      op.range = {
-        startLineNumber: 1,
-        startColumn: 1,
-        endLineNumber: this._jsonModel.getLineCount(),
-        endColumn: this._jsonModel.getLineLength(this._jsonModel.getLineCount())
-      };
-      op.rangeOffset = 0;
-      op.rangeLength = this._jsonModel.getValue().length;
-      op.oldText = this._jsonModel.getValue();
-    }
     this._selectionModel.isSelectedAll = false;
     this._jsonModel.applyOperation(op);
   }
@@ -867,6 +894,7 @@ var EditWidget = class {
     const endCol = this._selectionModel.endCol;
     const startOffset = this._jsonModel.getOffsetAt(startRow, startCol);
     const endOffset = this._jsonModel.getOffsetAt(endRow, endCol);
+    const op = this.buildBaseOperation();
     switch (e.key) {
       case "Tab":
         if (this._view.completeWidget.isVisible) {
@@ -884,19 +912,7 @@ var EditWidget = class {
         } else {
           insertText = "	";
         }
-        const op = {
-          type: "insert",
-          range: {
-            startLineNumber: startRow,
-            startColumn: startCol,
-            endLineNumber: endRow,
-            endColumn: endCol
-          },
-          rangeOffset: startOffset,
-          rangeLength: endOffset - startOffset,
-          oldText: "",
-          newText: insertText
-        };
+        op.newText = insertText;
         this._jsonModel.applyOperation(op);
         break;
       case "f":
@@ -947,61 +963,22 @@ var EditWidget = class {
     }
   }
   _cutHandler() {
-    const startRow = this._selectionModel.startRow;
-    const startCol = this._selectionModel.startCol;
-    const endRow = this._selectionModel.endRow;
-    const endCol = this._selectionModel.endCol;
-    let startOffset;
-    let oldText = "";
-    const op = {
-      type: "replace",
-      range: {
-        startLineNumber: startRow,
-        startColumn: startCol,
-        endLineNumber: endRow,
-        endColumn: endCol
-      },
-      rangeOffset: 0,
-      rangeLength: 0,
-      oldText: "",
-      newText: ""
-    };
-    if (!this._selectionModel.isCollapsed) {
-      oldText = this._jsonModel.getValueInRange({
-        startLineNumber: startRow,
-        startColumn: startCol,
-        endLineNumber: endRow,
-        endColumn: endCol
-      });
-      startOffset = this._jsonModel.getOffsetAt(startRow, startCol);
-    } else {
-      oldText = this._jsonModel.getValueInRange({
-        startLineNumber: startRow,
+    const op = this.buildBaseOperation("replace");
+    if (this._selectionModel.isCollapsed) {
+      const { startLineNumber, endLineNumber } = op.range;
+      op.rangeOffset = this._jsonModel.getOffsetAt(startLineNumber, 1);
+      op.oldText = this._jsonModel.getValueInRange({
+        startLineNumber,
         startColumn: 1,
-        endLineNumber: endRow,
-        endColumn: this._jsonModel.getLineLength(endRow) + 1
+        endLineNumber,
+        endColumn: this._jsonModel.getLineLength(endLineNumber) + 1
       });
       op.range = {
-        startLineNumber: startRow,
-        startColumn: 1,
-        endLineNumber: endRow,
-        endColumn: this._jsonModel.getLineLength(endRow) + 1
-      };
-      startOffset = this._jsonModel.getOffsetAt(startRow, 1);
-    }
-    op.oldText = oldText;
-    op.rangeOffset = startOffset;
-    op.rangeLength = oldText.length;
-    if (this._selectionModel.isSelectedAll) {
-      op.range = {
-        startLineNumber: 1,
+        startLineNumber,
         startColumn: 1,
-        endLineNumber: this._jsonModel.getLineCount(),
-        endColumn: this._jsonModel.getLineLength(this._jsonModel.getLineCount()) + 1
+        endLineNumber,
+        endColumn: this._jsonModel.getLineLength(endLineNumber) + 1
       };
-      op.rangeOffset = 0;
-      op.rangeLength = this._jsonModel.getValue().length;
-      op.oldText = this._jsonModel.getValue();
     }
     navigator.clipboard.writeText(op.oldText);
     this._jsonModel.applyOperation(op);
@@ -1011,6 +988,7 @@ var EditWidget = class {
 // src/view/fold/foldWidget.ts
 var FoldWidget = class {
   constructor(view, foldingModel) {
+    this._isMouseOver = false;
     this._view = view;
     this._foldingModel = foldingModel;
     this._attachEventListeners();
@@ -1025,11 +1003,14 @@ var FoldWidget = class {
   }
   _handleLineNumberHover(e) {
     this._showFoldingIcon();
+    this._isMouseOver = true;
   }
   _handleLineNumberContainerLeave() {
     this.removeAllFoldingIcons();
+    this._isMouseOver = false;
   }
   _showFoldingIcon() {
+    if (this._isMouseOver) return;
     const lineNumberElement = this._view.lineScrollDom.children;
     for (let i = 0; i < lineNumberElement.length; i++) {
       const element = lineNumberElement[i];
@@ -1079,6 +1060,7 @@ var FoldWidget = class {
       this._foldingModel.toggleFoldingRange(lineNumber);
       this._view.scalingCellSizeAndPositionManager.resetCell(0);
       this._view.layout();
+      this._isMouseOver = false;
     });
     return foldingIcon;
   }
@@ -3188,6 +3170,7 @@ var CompleteWidget = class {
     ).join("");
   }
   hide() {
+    if (!this.isVisible) return;
     this.isVisible = false;
     this._container.style.display = "none";
     this._suggestions = [];
@@ -3362,19 +3345,23 @@ var View = class {
     });
     this._contentDom.addEventListener("click", (e) => {
       e.preventDefault();
+      this._completeWidget.hide();
       this._selectionModel.isSelectedAll = false;
       this._selectionModel.updateFromSelection();
     });
     this.emitter.on("contentChanged", () => {
       this.resetScalingManagerConfigAndCell(0);
+      if (this._jsonModel.lastChangeBufferPos.lineNumber >= this.visibleLineCount + this.startLineNumber) {
+        this.scrollToLine(
+          this._jsonModel.lastChangeBufferPos.lineNumber - this.visibleLineCount + 1
+        );
+        return;
+      }
       this.layout();
     });
   }
   getLineElement(lineNumber) {
-    const visibleLineNumber = this._foldingModel.getVisibleLineNumber(lineNumber);
-    if (visibleLineNumber > this.visibleLineCount + this.startLineNumber || visibleLineNumber < this.startLineNumber)
-      return null;
-    return this._scrollDom.children[visibleLineNumber - this._foldingModel.getVisibleLineNumber(this.startLineNumber)];
+    return this.scrollDom.querySelector(`[data-line-number="${lineNumber}"]`);
   }
   updateVisibleRange(start, end) {
     this.startLineNumber = start;

package/package.json

@@ -1,57 +1,57 @@
 {
-  "name": "@douyinfe/semi-json-viewer-core",
-  "version": "2.71.0-beta.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",
-  "gitHead": "3c0018d8659afcae9b39e764859725768363772d"
+    "name": "@douyinfe/semi-json-viewer-core",
+    "version": "2.71.1-alpha",
+    "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",
+    "gitHead": "245b2462e1d2824d9254d0a79b318d4c5eb55d37"
 }