@contentful/field-editor-json 0.11.7 → 0.12.3

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.12.3](https://github.com/contentful/field-editors/compare/@contentful/field-editor-json@0.12.2...@contentful/field-editor-json@0.12.3) (2021-09-16)
+
+**Note:** Version bump only for package @contentful/field-editor-json
+
+
+
+
+
+## [0.12.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-json@0.12.1...@contentful/field-editor-json@0.12.2) (2021-08-19)
+
+**Note:** Version bump only for package @contentful/field-editor-json
+
+
+
+
+
+## [0.12.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-json@0.12.0...@contentful/field-editor-json@0.12.1) (2021-07-29)
+
+**Note:** Version bump only for package @contentful/field-editor-json
+
+
+
+
+
+# [0.12.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-json@0.11.7...@contentful/field-editor-json@0.12.0) (2021-07-23)
+
+
+### Features
+
+* 💡 new color tokens ([#778](https://github.com/contentful/field-editors/issues/778)) ([fba548d](https://github.com/contentful/field-editors/commit/fba548de32305016df7f2685634eefb14294828f))
+
+
+
+
+
 ## [0.11.7](https://github.com/contentful/field-editors/compare/@contentful/field-editor-json@0.11.4...@contentful/field-editor-json@0.11.7) (2021-07-06)
 
 **Note:** Version bump only for package @contentful/field-editor-json

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

@@ -38,7 +38,17 @@ function _extends() {
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
+
+  _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 = {
@@ -47,8 +57,8 @@ var styles = {
     alignItems: 'center',
     padding: tokens.spacingXs,
     justifyContent: 'space-between',
-    backgroundColor: tokens.colorElementLightest,
-    border: "1px solid " + tokens.colorElementLight,
+    backgroundColor: tokens.gray100,
+    border: "1px solid " + tokens.gray200,
     borderTopLeftRadius: tokens.borderRadiusSmall,
     borderTopRightRadius: tokens.borderRadiusSmall,
     borderBottom: 'none'
@@ -56,7 +66,7 @@ var styles = {
   title: /*#__PURE__*/emotion.css({
     fontFamily: tokens.fontStackPrimary,
     fontSize: tokens.fontSizeM,
-    color: tokens.colorTextLight
+    color: tokens.gray600
   }),
   actions: /*#__PURE__*/emotion.css({
     button: {
@@ -118,14 +128,14 @@ var styles$1 = {
   root: /*#__PURE__*/emotion.css({
     cursor: 'text',
     padding: tokens.spacingS,
-    border: "1px solid " + tokens.colorElementLight,
+    border: "1px solid " + tokens.gray200,
     borderTop: 'none',
     borderBottomLeftRadius: tokens.borderRadiusSmall,
     borderBottomRightRadius: tokens.borderRadiusSmall,
     fontSize: tokens.fontSizeM,
     '.CodeMirror': {
       height: 'auto',
-      color: tokens.colorTextDark,
+      color: tokens.gray900,
       fontFamily: tokens.fontStackMonospace
     },
     '.CodeMirror-scroll': {

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

@@ -1 +1 @@
-{"version":3,"file":"field-editor-json.cjs.development.js","sources":["../src/JsonEditorToobar.tsx","../src/JsonInvalidStatus.tsx","../src/JsonEditoField.tsx","../src/utils.ts","../src/JsonEditor.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/forma-36-tokens';\nimport { Button } from '@contentful/forma-36-react-components';\n\nconst styles = {\n  toolbar: css({\n    display: 'flex',\n    alignItems: 'center',\n    padding: tokens.spacingXs,\n    justifyContent: 'space-between',\n    backgroundColor: tokens.colorElementLightest,\n    border: `1px solid ${tokens.colorElementLight}`,\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.colorTextLight,\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          buttonType=\"muted\"\n          size=\"small\"\n          disabled={props.isUndoDisabled}\n          testId=\"json-editor-undo\"\n          onClick={() => {\n            props.onUndo();\n          }}>\n          Undo\n        </Button>\n        <Button\n          buttonType=\"muted\"\n          size=\"small\"\n          disabled={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/forma-36-tokens';\nimport { ValidationMessage } from '@contentful/forma-36-react-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 React from 'react';\nimport tokens from '@contentful/forma-36-tokens';\nimport { css } from 'emotion';\nimport { Controlled as CodeMirror } from 'react-codemirror2';\n\nconst CODE_MIRROR_CONFIG = {\n  autoCloseBrackets: true,\n  mode: { name: 'javascript', json: true },\n  lineWrapping: true,\n  viewportMargin: Infinity,\n  indentUnit: 4,\n  indentWithTabs: true,\n  height: 'auto',\n  theme: 'none',\n  autoRefresh: true\n};\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.colorElementLight}`,\n    borderTop: 'none',\n    borderBottomLeftRadius: tokens.borderRadiusSmall,\n    borderBottomRightRadius: tokens.borderRadiusSmall,\n    fontSize: tokens.fontSizeM,\n    '.CodeMirror': {\n      height: 'auto',\n      color: tokens.colorTextDark,\n      fontFamily: tokens.fontStackMonospace,\n    },\n    '.CodeMirror-scroll': {\n      minHeight: '6rem',\n    },\n  }),\n};\n\nexport function JsonEditorField(props: JsonEditorFieldProps) {\n  return (\n    <div className={styles.root} data-test-id=\"json-editor-code-mirror\">\n      <CodeMirror\n        value={props.value}\n        onBeforeChange={(_editor, _data, value) => {\n          props.onChange(value);\n        }}\n        options={{\n          ...CODE_MIRROR_CONFIG,\n          readOnly: props.isDisabled,\n        }}\n      />\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';\nimport deepEqual from 'deep-equal';\nimport throttle from 'lodash/throttle';\n\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport { JsonEditorToolbar } from './JsonEditorToobar';\nimport { JsonInvalidStatus } from './JsonInvalidStatus';\nimport { JsonEditorField } from './JsonEditoField';\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};\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    };\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    this.pushUndo(this.state.value);\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      }),\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","toolbar","css","display","alignItems","padding","tokens","spacingXs","justifyContent","backgroundColor","colorElementLightest","border","colorElementLight","borderTopLeftRadius","borderRadiusSmall","borderTopRightRadius","borderBottom","title","fontFamily","fontStackPrimary","fontSize","fontSizeM","color","colorTextLight","actions","button","marginLeft","spacingS","JsonEditorToolbar","props","React","className","Button","buttonType","size","disabled","isUndoDisabled","testId","onClick","onUndo","isRedoDisabled","onRedo","JsonInvalidStatus","role","marginTop","ValidationMessage","CODE_MIRROR_CONFIG","autoCloseBrackets","mode","name","json","lineWrapping","viewportMargin","Infinity","indentUnit","indentWithTabs","height","theme","autoRefresh","root","cursor","borderTop","borderBottomLeftRadius","borderBottomRightRadius","colorTextDark","fontStackMonospace","minHeight","JsonEditorField","CodeMirror","value","onBeforeChange","_editor","_data","onChange","options","readOnly","isDisabled","stringifyJSON","obj","undefined","JSON","stringify","isValidJson","str","parsed","parse","e","parseJSON","valid","ConnectedJsonEditor","setState","throttle","state","undoStack","pushUndo","setValue","length","pop","parsedValue","redoStack","initialValue","render","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/JsonEditorToobar.tsx","../src/JsonInvalidStatus.tsx","../src/JsonEditoField.tsx","../src/utils.ts","../src/JsonEditor.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/forma-36-tokens';\nimport { Button } from '@contentful/forma-36-react-components';\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          buttonType=\"muted\"\n          size=\"small\"\n          disabled={props.isUndoDisabled}\n          testId=\"json-editor-undo\"\n          onClick={() => {\n            props.onUndo();\n          }}>\n          Undo\n        </Button>\n        <Button\n          buttonType=\"muted\"\n          size=\"small\"\n          disabled={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/forma-36-tokens';\nimport { ValidationMessage } from '@contentful/forma-36-react-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 React from 'react';\nimport tokens from '@contentful/forma-36-tokens';\nimport { css } from 'emotion';\nimport { Controlled as CodeMirror } from 'react-codemirror2';\n\nconst CODE_MIRROR_CONFIG = {\n  autoCloseBrackets: true,\n  mode: { name: 'javascript', json: true },\n  lineWrapping: true,\n  viewportMargin: Infinity,\n  indentUnit: 4,\n  indentWithTabs: true,\n  height: 'auto',\n  theme: 'none',\n  autoRefresh: true\n};\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    '.CodeMirror': {\n      height: 'auto',\n      color: tokens.gray900,\n      fontFamily: tokens.fontStackMonospace,\n    },\n    '.CodeMirror-scroll': {\n      minHeight: '6rem',\n    },\n  }),\n};\n\nexport function JsonEditorField(props: JsonEditorFieldProps) {\n  return (\n    <div className={styles.root} data-test-id=\"json-editor-code-mirror\">\n      <CodeMirror\n        value={props.value}\n        onBeforeChange={(_editor, _data, value) => {\n          props.onChange(value);\n        }}\n        options={{\n          ...CODE_MIRROR_CONFIG,\n          readOnly: props.isDisabled,\n        }}\n      />\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';\nimport deepEqual from 'deep-equal';\nimport throttle from 'lodash/throttle';\n\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport { JsonEditorToolbar } from './JsonEditorToobar';\nimport { JsonInvalidStatus } from './JsonInvalidStatus';\nimport { JsonEditorField } from './JsonEditoField';\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};\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    };\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    this.pushUndo(this.state.value);\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      }),\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","toolbar","css","display","alignItems","padding","tokens","spacingXs","justifyContent","backgroundColor","gray100","border","gray200","borderTopLeftRadius","borderRadiusSmall","borderTopRightRadius","borderBottom","title","fontFamily","fontStackPrimary","fontSize","fontSizeM","color","gray600","actions","button","marginLeft","spacingS","JsonEditorToolbar","props","React","className","Button","buttonType","size","disabled","isUndoDisabled","testId","onClick","onUndo","isRedoDisabled","onRedo","JsonInvalidStatus","role","marginTop","ValidationMessage","CODE_MIRROR_CONFIG","autoCloseBrackets","mode","name","json","lineWrapping","viewportMargin","Infinity","indentUnit","indentWithTabs","height","theme","autoRefresh","root","cursor","borderTop","borderBottomLeftRadius","borderBottomRightRadius","gray900","fontStackMonospace","minHeight","JsonEditorField","CodeMirror","value","onBeforeChange","_editor","_data","onChange","options","readOnly","isDisabled","stringifyJSON","obj","undefined","JSON","stringify","isValidJson","str","parsed","parse","e","parseJSON","valid","ConnectedJsonEditor","setState","throttle","state","undoStack","pushUndo","setValue","length","pop","parsedValue","redoStack","initialValue","render","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}),require("codemirror/addon/edit/closebrackets"),require("codemirror/mode/javascript/javascript"),require("codemirror/addon/display/autorefresh");var t=require("react"),o=e(t),n=e(require("deep-equal")),a=e(require("lodash/throttle")),r=require("@contentful/field-editor-shared"),i=require("emotion"),s=e(require("@contentful/forma-36-tokens")),l=require("@contentful/forma-36-react-components"),d=require("react-codemirror2");function u(){return(u=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)}var c={toolbar:i.css({display:"flex",alignItems:"center",padding:s.spacingXs,justifyContent:"space-between",backgroundColor:s.colorElementLightest,border:"1px solid "+s.colorElementLight,borderTopLeftRadius:s.borderRadiusSmall,borderTopRightRadius:s.borderRadiusSmall,borderBottom:"none"}),title:i.css({fontFamily:s.fontStackPrimary,fontSize:s.fontSizeM,color:s.colorTextLight}),actions:i.css({button:{marginLeft:s.spacingS}})};function p(e){return o.createElement("div",{className:c.toolbar},o.createElement("div",{className:c.title},"JSON Editor"),o.createElement("div",{className:c.actions},o.createElement(l.Button,{buttonType:"muted",size:"small",disabled:e.isUndoDisabled,testId:"json-editor-undo",onClick:function(){e.onUndo()}},"Undo"),o.createElement(l.Button,{buttonType:"muted",size:"small",disabled:e.isRedoDisabled,testId:"json-editor-redo",onClick:function(){e.onRedo()}},"Redo")))}function f(){return o.createElement("div",{role:"status","data-test-id":"json-editor.invalid-json",className:i.css({marginTop:s.spacingS})},o.createElement(l.ValidationMessage,null,"This is not valid JSON"))}var v={autoCloseBrackets:!0,mode:{name:"javascript",json:!0},lineWrapping:!0,viewportMargin:Infinity,indentUnit:4,indentWithTabs:!0,height:"auto",theme:"none",autoRefresh:!0},m={root:i.css({cursor:"text",padding:s.spacingS,border:"1px solid "+s.colorElementLight,borderTop:"none",borderBottomLeftRadius:s.borderRadiusSmall,borderBottomRightRadius:s.borderRadiusSmall,fontSize:s.fontSizeM,".CodeMirror":{height:"auto",color:s.colorTextDark,fontFamily:s.fontStackMonospace},".CodeMirror-scroll":{minHeight:"6rem"}})};function h(e){return o.createElement("div",{className:m.root,"data-test-id":"json-editor-code-mirror"},o.createElement(d.Controlled,{value:e.value,onBeforeChange:function(t,o,n){e.onChange(n)},options:u({},v,{readOnly:e.isDisabled})}))}function b(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 S=function(e){var o,n;function r(t){var o,n;return(o=e.call(this,t)||this).setValidJson=function(e){o.setState({isValidJson:e})},o.pushUndo=a((function(e){o.setState((function(t){return{undoStack:[].concat(t.undoStack,[e])}}))}),400),o.onChange=function(e){var t=b(e);o.pushUndo(o.state.value),o.setState({value:e,isValidJson:t.valid}),t.valid&&o.props.setValue(t.value)},o.onUndo=function(){var e=[].concat(o.state.undoStack);if(0!==e.length){var t=e.pop()||"",n=b(t);o.setState((function(o){return u({},o,{value:t,isValidJson:n.valid,undoStack:e,redoStack:[].concat(o.redoStack,[o.value])})}),(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=b(t);o.setState((function(o){return u({},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:[]},o}return n=e,(o=r).prototype=Object.create(n.prototype),o.prototype.constructor=o,o.__proto__=n,r.prototype.render=function(){return t.createElement("div",{"data-test-id":"json-editor"},t.createElement(p,{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(h,{value:this.state.value,onChange:this.onChange,isDisabled:this.props.disabled}),!this.state.isValidJson&&t.createElement(f,null))},r}(t.Component);S.defaultProps={isInitiallyDisabled:!0},exports.JsonEditor=function(e){return t.createElement(r.FieldConnector,{field:e.field,isInitiallyDisabled:e.isInitiallyDisabled,isEqualValues:function(e,t){return n(e,t)}},(function(e){return t.createElement(S,{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}),require("codemirror/addon/edit/closebrackets"),require("codemirror/mode/javascript/javascript"),require("codemirror/addon/display/autorefresh");var t=require("react"),o=e(t),n=e(require("deep-equal")),a=e(require("lodash/throttle")),r=require("@contentful/field-editor-shared"),i=require("emotion"),s=e(require("@contentful/forma-36-tokens")),l=require("@contentful/forma-36-react-components"),d=require("react-codemirror2");function u(){return(u=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 c(e,t){return(c=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var p={toolbar:i.css({display:"flex",alignItems:"center",padding:s.spacingXs,justifyContent:"space-between",backgroundColor:s.gray100,border:"1px solid "+s.gray200,borderTopLeftRadius:s.borderRadiusSmall,borderTopRightRadius:s.borderRadiusSmall,borderBottom:"none"}),title:i.css({fontFamily:s.fontStackPrimary,fontSize:s.fontSizeM,color:s.gray600}),actions:i.css({button:{marginLeft:s.spacingS}})};function f(e){return o.createElement("div",{className:p.toolbar},o.createElement("div",{className:p.title},"JSON Editor"),o.createElement("div",{className:p.actions},o.createElement(l.Button,{buttonType:"muted",size:"small",disabled:e.isUndoDisabled,testId:"json-editor-undo",onClick:function(){e.onUndo()}},"Undo"),o.createElement(l.Button,{buttonType:"muted",size:"small",disabled:e.isRedoDisabled,testId:"json-editor-redo",onClick:function(){e.onRedo()}},"Redo")))}function v(){return o.createElement("div",{role:"status","data-test-id":"json-editor.invalid-json",className:i.css({marginTop:s.spacingS})},o.createElement(l.ValidationMessage,null,"This is not valid JSON"))}var m={autoCloseBrackets:!0,mode:{name:"javascript",json:!0},lineWrapping:!0,viewportMargin:Infinity,indentUnit:4,indentWithTabs:!0,height:"auto",theme:"none",autoRefresh:!0},b={root:i.css({cursor:"text",padding:s.spacingS,border:"1px solid "+s.gray200,borderTop:"none",borderBottomLeftRadius:s.borderRadiusSmall,borderBottomRightRadius:s.borderRadiusSmall,fontSize:s.fontSizeM,".CodeMirror":{height:"auto",color:s.gray900,fontFamily:s.fontStackMonospace},".CodeMirror-scroll":{minHeight:"6rem"}})};function h(e){return o.createElement("div",{className:b.root,"data-test-id":"json-editor-code-mirror"},o.createElement(d.Controlled,{value:e.value,onBeforeChange:function(t,o,n){e.onChange(n)},options:u({},m,{readOnly:e.isDisabled})}))}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 g=function(e){var o,n;function r(t){var o,n;return(o=e.call(this,t)||this).setValidJson=function(e){o.setState({isValidJson:e})},o.pushUndo=a((function(e){o.setState((function(t){return{undoStack:[].concat(t.undoStack,[e])}}))}),400),o.onChange=function(e){var t=S(e);o.pushUndo(o.state.value),o.setState({value:e,isValidJson:t.valid}),t.valid&&o.props.setValue(t.value)},o.onUndo=function(){var e=[].concat(o.state.undoStack);if(0!==e.length){var t=e.pop()||"",n=S(t);o.setState((function(o){return u({},o,{value:t,isValidJson:n.valid,undoStack:e,redoStack:[].concat(o.redoStack,[o.value])})}),(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 u({},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:[]},o}return n=e,(o=r).prototype=Object.create(n.prototype),o.prototype.constructor=o,c(o,n),r.prototype.render=function(){return t.createElement("div",{"data-test-id":"json-editor"},t.createElement(f,{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(h,{value:this.state.value,onChange:this.onChange,isDisabled:this.props.disabled}),!this.state.isValidJson&&t.createElement(v,null))},r}(t.Component);g.defaultProps={isInitiallyDisabled:!0},exports.JsonEditor=function(e){return t.createElement(r.FieldConnector,{field:e.field,isInitiallyDisabled:e.isInitiallyDisabled,isEqualValues:function(e,t){return n(e,t)}},(function(e){return t.createElement(g,{key:"json-editor-"+e.externalReset,initialValue:e.value,disabled:e.disabled,setValue:e.setValue})}))};
 //# 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/JsonEditorToobar.tsx","../src/JsonInvalidStatus.tsx","../src/JsonEditoField.tsx","../src/utils.ts","../src/JsonEditor.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/forma-36-tokens';\nimport { Button } from '@contentful/forma-36-react-components';\n\nconst styles = {\n  toolbar: css({\n    display: 'flex',\n    alignItems: 'center',\n    padding: tokens.spacingXs,\n    justifyContent: 'space-between',\n    backgroundColor: tokens.colorElementLightest,\n    border: `1px solid ${tokens.colorElementLight}`,\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.colorTextLight,\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          buttonType=\"muted\"\n          size=\"small\"\n          disabled={props.isUndoDisabled}\n          testId=\"json-editor-undo\"\n          onClick={() => {\n            props.onUndo();\n          }}>\n          Undo\n        </Button>\n        <Button\n          buttonType=\"muted\"\n          size=\"small\"\n          disabled={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/forma-36-tokens';\nimport { ValidationMessage } from '@contentful/forma-36-react-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 React from 'react';\nimport tokens from '@contentful/forma-36-tokens';\nimport { css } from 'emotion';\nimport { Controlled as CodeMirror } from 'react-codemirror2';\n\nconst CODE_MIRROR_CONFIG = {\n  autoCloseBrackets: true,\n  mode: { name: 'javascript', json: true },\n  lineWrapping: true,\n  viewportMargin: Infinity,\n  indentUnit: 4,\n  indentWithTabs: true,\n  height: 'auto',\n  theme: 'none',\n  autoRefresh: true\n};\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.colorElementLight}`,\n    borderTop: 'none',\n    borderBottomLeftRadius: tokens.borderRadiusSmall,\n    borderBottomRightRadius: tokens.borderRadiusSmall,\n    fontSize: tokens.fontSizeM,\n    '.CodeMirror': {\n      height: 'auto',\n      color: tokens.colorTextDark,\n      fontFamily: tokens.fontStackMonospace,\n    },\n    '.CodeMirror-scroll': {\n      minHeight: '6rem',\n    },\n  }),\n};\n\nexport function JsonEditorField(props: JsonEditorFieldProps) {\n  return (\n    <div className={styles.root} data-test-id=\"json-editor-code-mirror\">\n      <CodeMirror\n        value={props.value}\n        onBeforeChange={(_editor, _data, value) => {\n          props.onChange(value);\n        }}\n        options={{\n          ...CODE_MIRROR_CONFIG,\n          readOnly: props.isDisabled,\n        }}\n      />\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';\nimport deepEqual from 'deep-equal';\nimport throttle from 'lodash/throttle';\n\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport { JsonEditorToolbar } from './JsonEditorToobar';\nimport { JsonInvalidStatus } from './JsonInvalidStatus';\nimport { JsonEditorField } from './JsonEditoField';\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};\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    };\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    this.pushUndo(this.state.value);\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      }),\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","toolbar","css","display","alignItems","padding","tokens","spacingXs","justifyContent","backgroundColor","colorElementLightest","border","colorElementLight","borderTopLeftRadius","borderRadiusSmall","borderTopRightRadius","borderBottom","title","fontFamily","fontStackPrimary","fontSize","fontSizeM","color","colorTextLight","actions","button","marginLeft","spacingS","JsonEditorToolbar","props","React","className","Button","buttonType","size","disabled","isUndoDisabled","testId","onClick","onUndo","isRedoDisabled","onRedo","JsonInvalidStatus","role","marginTop","ValidationMessage","CODE_MIRROR_CONFIG","autoCloseBrackets","mode","name","json","lineWrapping","viewportMargin","Infinity","indentUnit","indentWithTabs","height","theme","autoRefresh","root","cursor","borderTop","borderBottomLeftRadius","borderBottomRightRadius","colorTextDark","fontStackMonospace","minHeight","JsonEditorField","CodeMirror","value","onBeforeChange","_editor","_data","onChange","options","readOnly","isDisabled","parseJSON","str","undefined","valid","parsed","JSON","parse","e","isValidJson","ConnectedJsonEditor","obj","setState","throttle","state","undoStack","pushUndo","_this","setValue","length","pop","parsedValue","redoStack","initialValue","stringify","render","this","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/JsonEditorToobar.tsx","../src/JsonInvalidStatus.tsx","../src/JsonEditoField.tsx","../src/utils.ts","../src/JsonEditor.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/forma-36-tokens';\nimport { Button } from '@contentful/forma-36-react-components';\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          buttonType=\"muted\"\n          size=\"small\"\n          disabled={props.isUndoDisabled}\n          testId=\"json-editor-undo\"\n          onClick={() => {\n            props.onUndo();\n          }}>\n          Undo\n        </Button>\n        <Button\n          buttonType=\"muted\"\n          size=\"small\"\n          disabled={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/forma-36-tokens';\nimport { ValidationMessage } from '@contentful/forma-36-react-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 React from 'react';\nimport tokens from '@contentful/forma-36-tokens';\nimport { css } from 'emotion';\nimport { Controlled as CodeMirror } from 'react-codemirror2';\n\nconst CODE_MIRROR_CONFIG = {\n  autoCloseBrackets: true,\n  mode: { name: 'javascript', json: true },\n  lineWrapping: true,\n  viewportMargin: Infinity,\n  indentUnit: 4,\n  indentWithTabs: true,\n  height: 'auto',\n  theme: 'none',\n  autoRefresh: true\n};\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    '.CodeMirror': {\n      height: 'auto',\n      color: tokens.gray900,\n      fontFamily: tokens.fontStackMonospace,\n    },\n    '.CodeMirror-scroll': {\n      minHeight: '6rem',\n    },\n  }),\n};\n\nexport function JsonEditorField(props: JsonEditorFieldProps) {\n  return (\n    <div className={styles.root} data-test-id=\"json-editor-code-mirror\">\n      <CodeMirror\n        value={props.value}\n        onBeforeChange={(_editor, _data, value) => {\n          props.onChange(value);\n        }}\n        options={{\n          ...CODE_MIRROR_CONFIG,\n          readOnly: props.isDisabled,\n        }}\n      />\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';\nimport deepEqual from 'deep-equal';\nimport throttle from 'lodash/throttle';\n\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport { JsonEditorToolbar } from './JsonEditorToobar';\nimport { JsonInvalidStatus } from './JsonInvalidStatus';\nimport { JsonEditorField } from './JsonEditoField';\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};\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    };\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    this.pushUndo(this.state.value);\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      }),\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","toolbar","css","display","alignItems","padding","tokens","spacingXs","justifyContent","backgroundColor","gray100","border","gray200","borderTopLeftRadius","borderRadiusSmall","borderTopRightRadius","borderBottom","title","fontFamily","fontStackPrimary","fontSize","fontSizeM","color","gray600","actions","button","marginLeft","spacingS","JsonEditorToolbar","props","React","className","Button","buttonType","size","disabled","isUndoDisabled","testId","onClick","onUndo","isRedoDisabled","onRedo","JsonInvalidStatus","role","marginTop","ValidationMessage","CODE_MIRROR_CONFIG","autoCloseBrackets","mode","name","json","lineWrapping","viewportMargin","Infinity","indentUnit","indentWithTabs","height","theme","autoRefresh","root","cursor","borderTop","borderBottomLeftRadius","borderBottomRightRadius","gray900","fontStackMonospace","minHeight","JsonEditorField","CodeMirror","value","onBeforeChange","_editor","_data","onChange","options","readOnly","isDisabled","parseJSON","str","undefined","valid","parsed","JSON","parse","e","isValidJson","ConnectedJsonEditor","obj","setState","throttle","state","undoStack","pushUndo","_this","setValue","length","pop","parsedValue","redoStack","initialValue","stringify","render","this","isInitiallyDisabled","FieldConnector","field","isEqualValues","value1","value2","deepEqual","key","externalReset"],"mappings":"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"}

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

@@ -31,7 +31,17 @@ function _extends() {
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
-  subClass.__proto__ = superClass;
+
+  _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 = {
@@ -40,8 +50,8 @@ var styles = {
     alignItems: 'center',
     padding: tokens.spacingXs,
     justifyContent: 'space-between',
-    backgroundColor: tokens.colorElementLightest,
-    border: "1px solid " + tokens.colorElementLight,
+    backgroundColor: tokens.gray100,
+    border: "1px solid " + tokens.gray200,
     borderTopLeftRadius: tokens.borderRadiusSmall,
     borderTopRightRadius: tokens.borderRadiusSmall,
     borderBottom: 'none'
@@ -49,7 +59,7 @@ var styles = {
   title: /*#__PURE__*/css({
     fontFamily: tokens.fontStackPrimary,
     fontSize: tokens.fontSizeM,
-    color: tokens.colorTextLight
+    color: tokens.gray600
   }),
   actions: /*#__PURE__*/css({
     button: {
@@ -111,14 +121,14 @@ var styles$1 = {
   root: /*#__PURE__*/css({
     cursor: 'text',
     padding: tokens.spacingS,
-    border: "1px solid " + tokens.colorElementLight,
+    border: "1px solid " + tokens.gray200,
     borderTop: 'none',
     borderBottomLeftRadius: tokens.borderRadiusSmall,
     borderBottomRightRadius: tokens.borderRadiusSmall,
     fontSize: tokens.fontSizeM,
     '.CodeMirror': {
       height: 'auto',
-      color: tokens.colorTextDark,
+      color: tokens.gray900,
       fontFamily: tokens.fontStackMonospace
     },
     '.CodeMirror-scroll': {

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

@@ -1 +1 @@
-{"version":3,"file":"field-editor-json.esm.js","sources":["../src/JsonEditorToobar.tsx","../src/JsonInvalidStatus.tsx","../src/JsonEditoField.tsx","../src/utils.ts","../src/JsonEditor.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/forma-36-tokens';\nimport { Button } from '@contentful/forma-36-react-components';\n\nconst styles = {\n  toolbar: css({\n    display: 'flex',\n    alignItems: 'center',\n    padding: tokens.spacingXs,\n    justifyContent: 'space-between',\n    backgroundColor: tokens.colorElementLightest,\n    border: `1px solid ${tokens.colorElementLight}`,\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.colorTextLight,\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          buttonType=\"muted\"\n          size=\"small\"\n          disabled={props.isUndoDisabled}\n          testId=\"json-editor-undo\"\n          onClick={() => {\n            props.onUndo();\n          }}>\n          Undo\n        </Button>\n        <Button\n          buttonType=\"muted\"\n          size=\"small\"\n          disabled={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/forma-36-tokens';\nimport { ValidationMessage } from '@contentful/forma-36-react-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 React from 'react';\nimport tokens from '@contentful/forma-36-tokens';\nimport { css } from 'emotion';\nimport { Controlled as CodeMirror } from 'react-codemirror2';\n\nconst CODE_MIRROR_CONFIG = {\n  autoCloseBrackets: true,\n  mode: { name: 'javascript', json: true },\n  lineWrapping: true,\n  viewportMargin: Infinity,\n  indentUnit: 4,\n  indentWithTabs: true,\n  height: 'auto',\n  theme: 'none',\n  autoRefresh: true\n};\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.colorElementLight}`,\n    borderTop: 'none',\n    borderBottomLeftRadius: tokens.borderRadiusSmall,\n    borderBottomRightRadius: tokens.borderRadiusSmall,\n    fontSize: tokens.fontSizeM,\n    '.CodeMirror': {\n      height: 'auto',\n      color: tokens.colorTextDark,\n      fontFamily: tokens.fontStackMonospace,\n    },\n    '.CodeMirror-scroll': {\n      minHeight: '6rem',\n    },\n  }),\n};\n\nexport function JsonEditorField(props: JsonEditorFieldProps) {\n  return (\n    <div className={styles.root} data-test-id=\"json-editor-code-mirror\">\n      <CodeMirror\n        value={props.value}\n        onBeforeChange={(_editor, _data, value) => {\n          props.onChange(value);\n        }}\n        options={{\n          ...CODE_MIRROR_CONFIG,\n          readOnly: props.isDisabled,\n        }}\n      />\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';\nimport deepEqual from 'deep-equal';\nimport throttle from 'lodash/throttle';\n\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport { JsonEditorToolbar } from './JsonEditorToobar';\nimport { JsonInvalidStatus } from './JsonInvalidStatus';\nimport { JsonEditorField } from './JsonEditoField';\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};\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    };\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    this.pushUndo(this.state.value);\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      }),\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","toolbar","css","display","alignItems","padding","tokens","spacingXs","justifyContent","backgroundColor","colorElementLightest","border","colorElementLight","borderTopLeftRadius","borderRadiusSmall","borderTopRightRadius","borderBottom","title","fontFamily","fontStackPrimary","fontSize","fontSizeM","color","colorTextLight","actions","button","marginLeft","spacingS","JsonEditorToolbar","props","React","className","Button","buttonType","size","disabled","isUndoDisabled","testId","onClick","onUndo","isRedoDisabled","onRedo","JsonInvalidStatus","role","marginTop","ValidationMessage","CODE_MIRROR_CONFIG","autoCloseBrackets","mode","name","json","lineWrapping","viewportMargin","Infinity","indentUnit","indentWithTabs","height","theme","autoRefresh","root","cursor","borderTop","borderBottomLeftRadius","borderBottomRightRadius","colorTextDark","fontStackMonospace","minHeight","JsonEditorField","CodeMirror","value","onBeforeChange","_editor","_data","onChange","options","readOnly","isDisabled","stringifyJSON","obj","undefined","JSON","stringify","isValidJson","str","parsed","parse","e","parseJSON","valid","ConnectedJsonEditor","setState","throttle","state","undoStack","pushUndo","setValue","length","pop","parsedValue","redoStack","initialValue","render","isInitiallyDisabled","JsonEditor","FieldConnector","field","isEqualValues","value1","value2","deepEqual","externalReset","key"],"mappings":"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"}
+{"version":3,"file":"field-editor-json.esm.js","sources":["../src/JsonEditorToobar.tsx","../src/JsonInvalidStatus.tsx","../src/JsonEditoField.tsx","../src/utils.ts","../src/JsonEditor.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/forma-36-tokens';\nimport { Button } from '@contentful/forma-36-react-components';\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          buttonType=\"muted\"\n          size=\"small\"\n          disabled={props.isUndoDisabled}\n          testId=\"json-editor-undo\"\n          onClick={() => {\n            props.onUndo();\n          }}>\n          Undo\n        </Button>\n        <Button\n          buttonType=\"muted\"\n          size=\"small\"\n          disabled={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/forma-36-tokens';\nimport { ValidationMessage } from '@contentful/forma-36-react-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 React from 'react';\nimport tokens from '@contentful/forma-36-tokens';\nimport { css } from 'emotion';\nimport { Controlled as CodeMirror } from 'react-codemirror2';\n\nconst CODE_MIRROR_CONFIG = {\n  autoCloseBrackets: true,\n  mode: { name: 'javascript', json: true },\n  lineWrapping: true,\n  viewportMargin: Infinity,\n  indentUnit: 4,\n  indentWithTabs: true,\n  height: 'auto',\n  theme: 'none',\n  autoRefresh: true\n};\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    '.CodeMirror': {\n      height: 'auto',\n      color: tokens.gray900,\n      fontFamily: tokens.fontStackMonospace,\n    },\n    '.CodeMirror-scroll': {\n      minHeight: '6rem',\n    },\n  }),\n};\n\nexport function JsonEditorField(props: JsonEditorFieldProps) {\n  return (\n    <div className={styles.root} data-test-id=\"json-editor-code-mirror\">\n      <CodeMirror\n        value={props.value}\n        onBeforeChange={(_editor, _data, value) => {\n          props.onChange(value);\n        }}\n        options={{\n          ...CODE_MIRROR_CONFIG,\n          readOnly: props.isDisabled,\n        }}\n      />\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';\nimport deepEqual from 'deep-equal';\nimport throttle from 'lodash/throttle';\n\nimport { FieldAPI, FieldConnector } from '@contentful/field-editor-shared';\nimport { JsonEditorToolbar } from './JsonEditorToobar';\nimport { JsonInvalidStatus } from './JsonInvalidStatus';\nimport { JsonEditorField } from './JsonEditoField';\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};\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    };\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    this.pushUndo(this.state.value);\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      }),\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","toolbar","css","display","alignItems","padding","tokens","spacingXs","justifyContent","backgroundColor","gray100","border","gray200","borderTopLeftRadius","borderRadiusSmall","borderTopRightRadius","borderBottom","title","fontFamily","fontStackPrimary","fontSize","fontSizeM","color","gray600","actions","button","marginLeft","spacingS","JsonEditorToolbar","props","React","className","Button","buttonType","size","disabled","isUndoDisabled","testId","onClick","onUndo","isRedoDisabled","onRedo","JsonInvalidStatus","role","marginTop","ValidationMessage","CODE_MIRROR_CONFIG","autoCloseBrackets","mode","name","json","lineWrapping","viewportMargin","Infinity","indentUnit","indentWithTabs","height","theme","autoRefresh","root","cursor","borderTop","borderBottomLeftRadius","borderBottomRightRadius","gray900","fontStackMonospace","minHeight","JsonEditorField","CodeMirror","value","onBeforeChange","_editor","_data","onChange","options","readOnly","isDisabled","stringifyJSON","obj","undefined","JSON","stringify","isValidJson","str","parsed","parse","e","parseJSON","valid","ConnectedJsonEditor","setState","throttle","state","undoStack","pushUndo","setValue","length","pop","parsedValue","redoStack","initialValue","render","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": "0.11.7",
+  "version": "0.12.3",
   "main": "dist/index.js",
   "module": "dist/field-editor-json.esm.js",
   "typings": "dist/index.d.ts",
@@ -19,9 +19,9 @@
     "tsc": "tsc -p ./ --noEmit"
   },
   "dependencies": {
-    "@contentful/field-editor-shared": "^0.21.0",
-    "@contentful/forma-36-react-components": "^3.79.5",
-    "@contentful/forma-36-tokens": "^0.10.1",
+    "@contentful/field-editor-shared": "^0.23.0",
+    "@contentful/forma-36-react-components": "^3.93.4",
+    "@contentful/forma-36-tokens": "^0.11.0",
     "@types/deep-equal": "1.0.1",
     "@types/react-codemirror": "1.0.3",
     "codemirror": "^5.48.0",
@@ -32,7 +32,7 @@
     "react-codemirror2": "6.0.1"
   },
   "devDependencies": {
-    "@contentful/field-editor-test-utils": "^0.16.0"
+    "@contentful/field-editor-test-utils": "^0.17.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
@@ -47,5 +47,5 @@
       }
     }
   },
-  "gitHead": "e170b6d0f76c9ccc1dbe95d11549135182b6ab3c"
+  "gitHead": "4020000939175ec415639fbc3b7b20e011c2a8a7"
 }