@contentful/field-editor-markdown 1.2.1 → 1.3.0

package/dist/esm/components/MarkdownToolbar.js

@@ -0,0 +1,302 @@
+import * as React from 'react';
+import { Flex, IconButton, Tooltip } from '@contentful/f36-components';
+import { CodeIcon, FormatBoldIcon, FormatItalicIcon, HeadingIcon, HorizontalRuleIcon, LinkIcon, ListBulletedIcon, ListNumberedIcon, MoreHorizontalIcon, QuoteIcon } from '@contentful/f36-icons';
+import tokens from '@contentful/f36-tokens';
+import { css, cx } from 'emotion';
+import { HeadingSelector } from './HeadingSelector';
+import * as Icons from './icons';
+import { InsertLinkSelector } from './InsertLinkSelector';
+const styles = {
+    root: css({
+        position: 'relative',
+        zIndex: Number(tokens.zIndexWorkbenchHeader),
+        border: `1px solid ${tokens.gray400}`,
+        backgroundColor: tokens.gray100,
+        padding: tokens.spacingXs,
+        borderTopLeftRadius: tokens.borderRadiusSmall,
+        overflow: 'hidden'
+    }),
+    button: css({
+        height: '30px',
+        width: '36px',
+        marginLeft: tokens.spacing2Xs,
+        marginRight: tokens.spacing2Xs
+    }),
+    icon: css({
+        fill: tokens.gray700,
+        verticalAlign: 'middle'
+    }),
+    zenButton: css({
+        marginLeft: tokens.spacingXs
+    }),
+    zenButtonPressed: css({
+        backgroundColor: tokens.gray400
+    }),
+    tooltip: css({
+        zIndex: Number(tokens.zIndexTooltip)
+    })
+};
+const ToolbarButton = React.forwardRef((props, ref)=>{
+    const { tooltip , onClick , children , className , variant ='transparent' , tooltipPlace ='top' , isDisabled =false , ...otherProps } = props;
+    return React.createElement(Tooltip, {
+        className: styles.tooltip,
+        placement: tooltipPlace,
+        content: tooltip
+    }, React.createElement(IconButton, {
+        ...otherProps,
+        ref: ref,
+        className: cx(styles.button, className),
+        isDisabled: isDisabled,
+        onClick: onClick,
+        variant: variant,
+        size: "small",
+        icon: children,
+        "aria-label": tooltip
+    }));
+});
+ToolbarButton.displayName = 'ToolbarButton';
+function MainButtons(props) {
+    const tooltipPlace = props.mode === 'zen' ? 'bottom' : 'top';
+    return React.createElement(React.Fragment, null, React.createElement(HeadingSelector, {
+        onSelect: (heading)=>{
+            if (heading && props.actions.headings[heading]) {
+                props.actions.headings[heading]();
+            }
+        }
+    }, React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-heading",
+        tooltip: "Headings",
+        tooltipPlace: tooltipPlace
+    }, React.createElement(HeadingIcon, {
+        "aria-label": "Headings",
+        className: styles.icon
+    }))), React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-bold",
+        tooltip: "Bold",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.bold
+    }, React.createElement(FormatBoldIcon, {
+        "aria-label": "Bold",
+        className: styles.icon
+    })), React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-italic",
+        tooltip: "Italic",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.italic
+    }, React.createElement(FormatItalicIcon, {
+        "aria-label": "Italic",
+        className: styles.icon
+    })), React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-quote",
+        tooltip: "Quote",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.quote
+    }, React.createElement(QuoteIcon, {
+        "aria-label": "Quote",
+        className: styles.icon
+    })), React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-ul",
+        tooltip: "Unordered list",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.ul
+    }, React.createElement(ListBulletedIcon, {
+        "aria-label": "Unordered list",
+        className: styles.icon
+    })), React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-ol",
+        tooltip: "Ordered list",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.ol
+    }, React.createElement(ListNumberedIcon, {
+        "aria-label": "Ordered list",
+        className: styles.icon
+    })), React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-link",
+        tooltip: "Link",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.insertLink
+    }, React.createElement(LinkIcon, {
+        "aria-label": "Link",
+        className: styles.icon
+    })));
+}
+function AdditionalButtons(props) {
+    const tooltipPlace = props.mode === 'zen' ? 'bottom' : 'top';
+    return React.createElement(React.Fragment, null, React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-strike",
+        tooltip: "Strike out",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.strike
+    }, React.createElement(Icons.Strikethrough, {
+        label: "Strike out",
+        className: styles.icon
+    })), React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-code",
+        tooltip: "Code block",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.code
+    }, React.createElement(CodeIcon, {
+        "aria-label": "Code block",
+        className: styles.icon
+    })), React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-hr",
+        tooltip: "Horizontal rule",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.hr
+    }, React.createElement(HorizontalRuleIcon, {
+        "aria-label": "Horizontal rule",
+        className: styles.icon
+    })), React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-indent",
+        tooltip: "Increase indentation",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.indent
+    }, React.createElement(Icons.Indent, {
+        label: "Increase indentation",
+        className: styles.icon
+    })), React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-dedent",
+        tooltip: "Decrease indentation",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.simple.dedent
+    }, React.createElement(Icons.Dedent, {
+        label: "Decrease indentation",
+        className: styles.icon
+    })), React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-embed",
+        tooltip: "Embed external content",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.embedExternalContent
+    }, React.createElement(Icons.Cubes, {
+        label: "Embed external content",
+        className: styles.icon
+    })), React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-table",
+        tooltip: "Insert table",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.insertTable
+    }, React.createElement(Icons.Table, {
+        label: "Insert table",
+        className: styles.icon
+    })), React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-special",
+        tooltip: "Insert special character",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.insertSpecialCharacter
+    }, React.createElement(Icons.SpecialChar, {
+        label: "Insert special character",
+        className: styles.icon
+    })), React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-organizeLinks",
+        tooltip: "Organize links",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.organizeLinks
+    }, React.createElement(Icons.OrgLinks, {
+        label: "Organize links",
+        className: styles.icon
+    })), React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-undo",
+        tooltip: "Undo",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.history.undo
+    }, React.createElement(Icons.Undo, {
+        label: "Undo",
+        className: styles.icon
+    })), React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-redo",
+        tooltip: "Redo",
+        tooltipPlace: tooltipPlace,
+        onClick: props.actions.history.redo
+    }, React.createElement(Icons.Redo, {
+        label: "Redo",
+        className: styles.icon
+    })));
+}
+export function DefaultMarkdownToolbar(props) {
+    const [showAdditional, setShowAdditional] = React.useState(false);
+    return React.createElement("div", {
+        className: styles.root
+    }, React.createElement(Flex, {
+        justifyContent: "space-between",
+        flexWrap: "wrap"
+    }, React.createElement(Flex, {
+        flexWrap: "wrap"
+    }, React.createElement(MainButtons, props), React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-toggle-additional",
+        tooltip: showAdditional ? 'Hide additional actions' : 'More actions',
+        onClick: ()=>{
+            setShowAdditional(!showAdditional);
+        }
+    }, React.createElement(MoreHorizontalIcon, {
+        className: styles.icon
+    }))), React.createElement(Flex, null, React.createElement(InsertLinkSelector, {
+        disabled: props.disabled,
+        onSelectExisting: props.actions.linkExistingMedia,
+        onAddNew: props.actions.addNewMedia,
+        canAddNew: props.canUploadAssets
+    }), React.createElement(ToolbarButton, {
+        isDisabled: props.disabled,
+        testId: "markdown-action-button-zen",
+        variant: "secondary",
+        onClick: props.actions.openZenMode,
+        className: styles.zenButton,
+        tooltip: "Expand"
+    }, React.createElement(Icons.Zen, {
+        label: "Expand",
+        className: styles.icon
+    })))), showAdditional && React.createElement(Flex, {
+        justifyContent: "space-between",
+        marginTop: "spacingXs"
+    }, React.createElement(Flex, null, React.createElement(AdditionalButtons, props))));
+}
+export function ZenMarkdownToolbar(props) {
+    return React.createElement("div", {
+        className: styles.root
+    }, React.createElement(Flex, {
+        justifyContent: "space-between"
+    }, React.createElement(Flex, null, React.createElement(MainButtons, props), React.createElement(AdditionalButtons, props)), React.createElement(Flex, null, React.createElement(InsertLinkSelector, {
+        disabled: props.disabled,
+        onSelectExisting: props.actions.linkExistingMedia,
+        onAddNew: props.actions.addNewMedia,
+        canAddNew: props.canUploadAssets
+    }), React.createElement(IconButton, {
+        testId: "markdown-action-button-zen-close",
+        variant: "secondary",
+        size: "small",
+        className: cx(styles.zenButton, styles.zenButtonPressed),
+        onClick: ()=>{
+            props.actions.closeZenMode();
+        },
+        icon: React.createElement(Icons.Zen, {
+            label: "Collapse",
+            className: styles.icon
+        }),
+        "aria-label": "Collapse"
+    }))));
+}
+export const MarkdownToolbar = React.memo((props)=>{
+    if (props.mode === 'zen') {
+        return React.createElement(ZenMarkdownToolbar, props);
+    }
+    return React.createElement(DefaultMarkdownToolbar, props);
+});
+MarkdownToolbar.displayName = 'MarkdownToolbar';

package/dist/esm/components/icons.js

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { css } from 'emotion';
+const srOnly = css({
+    position: 'absolute',
+    width: '1px',
+    height: '1px',
+    padding: '0',
+    margin: '-1px',
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    border: '0'
+});
+export const Zen = ({ label , ...rest })=>React.createElement("svg", {
+        width: 14,
+        height: 14,
+        viewBox: "0 0 1792 1792",
+        ...rest
+    }, React.createElement("path", {
+        d: "M1411 541l-355 355 355 355 144-144q29-31 70-14 39 17 39 59v448q0 26-19 45t-45 19h-448q-42 0-59-40-17-39 14-69l144-144-355-355-355 355 144 144q31 30 14 69-17 40-59 40H192q-26 0-45-19t-19-45v-448q0-42 40-59 39-17 69 14l144 144 355-355-355-355-144 144q-19 19-45 19-12 0-24-5-40-17-40-59V192q0-26 19-45t45-19h448q42 0 59 40 17 39-14 69L541 381l355 355 355-355-144-144q-31-30-14-69 17-40 59-40h448q26 0 45 19t19 45v448q0 42-39 59-13 5-25 5-26 0-45-19z"
+    }), React.createElement("span", {
+        className: srOnly
+    }, label));
+export const Strikethrough = ({ label , ...rest })=>React.createElement("svg", {
+        width: 14,
+        height: 14,
+        viewBox: "0 0 1792 1792",
+        ...rest
+    }, React.createElement("path", {
+        d: "M1760 896q14 0 23 9t9 23v64q0 14-9 23t-23 9H32q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h1728zM483 832q-28-35-51-80-48-98-48-188 0-181 134-309 133-127 393-127 50 0 167 19 66 12 177 48 10 38 21 118 14 123 14 183 0 18-5 45l-12 3-84-6-14-2q-50-149-103-205-88-91-210-91-114 0-182 59-67 58-67 146 0 73 66 140t279 129q69 20 173 66 58 28 95 52H483zm507 256h411q7 39 7 92 0 111-41 212-23 56-71 104-37 35-109 81-80 48-153 66-80 21-203 21-114 0-195-23l-140-40q-57-16-72-28-8-8-8-22v-13q0-108-2-156-1-30 0-68l2-37v-44l102-2q15 34 30 71t22.5 56 12.5 27q35 57 80 94 43 36 105 57 59 22 132 22 64 0 139-27 77-26 122-86 47-61 47-129 0-84-81-157-34-29-137-71z"
+    }), React.createElement("span", {
+        className: srOnly
+    }, label));
+export const Indent = ({ label , ...rest })=>React.createElement("svg", {
+        width: 14,
+        height: 14,
+        viewBox: "0 0 1792 1792",
+        ...rest
+    }, React.createElement("path", {
+        d: "M352 832q0 14-9 23L55 1143q-9 9-23 9-13 0-22.5-9.5T0 1120V544q0-13 9.5-22.5T32 512q14 0 23 9l288 288q9 9 9 23zm1440 480v192q0 13-9.5 22.5t-22.5 9.5H32q-13 0-22.5-9.5T0 1504v-192q0-13 9.5-22.5T32 1280h1728q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5H672q-13 0-22.5-9.5T640 1120V928q0-13 9.5-22.5T672 896h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5T1760 768H672q-13 0-22.5-9.5T640 736V544q0-13 9.5-22.5T672 512h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5T1760 384H32q-13 0-22.5-9.5T0 352V160q0-13 9.5-22.5T32 128h1728q13 0 22.5 9.5t9.5 22.5z"
+    }), React.createElement("span", {
+        className: srOnly
+    }, label));
+export const Dedent = ({ label , ...rest })=>React.createElement("svg", {
+        width: 14,
+        height: 14,
+        viewBox: "0 0 1792 1792",
+        ...rest
+    }, React.createElement("path", {
+        d: "M384 544v576q0 13-9.5 22.5T352 1152q-14 0-23-9L41 855q-9-9-9-23t9-23l288-288q9-9 23-9 13 0 22.5 9.5T384 544zm1408 768v192q0 13-9.5 22.5t-22.5 9.5H32q-13 0-22.5-9.5T0 1504v-192q0-13 9.5-22.5T32 1280h1728q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5H672q-13 0-22.5-9.5T640 1120V928q0-13 9.5-22.5T672 896h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5T1760 768H672q-13 0-22.5-9.5T640 736V544q0-13 9.5-22.5T672 512h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5T1760 384H32q-13 0-22.5-9.5T0 352V160q0-13 9.5-22.5T32 128h1728q13 0 22.5 9.5t9.5 22.5z"
+    }), React.createElement("span", {
+        className: srOnly
+    }, label));
+export const Cubes = ({ label , ...rest })=>React.createElement("svg", {
+        width: 18,
+        height: 14,
+        viewBox: "0 0 2304 1792",
+        ...rest
+    }, React.createElement("path", {
+        d: "M640 1632l384-192v-314l-384 164v342zm-64-454l404-173-404-173-404 173zm1088 454l384-192v-314l-384 164v342zm-64-454l404-173-404-173-404 173zm-448-293l384-165V454l-384 164v267zm-64-379l441-189-441-189-441 189zm1088 518v416q0 36-19 67t-52 47l-448 224q-25 14-57 14t-57-14l-448-224q-4-2-7-4-2 2-7 4l-448 224q-25 14-57 14t-57-14L71 1554q-33-16-52-47t-19-67v-416q0-38 21.5-70T78 906l434-186V320q0-38 21.5-70t56.5-48l448-192q23-10 50-10t50 10l448 192q35 16 56.5 48t21.5 70v400l434 186q36 16 57 48t21 70z"
+    }), React.createElement("span", {
+        className: srOnly
+    }, label));
+export const Table = ({ label , ...rest })=>React.createElement("svg", {
+        width: 14,
+        height: 14,
+        viewBox: "0 0 1792 1792",
+        ...rest
+    }, React.createElement("path", {
+        d: "M576 1376v-192q0-14-9-23t-23-9H224q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm0-384V800q0-14-9-23t-23-9H224q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384v-192q0-14-9-23t-23-9H736q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zM576 608V416q0-14-9-23t-23-9H224q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384V800q0-14-9-23t-23-9H736q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384v-192q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm-512-768V416q0-14-9-23t-23-9H736q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384V800q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm0-384V416q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm128-320v1088q0 66-47 113t-113 47H224q-66 0-113-47t-47-113V288q0-66 47-113t113-47h1344q66 0 113 47t47 113z"
+    }), React.createElement("span", {
+        className: srOnly
+    }, label));
+export const SpecialChar = ({ label , ...rest })=>React.createElement("svg", {
+        width: 14,
+        height: 14,
+        viewBox: "0 0 1792 1792",
+        ...rest
+    }, React.createElement("path", {
+        d: "M1360 1307l35 159q3 12-3 22.5t-17 14.5l-5 1q-4 2-10.5 3.5t-16 4.5-21.5 5.5-25.5 5-30 5-33.5 4.5-36.5 3-38.5 1q-234 0-409-130.5T511 1054h-95q-13 0-22.5-9.5T384 1022V909q0-13 9.5-22.5T416 877h66q-2-57 1-105h-67q-14 0-23-9t-9-23V626q0-14 9-23t23-9h98q67-210 243.5-338T1158 128q102 0 194 23 11 3 20 15 6 11 3 24l-43 159q-3 13-14 19.5t-24 2.5l-4-1q-4-1-11.5-2.5L1261 364l-22.5-3.5-26-3-29-2.5-29.5-1q-126 0-226 64T778 594h468q16 0 25 12 10 12 7 26l-24 114q-5 26-32 26H734q-3 37 0 105h459q15 0 25 12 9 12 6 27l-24 112q-2 11-11 18.5t-20 7.5H782q48 117 149.5 185.5T1160 1308q18 0 36-1.5t33.5-3.5 29.5-4.5 24.5-5 18.5-4.5l12-3 5-2q13-5 26 2 12 7 15 21z"
+    }), React.createElement("span", {
+        className: srOnly
+    }, label));
+export const OrgLinks = ({ label , ...rest })=>React.createElement("svg", {
+        width: 14,
+        height: 14,
+        viewBox: "0 0 1792 1792",
+        ...rest
+    }, React.createElement("path", {
+        d: "M1792 1248v320q0 40-28 68t-68 28h-320q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h96V960H960v192h96q40 0 68 28t28 68v320q0 40-28 68t-68 28H736q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h96V960H320v192h96q40 0 68 28t28 68v320q0 40-28 68t-68 28H96q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h96V960q0-52 38-90t90-38h512V640h-96q-40 0-68-28t-28-68V224q0-40 28-68t68-28h320q40 0 68 28t28 68v320q0 40-28 68t-68 28h-96v192h512q52 0 90 38t38 90v192h96q40 0 68 28t28 68z"
+    }), React.createElement("span", {
+        className: srOnly
+    }, label));
+export const Undo = ({ label , ...rest })=>React.createElement("svg", {
+        width: 14,
+        height: 14,
+        viewBox: "0 0 1792 1792",
+        ...rest
+    }, React.createElement("path", {
+        d: "M1664 896q0 156-61 298t-164 245-245 164-298 61q-172 0-327-72.5T305 1387q-7-10-6.5-22.5t8.5-20.5l137-138q10-9 25-9 16 2 23 12 73 95 179 147t225 52q104 0 198.5-40.5T1258 1258t109.5-163.5T1408 896t-40.5-198.5T1258 534t-163.5-109.5T896 384q-98 0-188 35.5T548 521l137 138q31 30 14 69-17 40-59 40H192q-26 0-45-19t-19-45V256q0-42 40-59 39-17 69 14l130 129q107-101 244.5-156.5T896 128q156 0 298 61t245 164 164 245 61 298z"
+    }), React.createElement("span", {
+        className: srOnly
+    }, label));
+export const Redo = ({ label , ...rest })=>React.createElement("svg", {
+        width: 14,
+        height: 14,
+        viewBox: "0 0 1792 1792",
+        ...rest
+    }, React.createElement("path", {
+        d: "M1664 256v448q0 26-19 45t-45 19h-448q-42 0-59-40-17-39 14-69l138-138q-148-137-349-137-104 0-198.5 40.5T534 534 424.5 697.5 384 896t40.5 198.5T534 1258t163.5 109.5T896 1408q119 0 225-52t179-147q7-10 23-12 15 0 25 9l137 138q9 8 9.5 20.5t-7.5 22.5q-109 132-264 204.5T896 1664q-156 0-298-61t-245-164-164-245-61-298 61-298 164-245 245-164 298-61q147 0 284.5 55.5T1425 340l130-129q29-31 70-14 39 17 39 59z"
+    }), React.createElement("span", {
+        className: srOnly
+    }, label));

package/dist/esm/dialogs/CheatsheetModalDialog.js

@@ -0,0 +1,177 @@
+import * as React from 'react';
+import { Heading, ModalContent, TextLink } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { css, cx } from 'emotion';
+import { MarkdownDialogType } from '../types';
+const styles = {
+    flexColumnContainer: css({
+        display: 'flex',
+        flexWrap: 'nowrap'
+    }),
+    flexColumn: css({
+        flexGrow: 1
+    }),
+    verticalDivider: css({
+        borderRight: `1px solid ${tokens.gray500}`,
+        paddingRight: tokens.spacing3Xl,
+        marginRight: tokens.spacing2Xl
+    }),
+    preview: css({
+        display: 'inline-block',
+        paddingRight: tokens.spacingL,
+        width: '50%'
+    }),
+    unOrderedListPreview: css({
+        listStyleType: 'disc',
+        marginLeft: tokens.spacingS
+    }),
+    orderedListPreview: css({
+        listStyleType: 'decimal',
+        marginLeft: tokens.spacingS
+    }),
+    markup: css({
+        display: 'inline-block',
+        color: tokens.gray600,
+        paddingLeft: tokens.spacingL,
+        width: '50%'
+    }),
+    h1: css({
+        fontSize: tokens.fontSize2Xl
+    }),
+    h2: css({
+        fontSize: tokens.fontSizeXl
+    }),
+    h3: css({
+        fontSize: tokens.fontSizeL
+    }),
+    helpItem: css({
+        marginBottom: tokens.spacingS,
+        display: 'flex',
+        alignItems: 'flex-end',
+        height: tokens.spacingXl
+    }),
+    helpLink: css({
+        margin: 'auto'
+    }),
+    flexRowContainer: css({
+        display: 'flex',
+        width: '100%',
+        justifyContent: 'center',
+        marginTop: tokens.spacingXl
+    })
+};
+export const CheatsheetModalDialog = ()=>{
+    return React.createElement(ModalContent, {
+        testId: "markdown-cheatsheet-dialog-content"
+    }, React.createElement("div", {
+        className: styles.flexColumnContainer
+    }, React.createElement("div", {
+        className: cx(styles.flexColumn, styles.verticalDivider)
+    }, React.createElement("div", {
+        className: styles.helpItem
+    }, React.createElement(Heading, {
+        marginBottom: "none",
+        as: "h1",
+        className: cx(styles.preview, styles.h1)
+    }, "H1"), React.createElement("div", {
+        className: styles.markup
+    }, "# heading")), React.createElement("div", {
+        className: styles.helpItem
+    }, React.createElement(Heading, {
+        marginBottom: "none",
+        as: "h2",
+        className: cx(styles.preview, styles.h2)
+    }, "H2"), React.createElement("div", {
+        className: styles.markup
+    }, "## heading")), React.createElement("div", {
+        className: styles.helpItem
+    }, React.createElement(Heading, {
+        marginBottom: "none",
+        as: "h3",
+        className: cx(styles.preview, styles.h3)
+    }, "H3"), React.createElement("div", {
+        className: styles.markup
+    }, "### heading")), React.createElement("div", {
+        className: styles.helpItem
+    }, React.createElement("strong", {
+        className: styles.preview
+    }, "bold"), React.createElement("div", {
+        className: styles.markup
+    }, "__text__")), React.createElement("div", {
+        className: styles.helpItem
+    }, React.createElement("em", {
+        className: styles.preview
+    }, "italic"), React.createElement("div", {
+        className: styles.markup
+    }, "*text*")), React.createElement("div", {
+        className: styles.helpItem
+    }, React.createElement("div", {
+        className: styles.preview
+    }, "strikethrough"), React.createElement("div", {
+        className: styles.markup
+    }, "~~text~~")), React.createElement("div", {
+        className: styles.helpItem
+    }, React.createElement(TextLink, {
+        as: "button",
+        className: styles.preview
+    }, "Link"), React.createElement("div", {
+        className: styles.markup
+    }, "[text](url)"))), React.createElement("div", {
+        className: styles.flexColumn
+    }, React.createElement("div", {
+        className: styles.helpItem
+    }, React.createElement("div", {
+        className: styles.preview
+    }, "Image"), React.createElement("div", {
+        className: styles.markup
+    }, "![alt-text](url)")), React.createElement("div", {
+        className: styles.helpItem
+    }, React.createElement("div", {
+        className: styles.preview
+    }, "Unordered list"), React.createElement("div", {
+        className: styles.markup
+    }, "* list item")), React.createElement("div", {
+        className: styles.helpItem
+    }, React.createElement("div", {
+        className: styles.preview
+    }, React.createElement("div", null, "Ordered list")), React.createElement("div", {
+        className: styles.markup
+    }, "1. list item")), React.createElement("div", {
+        className: styles.helpItem
+    }, React.createElement("div", {
+        className: styles.preview
+    }, React.createElement("div", null, "Blockquote")), React.createElement("div", {
+        className: styles.markup
+    }, "> quote")), React.createElement("div", {
+        className: styles.helpItem
+    }, React.createElement("div", {
+        className: styles.preview
+    }, "code span"), React.createElement("div", {
+        className: styles.markup
+    }, "`code here`")), React.createElement("div", {
+        className: styles.helpItem
+    }, React.createElement("div", {
+        className: styles.preview
+    }, "code block"), React.createElement("div", {
+        className: styles.markup
+    }, "```code here```")))), React.createElement("div", {
+        className: styles.flexRowContainer
+    }, React.createElement(TextLink, {
+        className: styles.helpLink,
+        href: "https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax",
+        target: "_blank",
+        rel: "noopener noreferrer"
+    }, "View the full GitHub-flavored Markdown syntax help (opens in a new window)")));
+};
+export const openCheatsheetModal = (dialogs)=>{
+    return dialogs.openCurrent({
+        title: 'Markdown formatting help',
+        width: 'large',
+        minHeight: '415px',
+        shouldCloseOnEscapePress: true,
+        shouldCloseOnOverlayClick: true,
+        parameters: {
+            type: MarkdownDialogType.cheatsheet
+        }
+    });
+};

package/dist/esm/dialogs/ConfirmInsertAssetModalDialog.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Button, EntityList, ModalContent, ModalControls, Paragraph } from '@contentful/f36-components';
+import { MarkdownDialogType } from '../types';
+export const ConfirmInsertAssetModalDialog = ({ onClose , assets , locale  })=>{
+    const localesNumber = assets.length;
+    return React.createElement(React.Fragment, null, React.createElement(ModalContent, {
+        testId: "confirm-insert-asset"
+    }, React.createElement(Paragraph, null, localesNumber === 1 ? `Link asset with missing file for locale ${locale}` : `Link assets with missing files for locale ${locale}`), React.createElement(Paragraph, null, localesNumber === 1 ? 'Do you want to link to the file in its fallback locale?' : 'Do you want to link to the files in their fallback locales?'), React.createElement(EntityList, null, assets.map(({ title , description , thumbnailUrl , thumbnailAltText  })=>React.createElement(EntityList.Item, {
+            key: thumbnailUrl,
+            title: title,
+            thumbnailUrl: `${thumbnailUrl}?w=46&h=46&fit=thumb`,
+            thumbnailAltText: thumbnailAltText,
+            description: description
+        })))), React.createElement(ModalControls, null, React.createElement(Button, {
+        onClick: ()=>onClose(false),
+        variant: "secondary",
+        size: "small"
+    }, "Cancel"), React.createElement(Button, {
+        testId: "confirm-insert-asset",
+        onClick: ()=>onClose(true),
+        variant: "positive",
+        size: "small"
+    }, "Confirm")));
+};
+export const openConfirmInsertAsset = (dialogs, options)=>{
+    return dialogs.openCurrent({
+        title: 'Confirm using fallback assets',
+        width: 'medium',
+        minHeight: '270px',
+        shouldCloseOnEscapePress: true,
+        shouldCloseOnOverlayClick: true,
+        parameters: {
+            type: MarkdownDialogType.confirmInsertAsset,
+            ...options
+        }
+    });
+};