@uiw/react-json-view 1.4.0 → 1.5.0

package/cjs/editor/value.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReValue = ReValue;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _value = require("../value");
+var _edit = require("./icon/edit");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["type", "value", "keyName", "visible", "quotes", "style", "content", "children", "displayDataTypes", "editableValue", "onEdit"];
+var Quotes = function Quotes(_ref) {
+  var show = _ref.show,
+    style = _ref.style,
+    quotes = _ref.quotes;
+  if (!quotes || !show) return;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    style: style,
+    children: quotes
+  });
+};
+function ReValue(props) {
+  var _typeMap$typeStr;
+  var type = props.type,
+    value = props.value,
+    keyName = props.keyName,
+    visible = props.visible,
+    quotes = props.quotes,
+    style = props.style,
+    content = props.content,
+    children = props.children,
+    displayDataTypes = props.displayDataTypes,
+    editableValue = props.editableValue,
+    onEdit = props.onEdit,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    editable = _useState2[0],
+    setEditable = _useState2[1];
+  var $edit = (0, _react.useRef)(null);
+  var _useState3 = (0, _react.useState)(type),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    curentType = _useState4[0],
+    setCurentType = _useState4[1];
+  var _useState5 = (0, _react.useState)(value),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    curentChild = _useState6[0],
+    setCurentChild = _useState6[1];
+  (0, _react.useEffect)(function () {
+    return setCurentChild(value);
+  }, [value]);
+  var click = function click(evn) {
+    evn.stopPropagation();
+    if (!editableValue) return;
+    if ($edit.current) {
+      var _$edit$current;
+      setEditable(true);
+      $edit.current.contentEditable = 'true';
+      (_$edit$current = $edit.current) === null || _$edit$current === void 0 ? void 0 : _$edit$current.focus();
+    }
+  };
+  var keyDown = function keyDown(evn) {
+    if (!editableValue) return;
+    if (evn.key === 'Enter') {
+      evn.stopPropagation();
+      evn.preventDefault();
+      setEditable(false);
+      $edit.current.contentEditable = 'false';
+    }
+  };
+  var blur = function blur() {
+    if (!editableValue) return;
+    setEditable(false);
+    if ($edit.current) {
+      $edit.current.contentEditable = 'false';
+      var text = $edit.current.innerText;
+      if (curentType === 'number' || curentType === 'float') {
+        text = Number(text);
+        setCurentType((0, _value.isFloat)(text) ? 'float' : 'number');
+      }
+      if (curentType === 'url' && typeof text === 'string') {
+        text = new URL(text);
+      }
+      if (Number.isNaN(text)) {
+        setCurentType('number');
+      }
+      if (typeof text === 'string' && /^(true|false)$/ig.test(text)) {
+        text = /^(true)$/ig.test(text) ? true : false;
+        setCurentType('boolean');
+      } else if (typeof text === 'string' && /^[\d]+n$/ig.test(text)) {
+        text = BigInt(text.replace(/n$/ig, ''));
+        setCurentType('bigint');
+      } else if (typeof text === 'string' && /^(null)$/ig.test(text)) {
+        text = null;
+        setCurentType('null');
+      } else if (typeof text === 'string' && /^(undefined)$/ig.test(text)) {
+        text = undefined;
+        setCurentType('undefined');
+      } else if (typeof text === 'string') {
+        try {
+          var dt = new Date(text);
+          if (dt.toString() !== 'Invalid Date') {
+            text = dt;
+            setCurentType('date');
+          }
+        } catch (error) {}
+      }
+      setCurentChild(text);
+      onEdit && onEdit({
+        type: 'value',
+        value: text,
+        oldValue: curentChild
+      });
+    }
+  };
+  var defaultStyle = {
+    minWidth: 34,
+    minHeight: 18,
+    paddingInline: 3,
+    display: 'inline-block'
+  };
+  var _getValueString = (0, _value.getValueString)(curentChild),
+    typeStr = _getValueString.type,
+    childStr = _getValueString.content;
+  var color = ((_typeMap$typeStr = _value.typeMap[typeStr]) === null || _typeMap$typeStr === void 0 ? void 0 : _typeMap$typeStr.color) || '';
+  var spanProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    onBlur: blur,
+    onKeyDown: keyDown,
+    spellCheck: false,
+    style: editable ? (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), defaultStyle), {}, {
+      color: color
+    }) : (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
+      color: color
+    })
+  });
+  var typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Type, {
+    type: typeStr
+  });
+  if (typeStr === 'null' || typeStr === 'undefined') {
+    typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+    children: [displayDataTypes && typeView, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Quotes, {
+        style: style,
+        quotes: quotes,
+        show: typeStr === 'string'
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, spanProps), {}, {
+        ref: $edit,
+        "data-value": content,
+        children: typeof curentChild === 'string' ? curentChild : childStr
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Quotes, {
+        style: style,
+        quotes: quotes,
+        show: typeStr === 'string'
+      })]
+    }), visible && editableValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(_edit.EditIcon, {
+      onClick: click
+    })]
+  });
+}

package/cjs/index.d.ts

@@ -1,8 +1,9 @@
 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';
 export * from './value';
 export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {

package/cjs/node.d.ts

@@ -1,16 +1,6 @@
 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>>;
 export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
     keyName?: string | number;

package/cjs/node.js

@@ -4,72 +4,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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"));
 var _react = require("react");
 var _value = require("./value");
 var _TriangleArrow = require("./arrow/TriangleArrow");
 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, {
     style: {
       paddingLeft: 4,
@@ -110,7 +62,7 @@ function RooNode(props) {
     quotes = _props$quotes === void 0 ? '"' : _props$quotes,
     onCopied = props.onCopied,
     onExpand = props.onExpand,
-    reset = (0, _objectWithoutProperties2["default"])(props, _excluded3);
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var isArray = Array.isArray(value);
   var subkeyid = (0, _react.useId)();
   var expands = (0, _store.useExpandsStatus)();
@@ -149,6 +101,7 @@ function RooNode(props) {
     displayObjectSize: displayObjectSize,
     enableClipboard: enableClipboard,
     indentWidth: indentWidth,
+    quotes: quotes,
     renderBraces: components.braces,
     renderValue: components.value
   };
@@ -164,12 +117,6 @@ function RooNode(props) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     showTools = _useState2[0],
     setShowTools = _useState2[1];
-  var tools = enableClipboard ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
-    show: showTools,
-    text: value,
-    onCopied: onCopied,
-    render: components.copied
-  }) : undefined;
   var eventProps = {};
   if (enableClipboard) {
     eventProps.onMouseEnter = function () {
@@ -188,17 +135,17 @@ function RooNode(props) {
     return [Number(m[0]), m[1]];
   }) : Object.entries(value);
   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;
     });
   }
@@ -215,42 +162,50 @@ function RooNode(props) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_semicolon.Semicolon, {
           value: value,
           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,
         render: components.braces
       }), displayObjectSize && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CountInfo, {
         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
         });
         var isEmpty = Array.isArray(item) && item.length === 0 || (0, _typeof2["default"])(item) === 'object' && item && !(item instanceof Date) && Object.keys(item).length === 0;
         if (Array.isArray(item) && !isEmpty) {
@@ -259,8 +214,8 @@ function RooNode(props) {
             className: "w-rjv-wrap",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RooNode, (0, _objectSpread2["default"])({
               value: item,
-              keyid: keyid + subkeyid + label,
-              keyName: label
+              keyName: label,
+              keyid: keyid + subkeyid + label
             }, subNodeProps))
           }, label + idx);
         }
@@ -268,9 +223,9 @@ function RooNode(props) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
             className: "w-rjv-wrap",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RooNode, (0, _objectSpread2["default"])({
-              keyid: keyid + subkeyid + key,
               value: item,
-              keyName: key
+              keyName: key,
+              keyid: keyid + subkeyid + key
             }, subNodeProps))
           }, key + '' + idx);
         }
@@ -287,7 +242,7 @@ function RooNode(props) {
       style: {
         paddingLeft: 2
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Meta, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
         render: components.braces,
         isArray: isArray,
         style: {

package/cjs/semicolon.d.ts

@@ -2,11 +2,20 @@ import { FC, PropsWithChildren } from 'react';
 import { LabelProps } from './value';
 import { JsonViewProps } from './';
 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 {};

package/cjs/semicolon.js

@@ -5,14 +5,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Semicolon = void 0;
+exports.useHighlight = useHighlight;
 exports.usePrevious = usePrevious;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 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) {
   var ref = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
@@ -20,20 +21,11 @@ function usePrevious(value) {
   });
   return ref.current;
 }
-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 () {
     if (!highlightUpdates || prevValue === undefined) return false;
     // highlight if value type changed
@@ -62,7 +54,7 @@ var Semicolon = function Semicolon(_ref) {
     return false;
   }, [highlightUpdates, value]);
   (0, _react.useEffect)(function () {
-    if (highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
+    if (highlightContainer && highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
       highlightContainer.current.animate([{
         backgroundColor: 'var(--w-rjv-update-color, #ebcb8b)'
       }, {
@@ -72,17 +64,44 @@ var Semicolon = function Semicolon(_ref) {
         easing: 'ease-in'
       });
     }
-  }, [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"])({
     className: className,
     color: color

package/cjs/theme/dark.d.ts

@@ -4,6 +4,7 @@ export declare const darkTheme: {
     '--w-rjv-background-color': string;
     '--w-rjv-line-color': string;
     '--w-rjv-arrow-color': string;
+    '--w-rjv-edit-color': string;
     '--w-rjv-info-color': string;
     '--w-rjv-update-color': string;
     '--w-rjv-copied-color': string;
@@ -16,6 +17,7 @@ export declare const darkTheme: {
     '--w-rjv-type-bigint-color': string;
     '--w-rjv-type-boolean-color': string;
     '--w-rjv-type-date-color': string;
+    '--w-rjv-type-url-color': string;
     '--w-rjv-type-null-color': string;
     '--w-rjv-type-nan-color': string;
     '--w-rjv-type-undefined-color': string;

package/cjs/theme/dark.js

@@ -10,6 +10,7 @@ var darkTheme = {
   '--w-rjv-background-color': '#202020',
   '--w-rjv-line-color': '#323232',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#656565',
   '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-copied-color': '#0184a6',
@@ -22,6 +23,7 @@ var darkTheme = {
   '--w-rjv-type-bigint-color': '#268bd2',
   '--w-rjv-type-boolean-color': '#2aa198',
   '--w-rjv-type-date-color': '#586e75',
+  '--w-rjv-type-url-color': '#649bd8',
   '--w-rjv-type-null-color': '#d33682',
   '--w-rjv-type-nan-color': '#859900',
   '--w-rjv-type-undefined-color': '#586e75'

package/cjs/theme/light.d.ts

@@ -4,6 +4,7 @@ export declare const lightTheme: {
     '--w-rjv-background-color': string;
     '--w-rjv-line-color': string;
     '--w-rjv-arrow-color': string;
+    '--w-rjv-edit-color': string;
     '--w-rjv-info-color': string;
     '--w-rjv-update-color': string;
     '--w-rjv-copied-color': string;
@@ -16,6 +17,7 @@ export declare const lightTheme: {
     '--w-rjv-type-bigint-color': string;
     '--w-rjv-type-boolean-color': string;
     '--w-rjv-type-date-color': string;
+    '--w-rjv-type-url-color': string;
     '--w-rjv-type-null-color': string;
     '--w-rjv-type-nan-color': string;
     '--w-rjv-type-undefined-color': string;

package/cjs/theme/light.js

@@ -10,6 +10,7 @@ var lightTheme = {
   '--w-rjv-background-color': '#ffffff',
   '--w-rjv-line-color': '#ebebeb',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-edit-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#0000004d',
   '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-copied-color': '#002b36',
@@ -22,6 +23,7 @@ var lightTheme = {
   '--w-rjv-type-bigint-color': '#268bd2',
   '--w-rjv-type-boolean-color': '#2aa198',
   '--w-rjv-type-date-color': '#586e75',
+  '--w-rjv-type-url-color': '#0969da',
   '--w-rjv-type-null-color': '#d33682',
   '--w-rjv-type-nan-color': '#859900',
   '--w-rjv-type-undefined-color': '#586e75'

package/cjs/tools.d.ts

@@ -0,0 +1,10 @@
+import { JsonViewProps } from './';
+interface ToolsProps<T extends object> {
+    enableClipboard?: boolean;
+    value?: T | {};
+    onCopied?: JsonViewProps<T>['onCopied'];
+    components?: JsonViewProps<T>['components'];
+    showTools?: boolean;
+}
+export declare function Tools<T extends object>(props: ToolsProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/cjs/tools.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tools = Tools;
+var _react = require("react");
+var _copied = require("./copied");
+var _jsxRuntime = require("react/jsx-runtime");
+function Tools(props) {
+  var enableClipboard = props.enableClipboard,
+    value = props.value,
+    showTools = props.showTools,
+    components = props.components,
+    onCopied = props.onCopied;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
+    children: enableClipboard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
+      show: showTools,
+      text: value,
+      onCopied: onCopied,
+      render: components === null || components === void 0 ? void 0 : components.copied
+    })
+  });
+}