@contentful/field-editor-markdown 1.2.1 → 1.3.0

package/dist/esm/dialogs/EmdebExternalContentDialog.js

@@ -0,0 +1,140 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { ModalContent, ModalControls, Text, TextLink, Button, Checkbox, Radio, Form, FormControl, TextInput } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+import { MarkdownDialogType } from '../types';
+import { isValidUrl } from '../utils/isValidUrl';
+const styles = {
+    widthFiledGroup: css({
+        display: 'flex',
+        flexWrap: 'nowrap',
+        alignItems: 'flex-start'
+    }),
+    radioButtonGroup: css({
+        display: 'inline-flex',
+        alignItems: 'flex-start',
+        paddingTop: tokens.spacingXl
+    }),
+    radioButton: css({
+        marginLeft: tokens.spacingM
+    })
+};
+const makeEmbedlyLink = ({ url , width , selectedUnit , attachSocial  })=>{
+    const s = {
+        percent: '%',
+        px: 'px'
+    };
+    return [
+        '<a href="' + url + '" class="embedly-card" ',
+        'data-card-width="' + width + s[selectedUnit] + '" ',
+        'data-card-controls="' + (attachSocial ? '1' : '0') + '"',
+        '>Embedded content: ' + url + '</a>'
+    ].join('');
+};
+const isWidthValid = (width, unit)=>unit === 'percent' ? width <= 100 : true;
+export const EmbedExternalContentModal = ({ onClose  })=>{
+    const mainInputRef = useRef(null);
+    const [url, setUrl] = useState('https://');
+    const [selectedUnit, setUnit] = useState('percent');
+    const [urlIsValid, setUrlValidity] = useState(true);
+    const [width, setWidth] = useState('100');
+    const [attachSocial, setAttachSocial] = useState(false);
+    useEffect(()=>{
+        if (mainInputRef.current?.focus) {
+            mainInputRef.current.focus();
+        }
+    }, [
+        mainInputRef
+    ]);
+    return React.createElement(React.Fragment, null, React.createElement(ModalContent, {
+        testId: "embed-external-dialog"
+    }, React.createElement(Form, null, React.createElement(FormControl, {
+        id: "external-link-url-field",
+        isRequired: true,
+        isInvalid: !urlIsValid
+    }, React.createElement(FormControl.Label, null, "Content URL"), React.createElement(TextInput, {
+        name: "external-link-url",
+        value: url,
+        onChange: (e)=>{
+            const value = e.target.value;
+            setUrl(value);
+            setUrlValidity(isValidUrl(value));
+        },
+        testId: "external-link-url-field",
+        placeholder: "https://example.com",
+        ref: mainInputRef
+    }), React.createElement(FormControl.HelpText, null, "Include protocol (e.g. https://)"), !urlIsValid && React.createElement(FormControl.ValidationMessage, null, "URL is invalid")), React.createElement(TextLink, {
+        href: "http://embed.ly/providers",
+        target: "_blank",
+        rel: "noopener noreferrer"
+    }, "Supported sources"), React.createElement("div", {
+        className: styles.widthFiledGroup
+    }, React.createElement(FormControl, {
+        id: "embedded-content-width",
+        isRequired: true,
+        isInvalid: !isWidthValid(Number(width), selectedUnit)
+    }, React.createElement(FormControl.Label, null, "Width"), React.createElement(TextInput, {
+        value: width,
+        name: "embedded-content-width",
+        testId: "embedded-content-width",
+        type: "number",
+        width: "small",
+        onChange: (e)=>setWidth(e.target.value)
+    }), !isWidthValid(Number(width), selectedUnit) && React.createElement(FormControl.ValidationMessage, null, "Should be equal or less then 100")), React.createElement("div", {
+        className: styles.radioButtonGroup
+    }, React.createElement(Radio, {
+        id: "unit-option-percent",
+        value: "percent",
+        isChecked: selectedUnit === 'percent',
+        onChange: ()=>setUnit('percent'),
+        className: styles.radioButton
+    }, "percent"), React.createElement(Radio, {
+        id: "unit-option-pixels",
+        value: "pixels",
+        isChecked: selectedUnit === 'px',
+        onChange: ()=>setUnit('px'),
+        className: styles.radioButton
+    }, "pixels"))), React.createElement(Checkbox, {
+        id: "attach-social-checkbox",
+        name: "attach-social-checkbox",
+        value: "Yes",
+        isChecked: attachSocial,
+        onChange: ()=>setAttachSocial(!attachSocial),
+        testId: "attach-social-checkbox"
+    }, "Attach social sharing links to this element"), React.createElement(Text, {
+        as: "p",
+        fontColor: "gray500",
+        marginTop: "spacingXs"
+    }, "To enable this embedded content in your application make sure to add the\xa0", React.createElement(TextLink, {
+        href: "http://embed.ly/docs/products/cards",
+        target: "_blank",
+        rel: "noopener noreferrer"
+    }, "Embedly's platform.js"), "\xa0on your development environment"))), React.createElement(ModalControls, null, React.createElement(Button, {
+        testId: "emded-external-cancel",
+        onClick: ()=>onClose(false),
+        variant: "secondary",
+        size: "small"
+    }, "Cancel"), React.createElement(Button, {
+        testId: "embed-external-confirm",
+        onClick: ()=>onClose(makeEmbedlyLink({
+                url,
+                width: Number(width),
+                selectedUnit,
+                attachSocial
+            })),
+        variant: "positive",
+        size: "small"
+    }, "Insert")));
+};
+export const openEmbedExternalContentDialog = (dialogs)=>{
+    return dialogs.openCurrent({
+        title: 'Embed external content',
+        width: 'large',
+        minHeight: '435px',
+        shouldCloseOnEscapePress: true,
+        shouldCloseOnOverlayClick: true,
+        parameters: {
+            type: MarkdownDialogType.embedExternalContent
+        }
+    });
+};

package/dist/esm/dialogs/InsertLinkModalDialog.js

@@ -0,0 +1,92 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { ModalContent, ModalControls, Button, Form, FormControl, TextInput } from '@contentful/f36-components';
+import { MarkdownDialogType } from '../types';
+import { isValidUrl } from '../utils/isValidUrl';
+export const InsertLinkModal = ({ selectedText , onClose  })=>{
+    const mainInputRef = useRef(null);
+    const [text, setText] = useState(selectedText || '');
+    const [url, setUrl] = useState('');
+    const [touched, setTouched] = useState(false);
+    const [title, setTitle] = useState('');
+    const onInsert = (values)=>onClose(values);
+    const urlIsValid = isValidUrl(url);
+    useEffect(()=>{
+        if (mainInputRef?.current?.focus) {
+            mainInputRef.current.focus();
+        }
+    }, [
+        mainInputRef
+    ]);
+    return React.createElement(React.Fragment, null, React.createElement(ModalContent, {
+        testId: "insert-link-modal"
+    }, React.createElement(Form, {
+        onSubmit: ()=>onInsert({
+                url,
+                text,
+                title
+            })
+    }, React.createElement(FormControl, {
+        id: "link-text-field",
+        isDisabled: Boolean(selectedText)
+    }, React.createElement(FormControl.Label, null, "Link text"), React.createElement(TextInput, {
+        name: "link-text",
+        value: text,
+        onChange: (e)=>{
+            setText(e.target.value);
+        },
+        testId: "link-text-field"
+    })), React.createElement(FormControl, {
+        id: "target-url-field",
+        isInvalid: touched && !urlIsValid
+    }, React.createElement(FormControl.Label, null, "Target URL"), React.createElement(TextInput, {
+        name: "target-url",
+        value: url,
+        onChange: (e)=>{
+            setUrl(e.target.value);
+            setTouched(true);
+        },
+        placeholder: "https://",
+        maxLength: 2100,
+        testId: "target-url-field",
+        ref: mainInputRef
+    }), React.createElement(FormControl.HelpText, null, "Include protocol (e.g. https://)"), touched && !urlIsValid && React.createElement(FormControl.ValidationMessage, null, "Invalid URL")), React.createElement(FormControl, {
+        id: "link-title-field"
+    }, React.createElement(FormControl.Label, null, "Link title"), React.createElement(TextInput, {
+        name: "link-title",
+        value: title,
+        onChange: (e)=>{
+            setTitle(e.target.value);
+        },
+        testId: "link-title-field"
+    }), React.createElement(FormControl.HelpText, null, "Extra link information, usually shown as a tooltip on mouse hover")))), React.createElement(ModalControls, null, React.createElement(Button, {
+        testId: "insert-link-cancel",
+        onClick: ()=>onClose(false),
+        variant: "secondary",
+        size: "small"
+    }, "Cancel"), React.createElement(Button, {
+        testId: "insert-link-confirm",
+        onClick: ()=>{
+            onInsert({
+                url,
+                text,
+                title
+            });
+        },
+        isDisabled: !urlIsValid,
+        variant: "positive",
+        size: "small"
+    }, "Insert")));
+};
+export const openInsertLinkDialog = (dialogs, params)=>{
+    return dialogs.openCurrent({
+        title: 'Insert link',
+        width: 'large',
+        minHeight: '410px',
+        shouldCloseOnEscapePress: true,
+        shouldCloseOnOverlayClick: true,
+        parameters: {
+            type: MarkdownDialogType.insertLink,
+            ...params
+        }
+    });
+};

package/dist/esm/dialogs/InsertTableModalDialog.js

@@ -0,0 +1,78 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { ModalContent, ModalControls, Button, Form, FormControl, TextInput } from '@contentful/f36-components';
+import inRange from 'lodash/inRange';
+import { MarkdownDialogType } from '../types';
+export const InsertTableModal = ({ onClose  })=>{
+    const mainInputRef = useRef(null);
+    const [rows, setRows] = useState(2);
+    const [cols, setColumns] = useState(1);
+    const rowsAreValid = inRange(rows, 2, 100);
+    const colsAreValid = inRange(cols, 1, 100);
+    useEffect(()=>{
+        if (mainInputRef.current?.focus) {
+            mainInputRef.current.focus();
+        }
+    }, [
+        mainInputRef
+    ]);
+    return React.createElement(React.Fragment, null, React.createElement(ModalContent, {
+        testId: "insert-table-modal"
+    }, React.createElement(Form, null, React.createElement(FormControl, {
+        id: "insert-table-rows-number-field",
+        isRequired: true,
+        isInvalid: !rowsAreValid
+    }, React.createElement(FormControl.Label, null, "Number of rows"), React.createElement(TextInput, {
+        name: "rows",
+        value: rows.toString(),
+        onChange: (e)=>setRows(Number(e.target.value)),
+        testId: "insert-table-rows-number-field",
+        min: 2,
+        max: 100,
+        pattern: "[1-9][0-9]*",
+        type: "number",
+        width: "small",
+        autoComplete: "off",
+        ref: mainInputRef
+    }), !rowsAreValid && React.createElement(FormControl.ValidationMessage, null, "Should be between 2 and 100")), React.createElement(FormControl, {
+        id: "insert-table-columns-number-field",
+        isRequired: true,
+        isInvalid: !colsAreValid
+    }, React.createElement(FormControl.Label, null, "Number of columns"), React.createElement(TextInput, {
+        name: "columns",
+        value: cols.toString(),
+        onChange: (e)=>setColumns(Number(e.target.value)),
+        testId: "insert-table-columns-number-field",
+        min: 1,
+        max: 100,
+        pattern: "[1-9][0-9]*",
+        type: "number",
+        width: "small",
+        autoComplete: "off"
+    }), !colsAreValid && React.createElement(FormControl.ValidationMessage, null, "Should be between 1 and 100")))), React.createElement(ModalControls, null, React.createElement(Button, {
+        testId: "insert-table-cancel",
+        onClick: ()=>onClose(false),
+        variant: "secondary",
+        size: "small"
+    }, "Cancel"), React.createElement(Button, {
+        testId: "insert-table-confirm",
+        onClick: ()=>onClose({
+                rows,
+                cols
+            }),
+        variant: "positive",
+        size: "small",
+        isDisabled: !rowsAreValid || !colsAreValid
+    }, "Insert")));
+};
+export const openInsertTableDialog = (dialogs)=>{
+    return dialogs.openCurrent({
+        title: 'Insert table',
+        width: 'medium',
+        minHeight: '260px',
+        shouldCloseOnEscapePress: true,
+        shouldCloseOnOverlayClick: true,
+        parameters: {
+            type: MarkdownDialogType.insertTable
+        }
+    });
+};

package/dist/esm/dialogs/SpecialCharacterModalDialog.js

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { ModalContent, ModalControls, Text, Flex, Button, Tooltip } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+import { MarkdownDialogType } from '../types';
+import { specialCharacters } from '../utils/specialCharacters';
+const styles = {
+    buttonPanel: css({
+        display: 'flex',
+        flexWrap: 'wrap'
+    }),
+    charButton: css({
+        border: `1px solid ${tokens.gray500}`,
+        width: '4.1rem',
+        height: '4.1rem',
+        fontSize: tokens.fontSizeXl,
+        marginTop: tokens.spacing2Xs,
+        marginRight: tokens.spacing2Xs
+    }),
+    selectedCharButton: css({
+        backgroundColor: tokens.gray100
+    }),
+    tooltip: css({
+        zIndex: 1000
+    }),
+    button: css({
+        marginTop: tokens.spacingM,
+        marginRight: tokens.spacingS
+    })
+};
+export const SpecialCharacterModalDialog = ({ onClose  })=>{
+    const [selectedCharacter, setSelectedCharacter] = useState(specialCharacters[0]);
+    return React.createElement(React.Fragment, null, React.createElement(ModalContent, {
+        testId: "insert-special-character-modal"
+    }, React.createElement(Flex, {
+        flexDirection: "column",
+        alignItems: "center"
+    }, React.createElement(Text, {
+        as: "div",
+        lineHeight: "lineHeight3Xl",
+        fontSize: "fontSize3Xl",
+        marginBottom: "spacingS"
+    }, String.fromCharCode(selectedCharacter.code)), React.createElement(Text, {
+        as: "div",
+        marginBottom: "spacingS"
+    }, selectedCharacter.desc)), React.createElement("div", {
+        className: styles.buttonPanel
+    }, specialCharacters.map((char)=>React.createElement("div", {
+            key: char.code
+        }, React.createElement(Tooltip, {
+            className: styles.tooltip,
+            content: char.desc
+        }, React.createElement(Button, {
+            testId: "special-character-button",
+            isActive: char.code === selectedCharacter.code,
+            className: styles.charButton,
+            variant: "transparent",
+            onClick: ()=>setSelectedCharacter(char)
+        }, String.fromCharCode(char.code))))))), React.createElement(ModalControls, null, React.createElement(Button, {
+        testId: "insert-character-cancel",
+        className: styles.button,
+        onClick: ()=>onClose(false),
+        variant: "secondary",
+        size: "small"
+    }, "Cancel"), React.createElement(Button, {
+        className: styles.button,
+        testId: "insert-character-confirm",
+        onClick: ()=>onClose(String.fromCharCode(selectedCharacter.code)),
+        variant: "positive",
+        size: "small"
+    }, "Insert selected")));
+};
+export const openInsertSpecialCharacter = (dialogs)=>{
+    return dialogs.openCurrent({
+        title: 'Insert special character',
+        width: 'large',
+        minHeight: '600px',
+        shouldCloseOnEscapePress: true,
+        shouldCloseOnOverlayClick: true,
+        parameters: {
+            type: MarkdownDialogType.insertSpecialCharacter
+        }
+    });
+};

package/dist/esm/dialogs/ZenModeModalDialog.js

@@ -0,0 +1,195 @@
+import * as React from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@contentful/f36-icons';
+import tokens from '@contentful/f36-tokens';
+import { css, cx } from 'emotion';
+import { MarkdownBottomBar, MarkdownHelp } from '../components/MarkdownBottomBar';
+import { MarkdownPreview } from '../components/MarkdownPreview';
+import { MarkdownTextarea } from '../components/MarkdownTextarea/MarkdownTextarea';
+import { MarkdownToolbar } from '../components/MarkdownToolbar';
+import { openCheatsheetModal } from '../dialogs/CheatsheetModalDialog';
+import { createMarkdownActions } from '../MarkdownActions';
+import { MarkdownDialogType } from '../types';
+const styles = {
+    root: css({
+        position: 'fixed',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+    }),
+    topSplit: css({
+        position: 'fixed',
+        top: 0,
+        height: '48px',
+        left: 0,
+        right: 0
+    }),
+    bottomSplit: css({
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: '36px'
+    }),
+    editorSplit: css({
+        width: '50%',
+        position: 'fixed',
+        top: '48px',
+        left: 0,
+        bottom: '36px',
+        overflowX: 'hidden',
+        overflowY: 'scroll'
+    }),
+    editorSplitFullscreen: css({
+        left: 0,
+        right: 0,
+        width: '100%'
+    }),
+    previewSplit: css({
+        width: '50%',
+        position: 'fixed',
+        top: '48px',
+        right: 0,
+        bottom: '36px',
+        overflowX: 'hidden',
+        overflowY: 'scroll'
+    }),
+    separator: css({
+        position: 'fixed',
+        top: '48px',
+        bottom: '36px',
+        width: '1px',
+        background: tokens.gray400,
+        left: '50%'
+    }),
+    button: css({
+        position: 'fixed',
+        cursor: 'pointer',
+        zIndex: 105,
+        top: '49%',
+        height: '30px',
+        backgroundColor: tokens.gray100,
+        border: `1px solid ${tokens.gray400}`,
+        padding: 0
+    }),
+    hideButton: css({
+        left: '50%'
+    }),
+    showButton: css({
+        right: 0,
+        borderRightWidth: 0
+    }),
+    icon: css({
+        verticalAlign: 'middle'
+    })
+};
+export const ZenModeModalDialog = (props)=>{
+    const [currentValue, setCurrentValue] = React.useState(props.initialValue ?? '');
+    const [showPreview, setShowPreview] = React.useState(true);
+    const [editor, setEditor] = React.useState(null);
+    React.useEffect(()=>{
+        props.sdk?.window?.updateHeight('100%');
+    }, []);
+    React.useEffect(()=>{
+        setTimeout(()=>{
+            editor?.setFullsize();
+            editor?.refresh();
+        }, 150);
+    }, [
+        editor
+    ]);
+    const actions = React.useMemo(()=>{
+        return createMarkdownActions({
+            sdk: props.sdk,
+            editor,
+            locale: props.locale
+        });
+    }, [
+        editor
+    ]);
+    actions.closeZenMode = ()=>{
+        props.onClose({
+            value: currentValue,
+            cursor: editor?.getCursor()
+        });
+    };
+    const direction = props.sdk.locales.direction[props.locale] ?? 'ltr';
+    return React.createElement("div", {
+        className: styles.root,
+        "data-test-id": "zen-mode-markdown-editor"
+    }, React.createElement("div", {
+        className: styles.topSplit
+    }, React.createElement(MarkdownToolbar, {
+        mode: "zen",
+        disabled: false,
+        canUploadAssets: false,
+        actions: actions
+    })), React.createElement("div", {
+        className: cx(styles.editorSplit, {
+            [styles.editorSplitFullscreen]: showPreview === false
+        })
+    }, React.createElement(MarkdownTextarea, {
+        mode: "zen",
+        visible: true,
+        disabled: false,
+        direction: direction,
+        onReady: (editor)=>{
+            editor.setContent(props.initialValue ?? '');
+            editor.setReadOnly(false);
+            setEditor(editor);
+            editor.focus();
+            editor.events.onChange((value)=>{
+                setCurrentValue(value);
+                props.saveValueToSDK(value);
+            });
+        }
+    })), showPreview && React.createElement("div", {
+        className: styles.previewSplit
+    }, React.createElement(MarkdownPreview, {
+        direction: direction,
+        mode: "zen",
+        value: currentValue,
+        previewComponents: props.previewComponents
+    })), showPreview && React.createElement("div", {
+        className: styles.separator
+    }), showPreview && React.createElement("button", {
+        className: cx(styles.button, styles.hideButton),
+        "aria-label": "Hide preview",
+        onClick: ()=>{
+            setShowPreview(false);
+        }
+    }, React.createElement(ChevronRightIcon, {
+        variant: "muted",
+        size: "tiny",
+        className: styles.icon
+    })), !showPreview && React.createElement("button", {
+        className: cx(styles.button, styles.showButton),
+        "aria-label": "Show preview",
+        onClick: ()=>{
+            setShowPreview(true);
+        }
+    }, React.createElement(ChevronLeftIcon, {
+        variant: "muted",
+        size: "tiny",
+        className: styles.icon
+    })), React.createElement("div", {
+        className: styles.bottomSplit
+    }, React.createElement(MarkdownBottomBar, null, React.createElement(MarkdownHelp, {
+        onClick: ()=>{
+            openCheatsheetModal(props.sdk.dialogs);
+        }
+    }))));
+};
+export const openZenMode = (dialogs, options)=>{
+    return dialogs.openCurrent({
+        width: 'zen',
+        shouldCloseOnEscapePress: false,
+        minHeight: '100vh',
+        shouldCloseOnOverlayClick: false,
+        parameters: {
+            type: MarkdownDialogType.zenMode,
+            initialValue: options.initialValue,
+            locale: options.locale
+        }
+    });
+};

package/dist/esm/dialogs/openMarkdownDialog.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { ModalDialogLauncher } from '@contentful/field-editor-shared';
+import { MarkdownDialogType } from '../types';
+import { CheatsheetModalDialog } from './CheatsheetModalDialog';
+import { ConfirmInsertAssetModalDialog } from './ConfirmInsertAssetModalDialog';
+import { EmbedExternalContentModal } from './EmdebExternalContentDialog';
+import { InsertLinkModal } from './InsertLinkModalDialog';
+import { InsertTableModal } from './InsertTableModalDialog';
+import { SpecialCharacterModalDialog } from './SpecialCharacterModalDialog';
+import { ZenModeModalDialog } from './ZenModeModalDialog';
+export const openMarkdownDialog = (sdk, previewComponents)=>(options)=>{
+        if (options.parameters?.type === MarkdownDialogType.cheatsheet) {
+            return ModalDialogLauncher.openDialog(options, ()=>{
+                return React.createElement(CheatsheetModalDialog, null);
+            });
+        } else if (options.parameters?.type === MarkdownDialogType.insertLink) {
+            const selectedText = options.parameters.selectedText;
+            return ModalDialogLauncher.openDialog(options, ({ onClose  })=>{
+                return React.createElement(InsertLinkModal, {
+                    selectedText: selectedText,
+                    onClose: onClose
+                });
+            });
+        } else if (options.parameters?.type === MarkdownDialogType.insertSpecialCharacter) {
+            return ModalDialogLauncher.openDialog(options, ({ onClose  })=>{
+                return React.createElement(SpecialCharacterModalDialog, {
+                    onClose: onClose
+                });
+            });
+        } else if (options.parameters?.type === MarkdownDialogType.insertTable) {
+            return ModalDialogLauncher.openDialog(options, ({ onClose  })=>{
+                return React.createElement(InsertTableModal, {
+                    onClose: onClose
+                });
+            });
+        } else if (options.parameters?.type === MarkdownDialogType.embedExternalContent) {
+            return ModalDialogLauncher.openDialog(options, ({ onClose  })=>{
+                return React.createElement(EmbedExternalContentModal, {
+                    onClose: onClose
+                });
+            });
+        } else if (options.parameters?.type === MarkdownDialogType.confirmInsertAsset) {
+            const locale = options.parameters.locale;
+            const assets = options.parameters.assets;
+            return ModalDialogLauncher.openDialog(options, ({ onClose  })=>{
+                return React.createElement(ConfirmInsertAssetModalDialog, {
+                    onClose: onClose,
+                    locale: locale,
+                    assets: assets
+                });
+            });
+        } else if (options.parameters?.type === MarkdownDialogType.zenMode) {
+            const initialValue = options.parameters.initialValue;
+            const locale = options.parameters.locale;
+            return ModalDialogLauncher.openDialog(options, ({ onClose  })=>{
+                return React.createElement(ZenModeModalDialog, {
+                    saveValueToSDK: (value)=>{
+                        if (value) {
+                            return sdk?.field?.setValue(value);
+                        }
+                        return sdk?.field?.removeValue();
+                    },
+                    onClose: onClose,
+                    initialValue: initialValue,
+                    locale: locale,
+                    sdk: sdk,
+                    previewComponents: previewComponents
+                });
+            });
+        }
+        return Promise.reject();
+    };