@contentful/field-editor-markdown 1.5.2 → 1.5.5

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/cjs/utils/linkOrganizer.js

@@ -30,7 +30,6 @@ _export(exports, {
 });
 const _extend = _interop_require_default(require("lodash/extend"));
 const _isObject = _interop_require_default(require("lodash/isObject"));
-const _isString = _interop_require_default(require("lodash/isString"));
 const _max = _interop_require_default(require("lodash/max"));
 const _isFinite = _interop_require_default(require("lodash/isFinite"));
 const _forEach = _interop_require_default(require("lodash/forEach"));
@@ -154,7 +153,7 @@ function makeFinder(type) {
     return (text)=>findAll(text, type).map(PROCESSORS[type]);
 }
 function findMaxLabelId(textOrLabels) {
-    if ((0, _isString.default)(textOrLabels)) {
+    if (textOrLabels != null && typeof textOrLabels.valueOf() === 'string') {
         textOrLabels = findLabels(textOrLabels);
     }
     const ids = textOrLabels.map((x)=>x.id).map((x)=>parseInt(x, 10)).filter((x)=>(0, _isFinite.default)(x) && x > 0);
@@ -173,7 +172,7 @@ function findAll(text, type) {
     return matches;
 }
 function hasTitle(link) {
-    return (0, _isObject.default)(link) && (0, _isString.default)(link.title) && link.title.length > 0;
+    return (0, _isObject.default)(link) && link.title !== null && typeof link.title.valueOf() === 'string' && link.title.length > 0;
 }
 function buildLabel(link, id) {
     let markup = '[' + id + ']: ' + link.href;

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/esm/utils/linkOrganizer.js

@@ -1,6 +1,5 @@
 import extend from 'lodash/extend';
 import isObject from 'lodash/isObject';
-import isString from 'lodash/isString';
 import max from 'lodash/max';
 import isFinite from 'lodash/isFinite';
 import forEach from 'lodash/forEach';
@@ -119,7 +118,7 @@ function makeFinder(type) {
     return (text)=>findAll(text, type).map(PROCESSORS[type]);
 }
 export function findMaxLabelId(textOrLabels) {
-    if (isString(textOrLabels)) {
+    if (textOrLabels != null && typeof textOrLabels.valueOf() === 'string') {
         textOrLabels = findLabels(textOrLabels);
     }
     const ids = textOrLabels.map((x)=>x.id).map((x)=>parseInt(x, 10)).filter((x)=>isFinite(x) && x > 0);
@@ -138,7 +137,7 @@ function findAll(text, type) {
     return matches;
 }
 function hasTitle(link) {
-    return isObject(link) && isString(link.title) && link.title.length > 0;
+    return isObject(link) && link.title !== null && typeof link.title.valueOf() === 'string' && link.title.length > 0;
 }
 function buildLabel(link, id) {
     let markup = '[' + id + ']: ' + link.href;

package/dist/types/MarkdownEditor.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { FieldAppSDK } from '@contentful/app-sdk';
 import { PreviewComponents } from './types';
 export interface MarkdownEditorProps {
@@ -16,7 +16,8 @@ export interface MarkdownEditorProps {
 }
 export declare function MarkdownEditor(props: MarkdownEditorProps & {
     disabled: boolean;
-    initialValue: string | null | undefined;
+    value: string | null | undefined;
     saveValueToSDK: Function;
-}): React.JSX.Element;
-export declare function MarkdownEditorConnected(props: MarkdownEditorProps): React.JSX.Element;
+    externalReset?: number;
+}): JSX.Element;
+export declare function MarkdownEditorConnected(props: MarkdownEditorProps): JSX.Element;

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

@@ -4,4 +4,4 @@ export declare const HeadingSelector: (props: {
     children: React.ReactElement;
     onSelect: (heading: HeadingType) => void;
     tooltip?: string | undefined;
-}) => React.JSX.Element;
+}) => JSX.Element;

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

@@ -1,9 +1,9 @@
-import * as React from 'react';
+/// <reference types="react" />
 interface InsertLinkSelectorProps {
     onSelectExisting: Function;
     onAddNew: Function;
     canAddNew: boolean;
     disabled: boolean;
 }
-export declare const InsertLinkSelector: (props: InsertLinkSelectorProps) => React.JSX.Element;
+export declare const InsertLinkSelector: (props: InsertLinkSelectorProps) => JSX.Element;
 export {};

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

@@ -3,13 +3,13 @@ import { MarkdownTab } from 'types';
 export declare function MarkdownCounter(props: {
     words: number;
     characters: number;
-}): React.JSX.Element;
+}): JSX.Element;
 type HelpMode = MarkdownTab | 'zen';
 export declare function MarkdownHelp(props: {
     onClick: () => void;
     mode: HelpMode;
-}): React.JSX.Element;
+}): JSX.Element;
 export declare function MarkdownBottomBar(props: {
     children: React.ReactNode;
-}): React.JSX.Element;
+}): JSX.Element;
 export {};

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

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

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

@@ -10,5 +10,5 @@ type MarkdownPreviewProps = {
     value: string;
     previewComponents?: PreviewComponents;
 };
-declare const MarkdownPreview: React.MemoExoticComponent<(props: MarkdownPreviewProps) => React.JSX.Element>;
+declare const MarkdownPreview: React.MemoExoticComponent<(props: MarkdownPreviewProps) => JSX.Element>;
 export default MarkdownPreview;

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

@@ -1,2 +1,2 @@
-import React from 'react';
-export default function MarkdownPreviewSkeleton(): React.JSX.Element;
+/// <reference types="react" />
+export default function MarkdownPreviewSkeleton(): JSX.Element;

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { MarkdownTab } from '../types';
 interface MarkdownTabsProps {
     active: MarkdownTab;
     onSelect: (selected: MarkdownTab) => void;
 }
-export declare function MarkdownTabs(props: MarkdownTabsProps): React.JSX.Element;
+export declare function MarkdownTabs(props: MarkdownTabsProps): JSX.Element;
 export {};

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

@@ -13,5 +13,5 @@ type MarkdownTextareaProps = {
     visible: boolean;
     onReady: (editor: InitializedEditorType) => void;
 };
-export declare const MarkdownTextarea: React.MemoExoticComponent<(props: MarkdownTextareaProps) => React.JSX.Element>;
+export declare const MarkdownTextarea: React.MemoExoticComponent<(props: MarkdownTextareaProps) => JSX.Element>;
 export {};

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

@@ -6,7 +6,7 @@ interface MarkdownToolbarProps {
     actions: MarkdownActions;
     mode: 'default' | 'zen';
 }
-export declare function DefaultMarkdownToolbar(props: MarkdownToolbarProps): React.JSX.Element;
-export declare function ZenMarkdownToolbar(props: MarkdownToolbarProps): React.JSX.Element;
-export declare const MarkdownToolbar: React.MemoExoticComponent<(props: MarkdownToolbarProps) => React.JSX.Element>;
+export declare function DefaultMarkdownToolbar(props: MarkdownToolbarProps): JSX.Element;
+export declare function ZenMarkdownToolbar(props: MarkdownToolbarProps): JSX.Element;
+export declare const MarkdownToolbar: React.MemoExoticComponent<(props: MarkdownToolbarProps) => JSX.Element>;
 export {};

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

@@ -1,18 +1,18 @@
-import * as React from 'react';
+/// <reference types="react" />
 type IconProps = {
     width?: number;
     height?: number;
     className?: string;
     label: string;
 };
-export declare const Zen: ({ label, ...rest }: IconProps) => React.JSX.Element;
-export declare const Strikethrough: ({ label, ...rest }: IconProps) => React.JSX.Element;
-export declare const Indent: ({ label, ...rest }: IconProps) => React.JSX.Element;
-export declare const Dedent: ({ label, ...rest }: IconProps) => React.JSX.Element;
-export declare const Cubes: ({ label, ...rest }: IconProps) => React.JSX.Element;
-export declare const Table: ({ label, ...rest }: IconProps) => React.JSX.Element;
-export declare const SpecialChar: ({ label, ...rest }: IconProps) => React.JSX.Element;
-export declare const OrgLinks: ({ label, ...rest }: IconProps) => React.JSX.Element;
-export declare const Undo: ({ label, ...rest }: IconProps) => React.JSX.Element;
-export declare const Redo: ({ label, ...rest }: IconProps) => React.JSX.Element;
+export declare const Zen: ({ label, ...rest }: IconProps) => JSX.Element;
+export declare const Strikethrough: ({ label, ...rest }: IconProps) => JSX.Element;
+export declare const Indent: ({ label, ...rest }: IconProps) => JSX.Element;
+export declare const Dedent: ({ label, ...rest }: IconProps) => JSX.Element;
+export declare const Cubes: ({ label, ...rest }: IconProps) => JSX.Element;
+export declare const Table: ({ label, ...rest }: IconProps) => JSX.Element;
+export declare const SpecialChar: ({ label, ...rest }: IconProps) => JSX.Element;
+export declare const OrgLinks: ({ label, ...rest }: IconProps) => JSX.Element;
+export declare const Undo: ({ label, ...rest }: IconProps) => JSX.Element;
+export declare const Redo: ({ label, ...rest }: IconProps) => JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { DialogsAPI } from '@contentful/app-sdk';
-export declare const CheatsheetModalDialog: () => React.JSX.Element;
+export declare const CheatsheetModalDialog: () => JSX.Element;
 export declare const openCheatsheetModal: (dialogs: DialogsAPI) => Promise<void>;

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { DialogsAPI } from '@contentful/app-sdk';
 interface ConfirmInsertAssetModalDialogProps {
     onClose: (result: boolean) => void;
@@ -10,7 +10,7 @@ interface ConfirmInsertAssetModalDialogProps {
     }>;
     locale: string;
 }
-export declare const ConfirmInsertAssetModalDialog: ({ onClose, assets, locale, }: ConfirmInsertAssetModalDialogProps) => React.JSX.Element;
+export declare const ConfirmInsertAssetModalDialog: ({ onClose, assets, locale, }: ConfirmInsertAssetModalDialogProps) => JSX.Element;
 export declare const openConfirmInsertAsset: (dialogs: DialogsAPI, options: {
     locale: string;
     assets: Array<{

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

@@ -1,9 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import { DialogsAPI } from '@contentful/app-sdk';
 export type EmbedExternalContentModalResult = string | false | undefined;
 type EmbedExternalContentModalProps = {
     onClose: (result: EmbedExternalContentModalResult) => void;
 };
-export declare const EmbedExternalContentModal: ({ onClose }: EmbedExternalContentModalProps) => React.JSX.Element;
+export declare const EmbedExternalContentModal: ({ onClose }: EmbedExternalContentModalProps) => JSX.Element;
 export declare const openEmbedExternalContentDialog: (dialogs: DialogsAPI) => Promise<EmbedExternalContentModalResult>;
 export {};

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { DialogsAPI } from '@contentful/app-sdk';
 type InsertLinkModalPositiveResult = {
     url: string;
@@ -10,7 +10,7 @@ type InsertLinkModalProps = {
     selectedText?: string;
     onClose: (result: InsertLinkModalResult) => void;
 };
-export declare const InsertLinkModal: ({ selectedText, onClose }: InsertLinkModalProps) => React.JSX.Element;
+export declare const InsertLinkModal: ({ selectedText, onClose }: InsertLinkModalProps) => JSX.Element;
 export declare const openInsertLinkDialog: (dialogs: DialogsAPI, params: {
     selectedText?: string;
 }) => Promise<InsertLinkModalResult>;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { DialogsAPI } from '@contentful/app-sdk';
 type InsertTableModalPositiveResult = {
     cols: number;
@@ -8,6 +8,6 @@ export type InsertTableModalResult = InsertTableModalPositiveResult | false | un
 type InsertTableModalProps = {
     onClose: (result: InsertTableModalResult) => void;
 };
-export declare const InsertTableModal: ({ onClose }: InsertTableModalProps) => React.JSX.Element;
+export declare const InsertTableModal: ({ onClose }: InsertTableModalProps) => JSX.Element;
 export declare const openInsertTableDialog: (dialogs: DialogsAPI) => Promise<InsertTableModalResult>;
 export {};

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

@@ -1,9 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import { DialogsAPI } from '@contentful/app-sdk';
 export type SpecialCharacterModalResult = string | false | undefined;
 type SpecialCharacterModalDialogProps = {
     onClose: (result: SpecialCharacterModalResult) => void;
 };
-export declare const SpecialCharacterModalDialog: ({ onClose }: SpecialCharacterModalDialogProps) => React.JSX.Element;
+export declare const SpecialCharacterModalDialog: ({ onClose }: SpecialCharacterModalDialogProps) => JSX.Element;
 export declare const openInsertSpecialCharacter: (dialogs: DialogsAPI) => Promise<SpecialCharacterModalResult>;
 export {};

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { DialogAppSDK, DialogsAPI } from '@contentful/app-sdk';
 import { PreviewComponents } from '../types';
 export type ZenModeResult = {
@@ -16,7 +16,7 @@ type ZenModeDialogProps = {
     sdk: DialogAppSDK;
     previewComponents?: PreviewComponents;
 };
-export declare const ZenModeModalDialog: (props: ZenModeDialogProps) => React.JSX.Element;
+export declare const ZenModeModalDialog: (props: ZenModeDialogProps) => JSX.Element;
 export declare const openZenMode: (dialogs: DialogsAPI, options: {
     initialValue: string;
     locale: string;

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { DialogAppSDK } from '@contentful/app-sdk';
 import { MarkdownDialogsParams } from '../types';
 export declare const renderMarkdownDialog: (sdk: DialogAppSDK & {
     parameters: {
         invocation: MarkdownDialogsParams;
     };
-}) => React.JSX.Element;
+}) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-markdown",
-  "version": "1.5.2",
+  "version": "1.5.5",
   "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.2",
+    "@contentful/field-editor-shared": "^1.4.4",
     "@types/codemirror": "0.0.109",
     "codemirror": "^5.65.11",
     "constate": "^3.2.0",
@@ -52,11 +52,14 @@
   "devDependencies": {
     "@babel/core": "^7.5.5",
     "@contentful/app-sdk": "^4.17.1",
-    "@contentful/field-editor-test-utils": "^1.4.3"
+    "@contentful/field-editor-test-utils": "^1.4.5"
   },
   "peerDependencies": {
     "@contentful/app-sdk": "^4.17.1",
     "react": ">=16.8.0"
   },
-  "gitHead": "ef0adb263ad287e6f78888a05727d0f2f4f8968d"
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  },
+  "gitHead": "b1f62d6b934520b6d4dc328921dd500381d1e22c"
 }