@uiw/react-json-view 1.4.0 → 1.5.0

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.4.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",