@contentful/field-editor-json 3.1.7 → 3.3.0

package/dist/cjs/JsonEditor.js

@@ -0,0 +1,194 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return JsonEditor;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+const _deepequal = _interop_require_default(require("deep-equal"));
+const _throttle = _interop_require_default(require("lodash/throttle"));
+const _JsonEditorField = require("./JsonEditorField");
+const _JsonEditorToolbar = require("./JsonEditorToolbar");
+const _JsonInvalidStatus = require("./JsonInvalidStatus");
+const _utils = require("./utils");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+var _React_Component;
+class ConnectedJsonEditor extends (_React_Component = _react.Component) {
+    render() {
+        return _react.createElement("div", {
+            "data-test-id": "json-editor"
+        }, _react.createElement(_JsonEditorToolbar.JsonEditorToolbar, {
+            isRedoDisabled: this.props.disabled || this.state.redoStack.length === 0,
+            isUndoDisabled: this.props.disabled || this.state.undoStack.length === 0,
+            onUndo: this.onUndo,
+            onRedo: this.onRedo
+        }), _react.createElement(_JsonEditorField.JsonEditorField, {
+            value: this.state.value,
+            onChange: this.onChange,
+            isDisabled: this.props.disabled
+        }), !this.state.isValidJson && _react.createElement(_JsonInvalidStatus.JsonInvalidStatus, null));
+    }
+    constructor(props){
+        super(props);
+        _define_property(this, "setValidJson", (value)=>{
+            this.setState({
+                isValidJson: value
+            });
+        });
+        _define_property(this, "pushUndo", (0, _throttle.default)((value)=>{
+            this.setState((state)=>({
+                    undoStack: [
+                        ...state.undoStack,
+                        value
+                    ]
+                }));
+        }, 400));
+        _define_property(this, "onChange", (value)=>{
+            const parsed = (0, _utils.parseJSON)(value);
+            if (value !== this.state.lastUndo) {
+                this.pushUndo(this.state.value);
+            }
+            this.setState({
+                value,
+                isValidJson: parsed.valid
+            });
+            if (parsed.valid) {
+                this.props.setValue(parsed.value);
+            }
+        });
+        _define_property(this, "onUndo", ()=>{
+            const undoStack = this.state.undoStack;
+            if (undoStack.length === 0) {
+                return;
+            }
+            const value = undoStack.pop() || '';
+            const parsedValue = (0, _utils.parseJSON)(value);
+            this.setState((state)=>({
+                    ...state,
+                    value,
+                    isValidJson: parsedValue.valid,
+                    undoStack,
+                    redoStack: [
+                        ...state.redoStack,
+                        state.value
+                    ],
+                    lastUndo: value
+                }), ()=>{
+                if (parsedValue.valid) {
+                    this.props.setValue(parsedValue.value);
+                }
+            });
+        });
+        _define_property(this, "onRedo", ()=>{
+            const redoStack = [
+                ...this.state.redoStack
+            ];
+            if (redoStack.length === 0) {
+                return;
+            }
+            const value = redoStack.pop() || '';
+            const parsedValue = (0, _utils.parseJSON)(value);
+            this.setState((state)=>({
+                    ...state,
+                    value,
+                    isValidJson: parsedValue.valid,
+                    redoStack,
+                    undoStack: [
+                        ...state.undoStack,
+                        state.value
+                    ]
+                }), ()=>{
+                if (parsedValue.valid) {
+                    this.props.setValue(parsedValue.value);
+                }
+            });
+        });
+        this.state = {
+            value: (0, _utils.stringifyJSON)(props.initialValue),
+            isValidJson: true,
+            undoStack: [],
+            redoStack: [],
+            lastUndo: ''
+        };
+    }
+}
+_define_property(ConnectedJsonEditor, "defaultProps", {
+    isInitiallyDisabled: true
+});
+function JsonEditor(props) {
+    return _react.createElement(_fieldeditorshared.FieldConnector, {
+        field: props.field,
+        isInitiallyDisabled: props.isInitiallyDisabled,
+        isEqualValues: (value1, value2)=>{
+            return (0, _deepequal.default)(value1, value2);
+        }
+    }, ({ value , disabled , setValue , externalReset  })=>{
+        return _react.createElement(ConnectedJsonEditor, {
+            key: `json-editor-${externalReset}`,
+            initialValue: value,
+            disabled: disabled,
+            setValue: setValue
+        });
+    });
+}

package/dist/cjs/JsonEditorField.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "JsonEditorField", {
+    enumerable: true,
+    get: function() {
+        return JsonEditorField;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _langjson = require("@codemirror/lang-json");
+const _view = require("@codemirror/view");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _reactcodemirror = _interop_require_default(require("@uiw/react-codemirror"));
+const _emotion = require("emotion");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const styles = {
+    root: (0, _emotion.css)({
+        cursor: 'text',
+        padding: _f36tokens.default.spacingS,
+        border: `1px solid ${_f36tokens.default.gray200}`,
+        borderTop: 'none',
+        borderBottomLeftRadius: _f36tokens.default.borderRadiusSmall,
+        borderBottomRightRadius: _f36tokens.default.borderRadiusSmall,
+        fontSize: _f36tokens.default.fontSizeM,
+        '.cm-editor': {
+            color: _f36tokens.default.gray900,
+            '&.cm-focused': {
+                outline: 'none'
+            }
+        },
+        '.cm-scroller': {
+            fontFamily: _f36tokens.default.fontStackMonospace,
+            minHeight: '6rem'
+        },
+        '&.disabled': {
+            cursor: 'auto',
+            '.cm-scroller ': {
+                minHeight: '6rem',
+                backgroundColor: _f36tokens.default.gray100,
+                cursor: 'not-allowed'
+            },
+            '.cm-editor': {
+                border: `1px solid ${_f36tokens.default.gray200}`
+            },
+            '.cm-line': {
+                cursor: 'not-allowed'
+            },
+            '.cm-lines': {
+                cursor: 'not-allowed'
+            }
+        }
+    })
+};
+function JsonEditorField(props) {
+    return _react.createElement("div", {
+        className: (0, _emotion.cx)(styles.root, {
+            disabled: props.isDisabled
+        }),
+        "data-test-id": "json-editor-code-mirror"
+    }, _react.createElement(_reactcodemirror.default, {
+        value: props.value,
+        onChange: props.onChange,
+        theme: "light",
+        extensions: [
+            (0, _langjson.json)(),
+            _view.EditorView.lineWrapping
+        ],
+        basicSetup: {
+            closeBrackets: false,
+            lineNumbers: false,
+            highlightActiveLineGutter: false,
+            searchKeymap: false,
+            highlightActiveLine: false,
+            foldGutter: false,
+            bracketMatching: false,
+            syntaxHighlighting: false
+        },
+        width: "100%",
+        editable: !props.isDisabled,
+        indentWithTab: true
+    }));
+}

package/dist/cjs/JsonEditorToolbar.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "JsonEditorToolbar", {
+    enumerable: true,
+    get: function() {
+        return JsonEditorToolbar;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const styles = {
+    toolbar: (0, _emotion.css)({
+        display: 'flex',
+        alignItems: 'center',
+        padding: _f36tokens.default.spacingXs,
+        justifyContent: 'space-between',
+        backgroundColor: _f36tokens.default.gray100,
+        border: `1px solid ${_f36tokens.default.gray200}`,
+        borderTopLeftRadius: _f36tokens.default.borderRadiusSmall,
+        borderTopRightRadius: _f36tokens.default.borderRadiusSmall,
+        borderBottom: 'none'
+    }),
+    title: (0, _emotion.css)({
+        fontFamily: _f36tokens.default.fontStackPrimary,
+        fontSize: _f36tokens.default.fontSizeM,
+        color: _f36tokens.default.gray600
+    }),
+    actions: (0, _emotion.css)({
+        button: {
+            marginLeft: _f36tokens.default.spacingS
+        }
+    })
+};
+function JsonEditorToolbar(props) {
+    return _react.createElement("div", {
+        className: styles.toolbar
+    }, _react.createElement("div", {
+        className: styles.title
+    }, "JSON Editor"), _react.createElement("div", {
+        className: styles.actions
+    }, _react.createElement(_f36components.Button, {
+        variant: "secondary",
+        size: "small",
+        isDisabled: props.isUndoDisabled,
+        testId: "json-editor-undo",
+        onClick: ()=>{
+            props.onUndo();
+        }
+    }, "Undo"), _react.createElement(_f36components.Button, {
+        variant: "secondary",
+        size: "small",
+        isDisabled: props.isRedoDisabled,
+        testId: "json-editor-redo",
+        onClick: ()=>{
+            props.onRedo();
+        }
+    }, "Redo")));
+}

package/dist/cjs/JsonInvalidStatus.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "JsonInvalidStatus", {
+    enumerable: true,
+    get: function() {
+        return JsonInvalidStatus;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function JsonInvalidStatus() {
+    return _react.createElement("div", {
+        role: "status",
+        "data-test-id": "json-editor.invalid-json",
+        className: (0, _emotion.css)({
+            marginTop: _f36tokens.default.spacingS
+        })
+    }, _react.createElement(_f36components.ValidationMessage, null, "This is not valid JSON"));
+}

package/dist/cjs/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "JsonEditor", {
+    enumerable: true,
+    get: function() {
+        return _JsonEditor.default;
+    }
+});
+const _JsonEditor = _interop_require_default(require("./JsonEditor"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}

package/dist/cjs/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/cjs/utils.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    stringifyJSON: function() {
+        return stringifyJSON;
+    },
+    isValidJson: function() {
+        return isValidJson;
+    },
+    parseJSON: function() {
+        return parseJSON;
+    }
+});
+function stringifyJSON(obj) {
+    if (obj === null || obj === undefined) {
+        return '';
+    } else {
+        return JSON.stringify(obj, null, 4);
+    }
+}
+function isValidJson(str) {
+    let parsed;
+    try {
+        parsed = JSON.parse(str);
+    } catch (e) {
+        return false;
+    }
+    if (typeof parsed !== 'object') {
+        return false;
+    }
+    return true;
+}
+function parseJSON(str) {
+    if (str === '') {
+        return {
+            value: undefined,
+            valid: true
+        };
+    } else if (isValidJson(str)) {
+        return {
+            value: JSON.parse(str),
+            valid: true
+        };
+    } else {
+        return {
+            value: undefined,
+            valid: false
+        };
+    }
+}