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

Comparing version 1.4.0 to 1.5.0

cjs/copied.js

@@ -48,2 +48,3 @@ "use strict";
     cursor: 'pointer',
+    verticalAlign: 'middle',
     marginLeft: 5
@@ -62,7 +63,7 @@ });
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-      viewBox: "0 0 38 38"
+      viewBox: "0 0 32 36"
     }, svgProps), {}, {
       fill: "var(--w-rjv-copied-success-color, #28a745)",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-        d: "M27.5,35 L2.5,35 L2.5,12.5 L27.5,12.5 L27.5,15.2249049 C29.1403264,13.8627542 29.9736597,13.1778155 30,13.1700887 C30,11.9705278 30,10.0804982 30,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,35 C0,36.4 1.1,37.5 2.5,37.5 L27.5,37.5 C28.9,37.5 30,36.4 30,35 L30,30 L27.5,30 L27.5,35 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 M31.5589286,15 L35.1589286,18.6 L21.0160714,33 L12.5303571,24.2571429 L16.1303571,20.6571429 L21.0160714,25.5428571 L31.5589286,15 Z M12.5,30 L12.5,32.5 L5,32.5 L5,30 L12.5,30 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"
+        d: "M27.5,33 L2.5,33 L2.5,12.5 L27.5,12.5 L27.5,15.2249049 C29.1403264,13.8627542 29.9736597,13.1778155 30,13.1700887 C30,11.9705278 30,10.0804982 30,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,26.1114493 L27.5,28.4926435 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 M28.5589286,16 L32,19.6 L21.0160714,30.5382252 L13.5303571,24.2571429 L17.1303571,20.6571429 L21.0160714,24.5428571 L28.5589286,16 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"
       })
@@ -72,8 +73,8 @@ }));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-    viewBox: "0 0 38 38"
+    viewBox: "0 0 32 36"
   }, svgProps), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      d: "M27.5,35 L2.5,35 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,35 C0,36.4 1.1,37.5 2.5,37.5 L27.5,37.5 C28.9,37.5 30,36.4 30,35 L30,30 L27.5,30 L27.5,35 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,22.5 L22.5,17.5 L12.5,25 L22.5,32.5 L22.5,27.5 L35,27.5 L35,22.5 L22.5,22.5 Z M5,32.5 L12.5,32.5 L12.5,30 L5,30 L5,32.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"
+      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"
     })
   }));
 }

cjs/index.d.ts

 import React from 'react';
-import { MetaProps, EllipsisProps } from './node';
 import { SemicolonProps } from './semicolon';
 import { ValueViewProps } from './value';
 import { CopiedProps } from './copied';
+import { EllipsisProps } from './comps/ellipsis';
+import { MetaProps } from './comps/meta';
 export * from './node';
@@ -7,0 +8,0 @@ export * from './value';

cjs/node.d.ts

 import { FC, PropsWithChildren } from 'react';
 import { LabelProps } from './value';
 import { JsonViewProps } from './';
-export interface MetaProps extends LabelProps {
-    isArray?: boolean;
-    start?: boolean;
-    render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
-}
-export declare function Meta(props: MetaProps): JSX.Element;
-export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
-    render?: (props: EllipsisProps) => JSX.Element;
-}
-export declare const Ellipsis: FC<PropsWithChildren<EllipsisProps>>;
 export declare const CountInfo: FC<PropsWithChildren<LabelProps>>;
@@ -15,0 +5,0 @@ export interface RooNodeProps<T extends object> extends JsonViewProps<T> {

cjs/node.js

@@ -7,8 +7,7 @@ "use strict";
 });
-exports.Ellipsis = exports.CountInfo = void 0;
-exports.Meta = Meta;
+exports.CountInfo = void 0;
 exports.RooNode = RooNode;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -19,57 +18,10 @@ var _react = require("react");
 var _store = require("./store");
-var _copied = require("./copied");
 var _semicolon = require("./semicolon");
+var _tools = require("./tools");
+var _ellipsis = require("./comps/ellipsis");
+var _meta = require("./comps/meta");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["isArray", "start", "className", "render"],
-  _excluded2 = ["style", "render"],
-  _excluded3 = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand"];
-function Meta(props) {
-  var _props$isArray = props.isArray,
-    isArray = _props$isArray === void 0 ? false : _props$isArray,
-    _props$start = props.start,
-    start = _props$start === void 0 ? false : _props$start,
-    className = props.className,
-    render = props.render,
-    reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var mark = isArray ? '[]' : '{}';
-  var cls = "w-rjv-".concat(isArray ? 'brackets' : 'curlybraces', "-").concat(start ? 'start' : 'end', " ").concat(className || '');
-  var color = "var(--w-rjv-".concat(isArray ? 'brackets' : 'curlybraces', "-color, #236a7c)");
-  if (render) return render((0, _objectSpread2["default"])({
-    isArray: isArray,
-    className: cls,
-    style: {
-      color: color
-    },
-    children: start ? mark.charAt(0) : mark.charAt(1)
-  }, reset));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-    color: color,
-    className: cls
-  }, reset), {}, {
-    children: start ? mark.charAt(0) : mark.charAt(1)
-  }));
-}
-var Ellipsis = function Ellipsis(_ref) {
-  var style = _ref.style,
-    render = _ref.render,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
-  var styl = (0, _objectSpread2["default"])({
-    cursor: 'pointer'
-  }, style);
-  var className = "w-rjv-ellipsis ".concat(props.className || '');
-  if (render) return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-    style: styl
-  }, props), {}, {
-    className: className
-  }));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-    className: className,
-    style: styl
-  }, props), {}, {
-    children: "..."
-  }));
-};
-exports.Ellipsis = Ellipsis;
-var CountInfo = function CountInfo(_ref2) {
-  var children = _ref2.children;
+var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand"];
+var CountInfo = function CountInfo(_ref) {
+  var children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Label, {
@@ -115,3 +67,3 @@ style: {
     onExpand = props.onExpand,
-    reset = (0, _objectWithoutProperties2["default"])(props, _excluded3);
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var isArray = Array.isArray(value);
@@ -155,2 +107,3 @@ var subkeyid = (0, _react.useId)();
     indentWidth: indentWidth,
+    quotes: quotes,
     renderBraces: components.braces,
@@ -171,8 +124,2 @@ renderValue: components.value
     setShowTools = _useState2[1];
-  var tools = enableClipboard ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
-    show: showTools,
-    text: value,
-    onCopied: onCopied,
-    render: components.copied
-  }) : undefined;
   var eventProps = {};
@@ -196,13 +143,13 @@ if (enableClipboard) {
   if (objectSortKeys) {
-    entries = objectSortKeys === true ? entries.sort(function (_ref3, _ref4) {
+    entries = objectSortKeys === true ? entries.sort(function (_ref2, _ref3) {
+      var _ref4 = (0, _slicedToArray2["default"])(_ref2, 1),
+        a = _ref4[0];
       var _ref5 = (0, _slicedToArray2["default"])(_ref3, 1),
-        a = _ref5[0];
-      var _ref6 = (0, _slicedToArray2["default"])(_ref4, 1),
-        b = _ref6[0];
+        b = _ref5[0];
       return typeof a === 'string' && typeof b === 'string' ? a.localeCompare(b) : 0;
-    }) : entries.sort(function (_ref7, _ref8) {
+    }) : entries.sort(function (_ref6, _ref7) {
+      var _ref8 = (0, _slicedToArray2["default"])(_ref6, 1),
+        a = _ref8[0];
       var _ref9 = (0, _slicedToArray2["default"])(_ref7, 1),
-        a = _ref9[0];
-      var _ref10 = (0, _slicedToArray2["default"])(_ref8, 1),
-        b = _ref10[0];
+        b = _ref9[0];
       return typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b) : 0;
@@ -224,14 +171,15 @@ });
           quotes: quotes,
+          "data-keys": keyid,
           render: components.objectKey,
-          color: typeof keyName === 'number' ? _value.typeMap['number'].color : '',
-          show: typeof keyName === 'string',
-          children: keyName
+          keyName: keyName,
+          parentName: keyName,
+          color: typeof keyName === 'number' ? _value.typeMap['number'].color : ''
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Colon, {})]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Meta, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
         start: true,
         isArray: isArray,
         render: components.braces
-      }), !expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(Ellipsis, {
+      }), !expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ellipsis.Ellipsis, {
         render: components.ellipsis
-      }), !expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(Meta, {
+      }), !expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
         isArray: isArray,
@@ -241,22 +189,29 @@ render: components.braces
         children: [nameKeys.length, " items"]
-      }), tools]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tools.Tools, {
+        value: value,
+        enableClipboard: enableClipboard,
+        onCopied: onCopied,
+        components: components,
+        showTools: showTools
+      })]
     }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
       className: "w-rjv-content",
       style: {
-        borderLeft: 'var(--w-rjv-border-left-width, 1px) solid var(--w-rjv-line-color, #ebebeb)',
+        borderLeft: 'var(--w-rjv-border-left-width, 1px) var(--w-rjv-line-style, solid) var(--w-rjv-line-color, #ebebeb)',
         marginLeft: 6
       },
-      children: entries.length > 0 && entries.map(function (_ref11, idx) {
-        var _ref12 = (0, _slicedToArray2["default"])(_ref11, 2),
-          key = _ref12[0],
-          itemVal = _ref12[1];
+      children: entries.length > 0 && entries.map(function (_ref10, idx) {
+        var _ref11 = (0, _slicedToArray2["default"])(_ref10, 2),
+          key = _ref11[0],
+          itemVal = _ref11[1];
         var item = itemVal;
         var renderKey = /*#__PURE__*/(0, _jsxRuntime.jsx)(_semicolon.Semicolon, {
           value: item,
+          "data-keys": keyid,
           quotes: quotes,
+          parentName: keyName,
           highlightUpdates: highlightUpdates,
           render: components.objectKey,
           color: typeof key === 'number' ? _value.typeMap['number'].color : '',
-          show: typeof key === 'string',
-          children: key
+          keyName: key
         });
@@ -270,4 +225,4 @@ var isEmpty = Array.isArray(item) && item.length === 0 || (0, _typeof2["default"])(item) === 'object' && item && !(item instanceof Date) && Object.keys(item).length === 0;
               value: item,
-              keyid: keyid + subkeyid + label,
-              keyName: label
+              keyName: label,
+              keyid: keyid + subkeyid + label
             }, subNodeProps))
@@ -280,5 +235,5 @@ }, label + idx);
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RooNode, (0, _objectSpread2["default"])({
-              keyid: keyid + subkeyid + key,
               value: item,
-              keyName: key
+              keyName: key,
+              keyid: keyid + subkeyid + key
             }, subNodeProps))
@@ -300,3 +255,3 @@ }, key + '' + idx);
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Meta, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
         render: components.braces,
@@ -303,0 +258,0 @@ isArray: isArray,

cjs/semicolon.d.ts

@@ -5,9 +5,18 @@ import { FC, PropsWithChildren } from 'react';
 export declare function usePrevious<T>(value: T): T | undefined;
+interface UseHighlight {
+    value: any;
+    highlightUpdates?: boolean;
+    highlightContainer: React.MutableRefObject<HTMLSpanElement | null>;
+}
+export declare function useHighlight({ value, highlightUpdates, highlightContainer }: UseHighlight): void;
 export interface SemicolonProps extends LabelProps {
-    show?: boolean;
     highlightUpdates?: boolean;
+    keyName?: string | number;
+    parentName?: string | number;
     quotes?: JsonViewProps<object>['quotes'];
     value?: object;
-    render?: (props: Omit<SemicolonProps, 'show'> & {}) => JSX.Element;
+    label?: string;
+    render?: (props: SemicolonProps) => React.ReactNode;
 }
 export declare const Semicolon: FC<PropsWithChildren<SemicolonProps>>;
+export {};

cjs/semicolon.js

@@ -8,10 +8,11 @@ "use strict";
 exports.Semicolon = void 0;
+exports.useHighlight = useHighlight;
 exports.usePrevious = usePrevious;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _value = require("./value");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "render", "color", "value", "className", "show", "highlightUpdates", "quotes", "style"];
+var _excluded = ["children", "render", "color", "value", "className", "keyName", "highlightUpdates", "quotes", "style", "parentName"];
 function usePrevious(value) {
@@ -24,16 +25,7 @@ var ref = (0, _react.useRef)();
 }
-var Semicolon = function Semicolon(_ref) {
-  var children = _ref.children,
-    render = _ref.render,
-    color = _ref.color,
-    value = _ref.value,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? 'w-rjv-object-key' : _ref$className,
-    show = _ref.show,
+function useHighlight(_ref) {
+  var value = _ref.value,
     highlightUpdates = _ref.highlightUpdates,
-    quotes = _ref.quotes,
-    style = _ref.style,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+    highlightContainer = _ref.highlightContainer;
   var prevValue = usePrevious(value);
-  var highlightContainer = (0, _react.useRef)(null);
   var isHighlight = (0, _react.useMemo)(function () {
@@ -67,3 +59,3 @@ if (!highlightUpdates || prevValue === undefined) return false;
   (0, _react.useEffect)(function () {
-    if (highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
+    if (highlightContainer && highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
       highlightContainer.current.animate([{
@@ -78,13 +70,40 @@ backgroundColor: 'var(--w-rjv-update-color, #ebcb8b)'
     }
-  }, [isHighlight, value]);
-  var content = show ? "".concat(quotes).concat(children).concat(quotes) : children;
-  if (render) return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-    className: className
-  }, props), {}, {
+  }, [isHighlight, value, highlightContainer]);
+}
+var Semicolon = function Semicolon(_ref2) {
+  var children = _ref2.children,
+    render = _ref2.render,
+    color = _ref2.color,
+    value = _ref2.value,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? 'w-rjv-object-key' : _ref2$className,
+    keyName = _ref2.keyName,
+    highlightUpdates = _ref2.highlightUpdates,
+    quotes = _ref2.quotes,
+    style = _ref2.style,
+    parentName = _ref2.parentName,
+    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  var highlightContainer = (0, _react.useRef)(null);
+  var content = typeof keyName === 'string' ? "".concat(quotes).concat(keyName).concat(quotes) : keyName;
+  if (render) {
+    return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+      className: className
+    }, props), {}, {
+      value: value,
+      style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
+        color: color
+      }),
+      parentName: parentName,
+      keyName: keyName,
+      quotes: quotes,
+      label: keyName,
+      children: content
+    }));
+  }
+  ;
+  useHighlight({
     value: value,
-    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
-      color: color
-    }),
-    children: content
-  }));
+    highlightUpdates: highlightUpdates,
+    highlightContainer: highlightContainer
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
@@ -91,0 +110,0 @@ className: className,

cjs/theme/dark.d.ts

@@ -7,2 +7,3 @@ export declare const darkTheme: {
     '--w-rjv-arrow-color': string;
+    '--w-rjv-edit-color': string;
     '--w-rjv-info-color': string;
@@ -20,2 +21,3 @@ '--w-rjv-update-color': string;
     '--w-rjv-type-date-color': string;
+    '--w-rjv-type-url-color': string;
     '--w-rjv-type-null-color': string;
@@ -22,0 +24,0 @@ '--w-rjv-type-nan-color': string;

cjs/theme/dark.js

@@ -13,2 +13,3 @@ "use strict";
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#656565',
@@ -26,2 +27,3 @@ '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-type-date-color': '#586e75',
+  '--w-rjv-type-url-color': '#649bd8',
   '--w-rjv-type-null-color': '#d33682',
@@ -28,0 +30,0 @@ '--w-rjv-type-nan-color': '#859900',

cjs/theme/light.d.ts

@@ -7,2 +7,3 @@ export declare const lightTheme: {
     '--w-rjv-arrow-color': string;
+    '--w-rjv-edit-color': string;
     '--w-rjv-info-color': string;
@@ -20,2 +21,3 @@ '--w-rjv-update-color': string;
     '--w-rjv-type-date-color': string;
+    '--w-rjv-type-url-color': string;
     '--w-rjv-type-null-color': string;
@@ -22,0 +24,0 @@ '--w-rjv-type-nan-color': string;

cjs/theme/light.js

@@ -13,2 +13,3 @@ "use strict";
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#0000004d',
@@ -26,2 +27,3 @@ '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-type-date-color': '#586e75',
+  '--w-rjv-type-url-color': '#0969da',
   '--w-rjv-type-null-color': '#d33682',
@@ -28,0 +30,0 @@ '--w-rjv-type-nan-color': '#859900',

cjs/value.d.ts

 import { FC, PropsWithChildren } from 'react';
-import { MetaProps } from './node';
+import { MetaProps } from './comps/meta';
+import { JsonViewProps } from './';
 export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
+export declare const isFloat: (n: number) => boolean;
 export declare const typeMap: {
@@ -29,2 +31,6 @@ string: {
     };
+    url: {
+        color: string;
+        label: string;
+    };
     null: {
@@ -44,5 +50,5 @@ color: string;
 export declare const Colon: FC<PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>>;
-export interface ValueViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+export interface ValueViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
     keyName?: string | number;
-    value?: T;
+    value?: unknown;
     displayDataTypes: boolean;
@@ -52,2 +58,3 @@ displayObjectSize: boolean;
     indentWidth: number;
+    quotes?: JsonViewProps<T>['quotes'];
     renderKey?: JSX.Element;
@@ -57,5 +64,13 @@ renderBraces?: MetaProps['render'];
         type: TypeProps['type'];
+        value?: unknown;
+        visible?: boolean;
+        quotes?: JsonViewProps<T>['quotes'];
+        keyName?: ValueViewProps<T>['keyName'];
     }) => JSX.Element;
 }
-export declare function ValueView<T = object>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function getValueString<T>(value: T): {
+    type: "string" | "number" | "bigint" | "boolean" | "undefined" | "date" | "url" | "float" | "null" | "NaN";
+    content: string;
+};
+export declare function ValueView<T extends object>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;
 export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
@@ -62,0 +77,0 @@ color?: string;

cjs/value.js

@@ -9,3 +9,4 @@ "use strict";
 exports.ValueView = ValueView;
-exports.typeMap = void 0;
+exports.getValueString = getValueString;
+exports.typeMap = exports.isFloat = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -17,6 +18,7 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _node = require("./node");
+var _meta = require("./comps/meta");
 var _copied = require("./copied");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "style"],
-  _excluded2 = ["value", "keyName", "indentWidth", "renderKey", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
+  _excluded2 = ["value", "keyName", "indentWidth", "renderKey", "quotes", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
   _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
@@ -30,2 +32,3 @@ var Line = function Line(props) {
 };
+exports.isFloat = isFloat;
 var typeMap = {
@@ -56,2 +59,6 @@ string: {
   },
+  url: {
+    color: 'var(--w-rjv-type-url-color, #0969da)',
+    label: 'URL'
+  },
   "null": {
@@ -86,18 +93,5 @@ color: 'var(--w-rjv-type-null-color, #d33682)',
 exports.Colon = Colon;
-function ValueView(props) {
-  var _typeMap$type;
-  var value = props.value,
-    keyName = props.keyName,
-    indentWidth = props.indentWidth,
-    renderKey = props.renderKey,
-    renderValue = props.renderValue,
-    renderBraces = props.renderBraces,
-    enableClipboard = props.enableClipboard,
-    displayObjectSize = props.displayObjectSize,
-    displayDataTypes = props.displayDataTypes,
-    reset = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+function getValueString(value) {
   var type = (0, _typeof2["default"])(value);
   var content = '';
-  var color = '';
-  var style = {};
   if (typeof value === 'number') {
@@ -115,12 +109,5 @@ type = isFloat(value) ? 'float' : 'number';
   }
-  var typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
-    type: type
-  });
   if (value === null) {
     type = 'null';
     content = "".concat(value).toLocaleUpperCase();
-    typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
-    style = {
-      fontWeight: 'bold'
-    };
   }
@@ -130,3 +117,2 @@ if (value === undefined) {
     content = String(value);
-    typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
   }
@@ -137,5 +123,46 @@ if (typeof value === 'bigint') {
   }
+  var isURL = value instanceof URL;
+  if (isURL) {
+    type = 'url';
+    content = "\"".concat(value.href, "\"");
+  }
   if (typeof value === 'string') {
     content = "\"".concat(value, "\"");
   }
+  return {
+    type: type,
+    content: content
+  };
+}
+function ValueView(props) {
+  var _typeMap$type;
+  var value = props.value,
+    keyName = props.keyName,
+    indentWidth = props.indentWidth,
+    renderKey = props.renderKey,
+    quotes = props.quotes,
+    renderValue = props.renderValue,
+    renderBraces = props.renderBraces,
+    enableClipboard = props.enableClipboard,
+    displayObjectSize = props.displayObjectSize,
+    displayDataTypes = props.displayDataTypes,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+  var color = '';
+  var style = {};
+  var _getValueString = getValueString(value),
+    type = _getValueString.type,
+    content = _getValueString.content;
+  var typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+    type: type
+  });
+  if (value === null) {
+    typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
+    style = {
+      fontWeight: 'bold'
+    };
+  }
+  if (value === undefined) {
+    typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
+  }
+  var isURL = value instanceof URL;
   if (!displayDataTypes) {
@@ -174,4 +201,8 @@ typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
       type: type,
+      value: value,
+      quotes: quotes,
+      keyName: keyName,
+      visible: showTools,
       content: content,
-      children: value
+      children: content
     });
@@ -182,3 +213,11 @@ var valueView = reView ? reView : /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
       className: "w-rjv-value",
-      children: content
+      children: isURL ? /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        href: value.href,
+        style: {
+          color: color
+        },
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: content
+      }) : content
     });
@@ -194,7 +233,7 @@ return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, eventProps), {}, {
   var empty = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_node.Meta, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
       render: renderBraces,
       start: true,
       isArray: Array.isArray(value)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_node.Meta, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
       render: renderBraces,
@@ -201,0 +240,0 @@ isArray: Array.isArray(value)

esm/copied.js

@@ -37,2 +37,3 @@ import _extends from "@babel/runtime/helpers/extends";
     cursor: 'pointer',
+    verticalAlign: 'middle',
     marginLeft: 5
@@ -51,7 +52,7 @@ });
     return /*#__PURE__*/_jsx("svg", _extends({
-      viewBox: "0 0 38 38"
+      viewBox: "0 0 32 36"
     }, svgProps, {
       fill: "var(--w-rjv-copied-success-color, #28a745)",
       children: /*#__PURE__*/_jsx("path", {
-        d: "M27.5,35 L2.5,35 L2.5,12.5 L27.5,12.5 L27.5,15.2249049 C29.1403264,13.8627542 29.9736597,13.1778155 30,13.1700887 C30,11.9705278 30,10.0804982 30,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,35 C0,36.4 1.1,37.5 2.5,37.5 L27.5,37.5 C28.9,37.5 30,36.4 30,35 L30,30 L27.5,30 L27.5,35 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 M31.5589286,15 L35.1589286,18.6 L21.0160714,33 L12.5303571,24.2571429 L16.1303571,20.6571429 L21.0160714,25.5428571 L31.5589286,15 Z M12.5,30 L12.5,32.5 L5,32.5 L5,30 L12.5,30 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"
+        d: "M27.5,33 L2.5,33 L2.5,12.5 L27.5,12.5 L27.5,15.2249049 C29.1403264,13.8627542 29.9736597,13.1778155 30,13.1700887 C30,11.9705278 30,10.0804982 30,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,26.1114493 L27.5,28.4926435 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 M28.5589286,16 L32,19.6 L21.0160714,30.5382252 L13.5303571,24.2571429 L17.1303571,20.6571429 L21.0160714,24.5428571 L28.5589286,16 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"
       })
@@ -61,8 +62,8 @@ }));
   return /*#__PURE__*/_jsx("svg", _extends({
-    viewBox: "0 0 38 38"
+    viewBox: "0 0 32 36"
   }, svgProps, {
     children: /*#__PURE__*/_jsx("path", {
-      d: "M27.5,35 L2.5,35 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,35 C0,36.4 1.1,37.5 2.5,37.5 L27.5,37.5 C28.9,37.5 30,36.4 30,35 L30,30 L27.5,30 L27.5,35 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,22.5 L22.5,17.5 L12.5,25 L22.5,32.5 L22.5,27.5 L35,27.5 L35,22.5 L22.5,22.5 Z M5,32.5 L12.5,32.5 L12.5,30 L5,30 L5,32.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"
+      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"
     })
   }));
 }

esm/index.d.ts

 import React from 'react';
-import { MetaProps, EllipsisProps } from './node';
 import { SemicolonProps } from './semicolon';
 import { ValueViewProps } from './value';
 import { CopiedProps } from './copied';
+import { EllipsisProps } from './comps/ellipsis';
+import { MetaProps } from './comps/meta';
 export * from './node';
@@ -7,0 +8,0 @@ export * from './value';

esm/node.d.ts

 import { FC, PropsWithChildren } from 'react';
 import { LabelProps } from './value';
 import { JsonViewProps } from './';
-export interface MetaProps extends LabelProps {
-    isArray?: boolean;
-    start?: boolean;
-    render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
-}
-export declare function Meta(props: MetaProps): JSX.Element;
-export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
-    render?: (props: EllipsisProps) => JSX.Element;
-}
-export declare const Ellipsis: FC<PropsWithChildren<EllipsisProps>>;
 export declare const CountInfo: FC<PropsWithChildren<LabelProps>>;
@@ -15,0 +5,0 @@ export interface RooNodeProps<T extends object> extends JsonViewProps<T> {

esm/node.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["isArray", "start", "className", "render"],
-  _excluded2 = ["style", "render"],
-  _excluded3 = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand"];
+var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand"];
 import { Fragment, useId, cloneElement, useState } from 'react';
@@ -10,58 +8,12 @@ import { ValueView, Colon, Label, Line, typeMap } from './value';
 import { useExpandsStatus, store } from './store';
-import { Copied } from './copied';
 import { Semicolon } from './semicolon';
+import { Tools } from './tools';
+import { Ellipsis } from './comps/ellipsis';
+import { Meta } from './comps/meta';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export function Meta(props) {
+export var CountInfo = _ref => {
   var {
-      isArray = false,
-      start = false,
-      className,
-      render
-    } = props,
-    reset = _objectWithoutPropertiesLoose(props, _excluded);
-  var mark = isArray ? '[]' : '{}';
-  var cls = "w-rjv-" + (isArray ? 'brackets' : 'curlybraces') + "-" + (start ? 'start' : 'end') + " " + (className || '');
-  var color = "var(--w-rjv-" + (isArray ? 'brackets' : 'curlybraces') + "-color, #236a7c)";
-  if (render) return render(_extends({
-    isArray,
-    className: cls,
-    style: {
-      color
-    },
-    children: start ? mark.charAt(0) : mark.charAt(1)
-  }, reset));
-  return /*#__PURE__*/_jsx(Label, _extends({
-    color: color,
-    className: cls
-  }, reset, {
-    children: start ? mark.charAt(0) : mark.charAt(1)
-  }));
-}
-export var Ellipsis = _ref => {
-  var {
-      style,
-      render
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded2);
-  var styl = _extends({
-    cursor: 'pointer'
-  }, style);
-  var className = "w-rjv-ellipsis " + (props.className || '');
-  if (render) return render(_extends({
-    style: styl
-  }, props, {
-    className
-  }));
-  return /*#__PURE__*/_jsx("span", _extends({
-    className: className,
-    style: styl
-  }, props, {
-    children: "..."
-  }));
-};
-export var CountInfo = _ref2 => {
-  var {
     children
-  } = _ref2;
+  } = _ref;
   return /*#__PURE__*/_jsx(Label, {
@@ -97,3 +49,3 @@ style: {
     } = props,
-    reset = _objectWithoutPropertiesLoose(props, _excluded3);
+    reset = _objectWithoutPropertiesLoose(props, _excluded);
   var isArray = Array.isArray(value);
@@ -137,2 +89,3 @@ var subkeyid = useId();
     indentWidth,
+    quotes,
     renderBraces: components.braces,
@@ -150,8 +103,2 @@ renderValue: components.value
   var [showTools, setShowTools] = useState(false);
-  var tools = enableClipboard ? /*#__PURE__*/_jsx(Copied, {
-    show: showTools,
-    text: value,
-    onCopied: onCopied,
-    render: components.copied
-  }) : undefined;
   var eventProps = {};
@@ -167,9 +114,9 @@ if (enableClipboard) {
   if (objectSortKeys) {
-    entries = objectSortKeys === true ? entries.sort((_ref3, _ref4) => {
-      var [a] = _ref3;
-      var [b] = _ref4;
+    entries = objectSortKeys === true ? entries.sort((_ref2, _ref3) => {
+      var [a] = _ref2;
+      var [b] = _ref3;
       return typeof a === 'string' && typeof b === 'string' ? a.localeCompare(b) : 0;
-    }) : entries.sort((_ref5, _ref6) => {
-      var [a] = _ref5;
-      var [b] = _ref6;
+    }) : entries.sort((_ref4, _ref5) => {
+      var [a] = _ref4;
+      var [b] = _ref5;
       return typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b) : 0;
@@ -191,6 +138,7 @@ });
           quotes: quotes,
+          "data-keys": keyid,
           render: components.objectKey,
-          color: typeof keyName === 'number' ? typeMap['number'].color : '',
-          show: typeof keyName === 'string',
-          children: keyName
+          keyName: keyName,
+          parentName: keyName,
+          color: typeof keyName === 'number' ? typeMap['number'].color : ''
         }), /*#__PURE__*/_jsx(Colon, {})]
@@ -208,20 +156,27 @@ }), /*#__PURE__*/_jsx(Meta, {
         children: [nameKeys.length, " items"]
-      }), tools]
+      }), /*#__PURE__*/_jsx(Tools, {
+        value: value,
+        enableClipboard: enableClipboard,
+        onCopied: onCopied,
+        components: components,
+        showTools: showTools
+      })]
     }), expand && /*#__PURE__*/_jsx(Line, {
       className: "w-rjv-content",
       style: {
-        borderLeft: 'var(--w-rjv-border-left-width, 1px) solid var(--w-rjv-line-color, #ebebeb)',
+        borderLeft: 'var(--w-rjv-border-left-width, 1px) var(--w-rjv-line-style, solid) var(--w-rjv-line-color, #ebebeb)',
         marginLeft: 6
       },
-      children: entries.length > 0 && entries.map((_ref7, idx) => {
-        var [key, itemVal] = _ref7;
+      children: entries.length > 0 && entries.map((_ref6, idx) => {
+        var [key, itemVal] = _ref6;
         var item = itemVal;
         var renderKey = /*#__PURE__*/_jsx(Semicolon, {
           value: item,
+          "data-keys": keyid,
           quotes: quotes,
+          parentName: keyName,
           highlightUpdates: highlightUpdates,
           render: components.objectKey,
           color: typeof key === 'number' ? typeMap['number'].color : '',
-          show: typeof key === 'string',
-          children: key
+          keyName: key
         });
@@ -235,4 +190,4 @@ var isEmpty = Array.isArray(item) && item.length === 0 || typeof item === 'object' && item && !(item instanceof Date) && Object.keys(item).length === 0;
               value: item,
-              keyid: keyid + subkeyid + label,
-              keyName: label
+              keyName: label,
+              keyid: keyid + subkeyid + label
             }, subNodeProps))
@@ -245,5 +200,5 @@ }, label + idx);
             children: /*#__PURE__*/_jsx(RooNode, _extends({
-              keyid: keyid + subkeyid + key,
               value: item,
-              keyName: key
+              keyName: key,
+              keyid: keyid + subkeyid + key
             }, subNodeProps))
@@ -250,0 +205,0 @@ }, key + '' + idx);

esm/semicolon.d.ts

@@ -5,9 +5,18 @@ import { FC, PropsWithChildren } from 'react';
 export declare function usePrevious<T>(value: T): T | undefined;
+interface UseHighlight {
+    value: any;
+    highlightUpdates?: boolean;
+    highlightContainer: React.MutableRefObject<HTMLSpanElement | null>;
+}
+export declare function useHighlight({ value, highlightUpdates, highlightContainer }: UseHighlight): void;
 export interface SemicolonProps extends LabelProps {
-    show?: boolean;
     highlightUpdates?: boolean;
+    keyName?: string | number;
+    parentName?: string | number;
     quotes?: JsonViewProps<object>['quotes'];
     value?: object;
-    render?: (props: Omit<SemicolonProps, 'show'> & {}) => JSX.Element;
+    label?: string;
+    render?: (props: SemicolonProps) => React.ReactNode;
 }
 export declare const Semicolon: FC<PropsWithChildren<SemicolonProps>>;
+export {};

esm/semicolon.js

 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["children", "render", "color", "value", "className", "show", "highlightUpdates", "quotes", "style"];
+var _excluded = ["children", "render", "color", "value", "className", "keyName", "highlightUpdates", "quotes", "style", "parentName"];
 import { useMemo, useRef, useEffect } from 'react';
@@ -14,17 +14,9 @@ import { Label } from './value';
 }
-export var Semicolon = _ref => {
+export function useHighlight(_ref) {
   var {
-      children,
-      render,
-      color,
-      value,
-      className = 'w-rjv-object-key',
-      show,
-      highlightUpdates,
-      quotes,
-      style
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    value,
+    highlightUpdates,
+    highlightContainer
+  } = _ref;
   var prevValue = usePrevious(value);
-  var highlightContainer = useRef(null);
   var isHighlight = useMemo(() => {
@@ -58,3 +50,3 @@ if (!highlightUpdates || prevValue === undefined) return false;
   useEffect(() => {
-    if (highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
+    if (highlightContainer && highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
       highlightContainer.current.animate([{
@@ -69,13 +61,40 @@ backgroundColor: 'var(--w-rjv-update-color, #ebcb8b)'
     }
-  }, [isHighlight, value]);
-  var content = show ? "" + quotes + children + quotes : children;
-  if (render) return render(_extends({
-    className
-  }, props, {
+  }, [isHighlight, value, highlightContainer]);
+}
+export var Semicolon = _ref2 => {
+  var {
+      render,
+      color,
+      value,
+      className = 'w-rjv-object-key',
+      keyName,
+      highlightUpdates,
+      quotes,
+      style,
+      parentName
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  var highlightContainer = useRef(null);
+  var content = typeof keyName === 'string' ? "" + quotes + keyName + quotes : keyName;
+  if (render) {
+    return render(_extends({
+      className
+    }, props, {
+      value,
+      style: _extends({}, style, {
+        color
+      }),
+      parentName,
+      keyName,
+      quotes,
+      label: keyName,
+      children: content
+    }));
+  }
+  ;
+  useHighlight({
     value,
-    style: _extends({}, style, {
-      color
-    }),
-    children: content
-  }));
+    highlightUpdates,
+    highlightContainer
+  });
   return /*#__PURE__*/_jsx(Label, _extends({
@@ -82,0 +101,0 @@ className: className,

esm/theme/dark.d.ts

@@ -7,2 +7,3 @@ export declare const darkTheme: {
     '--w-rjv-arrow-color': string;
+    '--w-rjv-edit-color': string;
     '--w-rjv-info-color': string;
@@ -20,2 +21,3 @@ '--w-rjv-update-color': string;
     '--w-rjv-type-date-color': string;
+    '--w-rjv-type-url-color': string;
     '--w-rjv-type-null-color': string;
@@ -22,0 +24,0 @@ '--w-rjv-type-nan-color': string;

esm/theme/dark.js

@@ -7,2 +7,3 @@ export var darkTheme = {
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#656565',
@@ -20,2 +21,3 @@ '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-type-date-color': '#586e75',
+  '--w-rjv-type-url-color': '#649bd8',
   '--w-rjv-type-null-color': '#d33682',
@@ -22,0 +24,0 @@ '--w-rjv-type-nan-color': '#859900',

esm/theme/light.d.ts

@@ -7,2 +7,3 @@ export declare const lightTheme: {
     '--w-rjv-arrow-color': string;
+    '--w-rjv-edit-color': string;
     '--w-rjv-info-color': string;
@@ -20,2 +21,3 @@ '--w-rjv-update-color': string;
     '--w-rjv-type-date-color': string;
+    '--w-rjv-type-url-color': string;
     '--w-rjv-type-null-color': string;
@@ -22,0 +24,0 @@ '--w-rjv-type-nan-color': string;

esm/theme/light.js

@@ -7,2 +7,3 @@ export var lightTheme = {
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#0000004d',
@@ -20,2 +21,3 @@ '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-type-date-color': '#586e75',
+  '--w-rjv-type-url-color': '#0969da',
   '--w-rjv-type-null-color': '#d33682',
@@ -22,0 +24,0 @@ '--w-rjv-type-nan-color': '#859900',

esm/value.d.ts

 import { FC, PropsWithChildren } from 'react';
-import { MetaProps } from './node';
+import { MetaProps } from './comps/meta';
+import { JsonViewProps } from './';
 export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
+export declare const isFloat: (n: number) => boolean;
 export declare const typeMap: {
@@ -29,2 +31,6 @@ string: {
     };
+    url: {
+        color: string;
+        label: string;
+    };
     null: {
@@ -44,5 +50,5 @@ color: string;
 export declare const Colon: FC<PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>>;
-export interface ValueViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+export interface ValueViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
     keyName?: string | number;
-    value?: T;
+    value?: unknown;
     displayDataTypes: boolean;
@@ -52,2 +58,3 @@ displayObjectSize: boolean;
     indentWidth: number;
+    quotes?: JsonViewProps<T>['quotes'];
     renderKey?: JSX.Element;
@@ -57,5 +64,13 @@ renderBraces?: MetaProps['render'];
         type: TypeProps['type'];
+        value?: unknown;
+        visible?: boolean;
+        quotes?: JsonViewProps<T>['quotes'];
+        keyName?: ValueViewProps<T>['keyName'];
     }) => JSX.Element;
 }
-export declare function ValueView<T = object>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function getValueString<T>(value: T): {
+    type: "string" | "number" | "bigint" | "boolean" | "undefined" | "date" | "url" | "float" | "null" | "NaN";
+    content: string;
+};
+export declare function ValueView<T extends object>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;
 export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
@@ -62,0 +77,0 @@ color?: string;

esm/value.js

 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["children", "style"],
-  _excluded2 = ["value", "keyName", "indentWidth", "renderKey", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
+  _excluded2 = ["value", "keyName", "indentWidth", "renderKey", "quotes", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
   _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
 import { Fragment, forwardRef, useState } from 'react';
-import { Meta, CountInfo } from './node';
+import { CountInfo } from './node';
+import { Meta } from './comps/meta';
 import { Copied } from './copied';
@@ -12,3 +13,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export var Line = props => /*#__PURE__*/_jsx("div", _extends({}, props));
-var isFloat = n => Number(n) === n && n % 1 !== 0 || isNaN(n);
+export var isFloat = n => Number(n) === n && n % 1 !== 0 || isNaN(n);
 export var typeMap = {
@@ -39,2 +40,6 @@ string: {
   },
+  url: {
+    color: 'var(--w-rjv-type-url-color, #0969da)',
+    label: 'URL'
+  },
   null: {
@@ -68,19 +73,5 @@ color: 'var(--w-rjv-type-null-color, #d33682)',
 };
-export function ValueView(props) {
-  var _typeMap$type;
-  var {
-      value,
-      indentWidth,
-      renderKey,
-      renderValue,
-      renderBraces,
-      enableClipboard,
-      displayObjectSize,
-      displayDataTypes
-    } = props,
-    reset = _objectWithoutPropertiesLoose(props, _excluded2);
+export function getValueString(value) {
   var type = typeof value;
   var content = '';
-  var color = '';
-  var style = {};
   if (typeof value === 'number') {
@@ -98,12 +89,5 @@ type = isFloat(value) ? 'float' : 'number';
   }
-  var typeView = /*#__PURE__*/_jsx(Type, {
-    type: type
-  });
   if (value === null) {
     type = 'null';
     content = ("" + value).toLocaleUpperCase();
-    typeView = /*#__PURE__*/_jsx(Fragment, {});
-    style = {
-      fontWeight: 'bold'
-    };
   }
@@ -113,3 +97,2 @@ if (value === undefined) {
     content = String(value);
-    typeView = /*#__PURE__*/_jsx(Fragment, {});
   }
@@ -120,5 +103,49 @@ if (typeof value === 'bigint') {
   }
+  var isURL = value instanceof URL;
+  if (isURL) {
+    type = 'url';
+    content = "\"" + value.href + "\"";
+  }
   if (typeof value === 'string') {
     content = "\"" + value + "\"";
   }
+  return {
+    type,
+    content
+  };
+}
+export function ValueView(props) {
+  var _typeMap$type;
+  var {
+      value,
+      keyName,
+      indentWidth,
+      renderKey,
+      quotes,
+      renderValue,
+      renderBraces,
+      enableClipboard,
+      displayObjectSize,
+      displayDataTypes
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded2);
+  var color = '';
+  var style = {};
+  var {
+    type,
+    content
+  } = getValueString(value);
+  var typeView = /*#__PURE__*/_jsx(Type, {
+    type: type
+  });
+  if (value === null) {
+    typeView = /*#__PURE__*/_jsx(Fragment, {});
+    style = {
+      fontWeight: 'bold'
+    };
+  }
+  if (value === undefined) {
+    typeView = /*#__PURE__*/_jsx(Fragment, {});
+  }
+  var isURL = value instanceof URL;
   if (!displayDataTypes) {
@@ -150,4 +177,8 @@ typeView = /*#__PURE__*/_jsx(Fragment, {});
       type,
+      value,
+      quotes,
+      keyName,
+      visible: showTools,
       content,
-      children: value
+      children: content
     });
@@ -158,3 +189,11 @@ var valueView = reView ? reView : /*#__PURE__*/_jsx(Label, {
       className: "w-rjv-value",
-      children: content
+      children: isURL ? /*#__PURE__*/_jsx("a", {
+        href: value.href,
+        style: {
+          color
+        },
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: content
+      }) : content
     });
@@ -161,0 +200,0 @@ return /*#__PURE__*/_jsx(Line, _extends({}, eventProps, {

package.json

 {
   "name": "@uiw/react-json-view",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "JSON viewer for react.",
@@ -15,2 +15,7 @@ "main": "cjs/index.js",
     },
+    "./editor": {
+      "import": "./esm/editor/index.js",
+      "types": "./cjs/editor/index.d.ts",
+      "require": "./cjs/editor/index.js"
+    },
     "./light": {
@@ -49,2 +54,3 @@ "import": "./esm/theme/light.js",
   "files": [
+    "editor.d.ts",
     "dark.d.ts",
@@ -51,0 +57,0 @@ "light.d.ts",

README.md

@@ -115,2 +115,3 @@ react-json-view
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#656565',
@@ -130,2 +131,3 @@ '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-type-date-color': '#586e75',
+  '--w-rjv-type-url-color': '#649bd8',
   '--w-rjv-type-null-color': '#d33682',
@@ -148,5 +150,5 @@ '--w-rjv-type-nan-color': '#859900',
 ```tsx mdx:preview:&title=Online Editing Theme
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import Colorful from '@uiw/react-color-colorful';
-import JsonView from '@uiw/react-json-view';
+import JsonView from '@uiw/react-json-view/editor';
 
@@ -162,2 +164,3 @@ const object = {
   timer: 0,
+  url: new URL('https://example.com'),
   date: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'),
@@ -181,2 +184,3 @@ array: [19, 100.86, 'test', NaN, Infinity],
   '--w-rjv-arrow-color': '#9cdcfe',
+  '--w-rjv-edit-color': '#9cdcfe',
   '--w-rjv-info-color': '#656565',
@@ -196,2 +200,3 @@ '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-type-date-color': '#586e75',
+  '--w-rjv-type-url-color': '#0969da',
   '--w-rjv-type-null-color': '#d33682',
@@ -205,2 +210,3 @@ '--w-rjv-type-nan-color': '#859900',
   const [hex, setHex] = useState("#1e1e1e");
+  const [editable, setEditable] = useState(false);
   const [theme, setTheme] = useState(customTheme);
@@ -224,9 +230,13 @@ const onChange = ({ hexa }) => {
 
+  const changeEditable = (evn) => setEditable(evn.target.checked);
   return (
     <React.Fragment>
-      <div style={{ display: 'flex', gap: '1rem' }}>
-        <JsonView value={src} keyName="root" style={{ flex: 1, ...theme }} />
+      <label>
+        <input type="checkbox" checked={editable} onChange={changeEditable} /> Editable
+      </label>
+      <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
+        <JsonView editable={editable} value={src} keyName="root" style={{ flex: 1, overflow: 'auto', ...theme }} />
         <div>
           <Colorful color={hex} onChange={onChange} />
-          <div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap' }}>
+          <div style={{ display: 'flex', gap: '0.4rem', flexDirection: 'column' }}>
             {Object.keys(customTheme).map((varname, idx) => {
@@ -251,2 +261,3 @@ const click = () => {
 ```
+
 ## Render
@@ -281,9 +292,9 @@
       components={{
-        braces: () =>  <span />,
-        ellipsis: () =>  <React.Fragment />,
-        objectKey: ({ value, ...props}) => {
-          if (props.children === '"integer"' && value > 40) {
+        braces: () => <span />,
+        ellipsis: () => <React.Fragment />,
+        objectKey: ({ value, keyName, parentName, ...props}) => {
+          if (keyName === 'integer' && typeof value === 'number' && value > 40) {
             return <del {...props} />
           }
-          return <span {...props} />
+          return <span {...props}  />
         }
@@ -308,3 +319,3 @@ }}
 
-function value({ type, children, ...props }) {
+function value({ type, children, keyName, visible, ...props }) {
   if (type === 'string' && /\.(jpg)$/.test(children)) {
@@ -336,2 +347,108 @@ return (
 
+**Support for the URL(opens in a new tab) API.**
+
+```tsx mdx:preview
+import React from 'react';
+import JsonView from '@uiw/react-json-view';
+
+export default function Demo() {
+  return (
+    <JsonView
+      value={{
+        url: new URL('https://example.com?t=12'),
+        urlStr: "https://example.com",
+        github: "https://example.com",
+      }}
+      style={{
+        '--w-rjv-background-color': '#ffffff',
+      }}
+    />
+  )
+}
+```
+
+```tsx mdx:preview
+import React from 'react';
+import JsonView from '@uiw/react-json-view';
+
+function value({ type, children, visible, keyName, value, ...props }) {
+  if (value instanceof URL) {
+    return (
+      <span {...props}>
+        <a href={value.href} target="_blank" rel="noopener noreferrer">
+          {children}
+        </a>
+        &nbsp;Open URL
+        {visible && <del>Button</del>}
+      </span>
+    );
+  }
+}
+
+export default function Demo() {
+  return (
+    <JsonView
+      value={{
+        url: new URL('https://example.com?t=12'),
+        urlStr: "https://example.com",
+        github: "https://example.com",
+      }}
+      components={{ value }}
+      style={{
+        '--w-rjv-background-color': '#ffffff',
+      }}
+    />
+  )
+}
+```
+
+## Editor JSON
+
+```tsx mdx:preview
+import React from 'react';
+import JsonViewEditor from '@uiw/react-json-view/editor';
+
+const object = {
+  string: 'Lorem ipsum dolor sit amet',
+  integer: 42,
+  float: 114.514,
+  object: {
+    'first-child': true,
+    'second-child': false,
+    'last-child': null,
+    'child': {
+      'first': true,
+      'second': false,
+      'last': null,
+    },
+  },
+  nestedArray: [ [1, 2], [3, 4], { a: 1} ],
+}
+
+const ObjectKey = ({ value, keyName, parentName, ...reset }) => {
+  if (keyName === 'integer' && typeof value === 'number' && value > 40) {
+    return <del {...reset} />
+  }
+  return <span {...reset} />
+};
+
+export default function Demo() {
+  return (
+    <JsonViewEditor
+      value={object}
+      keyName="root"
+      style={{
+        '--w-rjv-background-color': '#ffffff',
+      }}
+      onEdit={(opts) => {
+        console.log('opts:', opts)
+      }}
+      components={{
+        objectKey: ObjectKey
+      }}
+    />
+  );
+}
+```
+
 ## Highlight Updates
@@ -342,4 +459,2 @@
 import JsonView from '@uiw/react-json-view';
-import { TriangleArrow } from '@uiw/react-json-view/triangle-arrow';
-import { TriangleSolidArrow } from '@uiw/react-json-view/triangle-solid-arrow';
 
@@ -485,2 +600,4 @@ const object = {
 
+### JsonView Props
+
 ```ts
@@ -533,2 +650,22 @@ import React from 'react';
 
+### JsonView Editor Props
+
+```ts
+import { JsonViewProps } from '@uiw/react-json-view';
+export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
+  /** Callback when value edit functionality */
+  onEdit?: (option: {
+    value: unknown;
+    oldValue: unknown;
+    keyName?: string | number;
+    parentName?: string | number;
+    type?: 'value' | 'key';
+  }) => void;
+  /** Whether enable edit feature. @default true */
+  editable?: boolean;
+}
+declare const JsonViewEditor: import("react").ForwardRefExoticComponent<Omit<JsonViewEditorProps<object>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default JsonViewEditor;
+```
+
 ## Size and dependencies
@@ -535,0 +672,0 @@

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

148879

increased by42.53%

Number of package files

75

increased by63.04%

Lines of code

3293

increased by50.16%

Number of lines in readme file

707

increased by24.04%

Worsened metrics

Number of low supply chain risk alerts

2

increased byInfinity%

No dependency changes