@douyinfe/semi-json-viewer-core 2.86.0-beta.0 → 2.87.0-alpha.0

package/lib/index.js

@@ -24,17 +24,17 @@ function createTokenizationSupport(supportComments) {
     tokenize: (line, state) => tokenize(supportComments, line, state)
   };
 }
-var TOKEN_DELIM_OBJECT = "semi-json-viewer-delimiter-bracket";
-var TOKEN_DELIM_ARRAY = "semi-json-viewer-delimiter-array";
-var TOKEN_DELIM_COLON = "semi-json-viewer-delimiter-colon";
-var TOKEN_DELIM_COMMA = "semi-json-viewer-delimiter-comma";
-var TOKEN_VALUE_BOOLEAN = "semi-json-viewer-keyword";
-var TOKEN_VALUE_NULL = "semi-json-viewer-keyword";
-var TOKEN_VALUE_STRING = "semi-json-viewer-string-value";
-var TOKEN_VALUE_NUMBER = "semi-json-viewer-number";
-var TOKEN_PROPERTY_NAME = "semi-json-viewer-string-key";
-var TOKEN_COMMENT_BLOCK = "semi-json-viewer-comment-block";
-var TOKEN_COMMENT_LINE = "semi-json-viewer-comment-line";
+var TOKEN_DELIM_OBJECT = "delimiter-bracket";
+var TOKEN_DELIM_ARRAY = "delimiter-array";
+var TOKEN_DELIM_COLON = "delimiter-colon";
+var TOKEN_DELIM_COMMA = "delimiter-comma";
+var TOKEN_VALUE_BOOLEAN = "keyword";
+var TOKEN_VALUE_NULL = "keyword";
+var TOKEN_VALUE_STRING = "string-value";
+var TOKEN_VALUE_NUMBER = "number";
+var TOKEN_PROPERTY_NAME = "string-key";
+var TOKEN_COMMENT_BLOCK = "comment-block";
+var TOKEN_COMMENT_LINE = "comment-line";
 var ParentsStack = class _ParentsStack {
   constructor(parent, type, depth) {
     this.parent = parent;
@@ -422,7 +422,7 @@ var SelectionModel = class {
     if (!node) return { row, col };
     let lineElement;
     if (node instanceof HTMLElement) {
-      lineElement = node.closest(".semi-json-viewer-view-line");
+      lineElement = node.closest(`.${this._view.prefixCls}-view-line`);
     } else {
       lineElement = getLineElement(node);
       if (!lineElement) return { row, col };
@@ -1172,6 +1172,7 @@ var FoldingModel = class {
     return this._hiddenRangeModel.isHiddenLine(lineNumber);
   }
   isFoldable(lineNumber) {
+    if (!this._regions) return false;
     const index = this._regions.findRange(lineNumber);
     const region = this._regions.toRegion(index);
     return region && region.startLineNumber === lineNumber;
@@ -1728,7 +1729,8 @@ var EditWidget = class {
     const startOffset = this._jsonModel.getOffsetAt(startRow, startCol);
     const endOffset = this._jsonModel.getOffsetAt(endRow, endCol);
     const op = this.buildBaseOperation();
-    switch (e.key) {
+    const isCtrl = e.ctrlKey || e.metaKey;
+    switch (e.code) {
       case "Tab":
         if (this._view.completeWidget.isVisible) {
           e.preventDefault();
@@ -1748,8 +1750,8 @@ var EditWidget = class {
         op.newText = insertText;
         this._jsonModel.applyOperation(op);
         break;
-      case "f":
-        if (e.shiftKey && e.metaKey) {
+      case "KeyF":
+        if (e.shiftKey && isCtrl) {
           e.preventDefault();
           this.format();
         }
@@ -1773,28 +1775,23 @@ var EditWidget = class {
           this._view.completeWidget._handleKeyDown(e);
         }
         break;
-      case "a":
-        if (e.metaKey) {
-          this._selectionModel.isSelectedAll = true;
-        }
+      case "KeyA":
+        isCtrl && (this._selectionModel.isSelectedAll = true);
         break;
-      case "x":
-        if (e.metaKey) {
-          e.preventDefault();
-          this._cutHandler();
-        }
+      case "KeyX":
+        isCtrl && (e.preventDefault(), this._cutHandler());
         break;
-      case "z":
-        if (e.metaKey && !e.shiftKey) {
+      case "KeyZ":
+        if (isCtrl && !e.shiftKey) {
           e.preventDefault();
           this._jsonModel.undo();
-        } else if (e.metaKey && e.shiftKey) {
+        } else if (isCtrl && e.shiftKey) {
           e.preventDefault();
           this._jsonModel.redo();
         }
         break;
-      case "c":
-        if (e.metaKey) {
+      case "KeyC":
+        if (isCtrl) {
           e.preventDefault();
           this._copyHandler();
         }
@@ -1880,7 +1877,7 @@ var FoldWidget = class {
     return svg;
   }
   _createFoldingIcon(lineNumber) {
-    const foldingIconClass = "semi-json-viewer-folding-icon";
+    const foldingIconClass = `${this._view.prefixCls}-folding-icon`;
     const foldingIcon = elt("span", foldingIconClass);
     const isCollapsed = this._foldingModel.isCollapsed(lineNumber);
     foldingIcon.appendChild(this._createFoldSvg(isCollapsed));
@@ -1908,7 +1905,7 @@ var FoldWidget = class {
     return foldingIcon;
   }
   removeAllFoldingIcons() {
-    const foldingIconClass = "semi-json-viewer-folding-icon";
+    const foldingIconClass = `${this._view.prefixCls}-folding-icon`;
     const foldingIcons = this._view.lineScrollDom.querySelectorAll(`.${foldingIconClass}`);
     foldingIcons.forEach((icon) => icon.remove());
   }
@@ -3769,7 +3766,7 @@ var CompleteWidget = class {
     return { x, y };
   }
   createCompleteContainer() {
-    const className = "semi-json-viewer-complete-container";
+    const className = `${this._view.prefixCls}-complete-container`;
     const container = elt("div", className);
     setStyles(container, {
       display: "none"
@@ -3777,7 +3774,7 @@ var CompleteWidget = class {
     return container;
   }
   createSuggestionsContainer() {
-    const className = "semi-json-viewer-complete-suggestions-container";
+    const className = `${this._view.prefixCls}-complete-suggestions-container`;
     const container = elt("div", className);
     setStyles(container, {
       maxHeight: "200px",
@@ -3838,7 +3835,7 @@ var CompleteWidget = class {
     this.hide();
   }
   _renderCompletions() {
-    const className = "semi-json-viewer-complete-suggestions-item";
+    const className = `${this._view.prefixCls}-complete-suggestions-item`;
     this._suggestionsContainer.innerHTML = this._suggestions.map(
       (item, index) => `
         <li class="${className}" style="background-color: ${index === this._selectedIndex ? "var(--semi-color-fill-0)" : "transparent"}" data-index="${index}">
@@ -3977,7 +3974,7 @@ var ErrorWidget = class {
       const child = line.children[i];
       offset += child.textContent?.length || 0;
       if (offset > start.column && offset <= end.column) {
-        const className = "semi-json-viewer-error";
+        const className = `${this._view.prefixCls}-error`;
         child.classList.add(className);
       }
     }
@@ -3990,6 +3987,7 @@ var ViewDOMBuilder = class {
     this._lineHeight = lineHeight;
     this._totalLines = totalLines;
     this._options = options;
+    this.prefixCls = options?.prefixCls || "semi-json-viewer";
   }
   createRenderContainer() {
     const renderContainer = elt("div", "json-viewer-container");
@@ -4002,7 +4000,7 @@ var ViewDOMBuilder = class {
     return renderContainer;
   }
   createLineNumberContainer() {
-    const lineNumberClass = "semi-json-viewer-line-number-container";
+    const lineNumberClass = `${this._options?.prefixCls}-line-number-container`;
     const lineNumberContainer = elt("div", lineNumberClass);
     setStyles(lineNumberContainer, {
       position: "absolute",
@@ -4013,7 +4011,7 @@ var ViewDOMBuilder = class {
     return lineNumberContainer;
   }
   createContentContainer() {
-    const contentClass = "semi-json-viewer-content-container";
+    const contentClass = `${this.prefixCls}-content-container`;
     const contentContainer = elt("div", contentClass);
     setStyles(contentContainer, {
       position: "absolute",
@@ -4078,6 +4076,7 @@ var View = class {
     this._lineHeight = options?.lineHeight || 20;
     this._options = options;
     this._customRenderRule = options?.customRenderRule || null;
+    this.prefixCls = options?.prefixCls || "semi-json-viewer";
     this._domBuilder = new ViewDOMBuilder(this._lineHeight, model.getLineCount(), options);
     this._jsonViewerDom = this._domBuilder.createRenderContainer();
     this._lineNumberDom = this._domBuilder.createLineNumberContainer();
@@ -4190,7 +4189,7 @@ var View = class {
     this.onScroll(scrollTop);
   }
   createLineNumberElement(actualLineNumber, visibleLineNumber) {
-    const lineNumberClass = "semi-json-viewer-line-number";
+    const lineNumberClass = `${this.prefixCls}-line-number`;
     const lineNumberElement = elt("div", lineNumberClass);
     const rowDatum = this._scalingCellSizeAndPositionManager.getSizeAndPositionOfCell(visibleLineNumber);
     setStyles(lineNumberElement, {
@@ -4214,7 +4213,7 @@ var View = class {
     return lineNumberElement;
   }
   createLineContentElement(actualLineNumber, visibleLineNumber) {
-    const lineElementClass = "semi-json-viewer-view-line";
+    const lineElementClass = `${this.prefixCls}-view-line`;
     const lineElement = elt("div", lineElementClass);
     lineElement.setAttribute("data-line-element", "true");
     const rowDatum = this._scalingCellSizeAndPositionManager.getSizeAndPositionOfCell(visibleLineNumber);
@@ -4357,7 +4356,7 @@ var View = class {
             continue;
           } else if (customElement !== null) {
             const span2 = document.createElement("span");
-            span2.className = token.scopes;
+            span2.className = `${this.prefixCls}-${token.scopes}`;
             span2.textContent = content;
             container.appendChild(span2);
             this._customRenderMap.set(span2, customElement);
@@ -4365,7 +4364,7 @@ var View = class {
           }
         }
         const span = document.createElement("span");
-        span.className = token.scopes;
+        span.className = `${this.prefixCls}-${token.scopes}`;
         span.textContent = content;
         if (!this._options?.autoWrap) {
           span.style.whiteSpace = "pre";
@@ -4385,7 +4384,7 @@ var View = class {
       if (startIndex >= content.length || endIndex <= 0) continue;
       if (startIndex > lastIndex) {
         const normalSpan = document.createElement("span");
-        normalSpan.className = tokenClass;
+        normalSpan.className = `${this.prefixCls}-${tokenClass}`;
         normalSpan.textContent = content.substring(lastIndex, startIndex);
         container.appendChild(normalSpan);
       }
@@ -4393,7 +4392,7 @@ var View = class {
       highlightSpan.textContent = content.substring(startIndex, endIndex);
       const currentMatch = this._searchWidget.searchResults?.[this._searchWidget._currentResultIndex];
       const isCurrentMatch = match.range.startLineNumber === currentMatch?.range.startLineNumber && match.range.endLineNumber === currentMatch?.range.endLineNumber && match.range.startColumn === currentMatch?.range.startColumn && match.range.endColumn === currentMatch?.range.endColumn;
-      highlightSpan.className = `${tokenClass} semi-json-viewer-search-result${isCurrentMatch ? " semi-json-viewer-current-search-result" : ""}`;
+      highlightSpan.className = `${this.prefixCls}-${tokenClass} ${this.prefixCls}-search-result${isCurrentMatch ? ` ${this.prefixCls}-current-search-result` : ""}`;
       highlightSpan.dataset.startColumn = match.range.startColumn.toString();
       highlightSpan.dataset.endColumn = match.range.endColumn.toString();
       container.appendChild(highlightSpan);
@@ -4401,7 +4400,7 @@ var View = class {
     }
     if (lastIndex < content.length) {
       const remainingSpan = document.createElement("span");
-      remainingSpan.className = tokenClass;
+      remainingSpan.className = `${this.prefixCls}-${tokenClass}`;
       remainingSpan.textContent = content.substring(lastIndex);
       container.appendChild(remainingSpan);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-json-viewer-core",
-    "version": "2.86.0-beta.0",
+    "version": "2.87.0-alpha.0",
     "description": "",
     "main": "lib/index.js",
     "module": "lib/index.js",
@@ -53,5 +53,5 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "2ace7125fcf788875cb7aea7baebbaf2fb6fbab3"
+    "gitHead": "9e089cce3cd8aff4b4c73e2ea0346fde3b19e8b6"
 }