@douyinfe/semi-json-viewer-core 2.83.0 → 2.84.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 };
@@ -1880,7 +1880,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 +1908,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 +3769,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 +3777,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 +3838,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}">
@@ -3976,7 +3976,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);
       }
     }
@@ -3989,6 +3989,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");
@@ -4001,7 +4002,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",
@@ -4012,7 +4013,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",
@@ -4077,6 +4078,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();
@@ -4189,7 +4191,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, {
@@ -4213,7 +4215,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);
@@ -4356,7 +4358,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);
@@ -4364,7 +4366,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";
@@ -4384,7 +4386,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);
       }
@@ -4392,7 +4394,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);
@@ -4400,7 +4402,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.83.0",
+    "version": "2.84.0-alpha.0",
     "description": "",
     "main": "lib/index.js",
     "module": "lib/index.js",
@@ -53,5 +53,5 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "3f9dd0b1ab03a7ad2e57ec58f4c4eb43c70a817e"
+    "gitHead": "85d5331857a631b0ec37f88bea34bfad34cb2dcb"
 }