@uiw/react-json-view - npm Package Compare versions

Comparing version 1.8.5 to 1.9.0

cjs/editor/countInfoExtra.js

@@ -18,2 +18,3 @@ "use strict";
 function CountInfoExtra(props) {
+  var _ref, _ref2;
   var visible = props.visible,
@@ -31,4 +32,4 @@ showTools = props.showTools,
   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;
@@ -59,9 +60,6 @@ return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
       }, _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;
@@ -96,7 +94,4 @@ return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
       }, _callee2);
-    }));
-    return function deleteHandle(_x2) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+    }))).apply(this, arguments);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
@@ -103,0 +98,0 @@ children: [editable && onAdd && /*#__PURE__*/(0, _jsxRuntime.jsx)(_add.AddIcon, {

cjs/editor/index.d.ts

 /// <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'> {
     /**
@@ -6,0 +6,0 @@ * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.

cjs/editor/objectKey.js

@@ -19,2 +19,3 @@ "use strict";
 var ObjectKey = function ObjectKey(props) {
+  var _ref;
   var className = props.className,
@@ -62,4 +63,4 @@ value = props.value,
   };
-  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;
@@ -103,7 +104,4 @@ return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
       }, _callee);
-    }));
-    return function blur() {
-      return _ref.apply(this, arguments);
-    };
-  }();
+    }))).apply(this, arguments);
+  };
   var focus = function focus() {
@@ -110,0 +108,0 @@ if ($edit.current) {

cjs/editor/value.js

@@ -30,3 +30,3 @@ "use strict";
 function ReValue(props) {
-  var _typeMap$typeStr;
+  var _ref2, _typeMap$typeStr, _ref3;
   var type = props.type,
@@ -85,4 +85,4 @@ value = props.value,
   };
-  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;
@@ -163,7 +163,4 @@ return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
       }, _callee);
-    }));
-    return function blur() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+    }))).apply(this, arguments);
+  };
   var defaultStyle = {
@@ -195,4 +192,4 @@ minWidth: 34,
   }
-  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;
@@ -222,7 +219,4 @@ return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
       }, _callee2);
-    }));
-    return function deleteHandle(_x) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
+    }))).apply(this, arguments);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
@@ -229,0 +223,0 @@ children: [displayDataTypes && typeView, /*#__PURE__*/(0, _jsxRuntime.jsx)(Quotes, {

cjs/index.d.ts

@@ -10,2 +10,3 @@ import React from 'react';
 export * from './value';
+export * from './semicolon';
 export interface CountInfoProps {
@@ -36,2 +37,4 @@ count: number;
     displayObjectSize?: boolean;
+    /** Shorten long JSON strings, Set to `0` to disable this feature @default 20 */
+    shortenTextAfterLength?: number;
     /** Define the root node name. @default undefined */
@@ -38,0 +41,0 @@ keyName?: string | number;

cjs/index.js

@@ -38,2 +38,14 @@ "use strict";
 });
+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"];
@@ -40,0 +52,0 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {

cjs/node.js

@@ -22,3 +22,3 @@ "use strict";
 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) {
@@ -65,2 +65,4 @@ try {
     indentWidth = _props$indentWidth === void 0 ? 15 : _props$indentWidth,
+    _props$shortenTextAft = props.shortenTextAfterLength,
+    shortenTextAfterLength = _props$shortenTextAft === void 0 ? 20 : _props$shortenTextAft,
     collapsed = props.collapsed,
@@ -119,2 +121,3 @@ _props$level = props.level,
     enableClipboard: enableClipboard,
+    shortenTextAfterLength: shortenTextAfterLength,
     level: level + 1,
@@ -121,0 +124,0 @@ parentValue: value,

cjs/value.d.ts

@@ -58,2 +58,3 @@ import type { FC, PropsWithChildren } from 'react';
     level?: number;
+    shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
     namespace?: Array<string | number>;
@@ -60,0 +61,0 @@ quotes?: JsonViewProps<T>['quotes'];

cjs/value.js

@@ -20,4 +20,6 @@ "use strict";
 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) {
@@ -131,2 +133,51 @@ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])({}, props));
 }
+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) {
@@ -150,3 +201,4 @@ var _typeMap$type;
     displayDataTypes = props.displayDataTypes,
-    reset = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+    shortenTextAfterLength = props.shortenTextAfterLength,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded4);
   var color = '';
@@ -174,6 +226,6 @@ var style = {};
   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 () {
@@ -218,15 +270,15 @@ return enableClipboard && showTools && /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
     });
-    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,
-      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,
+      length: shortenTextAfterLength,
+      children: content
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderStringValue, {
+      color: color,
+      href: isURL ? value.href : '',
+      style: style,
+      isURL: isURL,
+      children: content
     });
@@ -236,3 +288,3 @@ return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, eventProps), {}, {
         ref: null,
-        children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, valueView, tools]
+        children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, reView ? reView : valueView, tools]
       }))
@@ -259,10 +311,10 @@ }));
 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"])({
@@ -269,0 +321,0 @@ style: (0, _objectSpread2["default"])({

esm/editor/countInfoExtra.js

@@ -9,2 +9,3 @@ import _extends from "@babel/runtime/helpers/extends";
 export function CountInfoExtra(props) {
+  var _ref, _ref2;
   var {
@@ -24,4 +25,4 @@ visible,
   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();
@@ -40,9 +41,6 @@ var keyOrValue = 'AddKeyOrValue';
       }
-    });
-    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();
@@ -63,7 +61,4 @@ if (onDelete && (keyName || typeof keyName === 'number') && parentValue) {
       }
-    });
-    return function deleteHandle(_x2) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+    })).apply(this, arguments);
+  };
   return /*#__PURE__*/_jsxs(Fragment, {
@@ -70,0 +65,0 @@ children: [editable && onAdd && /*#__PURE__*/_jsx(AddIcon, {

esm/editor/index.d.ts

 /// <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'> {
     /**
@@ -6,0 +6,0 @@ * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.

esm/editor/objectKey.js

@@ -10,2 +10,3 @@ import _extends from "@babel/runtime/helpers/extends";
 export var ObjectKey = props => {
+  var _ref;
   var {
@@ -46,4 +47,4 @@ className,
   };
-  var blur = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(function* () {
+  var blur = function blur() {
+    return (_ref = _ref || _asyncToGenerator(function* () {
       if ($edit.current) {
@@ -70,7 +71,4 @@ var _$edit$current2;
       setEditable(false);
-    });
-    return function blur() {
-      return _ref.apply(this, arguments);
-    };
-  }();
+    })).apply(this, arguments);
+  };
   var focus = () => {
@@ -77,0 +75,0 @@ if ($edit.current) {

esm/editor/value.js

@@ -24,3 +24,3 @@ import _extends from "@babel/runtime/helpers/extends";
 export function ReValue(props) {
-  var _typeMap$typeStr;
+  var _ref2, _typeMap$typeStr, _ref3;
   var {
@@ -69,4 +69,4 @@ type,
   };
-  var blur = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(function* () {
+  var blur = function blur() {
+    return (_ref2 = _ref2 || _asyncToGenerator(function* () {
       if (!editableValue) return;
@@ -128,7 +128,4 @@ setEditable(false);
       }
-    });
-    return function blur() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+    })).apply(this, arguments);
+  };
   var defaultStyle = {
@@ -161,4 +158,4 @@ minWidth: 34,
   }
-  var deleteHandle = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(function* (evn) {
+  var deleteHandle = function deleteHandle(_x) {
+    return (_ref3 = _ref3 || _asyncToGenerator(function* (evn) {
       evn.stopPropagation();
@@ -174,7 +171,4 @@ if (data && keyName && keyName in data && setValue && onDelete) {
       }
-    });
-    return function deleteHandle(_x) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
+    })).apply(this, arguments);
+  };
   return /*#__PURE__*/_jsxs(Fragment, {
@@ -181,0 +175,0 @@ children: [displayDataTypes && typeView, /*#__PURE__*/_jsx(Quotes, {

esm/index.d.ts

@@ -10,2 +10,3 @@ import React from 'react';
 export * from './value';
+export * from './semicolon';
 export interface CountInfoProps {
@@ -36,2 +37,4 @@ count: number;
     displayObjectSize?: boolean;
+    /** Shorten long JSON strings, Set to `0` to disable this feature @default 20 */
+    shortenTextAfterLength?: number;
     /** Define the root node name. @default undefined */
@@ -38,0 +41,0 @@ keyName?: string | number;

esm/index.js

@@ -10,2 +10,3 @@ import _extends from "@babel/runtime/helpers/extends";
 export * from './value';
+export * from './semicolon';
 var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
@@ -12,0 +13,0 @@ var {

esm/node.js

 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';
@@ -49,2 +49,3 @@ import { ValueView, Colon, Label, Line, typeMap } from './value';
       indentWidth = 15,
+      shortenTextAfterLength = 20,
       collapsed,
@@ -97,2 +98,3 @@ level = 1,
     enableClipboard,
+    shortenTextAfterLength,
     level: level + 1,
@@ -99,0 +101,0 @@ parentValue: value,

esm/value.d.ts

@@ -58,2 +58,3 @@ import type { FC, PropsWithChildren } from 'react';
     level?: number;
+    shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
     namespace?: Array<string | number>;
@@ -60,0 +61,0 @@ quotes?: JsonViewProps<T>['quotes'];

esm/value.js

 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';
@@ -112,2 +114,52 @@ import { Meta } from './comps/meta';
 }
+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) {
@@ -128,5 +180,6 @@ var _typeMap$type;
       enableClipboard,
-      displayDataTypes
+      displayDataTypes,
+      shortenTextAfterLength
     } = props,
-    reset = _objectWithoutPropertiesLoose(props, _excluded2);
+    reset = _objectWithoutPropertiesLoose(props, _excluded4);
   var color = '';
@@ -189,15 +242,15 @@ var style = {};
     });
-    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
     });
@@ -207,3 +260,3 @@ return /*#__PURE__*/_jsx(Line, _extends({}, eventProps, {
         ref: null,
-        children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, valueView, tools]
+        children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, reView ? reView : valueView, tools]
       }))
@@ -230,3 +283,3 @@ }));
 ValueView.displayName = 'JVR.ValueView';
-export var Label = /*#__PURE__*/forwardRef((_ref2, ref) => {
+export var Label = /*#__PURE__*/forwardRef((_ref4, ref) => {
   var {
@@ -239,4 +292,4 @@ children,
       style
-    } = _ref2,
-    reset = _objectWithoutPropertiesLoose(_ref2, _excluded3);
+    } = _ref4,
+    reset = _objectWithoutPropertiesLoose(_ref4, _excluded5);
   return /*#__PURE__*/_jsx("span", _extends({
@@ -243,0 +296,0 @@ style: _extends({

package.json

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

README.md

@@ -455,4 +455,5 @@ react-json-view
 ```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';
 
@@ -476,8 +477,10 @@ const object = {
 
-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} />;
+}
 
@@ -668,2 +671,4 @@ export default function Demo() {
   displayObjectSize?: boolean;
+  /** Shorten long JSON strings, Set to `0` to disable this feature @default 20 */
+  shortenTextAfterLength?: number;
   /** Define the root node name. @default undefined */
@@ -727,3 +732,3 @@ keyName?: string | number;
 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'> {
   /**
@@ -730,0 +735,0 @@ * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

195343

increased by2.63%

Lines of code

4236

increased by2.54%

Number of lines in readme file

811

increased by0.62%

No dependency changes