json-edit-react 0.9.0

package/build/index.esm.js

@@ -0,0 +1,873 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, useState, useContext, useEffect, useMemo, useCallback } from 'react';
+import assign from 'object-property-assigner';
+import extract from 'object-property-extractor';
+import clone from 'just-clone';
+import { HiOutlineClipboardCopy } from 'react-icons/hi';
+import { BiEdit, BiPlusCircle } from 'react-icons/bi';
+import { MdDeleteForever } from 'react-icons/md';
+import { FiCheckCircle } from 'react-icons/fi';
+import { TiCancel } from 'react-icons/ti';
+import { FaChevronDown } from 'react-icons/fa';
+
+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}}
+
+var css = ":root {\n  --jer-form-border: 1px solid #ededf0;\n  --jer-form-border-focus: 1px solid #e2e2e2;\n  --jer-expand-transition-time: 0.2s;\n  --jer-highlight-color: #b3d8ff;\n}\n.jer-editor-container {\n  font-size: 1.1em;\n  /* font-size: 20px; */\n  padding: 1em;\n  margin-top: 1em;\n  margin-bottom: 1em;\n  border-radius: 0.5em;\n}\n\n.jer-editor-container textarea {\n  /* width: 90%; */\n  color: var(--jer-input-color);\n  border: var(--jer-form-border);\n  border-radius: 0.3em;\n  outline: none;\n}\n\n.jer-editor-container textarea:focus {\n  border: var(--jer-form-border-focus);\n}\n\n.jer-editor-container input {\n  border: var(--jer-form-border);\n  border-radius: 0.3em;\n  outline: none;\n}\n\n.jer-editor-container input:focus {\n  border: var(--jer-form-border-focus);\n}\n\n/* Input highlighted text */\n.jer-editor-container ::selection {\n  background-color: var(--jer-highlight-color);\n}\n\n.jer-editor-container select {\n  /* color: red; */\n}\n\n.jer-component {\n}\n\n.fb-collection-component {\n}\n\n.jer-collection-header-row,\n.jer-value-main-row {\n  display: flex;\n  min-height: 1.7em;\n  gap: 0.3em;\n  align-items: center;\n}\n\n.jer-collection-header-row {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.jer-brackets {\n}\n\n.jer-collection-item-count {\n}\n\n.jer-collection-inner {\n  position: relative;\n}\n\n.jer-collection-text-edit {\n  display: flex;\n  flex-direction: column;\n  gap: 0.3em;\n}\n\n.jer-collection-text-area {\n  resize: both;\n  padding-top: 0.2em;\n  padding-left: 0.5em;\n  padding-right: 0.5em;\n  padding-bottom: 0;\n  overflow: hidden;\n  max-height: 40em;\n}\n\n.jer-collection-input-button-row {\n  width: 90%;\n  display: flex;\n  justify-content: flex-end;\n  font-size: 150%;\n}\n\n.jer-collection-element {\n}\n\n.jer-collection-error-row {\n  position: absolute;\n  bottom: 0;\n}\n\n.jer-collection-error-row-edit {\n}\n\n.jer-error-slug {\n  margin-left: 1em;\n}\n\n.jer-value-component {\n  position: relative;\n}\n\n.jer-value-main-row {\n  display: flex;\n}\n\n.jer-value-error-row {\n  position: absolute;\n}\n\n.jer-value-string {\n  line-height: 1.3em;\n}\n\n.jer-input-text {\n  resize: none;\n  margin: 0;\n  height: 1.4em;\n  padding-left: 0.5em;\n  padding-right: 0.5em;\n  padding-bottom: 0;\n  min-width: 6em;\n  overflow: hidden;\n  max-height: 30em;\n}\n\n/* To prevent over-writing by UI libraries */\n.jer-type-select {\n  border: revert;\n  border-radius: revert;\n  padding: revert;\n  font-family: revert;\n  font-size: revert;\n  color: revert;\n}\n\n.jer-value-number {\n}\n\n.jer-value-boolean {\n}\n\n.jer-value-null {\n}\n\n.jer-value-object {\n}\n\n.jer-object-key {\n  word-break: break-word;\n  line-height: 1.1em;\n}\n\n.jer-value-array {\n}\n\n.jer-value-invalid {\n  opacity: 0.5;\n  font-style: italic;\n}\n\n/* .jer-input-text, */\n.jer-input-number {\n  height: 1.6em;\n}\n\n.jer-input-number {\n  min-width: 3em;\n}\n\n.jer-input-component {\n}\n\n.jer-edit-buttons,\n.jer-confirm-buttons {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n\n.jer-input-buttons {\n  gap: 0.4em;\n}\n\n.jer-edit-buttons {\n  gap: 0.4em;\n  margin-left: 0.5em;\n  opacity: 0;\n}\n\n.jer-confirm-buttons {\n  gap: 0.2em;\n  margin-left: 0.4em;\n}\n\n.jer-edit-buttons:hover {\n  opacity: 1;\n  position: relative;\n}\n\n.jer-collection-header-row:hover > .jer-edit-buttons {\n  opacity: 1;\n}\n\n.jer-value-main-row:hover > .jer-edit-buttons {\n  opacity: 1;\n}\n\n.jer-input-buttons {\n}\n\n.jer-icon-wrapper {\n  height: 1.4em;\n  opacity: 1;\n  transition: 0.2s;\n}\n\n.jer-icon-wrapper:active {\n  position: relative;\n  top: 0.07em;\n}\n\n.jer-icon-wrapper:hover {\n  opacity: 0.85;\n  transition: 0.2s;\n  transform: scale(1.2);\n}\n\n.jer-copy-pulse {\n  position: relative;\n}\n\n.jer-copy-pulse:hover {\n}\n\n.jer-copy-pulse:after {\n  content: '';\n  display: block;\n  position: absolute;\n  border-radius: 50%;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  transition: all 0.5s;\n  box-shadow: 0 0 15px 5px var(--jer-icon-copy-color);\n}\n\n.jer-copy-pulse:active:after {\n  box-shadow: 0 0 0 0 var(--jer-icon-copy-color);\n  position: absolute;\n  border-radius: 4em;\n  left: 0;\n  top: 0;\n  opacity: 1;\n  transition: 0s;\n}\n\n.jer-copy-pulse:active {\n  top: 0.07em;\n}\n\n.jer-rotate-90 {\n  transform: rotate(-90deg);\n  transition: transform var(--jer-expand-transition-time);\n}\n\n.jer-icon {\n  /* font-size: '2em'; */\n}\n\n.jer-icon:hover {\n  opacity: 0.85;\n  transition: 0.3s;\n  transform: scale(1.2);\n}\n";
+n(css,{});
+
+const defaultTheme$1 = {
+    displayName: 'Default',
+    fragments: { edit: 'rgb(42, 161, 152)' },
+    styles: {
+        container: {
+            backgroundColor: '#f6f6f6',
+            fontFamily: 'monospace',
+        },
+        property: '#292929',
+        bracket: { color: 'rgb(0, 43, 54)', fontWeight: 'bold' },
+        itemCount: { color: 'rgba(0, 0, 0, 0.3)', fontStyle: 'italic' },
+        string: 'rgb(203, 75, 22)',
+        number: 'rgb(38, 139, 210)',
+        boolean: 'green',
+        null: { color: 'rgb(220, 50, 47)', fontVariant: 'small-caps', fontWeight: 'bold' },
+        input: ['#292929', { fontSize: '90%' }],
+        inputHighlight: '#b3d8ff',
+        error: { fontSize: '0.8em', color: 'red', fontWeight: 'bold' },
+        iconCollection: 'rgb(0, 43, 54)',
+        iconEdit: 'edit',
+        iconDelete: 'rgb(203, 75, 22)',
+        iconAdd: 'edit',
+        iconCopy: 'rgb(38, 139, 210)',
+        iconOk: 'green',
+        iconCancel: 'rgb(203, 75, 22)',
+    },
+};
+const themes = {
+    default: defaultTheme$1,
+    githubDark: {
+        displayName: 'Github Dark',
+        styles: {
+            container: {
+                backgroundColor: '#0d1117',
+                color: 'white',
+            },
+            property: '#E6EDF3',
+            bracket: '#56d364',
+            itemCount: '#8B949E',
+            string: '#A5D6FF',
+            number: '#D2A8FF',
+            boolean: { color: '#FF7B72', fontSize: '90%', fontWeight: 'bold' },
+            null: 'green',
+            iconCollection: '#D2A8FF',
+            iconEdit: '#D2A8FF',
+            iconDelete: 'rgb(203, 75, 22)',
+            iconAdd: 'rgb(203, 75, 22)',
+            iconCopy: '#A5D6FF',
+            iconOk: '#56d364',
+            iconCancel: 'rgb(203, 75, 22)',
+        },
+    },
+    githubLight: {
+        displayName: 'Github Light',
+        styles: {
+            container: 'white',
+            property: '#1F2328',
+            bracket: '#00802e',
+            itemCount: '#8B949E',
+            string: '#0A3069',
+            number: '#953800',
+            boolean: { color: '#CF222E', fontSize: '90%', fontWeight: 'bold' },
+            null: '#FF7B72',
+            iconCollection: '#8250DF',
+            iconEdit: '#8250DF',
+            iconDelete: 'rgb(203, 75, 22)',
+            iconAdd: '#8250DF',
+            iconCopy: '#57606A',
+        },
+    },
+    monoDark: {
+        displayName: 'Black & White',
+        fragments: {
+            lightText: { color: 'white' },
+            midGrey: '#5c5c5c',
+        },
+        styles: {
+            container: ['lightText', { backgroundColor: 'black' }],
+            property: 'lightText',
+            bracket: 'midGrey',
+            itemCount: '#4a4a4a',
+            string: '#a8a8a8',
+            number: '#666666',
+            boolean: { color: '#848484', fontStyle: 'italic' },
+            null: '#333333',
+            iconCollection: 'midGrey',
+            iconEdit: 'midGrey',
+            iconDelete: 'midGrey',
+            iconAdd: 'midGrey',
+            iconCopy: 'midGrey',
+            iconOk: 'midGrey',
+            iconCancel: 'midGrey',
+        },
+    },
+    monoLight: {
+        fragments: { midGrey: '#a3a3a3' },
+        displayName: 'White & Black',
+        styles: {
+            container: 'white',
+            property: 'black',
+            bracket: 'midGrey',
+            itemCount: '#b5b5b5',
+            string: '#575757',
+            number: '#999999',
+            boolean: { color: '#7b7b7b', fontStyle: 'italic' },
+            null: '#cccccc',
+            iconCollection: 'midGrey',
+            iconEdit: 'midGrey',
+            iconDelete: 'midGrey',
+            iconAdd: 'midGrey',
+            iconCopy: 'midGrey',
+            iconOk: 'midGrey',
+            iconCancel: 'midGrey',
+        },
+    },
+    candyWrapper: {
+        displayName: 'Candy Wrapper',
+        fragments: {
+            minty: { backgroundColor: '#F1FAEE' },
+            pale: { color: '#A8DADC' },
+            mid: { color: '#457B9D' },
+            dark: { color: '#1D3557' },
+            pop: { color: '#E63946' },
+            darkBlue: { color: '#2B2D42' },
+        },
+        styles: {
+            container: 'minty',
+            property: 'pop',
+            bracket: 'dark',
+            itemCount: 'pale',
+            string: 'mid',
+            number: ['darkBlue', { fontSize: '85%' }],
+            boolean: ['mid', { fontStyle: 'italic', fontWeight: 'bold', fontSize: '80%' }],
+            null: ['#cccccc', { fontWeight: 'bold' }],
+            iconCollection: '#1D3557',
+            iconEdit: '#457B9D',
+            iconDelete: '#E63946',
+            iconAdd: '#2B2D42',
+            iconCopy: '#1D3557',
+            iconCancel: '#E63946',
+        },
+    },
+    psychedelic: {
+        displayName: 'Psychedelic',
+        fragments: {
+            minty: {
+                backgroundColor: '#F1FAEE',
+            },
+            pale: {
+                color: '#A8DADC',
+            },
+            mid: {
+                color: '#457B9D',
+            },
+            dark: {
+                color: '#1D3557',
+            },
+            pop: {
+                color: '#E63946',
+            },
+            fluroYellow: 'rgb(242, 228, 21)',
+            fluroGreen: 'rgb(68, 255, 62)',
+            hotPink: '#f7379a',
+        },
+        styles: {
+            container: {
+                backgroundColor: 'unset',
+                background: 'linear-gradient(90deg, hsla(333, 100%, 53%, 1) 0%, hsla(33, 94%, 57%, 1) 100%)',
+                color: 'black',
+            },
+            property: 'black',
+            bracket: 'fluroYellow',
+            itemCount: [
+                'pale',
+                {
+                    opacity: 0.7,
+                },
+            ],
+            string: 'white',
+            number: [
+                '#33d9ff',
+                {
+                    fontSize: '90%',
+                    fontWeight: 'bold',
+                },
+            ],
+            boolean: [
+                'fluroGreen',
+                {
+                    fontWeight: 'bold',
+                    fontSize: '80%',
+                },
+            ],
+            null: [
+                'black',
+                {
+                    fontWeight: 'bold',
+                    opacity: 0.3,
+                    backgroundColor: 'rgb(255, 255, 255, 0.5)',
+                    padding: '0 0.4em',
+                    borderRadius: '0.4em',
+                },
+            ],
+            iconCollection: 'fluroYellow',
+            iconEdit: ['black'],
+            iconDelete: [
+                'white',
+                {
+                    opacity: 0.5,
+                },
+            ],
+            iconAdd: [
+                'white',
+                {
+                    opacity: 0.5,
+                },
+            ],
+            iconCopy: 'rgb(32, 84, 242)',
+            iconOk: 'fluroGreen',
+            iconCancel: 'hotPink',
+        },
+    },
+};
+const emptyStyleObject = {
+    container: {},
+    property: {},
+    bracket: {},
+    itemCount: {},
+    string: {},
+    number: {},
+    boolean: {},
+    null: {},
+    input: {},
+    inputHighlight: {},
+    error: {},
+    iconCollection: {},
+    iconEdit: {},
+    iconDelete: {},
+    iconAdd: {},
+    iconCopy: {},
+    iconOk: {},
+    iconCancel: {},
+};
+
+const defaultTheme = themes.default;
+const initialContext = {
+    styles: emptyStyleObject,
+    setTheme: (_) => { },
+    icons: {},
+    setIcons: () => { },
+};
+const ThemeProviderContext = createContext(initialContext);
+const ThemeProvider = ({ children }) => {
+    const [styles, setStyles] = useState(emptyStyleObject);
+    const [icons, setIcons] = useState({});
+    const setTheme = (theme) => setStyles(compileStyles(theme));
+    return (jsx(ThemeProviderContext.Provider, { value: { styles, setTheme, icons, setIcons }, children: children }));
+};
+const useTheme = () => useContext(ThemeProviderContext);
+const compileStyles = (themeInput) => {
+    if (typeof themeInput === 'string')
+        return buildStyleObject(themes[themeInput]);
+    if (Array.isArray(themeInput)) {
+        const [name, overrides] = themeInput;
+        return buildStyleObject(themes[name], isStyleObject(overrides) ? { styles: overrides } : overrides);
+    }
+    return buildStyleObject(defaultTheme, isStyleObject(themeInput) ? { styles: themeInput } : themeInput);
+};
+const buildStyleObject = (baseTheme, overrides = { styles: emptyStyleObject }) => {
+    const [defaultStyles, baseStyles, overrideStyles] = [defaultTheme, baseTheme, overrides].map((theme) => {
+        const { fragments, styles } = theme;
+        const compiledStyles = {};
+        Object.entries(styles).forEach(([key, value]) => {
+            const elements = Array.isArray(value) ? value : [value];
+            const cssStyles = elements.reduce((acc, curr) => {
+                if (typeof curr === 'string') {
+                    const style = fragments?.[curr] ?? curr;
+                    switch (typeof style) {
+                        case 'string':
+                            return { ...acc, [defaultStyleProperties[key]]: style };
+                        default:
+                            return { ...acc, ...style };
+                    }
+                }
+                else
+                    return { ...acc, ...curr };
+            }, {});
+            compiledStyles[key] = cssStyles;
+        });
+        return compiledStyles;
+    });
+    const finalStyles = {};
+    Object.keys(defaultTheme.styles).forEach((key) => {
+        finalStyles[key] = {
+            ...defaultStyles[key],
+            ...baseStyles[key],
+            ...overrideStyles[key],
+        };
+    });
+    if (finalStyles?.inputHighlight?.backgroundColor)
+        document.documentElement.style.setProperty('--jer-highlight-color', finalStyles?.inputHighlight?.backgroundColor);
+    if (finalStyles?.iconCopy?.color)
+        document.documentElement.style.setProperty('--jer-icon-copy-color', finalStyles?.iconCopy?.color);
+    return finalStyles;
+};
+const isStyleObject = (overrideObject) => {
+    return !('styles' in overrideObject);
+};
+const defaultStyleProperties = {
+    container: 'backgroundColor',
+    property: 'color',
+    bracket: 'color',
+    itemCount: 'color',
+    string: 'color',
+    number: 'color',
+    boolean: 'color',
+    null: 'color',
+    input: 'color',
+    inputHighlight: 'backgroundColor',
+    error: 'color',
+    iconCollection: 'color',
+    iconEdit: 'color',
+    iconDelete: 'color',
+    iconAdd: 'color',
+    iconCopy: 'color',
+    iconOk: 'color',
+    iconCancel: 'color',
+};
+
+const AutogrowTextArea = ({ className, name, value, setValue, handleKeyPress, }) => {
+    const { styles } = useTheme();
+    const dummyValue = value.slice(-1) === '\n' ? value + '.' : value;
+    return (jsxs("div", { style: { display: 'grid' }, children: [jsx("textarea", { style: {
+                    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", { className: className, style: {
+                    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 truncate = (string, length = 200) => string.length < length ? string : `${string.slice(0, length - 2).trim()}...`;
+const StringValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdit, handleCancel, stringTruncate, }) => {
+    const { styles } = useTheme();
+    const handleKeyPress = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey)
+            handleEdit();
+        else if (e.key === 'Escape')
+            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", { 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)), "\""] }));
+};
+const NumberValue = ({ value, setValue, isEditing, path, setIsEditing, handleEdit, handleCancel, }) => {
+    const { styles } = useTheme();
+    const handleKeyPress = (e) => {
+        if (e.key === 'Enter')
+            handleEdit();
+        else if (e.key === 'Escape')
+            handleCancel();
+    };
+    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", { onDoubleClick: () => setIsEditing(true), className: "jer-value-number", style: styles.number, children: value }));
+};
+const BooleanValue = ({ value, setValue, isEditing, path, setIsEditing, }) => {
+    const { styles } = useTheme();
+    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 { styles } = useTheme();
+    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 = () => {
+    return jsx("span", { className: "jer-value-object", children: '{ }' });
+};
+const ArrayValue = ({ value }) => {
+    return jsx("span", { className: "jer-value-array", children: `[${value === null ? '' : value}]` });
+};
+const InvalidValue = () => {
+    return jsx("span", { className: "jer-value-invalid", children: "Invalid value" });
+};
+
+const Icon = ({ name, rotate }) => {
+    const { styles, icons } = useTheme();
+    const commonProps = { size: '1.4em', className: 'jer-icon' };
+    switch (name) {
+        case 'add':
+            return icons?.add ?? jsx(BiPlusCircle, { ...commonProps, style: styles.iconAdd });
+        case 'edit':
+            return icons?.edit ?? jsx(BiEdit, { ...commonProps, style: styles.iconEdit });
+        case 'delete':
+            return (icons?.delete ?? jsx(MdDeleteForever, { ...commonProps, style: styles.iconDelete, size: "1.5em" }));
+        case 'copy':
+            return icons?.copy ?? jsx(HiOutlineClipboardCopy, { ...commonProps, style: styles.iconCopy });
+        case 'ok':
+            return (icons?.ok ?? (jsx(FiCheckCircle, { ...commonProps, style: { fontSize: '90%', ...styles.iconOk } })));
+        case 'cancel':
+            return (icons?.cancel ?? (jsx(TiCancel, { ...commonProps, style: { fontSize: '130%', ...styles.iconCancel } })));
+        case 'chevron':
+            return (icons?.chevron ?? (jsx(FaChevronDown, { className: `${rotate ? ' jer-rotate-90' : ''}`, style: styles.iconCollection })));
+        default:
+            return jsx(Fragment, {});
+    }
+};
+
+const EditButtons = ({ startEdit, handleDelete, handleAdd, enableClipboard, type, data, path, name, translate, }) => {
+    const { styles } = useTheme();
+    const NEW_KEY_PROMPT = translate('KEY_NEW');
+    const [isAdding, setIsAdding] = useState(false);
+    const [newKey, setNewKey] = useState(NEW_KEY_PROMPT);
+    useEffect(() => {
+        if (!isAdding)
+            setNewKey(NEW_KEY_PROMPT);
+    }, [isAdding]);
+    const handleKeyPress = (e) => {
+        if (e.key === 'Enter' && handleAdd) {
+            setIsAdding(false);
+            handleAdd(newKey);
+        }
+        else if (e.key === 'Escape')
+            setIsAdding(false);
+    };
+    const handleCopy = (e) => {
+        let type = 'value';
+        let value;
+        if (enableClipboard) {
+            switch (e.ctrlKey || e.metaKey) {
+                case true:
+                    value = stringifyPath(path);
+                    type = 'path';
+                    break;
+                case false:
+                    value = JSON.stringify(data, null, 2);
+            }
+            navigator.clipboard.writeText(value);
+        }
+        if (typeof enableClipboard === 'function')
+            enableClipboard({ value, path, key: name, type });
+    };
+    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: { ...styles.input } }), jsx(InputButtons, { onOk: () => {
+                            if (!!newKey) {
+                                setIsAdding(false);
+                                handleAdd(newKey);
+                            }
+                        }, onCancel: () => {
+                            setIsAdding(false);
+                        } })] }))] }));
+};
+const InputButtons = ({ onOk, onCancel }) => {
+    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')
+        return `${str}[${part}]`;
+    else
+        return str === '' ? part : `${str}.${part}`;
+}, '');
+
+const ERROR_DISPLAY_TIME = 2500;
+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 { styles } = useTheme();
+    const [isEditing, setIsEditing] = useState(false);
+    const [value, setValue] = useState(data);
+    const [error, setError] = useState(null);
+    const [dataType, setDataType] = useState(getDataType(data));
+    useEffect(() => {
+        setValue(data);
+        setDataType(getDataType(data));
+    }, [data, error]);
+    const handleChangeDataType = (type) => {
+        setValue(convertValue(value, type));
+        setDataType(type);
+    };
+    const logError = (errorString) => {
+        setError(errorString);
+        setTimeout(() => setError(null), ERROR_DISPLAY_TIME);
+        console.log('Error', errorString);
+    };
+    const handleEdit = () => {
+        setIsEditing(false);
+        let newValue;
+        switch (dataType) {
+            case 'object':
+                newValue = {};
+                break;
+            case 'array':
+                newValue = value !== null ? [value] : [];
+                break;
+            case 'number':
+                const n = Number(value);
+                if (isNaN(n))
+                    newValue = 0;
+                else
+                    newValue = n;
+                break;
+            default:
+                newValue = value;
+        }
+        onEdit(newValue, path).then((error) => {
+            if (error)
+                logError(error);
+        });
+    };
+    const handleCancel = () => {
+        setIsEditing(false);
+        setValue(data);
+    };
+    const handleDelete = () => {
+        onDelete(value, path).then((error) => {
+            if (error)
+                logError(error);
+        });
+    };
+    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 inputProps = {
+        value,
+        setValue,
+        isEditing,
+        setIsEditing,
+        handleEdit,
+        handleCancel,
+        path,
+        stringTruncate,
+    };
+    return (jsx("div", { className: "jer-component jer-value-component", style: { marginLeft: `${indent / 2}em` }, children: jsxs("div", { className: "jer-value-main-row", children: [showArrayIndices && (jsxs("label", { htmlFor: path.join('.'), className: "jer-object-key", style: {
+                        ...styles.property,
+                        minWidth: `${Math.min(String(name).length + 1, 5)}ch`,
+                    }, children: [name, ":", ' '] })), 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 && (jsx("select", { name: `${name}-type-select`, className: "jer-type-select", onChange: (e) => handleChangeDataType(e.target.value), value: dataType, children: DataTypes.map((type) => (jsx("option", { value: type, children: type }, type))) })), !isEditing && error && (jsx("span", { className: "jer-error-slug", style: styles.error, children: error }))] }) }));
+};
+const getDataType = (value) => {
+    if (typeof value === 'string')
+        return 'string';
+    if (typeof value === 'number')
+        return 'number';
+    if (typeof value === 'boolean')
+        return 'boolean';
+    if (value === null)
+        return 'null';
+    return 'invalid';
+};
+const getInputComponent = (dataType, inputProps) => {
+    const value = inputProps.value;
+    switch (dataType) {
+        case 'string':
+            return jsx(StringValue, { ...inputProps, value: value });
+        case 'number':
+            return jsx(NumberValue, { ...inputProps, value: value });
+        case 'boolean':
+            return jsx(BooleanValue, { ...inputProps, value: value });
+        case 'null':
+            return jsx(NullValue, { ...inputProps });
+        case 'object':
+            return jsx(ObjectValue, { ...inputProps });
+        case 'array':
+            return jsx(ArrayValue, { ...inputProps });
+        default:
+            return jsx(InvalidValue, { ...inputProps });
+    }
+};
+const convertValue = (value, type) => {
+    switch (type) {
+        case 'string':
+            return String(value);
+        case 'number':
+            const n = Number(value);
+            return isNaN(n) ? 0 : n;
+        case 'boolean':
+            return !!value;
+        case 'null':
+            return null;
+        case 'object':
+            return {};
+        case 'array':
+            return [value];
+        default:
+            return String(value);
+    }
+};
+
+const isCollection = (value) => value !== null && typeof value == 'object';
+const CollectionNode = ({ data, path, name, ...props }) => {
+    const { styles } = useTheme();
+    const { onEdit, onAdd, onDelete, restrictEditFilter, restrictDeleteFilter, restrictAddFilter, collapseFilter, enableClipboard, indent, keySort, showArrayIndices, defaultValue, translate, } = props;
+    const [isEditing, setIsEditing] = useState(false);
+    const [stringifiedValue, setStringifiedValue] = useState(JSON.stringify(data, null, 2));
+    const [error, setError] = useState(null);
+    const collectionSize = Object.keys(data).length;
+    const filterProps = { key: name, path, level: path.length, value: data, size: collectionSize };
+    const [collapsed, setCollapsed] = useState(collapseFilter(filterProps));
+    useEffect(() => {
+        setStringifiedValue(JSON.stringify(data, null, 2));
+    }, [data]);
+    useEffect(() => {
+        setCollapsed(collapseFilter(filterProps));
+    }, [collapseFilter]);
+    const collectionType = Array.isArray(data) ? 'array' : 'object';
+    const brackets = collectionType === 'array' ? { open: '[', close: ']' } : { open: '{', close: '}' };
+    const transitionTime = getComputedStyle(document.documentElement).getPropertyValue('--jer-expand-transition-time');
+    const handleKeyPress = (e) => {
+        if (e.key === 'Enter' && (e.metaKey || e.shiftKey || e.ctrlKey))
+            handleEdit();
+        else if (e.key === 'Escape')
+            handleCancel();
+    };
+    const showError = (errorString) => {
+        setError(errorString);
+        setTimeout(() => setError(null), ERROR_DISPLAY_TIME);
+        console.log('Error', errorString);
+    };
+    const handleEdit = () => {
+        try {
+            const value = JSON.parse(stringifiedValue);
+            setIsEditing(false);
+            setError(null);
+            onEdit(value, path).then((error) => {
+                if (error)
+                    showError(error);
+            });
+        }
+        catch {
+            setError(translate('ERROR_INVALID_JSON'));
+            setTimeout(() => setError(null), ERROR_DISPLAY_TIME);
+            console.log('Invalid JSON');
+            return;
+        }
+    };
+    const handleAdd = (key) => {
+        setCollapsed(false);
+        if (collectionType === 'array') {
+            onAdd(defaultValue, [...path, data.length]).then((error) => {
+                if (error)
+                    showError(error);
+            });
+        }
+        else if (key in data) {
+            showError(translate('ERROR_KEY_EXISTS'));
+            return;
+        }
+        else
+            onAdd(defaultValue, [...path, key]).then((error) => {
+                if (error)
+                    showError(error);
+            });
+    };
+    const handleDelete = path.length > 0
+        ? () => {
+            onDelete(data, path).then((result) => {
+                if (result)
+                    showError(result);
+            });
+        }
+        : undefined;
+    const handleCancel = () => {
+        setIsEditing(false);
+        setError(null);
+        setStringifiedValue(JSON.stringify(data, null, 2));
+    };
+    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 keyValueArray = Object.entries(data).map(([key, value]) => [
+        collectionType === 'array' ? Number(key) : key,
+        value,
+    ]);
+    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", { className: "jer-component fb-collection-component", style: { marginLeft: `${path.length === 0 ? 0 : indent / 2}em` }, children: [jsxs("div", { className: "jer-collection-header-row", children: [jsx("div", { onClick: () => {
+                            if (!isEditing)
+                                setCollapsed(!collapsed);
+                        }, children: jsx(Icon, { name: "chevron", rotate: collapsed }) }), jsxs("div", { className: "jer-collection-name", children: [jsx("span", { style: styles.property, children: showLabel ? `${name}:` : null }), jsx("span", { className: "jer-brackets", style: styles.bracket, children: brackets.open })] }), jsx("div", { className: "jer-collection-item-count", style: styles.itemCount, children: collectionSize === 1
+                            ? translate('ITEM_SINGLE', 1)
+                            : translate('ITEMS_MULTIPLE', collectionSize) }), collapsed && (jsx("div", { className: "jer-brackets", 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 : `${numOfLines * 1.6}em`,
+                    overflowY: collapsed ? 'hidden' : 'visible',
+                    transition: `max-height ${transitionTime}`,
+                }, children: [isEditing ? (jsxs("div", { className: "jer-collection-text-edit", 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: keyValueArray.map(([key, value]) => (jsx("div", { className: "jer-collection-element", children: isCollection(value) ? (jsx(CollectionNode, { data: value, path: [...path, key], name: key, ...props }, key)) : (jsx(ValueNodeWrapper, { data: value, path: [...path, key], name: key, ...props, showArrayIndices: 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 })) })] }), !collapsed && (jsx("div", { className: "jer-brackets", style: styles.bracket, children: brackets.close }))] }));
+};
+
+const localisedStrings = {
+    ITEM_SINGLE: '{{count}} item',
+    ITEMS_MULTIPLE: '{{count}} items',
+    KEY_NEW: 'Enter new key',
+    ERROR_KEY_EXISTS: 'Key already exists',
+    ERROR_INVALID_JSON: 'Invalid JSON',
+    ERROR_UPDATE: 'Update unsuccessful',
+    ERROR_DELETE: 'Delete unsuccessful',
+    ERROR_ADD: 'Adding node unsuccessful',
+};
+const translate = (translations, key, count) => {
+    const string = key in translations ? translations[key] : localisedStrings[key];
+    return count === undefined ? string : string?.replace('{{count}}', String(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 = 600, stringTruncate = 250, translations = {}, className, }) => {
+    const [data, setData] = useState(srcData);
+    const { styles, setTheme, setIcons } = useTheme();
+    const collapseFilter = useCallback(getFilterFunction(collapse), [collapse]);
+    const translate = useCallback(getTranslateFunction(translations), [translations]);
+    useEffect(() => {
+        setData(srcData);
+    }, [srcData]);
+    useEffect(() => {
+        if (theme)
+            setTheme(theme);
+        if (icons)
+            setIcons(icons);
+    }, [theme, icons]);
+    const onEdit = async (value, path) => {
+        const { currentData, newData, currentValue, newValue } = updateDataObject(data, path, value, 'update');
+        if (srcEdit) {
+            const result = await srcEdit({
+                currentData,
+                newData,
+                currentValue,
+                newValue,
+                name: path.slice(-1)[0],
+                path,
+            });
+            if (result === undefined)
+                setData(newData);
+            if (result === false)
+                return translate('ERROR_UPDATE');
+            return result;
+        }
+        else
+            setData(newData);
+    };
+    const onDelete = async (value, path) => {
+        const { currentData, newData, currentValue, newValue } = updateDataObject(data, path, value, 'delete');
+        if (srcDelete) {
+            const result = await srcDelete({
+                currentData,
+                newData,
+                currentValue,
+                newValue,
+                name: path.slice(-1)[0],
+                path,
+            });
+            if (result === undefined)
+                setData(newData);
+            if (result === false)
+                return translate('ERROR_DELETE');
+            return result;
+        }
+        else
+            setData(newData);
+    };
+    const onAdd = async (value, path) => {
+        const { currentData, newData, currentValue, newValue } = updateDataObject(data, path, value, 'add');
+        if (srcAdd) {
+            const result = await srcAdd({
+                currentData,
+                newData,
+                currentValue,
+                newValue,
+                name: path.slice(-1)[0],
+                path,
+            });
+            if (result === undefined)
+                setData(newData);
+            if (result === false)
+                return translate('ERROR_ADD');
+            return result;
+        }
+        else
+            setData(newData);
+    };
+    const restrictEditFilter = getFilterFunction(restrictEdit);
+    const restrictDeleteFilter = getFilterFunction(restrictDelete);
+    const restrictAddFilter = getFilterFunction(restrictAdd);
+    const otherProps = {
+        name: rootName,
+        onEdit,
+        onDelete,
+        onAdd,
+        collapseFilter,
+        restrictEditFilter,
+        restrictDeleteFilter,
+        restrictAddFilter,
+        enableClipboard,
+        keySort,
+        showArrayIndices,
+        indent,
+        defaultValue,
+        stringTruncate,
+        translate,
+    };
+    if (!styles)
+        return null;
+    return (jsx("div", { className: 'jer-editor-container ' + className, style: { ...styles.container, minWidth, maxWidth }, children: isCollection(data) && jsx(CollectionNode, { data: data, path: [], ...otherProps }) }));
+};
+const JsonEditor = (props) => (jsx(ThemeProvider, { children: jsx(Editor, { ...props }) }));
+const updateDataObject = (data, path, newValue, action) => {
+    if (path.length === 0) {
+        return {
+            currentData: data,
+            newData: newValue,
+            currentValue: data,
+            newValue: newValue,
+        };
+    }
+    const currentValue = action !== 'add' ? extract(data, path) : undefined;
+    const newData = assign(clone(data), path, newValue, { remove: action === 'delete' });
+    return {
+        currentData: data,
+        newData,
+        currentValue,
+        newValue: action === 'update' ? newValue : undefined,
+    };
+};
+const getFilterFunction = (propValue) => {
+    if (typeof propValue === 'boolean')
+        return () => propValue;
+    if (typeof propValue === 'number')
+        return ({ level }) => level >= propValue;
+    return propValue;
+};
+
+export { JsonEditor, themes };