@uiw/react-json-view 1.8.5 → 1.9.0

package/README.md

@@ -452,8 +452,9 @@ export default function Demo() {
 ## Editor JSON
 
 ```tsx mdx:preview
-import React from 'react';
+import React, { useRef } from 'react';
 import JsonViewEditor from '@uiw/react-json-view/editor';
+import { type SemicolonProps, useHighlight } from '@uiw/react-json-view';
 
 const object = {
   string: 'Lorem ipsum dolor sit amet',
@@ -472,12 +473,14 @@ const object = {
   nestedArray: [ [1, 2], [3, 4], { a: 1} ],
 }
 
-const ObjectKey = ({ value, keyName, parentName, parentValue, ...reset }) => {
+const ObjectKey: SemicolonProps['render'] = ({ value, keyName, parentName, ...props }) => {
+  const $edit = useRef<HTMLSpanElement & HTMLModElement>(null);
+  useHighlight({ value, highlightUpdates: true, highlightContainer: $edit });
   if (keyName === 'integer' && typeof value === 'number' && value > 40) {
-    return <del {...reset} />
+    return <del {...props} ref={$edit} />;
   }
-  return <span {...reset} />
-};
+  return <span {...props} ref={$edit} />;
+}
 
 export default function Demo() {
   return (
@@ -663,6 +666,8 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
   displayDataTypes?: boolean;
   /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
   displayObjectSize?: boolean;
+  /** Shorten long JSON strings, Set to `0` to disable this feature @default 20 */
+  shortenTextAfterLength?: number;
   /** Define the root node name. @default undefined */
   keyName?: string | number;
   /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
@@ -721,7 +726,7 @@ export interface CountInfoProps {
 ```ts
 import { JsonViewProps } from '@uiw/react-json-view';
 import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
-export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
+export interface JsonViewEditorProps<T extends object> extends Omit<JsonViewProps<T>, 'shortenTextAfterLength'> {
   /**
    * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
    * @returns {boolean}  Returning false from onEdit will prevent the change from being made.

package/cjs/editor/countInfoExtra.js

@@ -15,6 +15,7 @@ var _add = require("./icon/add");
 var _delete = require("./icon/delete");
 var _jsxRuntime = require("react/jsx-runtime");
 function CountInfoExtra(props) {
+  var _ref, _ref2;
   var visible = props.visible,
     showTools = props.showTools,
     editable = props.editable,
@@ -27,8 +28,8 @@ function CountInfoExtra(props) {
     onAdd = props.onAdd,
     onDelete = props.onDelete;
   if (!visible || !showTools) return null;
-  var click = /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee(event) {
+  var click = function click(_x) {
+    return (_ref = _ref || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee(event) {
       var keyOrValue, isArray, isAdd, result, maybeAdd;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -54,13 +55,10 @@ function CountInfoExtra(props) {
             return _context.stop();
         }
       }, _callee);
-    }));
-    return function click(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-  var deleteHandle = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(event) {
+    }))).apply(this, arguments);
+  };
+  var deleteHandle = function deleteHandle(_x2) {
+    return (_ref2 = _ref2 || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(event) {
       var maybeDelete;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
@@ -90,11 +88,8 @@ function CountInfoExtra(props) {
             return _context2.stop();
         }
       }, _callee2);
-    }));
-    return function deleteHandle(_x2) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+    }))).apply(this, arguments);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [editable && onAdd && /*#__PURE__*/(0, _jsxRuntime.jsx)(_add.AddIcon, {
       onClick: click

package/cjs/editor/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { JsonViewProps } from '../';
 import type { CountInfoExtraProps } from './countInfoExtra';
-export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
+export interface JsonViewEditorProps<T extends object> extends Omit<JsonViewProps<T>, 'shortenTextAfterLength'> {
     /**
      * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
      * @returns {boolean}  Returning false from onEdit will prevent the change from being made.

package/cjs/editor/objectKey.js

@@ -16,6 +16,7 @@ var _value = require("../value");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["className", "value", "keyName", "parentName", "quotes", "label", "namespace", "editableValue", "onEdit", "highlightUpdates", "render"];
 var ObjectKey = function ObjectKey(props) {
+  var _ref;
   var className = props.className,
     value = props.value,
     keyName = props.keyName,
@@ -58,8 +59,8 @@ var ObjectKey = function ObjectKey(props) {
       (_$edit$current = $edit.current) === null || _$edit$current === void 0 || _$edit$current.focus();
     }
   };
-  var blur = /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
+  var blur = function blur() {
+    return (_ref = _ref || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
       var _$edit$current2, result;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -98,11 +99,8 @@ var ObjectKey = function ObjectKey(props) {
             return _context.stop();
         }
       }, _callee);
-    }));
-    return function blur() {
-      return _ref.apply(this, arguments);
-    };
-  }();
+    }))).apply(this, arguments);
+  };
   var focus = function focus() {
     if ($edit.current) {
       var _$edit$current3;

package/cjs/editor/value.js

@@ -27,7 +27,7 @@ var Quotes = function Quotes(_ref) {
   });
 };
 function ReValue(props) {
-  var _typeMap$typeStr;
+  var _ref2, _typeMap$typeStr, _ref3;
   var type = props.type,
     value = props.value,
     setValue = props.setValue,
@@ -81,8 +81,8 @@ function ReValue(props) {
       }
     }
   };
-  var blur = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
+  var blur = function blur() {
+    return (_ref2 = _ref2 || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
       var text, _typeStr, dt, result, _getValueString, oldChildStr;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -158,11 +158,8 @@ function ReValue(props) {
             return _context.stop();
         }
       }, _callee);
-    }));
-    return function blur() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+    }))).apply(this, arguments);
+  };
   var defaultStyle = {
     minWidth: 34,
     minHeight: 18,
@@ -189,8 +186,8 @@ function ReValue(props) {
   if (typeStr === 'null' || typeStr === 'undefined') {
     typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
   }
-  var deleteHandle = /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(evn) {
+  var deleteHandle = function deleteHandle(_x) {
+    return (_ref3 = _ref3 || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(evn) {
       var maybeDelete;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
@@ -215,11 +212,8 @@ function ReValue(props) {
             return _context2.stop();
         }
       }, _callee2);
-    }));
-    return function deleteHandle(_x) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
+    }))).apply(this, arguments);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && typeView, /*#__PURE__*/(0, _jsxRuntime.jsx)(Quotes, {
       style: style,

package/cjs/index.d.ts

@@ -7,6 +7,7 @@ import type { MetaProps } from './comps/meta';
 import type { CountInfoExtraProps } from './editor/countInfoExtra';
 export * from './node';
 export * from './value';
+export * from './semicolon';
 export interface CountInfoProps {
     count: number;
     level: number;
@@ -32,6 +33,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     displayDataTypes?: boolean;
     /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
     displayObjectSize?: boolean;
+    /** Shorten long JSON strings, Set to `0` to disable this feature @default 20 */
+    shortenTextAfterLength?: number;
     /** Define the root node name. @default undefined */
     keyName?: string | number;
     /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */

package/cjs/index.js

@@ -35,6 +35,18 @@ Object.keys(_value).forEach(function (key) {
     }
   });
 });
+var _semicolon = require("./semicolon");
+Object.keys(_semicolon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _semicolon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _semicolon[key];
+    }
+  });
+});
 var _excluded = ["value", "style", "className"];
 var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var value = props.value,

package/cjs/node.js

@@ -19,7 +19,7 @@ var _copied = require("./copied");
 var _ellipsis = require("./comps/ellipsis");
 var _meta = require("./comps/meta");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "collapsed", "level", "keyid", "quotes", "namespace", "onCopied", "onExpand", "parentValue", "setParentValue"];
+var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "shortenTextAfterLength", "collapsed", "level", "keyid", "quotes", "namespace", "onCopied", "onExpand", "parentValue", "setParentValue"];
 function getLength(obj) {
   try {
     return Object.keys(obj).length;
@@ -61,6 +61,8 @@ var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     objectSortKeys = _props$objectSortKeys === void 0 ? false : _props$objectSortKeys,
     _props$indentWidth = props.indentWidth,
     indentWidth = _props$indentWidth === void 0 ? 15 : _props$indentWidth,
+    _props$shortenTextAft = props.shortenTextAfterLength,
+    shortenTextAfterLength = _props$shortenTextAft === void 0 ? 20 : _props$shortenTextAft,
     collapsed = props.collapsed,
     _props$level = props.level,
     level = _props$level === void 0 ? 1 : _props$level,
@@ -114,6 +116,7 @@ var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     displayDataTypes: displayDataTypes,
     displayObjectSize: displayObjectSize,
     enableClipboard: enableClipboard,
+    shortenTextAfterLength: shortenTextAfterLength,
     level: level + 1,
     parentValue: value,
     indentWidth: indentWidth,

package/cjs/value.d.ts

@@ -55,6 +55,7 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     enableClipboard: boolean;
     indentWidth: number;
     level?: number;
+    shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
     namespace?: Array<string | number>;
     quotes?: JsonViewProps<T>['quotes'];
     components?: JsonViewProps<T>['components'];

package/cjs/value.js

@@ -17,8 +17,10 @@ var _meta = require("./comps/meta");
 var _copied = require("./copied");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "style"],
-  _excluded2 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "namespace", "renderKey", "components", "quotes", "level", "enableClipboard", "displayObjectSize", "displayDataTypes"],
-  _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
+  _excluded2 = ["children", "length", "style"],
+  _excluded3 = ["color", "style", "isURL", "href", "children"],
+  _excluded4 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "namespace", "renderKey", "components", "quotes", "level", "enableClipboard", "displayObjectSize", "displayDataTypes", "shortenTextAfterLength"],
+  _excluded5 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
 var Line = function Line(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])({}, props));
 };
@@ -127,6 +129,55 @@ function getValueString(value) {
     content: content
   };
 }
+var RenderShortenTextValue = function RenderShortenTextValue(_ref2) {
+  var children = _ref2.children,
+    length = _ref2.length,
+    style = _ref2.style,
+    rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+  var childrenStr = children;
+  var _useState = (0, _react.useState)(length && childrenStr.length >= length),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    shorten = _useState2[0],
+    setShorten = _useState2[1];
+  var click = function click() {
+    console.log(shorten);
+    if (length && childrenStr.length <= length) return setShorten(false);
+    setShorten(!shorten);
+  };
+  var text = shorten ? "".concat(childrenStr.slice(0, length), "...") : childrenStr;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderStringValue, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, rest), {}, {
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
+      cursor: 'pointer'
+    }),
+    onClick: click,
+    children: text
+  }));
+};
+RenderShortenTextValue.displayName = 'JVR.RenderShortenTextValue';
+var RenderStringValue = function RenderStringValue(_ref3) {
+  var color = _ref3.color,
+    style = _ref3.style,
+    isURL = _ref3.isURL,
+    href = _ref3.href,
+    children = _ref3.children,
+    rest = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    color: color,
+    style: style
+  }, rest), {}, {
+    className: "w-rjv-value",
+    children: [isURL && /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+      href: href,
+      style: {
+        color: color
+      },
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: children
+    }), !isURL && children]
+  }));
+};
+RenderStringValue.displayName = 'JVR.RenderStringValue';
 function ValueView(props) {
   var _typeMap$type;
   var value = props.value,
@@ -145,7 +196,8 @@ function ValueView(props) {
     enableClipboard = props.enableClipboard,
     displayObjectSize = props.displayObjectSize,
     displayDataTypes = props.displayDataTypes,
-    reset = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+    shortenTextAfterLength = props.shortenTextAfterLength,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded4);
   var color = '';
   var style = {};
   var _getValueString = getValueString(value),
@@ -168,10 +220,10 @@ function ValueView(props) {
     typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
   }
   color = ((_typeMap$type = typeMap[type]) === null || _typeMap$type === void 0 ? void 0 : _typeMap$type.color) || '';
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    showTools = _useState2[0],
-    setShowTools = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    showTools = _useState4[0],
+    setShowTools = _useState4[1];
   var tools = (0, _react.useMemo)(function () {
     return enableClipboard && showTools && /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
       show: showTools,
@@ -211,24 +263,24 @@ function ValueView(props) {
       content: content,
       children: content
     });
-    var valueView = reView ? reView : /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+    var valueView = shortenTextAfterLength && type === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderShortenTextValue, {
+      color: color,
+      href: isURL ? value.href : '',
+      style: style,
+      isURL: isURL,
+      length: shortenTextAfterLength,
+      children: content
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderStringValue, {
       color: color,
+      href: isURL ? value.href : '',
       style: style,
-      className: "w-rjv-value",
-      children: isURL ? /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-        href: value.href,
-        style: {
-          color: color
-        },
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children: content
-      }) : content
+      isURL: isURL,
+      children: content
     });
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, eventProps), {}, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
         ref: null,
-        children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, valueView, tools]
+        children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, reView ? reView : valueView, tools]
       }))
     }));
   }
@@ -250,14 +302,14 @@ function ValueView(props) {
   }));
 }
 ValueView.displayName = 'JVR.ValueView';
-var Label = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
-  var children = _ref2.children,
-    color = _ref2.color,
-    fontSize = _ref2.fontSize,
-    opacity = _ref2.opacity,
-    paddingRight = _ref2.paddingRight,
-    style = _ref2.style,
-    reset = (0, _objectWithoutProperties2["default"])(_ref2, _excluded3);
+var Label = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
+  var children = _ref4.children,
+    color = _ref4.color,
+    fontSize = _ref4.fontSize,
+    opacity = _ref4.opacity,
+    paddingRight = _ref4.paddingRight,
+    style = _ref4.style,
+    reset = (0, _objectWithoutProperties2["default"])(_ref4, _excluded5);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     style: (0, _objectSpread2["default"])({
       color: color,

package/esm/editor/countInfoExtra.js

@@ -6,6 +6,7 @@ import { DeleteIcon } from './icon/delete';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function CountInfoExtra(props) {
+  var _ref, _ref2;
   var {
     visible,
     showTools,
@@ -20,8 +21,8 @@ export function CountInfoExtra(props) {
     onDelete
   } = props;
   if (!visible || !showTools) return null;
-  var click = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(function* (event) {
+  var click = function click(_x) {
+    return (_ref = _ref || _asyncToGenerator(function* (event) {
       event.stopPropagation();
       var keyOrValue = 'AddKeyOrValue';
       var isArray = Array.isArray(value);
@@ -35,13 +36,10 @@ export function CountInfoExtra(props) {
           setValue(result);
         }
       }
-    });
-    return function click(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-  var deleteHandle = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(function* (event) {
+    })).apply(this, arguments);
+  };
+  var deleteHandle = function deleteHandle(_x2) {
+    return (_ref2 = _ref2 || _asyncToGenerator(function* (event) {
       event.stopPropagation();
       if (onDelete && (keyName || typeof keyName === 'number') && parentValue) {
         var maybeDelete = yield onDelete(keyName, value, parentValue, {
@@ -57,11 +55,8 @@ export function CountInfoExtra(props) {
           }
         }
       }
-    });
-    return function deleteHandle(_x2) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+    })).apply(this, arguments);
+  };
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [editable && onAdd && /*#__PURE__*/_jsx(AddIcon, {
       onClick: click

package/esm/editor/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { JsonViewProps } from '../';
 import type { CountInfoExtraProps } from './countInfoExtra';
-export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
+export interface JsonViewEditorProps<T extends object> extends Omit<JsonViewProps<T>, 'shortenTextAfterLength'> {
     /**
      * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
      * @returns {boolean}  Returning false from onEdit will prevent the change from being made.

package/esm/editor/objectKey.js

@@ -7,6 +7,7 @@ import { useHighlight } from '../semicolon';
 import { Label } from '../value';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var ObjectKey = props => {
+  var _ref;
   var {
       className,
       value,
@@ -42,8 +43,8 @@ export var ObjectKey = props => {
       (_$edit$current = $edit.current) == null || _$edit$current.focus();
     }
   };
-  var blur = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(function* () {
+  var blur = function blur() {
+    return (_ref = _ref || _asyncToGenerator(function* () {
       if ($edit.current) {
         var _$edit$current2;
         if (onEdit) {
@@ -65,11 +66,8 @@ export var ObjectKey = props => {
         (_$edit$current2 = $edit.current) == null || _$edit$current2.focus();
       }
       setEditable(false);
-    });
-    return function blur() {
-      return _ref.apply(this, arguments);
-    };
-  }();
+    })).apply(this, arguments);
+  };
   var focus = () => {
     if ($edit.current) {
       var _$edit$current3;

package/esm/editor/value.js

@@ -21,7 +21,7 @@ var Quotes = _ref => {
   });
 };
 export function ReValue(props) {
-  var _typeMap$typeStr;
+  var _ref2, _typeMap$typeStr, _ref3;
   var {
       type,
       value,
@@ -65,8 +65,8 @@ export function ReValue(props) {
       }
     }
   };
-  var blur = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(function* () {
+  var blur = function blur() {
+    return (_ref2 = _ref2 || _asyncToGenerator(function* () {
       if (!editableValue) return;
       setEditable(false);
       if ($edit.current) {
@@ -123,11 +123,8 @@ export function ReValue(props) {
           }
         }
       }
-    });
-    return function blur() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+    })).apply(this, arguments);
+  };
   var defaultStyle = {
     minWidth: 34,
     minHeight: 18,
@@ -155,8 +152,8 @@ export function ReValue(props) {
   if (typeStr === 'null' || typeStr === 'undefined') {
     typeView = /*#__PURE__*/_jsx(Fragment, {});
   }
-  var deleteHandle = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(function* (evn) {
+  var deleteHandle = function deleteHandle(_x) {
+    return (_ref3 = _ref3 || _asyncToGenerator(function* (evn) {
       evn.stopPropagation();
       if (data && keyName && keyName in data && setValue && onDelete) {
         var maybeDelete = yield onDelete(keyName, value, parentValue, {
@@ -167,11 +164,8 @@ export function ReValue(props) {
           setValue(_extends({}, data));
         }
       }
-    });
-    return function deleteHandle(_x) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
+    })).apply(this, arguments);
+  };
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && typeView, /*#__PURE__*/_jsx(Quotes, {
       style: style,

package/esm/index.d.ts

@@ -7,6 +7,7 @@ import type { MetaProps } from './comps/meta';
 import type { CountInfoExtraProps } from './editor/countInfoExtra';
 export * from './node';
 export * from './value';
+export * from './semicolon';
 export interface CountInfoProps {
     count: number;
     level: number;
@@ -32,6 +33,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     displayDataTypes?: boolean;
     /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
     displayObjectSize?: boolean;
+    /** Shorten long JSON strings, Set to `0` to disable this feature @default 20 */
+    shortenTextAfterLength?: number;
     /** Define the root node name. @default undefined */
     keyName?: string | number;
     /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */

package/esm/index.js

@@ -7,6 +7,7 @@ import { RootNode } from './node';
 import { jsx as _jsx } from "react/jsx-runtime";
 export * from './node';
 export * from './value';
+export * from './semicolon';
 var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
   var {
       value,

package/esm/node.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "collapsed", "level", "keyid", "quotes", "namespace", "onCopied", "onExpand", "parentValue", "setParentValue"];
+var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "shortenTextAfterLength", "collapsed", "level", "keyid", "quotes", "namespace", "onCopied", "onExpand", "parentValue", "setParentValue"];
 import { Fragment, useId, cloneElement, useState, useEffect, forwardRef } from 'react';
 import { ValueView, Colon, Label, Line, typeMap } from './value';
 import { TriangleArrow } from './arrow/TriangleArrow';
@@ -46,6 +46,7 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
       highlightUpdates = true,
       objectSortKeys = false,
       indentWidth = 15,
+      shortenTextAfterLength = 20,
       collapsed,
       level = 1,
       keyid = 'root',
@@ -93,6 +94,7 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
     displayDataTypes,
     displayObjectSize,
     enableClipboard,
+    shortenTextAfterLength,
     level: level + 1,
     parentValue: value,
     indentWidth,

package/esm/value.d.ts

@@ -55,6 +55,7 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     enableClipboard: boolean;
     indentWidth: number;
     level?: number;
+    shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
     namespace?: Array<string | number>;
     quotes?: JsonViewProps<T>['quotes'];
     components?: JsonViewProps<T>['components'];

package/esm/value.js

@@ -1,8 +1,10 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["children", "style"],
-  _excluded2 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "namespace", "renderKey", "components", "quotes", "level", "enableClipboard", "displayObjectSize", "displayDataTypes"],
-  _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
+  _excluded2 = ["children", "length", "style"],
+  _excluded3 = ["color", "style", "isURL", "href", "children"],
+  _excluded4 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "namespace", "renderKey", "components", "quotes", "level", "enableClipboard", "displayObjectSize", "displayDataTypes", "shortenTextAfterLength"],
+  _excluded5 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
 import { Fragment, forwardRef, useMemo, useState } from 'react';
 import { Meta } from './comps/meta';
 import { Copied } from './copied';
@@ -109,6 +111,56 @@ export function getValueString(value) {
     content
   };
 }
+var RenderShortenTextValue = _ref2 => {
+  var {
+      children,
+      length,
+      style
+    } = _ref2,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  var childrenStr = children;
+  var [shorten, setShorten] = useState(length && childrenStr.length >= length);
+  var click = () => {
+    console.log(shorten);
+    if (length && childrenStr.length <= length) return setShorten(false);
+    setShorten(!shorten);
+  };
+  var text = shorten ? childrenStr.slice(0, length) + "..." : childrenStr;
+  return /*#__PURE__*/_jsx(RenderStringValue, _extends({}, rest, {
+    style: _extends({}, style, {
+      cursor: 'pointer'
+    }),
+    onClick: click,
+    children: text
+  }));
+};
+RenderShortenTextValue.displayName = 'JVR.RenderShortenTextValue';
+var RenderStringValue = _ref3 => {
+  var {
+      color,
+      style,
+      isURL,
+      href,
+      children
+    } = _ref3,
+    rest = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  return /*#__PURE__*/_jsxs(Label, _extends({
+    color: color,
+    style: style
+  }, rest, {
+    className: "w-rjv-value",
+    children: [isURL && /*#__PURE__*/_jsx("a", {
+      href: href,
+      style: {
+        color
+      },
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: children
+    }), !isURL && children]
+  }));
+};
+RenderStringValue.displayName = 'JVR.RenderStringValue';
 export function ValueView(props) {
   var _typeMap$type;
   var {
@@ -124,9 +176,10 @@ export function ValueView(props) {
       components = {},
       quotes,
       enableClipboard,
-      displayDataTypes
+      displayDataTypes,
+      shortenTextAfterLength
     } = props,
-    reset = _objectWithoutPropertiesLoose(props, _excluded2);
+    reset = _objectWithoutPropertiesLoose(props, _excluded4);
   var color = '';
   var style = {};
   var {
@@ -184,24 +237,24 @@ export function ValueView(props) {
       content,
       children: content
     });
-    var valueView = reView ? reView : /*#__PURE__*/_jsx(Label, {
+    var valueView = shortenTextAfterLength && type === 'string' ? /*#__PURE__*/_jsx(RenderShortenTextValue, {
+      color: color,
+      href: isURL ? value.href : '',
+      style: style,
+      isURL: isURL,
+      length: shortenTextAfterLength,
+      children: content
+    }) : /*#__PURE__*/_jsx(RenderStringValue, {
       color: color,
+      href: isURL ? value.href : '',
       style: style,
-      className: "w-rjv-value",
-      children: isURL ? /*#__PURE__*/_jsx("a", {
-        href: value.href,
-        style: {
-          color
-        },
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children: content
-      }) : content
+      isURL: isURL,
+      children: content
     });
     return /*#__PURE__*/_jsx(Line, _extends({}, eventProps, {
       children: /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
         ref: null,
-        children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, valueView, tools]
+        children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, reView ? reView : valueView, tools]
       }))
     }));
   }
@@ -223,7 +276,7 @@ export function ValueView(props) {
   }));
 }
 ValueView.displayName = 'JVR.ValueView';
-export var Label = /*#__PURE__*/forwardRef((_ref2, ref) => {
+export var Label = /*#__PURE__*/forwardRef((_ref4, ref) => {
   var {
       children,
       color,
@@ -231,8 +284,8 @@ export var Label = /*#__PURE__*/forwardRef((_ref2, ref) => {
       opacity,
       paddingRight,
       style
-    } = _ref2,
-    reset = _objectWithoutPropertiesLoose(_ref2, _excluded3);
+    } = _ref4,
+    reset = _objectWithoutPropertiesLoose(_ref4, _excluded5);
   return /*#__PURE__*/_jsx("span", _extends({
     style: _extends({
       color,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "1.8.5",
+  "version": "1.9.0",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",