json-edit-react 0.9.6 → 1.0.0

package/build/index.cjs.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var assign = require('object-property-assigner');
@@ -28,7 +26,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 function __rest(s, e) {
@@ -51,7 +49,12 @@ function __awaiter(thisArg, _arguments, P, generator) {
         function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
@@ -314,7 +317,7 @@ const ThemeProvider = ({ children }) => {
     const [styles, setStyles] = react.useState(emptyStyleObject);
     const [icons, setIcons] = react.useState({});
     const setTheme = (theme) => setStyles(compileStyles(theme));
-    return (jsxRuntime.jsx(ThemeProviderContext.Provider, Object.assign({ value: { styles, setTheme, icons, setIcons } }, { children: children })));
+    return (jsxRuntime.jsx(ThemeProviderContext.Provider, { value: { styles, setTheme, icons, setIcons }, children: children }));
 };
 const useTheme = () => react.useContext(ThemeProviderContext);
 const compileStyles = (themeInput) => {
@@ -388,10 +391,10 @@ const defaultStyleProperties = {
 const AutogrowTextArea = ({ className, name, value, setValue, handleKeyPress, }) => {
     const { styles } = useTheme();
     const dummyValue = value.slice(-1) === '\n' ? value + '.' : value;
-    return (jsxRuntime.jsxs("div", Object.assign({ style: { display: 'grid' } }, { children: [jsxRuntime.jsx("textarea", { style: Object.assign({ height: 'auto', gridArea: '1 / 1 / 2 / 2', overflowY: 'auto' }, styles.input), rows: 1, className: className, name: name, value: value, onChange: (e) => setValue(e.target.value), autoFocus: true, onFocus: (e) => {
+    return (jsxRuntime.jsxs("div", { style: { display: 'grid' }, children: [jsxRuntime.jsx("textarea", { style: Object.assign({ height: 'auto', gridArea: '1 / 1 / 2 / 2', overflowY: 'auto' }, styles.input), rows: 1, className: className, name: name, value: value, onChange: (e) => setValue(e.target.value), autoFocus: true, onFocus: (e) => {
                     if (value.length < 40)
                         e.target.select();
-                }, onKeyDown: handleKeyPress }), jsxRuntime.jsx("span", Object.assign({ className: className, style: Object.assign({ visibility: 'hidden', height: 'auto', gridArea: '1 / 1 / 2 / 2', color: 'red', opacity: 0.9, whiteSpace: 'pre-wrap', overflow: 'clip', border: '1px solid transparent' }, styles.input) }, { children: dummyValue }))] })));
+                }, onKeyDown: handleKeyPress }), jsxRuntime.jsx("span", { className: className, style: Object.assign({ visibility: 'hidden', height: 'auto', gridArea: '1 / 1 / 2 / 2', color: 'red', opacity: 0.9, whiteSpace: 'pre-wrap', overflow: 'clip', border: '1px solid transparent' }, styles.input), children: dummyValue })] }));
 };
 
 const INVALID_FUNCTION_STRING = '**INVALID_FUNCTION**';
@@ -405,10 +408,10 @@ const StringValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdi
             handleCancel();
     };
     const breakString = (text) => text.split('\n').map((line, index, arr) => (jsxRuntime.jsxs("span", { children: [line, index < arr.length - 1 ? jsxRuntime.jsx("br", {}) : null] }, index)));
-    return isEditing ? (jsxRuntime.jsx(AutogrowTextArea, { className: "jer-input-text", name: path.join('.'), value: value, setValue: setValue, isEditing: isEditing, handleKeyPress: handleKeyPress })) : (jsxRuntime.jsxs("div", Object.assign({ onDoubleClick: () => setIsEditing(true), onClick: (e) => {
+    return isEditing ? (jsxRuntime.jsx(AutogrowTextArea, { className: "jer-input-text", name: path.join('.'), value: value, setValue: setValue, isEditing: isEditing, handleKeyPress: handleKeyPress })) : (jsxRuntime.jsxs("div", { onDoubleClick: () => setIsEditing(true), onClick: (e) => {
             if (e.getModifierState('Control') || e.getModifierState('Meta'))
                 setIsEditing(true);
-        }, className: "jer-value-string", style: styles.string }, { children: ["\"", breakString(truncate(value, stringTruncate)), "\""] })));
+        }, className: "jer-value-string", style: styles.string, children: ["\"", breakString(truncate(value, stringTruncate)), "\""] }));
 };
 const NumberValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdit, handleCancel, }) => {
     const { styles } = useTheme();
@@ -421,18 +424,70 @@ const NumberValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdi
     const validateNumber = (input) => {
         return input.replace(/[^0-9.-]/g, '');
     };
-    return isEditing ? (jsxRuntime.jsx("input", { className: "jer-input-number", type: "text", name: path.join('.'), value: value, onChange: (e) => setValue(validateNumber(e.target.value)), autoFocus: true, onFocus: (e) => e.target.select(), onKeyDown: handleKeyPress, style: { width: `${String(value).length / 1.5 + 2}em` } })) : (jsxRuntime.jsx("span", Object.assign({ onDoubleClick: () => setIsEditing(true), className: "jer-value-number", style: styles.number }, { children: value })));
+    return isEditing ? (jsxRuntime.jsx("input", { className: "jer-input-number", type: "text", name: path.join('.'), value: value, onChange: (e) => setValue(validateNumber(e.target.value)), autoFocus: true, onFocus: (e) => e.target.select(), onKeyDown: handleKeyPress, style: { width: `${String(value).length / 1.5 + 2}em` } })) : (jsxRuntime.jsx("span", { onDoubleClick: () => setIsEditing(true), className: "jer-value-number", style: styles.number, children: value }));
 };
-const BooleanValue = ({ value, setValue, isEditing, path, setIsEditing, }) => {
+const BooleanValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdit, handleCancel, }) => {
     const { styles } = useTheme();
-    return isEditing ? (jsxRuntime.jsx("input", { className: "jer-input-boolean", type: "checkbox", name: path.join('.'), checked: value, onChange: () => setValue(!value) })) : (jsxRuntime.jsx("span", Object.assign({ onDoubleClick: () => setIsEditing(true), className: "jer-value-boolean", style: styles.boolean }, { children: String(value) })));
+    react.useEffect(() => {
+        if (isEditing)
+            document.addEventListener('keydown', listenForSubmit);
+        return () => document.removeEventListener('keydown', listenForSubmit);
+    }, [isEditing]);
+    const listenForSubmit = (event) => {
+        if (event.key === 'Enter') {
+            handleEdit();
+        }
+        else if (event.key === 'Escape')
+            handleCancel();
+    };
+    return isEditing ? (jsxRuntime.jsx("input", { className: "jer-input-boolean", type: "checkbox", name: path.join('.'), checked: value, onChange: () => setValue(!value) })) : (jsxRuntime.jsx("span", { onDoubleClick: () => setIsEditing(true), className: "jer-value-boolean", style: styles.boolean, children: String(value) }));
 };
-const NullValue = ({ value, isEditing, setIsEditing }) => {
+const NullValue = ({ value, isEditing, setIsEditing, handleEdit, handleCancel, }) => {
     const { styles } = useTheme();
-    return isEditing ? (jsxRuntime.jsx("div", Object.assign({ className: "jer-input-null" }, { children: "null" }))) : (jsxRuntime.jsx("div", Object.assign({ onDoubleClick: () => setIsEditing(true), className: "jer-value-null", style: styles.null }, { children: String(value) })));
+    react.useEffect(() => {
+        if (isEditing)
+            document.addEventListener('keydown', listenForSubmit);
+        return () => document.removeEventListener('keydown', listenForSubmit);
+    }, [isEditing]);
+    const listenForSubmit = (event) => {
+        if (event.key === 'Enter') {
+            handleEdit();
+        }
+        else if (event.key === 'Escape')
+            handleCancel();
+    };
+    return isEditing ? (jsxRuntime.jsx("div", { className: "jer-input-null", children: "null" })) : (jsxRuntime.jsx("div", { onDoubleClick: () => setIsEditing(true), className: "jer-value-null", style: styles.null, children: String(value) }));
+};
+const ObjectValue = ({ value, translate, isEditing, handleEdit, handleCancel, }) => {
+    react.useEffect(() => {
+        if (isEditing)
+            document.addEventListener('keydown', listenForSubmit);
+        return () => document.removeEventListener('keydown', listenForSubmit);
+    }, []);
+    const listenForSubmit = (event) => {
+        if (event.key === 'Enter') {
+            handleEdit();
+        }
+        else if (event.key === 'Escape')
+            handleCancel();
+    };
+    return (jsxRuntime.jsx("span", { className: "jer-value-object", children: `{${translate('DEFAULT_NEW_KEY')}: "${value}" }` }));
+};
+const ArrayValue = ({ value, isEditing, handleEdit, handleCancel, }) => {
+    react.useEffect(() => {
+        if (isEditing)
+            document.addEventListener('keydown', listenForSubmit);
+        return () => document.removeEventListener('keydown', listenForSubmit);
+    }, []);
+    const listenForSubmit = (event) => {
+        if (event.key === 'Enter') {
+            handleEdit();
+        }
+        else if (event.key === 'Escape')
+            handleCancel();
+    };
+    return jsxRuntime.jsx("span", { className: "jer-value-array", children: `[${value === null ? '' : value}]` });
 };
-const ObjectValue = () => (jsxRuntime.jsx("span", Object.assign({ className: "jer-value-object" }, { children: '{ }' })));
-const ArrayValue = ({ value }) => (jsxRuntime.jsx("span", Object.assign({ className: "jer-value-array" }, { children: `[${value === null ? '' : value}]` })));
 const InvalidValue = ({ value }) => {
     let message = 'Error!';
     switch (typeof value) {
@@ -447,7 +502,7 @@ const InvalidValue = ({ value }) => {
             message = 'Symbol';
             break;
     }
-    return jsxRuntime.jsx("span", Object.assign({ className: "jer-value-invalid" }, { children: message }));
+    return jsxRuntime.jsx("span", { className: "jer-value-invalid", children: message });
 };
 
 const Icon = ({ name, rotate }) => {
@@ -511,22 +566,22 @@ const EditButtons = ({ startEdit, handleDelete, handleAdd, enableClipboard, type
         if (typeof enableClipboard === 'function')
             enableClipboard({ value, stringValue, path, key: name, type: copyType });
     };
-    return (jsxRuntime.jsxs("div", Object.assign({ className: "jer-edit-buttons", style: isAdding ? { opacity: 1 } : undefined }, { children: [enableClipboard && (jsxRuntime.jsx("div", Object.assign({ onClick: handleCopy, className: "jer-copy-pulse" }, { children: jsxRuntime.jsx(Icon, { name: "copy" }) }))), startEdit && (jsxRuntime.jsx("div", Object.assign({ onClick: startEdit }, { children: jsxRuntime.jsx(Icon, { name: "edit" }) }))), handleDelete && (jsxRuntime.jsx("div", Object.assign({ onClick: handleDelete }, { children: jsxRuntime.jsx(Icon, { name: "delete" }) }))), handleAdd && (jsxRuntime.jsx("div", Object.assign({ onClick: () => {
+    return (jsxRuntime.jsxs("div", { className: "jer-edit-buttons", style: isAdding ? { opacity: 1 } : undefined, children: [enableClipboard && (jsxRuntime.jsx("div", { onClick: handleCopy, className: "jer-copy-pulse", children: jsxRuntime.jsx(Icon, { name: "copy" }) })), startEdit && (jsxRuntime.jsx("div", { onClick: startEdit, children: jsxRuntime.jsx(Icon, { name: "edit" }) })), handleDelete && (jsxRuntime.jsx("div", { onClick: handleDelete, children: jsxRuntime.jsx(Icon, { name: "delete" }) })), handleAdd && (jsxRuntime.jsx("div", { onClick: () => {
                     if (type === 'object')
                         setIsAdding(true);
                     else
                         handleAdd('');
-                } }, { children: jsxRuntime.jsx(Icon, { name: "add" }) }))), isAdding && handleAdd && type === 'object' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { className: "jer-input-new-key", type: "text", name: "new-object-key", value: newKey, onChange: (e) => setNewKey(e.target.value), autoFocus: true, onFocus: (e) => e.target.select(), onKeyDown: handleKeyPress, style: Object.assign({}, styles.input) }), jsxRuntime.jsx(InputButtons, { onOk: () => {
+                }, children: jsxRuntime.jsx(Icon, { name: "add" }) })), isAdding && handleAdd && type === 'object' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { className: "jer-input-new-key", type: "text", name: "new-object-key", value: newKey, onChange: (e) => setNewKey(e.target.value), autoFocus: true, onFocus: (e) => e.target.select(), onKeyDown: handleKeyPress, style: Object.assign({}, styles.input) }), jsxRuntime.jsx(InputButtons, { onOk: () => {
                             if (!!newKey) {
                                 setIsAdding(false);
                                 handleAdd(newKey);
                             }
                         }, onCancel: () => {
                             setIsAdding(false);
-                        } })] }))] })));
+                        } })] }))] }));
 };
 const InputButtons = ({ onOk, onCancel }) => {
-    return (jsxRuntime.jsxs("div", Object.assign({ className: "jer-confirm-buttons" }, { children: [jsxRuntime.jsx("div", Object.assign({ onClick: onOk }, { children: jsxRuntime.jsx(Icon, { name: "ok" }) })), jsxRuntime.jsx("div", Object.assign({ onClick: onCancel }, { children: jsxRuntime.jsx(Icon, { name: "cancel" }) }))] })));
+    return (jsxRuntime.jsxs("div", { className: "jer-confirm-buttons", children: [jsxRuntime.jsx("div", { onClick: onOk, children: jsxRuntime.jsx(Icon, { name: "ok" }) }), jsxRuntime.jsx("div", { onClick: onCancel, children: jsxRuntime.jsx(Icon, { name: "cancel" }) })] }));
 };
 const stringifyPath = (path) => path.reduce((str, part) => {
     if (typeof part === 'number')
@@ -540,9 +595,27 @@ const ValueDataTypes = ['string', 'number', 'boolean', 'null'];
 const CollectionDataTypes = ['object', 'array'];
 const DataTypes = [...ValueDataTypes, ...CollectionDataTypes];
 
-const ValueNodeWrapper = ({ data, name, path, onEdit, onDelete, enableClipboard, restrictEditFilter, restrictDeleteFilter, showArrayIndices, stringTruncate, indent, translate, }) => {
+const getCustomNode = (customNodeDefinitions = [], filterProps) => {
+    const matchingDefinitions = customNodeDefinitions.filter(({ condition }) => condition(filterProps));
+    if (matchingDefinitions.length === 0)
+        return {};
+    const { element, props, hideKey = false } = matchingDefinitions[0];
+    return { CustomNode: element, customNodeProps: props, hideKey };
+};
+
+const CustomNodeWrapper = ({ name, hideKey, children, indent, }) => {
+    const { styles } = useTheme();
+    const indentStyle = indent ? { marginLeft: `${indent / 2}em` } : {};
+    return (jsxRuntime.jsx("div", { className: "jer-component jer-value-component", style: indentStyle, children: jsxRuntime.jsxs("div", { className: "jer-value-main-row", style: {
+                flexWrap: name.length > 10 ? 'wrap' : 'nowrap',
+            }, children: [!hideKey && (jsxRuntime.jsxs("label", { htmlFor: name, className: "jer-object-key", style: Object.assign(Object.assign({}, styles.property), { minWidth: `${Math.min(String(name).length + 1, 5)}ch`, flexShrink: name.length > 10 ? 1 : 0 }), children: [name, ":", ' '] })), jsxRuntime.jsx("div", { className: "jer-value-and-buttons", style: { paddingLeft: hideKey ? 0 : undefined }, children: children })] }) }));
+};
+
+const ValueNodeWrapper = (props) => {
+    const { data, parentData, name, path, onEdit, onDelete, enableClipboard, restrictEditFilter, restrictDeleteFilter, restrictTypeSelection, showLabel, stringTruncate, indent, translate, customNodeDefinitions, } = props;
     const { styles } = useTheme();
     const [isEditing, setIsEditing] = react.useState(false);
+    const [isEditingKey, setIsEditingKey] = react.useState(false);
     const [value, setValue] = react.useState(typeof data === 'function' ? INVALID_FUNCTION_STRING : data);
     const [error, setError] = react.useState(null);
     const [dataType, setDataType] = react.useState(getDataType(data));
@@ -551,8 +624,14 @@ const ValueNodeWrapper = ({ data, name, path, onEdit, onDelete, enableClipboard,
         setDataType(getDataType(data));
     }, [data, error]);
     const handleChangeDataType = (type) => {
-        setValue(convertValue(value, type));
-        setDataType(type);
+        const customNode = customNodeDefinitions.find((customNode) => customNode.name === type);
+        if (customNode) {
+            onEdit(customNode.defaultValue, path);
+        }
+        else {
+            setValue(convertValue(value, type));
+            setDataType(type);
+        }
     };
     const logError = (errorString) => {
         setError(errorString);
@@ -564,10 +643,10 @@ const ValueNodeWrapper = ({ data, name, path, onEdit, onDelete, enableClipboard,
         let newValue;
         switch (dataType) {
             case 'object':
-                newValue = {};
+                newValue = { [translate('DEFAULT_NEW_KEY')]: value };
                 break;
             case 'array':
-                newValue = value !== null ? [value] : [];
+                newValue = value !== null ? value : [];
                 break;
             case 'number':
                 const n = Number(value);
@@ -584,9 +663,27 @@ const ValueNodeWrapper = ({ data, name, path, onEdit, onDelete, enableClipboard,
                 logError(error);
         });
     };
+    const handleEditKey = (newKey) => {
+        setIsEditingKey(false);
+        if (!parentData)
+            return;
+        const parentPath = path.slice(0, -1);
+        if (!newKey)
+            return;
+        const newData = Object.fromEntries(Object.entries(parentData).map(([key, val]) => (key === name ? [newKey, val] : [key, val])));
+        onEdit(newData, parentPath);
+    };
+    const handleKeyPress = (e) => {
+        if (e.key === 'Enter')
+            handleEditKey(e.target.value);
+        else if (e.key === 'Escape')
+            handleCancel();
+    };
     const handleCancel = () => {
         setIsEditing(false);
+        setIsEditingKey(false);
         setValue(data);
+        setDataType(getDataType(data));
     };
     const handleDelete = () => {
         onDelete(value, path).then((error) => {
@@ -597,8 +694,11 @@ const ValueNodeWrapper = ({ data, name, path, onEdit, onDelete, enableClipboard,
     const filterProps = { key: name, path, level: path.length, value: data, size: null };
     const canEdit = react.useMemo(() => !restrictEditFilter(filterProps), [filterProps]);
     const canDelete = react.useMemo(() => !restrictDeleteFilter(filterProps), [filterProps]);
+    const isArray = typeof path.slice(-1)[0] === 'number';
+    const canEditKey = !isArray && canEdit && canDelete;
     const inputProps = {
         value,
+        parentData,
         setValue,
         isEditing,
         setIsEditing: canEdit ? () => setIsEditing(true) : () => { },
@@ -606,11 +706,35 @@ const ValueNodeWrapper = ({ data, name, path, onEdit, onDelete, enableClipboard,
         handleCancel,
         path,
         stringTruncate,
+        translate,
     };
-    return (jsxRuntime.jsx("div", Object.assign({ className: "jer-component jer-value-component", style: { marginLeft: `${indent / 2}em` } }, { children: jsxRuntime.jsxs("div", Object.assign({ className: "jer-value-main-row", style: {
+    const { CustomNode, customNodeProps, hideKey } = getCustomNode(customNodeDefinitions, {
+        key: name,
+        path,
+        level: path.length,
+        value: data,
+        size: 0,
+    });
+    const allDataTypes = [
+        ...customNodeDefinitions
+            .filter(({ showInTypesSelector = false }) => showInTypesSelector)
+            .map(({ name }) => name),
+        ...DataTypes,
+    ];
+    const allowedDataTypes = react.useMemo(() => {
+        if (typeof restrictTypeSelection === 'boolean')
+            return restrictTypeSelection ? [] : allDataTypes;
+        if (Array.isArray(restrictTypeSelection))
+            return restrictTypeSelection;
+        const result = restrictTypeSelection(filterProps);
+        if (typeof result === 'boolean')
+            return result ? [] : allDataTypes;
+        return result;
+    }, [filterProps, restrictTypeSelection]);
+    return CustomNode ? (jsxRuntime.jsx(CustomNodeWrapper, { name: name, hideKey: hideKey, indent: indent, children: jsxRuntime.jsx(CustomNode, Object.assign({ customProps: customNodeProps }, props)) })) : (jsxRuntime.jsx("div", { className: "jer-component jer-value-component", style: { marginLeft: `${indent / 2}em` }, children: jsxRuntime.jsxs("div", { className: "jer-value-main-row", style: {
                 flexWrap: name.length > 10 ? 'wrap' : 'nowrap',
-            } }, { children: [showArrayIndices && (jsxRuntime.jsxs("label", Object.assign({ htmlFor: path.join('.'), className: "jer-object-key", style: Object.assign(Object.assign({}, styles.property), { minWidth: `${Math.min(String(name).length + 1, 5)}ch`, flexShrink: name.length > 10 ? 1 : 0 }) }, { children: [name, ":", ' '] }))), jsxRuntime.jsxs("div", Object.assign({ className: "jer-value-and-buttons" }, { children: [jsxRuntime.jsx("div", Object.assign({ className: "jer-input-component" }, { children: getInputComponent(dataType, inputProps) })), isEditing ? (jsxRuntime.jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel })) : (dataType !== 'invalid' &&
-                            !error && (jsxRuntime.jsx(EditButtons, { startEdit: canEdit ? () => setIsEditing(true) : undefined, handleDelete: canDelete ? handleDelete : undefined, data: data, enableClipboard: enableClipboard, name: name, path: path, translate: translate }))), isEditing && (jsxRuntime.jsxs("div", Object.assign({ className: "jer-select" }, { children: [jsxRuntime.jsx("select", Object.assign({ name: `${name}-type-select`, className: "jer-type-select", onChange: (e) => handleChangeDataType(e.target.value), value: dataType }, { children: DataTypes.map((type) => (jsxRuntime.jsx("option", Object.assign({ value: type }, { children: type }), type))) })), jsxRuntime.jsx("span", { className: "focus" })] }))), !isEditing && error && (jsxRuntime.jsx("span", Object.assign({ className: "jer-error-slug", style: styles.error }, { children: error })))] }))] })) })));
+            }, children: [showLabel && !isEditingKey && (jsxRuntime.jsxs("label", { htmlFor: path.join('.'), className: "jer-object-key", style: Object.assign(Object.assign({}, styles.property), { minWidth: `${Math.min(String(name).length + 1, 5)}ch`, flexShrink: name.length > 10 ? 1 : 0 }), onDoubleClick: () => canEditKey && setIsEditingKey(true), children: [name, ":", ' '] })), showLabel && isEditingKey && (jsxRuntime.jsx("input", { className: "jer-object-key", type: "text", name: path.join('.'), defaultValue: name, autoFocus: true, onFocus: (e) => e.target.select(), onKeyDown: handleKeyPress, style: { width: `${String(name).length / 1.5 + 0.5}em` } })), jsxRuntime.jsxs("div", { className: "jer-value-and-buttons", children: [jsxRuntime.jsx("div", { className: "jer-input-component", children: getInputComponent(dataType, inputProps) }), isEditing ? (jsxRuntime.jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel })) : (dataType !== 'invalid' &&
+                            !error && (jsxRuntime.jsx(EditButtons, { startEdit: canEdit ? () => setIsEditing(true) : undefined, handleDelete: canDelete ? handleDelete : undefined, data: data, enableClipboard: enableClipboard, name: name, path: path, translate: translate }))), isEditing && allowedDataTypes.length > 0 && (jsxRuntime.jsxs("div", { className: "jer-select", children: [jsxRuntime.jsx("select", { name: `${name}-type-select`, className: "jer-type-select", onChange: (e) => handleChangeDataType(e.target.value), value: dataType, children: allowedDataTypes.map((type) => (jsxRuntime.jsx("option", { value: type, children: type }, type))) }), jsxRuntime.jsx("span", { className: "focus" })] })), !isEditing && error && (jsxRuntime.jsx("span", { className: "jer-error-slug", style: styles.error, children: error }))] })] }) }));
 };
 const getDataType = (value) => {
     if (typeof value === 'string')
@@ -635,7 +759,7 @@ const getInputComponent = (dataType, inputProps) => {
         case 'null':
             return jsxRuntime.jsx(NullValue, Object.assign({}, inputProps));
         case 'object':
-            return jsxRuntime.jsx(ObjectValue, Object.assign({}, inputProps));
+            return jsxRuntime.jsx(ObjectValue, Object.assign({}, inputProps, { value: value }));
         case 'array':
             return jsxRuntime.jsx(ArrayValue, Object.assign({}, inputProps));
         default:
@@ -654,7 +778,7 @@ const convertValue = (value, type) => {
         case 'null':
             return null;
         case 'object':
-            return {};
+            return value;
         case 'array':
             return [value];
         default:
@@ -664,10 +788,11 @@ const convertValue = (value, type) => {
 
 const isCollection = (value) => value !== null && typeof value == 'object';
 const CollectionNode = (_a) => {
-    var { data, path, name } = _a, props = __rest(_a, ["data", "path", "name"]);
+    var { data, path, name, parentData, showCollectionCount } = _a, props = __rest(_a, ["data", "path", "name", "parentData", "showCollectionCount"]);
     const { styles } = useTheme();
-    const { onEdit, onAdd, onDelete, restrictEditFilter, restrictDeleteFilter, restrictAddFilter, collapseFilter, enableClipboard, indent, keySort, showArrayIndices, defaultValue, translate, } = props;
+    const { onEdit, onAdd, onDelete, restrictEditFilter, restrictDeleteFilter, restrictAddFilter, collapseFilter, enableClipboard, indent, keySort, showArrayIndices, defaultValue, translate, customNodeDefinitions, } = props;
     const [isEditing, setIsEditing] = react.useState(false);
+    const [isEditingKey, setIsEditingKey] = react.useState(false);
     const [stringifiedValue, setStringifiedValue] = react.useState(JSON.stringify(data, null, 2));
     const [error, setError] = react.useState(null);
     const collectionSize = Object.keys(data).length;
@@ -721,6 +846,22 @@ const CollectionNode = (_a) => {
             return;
         }
     };
+    const handleEditKey = (newKey) => {
+        setIsEditingKey(false);
+        if (!parentData)
+            return;
+        const parentPath = path.slice(0, -1);
+        if (!newKey)
+            return;
+        const newData = Object.fromEntries(Object.entries(parentData).map(([key, val]) => (key === name ? [newKey, val] : [key, val])));
+        onEdit(newData, parentPath);
+    };
+    const handleKeyPressKeyEdit = (e) => {
+        if (e.key === 'Enter')
+            handleEditKey(e.target.value);
+        else if (e.key === 'Escape')
+            handleCancel();
+    };
     const handleAdd = (key) => {
         setCollapsed(false);
         if (collectionType === 'array') {
@@ -755,7 +896,10 @@ const CollectionNode = (_a) => {
     const canEdit = react.useMemo(() => !restrictEditFilter(filterProps), [filterProps]);
     const canDelete = react.useMemo(() => !restrictDeleteFilter(filterProps), [filterProps]);
     const canAdd = react.useMemo(() => !restrictAddFilter(filterProps), [filterProps]);
-    const showLabel = showArrayIndices || !(typeof path.slice(-1)[0] === 'number');
+    const canEditKey = parentData !== null && canEdit && canAdd && canDelete;
+    const isArray = typeof path.slice(-1)[0] === 'number';
+    const showLabel = showArrayIndices || !isArray;
+    const showCount = showCollectionCount === 'when-closed' ? collapsed : showCollectionCount;
     const keyValueArray = Object.entries(data).map(([key, value]) => [
         collectionType === 'array' ? Number(key) : key,
         value,
@@ -763,20 +907,27 @@ const CollectionNode = (_a) => {
     if (keySort && collectionType === 'object')
         keyValueArray.sort(typeof keySort === 'function' ? (a, b) => keySort(a[0], b[0]) : undefined);
     const numOfLines = JSON.stringify(data, null, 2).split('\n').length;
-    return (jsxRuntime.jsxs("div", Object.assign({ className: "jer-component fb-collection-component", style: { marginLeft: `${path.length === 0 ? 0 : indent / 2}em` } }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: "jer-collection-header-row" }, { children: [jsxRuntime.jsx("div", Object.assign({ onClick: handleCollapse }, { children: jsxRuntime.jsx(Icon, { name: "chevron", rotate: collapsed }) })), jsxRuntime.jsxs("div", Object.assign({ className: "jer-collection-name" }, { children: [jsxRuntime.jsx("span", Object.assign({ style: styles.property }, { children: showLabel ? `${name}:` : null })), !isEditing && (jsxRuntime.jsx("span", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.open })))] })), !isEditing && (jsxRuntime.jsx("div", Object.assign({ className: "jer-collection-item-count", style: styles.itemCount }, { children: collectionSize === 1
-                            ? translate('ITEM_SINGLE', 1)
-                            : translate('ITEMS_MULTIPLE', collectionSize) }))), jsxRuntime.jsx("div", Object.assign({ className: `jer-brackets${collapsed ? ' jer-visible' : ' jer-hidden'}`, style: styles.bracket }, { children: brackets.close })), !isEditing && (jsxRuntime.jsx(EditButtons, { startEdit: canEdit
-                            ? () => {
-                                setIsEditing(true);
-                                setCollapsed(false);
-                            }
-                            : undefined, handleAdd: canAdd ? handleAdd : undefined, handleDelete: canDelete ? handleDelete : undefined, enableClipboard: enableClipboard, type: collectionType, data: data, name: name, path: path, translate: translate }))] })), jsxRuntime.jsxs("div", Object.assign({ className: 'jer-collection-inner', style: {
-                    maxHeight: collapsed ? 0 : !isEditing ? `${numOfLines * 3}em` : undefined,
-                    overflowY: collapsed || isAnimating ? 'hidden' : 'visible',
-                    transition: `max-height ${transitionTime}`,
-                } }, { children: [isEditing ? (jsxRuntime.jsx("div", Object.assign({ className: "jer-collection-text-edit" }, { children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(AutogrowTextArea, { className: "jer-collection-text-area", name: path.join('.'), value: stringifiedValue, setValue: setStringifiedValue, isEditing: isEditing, handleKeyPress: handleKeyPress }), jsxRuntime.jsx("div", Object.assign({ className: "jer-collection-input-button-row" }, { children: jsxRuntime.jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel, isCollection: true }) }))] }) }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hasBeenOpened.current
-                            ? null
-                            : keyValueArray.map(([key, value]) => (jsxRuntime.jsx("div", Object.assign({ className: "jer-collection-element" }, { children: isCollection(value) ? (jsxRuntime.jsx(CollectionNode, Object.assign({ data: value, path: [...path, key], name: key }, props), key)) : (jsxRuntime.jsx(ValueNodeWrapper, Object.assign({ data: value, path: [...path, key], name: key }, props, { showArrayIndices: collectionType === 'object' ? true : showArrayIndices }), key)) }), key))) })), jsxRuntime.jsx("div", Object.assign({ className: isEditing ? 'jer-collection-error-row' : 'jer-collection-error-row-edit' }, { children: error && (jsxRuntime.jsx("span", Object.assign({ className: "jer-error-slug", style: styles.error }, { children: error }))) })), jsxRuntime.jsx("div", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.close }))] }))] })));
+    const { CustomNode, customNodeProps, hideKey } = getCustomNode(customNodeDefinitions, {
+        key: name,
+        path,
+        level: path.length,
+        value: data,
+        size: Object.keys(data).length,
+    });
+    return (jsxRuntime.jsx("div", { className: "jer-component fb-collection-component", style: { marginLeft: `${path.length === 0 ? 0 : indent / 2}em` }, children: CustomNode ? (jsxRuntime.jsx(CustomNodeWrapper, { name: name, hideKey: hideKey, children: jsxRuntime.jsx(CustomNode, Object.assign({ data: data, path: path, name: name, parentData: parentData, customProps: customNodeProps }, props)) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "jer-collection-header-row", children: [jsxRuntime.jsx("div", { onClick: handleCollapse, children: jsxRuntime.jsx(Icon, { name: "chevron", rotate: collapsed }) }), jsxRuntime.jsxs("div", { className: "jer-collection-name", children: [!isEditingKey && (jsxRuntime.jsx("span", { style: styles.property, onDoubleClick: () => canEditKey && setIsEditingKey(true), children: showLabel && name !== '' && name !== undefined ? `${name}:` : null })), isEditingKey && (jsxRuntime.jsx("input", { className: "jer-collection-name", type: "text", name: path.join('.'), defaultValue: name, autoFocus: true, onFocus: (e) => e.target.select(), onKeyDown: handleKeyPressKeyEdit, style: { width: `${String(name).length / 1.5 + 0.5}em` } })), !isEditing && (jsxRuntime.jsx("span", { className: "jer-brackets", style: styles.bracket, children: brackets.open }))] }), !isEditing && showCollectionCount && (jsxRuntime.jsx("div", { className: `jer-collection-item-count${showCount ? ' jer-visible' : ' jer-hidden'}`, style: styles.itemCount, children: collectionSize === 1
+                                ? translate('ITEM_SINGLE', 1)
+                                : translate('ITEMS_MULTIPLE', collectionSize) })), jsxRuntime.jsx("div", { className: `jer-brackets${collapsed ? ' jer-visible' : ' jer-hidden'}`, style: styles.bracket, children: brackets.close }), !isEditing && (jsxRuntime.jsx(EditButtons, { startEdit: canEdit
+                                ? () => {
+                                    setIsEditing(true);
+                                    setCollapsed(false);
+                                }
+                                : undefined, handleAdd: canAdd ? handleAdd : undefined, handleDelete: canDelete ? handleDelete : undefined, enableClipboard: enableClipboard, type: collectionType, data: data, name: name, path: path, translate: translate }))] }), jsxRuntime.jsxs("div", { className: 'jer-collection-inner', style: {
+                        maxHeight: collapsed ? 0 : !isEditing ? `${numOfLines * 3}em` : undefined,
+                        overflowY: collapsed || isAnimating ? 'hidden' : 'visible',
+                        transition: `max-height ${transitionTime}`,
+                    }, children: [isEditing ? (jsxRuntime.jsx("div", { className: "jer-collection-text-edit", children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(AutogrowTextArea, { className: "jer-collection-text-area", name: path.join('.'), value: stringifiedValue, setValue: setStringifiedValue, isEditing: isEditing, handleKeyPress: handleKeyPress }), jsxRuntime.jsx("div", { className: "jer-collection-input-button-row", children: jsxRuntime.jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel, isCollection: true }) })] }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hasBeenOpened.current
+                                ? null
+                                : keyValueArray.map(([key, value]) => (jsxRuntime.jsx("div", { className: "jer-collection-element", children: isCollection(value) ? (jsxRuntime.jsx(CollectionNode, Object.assign({ data: value, parentData: data, path: [...path, key], name: key, showCollectionCount: showCollectionCount }, props), key)) : (jsxRuntime.jsx(ValueNodeWrapper, Object.assign({ data: value, parentData: data, path: [...path, key], name: key }, props, { showLabel: collectionType === 'object' ? true : showArrayIndices }), key)) }, key))) })), jsxRuntime.jsx("div", { className: isEditing ? 'jer-collection-error-row' : 'jer-collection-error-row-edit', children: error && (jsxRuntime.jsx("span", { className: "jer-error-slug", style: styles.error, children: error })) }), jsxRuntime.jsx("div", { className: "jer-brackets", style: styles.bracket, children: brackets.close })] })] })) }));
 };
 
 const localisedStrings = {
@@ -788,6 +939,8 @@ const localisedStrings = {
     ERROR_UPDATE: 'Update unsuccessful',
     ERROR_DELETE: 'Delete unsuccessful',
     ERROR_ADD: 'Adding node unsuccessful',
+    DEFAULT_STRING: 'New data!',
+    DEFAULT_NEW_KEY: 'key',
 };
 const translate = (translations, key, count) => {
     const string = key in translations ? translations[key] : localisedStrings[key];
@@ -795,7 +948,7 @@ const translate = (translations, key, count) => {
 };
 const getTranslateFunction = (translations) => (key, count) => translate(translations, key, count);
 
-const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit = onUpdate, onDelete: srcDelete = onUpdate, onAdd: srcAdd = onUpdate, enableClipboard = true, theme = 'default', icons, indent = 4, collapse = false, restrictEdit = false, restrictDelete = false, restrictAdd = false, keySort = false, showArrayIndices = true, defaultValue = null, minWidth = 250, maxWidth = 'min(600px, 90vw)', stringTruncate = 250, translations = {}, className, }) => {
+const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit = onUpdate, onDelete: srcDelete = onUpdate, onAdd: srcAdd = onUpdate, enableClipboard = true, theme = 'default', icons, indent = 4, collapse = false, showCollectionCount = true, restrictEdit = false, restrictDelete = false, restrictAdd = false, restrictTypeSelection = false, keySort = false, showArrayIndices = true, defaultValue = null, minWidth = 250, maxWidth = 'min(600px, 90vw)', stringTruncate = 250, translations = {}, className, customNodeDefinitions = [], }) => {
     const [data, setData] = react.useState(srcData);
     const { styles, setTheme, setIcons } = useTheme();
     const collapseFilter = react.useCallback(getFilterFunction(collapse), [collapse]);
@@ -877,10 +1030,12 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
         onEdit,
         onDelete,
         onAdd,
+        showCollectionCount,
         collapseFilter,
         restrictEditFilter,
         restrictDeleteFilter,
         restrictAddFilter,
+        restrictTypeSelection,
         enableClipboard,
         keySort,
         showArrayIndices,
@@ -888,10 +1043,12 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
         defaultValue,
         stringTruncate,
         translate,
+        customNodeDefinitions,
+        parentData: null,
     };
     if (!styles)
         return null;
-    return (jsxRuntime.jsx("div", Object.assign({ className: 'jer-editor-container ' + className, style: Object.assign(Object.assign({}, styles.container), { minWidth, maxWidth }) }, { children: isCollection(data) && jsxRuntime.jsx(CollectionNode, Object.assign({ data: data, path: [] }, otherProps)) })));
+    return (jsxRuntime.jsx("div", { className: 'jer-editor-container ' + className, style: Object.assign(Object.assign({}, styles.container), { minWidth, maxWidth }), children: isCollection(data) ? (jsxRuntime.jsx(CollectionNode, Object.assign({ data: data, path: [] }, otherProps))) : (jsxRuntime.jsx(ValueNodeWrapper, Object.assign({ data: data, path: [], showLabel: true }, otherProps))) }));
 };
 const JsonEditor = (props) => (jsxRuntime.jsx(ThemeProvider, { children: jsxRuntime.jsx(Editor, Object.assign({}, props)) }));
 const updateDataObject = (data, path, newValue, action) => {
@@ -921,5 +1078,4 @@ const getFilterFunction = (propValue) => {
 };
 
 exports.JsonEditor = JsonEditor;
-exports.default = JsonEditor;
 exports.themes = themes;

package/build/index.d.ts

@@ -30,6 +30,8 @@ declare const localisedStrings: {
     ERROR_UPDATE: string;
     ERROR_DELETE: string;
     ERROR_ADD: string;
+    DEFAULT_STRING: string;
+    DEFAULT_NEW_KEY: string;
 };
 type LocalisedStrings = typeof localisedStrings;
 type TranslateFunction = (key: keyof LocalisedStrings, count?: number) => string;
@@ -47,10 +49,11 @@ interface JsonEditorProps {
     className?: string;
     indent?: number;
     collapse?: boolean | number | FilterFunction;
+    showCollectionCount?: boolean | 'when-closed';
     restrictEdit?: boolean | FilterFunction;
     restrictDelete?: boolean | FilterFunction;
     restrictAdd?: boolean | FilterFunction;
-    restrictKeyEdit?: boolean | FilterFunction;
+    restrictTypeSelection?: boolean | DataType[] | TypeFilterFunction;
     keySort?: boolean | CompareFunction;
     showArrayIndices?: boolean;
     defaultValue?: unknown;
@@ -58,8 +61,12 @@ interface JsonEditorProps {
     maxWidth?: string | number;
     stringTruncate?: number;
     translations?: Partial<LocalisedStrings>;
+    customNodeDefinitions?: CustomNodeDefinition[];
 }
+declare const DataTypes: readonly ["string", "number", "boolean", "null", "object", "array"];
+type DataType = (typeof DataTypes)[number] | 'invalid';
 type CollectionKey = string | number;
+type CollectionData = object | unknown[];
 type ErrorString = string;
 interface IconReplacements {
     add?: JSX.Element;
@@ -78,13 +85,15 @@ type UpdateFunction = (props: {
     name: CollectionKey;
     path: CollectionKey[];
 }) => void | ErrorString | false;
-type FilterFunction = (input: {
+interface FilterProps {
     key: CollectionKey;
     path: CollectionKey[];
     level: number;
     value: unknown;
     size: number | null;
-}) => boolean;
+}
+type FilterFunction = (input: FilterProps) => boolean;
+type TypeFilterFunction = (input: FilterProps) => boolean | DataType[];
 type CopyType = 'path' | 'value';
 type CopyFunction = (input: {
     key: CollectionKey;
@@ -94,7 +103,38 @@ type CopyFunction = (input: {
     type: CopyType;
 }) => void;
 type CompareFunction = (a: string, b: string) => number;
+type OnChangeFunction = (value: unknown, path: (string | number)[]) => Promise<string | void>;
+interface BaseNodeProps {
+    data: unknown;
+    parentData: CollectionData | null;
+    path: CollectionKey[];
+    name: CollectionKey;
+    onEdit: OnChangeFunction;
+    onDelete: OnChangeFunction;
+    enableClipboard: boolean | CopyFunction;
+    restrictEditFilter: FilterFunction;
+    restrictDeleteFilter: FilterFunction;
+    restrictAddFilter: FilterFunction;
+    restrictTypeSelection: boolean | DataType[] | TypeFilterFunction;
+    stringTruncate: number;
+    indent: number;
+    translate: TranslateFunction;
+    customNodeDefinitions: CustomNodeDefinition[];
+}
+interface CustomNodeProps extends BaseNodeProps {
+    customProps?: Record<string, unknown>;
+    parentData: CollectionData | null;
+}
+interface CustomNodeDefinition {
+    condition: FilterFunction;
+    element: React$1.FC<CustomNodeProps>;
+    name: string;
+    props?: Record<string, unknown>;
+    hideKey?: boolean;
+    defaultValue: unknown;
+    showInTypesSelector?: boolean;
+}
 
 declare const JsonEditor: React$1.FC<JsonEditorProps>;
 
-export { CompareFunction, CopyFunction, FilterFunction, IconReplacements, JsonEditor, JsonEditorProps, LocalisedStrings, Theme, ThemeInput, ThemeName, TranslateFunction, UpdateFunction, JsonEditor as default, themes };
+export { type CompareFunction, type CopyFunction, type FilterFunction, type IconReplacements, JsonEditor, type JsonEditorProps, type LocalisedStrings, type Theme, type ThemeInput, type ThemeName, type TranslateFunction, type UpdateFunction, themes };