json-edit-react 0.9.6 → 1.1.0

package/build/index.esm.js

@@ -24,7 +24,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) {
@@ -47,7 +47,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}}
 
@@ -310,7 +315,7 @@ const ThemeProvider = ({ children }) => {
     const [styles, setStyles] = useState(emptyStyleObject);
     const [icons, setIcons] = useState({});
     const setTheme = (theme) => setStyles(compileStyles(theme));
-    return (jsx(ThemeProviderContext.Provider, Object.assign({ value: { styles, setTheme, icons, setIcons } }, { children: children })));
+    return (jsx(ThemeProviderContext.Provider, { value: { styles, setTheme, icons, setIcons }, children: children }));
 };
 const useTheme = () => useContext(ThemeProviderContext);
 const compileStyles = (themeInput) => {
@@ -384,10 +389,10 @@ const defaultStyleProperties = {
 const AutogrowTextArea = ({ className, name, value, setValue, handleKeyPress, }) => {
     const { styles } = useTheme();
     const dummyValue = value.slice(-1) === '\n' ? value + '.' : value;
-    return (jsxs("div", Object.assign({ style: { display: 'grid' } }, { children: [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 (jsxs("div", { style: { display: 'grid' }, children: [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 }), 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 }), 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**';
@@ -401,10 +406,10 @@ const StringValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdi
             handleCancel();
     };
     const breakString = (text) => text.split('\n').map((line, index, arr) => (jsxs("span", { children: [line, index < arr.length - 1 ? jsx("br", {}) : null] }, index)));
-    return isEditing ? (jsx(AutogrowTextArea, { className: "jer-input-text", name: path.join('.'), value: value, setValue: setValue, isEditing: isEditing, handleKeyPress: handleKeyPress })) : (jsxs("div", Object.assign({ onDoubleClick: () => setIsEditing(true), onClick: (e) => {
+    return isEditing ? (jsx(AutogrowTextArea, { className: "jer-input-text", name: path.join('.'), value: value, setValue: setValue, isEditing: isEditing, handleKeyPress: handleKeyPress })) : (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();
@@ -417,18 +422,70 @@ const NumberValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdi
     const validateNumber = (input) => {
         return input.replace(/[^0-9.-]/g, '');
     };
-    return isEditing ? (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` } })) : (jsx("span", Object.assign({ onDoubleClick: () => setIsEditing(true), className: "jer-value-number", style: styles.number }, { children: value })));
+    return isEditing ? (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` } })) : (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 ? (jsx("input", { className: "jer-input-boolean", type: "checkbox", name: path.join('.'), checked: value, onChange: () => setValue(!value) })) : (jsx("span", Object.assign({ onDoubleClick: () => setIsEditing(true), className: "jer-value-boolean", style: styles.boolean }, { children: String(value) })));
+    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 ? (jsx("input", { className: "jer-input-boolean", type: "checkbox", name: path.join('.'), checked: value, onChange: () => setValue(!value) })) : (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 ? (jsx("div", Object.assign({ className: "jer-input-null" }, { children: "null" }))) : (jsx("div", Object.assign({ onDoubleClick: () => setIsEditing(true), className: "jer-value-null", style: styles.null }, { children: String(value) })));
+    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 ? (jsx("div", { className: "jer-input-null", children: "null" })) : (jsx("div", { onDoubleClick: () => setIsEditing(true), className: "jer-value-null", style: styles.null, children: String(value) }));
+};
+const ObjectValue = ({ value, translate, isEditing, handleEdit, handleCancel, }) => {
+    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 (jsx("span", { className: "jer-value-object", children: `{${translate('DEFAULT_NEW_KEY')}: "${value}" }` }));
+};
+const ArrayValue = ({ value, isEditing, handleEdit, handleCancel, }) => {
+    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 jsx("span", { className: "jer-value-array", children: `[${value === null ? '' : value}]` });
 };
-const ObjectValue = () => (jsx("span", Object.assign({ className: "jer-value-object" }, { children: '{ }' })));
-const ArrayValue = ({ value }) => (jsx("span", Object.assign({ className: "jer-value-array" }, { children: `[${value === null ? '' : value}]` })));
 const InvalidValue = ({ value }) => {
     let message = 'Error!';
     switch (typeof value) {
@@ -443,7 +500,7 @@ const InvalidValue = ({ value }) => {
             message = 'Symbol';
             break;
     }
-    return jsx("span", Object.assign({ className: "jer-value-invalid" }, { children: message }));
+    return jsx("span", { className: "jer-value-invalid", children: message });
 };
 
 const Icon = ({ name, rotate }) => {
@@ -507,22 +564,22 @@ const EditButtons = ({ startEdit, handleDelete, handleAdd, enableClipboard, type
         if (typeof enableClipboard === 'function')
             enableClipboard({ value, stringValue, path, key: name, type: copyType });
     };
-    return (jsxs("div", Object.assign({ className: "jer-edit-buttons", style: isAdding ? { opacity: 1 } : undefined }, { children: [enableClipboard && (jsx("div", Object.assign({ onClick: handleCopy, className: "jer-copy-pulse" }, { children: jsx(Icon, { name: "copy" }) }))), startEdit && (jsx("div", Object.assign({ onClick: startEdit }, { children: jsx(Icon, { name: "edit" }) }))), handleDelete && (jsx("div", Object.assign({ onClick: handleDelete }, { children: jsx(Icon, { name: "delete" }) }))), handleAdd && (jsx("div", Object.assign({ onClick: () => {
+    return (jsxs("div", { className: "jer-edit-buttons", style: isAdding ? { opacity: 1 } : undefined, children: [enableClipboard && (jsx("div", { onClick: handleCopy, className: "jer-copy-pulse", children: jsx(Icon, { name: "copy" }) })), startEdit && (jsx("div", { onClick: startEdit, children: jsx(Icon, { name: "edit" }) })), handleDelete && (jsx("div", { onClick: handleDelete, children: jsx(Icon, { name: "delete" }) })), handleAdd && (jsx("div", { onClick: () => {
                     if (type === 'object')
                         setIsAdding(true);
                     else
                         handleAdd('');
-                } }, { children: jsx(Icon, { name: "add" }) }))), isAdding && handleAdd && type === 'object' && (jsxs(Fragment, { children: [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) }), jsx(InputButtons, { onOk: () => {
+                }, children: jsx(Icon, { name: "add" }) })), isAdding && handleAdd && type === 'object' && (jsxs(Fragment, { children: [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) }), jsx(InputButtons, { onOk: () => {
                             if (!!newKey) {
                                 setIsAdding(false);
                                 handleAdd(newKey);
                             }
                         }, onCancel: () => {
                             setIsAdding(false);
-                        } })] }))] })));
+                        } })] }))] }));
 };
 const InputButtons = ({ onOk, onCancel }) => {
-    return (jsxs("div", Object.assign({ className: "jer-confirm-buttons" }, { children: [jsx("div", Object.assign({ onClick: onOk }, { children: jsx(Icon, { name: "ok" }) })), jsx("div", Object.assign({ onClick: onCancel }, { children: jsx(Icon, { name: "cancel" }) }))] })));
+    return (jsxs("div", { className: "jer-confirm-buttons", children: [jsx("div", { onClick: onOk, children: jsx(Icon, { name: "ok" }) }), jsx("div", { onClick: onCancel, children: jsx(Icon, { name: "cancel" }) })] }));
 };
 const stringifyPath = (path) => path.reduce((str, part) => {
     if (typeof part === 'number')
@@ -536,9 +593,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 (jsx("div", { className: "jer-component jer-value-component", style: indentStyle, children: jsxs("div", { className: "jer-value-main-row", style: {
+                flexWrap: name.length > 10 ? 'wrap' : 'nowrap',
+            }, children: [!hideKey && (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, ":", ' '] })), 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] = useState(false);
+    const [isEditingKey, setIsEditingKey] = useState(false);
     const [value, setValue] = useState(typeof data === 'function' ? INVALID_FUNCTION_STRING : data);
     const [error, setError] = useState(null);
     const [dataType, setDataType] = useState(getDataType(data));
@@ -547,8 +622,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);
@@ -560,10 +641,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);
@@ -580,9 +661,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) => {
@@ -593,8 +692,11 @@ const ValueNodeWrapper = ({ data, name, path, onEdit, onDelete, enableClipboard,
     const filterProps = { key: name, path, level: path.length, value: data, size: null };
     const canEdit = useMemo(() => !restrictEditFilter(filterProps), [filterProps]);
     const canDelete = 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) : () => { },
@@ -602,11 +704,35 @@ const ValueNodeWrapper = ({ data, name, path, onEdit, onDelete, enableClipboard,
         handleCancel,
         path,
         stringTruncate,
+        translate,
     };
-    return (jsx("div", Object.assign({ className: "jer-component jer-value-component", style: { marginLeft: `${indent / 2}em` } }, { children: 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 = 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 ? (jsx(CustomNodeWrapper, { name: name, hideKey: hideKey, indent: indent, children: jsx(CustomNode, Object.assign({ customProps: customNodeProps }, props)) })) : (jsx("div", { className: "jer-component jer-value-component", style: { marginLeft: `${indent / 2}em` }, children: jsxs("div", { className: "jer-value-main-row", style: {
                 flexWrap: name.length > 10 ? 'wrap' : 'nowrap',
-            } }, { children: [showArrayIndices && (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, ":", ' '] }))), jsxs("div", Object.assign({ className: "jer-value-and-buttons" }, { children: [jsx("div", Object.assign({ className: "jer-input-component" }, { children: getInputComponent(dataType, inputProps) })), isEditing ? (jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel })) : (dataType !== 'invalid' &&
-                            !error && (jsx(EditButtons, { startEdit: canEdit ? () => setIsEditing(true) : undefined, handleDelete: canDelete ? handleDelete : undefined, data: data, enableClipboard: enableClipboard, name: name, path: path, translate: translate }))), isEditing && (jsxs("div", Object.assign({ className: "jer-select" }, { children: [jsx("select", Object.assign({ name: `${name}-type-select`, className: "jer-type-select", onChange: (e) => handleChangeDataType(e.target.value), value: dataType }, { children: DataTypes.map((type) => (jsx("option", Object.assign({ value: type }, { children: type }), type))) })), jsx("span", { className: "focus" })] }))), !isEditing && error && (jsx("span", Object.assign({ className: "jer-error-slug", style: styles.error }, { children: error })))] }))] })) })));
+            }, children: [showLabel && !isEditingKey && (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 && (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` } })), jsxs("div", { className: "jer-value-and-buttons", children: [jsx("div", { className: "jer-input-component", children: getInputComponent(dataType, inputProps) }), isEditing ? (jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel })) : (dataType !== 'invalid' &&
+                            !error && (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 && (jsxs("div", { className: "jer-select", children: [jsx("select", { name: `${name}-type-select`, className: "jer-type-select", onChange: (e) => handleChangeDataType(e.target.value), value: dataType, children: allowedDataTypes.map((type) => (jsx("option", { value: type, children: type }, type))) }), jsx("span", { className: "focus" })] })), !isEditing && error && (jsx("span", { className: "jer-error-slug", style: styles.error, children: error }))] })] }) }));
 };
 const getDataType = (value) => {
     if (typeof value === 'string')
@@ -631,7 +757,7 @@ const getInputComponent = (dataType, inputProps) => {
         case 'null':
             return jsx(NullValue, Object.assign({}, inputProps));
         case 'object':
-            return jsx(ObjectValue, Object.assign({}, inputProps));
+            return jsx(ObjectValue, Object.assign({}, inputProps, { value: value }));
         case 'array':
             return jsx(ArrayValue, Object.assign({}, inputProps));
         default:
@@ -650,7 +776,7 @@ const convertValue = (value, type) => {
         case 'null':
             return null;
         case 'object':
-            return {};
+            return value;
         case 'array':
             return [value];
         default:
@@ -660,10 +786,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] = useState(false);
+    const [isEditingKey, setIsEditingKey] = useState(false);
     const [stringifiedValue, setStringifiedValue] = useState(JSON.stringify(data, null, 2));
     const [error, setError] = useState(null);
     const collectionSize = Object.keys(data).length;
@@ -717,6 +844,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') {
@@ -751,7 +894,10 @@ const CollectionNode = (_a) => {
     const canEdit = useMemo(() => !restrictEditFilter(filterProps), [filterProps]);
     const canDelete = useMemo(() => !restrictDeleteFilter(filterProps), [filterProps]);
     const canAdd = 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,
@@ -759,20 +905,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 (jsxs("div", Object.assign({ className: "jer-component fb-collection-component", style: { marginLeft: `${path.length === 0 ? 0 : indent / 2}em` } }, { children: [jsxs("div", Object.assign({ className: "jer-collection-header-row" }, { children: [jsx("div", Object.assign({ onClick: handleCollapse }, { children: jsx(Icon, { name: "chevron", rotate: collapsed }) })), jsxs("div", Object.assign({ className: "jer-collection-name" }, { children: [jsx("span", Object.assign({ style: styles.property }, { children: showLabel ? `${name}:` : null })), !isEditing && (jsx("span", Object.assign({ className: "jer-brackets", style: styles.bracket }, { children: brackets.open })))] })), !isEditing && (jsx("div", Object.assign({ className: "jer-collection-item-count", style: styles.itemCount }, { children: collectionSize === 1
-                            ? translate('ITEM_SINGLE', 1)
-                            : translate('ITEMS_MULTIPLE', collectionSize) }))), jsx("div", Object.assign({ className: `jer-brackets${collapsed ? ' jer-visible' : ' jer-hidden'}`, style: styles.bracket }, { children: brackets.close })), !isEditing && (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 }))] })), 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 ? (jsx("div", Object.assign({ className: "jer-collection-text-edit" }, { children: jsxs("div", { children: [jsx(AutogrowTextArea, { className: "jer-collection-text-area", name: path.join('.'), value: stringifiedValue, setValue: setStringifiedValue, isEditing: isEditing, handleKeyPress: handleKeyPress }), jsx("div", Object.assign({ className: "jer-collection-input-button-row" }, { children: jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel, isCollection: true }) }))] }) }))) : (jsx(Fragment, { children: !hasBeenOpened.current
-                            ? null
-                            : keyValueArray.map(([key, value]) => (jsx("div", Object.assign({ className: "jer-collection-element" }, { children: isCollection(value) ? (jsx(CollectionNode, Object.assign({ data: value, path: [...path, key], name: key }, props), key)) : (jsx(ValueNodeWrapper, Object.assign({ data: value, path: [...path, key], name: key }, props, { showArrayIndices: collectionType === 'object' ? true : showArrayIndices }), key)) }), key))) })), jsx("div", Object.assign({ className: isEditing ? 'jer-collection-error-row' : 'jer-collection-error-row-edit' }, { children: error && (jsx("span", Object.assign({ className: "jer-error-slug", style: styles.error }, { children: error }))) })), 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 (jsx("div", { className: "jer-component fb-collection-component", style: { marginLeft: `${path.length === 0 ? 0 : indent / 2}em` }, children: CustomNode ? (jsx(CustomNodeWrapper, { name: name, hideKey: hideKey, children: jsx(CustomNode, Object.assign({ data: data, path: path, name: name, parentData: parentData, customProps: customNodeProps }, props)) })) : (jsxs(Fragment, { children: [jsxs("div", { className: "jer-collection-header-row", children: [jsx("div", { onClick: handleCollapse, children: jsx(Icon, { name: "chevron", rotate: collapsed }) }), jsxs("div", { className: "jer-collection-name", children: [!isEditingKey && (jsx("span", { style: styles.property, onDoubleClick: () => canEditKey && setIsEditingKey(true), children: showLabel && name !== '' && name !== undefined ? `${name}:` : null })), isEditingKey && (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 && (jsx("span", { className: "jer-brackets", style: styles.bracket, children: brackets.open }))] }), !isEditing && showCollectionCount && (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) })), jsx("div", { className: `jer-brackets${collapsed ? ' jer-visible' : ' jer-hidden'}`, style: styles.bracket, children: brackets.close }), !isEditing && (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 }))] }), 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 ? (jsx("div", { className: "jer-collection-text-edit", children: jsxs("div", { children: [jsx(AutogrowTextArea, { className: "jer-collection-text-area", name: path.join('.'), value: stringifiedValue, setValue: setStringifiedValue, isEditing: isEditing, handleKeyPress: handleKeyPress }), jsx("div", { className: "jer-collection-input-button-row", children: jsx(InputButtons, { onOk: handleEdit, onCancel: handleCancel, isCollection: true }) })] }) })) : (jsx(Fragment, { children: !hasBeenOpened.current
+                                ? null
+                                : keyValueArray.map(([key, value]) => (jsx("div", { className: "jer-collection-element", children: isCollection(value) ? (jsx(CollectionNode, Object.assign({ data: value, parentData: data, path: [...path, key], name: key, showCollectionCount: showCollectionCount }, props), key)) : (jsx(ValueNodeWrapper, Object.assign({ data: value, parentData: data, path: [...path, key], name: key }, props, { showLabel: collectionType === 'object' ? true : showArrayIndices }), key)) }, key))) })), jsx("div", { className: isEditing ? 'jer-collection-error-row' : 'jer-collection-error-row-edit', children: error && (jsx("span", { className: "jer-error-slug", style: styles.error, children: error })) }), jsx("div", { className: "jer-brackets", style: styles.bracket, children: brackets.close })] })] })) }));
 };
 
 const localisedStrings = {
@@ -784,6 +937,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];
@@ -791,7 +946,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] = useState(srcData);
     const { styles, setTheme, setIcons } = useTheme();
     const collapseFilter = useCallback(getFilterFunction(collapse), [collapse]);
@@ -873,10 +1028,12 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
         onEdit,
         onDelete,
         onAdd,
+        showCollectionCount,
         collapseFilter,
         restrictEditFilter,
         restrictDeleteFilter,
         restrictAddFilter,
+        restrictTypeSelection,
         enableClipboard,
         keySort,
         showArrayIndices,
@@ -884,10 +1041,12 @@ const Editor = ({ data: srcData, rootName = 'root', onUpdate, onEdit: srcEdit =
         defaultValue,
         stringTruncate,
         translate,
+        customNodeDefinitions,
+        parentData: null,
     };
     if (!styles)
         return null;
-    return (jsx("div", Object.assign({ className: 'jer-editor-container ' + className, style: Object.assign(Object.assign({}, styles.container), { minWidth, maxWidth }) }, { children: isCollection(data) && jsx(CollectionNode, Object.assign({ data: data, path: [] }, otherProps)) })));
+    return (jsx("div", { className: 'jer-editor-container ' + className, style: Object.assign(Object.assign({}, styles.container), { minWidth, maxWidth }), children: isCollection(data) ? (jsx(CollectionNode, Object.assign({ data: data, path: [] }, otherProps))) : (jsx(ValueNodeWrapper, Object.assign({ data: data, path: [], showLabel: true }, otherProps))) }));
 };
 const JsonEditor = (props) => (jsx(ThemeProvider, { children: jsx(Editor, Object.assign({}, props)) }));
 const updateDataObject = (data, path, newValue, action) => {
@@ -916,4 +1075,4 @@ const getFilterFunction = (propValue) => {
     return propValue;
 };
 
-export { JsonEditor, JsonEditor as default, themes };
+export { JsonEditor, themes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-edit-react",
-  "version": "0.9.6",
+  "version": "1.1.0",
   "description": "React component for editing or viewing JSON/object data",
   "main": "build/index.cjs.js",
   "module": "build/index.esm.js",
@@ -27,22 +27,22 @@
   "dependencies": {
     "just-clone": "^6.2.0",
     "object-property-assigner": "^1.0.1",
-    "object-property-extractor": "^1.0.6",
-    "react-icons": "^4.8.0"
+    "object-property-extractor": "^1.0.7",
+    "react-icons": "^4.12.0"
   },
   "devDependencies": {
-    "@rollup/plugin-typescript": "^11.1.1",
-    "@types/node": "^20.1.4",
-    "@types/react": "^18.2.6",
-    "rimraf": "^5.0.0",
-    "rollup": "^3.22.0",
-    "rollup-plugin-dts": "^5.3.0",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@types/node": "^20.9.0",
+    "@types/react": "^18.2.37",
+    "rimraf": "^5.0.5",
+    "rollup": "^4.4.1",
+    "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-sizes": "^1.0.5",
     "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "ts-node": "^10.9.1",
-    "tslib": "^2.5.1",
-    "typescript": "^5.0.4"
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2"
   }
 }