@contentful/field-editor-markdown 1.5.1 → 1.5.3

package/dist/cjs/MarkdownEditor.js

@@ -81,7 +81,8 @@ const styles = {
     })
 };
 function MarkdownEditor(props) {
-    const [currentValue, setCurrentValue] = _react.useState(props.initialValue ?? '');
+    const prevExternalReset = _react.useRef(props.externalReset);
+    const [currentValue, setCurrentValue] = _react.useState(props.value ?? '');
     const [selectedTab, setSelectedTab] = _react.useState('editor');
     const [editor, setEditor] = _react.useState(null);
     const [canUploadAssets, setCanUploadAssets] = _react.useState(false);
@@ -108,6 +109,16 @@ function MarkdownEditor(props) {
         editor,
         props.disabled
     ]);
+    _react.useEffect(()=>{
+        if (props.externalReset !== prevExternalReset.current) {
+            prevExternalReset.current = props.externalReset;
+            editor?.setContent(props.value ?? '');
+        }
+    }, [
+        props.value,
+        props.externalReset,
+        editor
+    ]);
     const isActionDisabled = editor === null || props.disabled || selectedTab !== 'editor';
     const direction = props.sdk.locales.direction[props.sdk.field.locale] ?? 'ltr';
     const actions = _react.useMemo(()=>{
@@ -142,7 +153,7 @@ function MarkdownEditor(props) {
         disabled: isActionDisabled,
         direction: direction,
         onReady: (editor)=>{
-            editor.setContent(props.initialValue ?? '');
+            editor.setContent(props.value ?? '');
             editor.setReadOnly(props.disabled);
             setEditor(editor);
             editor.events.onChange((value)=>{
@@ -172,13 +183,11 @@ function MarkdownEditorConnected(props) {
         debounce: 300,
         field: props.sdk.field,
         isInitiallyDisabled: props.isInitiallyDisabled
-    }, ({ value , disabled , setValue , externalReset  })=>{
-        return _react.createElement(MarkdownEditor, {
+    }, ({ value , disabled , setValue , externalReset  })=>_react.createElement(MarkdownEditor, {
             ...props,
-            key: `markdown-editor-${externalReset}`,
-            initialValue: value,
+            value: value,
             disabled: disabled,
-            saveValueToSDK: setValue
-        });
-    });
+            saveValueToSDK: setValue,
+            externalReset: externalReset
+        }));
 }

package/dist/esm/MarkdownEditor.js

@@ -19,7 +19,8 @@ const styles = {
     })
 };
 export function MarkdownEditor(props) {
-    const [currentValue, setCurrentValue] = React.useState(props.initialValue ?? '');
+    const prevExternalReset = React.useRef(props.externalReset);
+    const [currentValue, setCurrentValue] = React.useState(props.value ?? '');
     const [selectedTab, setSelectedTab] = React.useState('editor');
     const [editor, setEditor] = React.useState(null);
     const [canUploadAssets, setCanUploadAssets] = React.useState(false);
@@ -46,6 +47,16 @@ export function MarkdownEditor(props) {
         editor,
         props.disabled
     ]);
+    React.useEffect(()=>{
+        if (props.externalReset !== prevExternalReset.current) {
+            prevExternalReset.current = props.externalReset;
+            editor?.setContent(props.value ?? '');
+        }
+    }, [
+        props.value,
+        props.externalReset,
+        editor
+    ]);
     const isActionDisabled = editor === null || props.disabled || selectedTab !== 'editor';
     const direction = props.sdk.locales.direction[props.sdk.field.locale] ?? 'ltr';
     const actions = React.useMemo(()=>{
@@ -80,7 +91,7 @@ export function MarkdownEditor(props) {
         disabled: isActionDisabled,
         direction: direction,
         onReady: (editor)=>{
-            editor.setContent(props.initialValue ?? '');
+            editor.setContent(props.value ?? '');
             editor.setReadOnly(props.disabled);
             setEditor(editor);
             editor.events.onChange((value)=>{
@@ -110,13 +121,11 @@ export function MarkdownEditorConnected(props) {
         debounce: 300,
         field: props.sdk.field,
         isInitiallyDisabled: props.isInitiallyDisabled
-    }, ({ value , disabled , setValue , externalReset  })=>{
-        return React.createElement(MarkdownEditor, {
+    }, ({ value , disabled , setValue , externalReset  })=>React.createElement(MarkdownEditor, {
             ...props,
-            key: `markdown-editor-${externalReset}`,
-            initialValue: value,
+            value: value,
             disabled: disabled,
-            saveValueToSDK: setValue
-        });
-    });
+            saveValueToSDK: setValue,
+            externalReset: externalReset
+        }));
 }

package/dist/types/MarkdownEditor.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldExtensionSDK } from '@contentful/app-sdk';
+import { FieldAppSDK } from '@contentful/app-sdk';
 import { PreviewComponents } from './types';
 export interface MarkdownEditorProps {
     /**
@@ -10,13 +10,14 @@ export interface MarkdownEditorProps {
      * Minimum height to set for the markdown text area and preview
      */
     minHeight?: string | number;
-    sdk: FieldExtensionSDK;
+    sdk: FieldAppSDK;
     previewComponents?: PreviewComponents;
     onReady?: Function;
 }
 export declare function MarkdownEditor(props: MarkdownEditorProps & {
     disabled: boolean;
-    initialValue: string | null | undefined;
+    value: string | null | undefined;
     saveValueToSDK: Function;
+    externalReset?: number;
 }): React.JSX.Element;
 export declare function MarkdownEditorConnected(props: MarkdownEditorProps): React.JSX.Element;

package/dist/types/__fixtures__/FakeSdk.d.ts

@@ -1,8 +1,8 @@
-import { FieldExtensionSDK } from '@contentful/app-sdk';
+import { FieldAppSDK } from '@contentful/app-sdk';
 import { Emitter } from 'mitt';
 export type ReferenceEditorSdkProps = {
     initialValue?: any;
     validations?: any;
     fetchDelay?: number;
 };
-export declare function newReferenceEditorFakeSdk(props?: ReferenceEditorSdkProps): [FieldExtensionSDK, Emitter];
+export declare function newReferenceEditorFakeSdk(props?: ReferenceEditorSdkProps): [FieldAppSDK, Emitter];

package/dist/types/components/MarkdownConstraints.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { FieldExtensionSDK } from '@contentful/app-sdk';
+import { FieldAppSDK } from '@contentful/app-sdk';
 export declare function MarkdownConstraints(props: {
-    sdk: FieldExtensionSDK;
+    sdk: FieldAppSDK;
     value: string;
 }): React.JSX.Element;

package/dist/types/dialogs/ZenModeModalDialog.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DialogExtensionSDK, DialogsAPI } from '@contentful/app-sdk';
+import { DialogAppSDK, DialogsAPI } from '@contentful/app-sdk';
 import { PreviewComponents } from '../types';
 export type ZenModeResult = {
     value: string;
@@ -13,7 +13,7 @@ type ZenModeDialogProps = {
     onClose: (result: ZenModeResult) => void;
     initialValue: string;
     locale: string;
-    sdk: DialogExtensionSDK;
+    sdk: DialogAppSDK;
     previewComponents?: PreviewComponents;
 };
 export declare const ZenModeModalDialog: (props: ZenModeDialogProps) => React.JSX.Element;

package/dist/types/dialogs/openMarkdownDialog.d.ts

@@ -1,5 +1,5 @@
-import { FieldExtensionSDK, OpenCustomWidgetOptions } from '@contentful/app-sdk';
+import { FieldAppSDK, OpenCustomWidgetOptions } from '@contentful/app-sdk';
 import { MarkdownDialogsParams, PreviewComponents } from '../types';
-export declare const openMarkdownDialog: (sdk: FieldExtensionSDK, previewComponents?: PreviewComponents) => (options: OpenCustomWidgetOptions & {
+export declare const openMarkdownDialog: (sdk: FieldAppSDK, previewComponents?: PreviewComponents) => (options: OpenCustomWidgetOptions & {
     parameters?: MarkdownDialogsParams;
 }) => Promise<unknown>;

package/dist/types/dialogs/renderMarkdownDialog.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { DialogExtensionSDK } from '@contentful/app-sdk';
+import { DialogAppSDK } from '@contentful/app-sdk';
 import { MarkdownDialogsParams } from '../types';
-export declare const renderMarkdownDialog: (sdk: DialogExtensionSDK & {
+export declare const renderMarkdownDialog: (sdk: DialogAppSDK & {
     parameters: {
         invocation: MarkdownDialogsParams;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-markdown",
-  "version": "1.5.1",
+  "version": "1.5.3",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -38,7 +38,7 @@
     "@contentful/f36-components": "^4.0.27",
     "@contentful/f36-icons": "^4.1.0",
     "@contentful/f36-tokens": "^4.0.0",
-    "@contentful/field-editor-shared": "^1.4.1",
+    "@contentful/field-editor-shared": "^1.4.2",
     "@types/codemirror": "0.0.109",
     "codemirror": "^5.65.11",
     "constate": "^3.2.0",
@@ -51,12 +51,12 @@
   },
   "devDependencies": {
     "@babel/core": "^7.5.5",
-    "@contentful/app-sdk": "^4.2.0",
-    "@contentful/field-editor-test-utils": "^1.4.2"
+    "@contentful/app-sdk": "^4.17.1",
+    "@contentful/field-editor-test-utils": "^1.4.3"
   },
   "peerDependencies": {
-    "@contentful/app-sdk": "^4.2.0",
+    "@contentful/app-sdk": "^4.17.1",
     "react": ">=16.8.0"
   },
-  "gitHead": "0fc8da4aa8ad8603c3adf4bd77b26ba46de11e33"
+  "gitHead": "a237d46db90c24005efb544b1f256f86414cbc70"
 }