@contentful/field-editor-json 3.1.7 → 3.3.0

package/dist/esm/JsonEditor.js

@@ -0,0 +1,140 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+import * as React from 'react';
+import { FieldConnector } from '@contentful/field-editor-shared';
+import deepEqual from 'deep-equal';
+import throttle from 'lodash/throttle';
+import { JsonEditorField } from './JsonEditorField';
+import { JsonEditorToolbar } from './JsonEditorToolbar';
+import { JsonInvalidStatus } from './JsonInvalidStatus';
+import { stringifyJSON, parseJSON } from './utils';
+var _React_Component;
+class ConnectedJsonEditor extends (_React_Component = React.Component) {
+    render() {
+        return React.createElement("div", {
+            "data-test-id": "json-editor"
+        }, React.createElement(JsonEditorToolbar, {
+            isRedoDisabled: this.props.disabled || this.state.redoStack.length === 0,
+            isUndoDisabled: this.props.disabled || this.state.undoStack.length === 0,
+            onUndo: this.onUndo,
+            onRedo: this.onRedo
+        }), React.createElement(JsonEditorField, {
+            value: this.state.value,
+            onChange: this.onChange,
+            isDisabled: this.props.disabled
+        }), !this.state.isValidJson && React.createElement(JsonInvalidStatus, null));
+    }
+    constructor(props){
+        super(props);
+        _define_property(this, "setValidJson", (value)=>{
+            this.setState({
+                isValidJson: value
+            });
+        });
+        _define_property(this, "pushUndo", throttle((value)=>{
+            this.setState((state)=>({
+                    undoStack: [
+                        ...state.undoStack,
+                        value
+                    ]
+                }));
+        }, 400));
+        _define_property(this, "onChange", (value)=>{
+            const parsed = parseJSON(value);
+            if (value !== this.state.lastUndo) {
+                this.pushUndo(this.state.value);
+            }
+            this.setState({
+                value,
+                isValidJson: parsed.valid
+            });
+            if (parsed.valid) {
+                this.props.setValue(parsed.value);
+            }
+        });
+        _define_property(this, "onUndo", ()=>{
+            const undoStack = this.state.undoStack;
+            if (undoStack.length === 0) {
+                return;
+            }
+            const value = undoStack.pop() || '';
+            const parsedValue = parseJSON(value);
+            this.setState((state)=>({
+                    ...state,
+                    value,
+                    isValidJson: parsedValue.valid,
+                    undoStack,
+                    redoStack: [
+                        ...state.redoStack,
+                        state.value
+                    ],
+                    lastUndo: value
+                }), ()=>{
+                if (parsedValue.valid) {
+                    this.props.setValue(parsedValue.value);
+                }
+            });
+        });
+        _define_property(this, "onRedo", ()=>{
+            const redoStack = [
+                ...this.state.redoStack
+            ];
+            if (redoStack.length === 0) {
+                return;
+            }
+            const value = redoStack.pop() || '';
+            const parsedValue = parseJSON(value);
+            this.setState((state)=>({
+                    ...state,
+                    value,
+                    isValidJson: parsedValue.valid,
+                    redoStack,
+                    undoStack: [
+                        ...state.undoStack,
+                        state.value
+                    ]
+                }), ()=>{
+                if (parsedValue.valid) {
+                    this.props.setValue(parsedValue.value);
+                }
+            });
+        });
+        this.state = {
+            value: stringifyJSON(props.initialValue),
+            isValidJson: true,
+            undoStack: [],
+            redoStack: [],
+            lastUndo: ''
+        };
+    }
+}
+_define_property(ConnectedJsonEditor, "defaultProps", {
+    isInitiallyDisabled: true
+});
+export default function JsonEditor(props) {
+    return React.createElement(FieldConnector, {
+        field: props.field,
+        isInitiallyDisabled: props.isInitiallyDisabled,
+        isEqualValues: (value1, value2)=>{
+            return deepEqual(value1, value2);
+        }
+    }, ({ value , disabled , setValue , externalReset  })=>{
+        return React.createElement(ConnectedJsonEditor, {
+            key: `json-editor-${externalReset}`,
+            initialValue: value,
+            disabled: disabled,
+            setValue: setValue
+        });
+    });
+}

package/dist/esm/JsonEditorField.js

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { json } from '@codemirror/lang-json';
+import { EditorView } from '@codemirror/view';
+import tokens from '@contentful/f36-tokens';
+import CodeMirror from '@uiw/react-codemirror';
+import { css, cx } from 'emotion';
+const styles = {
+    root: 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,
+            '&.cm-focused': {
+                outline: 'none'
+            }
+        },
+        '.cm-scroller': {
+            fontFamily: tokens.fontStackMonospace,
+            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'
+            }
+        }
+    })
+};
+export function JsonEditorField(props) {
+    return React.createElement("div", {
+        className: cx(styles.root, {
+            disabled: props.isDisabled
+        }),
+        "data-test-id": "json-editor-code-mirror"
+    }, React.createElement(CodeMirror, {
+        value: props.value,
+        onChange: props.onChange,
+        theme: "light",
+        extensions: [
+            json(),
+            EditorView.lineWrapping
+        ],
+        basicSetup: {
+            closeBrackets: false,
+            lineNumbers: false,
+            highlightActiveLineGutter: false,
+            searchKeymap: false,
+            highlightActiveLine: false,
+            foldGutter: false,
+            bracketMatching: false,
+            syntaxHighlighting: false
+        },
+        width: "100%",
+        editable: !props.isDisabled,
+        indentWithTab: true
+    }));
+}

package/dist/esm/JsonEditorToolbar.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Button } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+const styles = {
+    toolbar: css({
+        display: 'flex',
+        alignItems: 'center',
+        padding: tokens.spacingXs,
+        justifyContent: 'space-between',
+        backgroundColor: tokens.gray100,
+        border: `1px solid ${tokens.gray200}`,
+        borderTopLeftRadius: tokens.borderRadiusSmall,
+        borderTopRightRadius: tokens.borderRadiusSmall,
+        borderBottom: 'none'
+    }),
+    title: css({
+        fontFamily: tokens.fontStackPrimary,
+        fontSize: tokens.fontSizeM,
+        color: tokens.gray600
+    }),
+    actions: css({
+        button: {
+            marginLeft: tokens.spacingS
+        }
+    })
+};
+export function JsonEditorToolbar(props) {
+    return React.createElement("div", {
+        className: styles.toolbar
+    }, React.createElement("div", {
+        className: styles.title
+    }, "JSON Editor"), React.createElement("div", {
+        className: styles.actions
+    }, React.createElement(Button, {
+        variant: "secondary",
+        size: "small",
+        isDisabled: props.isUndoDisabled,
+        testId: "json-editor-undo",
+        onClick: ()=>{
+            props.onUndo();
+        }
+    }, "Undo"), React.createElement(Button, {
+        variant: "secondary",
+        size: "small",
+        isDisabled: props.isRedoDisabled,
+        testId: "json-editor-redo",
+        onClick: ()=>{
+            props.onRedo();
+        }
+    }, "Redo")));
+}

package/dist/esm/JsonInvalidStatus.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ValidationMessage } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+export function JsonInvalidStatus() {
+    return React.createElement("div", {
+        role: "status",
+        "data-test-id": "json-editor.invalid-json",
+        className: css({
+            marginTop: tokens.spacingS
+        })
+    }, React.createElement(ValidationMessage, null, "This is not valid JSON"));
+}

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+import JsonEditor from './JsonEditor';
+export { JsonEditor };

package/dist/esm/types.js

@@ -0,0 +1 @@
+export { };

package/dist/esm/utils.js

@@ -0,0 +1,37 @@
+export function stringifyJSON(obj) {
+    if (obj === null || obj === undefined) {
+        return '';
+    } else {
+        return JSON.stringify(obj, null, 4);
+    }
+}
+export function isValidJson(str) {
+    let parsed;
+    try {
+        parsed = JSON.parse(str);
+    } catch (e) {
+        return false;
+    }
+    if (typeof parsed !== 'object') {
+        return false;
+    }
+    return true;
+}
+export function parseJSON(str) {
+    if (str === '') {
+        return {
+            value: undefined,
+            valid: true
+        };
+    } else if (isValidJson(str)) {
+        return {
+            value: JSON.parse(str),
+            valid: true
+        };
+    } else {
+        return {
+            value: undefined,
+            valid: false
+        };
+    }
+}

package/dist/{JsonEditor.d.ts → types/JsonEditor.d.ts}

@@ -1,13 +1,13 @@
-/// <reference types="react" />
-import { FieldAPI } from '@contentful/field-editor-shared';
-export interface JsonEditorProps {
-    /**
-     * is the field disabled initially
-     */
-    isInitiallyDisabled: boolean;
-    /**
-     * sdk.field
-     */
-    field: FieldAPI;
-}
-export default function JsonEditor(props: JsonEditorProps): JSX.Element;
+import * as React from 'react';
+import { FieldAPI } from '@contentful/field-editor-shared';
+export interface JsonEditorProps {
+    /**
+     * is the field disabled initially
+     */
+    isInitiallyDisabled: boolean;
+    /**
+     * sdk.field
+     */
+    field: FieldAPI;
+}
+export default function JsonEditor(props: JsonEditorProps): React.JSX.Element;

package/dist/{JsonEditorField.d.ts → types/JsonEditorField.d.ts}

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-declare type JsonEditorFieldProps = {
-    isDisabled: boolean;
-    value: string;
-    onChange: (value: string) => void;
-};
-export declare function JsonEditorField(props: JsonEditorFieldProps): JSX.Element;
-export {};
+import * as React from 'react';
+type JsonEditorFieldProps = {
+    isDisabled: boolean;
+    value: string;
+    onChange: (value: string) => void;
+};
+export declare function JsonEditorField(props: JsonEditorFieldProps): React.JSX.Element;
+export {};

package/dist/{JsonEditorToolbar.d.ts → types/JsonEditorToolbar.d.ts}

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-declare type JsonEditorToolbarProps = {
-    isUndoDisabled: boolean;
-    isRedoDisabled: boolean;
-    onRedo: () => void;
-    onUndo: () => void;
-};
-export declare function JsonEditorToolbar(props: JsonEditorToolbarProps): JSX.Element;
-export {};
+import * as React from 'react';
+type JsonEditorToolbarProps = {
+    isUndoDisabled: boolean;
+    isRedoDisabled: boolean;
+    onRedo: () => void;
+    onUndo: () => void;
+};
+export declare function JsonEditorToolbar(props: JsonEditorToolbarProps): React.JSX.Element;
+export {};

package/dist/types/JsonInvalidStatus.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function JsonInvalidStatus(): React.JSX.Element;

package/dist/{index.d.ts → types/index.d.ts}

@@ -1,2 +1,2 @@
-import JsonEditor from './JsonEditor';
-export { JsonEditor };
+import JsonEditor from './JsonEditor';
+export { JsonEditor };

package/dist/types/types.d.ts

@@ -0,0 +1,7 @@
+export type JSONPrimitive = string | number | boolean | null;
+export type JSONValue = JSONPrimitive | JSONObject | JSONArray;
+export type JSONObject = {
+    [member: string]: JSONValue;
+};
+export interface JSONArray extends Array<JSONValue> {
+}

package/dist/{utils.d.ts → types/utils.d.ts}

@@ -1,7 +1,7 @@
-import { JSONObject } from './types';
-export declare function stringifyJSON(obj: JSONObject | null | undefined): string;
-export declare function isValidJson(str: string): boolean;
-export declare function parseJSON(str: string): {
-    valid: boolean;
-    value?: JSONObject;
-};
+import { JSONObject } from './types';
+export declare function stringifyJSON(obj: JSONObject | null | undefined): string;
+export declare function isValidJson(str: string): boolean;
+export declare function parseJSON(str: string): {
+    valid: boolean;
+    value?: JSONObject;
+};

package/package.json

@@ -1,9 +1,17 @@
 {
   "name": "@contentful/field-editor-json",
-  "version": "3.1.7",
-  "main": "dist/index.js",
-  "module": "dist/field-editor-json.esm.js",
-  "typings": "dist/index.d.ts",
+  "version": "3.3.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/esm/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "dist"
   ],
@@ -14,15 +22,21 @@
     "url": "https://github.com/contentful/field-editors"
   },
   "scripts": {
-    "watch": "tsdx watch",
-    "build": "tsdx build",
+    "watch": "yarn concurrently \"yarn:watch:*\"",
+    "watch:cjs": "yarn build:cjs -w",
+    "watch:esm": "yarn build:esm -w",
+    "watch:types": "yarn build:types --watch",
+    "build": "yarn build:types && yarn build:cjs && yarn build:esm",
+    "build:types": "tsc --outDir dist/types --emitDeclarationOnly",
+    "build:cjs": "swc src --config-file ../../.swcrc -d dist/cjs -C module.type=commonjs",
+    "build:esm": "swc src --config-file ../../.swcrc -d dist/esm",
     "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.8",
+    "@contentful/field-editor-shared": "^1.3.0",
     "@types/deep-equal": "1.0.1",
     "@types/react-codemirror": "1.0.3",
     "@uiw/react-codemirror": "^4.11.4",
@@ -32,10 +46,10 @@
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@contentful/field-editor-test-utils": "^1.2.7"
+    "@contentful/field-editor-test-utils": "^1.4.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
-  "gitHead": "4fff7b9534374dcc44cb477240d369fc34f46415"
+  "gitHead": "543e02672a8dd4edc810f9f3568d6b69c454e1f9"
 }