@uiw/react-json-view 1.8.4 → 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/arrow/TriangleArrow.d.ts

@@ -2,3 +2,6 @@ import React from 'react';
 export interface TriangleArrowProps extends React.SVGProps<SVGSVGElement> {
 }
 export declare function TriangleArrow(props: TriangleArrowProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TriangleArrow {
+    var displayName: string;
+}

package/cjs/arrow/TriangleArrow.js

@@ -27,4 +27,5 @@ function TriangleArrow(props) {
       d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
     })
   }));
-}
+}
+TriangleArrow.displayName = 'JVR.TriangleArrow';

package/cjs/arrow/TriangleSolidArrow.d.ts

@@ -2,3 +2,6 @@ import React from 'react';
 export interface TriangleSolidArrowProps extends React.SVGProps<SVGSVGElement> {
 }
 export declare function TriangleSolidArrow(props: TriangleSolidArrowProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TriangleSolidArrow {
+    var displayName: string;
+}

package/cjs/arrow/TriangleSolidArrow.js

@@ -27,4 +27,5 @@ function TriangleSolidArrow(props) {
       d: "M0 5l6 6 6-6z"
     })
   }));
-}
+}
+TriangleSolidArrow.displayName = 'JVR.TriangleSolidArrow';

package/cjs/comps/ellipsis.js

@@ -33,4 +33,5 @@ var Ellipsis = function Ellipsis(_ref) {
     children: "..."
   }));
 };
-exports.Ellipsis = Ellipsis;
+exports.Ellipsis = Ellipsis;
+Ellipsis.displayName = 'JVR.Ellipsis';

package/cjs/comps/meta.d.ts

@@ -7,3 +7,6 @@ export interface MetaProps extends LabelProps {
     render?: (props: Pick<MetaProps, 'start' | 'level' | 'isArray' | 'className' | 'children'>) => JSX.Element;
 }
 export declare function Meta(props: MetaProps): JSX.Element;
+export declare namespace Meta {
+    var displayName: string;
+}

package/cjs/comps/meta.js

@@ -42,4 +42,5 @@ function Meta(props) {
   }, reset), {}, {
     children: start ? mark.charAt(0) : mark.charAt(1)
   }));
-}
+}
+Meta.displayName = 'JVR.Meta';

package/cjs/copied.d.ts

@@ -6,3 +6,6 @@ export interface CopiedProps<T = object> extends React.SVGProps<SVGSVGElement> {
     render?: (props: Omit<CopiedProps<T>, 'render'>) => JSX.Element;
 }
 export declare function Copied<T>(props: CopiedProps<T>): JSX.Element | null;
+export declare namespace Copied {
+    var displayName: string;
+}

package/cjs/copied.js

@@ -74,4 +74,5 @@ function Copied(props) {
       d: "M27.5,33 L2.5,33 L2.5,12.5 L27.5,12.5 L27.5,20 L30,20 L30,7.5 C30,6.1 28.9,5 27.5,5 L20,5 C20,2.2 17.8,0 15,0 C12.2,0 10,2.2 10,5 L2.5,5 C1.1,5 0,6.1 0,7.5 L0,33 C0,34.4 1.1,36 2.5,36 L27.5,36 C28.9,36 30,34.4 30,33 L30,29 L27.5,29 L27.5,33 Z M7.5,7.5 L10,7.5 C10,7.5 12.5,6.4 12.5,5 C12.5,3.6 13.6,2.5 15,2.5 C16.4,2.5 17.5,3.6 17.5,5 C17.5,6.4 18.8,7.5 20,7.5 L22.5,7.5 C22.5,7.5 25,8.6 25,10 L5,10 C5,8.5 6.1,7.5 7.5,7.5 Z M5,27.5 L10,27.5 L10,25 L5,25 L5,27.5 Z M22.5,21.5 L22.5,16.5 L12.5,24 L22.5,31.5 L22.5,26.5 L32,26.5 L32,21.5 L22.5,21.5 Z M17.5,15 L5,15 L5,17.5 L17.5,17.5 L17.5,15 Z M10,20 L5,20 L5,22.5 L10,22.5 L10,20 Z"
     })
   }));
-}
+}
+Copied.displayName = 'JVR.Copied';

package/cjs/editor/countInfoExtra.d.ts

@@ -23,3 +23,6 @@ export interface CountInfoExtraProps<T> extends Partial<CountInfoProps> {
     }) => boolean;
 }
 export declare function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace CountInfoExtra {
+    var displayName: string;
+}

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
@@ -102,4 +97,5 @@ function CountInfoExtra(props) {
       onClick: deleteHandle
     })]
   });
-}
+}
+CountInfoExtra.displayName = 'JVR.CountInfoExtra';

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/index.js

@@ -54,6 +54,7 @@ var JsonViewEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref
   }));
 });
+JsonViewEditor.displayName = 'JVR.JsonViewEditor';
 var _default = JsonViewEditor;
 exports["default"] = _default;
 module.exports = exports.default;

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,
@@ -55,11 +56,11 @@ var ObjectKey = function ObjectKey(props) {
     if ($edit.current) {
       var _$edit$current;
       $edit.current.contentEditable = 'true';
-      (_$edit$current = $edit.current) === null || _$edit$current === void 0 ? void 0 : _$edit$current.focus();
+      (_$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) {
@@ -90,7 +91,7 @@ var ObjectKey = function ObjectKey(props) {
             }
           case 6:
             $edit.current.contentEditable = 'false';
-            (_$edit$current2 = $edit.current) === null || _$edit$current2 === void 0 ? void 0 : _$edit$current2.focus();
+            (_$edit$current2 = $edit.current) === null || _$edit$current2 === void 0 || _$edit$current2.focus();
           case 8:
             setEditable(false);
           case 9:
@@ -98,16 +99,13 @@ 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;
       $edit.current.contentEditable = 'true';
-      (_$edit$current3 = $edit.current) === null || _$edit$current3 === void 0 ? void 0 : _$edit$current3.focus();
+      (_$edit$current3 = $edit.current) === null || _$edit$current3 === void 0 || _$edit$current3.focus();
     }
   };
   var keyDown = function keyDown(evn) {
@@ -167,4 +165,5 @@ var ObjectKey = function ObjectKey(props) {
     ref: $edit
   }));
 };
-exports.ObjectKey = ObjectKey;
+exports.ObjectKey = ObjectKey;
+ObjectKey.displayName = 'JVR.ObjectKey';

package/cjs/editor/value.d.ts

@@ -17,3 +17,6 @@ export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTM
     onDelete?: JsonViewEditorProps<T>['onDelete'];
 }
 export declare function ReValue<T extends object>(props: ReValueProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ReValue {
+    var displayName: string;
+}

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,
@@ -67,7 +67,7 @@ function ReValue(props) {
       var _$edit$current;
       setEditable(true);
       $edit.current.setAttribute('contentEditable', 'true');
-      (_$edit$current = $edit.current) === null || _$edit$current === void 0 ? void 0 : _$edit$current.focus();
+      (_$edit$current = $edit.current) === null || _$edit$current === void 0 || _$edit$current.focus();
     }
   };
   var keyDown = function keyDown(evn) {
@@ -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,
@@ -239,4 +233,5 @@ function ReValue(props) {
       onClick: deleteHandle
     })]
   });
-}
+}
+ReValue.displayName = 'JVR.ReValue';

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,
@@ -58,5 +70,6 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     style: defaultStyle
   }));
 });
+JsonView.displayName = 'JVR.JsonView';
 var _default = JsonView;
 exports["default"] = _default;

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;
@@ -40,6 +40,7 @@ var CountInfo = function CountInfo(_ref) {
   });
 };
 exports.CountInfo = CountInfo;
+CountInfo.displayName = 'JVR.CountInfo';
 var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _expands$keyid;
   var _props$value = props.value,
@@ -60,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,
@@ -113,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,
@@ -321,4 +325,5 @@ var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     })]
   }));
 });
-exports.RootNode = RootNode;
+exports.RootNode = RootNode;
+RootNode.displayName = 'JVR.RootNode';

package/cjs/semicolon.js

@@ -111,4 +111,5 @@ var Semicolon = function Semicolon(_ref2) {
     children: content
   }));
 };
-exports.Semicolon = Semicolon;
+exports.Semicolon = Semicolon;
+Semicolon.displayName = 'JSR.Semicolon';

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'];
@@ -67,6 +68,9 @@ export declare function getValueString<T>(value: T): {
     content: string;
 };
 export declare function ValueView<T extends object>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ValueView {
+    var displayName: string;
+}
 export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
     color?: string;
     fontSize?: number;

package/cjs/value.js

@@ -17,12 +17,15 @@ 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));
 };
 exports.Line = Line;
+Line.displayName = 'JVR.Line';
 var isFloat = function isFloat(n) {
   return Number(n) === n && n % 1 !== 0 || isNaN(n);
 };
@@ -85,6 +88,7 @@ var Colon = function Colon(_ref) {
   }));
 };
 exports.Colon = Colon;
+Colon.displayName = 'JVR.Colon';
 function getValueString(value) {
   var type = (0, _typeof2["default"])(value);
   var content = '';
@@ -125,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,
@@ -143,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),
@@ -166,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,
@@ -209,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]
       }))
     }));
   }
@@ -247,14 +301,15 @@ function ValueView(props) {
     }))
   }));
 }
-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);
+ValueView.displayName = 'JVR.ValueView';
+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,
@@ -268,6 +323,7 @@ var Label = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   }));
 });
 exports.Label = Label;
+Label.displayName = 'JVR.Label';
 var Type = function Type(props) {
   var _typeMap$type2, _typeMap$type3;
   var type = props.type;
@@ -285,4 +341,5 @@ var Type = function Type(props) {
     });
   }
 };
-exports.Type = Type;
+exports.Type = Type;
+Type.displayName = 'JVR.Type';

package/esm/arrow/TriangleArrow.d.ts

@@ -2,3 +2,6 @@ import React from 'react';
 export interface TriangleArrowProps extends React.SVGProps<SVGSVGElement> {
 }
 export declare function TriangleArrow(props: TriangleArrowProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TriangleArrow {
+    var displayName: string;
+}

package/esm/arrow/TriangleArrow.js

@@ -22,4 +22,5 @@ export function TriangleArrow(props) {
       d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
     })
   }));
-}
+}
+TriangleArrow.displayName = 'JVR.TriangleArrow';

package/esm/arrow/TriangleSolidArrow.d.ts

@@ -2,3 +2,6 @@ import React from 'react';
 export interface TriangleSolidArrowProps extends React.SVGProps<SVGSVGElement> {
 }
 export declare function TriangleSolidArrow(props: TriangleSolidArrowProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TriangleSolidArrow {
+    var displayName: string;
+}

package/esm/arrow/TriangleSolidArrow.js

@@ -22,4 +22,5 @@ export function TriangleSolidArrow(props) {
       d: "M0 5l6 6 6-6z"
     })
   }));
-}
+}
+TriangleSolidArrow.displayName = 'JVR.TriangleSolidArrow';

package/esm/comps/ellipsis.js

@@ -27,4 +27,5 @@ export var Ellipsis = _ref => {
   }, props, {
     children: "..."
   }));
-};
+};
+Ellipsis.displayName = 'JVR.Ellipsis';

package/esm/comps/meta.d.ts

@@ -7,3 +7,6 @@ export interface MetaProps extends LabelProps {
     render?: (props: Pick<MetaProps, 'start' | 'level' | 'isArray' | 'className' | 'children'>) => JSX.Element;
 }
 export declare function Meta(props: MetaProps): JSX.Element;
+export declare namespace Meta {
+    var displayName: string;
+}

package/esm/comps/meta.js

@@ -35,4 +35,5 @@ export function Meta(props) {
   }, reset, {
     children: start ? mark.charAt(0) : mark.charAt(1)
   }));
-}
+}
+Meta.displayName = 'JVR.Meta';

package/esm/copied.d.ts

@@ -6,3 +6,6 @@ export interface CopiedProps<T = object> extends React.SVGProps<SVGSVGElement> {
     render?: (props: Omit<CopiedProps<T>, 'render'>) => JSX.Element;
 }
 export declare function Copied<T>(props: CopiedProps<T>): JSX.Element | null;
+export declare namespace Copied {
+    var displayName: string;
+}

package/esm/copied.js

@@ -63,4 +63,5 @@ export function Copied(props) {
       d: "M27.5,33 L2.5,33 L2.5,12.5 L27.5,12.5 L27.5,20 L30,20 L30,7.5 C30,6.1 28.9,5 27.5,5 L20,5 C20,2.2 17.8,0 15,0 C12.2,0 10,2.2 10,5 L2.5,5 C1.1,5 0,6.1 0,7.5 L0,33 C0,34.4 1.1,36 2.5,36 L27.5,36 C28.9,36 30,34.4 30,33 L30,29 L27.5,29 L27.5,33 Z M7.5,7.5 L10,7.5 C10,7.5 12.5,6.4 12.5,5 C12.5,3.6 13.6,2.5 15,2.5 C16.4,2.5 17.5,3.6 17.5,5 C17.5,6.4 18.8,7.5 20,7.5 L22.5,7.5 C22.5,7.5 25,8.6 25,10 L5,10 C5,8.5 6.1,7.5 7.5,7.5 Z M5,27.5 L10,27.5 L10,25 L5,25 L5,27.5 Z M22.5,21.5 L22.5,16.5 L12.5,24 L22.5,31.5 L22.5,26.5 L32,26.5 L32,21.5 L22.5,21.5 Z M17.5,15 L5,15 L5,17.5 L17.5,17.5 L17.5,15 Z M10,20 L5,20 L5,22.5 L10,22.5 L10,20 Z"
     })
   }));
-}
+}
+Copied.displayName = 'JVR.Copied';

package/esm/editor/countInfoExtra.d.ts

@@ -23,3 +23,6 @@ export interface CountInfoExtraProps<T> extends Partial<CountInfoProps> {
     }) => boolean;
 }
 export declare function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace CountInfoExtra {
+    var displayName: string;
+}

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
@@ -69,4 +64,5 @@ export function CountInfoExtra(props) {
       onClick: deleteHandle
     })]
   });
-}
+}
+CountInfoExtra.displayName = 'JVR.CountInfoExtra';

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/index.js

@@ -43,4 +43,5 @@ var JsonViewEditor = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }));
 });
+JsonViewEditor.displayName = 'JVR.JsonViewEditor';
 export default JsonViewEditor;

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,
@@ -39,11 +40,11 @@ export var ObjectKey = props => {
     if ($edit.current) {
       var _$edit$current;
       $edit.current.contentEditable = 'true';
-      (_$edit$current = $edit.current) == null ? void 0 : _$edit$current.focus();
+      (_$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) {
@@ -62,19 +63,16 @@ export var ObjectKey = props => {
           }
         }
         $edit.current.contentEditable = 'false';
-        (_$edit$current2 = $edit.current) == null ? void 0 : _$edit$current2.focus();
+        (_$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;
       $edit.current.contentEditable = 'true';
-      (_$edit$current3 = $edit.current) == null ? void 0 : _$edit$current3.focus();
+      (_$edit$current3 = $edit.current) == null || _$edit$current3.focus();
     }
   };
   var keyDown = evn => {
@@ -133,4 +131,5 @@ export var ObjectKey = props => {
   }, spanProps, {
     ref: $edit
   }));
-};
+};
+ObjectKey.displayName = 'JVR.ObjectKey';

package/esm/editor/value.d.ts

@@ -17,3 +17,6 @@ export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTM
     onDelete?: JsonViewEditorProps<T>['onDelete'];
 }
 export declare function ReValue<T extends object>(props: ReValueProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ReValue {
+    var displayName: string;
+}

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,
@@ -51,7 +51,7 @@ export function ReValue(props) {
       var _$edit$current;
       setEditable(true);
       $edit.current.setAttribute('contentEditable', 'true');
-      (_$edit$current = $edit.current) == null ? void 0 : _$edit$current.focus();
+      (_$edit$current = $edit.current) == null || _$edit$current.focus();
     }
   };
   var keyDown = evn => {
@@ -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,
@@ -191,4 +185,5 @@ export function ReValue(props) {
       onClick: deleteHandle
     })]
   });
-}
+}
+ReValue.displayName = 'JVR.ReValue';

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,
@@ -31,4 +32,5 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
     style: defaultStyle
   }));
 });
+JsonView.displayName = 'JVR.JsonView';
 export default JsonView;

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';
@@ -32,6 +32,7 @@ export var CountInfo = _ref => {
     children: [children, " items"]
   });
 };
+CountInfo.displayName = 'JVR.CountInfo';
 export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
   var _expands$keyid;
   var {
@@ -45,6 +46,7 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
       highlightUpdates = true,
       objectSortKeys = false,
       indentWidth = 15,
+      shortenTextAfterLength = 20,
       collapsed,
       level = 1,
       keyid = 'root',
@@ -92,6 +94,7 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
     displayDataTypes,
     displayObjectSize,
     enableClipboard,
+    shortenTextAfterLength,
     level: level + 1,
     parentValue: value,
     indentWidth,
@@ -280,4 +283,5 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
       })
     })]
   }));
-});
+});
+RootNode.displayName = 'JVR.RootNode';

package/esm/semicolon.js

@@ -102,4 +102,5 @@ export var Semicolon = _ref2 => {
     ref: highlightContainer,
     children: content
   }));
-};
+};
+Semicolon.displayName = 'JSR.Semicolon';

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'];
@@ -67,6 +68,9 @@ export declare function getValueString<T>(value: T): {
     content: string;
 };
 export declare function ValueView<T extends object>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ValueView {
+    var displayName: string;
+}
 export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
     color?: string;
     fontSize?: number;

package/esm/value.js

@@ -1,14 +1,17 @@
 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';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var Line = props => /*#__PURE__*/_jsx("div", _extends({}, props));
+Line.displayName = 'JVR.Line';
 export var isFloat = n => Number(n) === n && n % 1 !== 0 || isNaN(n);
 export var typeMap = {
   string: {
@@ -67,6 +70,7 @@ export var Colon = _ref => {
     children: children
   }));
 };
+Colon.displayName = 'JVR.Colon';
 export function getValueString(value) {
   var type = typeof value;
   var content = '';
@@ -107,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 {
@@ -122,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 {
@@ -182,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,
-      className: "w-rjv-value",
-      children: isURL ? /*#__PURE__*/_jsx("a", {
-        href: value.href,
-        style: {
-          color
-        },
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children: content
-      }) : content
+      isURL: isURL,
+      length: shortenTextAfterLength,
+      children: content
+    }) : /*#__PURE__*/_jsx(RenderStringValue, {
+      color: color,
+      href: isURL ? value.href : '',
+      style: style,
+      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]
       }))
     }));
   }
@@ -220,7 +275,8 @@ export function ValueView(props) {
     }))
   }));
 }
-export var Label = /*#__PURE__*/forwardRef((_ref2, ref) => {
+ValueView.displayName = 'JVR.ValueView';
+export var Label = /*#__PURE__*/forwardRef((_ref4, ref) => {
   var {
       children,
       color,
@@ -228,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,
@@ -242,6 +298,7 @@ export var Label = /*#__PURE__*/forwardRef((_ref2, ref) => {
     children: children
   }));
 });
+Label.displayName = 'JVR.Label';
 export var Type = props => {
   var _typeMap$type2, _typeMap$type3;
   var {
@@ -260,4 +317,5 @@ export var Type = props => {
       children: label
     });
   }
-};
+};
+Type.displayName = 'JVR.Type';

package/package.json

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