npm - @contentful/field-editor-json - Versions diffs - 1.1.5 → 2.1.0 - Mend

@contentful/field-editor-json 1.1.5 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/CHANGELOG.md +6 -0
package/dist/{JsonEditoField.d.ts → JsonEditorField.d.ts} +0 -0
package/dist/field-editor-json.cjs.development.js +87 -77
package/dist/field-editor-json.cjs.development.js.map +1 -1
package/dist/field-editor-json.cjs.production.min.js +1 -1
package/dist/field-editor-json.cjs.production.min.js.map +1 -1
package/dist/field-editor-json.esm.js +87 -77
package/dist/field-editor-json.esm.js.map +1 -1
package/package.json +7 -5

package/CHANGELOG.md CHANGED Viewed

@@ -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.
+# [2.1.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-json@1.1.5...@contentful/field-editor-json@2.1.0) (2022-07-22)
+### Features
+- replace react-codemirror2 with @uiw/react-codemirror to allow codemirror 6 ([#1193](https://github.com/contentful/field-editors/issues/1193)) ([dbdb0ae](https://github.com/contentful/field-editors/commit/dbdb0ae3eaf2c63b00e87195210986b22c15987f))
 ## [1.1.5](https://github.com/contentful/field-editors/compare/@contentful/field-editor-json@1.1.4...@contentful/field-editor-json@1.1.5) (2022-07-11)
 **Note:** Version bump only for package @contentful/field-editor-json

package/dist/{JsonEditoField.d.ts → JsonEditorField.d.ts} RENAMED Viewed

File without changes

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

@@ -9,13 +9,15 @@ require('codemirror/mode/javascript/javascript');
 require('codemirror/addon/display/autorefresh');
 var React = require('react');
 var React__default = _interopDefault(React);
+var fieldEditorShared = require('@contentful/field-editor-shared');
 var deepEqual = _interopDefault(require('deep-equal'));
 var throttle = _interopDefault(require('lodash/throttle'));
-var fieldEditorShared = require('@contentful/field-editor-shared');
-var emotion = require('emotion');
+var langJson = require('@codemirror/lang-json');
 var tokens = _interopDefault(require('@contentful/f36-tokens'));
+var codemirrorThemes = require('@uiw/codemirror-themes');
+var CodeMirror = _interopDefault(require('@uiw/react-codemirror'));
+var emotion = require('emotion');
 var f36Components = require('@contentful/f36-components');
-var reactCodemirror2 = require('react-codemirror2');
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -52,6 +54,77 @@ function _setPrototypeOf(o, p) {
 }
 var styles = {
+  root: /*#__PURE__*/emotion.css({
+    cursor: 'text',
+    padding: tokens.spacingS,
+    border: "1px solid " + tokens.gray200,
+    borderTop: 'none',
+    borderBottomLeftRadius: tokens.borderRadiusSmall,
+    borderBottomRightRadius: tokens.borderRadiusSmall,
+    fontSize: tokens.fontSizeM,
+    '.cm-editor': {
+      color: tokens.gray900,
+      fontFamily: tokens.fontStackMonospace,
+      '&.cm-focused': {
+        outline: 'none'
+      }
+    },
+    '.cm-scroller': {
+      minHeight: '6rem'
+    },
+    '&.disabled': {
+      cursor: 'auto',
+      '.cm-scroller ': {
+        minHeight: '6rem',
+        backgroundColor: tokens.gray100,
+        cursor: 'not-allowed'
+      },
+      '.cm-editor': {
+        border: "1px solid " + tokens.gray200
+      },
+      '.cm-line': {
+        cursor: 'not-allowed'
+      },
+      '.cm-lines': {
+        cursor: 'not-allowed'
+      }
+    }
+  })
+};
+var theme = /*#__PURE__*/codemirrorThemes.createTheme({
+  theme: 'light',
+  settings: {
+    background: '',
+    foreground: ''
+  },
+  styles: []
+});
+function JsonEditorField(props) {
+  return React__default.createElement("div", {
+    className: emotion.cx(styles.root, {
+      disabled: props.isDisabled
+    }),
+    "data-test-id": "json-editor-code-mirror"
+  }, React__default.createElement(CodeMirror, {
+    value: props.value,
+    onChange: props.onChange,
+    theme: theme,
+    extensions: [langJson.json()],
+    basicSetup: {
+      closeBrackets: false,
+      lineNumbers: false,
+      highlightActiveLineGutter: false,
+      highlightActiveLine: false,
+      foldGutter: false,
+      bracketMatching: false
+    },
+    width: "100%",
+    editable: !props.isDisabled,
+    indentWithTab: true
+  }));
+}
+var styles$1 = {
   toolbar: /*#__PURE__*/emotion.css({
     display: 'flex',
     alignItems: 'center',
@@ -76,11 +149,11 @@ var styles = {
 };
 function JsonEditorToolbar(props) {
   return React__default.createElement("div", {
-    className: styles.toolbar
+    className: styles$1.toolbar
   }, React__default.createElement("div", {
-    className: styles.title
+    className: styles$1.title
   }, "JSON Editor"), React__default.createElement("div", {
-    className: styles.actions
+    className: styles$1.actions
   }, React__default.createElement(f36Components.Button, {
     variant: "secondary",
     size: "small",
@@ -110,73 +183,6 @@ function JsonInvalidStatus() {
   }, React__default.createElement(f36Components.ValidationMessage, null, "This is not valid JSON"));
 }
-var CODE_MIRROR_CONFIG = {
-  autoCloseBrackets: true,
-  mode: {
-    name: 'javascript',
-    json: true
-  },
-  lineWrapping: true,
-  viewportMargin: Infinity,
-  indentUnit: 4,
-  indentWithTabs: true,
-  height: 'auto',
-  theme: 'none',
-  autoRefresh: true
-};
-var styles$1 = {
-  root: /*#__PURE__*/emotion.css({
-    cursor: 'text',
-    padding: tokens.spacingS,
-    border: "1px solid " + tokens.gray200,
-    borderTop: 'none',
-    borderBottomLeftRadius: tokens.borderRadiusSmall,
-    borderBottomRightRadius: tokens.borderRadiusSmall,
-    fontSize: tokens.fontSizeM,
-    '.CodeMirror': {
-      height: 'auto',
-      color: tokens.gray900,
-      fontFamily: tokens.fontStackMonospace
-    },
-    '.CodeMirror-scroll': {
-      minHeight: '6rem'
-    },
-    '&.disabled': {
-      cursor: 'auto',
-      '.CodeMirror-scroll ': {
-        minHeight: '6rem',
-        backgroundColor: tokens.gray100,
-        cursor: 'not-allowed'
-      },
-      '.react-codemirror2': {
-        border: "1px solid " + tokens.gray200
-      },
-      '.CodeMirror-line': {
-        cursor: 'not-allowed'
-      },
-      '.CodeMirror-lines': {
-        cursor: 'not-allowed'
-      }
-    }
-  })
-};
-function JsonEditorField(props) {
-  return React__default.createElement("div", {
-    className: emotion.cx(styles$1.root, {
-      disabled: props.isDisabled
-    }),
-    "data-test-id": "json-editor-code-mirror"
-  }, React__default.createElement(reactCodemirror2.Controlled, {
-    value: props.value,
-    onBeforeChange: function onBeforeChange(_editor, _data, value) {
-      props.onChange(value);
-    },
-    options: _extends({}, CODE_MIRROR_CONFIG, {
-      readOnly: props.isDisabled ? 'nocursor' : false
-    })
-  }));
-}
 function stringifyJSON(obj) {
   if (obj === null || obj === undefined) {
     return '';
@@ -244,7 +250,9 @@ var ConnectedJsonEditor = /*#__PURE__*/function (_React$Component) {
     _this.onChange = function (value) {
       var parsed = parseJSON(value);
-      _this.pushUndo(_this.state.value);
+      if (value !== _this.state.lastUndo) {
+        _this.pushUndo(_this.state.value);
+      }
       _this.setState({
         value: value,
@@ -257,7 +265,7 @@ var ConnectedJsonEditor = /*#__PURE__*/function (_React$Component) {
     };
     _this.onUndo = function () {
-      var undoStack = [].concat(_this.state.undoStack);
+      var undoStack = _this.state.undoStack;
       if (undoStack.length === 0) {
         return;
@@ -271,7 +279,8 @@ var ConnectedJsonEditor = /*#__PURE__*/function (_React$Component) {
           value: value,
           isValidJson: parsedValue.valid,
           undoStack: undoStack,
-          redoStack: [].concat(state.redoStack, [state.value])
+          redoStack: [].concat(state.redoStack, [state.value]),
+          lastUndo: value
         });
       }, function () {
         if (parsedValue.valid) {
@@ -308,7 +317,8 @@ var ConnectedJsonEditor = /*#__PURE__*/function (_React$Component) {
       value: stringifyJSON(props.initialValue),
       isValidJson: true,
       undoStack: [],
-      redoStack: []
+      redoStack: [],
+      lastUndo: ''
     };
     return _this;
   }

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

	@@ -1 +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/f36-tokens';\n\nimport { Button } from '@contentful/f36-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 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 React from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { css, cx } 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 '&.disabled': {\n cursor: 'auto',\n '.CodeMirror-scroll ': {\n minHeight: '6rem',\n backgroundColor: tokens.gray100,\n cursor: 'not-allowed',\n },\n '.react-codemirror2': {\n border: `1px solid ${tokens.gray200}`,\n },\n '.CodeMirror-line': {\n cursor: 'not-allowed',\n },\n '.CodeMirror-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 <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 ? 'nocursor' : false,\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","variant","size","isDisabled","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","cx","disabled","CodeMirror","value","onBeforeChange","_editor","_data","onChange","options","readOnly","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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"}
1	+ {"version":3,"file":"field-editor-json.cjs.development.js","sources":["../src/JsonEditorField.tsx","../src/JsonEditorToobar.tsx","../src/JsonInvalidStatus.tsx","../src/utils.ts","../src/JsonEditor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { json } from '@codemirror/lang-json';\nimport tokens from '@contentful/f36-tokens';\nimport { createTheme } from '@uiw/codemirror-themes';\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 fontFamily: tokens.fontStackMonospace,\n '&.cm-focused': {\n outline: 'none',\n },\n },\n '.cm-scroller': {\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\nconst theme = createTheme({\n theme: 'light',\n settings: {\n background: '',\n foreground: '',\n },\n styles: [],\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 <CodeMirror\n value={props.value}\n onChange={props.onChange}\n theme={theme}\n extensions={[json()]}\n basicSetup={{\n closeBrackets: false,\n lineNumbers: false,\n highlightActiveLineGutter: false,\n highlightActiveLine: false,\n foldGutter: false,\n bracketMatching: false,\n }}\n width=\"100%\"\n editable={!props.isDisabled}\n indentWithTab={true}\n />\n </div>\n );\n}\n","import React from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nimport { Button } from '@contentful/f36-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 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 './JsonEditorToobar';\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","fontFamily","fontStackMonospace","outline","minHeight","backgroundColor","gray100","theme","createTheme","settings","background","foreground","JsonEditorField","props","React","className","cx","disabled","isDisabled","CodeMirror","value","onChange","extensions","json","basicSetup","closeBrackets","lineNumbers","highlightActiveLineGutter","highlightActiveLine","foldGutter","bracketMatching","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","setState","throttle","state","undoStack","lastUndo","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 CHANGED Viewed

@@ -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),r=e(require("deep-equal")),n=e(require("lodash/throttle")),a=require("@contentful/field-editor-shared"),i=require("emotion"),s=e(require("@contentful/f36-tokens")),l=require("@contentful/f36-components"),d=require("react-codemirror2");function c(){return(c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e}).apply(this,arguments)}function u(e,t){return(u=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,{variant:"secondary",size:"small",isDisabled:e.isUndoDisabled,testId:"json-editor-undo",onClick:function(){e.onUndo()}},"Undo"),o.createElement(l.Button,{variant:"secondary",size:"small",isDisabled: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"},"&.disabled":{cursor:"auto",".CodeMirror-scroll ":{minHeight:"6rem",backgroundColor:s.gray100,cursor:"not-allowed"},".react-codemirror2":{border:"1px solid "+s.gray200},".CodeMirror-line":{cursor:"not-allowed"},".CodeMirror-lines":{cursor:"not-allowed"}}})};function h(e){return o.createElement("div",{className:i.cx(b.root,{disabled:e.isDisabled}),"data-test-id":"json-editor-code-mirror"},o.createElement(d.Controlled,{value:e.value,onBeforeChange:function(t,o,r){e.onChange(r)},options:c({},m,{readOnly:!!e.isDisabled&&"nocursor"})}))}function g(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,r;function a(t){var o,r;return(o=e.call(this,t)||this).setValidJson=function(e){o.setState({isValidJson:e})},o.pushUndo=n((function(e){o.setState((function(t){return{undoStack:[].concat(t.undoStack,[e])}}))}),400),o.onChange=function(e){var t=g(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()||"",r=g(t);o.setState((function(o){return c({},o,{value:t,isValidJson:r.valid,undoStack:e,redoStack:[].concat(o.redoStack,[o.value])})}),(function(){r.valid&&o.props.setValue(r.value)}))}},o.onRedo=function(){var e=[].concat(o.state.redoStack);if(0!==e.length){var t=e.pop()||"",r=g(t);o.setState((function(o){return c({},o,{value:t,isValidJson:r.valid,redoStack:e,undoStack:[].concat(o.undoStack,[o.value])})}),(function(){r.valid&&o.props.setValue(r.value)}))}},o.state={value:(r=t.initialValue,null==r?"":JSON.stringify(r,null,4)),isValidJson:!0,undoStack:[],redoStack:[]},o}return r=e,(o=a).prototype=Object.create(r.prototype),o.prototype.constructor=o,u(o,r),a.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))},a}(t.Component);S.defaultProps={isInitiallyDisabled:!0},exports.JsonEditor=function(e){return t.createElement(a.FieldConnector,{field:e.field,isInitiallyDisabled:e.isInitiallyDisabled,isEqualValues:function(e,t){return r(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),r=require("@contentful/field-editor-shared"),n=e(require("deep-equal")),a=e(require("lodash/throttle")),i=require("@codemirror/lang-json"),s=e(require("@contentful/f36-tokens")),l=require("@uiw/codemirror-themes"),d=e(require("@uiw/react-codemirror")),c=require("emotion"),u=require("@contentful/f36-components");function f(){return(f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e}).apply(this,arguments)}function p(e,t){return(p=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var m={root:c.css({cursor:"text",padding:s.spacingS,border:"1px solid "+s.gray200,borderTop:"none",borderBottomLeftRadius:s.borderRadiusSmall,borderBottomRightRadius:s.borderRadiusSmall,fontSize:s.fontSizeM,".cm-editor":{color:s.gray900,fontFamily:s.fontStackMonospace,"&.cm-focused":{outline:"none"}},".cm-scroller":{minHeight:"6rem"},"&.disabled":{cursor:"auto",".cm-scroller ":{minHeight:"6rem",backgroundColor:s.gray100,cursor:"not-allowed"},".cm-editor":{border:"1px solid "+s.gray200},".cm-line":{cursor:"not-allowed"},".cm-lines":{cursor:"not-allowed"}}})},v=l.createTheme({theme:"light",settings:{background:"",foreground:""},styles:[]});function b(e){return o.createElement("div",{className:c.cx(m.root,{disabled:e.isDisabled}),"data-test-id":"json-editor-code-mirror"},o.createElement(d,{value:e.value,onChange:e.onChange,theme:v,extensions:[i.json()],basicSetup:{closeBrackets:!1,lineNumbers:!1,highlightActiveLineGutter:!1,highlightActiveLine:!1,foldGutter:!1,bracketMatching:!1},width:"100%",editable:!e.isDisabled,indentWithTab:!0}))}var h={toolbar:c.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:c.css({fontFamily:s.fontStackPrimary,fontSize:s.fontSizeM,color:s.gray600}),actions:c.css({button:{marginLeft:s.spacingS}})};function g(e){return o.createElement("div",{className:h.toolbar},o.createElement("div",{className:h.title},"JSON Editor"),o.createElement("div",{className:h.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 S(){return o.createElement("div",{role:"status","data-test-id":"json-editor.invalid-json",className:c.css({marginTop:s.spacingS})},o.createElement(u.ValidationMessage,null,"This is not valid JSON"))}function y(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 k=function(e){var o,r;function n(t){var o,r;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=y(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()||"",r=y(t);o.setState((function(o){return f({},o,{value:t,isValidJson:r.valid,undoStack:e,redoStack:[].concat(o.redoStack,[o.value]),lastUndo:t})}),(function(){r.valid&&o.props.setValue(r.value)}))}},o.onRedo=function(){var e=[].concat(o.state.redoStack);if(0!==e.length){var t=e.pop()||"",r=y(t);o.setState((function(o){return f({},o,{value:t,isValidJson:r.valid,redoStack:e,undoStack:[].concat(o.undoStack,[o.value])})}),(function(){r.valid&&o.props.setValue(r.value)}))}},o.state={value:(r=t.initialValue,null==r?"":JSON.stringify(r,null,4)),isValidJson:!0,undoStack:[],redoStack:[],lastUndo:""},o}return r=e,(o=n).prototype=Object.create(r.prototype),o.prototype.constructor=o,p(o,r),n.prototype.render=function(){return t.createElement("div",{"data-test-id":"json-editor"},t.createElement(g,{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(b,{value:this.state.value,onChange:this.onChange,isDisabled:this.props.disabled}),!this.state.isValidJson&&t.createElement(S,null))},n}(t.Component);k.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(k,{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 CHANGED Viewed

	@@ -1 +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/f36-tokens';\n\nimport { Button } from '@contentful/f36-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 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 React from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { css, cx } 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 '&.disabled': {\n cursor: 'auto',\n '.CodeMirror-scroll ': {\n minHeight: '6rem',\n backgroundColor: tokens.gray100,\n cursor: 'not-allowed',\n },\n '.react-codemirror2': {\n border: `1px solid ${tokens.gray200}`,\n },\n '.CodeMirror-line': {\n cursor: 'not-allowed',\n },\n '.CodeMirror-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 <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 ? 'nocursor' : false,\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","variant","size","isDisabled","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","cx","disabled","CodeMirror","value","onBeforeChange","_editor","_data","onChange","options","readOnly","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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"}
1	+ {"version":3,"file":"field-editor-json.cjs.production.min.js","sources":["../src/JsonEditorField.tsx","../src/JsonEditorToobar.tsx","../src/JsonInvalidStatus.tsx","../src/utils.ts","../src/JsonEditor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { json } from '@codemirror/lang-json';\nimport tokens from '@contentful/f36-tokens';\nimport { createTheme } from '@uiw/codemirror-themes';\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 fontFamily: tokens.fontStackMonospace,\n '&.cm-focused': {\n outline: 'none',\n },\n },\n '.cm-scroller': {\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\nconst theme = createTheme({\n theme: 'light',\n settings: {\n background: '',\n foreground: '',\n },\n styles: [],\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 <CodeMirror\n value={props.value}\n onChange={props.onChange}\n theme={theme}\n extensions={[json()]}\n basicSetup={{\n closeBrackets: false,\n lineNumbers: false,\n highlightActiveLineGutter: false,\n highlightActiveLine: false,\n foldGutter: false,\n bracketMatching: false,\n }}\n width=\"100%\"\n editable={!props.isDisabled}\n indentWithTab={true}\n />\n </div>\n );\n}\n","import React from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nimport { Button } from '@contentful/f36-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 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 './JsonEditorToobar';\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","fontFamily","fontStackMonospace","outline","minHeight","backgroundColor","gray100","theme","createTheme","settings","background","foreground","JsonEditorField","props","React","className","cx","disabled","isDisabled","CodeMirror","value","onChange","extensions","json","basicSetup","closeBrackets","lineNumbers","highlightActiveLineGutter","highlightActiveLine","foldGutter","bracketMatching","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","setState","throttle","state","undoStack","_this","lastUndo","pushUndo","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 CHANGED Viewed

@@ -2,13 +2,15 @@ import 'codemirror/addon/edit/closebrackets';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/addon/display/autorefresh';
 import React__default, { createElement, Component } from 'react';
+import { FieldConnector } from '@contentful/field-editor-shared';
 import deepEqual from 'deep-equal';
 import throttle from 'lodash-es/throttle';
-import { FieldConnector } from '@contentful/field-editor-shared';
-import { css, cx } from 'emotion';
+import { json } from '@codemirror/lang-json';
 import tokens from '@contentful/f36-tokens';
+import { createTheme } from '@uiw/codemirror-themes';
+import CodeMirror from '@uiw/react-codemirror';
+import { cx, css } from 'emotion';
 import { Button, ValidationMessage } from '@contentful/f36-components';
-import { Controlled } from 'react-codemirror2';
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -45,6 +47,77 @@ function _setPrototypeOf(o, p) {
 }
 var styles = {
+  root: /*#__PURE__*/css({
+    cursor: 'text',
+    padding: tokens.spacingS,
+    border: "1px solid " + tokens.gray200,
+    borderTop: 'none',
+    borderBottomLeftRadius: tokens.borderRadiusSmall,
+    borderBottomRightRadius: tokens.borderRadiusSmall,
+    fontSize: tokens.fontSizeM,
+    '.cm-editor': {
+      color: tokens.gray900,
+      fontFamily: tokens.fontStackMonospace,
+      '&.cm-focused': {
+        outline: 'none'
+      }
+    },
+    '.cm-scroller': {
+      minHeight: '6rem'
+    },
+    '&.disabled': {
+      cursor: 'auto',
+      '.cm-scroller ': {
+        minHeight: '6rem',
+        backgroundColor: tokens.gray100,
+        cursor: 'not-allowed'
+      },
+      '.cm-editor': {
+        border: "1px solid " + tokens.gray200
+      },
+      '.cm-line': {
+        cursor: 'not-allowed'
+      },
+      '.cm-lines': {
+        cursor: 'not-allowed'
+      }
+    }
+  })
+};
+var theme = /*#__PURE__*/createTheme({
+  theme: 'light',
+  settings: {
+    background: '',
+    foreground: ''
+  },
+  styles: []
+});
+function JsonEditorField(props) {
+  return React__default.createElement("div", {
+    className: cx(styles.root, {
+      disabled: props.isDisabled
+    }),
+    "data-test-id": "json-editor-code-mirror"
+  }, React__default.createElement(CodeMirror, {
+    value: props.value,
+    onChange: props.onChange,
+    theme: theme,
+    extensions: [json()],
+    basicSetup: {
+      closeBrackets: false,
+      lineNumbers: false,
+      highlightActiveLineGutter: false,
+      highlightActiveLine: false,
+      foldGutter: false,
+      bracketMatching: false
+    },
+    width: "100%",
+    editable: !props.isDisabled,
+    indentWithTab: true
+  }));
+}
+var styles$1 = {
   toolbar: /*#__PURE__*/css({
     display: 'flex',
     alignItems: 'center',
@@ -69,11 +142,11 @@ var styles = {
 };
 function JsonEditorToolbar(props) {
   return React__default.createElement("div", {
-    className: styles.toolbar
+    className: styles$1.toolbar
   }, React__default.createElement("div", {
-    className: styles.title
+    className: styles$1.title
   }, "JSON Editor"), React__default.createElement("div", {
-    className: styles.actions
+    className: styles$1.actions
   }, React__default.createElement(Button, {
     variant: "secondary",
     size: "small",
@@ -103,73 +176,6 @@ function JsonInvalidStatus() {
   }, React__default.createElement(ValidationMessage, null, "This is not valid JSON"));
 }
-var CODE_MIRROR_CONFIG = {
-  autoCloseBrackets: true,
-  mode: {
-    name: 'javascript',
-    json: true
-  },
-  lineWrapping: true,
-  viewportMargin: Infinity,
-  indentUnit: 4,
-  indentWithTabs: true,
-  height: 'auto',
-  theme: 'none',
-  autoRefresh: true
-};
-var styles$1 = {
-  root: /*#__PURE__*/css({
-    cursor: 'text',
-    padding: tokens.spacingS,
-    border: "1px solid " + tokens.gray200,
-    borderTop: 'none',
-    borderBottomLeftRadius: tokens.borderRadiusSmall,
-    borderBottomRightRadius: tokens.borderRadiusSmall,
-    fontSize: tokens.fontSizeM,
-    '.CodeMirror': {
-      height: 'auto',
-      color: tokens.gray900,
-      fontFamily: tokens.fontStackMonospace
-    },
-    '.CodeMirror-scroll': {
-      minHeight: '6rem'
-    },
-    '&.disabled': {
-      cursor: 'auto',
-      '.CodeMirror-scroll ': {
-        minHeight: '6rem',
-        backgroundColor: tokens.gray100,
-        cursor: 'not-allowed'
-      },
-      '.react-codemirror2': {
-        border: "1px solid " + tokens.gray200
-      },
-      '.CodeMirror-line': {
-        cursor: 'not-allowed'
-      },
-      '.CodeMirror-lines': {
-        cursor: 'not-allowed'
-      }
-    }
-  })
-};
-function JsonEditorField(props) {
-  return React__default.createElement("div", {
-    className: cx(styles$1.root, {
-      disabled: props.isDisabled
-    }),
-    "data-test-id": "json-editor-code-mirror"
-  }, React__default.createElement(Controlled, {
-    value: props.value,
-    onBeforeChange: function onBeforeChange(_editor, _data, value) {
-      props.onChange(value);
-    },
-    options: _extends({}, CODE_MIRROR_CONFIG, {
-      readOnly: props.isDisabled ? 'nocursor' : false
-    })
-  }));
-}
 function stringifyJSON(obj) {
   if (obj === null || obj === undefined) {
     return '';
@@ -237,7 +243,9 @@ var ConnectedJsonEditor = /*#__PURE__*/function (_React$Component) {
     _this.onChange = function (value) {
       var parsed = parseJSON(value);
-      _this.pushUndo(_this.state.value);
+      if (value !== _this.state.lastUndo) {
+        _this.pushUndo(_this.state.value);
+      }
       _this.setState({
         value: value,
@@ -250,7 +258,7 @@ var ConnectedJsonEditor = /*#__PURE__*/function (_React$Component) {
     };
     _this.onUndo = function () {
-      var undoStack = [].concat(_this.state.undoStack);
+      var undoStack = _this.state.undoStack;
       if (undoStack.length === 0) {
         return;
@@ -264,7 +272,8 @@ var ConnectedJsonEditor = /*#__PURE__*/function (_React$Component) {
           value: value,
           isValidJson: parsedValue.valid,
           undoStack: undoStack,
-          redoStack: [].concat(state.redoStack, [state.value])
+          redoStack: [].concat(state.redoStack, [state.value]),
+          lastUndo: value
         });
       }, function () {
         if (parsedValue.valid) {
@@ -301,7 +310,8 @@ var ConnectedJsonEditor = /*#__PURE__*/function (_React$Component) {
       value: stringifyJSON(props.initialValue),
       isValidJson: true,
       undoStack: [],
-      redoStack: []
+      redoStack: [],
+      lastUndo: ''
     };
     return _this;
   }

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

	@@ -1 +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/f36-tokens';\n\nimport { Button } from '@contentful/f36-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 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 React from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { css, cx } 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 '&.disabled': {\n cursor: 'auto',\n '.CodeMirror-scroll ': {\n minHeight: '6rem',\n backgroundColor: tokens.gray100,\n cursor: 'not-allowed',\n },\n '.react-codemirror2': {\n border: `1px solid ${tokens.gray200}`,\n },\n '.CodeMirror-line': {\n cursor: 'not-allowed',\n },\n '.CodeMirror-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 <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 ? 'nocursor' : false,\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","variant","size","isDisabled","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","cx","disabled","CodeMirror","value","onBeforeChange","_editor","_data","onChange","options","readOnly","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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"}
1	+ {"version":3,"file":"field-editor-json.esm.js","sources":["../src/JsonEditorField.tsx","../src/JsonEditorToobar.tsx","../src/JsonInvalidStatus.tsx","../src/utils.ts","../src/JsonEditor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { json } from '@codemirror/lang-json';\nimport tokens from '@contentful/f36-tokens';\nimport { createTheme } from '@uiw/codemirror-themes';\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 fontFamily: tokens.fontStackMonospace,\n '&.cm-focused': {\n outline: 'none',\n },\n },\n '.cm-scroller': {\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\nconst theme = createTheme({\n theme: 'light',\n settings: {\n background: '',\n foreground: '',\n },\n styles: [],\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 <CodeMirror\n value={props.value}\n onChange={props.onChange}\n theme={theme}\n extensions={[json()]}\n basicSetup={{\n closeBrackets: false,\n lineNumbers: false,\n highlightActiveLineGutter: false,\n highlightActiveLine: false,\n foldGutter: false,\n bracketMatching: false,\n }}\n width=\"100%\"\n editable={!props.isDisabled}\n indentWithTab={true}\n />\n </div>\n );\n}\n","import React from 'react';\nimport { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nimport { Button } from '@contentful/f36-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 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 './JsonEditorToobar';\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","fontFamily","fontStackMonospace","outline","minHeight","backgroundColor","gray100","theme","createTheme","settings","background","foreground","JsonEditorField","props","React","className","cx","disabled","isDisabled","CodeMirror","value","onChange","extensions","json","basicSetup","closeBrackets","lineNumbers","highlightActiveLineGutter","highlightActiveLine","foldGutter","bracketMatching","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","setState","throttle","state","undoStack","lastUndo","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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-json",
-  "version": "1.1.5",
+  "version": "2.1.0",
   "main": "dist/index.js",
   "module": "dist/field-editor-json.esm.js",
   "typings": "dist/index.d.ts",
@@ -19,17 +19,19 @@
     "tsc": "tsc -p ./ --noEmit"
   },
   "dependencies": {
+    "@codemirror/lang-json": "^6.0.0",
     "@contentful/f36-components": "^4.0.27",
     "@contentful/f36-tokens": "^4.0.0",
     "@contentful/field-editor-shared": "^1.1.3",
     "@types/deep-equal": "1.0.1",
     "@types/react-codemirror": "1.0.3",
-    "codemirror": "^5.48.0",
+    "@uiw/codemirror-themes": "^4.11.4",
+    "@uiw/react-codemirror": "^4.11.4",
+    "codemirror": "^6.0.1",
     "deep-equal": "2.0.5",
     "emotion": "^10.0.17",
     "lodash": "^4.17.15",
-    "lodash-es": "^4.17.15",
-    "react-codemirror2": "6.0.1"
+    "lodash-es": "^4.17.15"
   },
   "devDependencies": {
     "@contentful/field-editor-test-utils": "^1.2.0"
@@ -47,5 +49,5 @@
       }
     }
   },
-  "gitHead": "6cee7fea6ac7d0f8cf1c6689ad8c95fc5814d85e"
+  "gitHead": "6aad0a13e5b7cf04a682c3d4f8a43773bf0974bf"
 }