@contentful/field-editor-json 3.1.7 → 3.2.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.2.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-json@3.1.7...@contentful/field-editor-json@3.2.0) (2023-04-19)
+
+### Features
+
+- upgrade cypress [TOL-1036] ([#1391](https://github.com/contentful/field-editors/issues/1391)) ([9c1aec9](https://github.com/contentful/field-editors/commit/9c1aec98aabbe464cdc3f1236c3bb1cc29b8208d))
+
 ## [3.1.7](https://github.com/contentful/field-editors/compare/@contentful/field-editor-json@3.1.6...@contentful/field-editor-json@3.1.7) (2023-03-14)
 
 **Note:** Version bump only for package @contentful/field-editor-json

package/dist/field-editor-json.cjs.development.js

@@ -16,45 +16,11 @@ var CodeMirror = _interopDefault(require('@uiw/react-codemirror'));
 var emotion = require('emotion');
 var f36Components = require('@contentful/f36-components');
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-
-  _setPrototypeOf(subClass, superClass);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
-var styles = {
+const styles = {
   root: /*#__PURE__*/emotion.css({
     cursor: 'text',
     padding: tokens.spacingS,
-    border: "1px solid " + tokens.gray200,
+    border: `1px solid ${tokens.gray200}`,
     borderTop: 'none',
     borderBottomLeftRadius: tokens.borderRadiusSmall,
     borderBottomRightRadius: tokens.borderRadiusSmall,
@@ -77,7 +43,7 @@ var styles = {
         cursor: 'not-allowed'
       },
       '.cm-editor': {
-        border: "1px solid " + tokens.gray200
+        border: `1px solid ${tokens.gray200}`
       },
       '.cm-line': {
         cursor: 'not-allowed'
@@ -115,14 +81,14 @@ function JsonEditorField(props) {
   }));
 }
 
-var styles$1 = {
+const styles$1 = {
   toolbar: /*#__PURE__*/emotion.css({
     display: 'flex',
     alignItems: 'center',
     padding: tokens.spacingXs,
     justifyContent: 'space-between',
     backgroundColor: tokens.gray100,
-    border: "1px solid " + tokens.gray200,
+    border: `1px solid ${tokens.gray200}`,
     borderTopLeftRadius: tokens.borderRadiusSmall,
     borderTopRightRadius: tokens.borderRadiusSmall,
     borderBottom: 'none'
@@ -150,7 +116,7 @@ function JsonEditorToolbar(props) {
     size: "small",
     isDisabled: props.isUndoDisabled,
     testId: "json-editor-undo",
-    onClick: function onClick() {
+    onClick: () => {
       props.onUndo();
     }
   }, "Undo"), React__default.createElement(f36Components.Button, {
@@ -158,7 +124,7 @@ function JsonEditorToolbar(props) {
     size: "small",
     isDisabled: props.isRedoDisabled,
     testId: "json-editor-redo",
-    onClick: function onClick() {
+    onClick: () => {
       props.onRedo();
     }
   }, "Redo")));
@@ -182,7 +148,7 @@ function stringifyJSON(obj) {
   }
 }
 function isValidJson(str) {
-  var parsed;
+  let parsed;
 
   try {
     parsed = JSON.parse(str);
@@ -216,107 +182,92 @@ function parseJSON(str) {
   }
 }
 
-var ConnectedJsonEditor = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(ConnectedJsonEditor, _React$Component);
+class ConnectedJsonEditor extends React.Component {
+  constructor(props) {
+    super(props);
 
-  function ConnectedJsonEditor(props) {
-    var _this;
-
-    _this = _React$Component.call(this, props) || this;
-
-    _this.setValidJson = function (value) {
-      _this.setState({
+    this.setValidJson = value => {
+      this.setState({
         isValidJson: value
       });
     };
 
-    _this.pushUndo = throttle(function (value) {
-      _this.setState(function (state) {
-        return {
-          undoStack: [].concat(state.undoStack, [value])
-        };
-      });
+    this.pushUndo = throttle(value => {
+      this.setState(state => ({
+        undoStack: [...state.undoStack, value]
+      }));
     }, 400);
 
-    _this.onChange = function (value) {
-      var parsed = parseJSON(value);
+    this.onChange = value => {
+      const parsed = parseJSON(value);
 
-      if (value !== _this.state.lastUndo) {
-        _this.pushUndo(_this.state.value);
+      if (value !== this.state.lastUndo) {
+        this.pushUndo(this.state.value);
       }
 
-      _this.setState({
-        value: value,
+      this.setState({
+        value,
         isValidJson: parsed.valid
       });
 
       if (parsed.valid) {
-        _this.props.setValue(parsed.value);
+        this.props.setValue(parsed.value);
       }
     };
 
-    _this.onUndo = function () {
-      var undoStack = _this.state.undoStack;
+    this.onUndo = () => {
+      const undoStack = this.state.undoStack;
 
       if (undoStack.length === 0) {
         return;
       }
 
-      var value = undoStack.pop() || '';
-      var parsedValue = parseJSON(value);
-
-      _this.setState(function (state) {
-        return _extends({}, state, {
-          value: value,
-          isValidJson: parsedValue.valid,
-          undoStack: undoStack,
-          redoStack: [].concat(state.redoStack, [state.value]),
-          lastUndo: value
-        });
-      }, function () {
+      const value = undoStack.pop() || '';
+      const parsedValue = 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);
+          this.props.setValue(parsedValue.value);
         }
       });
     };
 
-    _this.onRedo = function () {
-      var redoStack = [].concat(_this.state.redoStack);
+    this.onRedo = () => {
+      const redoStack = [...this.state.redoStack];
 
       if (redoStack.length === 0) {
         return;
       }
 
-      var value = redoStack.pop() || '';
-      var parsedValue = parseJSON(value);
-
-      _this.setState(function (state) {
-        return _extends({}, state, {
-          value: value,
-          isValidJson: parsedValue.valid,
-          redoStack: redoStack,
-          undoStack: [].concat(state.undoStack, [state.value])
-        });
-      }, function () {
+      const value = redoStack.pop() || '';
+      const parsedValue = 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.props.setValue(parsedValue.value);
         }
       });
     };
 
-    _this.state = {
+    this.state = {
       value: stringifyJSON(props.initialValue),
       isValidJson: true,
       undoStack: [],
       redoStack: [],
       lastUndo: ''
     };
-    return _this;
   }
 
-  var _proto = ConnectedJsonEditor.prototype;
-
-  _proto.render = function render() {
+  render() {
     return React.createElement("div", {
       "data-test-id": "json-editor"
     }, React.createElement(JsonEditorToolbar, {
@@ -329,10 +280,9 @@ var ConnectedJsonEditor = /*#__PURE__*/function (_React$Component) {
       onChange: this.onChange,
       isDisabled: this.props.disabled
     }), !this.state.isValidJson && React.createElement(JsonInvalidStatus, null));
-  };
+  }
 
-  return ConnectedJsonEditor;
-}(React.Component);
+}
 
 ConnectedJsonEditor.defaultProps = {
   isInitiallyDisabled: true
@@ -341,18 +291,19 @@ function JsonEditor(props) {
   return React.createElement(fieldEditorShared.FieldConnector, {
     field: props.field,
     isInitiallyDisabled: props.isInitiallyDisabled,
-    isEqualValues: function isEqualValues(value1, value2) {
+    isEqualValues: (value1, value2) => {
       return deepEqual(value1, value2);
     }
-  }, function (_ref) {
-    var value = _ref.value,
-        disabled = _ref.disabled,
-        setValue = _ref.setValue,
-        externalReset = _ref.externalReset;
+  }, ({
+    value,
+    disabled,
+    setValue,
+    externalReset
+  }) => {
     return React.createElement(ConnectedJsonEditor // on external change reset component completely and init with initial value again
     , {
       // on external change reset component completely and init with initial value again
-      key: "json-editor-" + externalReset,
+      key: `json-editor-${externalReset}`,
       initialValue: value,
       disabled: disabled,
       setValue: setValue

package/dist/field-editor-json.cjs.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-editor-json.cjs.development.js","sources":["../src/JsonEditorField.tsx","../src/JsonEditorToolbar.tsx","../src/JsonInvalidStatus.tsx","../src/utils.ts","../src/JsonEditor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { json } from '@codemirror/lang-json';\nimport { EditorView } from '@codemirror/view';\nimport tokens from '@contentful/f36-tokens';\nimport CodeMirror from '@uiw/react-codemirror';\nimport { css, cx } from 'emotion';\n\ntype JsonEditorFieldProps = {\n  isDisabled: boolean;\n  value: string;\n  onChange: (value: string) => void;\n};\n\nconst styles = {\n  root: css({\n    cursor: 'text',\n    padding: tokens.spacingS,\n    border: `1px solid ${tokens.gray200}`,\n    borderTop: 'none',\n    borderBottomLeftRadius: tokens.borderRadiusSmall,\n    borderBottomRightRadius: tokens.borderRadiusSmall,\n    fontSize: tokens.fontSizeM,\n    '.cm-editor': {\n      color: tokens.gray900,\n      '&.cm-focused': {\n        outline: 'none',\n      },\n    },\n    '.cm-scroller': {\n      fontFamily: tokens.fontStackMonospace,\n      minHeight: '6rem',\n    },\n    '&.disabled': {\n      cursor: 'auto',\n      '.cm-scroller ': {\n        minHeight: '6rem',\n        backgroundColor: tokens.gray100,\n        cursor: 'not-allowed',\n      },\n      '.cm-editor': {\n        border: `1px solid ${tokens.gray200}`,\n      },\n      '.cm-line': {\n        cursor: 'not-allowed',\n      },\n      '.cm-lines': {\n        cursor: 'not-allowed',\n      },\n    },\n  }),\n};\n\nexport function JsonEditorField(props: JsonEditorFieldProps) {\n  return (\n    <div\n      className={cx(styles.root, { disabled: props.isDisabled })}\n      data-test-id=\"json-editor-code-mirror\"\n    >\n      <CodeMirror\n        value={props.value}\n        onChange={props.onChange}\n        theme=\"light\"\n        extensions={[json(), EditorView.lineWrapping]}\n        basicSetup={{\n          closeBrackets: false,\n          lineNumbers: false,\n          highlightActiveLineGutter: false,\n          searchKeymap: false,\n          highlightActiveLine: false,\n          foldGutter: false,\n          bracketMatching: false,\n          syntaxHighlighting: false,\n        }}\n        width=\"100%\"\n        editable={!props.isDisabled}\n        indentWithTab={true}\n      />\n    </div>\n  );\n}\n","import React from 'react';\n\nimport { Button } from '@contentful/f36-components';\nimport tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nconst styles = {\n  toolbar: css({\n    display: 'flex',\n    alignItems: 'center',\n    padding: tokens.spacingXs,\n    justifyContent: 'space-between',\n    backgroundColor: tokens.gray100,\n    border: `1px solid ${tokens.gray200}`,\n    borderTopLeftRadius: tokens.borderRadiusSmall,\n    borderTopRightRadius: tokens.borderRadiusSmall,\n    borderBottom: 'none',\n  }),\n  title: css({\n    fontFamily: tokens.fontStackPrimary,\n    fontSize: tokens.fontSizeM,\n    color: tokens.gray600,\n  }),\n  actions: css({\n    button: {\n      marginLeft: tokens.spacingS,\n    },\n  }),\n};\n\ntype JsonEditorToolbarProps = {\n  isUndoDisabled: boolean;\n  isRedoDisabled: boolean;\n  onRedo: () => void;\n  onUndo: () => void;\n};\n\nexport function JsonEditorToolbar(props: JsonEditorToolbarProps) {\n  return (\n    <div className={styles.toolbar}>\n      <div className={styles.title}>JSON Editor</div>\n      <div className={styles.actions}>\n        <Button\n          variant=\"secondary\"\n          size=\"small\"\n          isDisabled={props.isUndoDisabled}\n          testId=\"json-editor-undo\"\n          onClick={() => {\n            props.onUndo();\n          }}>\n          Undo\n        </Button>\n        <Button\n          variant=\"secondary\"\n          size=\"small\"\n          isDisabled={props.isRedoDisabled}\n          testId=\"json-editor-redo\"\n          onClick={() => {\n            props.onRedo();\n          }}>\n          Redo\n        </Button>\n      </div>\n    </div>\n  );\n}\n","import React from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { ValidationMessage } from '@contentful/f36-components';\n\nexport function JsonInvalidStatus() {\n  return (\n    <div\n      role=\"status\"\n      data-test-id=\"json-editor.invalid-json\"\n      className={css({ marginTop: tokens.spacingS })}>\n      <ValidationMessage>This is not valid JSON</ValidationMessage>\n    </div>\n  );\n}\n","import { JSONObject } from './types';\n\nexport function stringifyJSON(obj: JSONObject | null | undefined): string {\n  if (obj === null || obj === undefined) {\n    return '';\n  } else {\n    return JSON.stringify(obj, null, 4);\n  }\n}\n\nexport function isValidJson(str: string) {\n  let parsed;\n  try {\n    parsed = JSON.parse(str);\n  } catch (e) {\n    return false;\n  }\n  // An object or array is valid JSON\n  if (typeof parsed !== 'object') {\n    return false;\n  }\n  return true;\n}\n\nexport function parseJSON(str: string): { valid: boolean; value?: JSONObject } {\n  if (str === '') {\n    return {\n      value: undefined,\n      valid: true,\n    };\n  } else if (isValidJson(str)) {\n    return {\n      value: JSON.parse(str),\n      valid: true,\n    };\n  } else {\n    return {\n      value: undefined,\n      valid: false,\n    };\n  }\n}\n","import * as React from 'react';\n\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport deepEqual from 'deep-equal';\nimport throttle from 'lodash/throttle';\n\nimport { JsonEditorField } from './JsonEditorField';\nimport { JsonEditorToolbar } from './JsonEditorToolbar';\nimport { JsonInvalidStatus } from './JsonInvalidStatus';\nimport { JSONObject } from './types';\nimport { stringifyJSON, parseJSON } from './utils';\n\nexport interface JsonEditorProps {\n  /**\n   * is the field disabled initially\n   */\n  isInitiallyDisabled: boolean;\n\n  /**\n   * sdk.field\n   */\n  field: FieldAPI;\n}\n\ntype NullableJsonObject = JSONObject | null | undefined;\n\ntype ConnectedJsonEditorProps = {\n  initialValue: NullableJsonObject;\n  setValue: (value: NullableJsonObject) => void;\n  disabled: boolean;\n};\n\ntype ConnectedJsonEditorState = {\n  value: string;\n  isValidJson: boolean;\n  undoStack: string[];\n  redoStack: string[];\n  lastUndo: string;\n};\n\nclass ConnectedJsonEditor extends React.Component<\n  ConnectedJsonEditorProps,\n  ConnectedJsonEditorState\n> {\n  static defaultProps = {\n    isInitiallyDisabled: true,\n  };\n\n  constructor(props: ConnectedJsonEditorProps) {\n    super(props);\n    this.state = {\n      value: stringifyJSON(props.initialValue),\n      isValidJson: true,\n      undoStack: [],\n      redoStack: [],\n      lastUndo: '',\n    };\n  }\n\n  setValidJson = (value: boolean) => {\n    this.setState({\n      isValidJson: value,\n    });\n  };\n\n  pushUndo = throttle((value: string) => {\n    this.setState((state) => ({\n      undoStack: [...state.undoStack, value],\n    }));\n  }, 400);\n\n  onChange = (value: string) => {\n    const parsed = parseJSON(value);\n\n    if (value !== this.state.lastUndo) {\n      this.pushUndo(this.state.value);\n    }\n\n    this.setState({\n      value,\n      isValidJson: parsed.valid,\n    });\n\n    if (parsed.valid) {\n      this.props.setValue(parsed.value);\n    }\n  };\n\n  onUndo = () => {\n    const undoStack = this.state.undoStack;\n\n    if (undoStack.length === 0) {\n      return;\n    }\n\n    const value = undoStack.pop() || '';\n\n    const parsedValue = parseJSON(value);\n\n    this.setState(\n      (state) => ({\n        ...state,\n        value,\n        isValidJson: parsedValue.valid,\n        undoStack,\n        redoStack: [...state.redoStack, state.value],\n        lastUndo: value,\n      }),\n      () => {\n        if (parsedValue.valid) {\n          this.props.setValue(parsedValue.value);\n        }\n      }\n    );\n  };\n\n  onRedo = () => {\n    const redoStack = [...this.state.redoStack];\n\n    if (redoStack.length === 0) {\n      return;\n    }\n\n    const value = redoStack.pop() || '';\n\n    const parsedValue = parseJSON(value);\n\n    this.setState(\n      (state) => ({\n        ...state,\n        value,\n        isValidJson: parsedValue.valid,\n        redoStack,\n        undoStack: [...state.undoStack, state.value],\n      }),\n      () => {\n        if (parsedValue.valid) {\n          this.props.setValue(parsedValue.value);\n        }\n      }\n    );\n  };\n\n  render() {\n    return (\n      <div data-test-id=\"json-editor\">\n        <JsonEditorToolbar\n          isRedoDisabled={this.props.disabled || this.state.redoStack.length === 0}\n          isUndoDisabled={this.props.disabled || this.state.undoStack.length === 0}\n          onUndo={this.onUndo}\n          onRedo={this.onRedo}\n        />\n        <JsonEditorField\n          value={this.state.value}\n          onChange={this.onChange}\n          isDisabled={this.props.disabled}\n        />\n        {!this.state.isValidJson && <JsonInvalidStatus />}\n      </div>\n    );\n  }\n}\n\nexport default function JsonEditor(props: JsonEditorProps) {\n  return (\n    <FieldConnector<JSONObject>\n      field={props.field}\n      isInitiallyDisabled={props.isInitiallyDisabled}\n      isEqualValues={(value1, value2) => {\n        return deepEqual(value1, value2);\n      }}>\n      {({ value, disabled, setValue, externalReset }) => {\n        return (\n          <ConnectedJsonEditor\n            // on external change reset component completely and init with initial value again\n            key={`json-editor-${externalReset}`}\n            initialValue={value}\n            disabled={disabled}\n            setValue={setValue}\n          />\n        );\n      }}\n    </FieldConnector>\n  );\n}\n"],"names":["styles","root","css","cursor","padding","tokens","spacingS","border","gray200","borderTop","borderBottomLeftRadius","borderRadiusSmall","borderBottomRightRadius","fontSize","fontSizeM","color","gray900","outline","fontFamily","fontStackMonospace","minHeight","backgroundColor","gray100","JsonEditorField","props","React","className","cx","disabled","isDisabled","CodeMirror","value","onChange","theme","extensions","json","EditorView","lineWrapping","basicSetup","closeBrackets","lineNumbers","highlightActiveLineGutter","searchKeymap","highlightActiveLine","foldGutter","bracketMatching","syntaxHighlighting","width","editable","indentWithTab","toolbar","display","alignItems","spacingXs","justifyContent","borderTopLeftRadius","borderTopRightRadius","borderBottom","title","fontStackPrimary","gray600","actions","button","marginLeft","JsonEditorToolbar","Button","variant","size","isUndoDisabled","testId","onClick","onUndo","isRedoDisabled","onRedo","JsonInvalidStatus","role","marginTop","ValidationMessage","stringifyJSON","obj","undefined","JSON","stringify","isValidJson","str","parsed","parse","e","parseJSON","valid","ConnectedJsonEditor","setValidJson","setState","pushUndo","throttle","state","undoStack","lastUndo","setValue","length","pop","parsedValue","redoStack","initialValue","render","defaultProps","isInitiallyDisabled","JsonEditor","FieldConnector","field","isEqualValues","value1","value2","deepEqual","externalReset","key"],"mappings":"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"}
+{"version":3,"file":"field-editor-json.cjs.development.js","sources":["../src/JsonEditorField.tsx","../src/JsonEditorToolbar.tsx","../src/JsonInvalidStatus.tsx","../src/utils.ts","../src/JsonEditor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { json } from '@codemirror/lang-json';\nimport { EditorView } from '@codemirror/view';\nimport tokens from '@contentful/f36-tokens';\nimport CodeMirror from '@uiw/react-codemirror';\nimport { css, cx } from 'emotion';\n\ntype JsonEditorFieldProps = {\n  isDisabled: boolean;\n  value: string;\n  onChange: (value: string) => void;\n};\n\nconst styles = {\n  root: css({\n    cursor: 'text',\n    padding: tokens.spacingS,\n    border: `1px solid ${tokens.gray200}`,\n    borderTop: 'none',\n    borderBottomLeftRadius: tokens.borderRadiusSmall,\n    borderBottomRightRadius: tokens.borderRadiusSmall,\n    fontSize: tokens.fontSizeM,\n    '.cm-editor': {\n      color: tokens.gray900,\n      '&.cm-focused': {\n        outline: 'none',\n      },\n    },\n    '.cm-scroller': {\n      fontFamily: tokens.fontStackMonospace,\n      minHeight: '6rem',\n    },\n    '&.disabled': {\n      cursor: 'auto',\n      '.cm-scroller ': {\n        minHeight: '6rem',\n        backgroundColor: tokens.gray100,\n        cursor: 'not-allowed',\n      },\n      '.cm-editor': {\n        border: `1px solid ${tokens.gray200}`,\n      },\n      '.cm-line': {\n        cursor: 'not-allowed',\n      },\n      '.cm-lines': {\n        cursor: 'not-allowed',\n      },\n    },\n  }),\n};\n\nexport function JsonEditorField(props: JsonEditorFieldProps) {\n  return (\n    <div\n      className={cx(styles.root, { disabled: props.isDisabled })}\n      data-test-id=\"json-editor-code-mirror\"\n    >\n      <CodeMirror\n        value={props.value}\n        onChange={props.onChange}\n        theme=\"light\"\n        extensions={[json(), EditorView.lineWrapping]}\n        basicSetup={{\n          closeBrackets: false,\n          lineNumbers: false,\n          highlightActiveLineGutter: false,\n          searchKeymap: false,\n          highlightActiveLine: false,\n          foldGutter: false,\n          bracketMatching: false,\n          syntaxHighlighting: false,\n        }}\n        width=\"100%\"\n        editable={!props.isDisabled}\n        indentWithTab={true}\n      />\n    </div>\n  );\n}\n","import React from 'react';\n\nimport { Button } from '@contentful/f36-components';\nimport tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nconst styles = {\n  toolbar: css({\n    display: 'flex',\n    alignItems: 'center',\n    padding: tokens.spacingXs,\n    justifyContent: 'space-between',\n    backgroundColor: tokens.gray100,\n    border: `1px solid ${tokens.gray200}`,\n    borderTopLeftRadius: tokens.borderRadiusSmall,\n    borderTopRightRadius: tokens.borderRadiusSmall,\n    borderBottom: 'none',\n  }),\n  title: css({\n    fontFamily: tokens.fontStackPrimary,\n    fontSize: tokens.fontSizeM,\n    color: tokens.gray600,\n  }),\n  actions: css({\n    button: {\n      marginLeft: tokens.spacingS,\n    },\n  }),\n};\n\ntype JsonEditorToolbarProps = {\n  isUndoDisabled: boolean;\n  isRedoDisabled: boolean;\n  onRedo: () => void;\n  onUndo: () => void;\n};\n\nexport function JsonEditorToolbar(props: JsonEditorToolbarProps) {\n  return (\n    <div className={styles.toolbar}>\n      <div className={styles.title}>JSON Editor</div>\n      <div className={styles.actions}>\n        <Button\n          variant=\"secondary\"\n          size=\"small\"\n          isDisabled={props.isUndoDisabled}\n          testId=\"json-editor-undo\"\n          onClick={() => {\n            props.onUndo();\n          }}>\n          Undo\n        </Button>\n        <Button\n          variant=\"secondary\"\n          size=\"small\"\n          isDisabled={props.isRedoDisabled}\n          testId=\"json-editor-redo\"\n          onClick={() => {\n            props.onRedo();\n          }}>\n          Redo\n        </Button>\n      </div>\n    </div>\n  );\n}\n","import React from 'react';\n\nimport { ValidationMessage } from '@contentful/f36-components';\nimport tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function JsonInvalidStatus() {\n  return (\n    <div\n      role=\"status\"\n      data-test-id=\"json-editor.invalid-json\"\n      className={css({ marginTop: tokens.spacingS })}>\n      <ValidationMessage>This is not valid JSON</ValidationMessage>\n    </div>\n  );\n}\n","import { JSONObject } from './types';\n\nexport function stringifyJSON(obj: JSONObject | null | undefined): string {\n  if (obj === null || obj === undefined) {\n    return '';\n  } else {\n    return JSON.stringify(obj, null, 4);\n  }\n}\n\nexport function isValidJson(str: string) {\n  let parsed;\n  try {\n    parsed = JSON.parse(str);\n  } catch (e) {\n    return false;\n  }\n  // An object or array is valid JSON\n  if (typeof parsed !== 'object') {\n    return false;\n  }\n  return true;\n}\n\nexport function parseJSON(str: string): { valid: boolean; value?: JSONObject } {\n  if (str === '') {\n    return {\n      value: undefined,\n      valid: true,\n    };\n  } else if (isValidJson(str)) {\n    return {\n      value: JSON.parse(str),\n      valid: true,\n    };\n  } else {\n    return {\n      value: undefined,\n      valid: false,\n    };\n  }\n}\n","import * as React from 'react';\n\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport deepEqual from 'deep-equal';\nimport throttle from 'lodash/throttle';\n\nimport { JsonEditorField } from './JsonEditorField';\nimport { JsonEditorToolbar } from './JsonEditorToolbar';\nimport { JsonInvalidStatus } from './JsonInvalidStatus';\nimport { JSONObject } from './types';\nimport { stringifyJSON, parseJSON } from './utils';\n\nexport interface JsonEditorProps {\n  /**\n   * is the field disabled initially\n   */\n  isInitiallyDisabled: boolean;\n\n  /**\n   * sdk.field\n   */\n  field: FieldAPI;\n}\n\ntype NullableJsonObject = JSONObject | null | undefined;\n\ntype ConnectedJsonEditorProps = {\n  initialValue: NullableJsonObject;\n  setValue: (value: NullableJsonObject) => void;\n  disabled: boolean;\n};\n\ntype ConnectedJsonEditorState = {\n  value: string;\n  isValidJson: boolean;\n  undoStack: string[];\n  redoStack: string[];\n  lastUndo: string;\n};\n\nclass ConnectedJsonEditor extends React.Component<\n  ConnectedJsonEditorProps,\n  ConnectedJsonEditorState\n> {\n  static defaultProps = {\n    isInitiallyDisabled: true,\n  };\n\n  constructor(props: ConnectedJsonEditorProps) {\n    super(props);\n    this.state = {\n      value: stringifyJSON(props.initialValue),\n      isValidJson: true,\n      undoStack: [],\n      redoStack: [],\n      lastUndo: '',\n    };\n  }\n\n  setValidJson = (value: boolean) => {\n    this.setState({\n      isValidJson: value,\n    });\n  };\n\n  pushUndo = throttle((value: string) => {\n    this.setState((state) => ({\n      undoStack: [...state.undoStack, value],\n    }));\n  }, 400);\n\n  onChange = (value: string) => {\n    const parsed = parseJSON(value);\n\n    if (value !== this.state.lastUndo) {\n      this.pushUndo(this.state.value);\n    }\n\n    this.setState({\n      value,\n      isValidJson: parsed.valid,\n    });\n\n    if (parsed.valid) {\n      this.props.setValue(parsed.value);\n    }\n  };\n\n  onUndo = () => {\n    const undoStack = this.state.undoStack;\n\n    if (undoStack.length === 0) {\n      return;\n    }\n\n    const value = undoStack.pop() || '';\n\n    const parsedValue = parseJSON(value);\n\n    this.setState(\n      (state) => ({\n        ...state,\n        value,\n        isValidJson: parsedValue.valid,\n        undoStack,\n        redoStack: [...state.redoStack, state.value],\n        lastUndo: value,\n      }),\n      () => {\n        if (parsedValue.valid) {\n          this.props.setValue(parsedValue.value);\n        }\n      }\n    );\n  };\n\n  onRedo = () => {\n    const redoStack = [...this.state.redoStack];\n\n    if (redoStack.length === 0) {\n      return;\n    }\n\n    const value = redoStack.pop() || '';\n\n    const parsedValue = parseJSON(value);\n\n    this.setState(\n      (state) => ({\n        ...state,\n        value,\n        isValidJson: parsedValue.valid,\n        redoStack,\n        undoStack: [...state.undoStack, state.value],\n      }),\n      () => {\n        if (parsedValue.valid) {\n          this.props.setValue(parsedValue.value);\n        }\n      }\n    );\n  };\n\n  render() {\n    return (\n      <div data-test-id=\"json-editor\">\n        <JsonEditorToolbar\n          isRedoDisabled={this.props.disabled || this.state.redoStack.length === 0}\n          isUndoDisabled={this.props.disabled || this.state.undoStack.length === 0}\n          onUndo={this.onUndo}\n          onRedo={this.onRedo}\n        />\n        <JsonEditorField\n          value={this.state.value}\n          onChange={this.onChange}\n          isDisabled={this.props.disabled}\n        />\n        {!this.state.isValidJson && <JsonInvalidStatus />}\n      </div>\n    );\n  }\n}\n\nexport default function JsonEditor(props: JsonEditorProps) {\n  return (\n    <FieldConnector<JSONObject>\n      field={props.field}\n      isInitiallyDisabled={props.isInitiallyDisabled}\n      isEqualValues={(value1, value2) => {\n        return deepEqual(value1, value2);\n      }}>\n      {({ value, disabled, setValue, externalReset }) => {\n        return (\n          <ConnectedJsonEditor\n            // on external change reset component completely and init with initial value again\n            key={`json-editor-${externalReset}`}\n            initialValue={value}\n            disabled={disabled}\n            setValue={setValue}\n          />\n        );\n      }}\n    </FieldConnector>\n  );\n}\n"],"names":["styles","root","css","cursor","padding","tokens","spacingS","border","gray200","borderTop","borderBottomLeftRadius","borderRadiusSmall","borderBottomRightRadius","fontSize","fontSizeM","color","gray900","outline","fontFamily","fontStackMonospace","minHeight","backgroundColor","gray100","JsonEditorField","props","React","className","cx","disabled","isDisabled","CodeMirror","value","onChange","theme","extensions","json","EditorView","lineWrapping","basicSetup","closeBrackets","lineNumbers","highlightActiveLineGutter","searchKeymap","highlightActiveLine","foldGutter","bracketMatching","syntaxHighlighting","width","editable","indentWithTab","toolbar","display","alignItems","spacingXs","justifyContent","borderTopLeftRadius","borderTopRightRadius","borderBottom","title","fontStackPrimary","gray600","actions","button","marginLeft","JsonEditorToolbar","Button","variant","size","isUndoDisabled","testId","onClick","onUndo","isRedoDisabled","onRedo","JsonInvalidStatus","role","marginTop","ValidationMessage","stringifyJSON","obj","undefined","JSON","stringify","isValidJson","str","parsed","parse","e","parseJSON","valid","ConnectedJsonEditor","constructor","setValidJson","setState","pushUndo","throttle","state","undoStack","lastUndo","setValue","length","pop","parsedValue","redoStack","initialValue","render","defaultProps","isInitiallyDisabled","JsonEditor","FieldConnector","field","isEqualValues","value1","value2","deepEqual","externalReset","key"],"mappings":"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"}

package/dist/field-editor-json.cjs.production.min.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),o=e(t),n=require("@contentful/field-editor-shared"),a=e(require("deep-equal")),i=e(require("lodash/throttle")),r=require("@codemirror/lang-json"),s=require("@codemirror/view"),l=e(require("@contentful/f36-tokens")),d=e(require("@uiw/react-codemirror")),c=require("emotion"),u=require("@contentful/f36-components");function p(){return(p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e}).apply(this,arguments)}function f(e,t){return(f=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var v={root:c.css({cursor:"text",padding:l.spacingS,border:"1px solid "+l.gray200,borderTop:"none",borderBottomLeftRadius:l.borderRadiusSmall,borderBottomRightRadius:l.borderRadiusSmall,fontSize:l.fontSizeM,".cm-editor":{color:l.gray900,"&.cm-focused":{outline:"none"}},".cm-scroller":{fontFamily:l.fontStackMonospace,minHeight:"6rem"},"&.disabled":{cursor:"auto",".cm-scroller ":{minHeight:"6rem",backgroundColor:l.gray100,cursor:"not-allowed"},".cm-editor":{border:"1px solid "+l.gray200},".cm-line":{cursor:"not-allowed"},".cm-lines":{cursor:"not-allowed"}}})};function m(e){return o.createElement("div",{className:c.cx(v.root,{disabled:e.isDisabled}),"data-test-id":"json-editor-code-mirror"},o.createElement(d,{value:e.value,onChange:e.onChange,theme:"light",extensions:[r.json(),s.EditorView.lineWrapping],basicSetup:{closeBrackets:!1,lineNumbers:!1,highlightActiveLineGutter:!1,searchKeymap:!1,highlightActiveLine:!1,foldGutter:!1,bracketMatching:!1,syntaxHighlighting:!1},width:"100%",editable:!e.isDisabled,indentWithTab:!0}))}var b={toolbar:c.css({display:"flex",alignItems:"center",padding:l.spacingXs,justifyContent:"space-between",backgroundColor:l.gray100,border:"1px solid "+l.gray200,borderTopLeftRadius:l.borderRadiusSmall,borderTopRightRadius:l.borderRadiusSmall,borderBottom:"none"}),title:c.css({fontFamily:l.fontStackPrimary,fontSize:l.fontSizeM,color:l.gray600}),actions:c.css({button:{marginLeft:l.spacingS}})};function h(e){return o.createElement("div",{className:b.toolbar},o.createElement("div",{className:b.title},"JSON Editor"),o.createElement("div",{className:b.actions},o.createElement(u.Button,{variant:"secondary",size:"small",isDisabled:e.isUndoDisabled,testId:"json-editor-undo",onClick:function(){e.onUndo()}},"Undo"),o.createElement(u.Button,{variant:"secondary",size:"small",isDisabled:e.isRedoDisabled,testId:"json-editor-redo",onClick:function(){e.onRedo()}},"Redo")))}function g(){return o.createElement("div",{role:"status","data-test-id":"json-editor.invalid-json",className:c.css({marginTop:l.spacingS})},o.createElement(u.ValidationMessage,null,"This is not valid JSON"))}function S(e){return""===e?{value:void 0,valid:!0}:function(e){var t;try{t=JSON.parse(e)}catch(e){return!1}return"object"==typeof t}(e)?{value:JSON.parse(e),valid:!0}:{value:void 0,valid:!1}}var y=function(e){var o,n;function a(t){var o,n;return(o=e.call(this,t)||this).setValidJson=function(e){o.setState({isValidJson:e})},o.pushUndo=i((function(e){o.setState((function(t){return{undoStack:[].concat(t.undoStack,[e])}}))}),400),o.onChange=function(e){var t=S(e);e!==o.state.lastUndo&&o.pushUndo(o.state.value),o.setState({value:e,isValidJson:t.valid}),t.valid&&o.props.setValue(t.value)},o.onUndo=function(){var e=o.state.undoStack;if(0!==e.length){var t=e.pop()||"",n=S(t);o.setState((function(o){return p({},o,{value:t,isValidJson:n.valid,undoStack:e,redoStack:[].concat(o.redoStack,[o.value]),lastUndo:t})}),(function(){n.valid&&o.props.setValue(n.value)}))}},o.onRedo=function(){var e=[].concat(o.state.redoStack);if(0!==e.length){var t=e.pop()||"",n=S(t);o.setState((function(o){return p({},o,{value:t,isValidJson:n.valid,redoStack:e,undoStack:[].concat(o.undoStack,[o.value])})}),(function(){n.valid&&o.props.setValue(n.value)}))}},o.state={value:(n=t.initialValue,null==n?"":JSON.stringify(n,null,4)),isValidJson:!0,undoStack:[],redoStack:[],lastUndo:""},o}return n=e,(o=a).prototype=Object.create(n.prototype),o.prototype.constructor=o,f(o,n),a.prototype.render=function(){return t.createElement("div",{"data-test-id":"json-editor"},t.createElement(h,{isRedoDisabled:this.props.disabled||0===this.state.redoStack.length,isUndoDisabled:this.props.disabled||0===this.state.undoStack.length,onUndo:this.onUndo,onRedo:this.onRedo}),t.createElement(m,{value:this.state.value,onChange:this.onChange,isDisabled:this.props.disabled}),!this.state.isValidJson&&t.createElement(g,null))},a}(t.Component);y.defaultProps={isInitiallyDisabled:!0},exports.JsonEditor=function(e){return t.createElement(n.FieldConnector,{field:e.field,isInitiallyDisabled:e.isInitiallyDisabled,isEqualValues:function(e,t){return a(e,t)}},(function(e){return t.createElement(y,{key:"json-editor-"+e.externalReset,initialValue:e.value,disabled:e.disabled,setValue:e.setValue})}))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),i=e(t),o=require("@contentful/field-editor-shared"),a=e(require("deep-equal")),s=e(require("lodash/throttle")),n=require("@codemirror/lang-json"),r=require("@codemirror/view"),l=e(require("@contentful/f36-tokens")),d=e(require("@uiw/react-codemirror")),c=require("emotion"),u=require("@contentful/f36-components");const h={root:c.css({cursor:"text",padding:l.spacingS,border:"1px solid "+l.gray200,borderTop:"none",borderBottomLeftRadius:l.borderRadiusSmall,borderBottomRightRadius:l.borderRadiusSmall,fontSize:l.fontSizeM,".cm-editor":{color:l.gray900,"&.cm-focused":{outline:"none"}},".cm-scroller":{fontFamily:l.fontStackMonospace,minHeight:"6rem"},"&.disabled":{cursor:"auto",".cm-scroller ":{minHeight:"6rem",backgroundColor:l.gray100,cursor:"not-allowed"},".cm-editor":{border:"1px solid "+l.gray200},".cm-line":{cursor:"not-allowed"},".cm-lines":{cursor:"not-allowed"}}})};function m(e){return i.createElement("div",{className:c.cx(h.root,{disabled:e.isDisabled}),"data-test-id":"json-editor-code-mirror"},i.createElement(d,{value:e.value,onChange:e.onChange,theme:"light",extensions:[n.json(),r.EditorView.lineWrapping],basicSetup:{closeBrackets:!1,lineNumbers:!1,highlightActiveLineGutter:!1,searchKeymap:!1,highlightActiveLine:!1,foldGutter:!1,bracketMatching:!1,syntaxHighlighting:!1},width:"100%",editable:!e.isDisabled,indentWithTab:!0}))}const p={toolbar:c.css({display:"flex",alignItems:"center",padding:l.spacingXs,justifyContent:"space-between",backgroundColor:l.gray100,border:"1px solid "+l.gray200,borderTopLeftRadius:l.borderRadiusSmall,borderTopRightRadius:l.borderRadiusSmall,borderBottom:"none"}),title:c.css({fontFamily:l.fontStackPrimary,fontSize:l.fontSizeM,color:l.gray600}),actions:c.css({button:{marginLeft:l.spacingS}})};function b(e){return i.createElement("div",{className:p.toolbar},i.createElement("div",{className:p.title},"JSON Editor"),i.createElement("div",{className:p.actions},i.createElement(u.Button,{variant:"secondary",size:"small",isDisabled:e.isUndoDisabled,testId:"json-editor-undo",onClick:()=>{e.onUndo()}},"Undo"),i.createElement(u.Button,{variant:"secondary",size:"small",isDisabled:e.isRedoDisabled,testId:"json-editor-redo",onClick:()=>{e.onRedo()}},"Redo")))}function v(){return i.createElement("div",{role:"status","data-test-id":"json-editor.invalid-json",className:c.css({marginTop:l.spacingS})},i.createElement(u.ValidationMessage,null,"This is not valid JSON"))}function g(e){return""===e?{value:void 0,valid:!0}:function(e){let t;try{t=JSON.parse(e)}catch(e){return!1}return"object"==typeof t}(e)?{value:JSON.parse(e),valid:!0}:{value:void 0,valid:!1}}class f extends t.Component{constructor(e){var t;super(e),this.setValidJson=e=>{this.setState({isValidJson:e})},this.pushUndo=s(e=>{this.setState(t=>({undoStack:[...t.undoStack,e]}))},400),this.onChange=e=>{const t=g(e);e!==this.state.lastUndo&&this.pushUndo(this.state.value),this.setState({value:e,isValidJson:t.valid}),t.valid&&this.props.setValue(t.value)},this.onUndo=()=>{const e=this.state.undoStack;if(0===e.length)return;const t=e.pop()||"",i=g(t);this.setState(o=>({...o,value:t,isValidJson:i.valid,undoStack:e,redoStack:[...o.redoStack,o.value],lastUndo:t}),()=>{i.valid&&this.props.setValue(i.value)})},this.onRedo=()=>{const e=[...this.state.redoStack];if(0===e.length)return;const t=e.pop()||"",i=g(t);this.setState(o=>({...o,value:t,isValidJson:i.valid,redoStack:e,undoStack:[...o.undoStack,o.value]}),()=>{i.valid&&this.props.setValue(i.value)})},this.state={value:(t=e.initialValue,null==t?"":JSON.stringify(t,null,4)),isValidJson:!0,undoStack:[],redoStack:[],lastUndo:""}}render(){return t.createElement("div",{"data-test-id":"json-editor"},t.createElement(b,{isRedoDisabled:this.props.disabled||0===this.state.redoStack.length,isUndoDisabled:this.props.disabled||0===this.state.undoStack.length,onUndo:this.onUndo,onRedo:this.onRedo}),t.createElement(m,{value:this.state.value,onChange:this.onChange,isDisabled:this.props.disabled}),!this.state.isValidJson&&t.createElement(v,null))}}f.defaultProps={isInitiallyDisabled:!0},exports.JsonEditor=function(e){return t.createElement(o.FieldConnector,{field:e.field,isInitiallyDisabled:e.isInitiallyDisabled,isEqualValues:(e,t)=>a(e,t)},({value:e,disabled:i,setValue:o,externalReset:a})=>t.createElement(f,{key:"json-editor-"+a,initialValue:e,disabled:i,setValue:o}))};
 //# sourceMappingURL=field-editor-json.cjs.production.min.js.map

package/dist/field-editor-json.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-editor-json.cjs.production.min.js","sources":["../src/JsonEditorField.tsx","../src/JsonEditorToolbar.tsx","../src/JsonInvalidStatus.tsx","../src/utils.ts","../src/JsonEditor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { json } from '@codemirror/lang-json';\nimport { EditorView } from '@codemirror/view';\nimport tokens from '@contentful/f36-tokens';\nimport CodeMirror from '@uiw/react-codemirror';\nimport { css, cx } from 'emotion';\n\ntype JsonEditorFieldProps = {\n  isDisabled: boolean;\n  value: string;\n  onChange: (value: string) => void;\n};\n\nconst styles = {\n  root: css({\n    cursor: 'text',\n    padding: tokens.spacingS,\n    border: `1px solid ${tokens.gray200}`,\n    borderTop: 'none',\n    borderBottomLeftRadius: tokens.borderRadiusSmall,\n    borderBottomRightRadius: tokens.borderRadiusSmall,\n    fontSize: tokens.fontSizeM,\n    '.cm-editor': {\n      color: tokens.gray900,\n      '&.cm-focused': {\n        outline: 'none',\n      },\n    },\n    '.cm-scroller': {\n      fontFamily: tokens.fontStackMonospace,\n      minHeight: '6rem',\n    },\n    '&.disabled': {\n      cursor: 'auto',\n      '.cm-scroller ': {\n        minHeight: '6rem',\n        backgroundColor: tokens.gray100,\n        cursor: 'not-allowed',\n      },\n      '.cm-editor': {\n        border: `1px solid ${tokens.gray200}`,\n      },\n      '.cm-line': {\n        cursor: 'not-allowed',\n      },\n      '.cm-lines': {\n        cursor: 'not-allowed',\n      },\n    },\n  }),\n};\n\nexport function JsonEditorField(props: JsonEditorFieldProps) {\n  return (\n    <div\n      className={cx(styles.root, { disabled: props.isDisabled })}\n      data-test-id=\"json-editor-code-mirror\"\n    >\n      <CodeMirror\n        value={props.value}\n        onChange={props.onChange}\n        theme=\"light\"\n        extensions={[json(), EditorView.lineWrapping]}\n        basicSetup={{\n          closeBrackets: false,\n          lineNumbers: false,\n          highlightActiveLineGutter: false,\n          searchKeymap: false,\n          highlightActiveLine: false,\n          foldGutter: false,\n          bracketMatching: false,\n          syntaxHighlighting: false,\n        }}\n        width=\"100%\"\n        editable={!props.isDisabled}\n        indentWithTab={true}\n      />\n    </div>\n  );\n}\n","import React from 'react';\n\nimport { Button } from '@contentful/f36-components';\nimport tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nconst styles = {\n  toolbar: css({\n    display: 'flex',\n    alignItems: 'center',\n    padding: tokens.spacingXs,\n    justifyContent: 'space-between',\n    backgroundColor: tokens.gray100,\n    border: `1px solid ${tokens.gray200}`,\n    borderTopLeftRadius: tokens.borderRadiusSmall,\n    borderTopRightRadius: tokens.borderRadiusSmall,\n    borderBottom: 'none',\n  }),\n  title: css({\n    fontFamily: tokens.fontStackPrimary,\n    fontSize: tokens.fontSizeM,\n    color: tokens.gray600,\n  }),\n  actions: css({\n    button: {\n      marginLeft: tokens.spacingS,\n    },\n  }),\n};\n\ntype JsonEditorToolbarProps = {\n  isUndoDisabled: boolean;\n  isRedoDisabled: boolean;\n  onRedo: () => void;\n  onUndo: () => void;\n};\n\nexport function JsonEditorToolbar(props: JsonEditorToolbarProps) {\n  return (\n    <div className={styles.toolbar}>\n      <div className={styles.title}>JSON Editor</div>\n      <div className={styles.actions}>\n        <Button\n          variant=\"secondary\"\n          size=\"small\"\n          isDisabled={props.isUndoDisabled}\n          testId=\"json-editor-undo\"\n          onClick={() => {\n            props.onUndo();\n          }}>\n          Undo\n        </Button>\n        <Button\n          variant=\"secondary\"\n          size=\"small\"\n          isDisabled={props.isRedoDisabled}\n          testId=\"json-editor-redo\"\n          onClick={() => {\n            props.onRedo();\n          }}>\n          Redo\n        </Button>\n      </div>\n    </div>\n  );\n}\n","import React from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { ValidationMessage } from '@contentful/f36-components';\n\nexport function JsonInvalidStatus() {\n  return (\n    <div\n      role=\"status\"\n      data-test-id=\"json-editor.invalid-json\"\n      className={css({ marginTop: tokens.spacingS })}>\n      <ValidationMessage>This is not valid JSON</ValidationMessage>\n    </div>\n  );\n}\n","import { JSONObject } from './types';\n\nexport function stringifyJSON(obj: JSONObject | null | undefined): string {\n  if (obj === null || obj === undefined) {\n    return '';\n  } else {\n    return JSON.stringify(obj, null, 4);\n  }\n}\n\nexport function isValidJson(str: string) {\n  let parsed;\n  try {\n    parsed = JSON.parse(str);\n  } catch (e) {\n    return false;\n  }\n  // An object or array is valid JSON\n  if (typeof parsed !== 'object') {\n    return false;\n  }\n  return true;\n}\n\nexport function parseJSON(str: string): { valid: boolean; value?: JSONObject } {\n  if (str === '') {\n    return {\n      value: undefined,\n      valid: true,\n    };\n  } else if (isValidJson(str)) {\n    return {\n      value: JSON.parse(str),\n      valid: true,\n    };\n  } else {\n    return {\n      value: undefined,\n      valid: false,\n    };\n  }\n}\n","import * as React from 'react';\n\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport deepEqual from 'deep-equal';\nimport throttle from 'lodash/throttle';\n\nimport { JsonEditorField } from './JsonEditorField';\nimport { JsonEditorToolbar } from './JsonEditorToolbar';\nimport { JsonInvalidStatus } from './JsonInvalidStatus';\nimport { JSONObject } from './types';\nimport { stringifyJSON, parseJSON } from './utils';\n\nexport interface JsonEditorProps {\n  /**\n   * is the field disabled initially\n   */\n  isInitiallyDisabled: boolean;\n\n  /**\n   * sdk.field\n   */\n  field: FieldAPI;\n}\n\ntype NullableJsonObject = JSONObject | null | undefined;\n\ntype ConnectedJsonEditorProps = {\n  initialValue: NullableJsonObject;\n  setValue: (value: NullableJsonObject) => void;\n  disabled: boolean;\n};\n\ntype ConnectedJsonEditorState = {\n  value: string;\n  isValidJson: boolean;\n  undoStack: string[];\n  redoStack: string[];\n  lastUndo: string;\n};\n\nclass ConnectedJsonEditor extends React.Component<\n  ConnectedJsonEditorProps,\n  ConnectedJsonEditorState\n> {\n  static defaultProps = {\n    isInitiallyDisabled: true,\n  };\n\n  constructor(props: ConnectedJsonEditorProps) {\n    super(props);\n    this.state = {\n      value: stringifyJSON(props.initialValue),\n      isValidJson: true,\n      undoStack: [],\n      redoStack: [],\n      lastUndo: '',\n    };\n  }\n\n  setValidJson = (value: boolean) => {\n    this.setState({\n      isValidJson: value,\n    });\n  };\n\n  pushUndo = throttle((value: string) => {\n    this.setState((state) => ({\n      undoStack: [...state.undoStack, value],\n    }));\n  }, 400);\n\n  onChange = (value: string) => {\n    const parsed = parseJSON(value);\n\n    if (value !== this.state.lastUndo) {\n      this.pushUndo(this.state.value);\n    }\n\n    this.setState({\n      value,\n      isValidJson: parsed.valid,\n    });\n\n    if (parsed.valid) {\n      this.props.setValue(parsed.value);\n    }\n  };\n\n  onUndo = () => {\n    const undoStack = this.state.undoStack;\n\n    if (undoStack.length === 0) {\n      return;\n    }\n\n    const value = undoStack.pop() || '';\n\n    const parsedValue = parseJSON(value);\n\n    this.setState(\n      (state) => ({\n        ...state,\n        value,\n        isValidJson: parsedValue.valid,\n        undoStack,\n        redoStack: [...state.redoStack, state.value],\n        lastUndo: value,\n      }),\n      () => {\n        if (parsedValue.valid) {\n          this.props.setValue(parsedValue.value);\n        }\n      }\n    );\n  };\n\n  onRedo = () => {\n    const redoStack = [...this.state.redoStack];\n\n    if (redoStack.length === 0) {\n      return;\n    }\n\n    const value = redoStack.pop() || '';\n\n    const parsedValue = parseJSON(value);\n\n    this.setState(\n      (state) => ({\n        ...state,\n        value,\n        isValidJson: parsedValue.valid,\n        redoStack,\n        undoStack: [...state.undoStack, state.value],\n      }),\n      () => {\n        if (parsedValue.valid) {\n          this.props.setValue(parsedValue.value);\n        }\n      }\n    );\n  };\n\n  render() {\n    return (\n      <div data-test-id=\"json-editor\">\n        <JsonEditorToolbar\n          isRedoDisabled={this.props.disabled || this.state.redoStack.length === 0}\n          isUndoDisabled={this.props.disabled || this.state.undoStack.length === 0}\n          onUndo={this.onUndo}\n          onRedo={this.onRedo}\n        />\n        <JsonEditorField\n          value={this.state.value}\n          onChange={this.onChange}\n          isDisabled={this.props.disabled}\n        />\n        {!this.state.isValidJson && <JsonInvalidStatus />}\n      </div>\n    );\n  }\n}\n\nexport default function JsonEditor(props: JsonEditorProps) {\n  return (\n    <FieldConnector<JSONObject>\n      field={props.field}\n      isInitiallyDisabled={props.isInitiallyDisabled}\n      isEqualValues={(value1, value2) => {\n        return deepEqual(value1, value2);\n      }}>\n      {({ value, disabled, setValue, externalReset }) => {\n        return (\n          <ConnectedJsonEditor\n            // on external change reset component completely and init with initial value again\n            key={`json-editor-${externalReset}`}\n            initialValue={value}\n            disabled={disabled}\n            setValue={setValue}\n          />\n        );\n      }}\n    </FieldConnector>\n  );\n}\n"],"names":["styles","root","css","cursor","padding","tokens","spacingS","border","gray200","borderTop","borderBottomLeftRadius","borderRadiusSmall","borderBottomRightRadius","fontSize","fontSizeM","color","gray900","outline","fontFamily","fontStackMonospace","minHeight","backgroundColor","gray100","JsonEditorField","props","React","className","cx","disabled","isDisabled","CodeMirror","value","onChange","theme","extensions","json","EditorView","lineWrapping","basicSetup","closeBrackets","lineNumbers","highlightActiveLineGutter","searchKeymap","highlightActiveLine","foldGutter","bracketMatching","syntaxHighlighting","width","editable","indentWithTab","toolbar","display","alignItems","spacingXs","justifyContent","borderTopLeftRadius","borderTopRightRadius","borderBottom","title","fontStackPrimary","gray600","actions","button","marginLeft","JsonEditorToolbar","Button","variant","size","isUndoDisabled","testId","onClick","onUndo","isRedoDisabled","onRedo","JsonInvalidStatus","role","marginTop","ValidationMessage","parseJSON","str","undefined","valid","parsed","JSON","parse","e","isValidJson","ConnectedJsonEditor","obj","setValidJson","setState","pushUndo","throttle","state","undoStack","_this","lastUndo","setValue","length","pop","parsedValue","redoStack","initialValue","stringify","render","this","defaultProps","isInitiallyDisabled","FieldConnector","field","isEqualValues","value1","value2","deepEqual","key","externalReset"],"mappings":"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"}
+{"version":3,"file":"field-editor-json.cjs.production.min.js","sources":["../src/JsonEditorField.tsx","../src/JsonEditorToolbar.tsx","../src/JsonInvalidStatus.tsx","../src/utils.ts","../src/JsonEditor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { json } from '@codemirror/lang-json';\nimport { EditorView } from '@codemirror/view';\nimport tokens from '@contentful/f36-tokens';\nimport CodeMirror from '@uiw/react-codemirror';\nimport { css, cx } from 'emotion';\n\ntype JsonEditorFieldProps = {\n  isDisabled: boolean;\n  value: string;\n  onChange: (value: string) => void;\n};\n\nconst styles = {\n  root: css({\n    cursor: 'text',\n    padding: tokens.spacingS,\n    border: `1px solid ${tokens.gray200}`,\n    borderTop: 'none',\n    borderBottomLeftRadius: tokens.borderRadiusSmall,\n    borderBottomRightRadius: tokens.borderRadiusSmall,\n    fontSize: tokens.fontSizeM,\n    '.cm-editor': {\n      color: tokens.gray900,\n      '&.cm-focused': {\n        outline: 'none',\n      },\n    },\n    '.cm-scroller': {\n      fontFamily: tokens.fontStackMonospace,\n      minHeight: '6rem',\n    },\n    '&.disabled': {\n      cursor: 'auto',\n      '.cm-scroller ': {\n        minHeight: '6rem',\n        backgroundColor: tokens.gray100,\n        cursor: 'not-allowed',\n      },\n      '.cm-editor': {\n        border: `1px solid ${tokens.gray200}`,\n      },\n      '.cm-line': {\n        cursor: 'not-allowed',\n      },\n      '.cm-lines': {\n        cursor: 'not-allowed',\n      },\n    },\n  }),\n};\n\nexport function JsonEditorField(props: JsonEditorFieldProps) {\n  return (\n    <div\n      className={cx(styles.root, { disabled: props.isDisabled })}\n      data-test-id=\"json-editor-code-mirror\"\n    >\n      <CodeMirror\n        value={props.value}\n        onChange={props.onChange}\n        theme=\"light\"\n        extensions={[json(), EditorView.lineWrapping]}\n        basicSetup={{\n          closeBrackets: false,\n          lineNumbers: false,\n          highlightActiveLineGutter: false,\n          searchKeymap: false,\n          highlightActiveLine: false,\n          foldGutter: false,\n          bracketMatching: false,\n          syntaxHighlighting: false,\n        }}\n        width=\"100%\"\n        editable={!props.isDisabled}\n        indentWithTab={true}\n      />\n    </div>\n  );\n}\n","import React from 'react';\n\nimport { Button } from '@contentful/f36-components';\nimport tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nconst styles = {\n  toolbar: css({\n    display: 'flex',\n    alignItems: 'center',\n    padding: tokens.spacingXs,\n    justifyContent: 'space-between',\n    backgroundColor: tokens.gray100,\n    border: `1px solid ${tokens.gray200}`,\n    borderTopLeftRadius: tokens.borderRadiusSmall,\n    borderTopRightRadius: tokens.borderRadiusSmall,\n    borderBottom: 'none',\n  }),\n  title: css({\n    fontFamily: tokens.fontStackPrimary,\n    fontSize: tokens.fontSizeM,\n    color: tokens.gray600,\n  }),\n  actions: css({\n    button: {\n      marginLeft: tokens.spacingS,\n    },\n  }),\n};\n\ntype JsonEditorToolbarProps = {\n  isUndoDisabled: boolean;\n  isRedoDisabled: boolean;\n  onRedo: () => void;\n  onUndo: () => void;\n};\n\nexport function JsonEditorToolbar(props: JsonEditorToolbarProps) {\n  return (\n    <div className={styles.toolbar}>\n      <div className={styles.title}>JSON Editor</div>\n      <div className={styles.actions}>\n        <Button\n          variant=\"secondary\"\n          size=\"small\"\n          isDisabled={props.isUndoDisabled}\n          testId=\"json-editor-undo\"\n          onClick={() => {\n            props.onUndo();\n          }}>\n          Undo\n        </Button>\n        <Button\n          variant=\"secondary\"\n          size=\"small\"\n          isDisabled={props.isRedoDisabled}\n          testId=\"json-editor-redo\"\n          onClick={() => {\n            props.onRedo();\n          }}>\n          Redo\n        </Button>\n      </div>\n    </div>\n  );\n}\n","import React from 'react';\n\nimport { ValidationMessage } from '@contentful/f36-components';\nimport tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function JsonInvalidStatus() {\n  return (\n    <div\n      role=\"status\"\n      data-test-id=\"json-editor.invalid-json\"\n      className={css({ marginTop: tokens.spacingS })}>\n      <ValidationMessage>This is not valid JSON</ValidationMessage>\n    </div>\n  );\n}\n","import { JSONObject } from './types';\n\nexport function stringifyJSON(obj: JSONObject | null | undefined): string {\n  if (obj === null || obj === undefined) {\n    return '';\n  } else {\n    return JSON.stringify(obj, null, 4);\n  }\n}\n\nexport function isValidJson(str: string) {\n  let parsed;\n  try {\n    parsed = JSON.parse(str);\n  } catch (e) {\n    return false;\n  }\n  // An object or array is valid JSON\n  if (typeof parsed !== 'object') {\n    return false;\n  }\n  return true;\n}\n\nexport function parseJSON(str: string): { valid: boolean; value?: JSONObject } {\n  if (str === '') {\n    return {\n      value: undefined,\n      valid: true,\n    };\n  } else if (isValidJson(str)) {\n    return {\n      value: JSON.parse(str),\n      valid: true,\n    };\n  } else {\n    return {\n      value: undefined,\n      valid: false,\n    };\n  }\n}\n","import * as React from 'react';\n\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport deepEqual from 'deep-equal';\nimport throttle from 'lodash/throttle';\n\nimport { JsonEditorField } from './JsonEditorField';\nimport { JsonEditorToolbar } from './JsonEditorToolbar';\nimport { JsonInvalidStatus } from './JsonInvalidStatus';\nimport { JSONObject } from './types';\nimport { stringifyJSON, parseJSON } from './utils';\n\nexport interface JsonEditorProps {\n  /**\n   * is the field disabled initially\n   */\n  isInitiallyDisabled: boolean;\n\n  /**\n   * sdk.field\n   */\n  field: FieldAPI;\n}\n\ntype NullableJsonObject = JSONObject | null | undefined;\n\ntype ConnectedJsonEditorProps = {\n  initialValue: NullableJsonObject;\n  setValue: (value: NullableJsonObject) => void;\n  disabled: boolean;\n};\n\ntype ConnectedJsonEditorState = {\n  value: string;\n  isValidJson: boolean;\n  undoStack: string[];\n  redoStack: string[];\n  lastUndo: string;\n};\n\nclass ConnectedJsonEditor extends React.Component<\n  ConnectedJsonEditorProps,\n  ConnectedJsonEditorState\n> {\n  static defaultProps = {\n    isInitiallyDisabled: true,\n  };\n\n  constructor(props: ConnectedJsonEditorProps) {\n    super(props);\n    this.state = {\n      value: stringifyJSON(props.initialValue),\n      isValidJson: true,\n      undoStack: [],\n      redoStack: [],\n      lastUndo: '',\n    };\n  }\n\n  setValidJson = (value: boolean) => {\n    this.setState({\n      isValidJson: value,\n    });\n  };\n\n  pushUndo = throttle((value: string) => {\n    this.setState((state) => ({\n      undoStack: [...state.undoStack, value],\n    }));\n  }, 400);\n\n  onChange = (value: string) => {\n    const parsed = parseJSON(value);\n\n    if (value !== this.state.lastUndo) {\n      this.pushUndo(this.state.value);\n    }\n\n    this.setState({\n      value,\n      isValidJson: parsed.valid,\n    });\n\n    if (parsed.valid) {\n      this.props.setValue(parsed.value);\n    }\n  };\n\n  onUndo = () => {\n    const undoStack = this.state.undoStack;\n\n    if (undoStack.length === 0) {\n      return;\n    }\n\n    const value = undoStack.pop() || '';\n\n    const parsedValue = parseJSON(value);\n\n    this.setState(\n      (state) => ({\n        ...state,\n        value,\n        isValidJson: parsedValue.valid,\n        undoStack,\n        redoStack: [...state.redoStack, state.value],\n        lastUndo: value,\n      }),\n      () => {\n        if (parsedValue.valid) {\n          this.props.setValue(parsedValue.value);\n        }\n      }\n    );\n  };\n\n  onRedo = () => {\n    const redoStack = [...this.state.redoStack];\n\n    if (redoStack.length === 0) {\n      return;\n    }\n\n    const value = redoStack.pop() || '';\n\n    const parsedValue = parseJSON(value);\n\n    this.setState(\n      (state) => ({\n        ...state,\n        value,\n        isValidJson: parsedValue.valid,\n        redoStack,\n        undoStack: [...state.undoStack, state.value],\n      }),\n      () => {\n        if (parsedValue.valid) {\n          this.props.setValue(parsedValue.value);\n        }\n      }\n    );\n  };\n\n  render() {\n    return (\n      <div data-test-id=\"json-editor\">\n        <JsonEditorToolbar\n          isRedoDisabled={this.props.disabled || this.state.redoStack.length === 0}\n          isUndoDisabled={this.props.disabled || this.state.undoStack.length === 0}\n          onUndo={this.onUndo}\n          onRedo={this.onRedo}\n        />\n        <JsonEditorField\n          value={this.state.value}\n          onChange={this.onChange}\n          isDisabled={this.props.disabled}\n        />\n        {!this.state.isValidJson && <JsonInvalidStatus />}\n      </div>\n    );\n  }\n}\n\nexport default function JsonEditor(props: JsonEditorProps) {\n  return (\n    <FieldConnector<JSONObject>\n      field={props.field}\n      isInitiallyDisabled={props.isInitiallyDisabled}\n      isEqualValues={(value1, value2) => {\n        return deepEqual(value1, value2);\n      }}>\n      {({ value, disabled, setValue, externalReset }) => {\n        return (\n          <ConnectedJsonEditor\n            // on external change reset component completely and init with initial value again\n            key={`json-editor-${externalReset}`}\n            initialValue={value}\n            disabled={disabled}\n            setValue={setValue}\n          />\n        );\n      }}\n    </FieldConnector>\n  );\n}\n"],"names":["styles","root","css","cursor","padding","tokens","spacingS","border","gray200","borderTop","borderBottomLeftRadius","borderRadiusSmall","borderBottomRightRadius","fontSize","fontSizeM","color","gray900","outline","fontFamily","fontStackMonospace","minHeight","backgroundColor","gray100","JsonEditorField","props","React","className","cx","disabled","isDisabled","CodeMirror","value","onChange","theme","extensions","json","EditorView","lineWrapping","basicSetup","closeBrackets","lineNumbers","highlightActiveLineGutter","searchKeymap","highlightActiveLine","foldGutter","bracketMatching","syntaxHighlighting","width","editable","indentWithTab","toolbar","display","alignItems","spacingXs","justifyContent","borderTopLeftRadius","borderTopRightRadius","borderBottom","title","fontStackPrimary","gray600","actions","button","marginLeft","JsonEditorToolbar","Button","variant","size","isUndoDisabled","testId","onClick","onUndo","isRedoDisabled","onRedo","JsonInvalidStatus","role","marginTop","ValidationMessage","parseJSON","str","undefined","valid","parsed","JSON","parse","e","isValidJson","ConnectedJsonEditor","constructor","obj","setValidJson","setState","pushUndo","throttle","state","undoStack","this","lastUndo","setValue","length","pop","parsedValue","redoStack","initialValue","stringify","render","defaultProps","isInitiallyDisabled","FieldConnector","field","isEqualValues","value1","value2","deepEqual","externalReset","key"],"mappings":"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"}

package/dist/field-editor-json.esm.js

@@ -9,45 +9,11 @@ import CodeMirror from '@uiw/react-codemirror';
 import { cx, css } from 'emotion';
 import { Button, ValidationMessage } from '@contentful/f36-components';
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-
-  _setPrototypeOf(subClass, superClass);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
-var styles = {
+const styles = {
   root: /*#__PURE__*/css({
     cursor: 'text',
     padding: tokens.spacingS,
-    border: "1px solid " + tokens.gray200,
+    border: `1px solid ${tokens.gray200}`,
     borderTop: 'none',
     borderBottomLeftRadius: tokens.borderRadiusSmall,
     borderBottomRightRadius: tokens.borderRadiusSmall,
@@ -70,7 +36,7 @@ var styles = {
         cursor: 'not-allowed'
       },
       '.cm-editor': {
-        border: "1px solid " + tokens.gray200
+        border: `1px solid ${tokens.gray200}`
       },
       '.cm-line': {
         cursor: 'not-allowed'
@@ -108,14 +74,14 @@ function JsonEditorField(props) {
   }));
 }
 
-var styles$1 = {
+const styles$1 = {
   toolbar: /*#__PURE__*/css({
     display: 'flex',
     alignItems: 'center',
     padding: tokens.spacingXs,
     justifyContent: 'space-between',
     backgroundColor: tokens.gray100,
-    border: "1px solid " + tokens.gray200,
+    border: `1px solid ${tokens.gray200}`,
     borderTopLeftRadius: tokens.borderRadiusSmall,
     borderTopRightRadius: tokens.borderRadiusSmall,
     borderBottom: 'none'
@@ -143,7 +109,7 @@ function JsonEditorToolbar(props) {
     size: "small",
     isDisabled: props.isUndoDisabled,
     testId: "json-editor-undo",
-    onClick: function onClick() {
+    onClick: () => {
       props.onUndo();
     }
   }, "Undo"), React__default.createElement(Button, {
@@ -151,7 +117,7 @@ function JsonEditorToolbar(props) {
     size: "small",
     isDisabled: props.isRedoDisabled,
     testId: "json-editor-redo",
-    onClick: function onClick() {
+    onClick: () => {
       props.onRedo();
     }
   }, "Redo")));
@@ -175,7 +141,7 @@ function stringifyJSON(obj) {
   }
 }
 function isValidJson(str) {
-  var parsed;
+  let parsed;
 
   try {
     parsed = JSON.parse(str);
@@ -209,107 +175,92 @@ function parseJSON(str) {
   }
 }
 
-var ConnectedJsonEditor = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(ConnectedJsonEditor, _React$Component);
+class ConnectedJsonEditor extends Component {
+  constructor(props) {
+    super(props);
 
-  function ConnectedJsonEditor(props) {
-    var _this;
-
-    _this = _React$Component.call(this, props) || this;
-
-    _this.setValidJson = function (value) {
-      _this.setState({
+    this.setValidJson = value => {
+      this.setState({
         isValidJson: value
       });
     };
 
-    _this.pushUndo = throttle(function (value) {
-      _this.setState(function (state) {
-        return {
-          undoStack: [].concat(state.undoStack, [value])
-        };
-      });
+    this.pushUndo = throttle(value => {
+      this.setState(state => ({
+        undoStack: [...state.undoStack, value]
+      }));
     }, 400);
 
-    _this.onChange = function (value) {
-      var parsed = parseJSON(value);
+    this.onChange = value => {
+      const parsed = parseJSON(value);
 
-      if (value !== _this.state.lastUndo) {
-        _this.pushUndo(_this.state.value);
+      if (value !== this.state.lastUndo) {
+        this.pushUndo(this.state.value);
       }
 
-      _this.setState({
-        value: value,
+      this.setState({
+        value,
         isValidJson: parsed.valid
       });
 
       if (parsed.valid) {
-        _this.props.setValue(parsed.value);
+        this.props.setValue(parsed.value);
       }
     };
 
-    _this.onUndo = function () {
-      var undoStack = _this.state.undoStack;
+    this.onUndo = () => {
+      const undoStack = this.state.undoStack;
 
       if (undoStack.length === 0) {
         return;
       }
 
-      var value = undoStack.pop() || '';
-      var parsedValue = parseJSON(value);
-
-      _this.setState(function (state) {
-        return _extends({}, state, {
-          value: value,
-          isValidJson: parsedValue.valid,
-          undoStack: undoStack,
-          redoStack: [].concat(state.redoStack, [state.value]),
-          lastUndo: value
-        });
-      }, function () {
+      const value = undoStack.pop() || '';
+      const parsedValue = 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);
+          this.props.setValue(parsedValue.value);
         }
       });
     };
 
-    _this.onRedo = function () {
-      var redoStack = [].concat(_this.state.redoStack);
+    this.onRedo = () => {
+      const redoStack = [...this.state.redoStack];
 
       if (redoStack.length === 0) {
         return;
       }
 
-      var value = redoStack.pop() || '';
-      var parsedValue = parseJSON(value);
-
-      _this.setState(function (state) {
-        return _extends({}, state, {
-          value: value,
-          isValidJson: parsedValue.valid,
-          redoStack: redoStack,
-          undoStack: [].concat(state.undoStack, [state.value])
-        });
-      }, function () {
+      const value = redoStack.pop() || '';
+      const parsedValue = 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.props.setValue(parsedValue.value);
         }
       });
     };
 
-    _this.state = {
+    this.state = {
       value: stringifyJSON(props.initialValue),
       isValidJson: true,
       undoStack: [],
       redoStack: [],
       lastUndo: ''
     };
-    return _this;
   }
 
-  var _proto = ConnectedJsonEditor.prototype;
-
-  _proto.render = function render() {
+  render() {
     return createElement("div", {
       "data-test-id": "json-editor"
     }, createElement(JsonEditorToolbar, {
@@ -322,10 +273,9 @@ var ConnectedJsonEditor = /*#__PURE__*/function (_React$Component) {
       onChange: this.onChange,
       isDisabled: this.props.disabled
     }), !this.state.isValidJson && createElement(JsonInvalidStatus, null));
-  };
+  }
 
-  return ConnectedJsonEditor;
-}(Component);
+}
 
 ConnectedJsonEditor.defaultProps = {
   isInitiallyDisabled: true
@@ -334,18 +284,19 @@ function JsonEditor(props) {
   return createElement(FieldConnector, {
     field: props.field,
     isInitiallyDisabled: props.isInitiallyDisabled,
-    isEqualValues: function isEqualValues(value1, value2) {
+    isEqualValues: (value1, value2) => {
       return deepEqual(value1, value2);
     }
-  }, function (_ref) {
-    var value = _ref.value,
-        disabled = _ref.disabled,
-        setValue = _ref.setValue,
-        externalReset = _ref.externalReset;
+  }, ({
+    value,
+    disabled,
+    setValue,
+    externalReset
+  }) => {
     return createElement(ConnectedJsonEditor // on external change reset component completely and init with initial value again
     , {
       // on external change reset component completely and init with initial value again
-      key: "json-editor-" + externalReset,
+      key: `json-editor-${externalReset}`,
       initialValue: value,
       disabled: disabled,
       setValue: setValue

package/dist/field-editor-json.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-editor-json.esm.js","sources":["../src/JsonEditorField.tsx","../src/JsonEditorToolbar.tsx","../src/JsonInvalidStatus.tsx","../src/utils.ts","../src/JsonEditor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { json } from '@codemirror/lang-json';\nimport { EditorView } from '@codemirror/view';\nimport tokens from '@contentful/f36-tokens';\nimport CodeMirror from '@uiw/react-codemirror';\nimport { css, cx } from 'emotion';\n\ntype JsonEditorFieldProps = {\n  isDisabled: boolean;\n  value: string;\n  onChange: (value: string) => void;\n};\n\nconst styles = {\n  root: css({\n    cursor: 'text',\n    padding: tokens.spacingS,\n    border: `1px solid ${tokens.gray200}`,\n    borderTop: 'none',\n    borderBottomLeftRadius: tokens.borderRadiusSmall,\n    borderBottomRightRadius: tokens.borderRadiusSmall,\n    fontSize: tokens.fontSizeM,\n    '.cm-editor': {\n      color: tokens.gray900,\n      '&.cm-focused': {\n        outline: 'none',\n      },\n    },\n    '.cm-scroller': {\n      fontFamily: tokens.fontStackMonospace,\n      minHeight: '6rem',\n    },\n    '&.disabled': {\n      cursor: 'auto',\n      '.cm-scroller ': {\n        minHeight: '6rem',\n        backgroundColor: tokens.gray100,\n        cursor: 'not-allowed',\n      },\n      '.cm-editor': {\n        border: `1px solid ${tokens.gray200}`,\n      },\n      '.cm-line': {\n        cursor: 'not-allowed',\n      },\n      '.cm-lines': {\n        cursor: 'not-allowed',\n      },\n    },\n  }),\n};\n\nexport function JsonEditorField(props: JsonEditorFieldProps) {\n  return (\n    <div\n      className={cx(styles.root, { disabled: props.isDisabled })}\n      data-test-id=\"json-editor-code-mirror\"\n    >\n      <CodeMirror\n        value={props.value}\n        onChange={props.onChange}\n        theme=\"light\"\n        extensions={[json(), EditorView.lineWrapping]}\n        basicSetup={{\n          closeBrackets: false,\n          lineNumbers: false,\n          highlightActiveLineGutter: false,\n          searchKeymap: false,\n          highlightActiveLine: false,\n          foldGutter: false,\n          bracketMatching: false,\n          syntaxHighlighting: false,\n        }}\n        width=\"100%\"\n        editable={!props.isDisabled}\n        indentWithTab={true}\n      />\n    </div>\n  );\n}\n","import React from 'react';\n\nimport { Button } from '@contentful/f36-components';\nimport tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nconst styles = {\n  toolbar: css({\n    display: 'flex',\n    alignItems: 'center',\n    padding: tokens.spacingXs,\n    justifyContent: 'space-between',\n    backgroundColor: tokens.gray100,\n    border: `1px solid ${tokens.gray200}`,\n    borderTopLeftRadius: tokens.borderRadiusSmall,\n    borderTopRightRadius: tokens.borderRadiusSmall,\n    borderBottom: 'none',\n  }),\n  title: css({\n    fontFamily: tokens.fontStackPrimary,\n    fontSize: tokens.fontSizeM,\n    color: tokens.gray600,\n  }),\n  actions: css({\n    button: {\n      marginLeft: tokens.spacingS,\n    },\n  }),\n};\n\ntype JsonEditorToolbarProps = {\n  isUndoDisabled: boolean;\n  isRedoDisabled: boolean;\n  onRedo: () => void;\n  onUndo: () => void;\n};\n\nexport function JsonEditorToolbar(props: JsonEditorToolbarProps) {\n  return (\n    <div className={styles.toolbar}>\n      <div className={styles.title}>JSON Editor</div>\n      <div className={styles.actions}>\n        <Button\n          variant=\"secondary\"\n          size=\"small\"\n          isDisabled={props.isUndoDisabled}\n          testId=\"json-editor-undo\"\n          onClick={() => {\n            props.onUndo();\n          }}>\n          Undo\n        </Button>\n        <Button\n          variant=\"secondary\"\n          size=\"small\"\n          isDisabled={props.isRedoDisabled}\n          testId=\"json-editor-redo\"\n          onClick={() => {\n            props.onRedo();\n          }}>\n          Redo\n        </Button>\n      </div>\n    </div>\n  );\n}\n","import React from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { ValidationMessage } from '@contentful/f36-components';\n\nexport function JsonInvalidStatus() {\n  return (\n    <div\n      role=\"status\"\n      data-test-id=\"json-editor.invalid-json\"\n      className={css({ marginTop: tokens.spacingS })}>\n      <ValidationMessage>This is not valid JSON</ValidationMessage>\n    </div>\n  );\n}\n","import { JSONObject } from './types';\n\nexport function stringifyJSON(obj: JSONObject | null | undefined): string {\n  if (obj === null || obj === undefined) {\n    return '';\n  } else {\n    return JSON.stringify(obj, null, 4);\n  }\n}\n\nexport function isValidJson(str: string) {\n  let parsed;\n  try {\n    parsed = JSON.parse(str);\n  } catch (e) {\n    return false;\n  }\n  // An object or array is valid JSON\n  if (typeof parsed !== 'object') {\n    return false;\n  }\n  return true;\n}\n\nexport function parseJSON(str: string): { valid: boolean; value?: JSONObject } {\n  if (str === '') {\n    return {\n      value: undefined,\n      valid: true,\n    };\n  } else if (isValidJson(str)) {\n    return {\n      value: JSON.parse(str),\n      valid: true,\n    };\n  } else {\n    return {\n      value: undefined,\n      valid: false,\n    };\n  }\n}\n","import * as React from 'react';\n\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport deepEqual from 'deep-equal';\nimport throttle from 'lodash/throttle';\n\nimport { JsonEditorField } from './JsonEditorField';\nimport { JsonEditorToolbar } from './JsonEditorToolbar';\nimport { JsonInvalidStatus } from './JsonInvalidStatus';\nimport { JSONObject } from './types';\nimport { stringifyJSON, parseJSON } from './utils';\n\nexport interface JsonEditorProps {\n  /**\n   * is the field disabled initially\n   */\n  isInitiallyDisabled: boolean;\n\n  /**\n   * sdk.field\n   */\n  field: FieldAPI;\n}\n\ntype NullableJsonObject = JSONObject | null | undefined;\n\ntype ConnectedJsonEditorProps = {\n  initialValue: NullableJsonObject;\n  setValue: (value: NullableJsonObject) => void;\n  disabled: boolean;\n};\n\ntype ConnectedJsonEditorState = {\n  value: string;\n  isValidJson: boolean;\n  undoStack: string[];\n  redoStack: string[];\n  lastUndo: string;\n};\n\nclass ConnectedJsonEditor extends React.Component<\n  ConnectedJsonEditorProps,\n  ConnectedJsonEditorState\n> {\n  static defaultProps = {\n    isInitiallyDisabled: true,\n  };\n\n  constructor(props: ConnectedJsonEditorProps) {\n    super(props);\n    this.state = {\n      value: stringifyJSON(props.initialValue),\n      isValidJson: true,\n      undoStack: [],\n      redoStack: [],\n      lastUndo: '',\n    };\n  }\n\n  setValidJson = (value: boolean) => {\n    this.setState({\n      isValidJson: value,\n    });\n  };\n\n  pushUndo = throttle((value: string) => {\n    this.setState((state) => ({\n      undoStack: [...state.undoStack, value],\n    }));\n  }, 400);\n\n  onChange = (value: string) => {\n    const parsed = parseJSON(value);\n\n    if (value !== this.state.lastUndo) {\n      this.pushUndo(this.state.value);\n    }\n\n    this.setState({\n      value,\n      isValidJson: parsed.valid,\n    });\n\n    if (parsed.valid) {\n      this.props.setValue(parsed.value);\n    }\n  };\n\n  onUndo = () => {\n    const undoStack = this.state.undoStack;\n\n    if (undoStack.length === 0) {\n      return;\n    }\n\n    const value = undoStack.pop() || '';\n\n    const parsedValue = parseJSON(value);\n\n    this.setState(\n      (state) => ({\n        ...state,\n        value,\n        isValidJson: parsedValue.valid,\n        undoStack,\n        redoStack: [...state.redoStack, state.value],\n        lastUndo: value,\n      }),\n      () => {\n        if (parsedValue.valid) {\n          this.props.setValue(parsedValue.value);\n        }\n      }\n    );\n  };\n\n  onRedo = () => {\n    const redoStack = [...this.state.redoStack];\n\n    if (redoStack.length === 0) {\n      return;\n    }\n\n    const value = redoStack.pop() || '';\n\n    const parsedValue = parseJSON(value);\n\n    this.setState(\n      (state) => ({\n        ...state,\n        value,\n        isValidJson: parsedValue.valid,\n        redoStack,\n        undoStack: [...state.undoStack, state.value],\n      }),\n      () => {\n        if (parsedValue.valid) {\n          this.props.setValue(parsedValue.value);\n        }\n      }\n    );\n  };\n\n  render() {\n    return (\n      <div data-test-id=\"json-editor\">\n        <JsonEditorToolbar\n          isRedoDisabled={this.props.disabled || this.state.redoStack.length === 0}\n          isUndoDisabled={this.props.disabled || this.state.undoStack.length === 0}\n          onUndo={this.onUndo}\n          onRedo={this.onRedo}\n        />\n        <JsonEditorField\n          value={this.state.value}\n          onChange={this.onChange}\n          isDisabled={this.props.disabled}\n        />\n        {!this.state.isValidJson && <JsonInvalidStatus />}\n      </div>\n    );\n  }\n}\n\nexport default function JsonEditor(props: JsonEditorProps) {\n  return (\n    <FieldConnector<JSONObject>\n      field={props.field}\n      isInitiallyDisabled={props.isInitiallyDisabled}\n      isEqualValues={(value1, value2) => {\n        return deepEqual(value1, value2);\n      }}>\n      {({ value, disabled, setValue, externalReset }) => {\n        return (\n          <ConnectedJsonEditor\n            // on external change reset component completely and init with initial value again\n            key={`json-editor-${externalReset}`}\n            initialValue={value}\n            disabled={disabled}\n            setValue={setValue}\n          />\n        );\n      }}\n    </FieldConnector>\n  );\n}\n"],"names":["styles","root","css","cursor","padding","tokens","spacingS","border","gray200","borderTop","borderBottomLeftRadius","borderRadiusSmall","borderBottomRightRadius","fontSize","fontSizeM","color","gray900","outline","fontFamily","fontStackMonospace","minHeight","backgroundColor","gray100","JsonEditorField","props","React","className","cx","disabled","isDisabled","CodeMirror","value","onChange","theme","extensions","json","EditorView","lineWrapping","basicSetup","closeBrackets","lineNumbers","highlightActiveLineGutter","searchKeymap","highlightActiveLine","foldGutter","bracketMatching","syntaxHighlighting","width","editable","indentWithTab","toolbar","display","alignItems","spacingXs","justifyContent","borderTopLeftRadius","borderTopRightRadius","borderBottom","title","fontStackPrimary","gray600","actions","button","marginLeft","JsonEditorToolbar","Button","variant","size","isUndoDisabled","testId","onClick","onUndo","isRedoDisabled","onRedo","JsonInvalidStatus","role","marginTop","ValidationMessage","stringifyJSON","obj","undefined","JSON","stringify","isValidJson","str","parsed","parse","e","parseJSON","valid","ConnectedJsonEditor","setValidJson","setState","pushUndo","throttle","state","undoStack","lastUndo","setValue","length","pop","parsedValue","redoStack","initialValue","render","defaultProps","isInitiallyDisabled","JsonEditor","FieldConnector","field","isEqualValues","value1","value2","deepEqual","externalReset","key"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IAAI,eAAEC,GAAG,CAAC;AACRC,IAAAA,MAAM,EAAE,MADA;AAERC,IAAAA,OAAO,EAAEC,MAAM,CAACC,QAFR;AAGRC,IAAAA,MAAM,iBAAeF,MAAM,CAACG,OAHpB;AAIRC,IAAAA,SAAS,EAAE,MAJH;AAKRC,IAAAA,sBAAsB,EAAEL,MAAM,CAACM,iBALvB;AAMRC,IAAAA,uBAAuB,EAAEP,MAAM,CAACM,iBANxB;AAORE,IAAAA,QAAQ,EAAER,MAAM,CAACS,SAPT;AAQR,kBAAc;AACZC,MAAAA,KAAK,EAAEV,MAAM,CAACW,OADF;AAEZ,sBAAgB;AACdC,QAAAA,OAAO,EAAE;AADK;AAFJ,KARN;AAcR,oBAAgB;AACdC,MAAAA,UAAU,EAAEb,MAAM,CAACc,kBADL;AAEdC,MAAAA,SAAS,EAAE;AAFG,KAdR;AAkBR,kBAAc;AACZjB,MAAAA,MAAM,EAAE,MADI;AAEZ,uBAAiB;AACfiB,QAAAA,SAAS,EAAE,MADI;AAEfC,QAAAA,eAAe,EAAEhB,MAAM,CAACiB,OAFT;AAGfnB,QAAAA,MAAM,EAAE;AAHO,OAFL;AAOZ,oBAAc;AACZI,QAAAA,MAAM,iBAAeF,MAAM,CAACG;AADhB,OAPF;AAUZ,kBAAY;AACVL,QAAAA,MAAM,EAAE;AADE,OAVA;AAaZ,mBAAa;AACXA,QAAAA,MAAM,EAAE;AADG;AAbD;AAlBN,GAAD;AADI,CAAf;SAuCgBoB,gBAAgBC;AAC9B,SACEC,4BAAA,MAAA;AACEC,IAAAA,SAAS,EAAEC,EAAE,CAAC3B,MAAM,CAACC,IAAR,EAAc;AAAE2B,MAAAA,QAAQ,EAAEJ,KAAK,CAACK;AAAlB,KAAd;oBACA;GAFf,EAIEJ,4BAAA,CAACK,UAAD;AACEC,IAAAA,KAAK,EAAEP,KAAK,CAACO;AACbC,IAAAA,QAAQ,EAAER,KAAK,CAACQ;AAChBC,IAAAA,KAAK,EAAC;AACNC,IAAAA,UAAU,EAAE,CAACC,IAAI,EAAL,EAASC,UAAU,CAACC,YAApB;AACZC,IAAAA,UAAU,EAAE;AACVC,MAAAA,aAAa,EAAE,KADL;AAEVC,MAAAA,WAAW,EAAE,KAFH;AAGVC,MAAAA,yBAAyB,EAAE,KAHjB;AAIVC,MAAAA,YAAY,EAAE,KAJJ;AAKVC,MAAAA,mBAAmB,EAAE,KALX;AAMVC,MAAAA,UAAU,EAAE,KANF;AAOVC,MAAAA,eAAe,EAAE,KAPP;AAQVC,MAAAA,kBAAkB,EAAE;AARV;AAUZC,IAAAA,KAAK,EAAC;AACNC,IAAAA,QAAQ,EAAE,CAACxB,KAAK,CAACK;AACjBoB,IAAAA,aAAa,EAAE;GAjBjB,CAJF,CADF;AA0BD;;AC1ED,IAAMjD,QAAM,GAAG;AACbkD,EAAAA,OAAO,eAAEhD,GAAG,CAAC;AACXiD,IAAAA,OAAO,EAAE,MADE;AAEXC,IAAAA,UAAU,EAAE,QAFD;AAGXhD,IAAAA,OAAO,EAAEC,MAAM,CAACgD,SAHL;AAIXC,IAAAA,cAAc,EAAE,eAJL;AAKXjC,IAAAA,eAAe,EAAEhB,MAAM,CAACiB,OALb;AAMXf,IAAAA,MAAM,iBAAeF,MAAM,CAACG,OANjB;AAOX+C,IAAAA,mBAAmB,EAAElD,MAAM,CAACM,iBAPjB;AAQX6C,IAAAA,oBAAoB,EAAEnD,MAAM,CAACM,iBARlB;AASX8C,IAAAA,YAAY,EAAE;AATH,GAAD,CADC;AAYbC,EAAAA,KAAK,eAAExD,GAAG,CAAC;AACTgB,IAAAA,UAAU,EAAEb,MAAM,CAACsD,gBADV;AAET9C,IAAAA,QAAQ,EAAER,MAAM,CAACS,SAFR;AAGTC,IAAAA,KAAK,EAAEV,MAAM,CAACuD;AAHL,GAAD,CAZG;AAiBbC,EAAAA,OAAO,eAAE3D,GAAG,CAAC;AACX4D,IAAAA,MAAM,EAAE;AACNC,MAAAA,UAAU,EAAE1D,MAAM,CAACC;AADb;AADG,GAAD;AAjBC,CAAf;AA+BA,SAAgB0D,kBAAkBxC;AAChC,SACEC,4BAAA,MAAA;AAAKC,IAAAA,SAAS,EAAE1B,QAAM,CAACkD;GAAvB,EACEzB,4BAAA,MAAA;AAAKC,IAAAA,SAAS,EAAE1B,QAAM,CAAC0D;GAAvB,eAAA,CADF,EAEEjC,4BAAA,MAAA;AAAKC,IAAAA,SAAS,EAAE1B,QAAM,CAAC6D;GAAvB,EACEpC,4BAAA,CAACwC,MAAD;AACEC,IAAAA,OAAO,EAAC;AACRC,IAAAA,IAAI,EAAC;AACLtC,IAAAA,UAAU,EAAEL,KAAK,CAAC4C;AAClBC,IAAAA,MAAM,EAAC;AACPC,IAAAA,OAAO,EAAE;AACP9C,MAAAA,KAAK,CAAC+C,MAAN;AACD;GAPH,QAAA,CADF,EAWE9C,4BAAA,CAACwC,MAAD;AACEC,IAAAA,OAAO,EAAC;AACRC,IAAAA,IAAI,EAAC;AACLtC,IAAAA,UAAU,EAAEL,KAAK,CAACgD;AAClBH,IAAAA,MAAM,EAAC;AACPC,IAAAA,OAAO,EAAE;AACP9C,MAAAA,KAAK,CAACiD,MAAN;AACD;GAPH,QAAA,CAXF,CAFF,CADF;AA2BD;;SC5DeC;AACd,SACEjD,4BAAA,MAAA;AACEkD,IAAAA,IAAI,EAAC;oBACQ;AACbjD,IAAAA,SAAS,EAAExB,GAAG,CAAC;AAAE0E,MAAAA,SAAS,EAAEvE,MAAM,CAACC;AAApB,KAAD;GAHhB,EAIEmB,4BAAA,CAACoD,iBAAD,MAAA,0BAAA,CAJF,CADF;AAQD;;SCZeC,cAAcC;AAC5B,MAAIA,GAAG,KAAK,IAAR,IAAgBA,GAAG,KAAKC,SAA5B,EAAuC;AACrC,WAAO,EAAP;AACD,GAFD,MAEO;AACL,WAAOC,IAAI,CAACC,SAAL,CAAeH,GAAf,EAAoB,IAApB,EAA0B,CAA1B,CAAP;AACD;AACF;AAED,SAAgBI,YAAYC;AAC1B,MAAIC,MAAJ;;AACA,MAAI;AACFA,IAAAA,MAAM,GAAGJ,IAAI,CAACK,KAAL,CAAWF,GAAX,CAAT;AACD,GAFD,CAEE,OAAOG,CAAP,EAAU;AACV,WAAO,KAAP;AACD;;;AAED,MAAI,OAAOF,MAAP,KAAkB,QAAtB,EAAgC;AAC9B,WAAO,KAAP;AACD;;AACD,SAAO,IAAP;AACD;AAED,SAAgBG,UAAUJ;AACxB,MAAIA,GAAG,KAAK,EAAZ,EAAgB;AACd,WAAO;AACLrD,MAAAA,KAAK,EAAEiD,SADF;AAELS,MAAAA,KAAK,EAAE;AAFF,KAAP;AAID,GALD,MAKO,IAAIN,WAAW,CAACC,GAAD,CAAf,EAAsB;AAC3B,WAAO;AACLrD,MAAAA,KAAK,EAAEkD,IAAI,CAACK,KAAL,CAAWF,GAAX,CADF;AAELK,MAAAA,KAAK,EAAE;AAFF,KAAP;AAID,GALM,MAKA;AACL,WAAO;AACL1D,MAAAA,KAAK,EAAEiD,SADF;AAELS,MAAAA,KAAK,EAAE;AAFF,KAAP;AAID;AACF;;ICDKC;;;AAQJ,+BAAYlE,KAAZ;;;AACE,wCAAMA,KAAN;;UAUFmE,eAAe,UAAC5D,KAAD;AACb,YAAK6D,QAAL,CAAc;AACZT,QAAAA,WAAW,EAAEpD;AADD,OAAd;AAGD;;UAED8D,WAAWC,QAAQ,CAAC,UAAC/D,KAAD;AAClB,YAAK6D,QAAL,CAAc,UAACG,KAAD;AAAA,eAAY;AACxBC,UAAAA,SAAS,YAAMD,KAAK,CAACC,SAAZ,GAAuBjE,KAAvB;AADe,SAAZ;AAAA,OAAd;AAGD,KAJkB,EAIhB,GAJgB;;UAMnBC,WAAW,UAACD,KAAD;AACT,UAAMsD,MAAM,GAAGG,SAAS,CAACzD,KAAD,CAAxB;;AAEA,UAAIA,KAAK,KAAK,MAAKgE,KAAL,CAAWE,QAAzB,EAAmC;AACjC,cAAKJ,QAAL,CAAc,MAAKE,KAAL,CAAWhE,KAAzB;AACD;;AAED,YAAK6D,QAAL,CAAc;AACZ7D,QAAAA,KAAK,EAALA,KADY;AAEZoD,QAAAA,WAAW,EAAEE,MAAM,CAACI;AAFR,OAAd;;AAKA,UAAIJ,MAAM,CAACI,KAAX,EAAkB;AAChB,cAAKjE,KAAL,CAAW0E,QAAX,CAAoBb,MAAM,CAACtD,KAA3B;AACD;AACF;;UAEDwC,SAAS;AACP,UAAMyB,SAAS,GAAG,MAAKD,KAAL,CAAWC,SAA7B;;AAEA,UAAIA,SAAS,CAACG,MAAV,KAAqB,CAAzB,EAA4B;AAC1B;AACD;;AAED,UAAMpE,KAAK,GAAGiE,SAAS,CAACI,GAAV,MAAmB,EAAjC;AAEA,UAAMC,WAAW,GAAGb,SAAS,CAACzD,KAAD,CAA7B;;AAEA,YAAK6D,QAAL,CACE,UAACG,KAAD;AAAA,4BACKA,KADL;AAEEhE,UAAAA,KAAK,EAALA,KAFF;AAGEoD,UAAAA,WAAW,EAAEkB,WAAW,CAACZ,KAH3B;AAIEO,UAAAA,SAAS,EAATA,SAJF;AAKEM,UAAAA,SAAS,YAAMP,KAAK,CAACO,SAAZ,GAAuBP,KAAK,CAAChE,KAA7B,EALX;AAMEkE,UAAAA,QAAQ,EAAElE;AANZ;AAAA,OADF,EASE;AACE,YAAIsE,WAAW,CAACZ,KAAhB,EAAuB;AACrB,gBAAKjE,KAAL,CAAW0E,QAAX,CAAoBG,WAAW,CAACtE,KAAhC;AACD;AACF,OAbH;AAeD;;UAED0C,SAAS;AACP,UAAM6B,SAAS,aAAO,MAAKP,KAAL,CAAWO,SAAlB,CAAf;;AAEA,UAAIA,SAAS,CAACH,MAAV,KAAqB,CAAzB,EAA4B;AAC1B;AACD;;AAED,UAAMpE,KAAK,GAAGuE,SAAS,CAACF,GAAV,MAAmB,EAAjC;AAEA,UAAMC,WAAW,GAAGb,SAAS,CAACzD,KAAD,CAA7B;;AAEA,YAAK6D,QAAL,CACE,UAACG,KAAD;AAAA,4BACKA,KADL;AAEEhE,UAAAA,KAAK,EAALA,KAFF;AAGEoD,UAAAA,WAAW,EAAEkB,WAAW,CAACZ,KAH3B;AAIEa,UAAAA,SAAS,EAATA,SAJF;AAKEN,UAAAA,SAAS,YAAMD,KAAK,CAACC,SAAZ,GAAuBD,KAAK,CAAChE,KAA7B;AALX;AAAA,OADF,EAQE;AACE,YAAIsE,WAAW,CAACZ,KAAhB,EAAuB;AACrB,gBAAKjE,KAAL,CAAW0E,QAAX,CAAoBG,WAAW,CAACtE,KAAhC;AACD;AACF,OAZH;AAcD;;AA3FC,UAAKgE,KAAL,GAAa;AACXhE,MAAAA,KAAK,EAAE+C,aAAa,CAACtD,KAAK,CAAC+E,YAAP,CADT;AAEXpB,MAAAA,WAAW,EAAE,IAFF;AAGXa,MAAAA,SAAS,EAAE,EAHA;AAIXM,MAAAA,SAAS,EAAE,EAJA;AAKXL,MAAAA,QAAQ,EAAE;AALC,KAAb;;AAOD;;;;SAsFDO,SAAA;AACE,WACE/E,aAAA,MAAA;sBAAkB;KAAlB,EACEA,aAAA,CAACuC,iBAAD;AACEQ,MAAAA,cAAc,EAAE,KAAKhD,KAAL,CAAWI,QAAX,IAAuB,KAAKmE,KAAL,CAAWO,SAAX,CAAqBH,MAArB,KAAgC;AACvE/B,MAAAA,cAAc,EAAE,KAAK5C,KAAL,CAAWI,QAAX,IAAuB,KAAKmE,KAAL,CAAWC,SAAX,CAAqBG,MAArB,KAAgC;AACvE5B,MAAAA,MAAM,EAAE,KAAKA;AACbE,MAAAA,MAAM,EAAE,KAAKA;KAJf,CADF,EAOEhD,aAAA,CAACF,eAAD;AACEQ,MAAAA,KAAK,EAAE,KAAKgE,KAAL,CAAWhE;AAClBC,MAAAA,QAAQ,EAAE,KAAKA;AACfH,MAAAA,UAAU,EAAE,KAAKL,KAAL,CAAWI;KAHzB,CAPF,EAYG,CAAC,KAAKmE,KAAL,CAAWZ,WAAZ,IAA2B1D,aAAA,CAACiD,iBAAD,MAAA,CAZ9B,CADF;AAgBD;;;EAxH+BjD;;AAA5BiE,oBAIGe,eAAe;AACpBC,EAAAA,mBAAmB,EAAE;AADD;AAuHxB,SAAwBC,WAAWnF;AACjC,SACEC,aAAA,CAACmF,cAAD;AACEC,IAAAA,KAAK,EAAErF,KAAK,CAACqF;AACbH,IAAAA,mBAAmB,EAAElF,KAAK,CAACkF;AAC3BI,IAAAA,aAAa,EAAE,uBAACC,MAAD,EAASC,MAAT;AACb,aAAOC,SAAS,CAACF,MAAD,EAASC,MAAT,CAAhB;AACD;GALH,EAMG;QAAGjF,aAAAA;QAAOH,gBAAAA;QAAUsE,gBAAAA;QAAUgB,qBAAAA;AAC7B,WACEzF,aAAA,CAACiE,mBAAD;AAAA;AACE;AACAyB,MAAAA,GAAG,mBAAiBD;AACpBX,MAAAA,YAAY,EAAExE;AACdH,MAAAA,QAAQ,EAAEA;AACVsE,MAAAA,QAAQ,EAAEA;KALZ,CADF;AASD,GAhBH,CADF;AAoBD;;;;"}
+{"version":3,"file":"field-editor-json.esm.js","sources":["../src/JsonEditorField.tsx","../src/JsonEditorToolbar.tsx","../src/JsonInvalidStatus.tsx","../src/utils.ts","../src/JsonEditor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { json } from '@codemirror/lang-json';\nimport { EditorView } from '@codemirror/view';\nimport tokens from '@contentful/f36-tokens';\nimport CodeMirror from '@uiw/react-codemirror';\nimport { css, cx } from 'emotion';\n\ntype JsonEditorFieldProps = {\n  isDisabled: boolean;\n  value: string;\n  onChange: (value: string) => void;\n};\n\nconst styles = {\n  root: css({\n    cursor: 'text',\n    padding: tokens.spacingS,\n    border: `1px solid ${tokens.gray200}`,\n    borderTop: 'none',\n    borderBottomLeftRadius: tokens.borderRadiusSmall,\n    borderBottomRightRadius: tokens.borderRadiusSmall,\n    fontSize: tokens.fontSizeM,\n    '.cm-editor': {\n      color: tokens.gray900,\n      '&.cm-focused': {\n        outline: 'none',\n      },\n    },\n    '.cm-scroller': {\n      fontFamily: tokens.fontStackMonospace,\n      minHeight: '6rem',\n    },\n    '&.disabled': {\n      cursor: 'auto',\n      '.cm-scroller ': {\n        minHeight: '6rem',\n        backgroundColor: tokens.gray100,\n        cursor: 'not-allowed',\n      },\n      '.cm-editor': {\n        border: `1px solid ${tokens.gray200}`,\n      },\n      '.cm-line': {\n        cursor: 'not-allowed',\n      },\n      '.cm-lines': {\n        cursor: 'not-allowed',\n      },\n    },\n  }),\n};\n\nexport function JsonEditorField(props: JsonEditorFieldProps) {\n  return (\n    <div\n      className={cx(styles.root, { disabled: props.isDisabled })}\n      data-test-id=\"json-editor-code-mirror\"\n    >\n      <CodeMirror\n        value={props.value}\n        onChange={props.onChange}\n        theme=\"light\"\n        extensions={[json(), EditorView.lineWrapping]}\n        basicSetup={{\n          closeBrackets: false,\n          lineNumbers: false,\n          highlightActiveLineGutter: false,\n          searchKeymap: false,\n          highlightActiveLine: false,\n          foldGutter: false,\n          bracketMatching: false,\n          syntaxHighlighting: false,\n        }}\n        width=\"100%\"\n        editable={!props.isDisabled}\n        indentWithTab={true}\n      />\n    </div>\n  );\n}\n","import React from 'react';\n\nimport { Button } from '@contentful/f36-components';\nimport tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nconst styles = {\n  toolbar: css({\n    display: 'flex',\n    alignItems: 'center',\n    padding: tokens.spacingXs,\n    justifyContent: 'space-between',\n    backgroundColor: tokens.gray100,\n    border: `1px solid ${tokens.gray200}`,\n    borderTopLeftRadius: tokens.borderRadiusSmall,\n    borderTopRightRadius: tokens.borderRadiusSmall,\n    borderBottom: 'none',\n  }),\n  title: css({\n    fontFamily: tokens.fontStackPrimary,\n    fontSize: tokens.fontSizeM,\n    color: tokens.gray600,\n  }),\n  actions: css({\n    button: {\n      marginLeft: tokens.spacingS,\n    },\n  }),\n};\n\ntype JsonEditorToolbarProps = {\n  isUndoDisabled: boolean;\n  isRedoDisabled: boolean;\n  onRedo: () => void;\n  onUndo: () => void;\n};\n\nexport function JsonEditorToolbar(props: JsonEditorToolbarProps) {\n  return (\n    <div className={styles.toolbar}>\n      <div className={styles.title}>JSON Editor</div>\n      <div className={styles.actions}>\n        <Button\n          variant=\"secondary\"\n          size=\"small\"\n          isDisabled={props.isUndoDisabled}\n          testId=\"json-editor-undo\"\n          onClick={() => {\n            props.onUndo();\n          }}>\n          Undo\n        </Button>\n        <Button\n          variant=\"secondary\"\n          size=\"small\"\n          isDisabled={props.isRedoDisabled}\n          testId=\"json-editor-redo\"\n          onClick={() => {\n            props.onRedo();\n          }}>\n          Redo\n        </Button>\n      </div>\n    </div>\n  );\n}\n","import React from 'react';\n\nimport { ValidationMessage } from '@contentful/f36-components';\nimport tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function JsonInvalidStatus() {\n  return (\n    <div\n      role=\"status\"\n      data-test-id=\"json-editor.invalid-json\"\n      className={css({ marginTop: tokens.spacingS })}>\n      <ValidationMessage>This is not valid JSON</ValidationMessage>\n    </div>\n  );\n}\n","import { JSONObject } from './types';\n\nexport function stringifyJSON(obj: JSONObject | null | undefined): string {\n  if (obj === null || obj === undefined) {\n    return '';\n  } else {\n    return JSON.stringify(obj, null, 4);\n  }\n}\n\nexport function isValidJson(str: string) {\n  let parsed;\n  try {\n    parsed = JSON.parse(str);\n  } catch (e) {\n    return false;\n  }\n  // An object or array is valid JSON\n  if (typeof parsed !== 'object') {\n    return false;\n  }\n  return true;\n}\n\nexport function parseJSON(str: string): { valid: boolean; value?: JSONObject } {\n  if (str === '') {\n    return {\n      value: undefined,\n      valid: true,\n    };\n  } else if (isValidJson(str)) {\n    return {\n      value: JSON.parse(str),\n      valid: true,\n    };\n  } else {\n    return {\n      value: undefined,\n      valid: false,\n    };\n  }\n}\n","import * as React from 'react';\n\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport deepEqual from 'deep-equal';\nimport throttle from 'lodash/throttle';\n\nimport { JsonEditorField } from './JsonEditorField';\nimport { JsonEditorToolbar } from './JsonEditorToolbar';\nimport { JsonInvalidStatus } from './JsonInvalidStatus';\nimport { JSONObject } from './types';\nimport { stringifyJSON, parseJSON } from './utils';\n\nexport interface JsonEditorProps {\n  /**\n   * is the field disabled initially\n   */\n  isInitiallyDisabled: boolean;\n\n  /**\n   * sdk.field\n   */\n  field: FieldAPI;\n}\n\ntype NullableJsonObject = JSONObject | null | undefined;\n\ntype ConnectedJsonEditorProps = {\n  initialValue: NullableJsonObject;\n  setValue: (value: NullableJsonObject) => void;\n  disabled: boolean;\n};\n\ntype ConnectedJsonEditorState = {\n  value: string;\n  isValidJson: boolean;\n  undoStack: string[];\n  redoStack: string[];\n  lastUndo: string;\n};\n\nclass ConnectedJsonEditor extends React.Component<\n  ConnectedJsonEditorProps,\n  ConnectedJsonEditorState\n> {\n  static defaultProps = {\n    isInitiallyDisabled: true,\n  };\n\n  constructor(props: ConnectedJsonEditorProps) {\n    super(props);\n    this.state = {\n      value: stringifyJSON(props.initialValue),\n      isValidJson: true,\n      undoStack: [],\n      redoStack: [],\n      lastUndo: '',\n    };\n  }\n\n  setValidJson = (value: boolean) => {\n    this.setState({\n      isValidJson: value,\n    });\n  };\n\n  pushUndo = throttle((value: string) => {\n    this.setState((state) => ({\n      undoStack: [...state.undoStack, value],\n    }));\n  }, 400);\n\n  onChange = (value: string) => {\n    const parsed = parseJSON(value);\n\n    if (value !== this.state.lastUndo) {\n      this.pushUndo(this.state.value);\n    }\n\n    this.setState({\n      value,\n      isValidJson: parsed.valid,\n    });\n\n    if (parsed.valid) {\n      this.props.setValue(parsed.value);\n    }\n  };\n\n  onUndo = () => {\n    const undoStack = this.state.undoStack;\n\n    if (undoStack.length === 0) {\n      return;\n    }\n\n    const value = undoStack.pop() || '';\n\n    const parsedValue = parseJSON(value);\n\n    this.setState(\n      (state) => ({\n        ...state,\n        value,\n        isValidJson: parsedValue.valid,\n        undoStack,\n        redoStack: [...state.redoStack, state.value],\n        lastUndo: value,\n      }),\n      () => {\n        if (parsedValue.valid) {\n          this.props.setValue(parsedValue.value);\n        }\n      }\n    );\n  };\n\n  onRedo = () => {\n    const redoStack = [...this.state.redoStack];\n\n    if (redoStack.length === 0) {\n      return;\n    }\n\n    const value = redoStack.pop() || '';\n\n    const parsedValue = parseJSON(value);\n\n    this.setState(\n      (state) => ({\n        ...state,\n        value,\n        isValidJson: parsedValue.valid,\n        redoStack,\n        undoStack: [...state.undoStack, state.value],\n      }),\n      () => {\n        if (parsedValue.valid) {\n          this.props.setValue(parsedValue.value);\n        }\n      }\n    );\n  };\n\n  render() {\n    return (\n      <div data-test-id=\"json-editor\">\n        <JsonEditorToolbar\n          isRedoDisabled={this.props.disabled || this.state.redoStack.length === 0}\n          isUndoDisabled={this.props.disabled || this.state.undoStack.length === 0}\n          onUndo={this.onUndo}\n          onRedo={this.onRedo}\n        />\n        <JsonEditorField\n          value={this.state.value}\n          onChange={this.onChange}\n          isDisabled={this.props.disabled}\n        />\n        {!this.state.isValidJson && <JsonInvalidStatus />}\n      </div>\n    );\n  }\n}\n\nexport default function JsonEditor(props: JsonEditorProps) {\n  return (\n    <FieldConnector<JSONObject>\n      field={props.field}\n      isInitiallyDisabled={props.isInitiallyDisabled}\n      isEqualValues={(value1, value2) => {\n        return deepEqual(value1, value2);\n      }}>\n      {({ value, disabled, setValue, externalReset }) => {\n        return (\n          <ConnectedJsonEditor\n            // on external change reset component completely and init with initial value again\n            key={`json-editor-${externalReset}`}\n            initialValue={value}\n            disabled={disabled}\n            setValue={setValue}\n          />\n        );\n      }}\n    </FieldConnector>\n  );\n}\n"],"names":["styles","root","css","cursor","padding","tokens","spacingS","border","gray200","borderTop","borderBottomLeftRadius","borderRadiusSmall","borderBottomRightRadius","fontSize","fontSizeM","color","gray900","outline","fontFamily","fontStackMonospace","minHeight","backgroundColor","gray100","JsonEditorField","props","React","className","cx","disabled","isDisabled","CodeMirror","value","onChange","theme","extensions","json","EditorView","lineWrapping","basicSetup","closeBrackets","lineNumbers","highlightActiveLineGutter","searchKeymap","highlightActiveLine","foldGutter","bracketMatching","syntaxHighlighting","width","editable","indentWithTab","toolbar","display","alignItems","spacingXs","justifyContent","borderTopLeftRadius","borderTopRightRadius","borderBottom","title","fontStackPrimary","gray600","actions","button","marginLeft","JsonEditorToolbar","Button","variant","size","isUndoDisabled","testId","onClick","onUndo","isRedoDisabled","onRedo","JsonInvalidStatus","role","marginTop","ValidationMessage","stringifyJSON","obj","undefined","JSON","stringify","isValidJson","str","parsed","parse","e","parseJSON","valid","ConnectedJsonEditor","constructor","setValidJson","setState","pushUndo","throttle","state","undoStack","lastUndo","setValue","length","pop","parsedValue","redoStack","initialValue","render","defaultProps","isInitiallyDisabled","JsonEditor","FieldConnector","field","isEqualValues","value1","value2","deepEqual","externalReset","key"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-json",
-  "version": "3.1.7",
+  "version": "3.2.0",
   "main": "dist/index.js",
   "module": "dist/field-editor-json.esm.js",
   "typings": "dist/index.d.ts",
@@ -22,7 +22,7 @@
     "@codemirror/lang-json": "^6.0.0",
     "@contentful/f36-components": "^4.0.27",
     "@contentful/f36-tokens": "^4.0.0",
-    "@contentful/field-editor-shared": "^1.1.8",
+    "@contentful/field-editor-shared": "^1.2.0",
     "@types/deep-equal": "1.0.1",
     "@types/react-codemirror": "1.0.3",
     "@uiw/react-codemirror": "^4.11.4",
@@ -32,10 +32,10 @@
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@contentful/field-editor-test-utils": "^1.2.7"
+    "@contentful/field-editor-test-utils": "^1.3.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
-  "gitHead": "4fff7b9534374dcc44cb477240d369fc34f46415"
+  "gitHead": "de7e74e3485dd69c240cfe9c545e6e50e41fb295"
 }