@uiw/react-json-view 1.3.0 → 1.5.0

package/esm/semicolon.d.ts

@@ -0,0 +1,21 @@
+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 {
+    highlightUpdates?: boolean;
+    keyName?: string | number;
+    parentName?: string | number;
+    quotes?: JsonViewProps<object>['quotes'];
+    value?: object;
+    label?: string;
+    render?: (props: SemicolonProps) => React.ReactNode;
+}
+export declare const Semicolon: FC<PropsWithChildren<SemicolonProps>>;
+export {};

package/esm/semicolon.js

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "render", "color", "value", "className", "keyName", "highlightUpdates", "quotes", "style", "parentName"];
+import { useMemo, useRef, useEffect } from 'react';
+import { Label } from './value';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function usePrevious(value) {
+  var ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+export function useHighlight(_ref) {
+  var {
+    value,
+    highlightUpdates,
+    highlightContainer
+  } = _ref;
+  var prevValue = usePrevious(value);
+  var isHighlight = useMemo(() => {
+    if (!highlightUpdates || prevValue === undefined) return false;
+    // highlight if value type changed
+    if (typeof value !== typeof prevValue) {
+      return true;
+    }
+    if (typeof value === 'number') {
+      // notice: NaN !== NaN
+      if (isNaN(value) && isNaN(prevValue)) return false;
+      return value !== prevValue;
+    }
+    // highlight if isArray changed
+    if (Array.isArray(value) !== Array.isArray(prevValue)) {
+      return true;
+    }
+    // not highlight object/function
+    // deep compare they will be slow
+    if (typeof value === 'object' || typeof value === 'function') {
+      return false;
+    }
+
+    // highlight if not equal
+    if (value !== prevValue) {
+      return true;
+    }
+    return false;
+  }, [highlightUpdates, value]);
+  useEffect(() => {
+    if (highlightContainer && highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
+      highlightContainer.current.animate([{
+        backgroundColor: 'var(--w-rjv-update-color, #ebcb8b)'
+      }, {
+        backgroundColor: ''
+      }], {
+        duration: 1000,
+        easing: 'ease-in'
+      });
+    }
+  }, [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,
+    highlightUpdates,
+    highlightContainer
+  });
+  return /*#__PURE__*/_jsx(Label, _extends({
+    className: className,
+    color: color
+  }, props, {
+    ref: highlightContainer,
+    children: content
+  }));
+};

package/esm/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/esm/theme/dark.js

@@ -4,6 +4,7 @@ export 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',
@@ -16,6 +17,7 @@ export 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/esm/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/esm/theme/light.js

@@ -4,6 +4,7 @@ export 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',
@@ -16,6 +17,7 @@ export 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/esm/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/esm/tools.js

@@ -0,0 +1,20 @@
+import { Fragment } from "react";
+import { Copied } from './copied';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Tools(props) {
+  var {
+    enableClipboard,
+    value,
+    showTools,
+    components,
+    onCopied
+  } = props;
+  return /*#__PURE__*/_jsx(Fragment, {
+    children: enableClipboard && /*#__PURE__*/_jsx(Copied, {
+      show: showTools,
+      text: value,
+      onCopied: onCopied,
+      render: components == null ? void 0 : components.copied
+    })
+  });
+}

package/esm/value.d.ts

@@ -1,6 +1,8 @@
 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: {
     string: {
         color: string;
@@ -26,6 +28,10 @@ export declare const typeMap: {
         color: string;
         label: string;
     };
+    url: {
+        color: string;
+        label: string;
+    };
     null: {
         color: string;
         label: string;
@@ -40,20 +46,29 @@ export declare const typeMap: {
     };
 };
 export declare const Colon: FC<PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>>;
-export interface ValueViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
-    keyName?: string;
-    value?: T;
+export interface ValueViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+    keyName?: string | number;
+    value?: unknown;
     displayDataTypes: boolean;
     displayObjectSize: boolean;
     enableClipboard: boolean;
     indentWidth: number;
+    quotes?: JsonViewProps<T>['quotes'];
     renderKey?: JSX.Element;
     renderBraces?: MetaProps['render'];
     renderValue?: (props: React.HTMLAttributes<HTMLSpanElement> & {
         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> {
     color?: string;
     fontSize?: number;

package/esm/value.js

@@ -1,15 +1,16 @@
 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';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var Line = props => /*#__PURE__*/_jsx("div", _extends({}, props));
-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 = {
   string: {
     color: 'var(--w-rjv-type-string-color, #cb4b16)',
@@ -35,6 +36,10 @@ export var typeMap = {
     color: 'var(--w-rjv-type-date-color, #586e75)',
     label: 'date'
   },
+  url: {
+    color: 'var(--w-rjv-type-url-color, #0969da)',
+    label: 'URL'
+  },
   null: {
     color: 'var(--w-rjv-type-null-color, #d33682)',
     label: 'null'
@@ -63,23 +68,9 @@ export var Colon = _ref => {
     children: children
   }));
 };
-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') {
     type = isFloat(value) ? 'float' : 'number';
     content = value.toString();
@@ -92,29 +83,65 @@ export function ValueView(props) {
     type = 'date';
     content = value.toString();
   }
-  var typeView = /*#__PURE__*/_jsx(Type, {
-    type: type
-  });
   if (value === null) {
     type = 'null';
     content = ("" + value).toLocaleUpperCase();
-    typeView = /*#__PURE__*/_jsx(Fragment, {});
-    style = {
-      fontWeight: 'bold'
-    };
   }
   if (value === undefined) {
     type = 'undefined';
     content = String(value);
-    typeView = /*#__PURE__*/_jsx(Fragment, {});
   }
   if (typeof value === 'bigint') {
     type = 'bigint';
     content = value + "n";
   }
+  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) {
     typeView = /*#__PURE__*/_jsx(Fragment, {});
   }
@@ -141,14 +168,26 @@ export function ValueView(props) {
         color
       }, style),
       type,
+      value,
+      quotes,
+      keyName,
+      visible: showTools,
       content,
-      children: value
+      children: content
     });
     var valueView = reView ? reView : /*#__PURE__*/_jsx(Label, {
       color: color,
       style: style,
       className: "w-rjv-value",
-      children: content
+      children: isURL ? /*#__PURE__*/_jsx("a", {
+        href: value.href,
+        style: {
+          color
+        },
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: content
+      }) : content
     });
     return /*#__PURE__*/_jsx(Line, _extends({}, eventProps, {
       children: /*#__PURE__*/_jsxs(Label, _extends({}, reset, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -12,6 +12,11 @@
       "types": "./cjs/index.d.ts",
       "require": "./cjs/index.js"
     },
+    "./editor": {
+      "import": "./esm/editor/index.js",
+      "types": "./cjs/editor/index.d.ts",
+      "require": "./cjs/editor/index.js"
+    },
     "./light": {
       "import": "./esm/theme/light.js",
       "types": "./cjs/theme/light.d.ts",
@@ -45,6 +50,7 @@
     "react-dom": ">=18.0.0"
   },
   "files": [
+    "editor.d.ts",
     "dark.d.ts",
     "light.d.ts",
     "triangle-arrow.d.ts",