@contentful/field-editor-markdown 1.2.1 → 1.3.0

package/dist/field-editor-markdown.esm.js

@@ -1,3599 +0,0 @@
-import 'codemirror/mode/markdown/markdown';
-import 'codemirror/mode/xml/xml';
-import 'codemirror/addon/edit/continuelist';
-import 'codemirror/addon/mode/overlay';
-import 'codemirror/addon/display/autorefresh';
-import React, { useRef, useState, useEffect } from 'react';
-import tokens from '@contentful/f36-tokens';
-import { ConstraintsUtils, CharCounter, CharValidation, FieldConnector, ModalDialogLauncher } from '@contentful/field-editor-shared';
-import { css, cx } from 'emotion';
-import { Paragraph, TextLink, Menu, Button, Tooltip, IconButton, Flex, ModalContent, Heading, EntityList, ModalControls, Form, FormControl, TextInput, Radio, Checkbox, Text } from '@contentful/f36-components';
-import DOMPurify from 'dompurify';
-import Markdown from 'markdown-to-jsx';
-import CodeMirror from 'codemirror';
-import 'codemirror/addon/edit/matchbrackets';
-import throttle from 'lodash-es/throttle';
-import transform from 'lodash-es/transform';
-import get from 'lodash-es/get';
-import max from 'lodash-es/max';
-import min from 'lodash-es/min';
-import range from 'lodash-es/range';
-import times from 'lodash-es/times';
-import repeat from 'lodash-es/repeat';
-import { AssetIcon, ChevronDownIcon, MoreHorizontalIcon, HeadingIcon, FormatBoldIcon, FormatItalicIcon, QuoteIcon, ListBulletedIcon, ListNumberedIcon, LinkIcon, CodeIcon, HorizontalRuleIcon, ChevronRightIcon, ChevronLeftIcon } from '@contentful/f36-icons';
-import inRange from 'lodash-es/inRange';
-import isObject from 'lodash-es/isObject';
-import extend from 'lodash-es/extend';
-import isString from 'lodash-es/isString';
-import isFinite from 'lodash-es/isFinite';
-import forEach from 'lodash-es/forEach';
-
-const styles = {
-  root: /*#__PURE__*/css({
-    display: 'flex',
-    justifyContent: 'space-between',
-    background: tokens.gray100,
-    border: `1px solid ${tokens.gray400}`,
-    borderBottomLeftRadius: tokens.borderRadiusSmall,
-    borderBottomRightRadius: tokens.borderRadiusSmall,
-    padding: `${tokens.spacingXs} ${tokens.spacingS}`
-  }),
-  help: /*#__PURE__*/css({
-    color: tokens.gray700,
-    fontSize: tokens.fontSizeS,
-    button: {
-      fontSize: tokens.fontSizeS,
-      lineHeight: 'inherit'
-    }
-  })
-};
-function MarkdownHelp(props) {
-  return React.createElement(Paragraph, {
-    marginBottom: "none",
-    className: styles.help
-  }, "Format your text like a pro with the", ' ', React.createElement(TextLink, {
-    as: "button",
-    testId: "open-markdown-cheatsheet-button",
-    onClick: () => {
-      props.onClick();
-    }
-  }, "markdown cheatsheet"), ".");
-}
-function MarkdownBottomBar(props) {
-  return React.createElement("div", {
-    className: styles.root
-  }, props.children);
-}
-
-const styles$1 = {
-  root: /*#__PURE__*/css({
-    display: 'flex',
-    justifyContent: 'space-between',
-    fontSize: tokens.fontSizeM,
-    marginTop: tokens.spacingXs,
-    color: tokens.gray700
-  })
-};
-function MarkdownConstraints(props) {
-  const constraints = ConstraintsUtils.fromFieldValidations(props.sdk.field.validations, props.sdk.field.type);
-  const checkConstraint = ConstraintsUtils.makeChecker(constraints);
-  return React.createElement("div", {
-    className: styles$1.root
-  }, React.createElement(CharCounter, {
-    value: props.value,
-    checkConstraint: checkConstraint
-  }), React.createElement(CharValidation, {
-    constraints: constraints
-  }));
-}
-
-// This code will replace '&' with '&' only inside the href attribute of the mailto link.
-// Otherwise the mailto link will not work correctly
-const replaceMailtoAmp = string => {
-  return string.replace(/href="mailto:[^"]*&/g, function (match) {
-    return match.replace(/&/g, '&');
-  });
-};
-
-const styles$2 = {
-  root: css`
-    border: 1px solid ${tokens.gray400};
-    border-width: 0 1px;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    min-height: 300px;
-    padding: ${tokens.spacingL};
-    font-size: ${tokens.fontSizeM};
-    font-family: ${tokens.fontStackPrimary};
-    line-height: ${tokens.lineHeightDefault};
-    color: ${tokens.gray700};
-    white-space: pre-line;
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      margin-top: ${tokens.spacingL};
-      margin-bottom: ${tokens.spacingM};
-      color: ${tokens.gray900};
-    }
-
-    h1:first-child,
-    h2:first-child,
-    h3:first-child,
-    h4:first-child,
-    h5:first-child,
-    h6:first-child {
-      margin-top: 0;
-    }
-
-    h1 {
-      font-size: 1.9em;
-    }
-    h2 {
-      font-size: 1.75em;
-    }
-    h3 {
-      font-size: 1.6em;
-    }
-    h4 {
-      font-size: 1.45em;
-    }
-    h5 {
-      font-size: 1.3em;
-    }
-    h6 {
-      font-size: 1.15em;
-    }
-
-    p {
-      margin-top: 0;
-      margin-bottom: ${tokens.spacingM};
-    }
-
-    ul,
-    ol {
-      margin: ${tokens.spacingS} 0;
-      padding-left: ${tokens.spacingM};
-    }
-    ul > li {
-      list-style-type: disc;
-      margin-bottom: 0;
-    }
-
-    ol > li {
-      list-style-type: decimal;
-      margin-bottom: 0;
-    }
-
-    table {
-      table-layout: fixed;
-      border-right-width: 0;
-      border-bottom-width: 0;
-      width: 80%;
-      margin: ${tokens.spacingM} auto;
-      border-spacing: 0;
-      border-collapse: collapse;
-      border: 1px solid ${tokens.gray300};
-    }
-
-    table th,
-    table td {
-      padding: 5px;
-      border-left-width: 0;
-      border-top-width: 0;
-    }
-
-    table th {
-      background: ${tokens.gray200};
-    }
-
-    table td {
-      border: 1px solid ${tokens.gray300};
-    }
-
-    a {
-      color: ${tokens.blue500};
-    }
-
-    hr {
-      margin-top: ${tokens.spacingL};
-      margin-bottom: ${tokens.spacingL};
-      height: 1px;
-      background-color: ${tokens.gray300};
-      border: none;
-    }
-
-    blockquote {
-      border-left: 4px solid ${tokens.gray200};
-      padding-left: ${tokens.spacingL};
-      margin: 0;
-      margin-top: ${tokens.spacingM};
-      font-style: italic;
-    }
-
-    img {
-      margin: ${tokens.spacingM} auto;
-      display: block;
-      max-width: 80%;
-      max-height: 250px;
-    }
-
-    pre code {
-      font-size: ${tokens.fontSizeS};
-      font-family: ${tokens.fontStackMonospace};
-    }
-
-    .embedly-card {
-      margin: ${tokens.spacingM} auto;
-      display: block;
-    }
-  `,
-  framed: /*#__PURE__*/css({
-    height: '100%',
-    maxHeight: '500px',
-    overflowY: 'auto'
-  }),
-  zen: /*#__PURE__*/css({
-    maxWidth: '650px',
-    margin: '0 auto',
-    border: 'none !important'
-  }),
-  rtl: /*#__PURE__*/css({
-    direction: 'rtl'
-  })
-};
-
-function MarkdownLink(props) {
-  const {
-    Embedly,
-    children,
-    ...rest
-  } = props;
-
-  if (props.className === 'embedly-card' && Embedly) {
-    return React.createElement(Embedly, {
-      url: props.href
-    });
-  }
-
-  return React.createElement("a", { ...rest,
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, children);
-}
-
-const MarkdownPreview = /*#__PURE__*/React.memo(props => {
-  var _props$previewCompone;
-
-  const className = cx(styles$2.root, props.minHeight !== undefined ? css({
-    minHeight: props.minHeight
-  }) : undefined, props.mode === 'default' ? styles$2.framed : styles$2.zen, props.direction === 'rtl' ? styles$2.rtl : undefined); // See the list of allowed Tags here:
-  // https://github.com/cure53/DOMPurify/blob/main/src/tags.js#L3-L121
-
-  const cleanHTML = React.useMemo(() => {
-    return replaceMailtoAmp(DOMPurify.sanitize(props.value));
-  }, [props.value]);
-  return React.createElement("div", {
-    className: className,
-    "data-test-id": "markdown-preview"
-  }, React.createElement(Markdown, {
-    options: {
-      overrides: {
-        a: {
-          // eslint-disable-next-line -- TODO: describe this disable  @typescript-eslint/no-explicit-any
-          component: MarkdownLink,
-          props: {
-            Embedly: (_props$previewCompone = props.previewComponents) == null ? void 0 : _props$previewCompone.embedly
-          }
-        }
-      }
-    }
-  }, cleanHTML));
-});
-MarkdownPreview.displayName = 'MarkdownPreview';
-
-const styles$3 = {
-  root: /*#__PURE__*/css({
-    display: 'flex',
-    zIndex: 10,
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    overflow: 'hidden',
-    marginBottom: '-1px',
-    fontSize: tokens.fontSizeM
-  }),
-  tab: /*#__PURE__*/css({
-    cursor: 'pointer',
-    color: tokens.gray700,
-    padding: tokens.spacingXs,
-    minWidth: '70px',
-    border: `1px solid ${tokens.gray400}`,
-    borderTopLeftRadius: tokens.borderRadiusSmall,
-    borderTopRightRadius: tokens.borderRadiusSmall,
-    marginLeft: tokens.spacingXs,
-    textAlign: 'center',
-    backgroundColor: tokens.gray100,
-    borderBottomColor: tokens.gray100,
-    outline: 'none',
-    '&:focus': {
-      boxShadow: tokens.boxShadowHeavy
-    },
-    transition: `all ${tokens.transitionEasingDefault} ${tokens.transitionDurationShort}`
-  }),
-  inactiveTab: /*#__PURE__*/css({
-    background: tokens.gray200,
-    borderBottomColor: tokens.gray400,
-    '&:hover': {
-      background: tokens.gray300
-    }
-  })
-};
-
-function MarkdownTabItem(props) {
-  return React.createElement("div", {
-    className: cx(styles$3.tab, {
-      [styles$3.inactiveTab]: props.isActive === false
-    }),
-    onClick: () => {
-      props.onSelect(props.name);
-    },
-    onKeyDown: e => {
-      if (e.keyCode === 13) {
-        props.onSelect(props.name);
-      }
-    },
-    tabIndex: 0,
-    role: "tab",
-    "aria-controls": props.name,
-    "aria-selected": props.isActive === true,
-    "data-test-id": props.testId
-  }, props.children);
-}
-
-function MarkdownTabs(props) {
-  return React.createElement("div", {
-    className: styles$3.root
-  }, React.createElement(MarkdownTabItem, {
-    name: "editor",
-    onSelect: props.onSelect,
-    isActive: props.active === 'editor',
-    testId: "markdown-tab-md"
-  }, "Editor"), React.createElement(MarkdownTabItem, {
-    name: "preview",
-    onSelect: props.onSelect,
-    isActive: props.active === 'preview',
-    testId: "markdown-tab-preview"
-  }, "Preview"));
-}
-
-const userAgent = /*#__PURE__*/get(window, 'navigator.userAgent', '');
-const platform = /*#__PURE__*/get(window, 'navigator.platform', '');
-let ctrlKey = 'Ctrl';
-const tests = {
-  // eslint-disable-next-line -- TODO: describe this disable  @typescript-eslint/ban-ts-comment
-  // @ts-ignore ignore missing MSStream
-  ios: /*#__PURE__*/ /(iphone os|ipad|iphone|ipod)/i.test(userAgent) && !window.MSStream
-};
-
-if (tests.ios || /mac(68k|ppc|intel)/i.test(platform)) {
-  ctrlKey = 'Cmd';
-}
-
-function getCtrlKey() {
-  return ctrlKey;
-}
-
-/* eslint-disable @typescript-eslint/no-use-before-define, @typescript-eslint/no-explicit-any */
-
-function stripUnit(value) {
-  if (typeof value !== 'string') return value;
-  const cssRegex = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
-  const matchedValue = value.match(cssRegex);
-
-  if (!matchedValue) {
-    throw new Error("Couldn't match unit in given string");
-  }
-
-  return parseFloat(value);
-}
-
-function create(host, options) {
-  const {
-    direction,
-    fixedHeight,
-    height,
-    readOnly
-  } = options || {}; // Set to true if `setValue()` has been called. This is to prevent
-  // undoing the initial content.
-
-  let initializedWithValue = false;
-  const LF = '\n';
-  const EDITOR_SIZE = {
-    min: height ? stripUnit(height) : 300,
-    max: 500,
-    shift: 50
-  };
-  const cm = CodeMirror(host, {
-    direction,
-    readOnly,
-    mode: 'markdown',
-    lineNumbers: false,
-    undoDepth: 200,
-    matchBrackets: true,
-    lineWrapping: true,
-    // When `lineSeparator === null` the document will be split
-    // on CRLFs as well as lone CRs and LFs. A single LF will
-    // be used as line separator in all output
-    lineSeparator: null,
-    theme: 'elegant',
-    tabSize: 2,
-    indentWithTabs: false,
-    indentUnit: 2,
-    autoRefresh: true,
-    spellcheck: true,
-    inputStyle: 'contenteditable'
-  });
-  cm.setSize('100%', EDITOR_SIZE.min);
-
-  if (!fixedHeight) {
-    cm.on('change', throttle(assureHeight, 150));
-  }
-
-  cm.setOption('extraKeys', {
-    Tab: function () {
-      replaceSelectedText(getIndentation());
-    },
-    Enter: 'newlineAndIndentContinueMarkdownList',
-    Esc: () => {
-      cm.getInputField().blur();
-    }
-  });
-  /**
-   * @description
-   * Custom API for a CodeMirror instance.
-   *
-   * An instance wraps a CodeMirror instance and provides a custom interface
-   * on top of CodeMirror.
-   */
-
-  return {
-    destroy,
-    disable,
-    enable,
-    attachEvent,
-    addKeyShortcuts,
-    setValue,
-    cmd,
-    moveToLineBeginning,
-    moveIfNotEmpty,
-    restoreCursor,
-    moveToLineEnd,
-    usePrimarySelection,
-    focus,
-    select,
-    selectBackwards,
-    selectAll: () => cm.execCommand('selectAll'),
-    extendSelectionBy,
-    insertAtCursor,
-    insertAtLineBeginning,
-    wrapSelection,
-    removeFromLineBeginning,
-    removeSelectedText,
-    replaceSelectedText,
-    getCursor,
-    setCursor,
-    getSelection,
-    getLine,
-    isLineEmpty,
-    getSelectedText,
-    getSelectionLength,
-    getCurrentLine,
-    getCurrentLineNumber,
-    getCurrentCharacter,
-    getCurrentLineLength,
-    lineStartsWith,
-    getIndentation,
-    getNl,
-    getValue,
-    getLinesCount,
-    getHistorySize,
-    setReadOnly: value => cm.setOption('readOnly', value),
-    getHistory: () => cm.getHistory(),
-    setHistory: history => cm.setHistory(history),
-    setFullsize: () => {
-      cm.setSize('100%', '100%');
-      cm.refresh();
-    },
-    refresh: () => cm.refresh()
-  };
-
-  function destroy() {
-    // @ts-expect-error
-    cm.toTextArea();
-  }
-
-  function disable() {
-    cm.setOption('readOnly', 'nocursor');
-  }
-
-  function enable() {
-    cm.setOption('readOnly', false);
-  }
-
-  function assureHeight() {
-    const current = cm.heightAtLine(cm.lastLine(), 'local') + EDITOR_SIZE.shift;
-    let next = current;
-
-    if (current < EDITOR_SIZE.min) {
-      next = EDITOR_SIZE.min;
-    }
-
-    if (current > EDITOR_SIZE.max) {
-      next = EDITOR_SIZE.max;
-    }
-
-    cm.setSize('100%', next);
-  }
-
-  function attachEvent(name, fn, throttleInterval) {
-    if (throttleInterval) {
-      fn = throttle(fn, throttleInterval);
-    }
-
-    cm.on(name, fn);
-  }
-
-  function addKeyShortcuts(map) {
-    const ctrlKey = getCtrlKey();
-    cm.addKeyMap(transform(map, (acc, value, key) => {
-      // eslint-disable-next-line -- TODO: describe this disable
-      // @ts-ignore
-      acc[ctrlKey + '-' + key] = value;
-    }, {}));
-  }
-  /**
-   * low-level editor manipulation functions
-   */
-
-  /**
-   * @description
-   * Sets the content of the editor while preserving the cursor
-   * position.
-   *
-   * If called for the first time it will not record the change in
-   * the history.
-   */
-
-
-  function setValue(value) {
-    value = value || '';
-
-    if (getValue() === value) {
-      return;
-    } // set value, but save cursor position first
-    // position will be restored, but w/o focus (third arg)
-
-
-    const line = getCurrentLineNumber();
-    const ch = getCurrentCharacter();
-    cm.setValue(value);
-    restoreCursor(ch, line, true); // We do not want to record the initial population in the
-    // history. Otherwise it would always be possible to revert to
-    // the empty string.
-
-    if (!initializedWithValue) {
-      cm.clearHistory();
-      initializedWithValue = true;
-    }
-  }
-
-  function cmd(name) {
-    cm.execCommand(name);
-    cm.focus();
-  }
-
-  function moveToLineBeginning(lineNumber) {
-    cm.setCursor({
-      line: defaultToCurrentLineNumber(lineNumber),
-      ch: 0
-    });
-    cm.focus();
-  }
-  /**
-   * @description
-   * Insert a new line below the cursor and move to the beginning of
-   * that line.
-   *
-   * Only do this if the editor has content and we are not already on
-   * the last line.
-   *
-   * TODO rename this
-   */
-
-
-  function moveIfNotEmpty() {
-    if (getCurrentLineLength() < 1) {
-      return;
-    }
-
-    const next = getCurrentLineNumber() + 1;
-
-    if (cm.lastLine() < next) {
-      moveToLineEnd();
-      insertAtCursor(getNl());
-    }
-
-    moveToLineBeginning(next);
-  }
-
-  function restoreCursor(character, lineNumber, noFocus) {
-    cm.setCursor(defaultToCurrentLineNumber(lineNumber), character, {
-      scroll: !noFocus
-    });
-
-    if (!noFocus) {
-      cm.focus();
-    }
-  }
-
-  function moveToLineEnd(lineNumber) {
-    cm.setCursor({
-      line: defaultToCurrentLineNumber(lineNumber),
-      ch: getCurrentLineLength()
-    });
-    cm.focus();
-  }
-
-  function defaultToCurrentLineNumber(lineNumber) {
-    if (lineNumber === 0 || lineNumber !== undefined && lineNumber > 0) {
-      return lineNumber;
-    }
-
-    return getCurrentLineNumber();
-  }
-
-  function usePrimarySelection() {
-    cmd('singleSelection');
-  }
-
-  function focus() {
-    cm.focus();
-  }
-
-  function select(from, to) {
-    cm.setSelection(from, to);
-    cm.focus();
-  }
-
-  function selectBackwards(skip, len) {
-    select(getPos(-skip - len), getPos(-skip));
-
-    function getPos(modifier) {
-      return {
-        line: getCurrentLineNumber(),
-        ch: getCurrentCharacter() + modifier
-      };
-    }
-  }
-
-  function extendSelectionBy(modifier) {
-    select(getPos('anchor', 0), getPos('head', modifier));
-
-    function getPos(prop, modifier) {
-      const selection = getSelection();
-
-      if (!selection) {
-        return {
-          line: 0,
-          ch: 0
-        };
-      }
-
-      return {
-        line: selection[prop].line,
-        ch: selection[prop].ch + modifier
-      };
-    }
-  }
-
-  function insertAtCursor(text) {
-    cm.replaceRange(text, cm.getCursor());
-    cm.focus();
-  }
-
-  function insertAtLineBeginning(text) {
-    const initialCh = getCurrentCharacter();
-    moveToLineBeginning();
-    insertAtCursor(text);
-    restoreCursor(initialCh + text.length);
-    cm.focus();
-  }
-
-  function wrapSelection(wrapper) {
-    const replacement = wrapper + getSelectedText() + wrapper;
-    const selection = getSelection();
-
-    if (selection) {
-      cm.replaceRange(replacement, selection.anchor, selection == null ? void 0 : selection.head);
-      cm.focus();
-    }
-  }
-
-  function removeFromLineBeginning(charCount) {
-    const lineNumber = getCurrentLineNumber();
-    cm.replaceRange('', {
-      line: lineNumber,
-      ch: 0
-    }, {
-      line: lineNumber,
-      ch: charCount
-    });
-    cm.focus();
-  }
-
-  function removeSelectedText() {
-    cm.replaceSelection('');
-    cm.focus();
-  }
-  /**
-   * @description
-   * Replace the selected text with the given string.
-   *
-   * If nothing is selected it will insert the text at the current
-   * cursor position
-   *
-   * The optional `select` parameter controls what will be selected
-   * afters wards. By default the cursor will be at the end of the
-   * inserted text. You can pass 'around' to select the inserted
-   * text.
-   */
-
-
-  function replaceSelectedText(replacement, select) {
-    cm.replaceSelection(replacement, select);
-    cm.focus();
-  }
-  /**
-   *  low-level editor get/check functions
-   */
-
-
-  function getCursor() {
-    return cm.getCursor();
-  }
-
-  function setCursor(cursor) {
-    cm.setCursor(cursor);
-  }
-
-  function getSelection() {
-    const selections = cm.listSelections();
-
-    if (!cm.somethingSelected() || !selections || selections.length < 1) {
-      return null;
-    }
-
-    return selections[0];
-  }
-
-  function getLine(lineNumber) {
-    return cm.getLine(lineNumber) || '';
-  }
-
-  function isLineEmpty(lineNumber) {
-    const n = defaultToCurrentLineNumber(lineNumber);
-    return n > -1 && getLine(n).length < 1 && n < cm.lineCount();
-  }
-
-  function getLinesCount() {
-    return cm.lineCount();
-  }
-
-  function getSelectedText() {
-    return getSelection() ? cm.getSelection() : '';
-  }
-
-  function getSelectionLength() {
-    return getSelectedText().length;
-  }
-
-  function getCurrentLine() {
-    return getLine(getCurrentLineNumber());
-  }
-
-  function getCurrentLineNumber() {
-    return cm.getCursor().line;
-  }
-
-  function getCurrentCharacter() {
-    return cm.getCursor().ch;
-  }
-
-  function getCurrentLineLength() {
-    return getCurrentLine().length;
-  }
-
-  function lineStartsWith(text) {
-    return getCurrentLine().startsWith(text);
-  }
-
-  function getIndentation() {
-    return repeat(' ', cm.getOption('indentUnit') ?? 0);
-  }
-
-  function getNl(n = 1) {
-    if (n < 1) {
-      return '';
-    }
-
-    return repeat(LF, n);
-  }
-
-  function getValue() {
-    return cm.getValue() || '';
-  }
-
-  function getHistorySize(which) {
-    const history = cm.historySize();
-    return which ? history[which] : history;
-  }
-
-  function repeat(what, n) {
-    return new Array(n + 1).join(what);
-  }
-}
-
-/* eslint-disable @typescript-eslint/no-use-before-define */
-
-function createPrefixToggleFn(prefix) {
-  return editor => {
-    if (editor.lineStartsWith(prefix)) {
-      editor.removeFromLineBeginning(prefix.length);
-    } else {
-      editor.insertAtLineBeginning(prefix);
-    }
-  };
-}
-/**
- * Wraps the current selection with a marker.
- *
- * If nothing is selected it inserts the given text wrapped in the
- * marker and selects the inner text
- *
- * Used b the `bold`, `italic`, and `strike` commands.
- */
-
-
-function wrapSelection(editor, marker, emptyText) {
-  return () => {
-    editor.usePrimarySelection(); // there's a selection - wrap it with inline marker
-
-    if (editor.getSelection()) {
-      const selectedText = editor.getSelectedText();
-
-      if (selectedText.startsWith(marker) && selectedText.endsWith(marker)) {
-        const markerLength = marker.length;
-        const textWithoutMarker = selectedText.slice(markerLength, selectedText.length - markerLength);
-        editor.replaceSelectedText(textWithoutMarker);
-      } else {
-        editor.wrapSelection(marker);
-      }
-    } else {
-      // no selection - insert sample text and select it
-      editor.insertAtCursor(marker + emptyText + marker);
-      editor.selectBackwards(marker.length, emptyText.length);
-    }
-  };
-}
-
-const HEADER_CHAR = '#';
-const quoteToggleFn = /*#__PURE__*/createPrefixToggleFn('> ');
-const codeToggleFn = /*#__PURE__*/createPrefixToggleFn('    ');
-/**
- * @description
- * A collection of commands used by the user bound to a
- * CodeMirrorWrapper instance.
- *
- * The command collection only depends on the wrapper instance and is
- * used by UI from code mirror stuff.
- */
-
-function create$1(editor) {
-  return {
-    bold: wrapSelection(editor, '__', 'text in bold'),
-    italic: wrapSelection(editor, '*', 'text in italic'),
-    strike: wrapSelection(editor, '~~', 'striked out'),
-    quote: modifySelection(editor, quoteToggleFn),
-    code: modifySelection(editor, codeToggleFn),
-    link,
-    h1: toggleHeader(editor, 1),
-    h2: toggleHeader(editor, 2),
-    h3: toggleHeader(editor, 3),
-    ul: modifySelection(editor, ulToggleFn, true),
-    ol: modifySelection(editor, olToggleFn, true),
-    undo: function () {
-      editor.cmd('undo');
-    },
-    redo: function () {
-      editor.cmd('redo');
-    },
-    hr,
-    indent,
-    dedent,
-    table
-  };
-  /**
-   * @description
-   * Insert a line with `---` below the cursor.
-   */
-
-  function hr() {
-    editor.moveIfNotEmpty();
-    const nl = editor.getNl();
-    const markup = nl + '---' + nl + nl;
-    editor.insertAtCursor(markup);
-  }
-  /**
-   * @description
-   * Indent the current line.
-   */
-
-
-  function indent() {
-    editor.insertAtLineBeginning(editor.getIndentation());
-  }
-  /**
-   * @description
-   * Dedent the current line.
-   */
-
-
-  function dedent() {
-    const indentation = editor.getIndentation();
-
-    if (editor.lineStartsWith(indentation)) {
-      editor.removeFromLineBeginning(indentation.length);
-    }
-  }
-  /**
-   * @description
-   * Insert a markdown table template in a new line.
-   */
-
-
-  function table(config) {
-    const nl = editor.getNl();
-    editor.moveIfNotEmpty();
-    editor.insertAtCursor(nl);
-    const line = editor.getCurrentLineNumber();
-    editor.insertAtCursor(tableTemplate(config.rows, config.cols).join(nl));
-    editor.insertAtCursor(nl + nl);
-    editor.restoreCursor(2, line);
-  }
-  /**
-   * @description
-   * Inserts or replaces the current selection with a markdown link
-   */
-
-
-  function link(url, text, title) {
-    editor.usePrimarySelection();
-    const linkTitle = title ? ' "' + title + '"' : '';
-    const link = text ? '[' + text + '](' + url + linkTitle + ')' : '<' + url + '>';
-    editor.replaceSelectedText(link, 'around');
-  }
-}
-/**
- * For each line in the selection move to that line and call
- * `toggleFn` with the 1-based index of the line in the selection.
- *
- * If there is no selection we just call `toggleFn(editor)`.
- */
-
-function modifySelection(editor, toggleFn, isList) {
-  return () => {
-    editor.usePrimarySelection();
-    const selection = editor.getSelection();
-
-    if (selection) {
-      // there's a selection - toggle list bullet for each line
-      // listNumber is 1, 2, 3... and can be used as ol bullet
-      forLineIn(selection, (lineNumber, listNumber) => {
-        // TODO move this into forLineIn
-        editor.moveToLineBeginning(lineNumber);
-        toggleFn(editor, listNumber);
-      });
-      editor.moveToLineEnd();
-    } else {
-      // there's no selection - just toggle line prefix
-      // but if adding list, add whitespace before and after list
-      if (isList && !getListNumber(editor) && !editor.lineStartsWith('- ')) {
-        prepareListWhitespace(editor);
-      }
-
-      toggleFn(editor);
-    }
-  };
-}
-/**
- * Calls callback for each line number that is in the selection
- *
- * The second argument is the 1-based index of the iteration.
- *
- * @param {CodeMirror.Selection} selection
- * param {function(number)} cb
- */
-
-
-function forLineIn(selection, cb) {
-  // anchor/head depend on selection direction, so min & max have to be used
-  const lines = [selection.anchor.line, selection.head.line];
-  const maxNumber = max(lines);
-  const minNumber = min(lines);
-  const lineRange = range(minNumber || 0, maxNumber !== undefined ? maxNumber + 1 : undefined);
-  lineRange.forEach((lineNumber, i) => {
-    cb(lineNumber, i + 1);
-  });
-}
-
-function prepareListWhitespace(editor) {
-  const line = editor.getCurrentLineNumber();
-  const isCurrentLineEmpty = editor.isLineEmpty(line);
-  const isPrevLineEmpty = line > 0 ? editor.isLineEmpty(line - 1) : false;
-  const isNextLineEmpty = line < editor.getLinesCount() - 1 ? editor.isLineEmpty(line + 1) : true;
-  let linesToInsert = isCurrentLineEmpty ? 2 : 4;
-
-  if (isPrevLineEmpty) {
-    linesToInsert = linesToInsert - 1;
-  }
-
-  if (isNextLineEmpty) {
-    linesToInsert = linesToInsert - 1;
-  }
-
-  editor.moveToLineEnd();
-  editor.insertAtCursor(editor.getNl(linesToInsert));
-  editor.restoreCursor(0, isCurrentLineEmpty ? line : line + 2);
-}
-
-function getListNumber(editor) {
-  const result = editor.getCurrentLine().match(/^(\d+\. )/);
-  return result ? result[1] : null;
-}
-
-function ulToggleFn(editor) {
-  if (editor.lineStartsWith('- ')) {
-    editor.removeFromLineBeginning(2);
-  } else {
-    const listNumber = getListNumber(editor);
-
-    if (listNumber) {
-      editor.removeFromLineBeginning(listNumber.length);
-    }
-
-    editor.insertAtLineBeginning('- ');
-  }
-}
-
-function olToggleFn(editor, n) {
-  const listNumber = getListNumber(editor);
-
-  if (listNumber) {
-    editor.removeFromLineBeginning(listNumber.length);
-  } else {
-    if (editor.lineStartsWith('- ')) {
-      editor.removeFromLineBeginning(2);
-    }
-
-    editor.insertAtLineBeginning((n || 1) + '. ');
-  }
-}
-/**
- * From a table layout specification build a Markdown table template.
- *
- * Returns the lines as an array.
- * Used by the `table()` command
- *
- * @param {object} config
- * @param {number} rows
- * @param {number} cols
- * @returns {string[]}
- */
-
-
-function tableTemplate(nrows, ncols) {
-  const cellWidth = new Array(11);
-  const cell = ' ' + cellWidth.join(' ') + ' |';
-  const separatorCell = ' ' + cellWidth.join('-') + ' |';
-  let baseRow = '|';
-  let separatorRow = '|';
-  times(ncols, () => {
-    baseRow += cell;
-    separatorRow += separatorCell;
-  });
-  const bodyRows = range(nrows).map(() => baseRow.replace(/\| {5}/g, '| Cell'));
-  const headerRow = baseRow.replace(/\| {7}/g, '| Header');
-  return [headerRow, separatorRow].concat(bodyRows);
-}
-/**
- * Toggles the header prefix for a given level on the current line.
- *
- * - Removes a header when one of the same level is
- * - Replaces the header if there is one of a different level
- * - Otherwise inserts the header
- */
-
-
-function toggleHeader(editor, level) {
-  return () => {
-    const initialCh = editor.getCurrentCharacter();
-    const currentHeader = selectHeader(editor);
-    const prefix = repeat(HEADER_CHAR, level); // there's no header at the current line - create one
-
-    if (!currentHeader) {
-      editor.moveToLineBeginning();
-      editor.insertAtCursor(prefix + ' ');
-      editor.restoreCursor(initialCh + prefix.length + 1);
-      return;
-    } // there's exactly the same header - remove one
-
-
-    if (editor.getSelectedText() === prefix) {
-      editor.extendSelectionBy(1);
-      const removedCh = editor.getSelectionLength();
-      editor.removeSelectedText();
-      editor.restoreCursor(initialCh - removedCh);
-      return;
-    } // there's another header at the current line - replace
-
-
-    const diff = prefix.length - editor.getSelectionLength();
-    editor.replaceSelectedText(prefix);
-    editor.restoreCursor(initialCh + diff);
-  };
-}
-/**
- * On the current line select a Markdown header prefix. That is the
- * string at the beginning of the line that consists of up to six `#`.
- *
- * If the selection was successful return the selected string.
- */
-
-
-function selectHeader(editor) {
-  const result = editor.getCurrentLine().match(/^( {0,3})(#{1,6}) /);
-
-  if (!result) {
-    return null;
-  }
-
-  const indentation = result[1];
-  const header = result[2];
-  editor.select(getPos(0), getPos(header.length));
-  return editor.getSelection();
-
-  function getPos(modifier) {
-    return {
-      line: editor.getCurrentLineNumber(),
-      ch: indentation.length + modifier
-    };
-  }
-}
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-function createMarkdownEditor(host, options) {
-  const editor = create(host, options);
-
-  function wrapChange(fn) {
-    return (e, ch) => {
-      fn(editor.getValue(), e, ch);
-    };
-  }
-
-  const api = {
-    actions: create$1(editor),
-    history: {
-      hasUndo: function () {
-        return editor.getHistorySize('undo') > 0;
-      },
-      hasRedo: function () {
-        return editor.getHistorySize('redo') > 0;
-      }
-    },
-    events: {
-      onScroll: function (fn) {
-        editor.attachEvent('scroll', fn, 150);
-      },
-      onChange: function (fn) {
-        editor.attachEvent('change', wrapChange(fn), 0);
-      },
-      onPaste: function (fn) {
-        editor.attachEvent('paste', fn, 0);
-      }
-    },
-    insert: editor.insertAtCursor,
-    focus: editor.focus,
-    getContent: editor.getValue,
-    destroy: editor.destroy,
-    setContent: editor.setValue,
-    getSelectedText: editor.getSelectedText,
-    usePrimarySelection: editor.usePrimarySelection,
-    setReadOnly: editor.setReadOnly,
-    selectBackwards: editor.selectBackwards,
-    getCursor: editor.getCursor,
-    setCursor: editor.setCursor,
-    clear: () => editor.setValue(''),
-    selectAll: editor.selectAll,
-    setFullsize: editor.setFullsize,
-    refresh: editor.refresh
-  };
-  editor.addKeyShortcuts({
-    B: api.actions.bold,
-    I: api.actions.italic
-  });
-  return api;
-}
-
-const styles$4 = {
-  root: css`
-    border: 1px solid ${tokens.gray400};
-    border-width: 0 1px;
-    overflow-y: auto;
-    height: auto;
-    min-height: 300px;
-
-    .CodeMirror {
-      height: auto;
-      line-height: ${tokens.lineHeightDefault};
-    }
-    .CodeMirror-lines {
-      color: ${tokens.gray700};
-      padding: ${tokens.spacingL};
-    }
-    .CodeMirror-code {
-      font-family: ${tokens.fontStackMonospace};
-      font-size: ${tokens.fontSizeM};
-    }
-    .CodeMirror-scroll {
-      min-height: '6rem';
-    }
-
-    .cm-header {
-      color: ${tokens.gray900};
-    }
-    span.cm-variable-2 {
-      color: ${tokens.gray700};
-    }
-    .cm-header-1 {
-      font-size: 1.9em;
-    }
-    .cm-header-2 {
-      font-size: 1.75em;
-    }
-    .cm-header-3 {
-      font-size: 1.6em;
-    }
-    .cm-header-4 {
-      font-size: 1.45em;
-    }
-    .cm-header-5 {
-      font-size: 1.3em;
-    }
-    .cm-header-6 {
-      font-size: 1.15em;
-    }
-
-    span.cm-tag,
-    span.cm-string,
-    span.cm-attribute {
-      color: ${tokens.red600};
-    }
-    span.cm-string {
-      text-decoration: none !important;
-    }
-    span.cm-quote,
-    span.cm-comment {
-      color: ${tokens.gray600};
-    }
-    span.cm-link,
-    span.cm-url {
-      color: ${tokens.blue500} !important;
-    }
-    span.cm-link {
-      text-decoration: underline;
-    }
-  `,
-  framed: /*#__PURE__*/css({
-    '.CodeMirror': {
-      maxHeight: '500px'
-    }
-  }),
-  zen: /*#__PURE__*/css({
-    border: 'none !important',
-    '.CodeMirror-lines': {
-      maxWidth: '650px',
-      margin: '0 auto'
-    }
-  }),
-  disabled: css`
-    .CodeMirror {
-      background: ${tokens.gray100};
-      cursor: 'not-allowed';
-    }
-    .CodeMirror-cursors {
-      visibility: hidden !important;
-    }
-    .CodeMirror-scroll,
-    .CodeMirror-sizer,
-    .CodeMirror-lines {
-      cursor: not-allowed;
-    }
-  `
-};
-const MarkdownTextarea = /*#__PURE__*/React.memo(props => {
-  const hostRef = useRef(null);
-  const [editor, setEditor] = useState(null);
-  useEffect(() => {
-    if (hostRef.current) {
-      setEditor(createMarkdownEditor(hostRef.current, Object.assign({}, {
-        direction: props.direction,
-        readOnly: true
-      }, props.mode === 'zen' ? {
-        fixedHeight: true,
-        height: '100%'
-      } : {}, props.minHeight !== undefined ? {
-        height: props.minHeight
-      } : {})));
-    } // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-
-  }, []);
-  useEffect(() => {
-    if (editor) {
-      props.onReady(editor);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-
-  }, [editor]);
-  const className = cx(styles$4.root, props.minHeight !== undefined ? css({
-    minHeight: props.minHeight
-  }) : undefined, props.mode === 'default' ? styles$4.framed : styles$4.zen, props.disabled && styles$4.disabled);
-  return React.createElement("div", {
-    className: className,
-    ref: hostRef,
-    "data-test-id": "markdown-textarea",
-    style: {
-      display: props.visible ? 'block' : 'none'
-    }
-  });
-});
-MarkdownTextarea.displayName = 'MarkdownTextarea';
-
-const HeadingSelector = props => {
-  const handleMenuClick = heading => {
-    props.onSelect(heading);
-  };
-
-  return React.createElement(Menu, null, React.createElement(Menu.Trigger, null, props.children), React.createElement(Menu.List, null, React.createElement(Menu.Item, {
-    testId: "markdown-action-button-heading-h1",
-    onClick: () => handleMenuClick('h1')
-  }, "Heading 1"), React.createElement(Menu.Item, {
-    testId: "markdown-action-button-heading-h2",
-    onClick: () => handleMenuClick('h2')
-  }, "Heading 2"), React.createElement(Menu.Item, {
-    testId: "markdown-action-button-heading-h3",
-    onClick: () => handleMenuClick('h3')
-  }, "Heading 3")));
-};
-
-const srOnly = /*#__PURE__*/css({
-  position: 'absolute',
-  width: '1px',
-  height: '1px',
-  padding: '0',
-  margin: '-1px',
-  overflow: 'hidden',
-  clip: 'rect(0, 0, 0, 0)',
-  border: '0'
-});
-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));
-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));
-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));
-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));
-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));
-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));
-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));
-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));
-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));
-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));
-
-const InsertLinkSelector = props => {
-  if (props.canAddNew) {
-    return React.createElement(MultipleMediaContextMenu, { ...props
-    });
-  } else {
-    return React.createElement(Button, {
-      isDisabled: props.disabled,
-      startIcon: React.createElement(AssetIcon, null),
-      testId: "markdownEditor.linkExistingAssets",
-      size: "small",
-      variant: "secondary",
-      onClick: () => {
-        props.onSelectExisting();
-      }
-    }, "Insert media");
-  }
-};
-
-const MultipleMediaContextMenu = props => {
-  return React.createElement(Menu, {
-    placement: "bottom-end"
-  }, React.createElement(Menu.Trigger, null, React.createElement(Button, {
-    endIcon: React.createElement(ChevronDownIcon, null),
-    isDisabled: props.disabled,
-    startIcon: React.createElement(AssetIcon, null),
-    testId: "markdownEditor.insertMediaDropdownTrigger",
-    size: "small",
-    variant: "secondary"
-  }, "Insert media")), React.createElement(Menu.List, null, React.createElement(Menu.Item, {
-    testId: "markdownEditor.uploadAssetsAndLink",
-    onClick: () => props.onAddNew()
-  }, "Add new media and link"), React.createElement(Menu.Item, {
-    testId: "markdownEditor.linkExistingAssets",
-    onClick: () => props.onSelectExisting()
-  }, "Link existing media")));
-};
-
-/* eslint-disable react/prop-types */
-const styles$5 = {
-  root: /*#__PURE__*/css({
-    position: 'relative',
-    zIndex: /*#__PURE__*/Number(tokens.zIndexWorkbenchHeader),
-    border: `1px solid ${tokens.gray400}`,
-    backgroundColor: tokens.gray100,
-    padding: tokens.spacingXs,
-    borderTopLeftRadius: tokens.borderRadiusSmall,
-    overflow: 'hidden'
-  }),
-  button: /*#__PURE__*/css({
-    height: '30px',
-    width: '36px',
-    marginLeft: tokens.spacing2Xs,
-    marginRight: tokens.spacing2Xs
-  }),
-  icon: /*#__PURE__*/css({
-    fill: tokens.gray700,
-    verticalAlign: 'middle'
-  }),
-  zenButton: /*#__PURE__*/css({
-    marginLeft: tokens.spacingXs
-  }),
-  zenButtonPressed: /*#__PURE__*/css({
-    backgroundColor: tokens.gray400
-  }),
-  tooltip: /*#__PURE__*/css({
-    zIndex: /*#__PURE__*/Number(tokens.zIndexTooltip)
-  })
-};
-const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    tooltip,
-    onClick,
-    children,
-    className,
-    variant = 'transparent',
-    tooltipPlace = 'top',
-    isDisabled = false,
-    ...otherProps
-  } = props;
-  return React.createElement(Tooltip, {
-    className: styles$5.tooltip,
-    placement: tooltipPlace,
-    content: tooltip
-  }, React.createElement(IconButton, { ...otherProps,
-    ref: ref,
-    className: cx(styles$5.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$5.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$5.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$5.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$5.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$5.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$5.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$5.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(Strikethrough, {
-    label: "Strike out",
-    className: styles$5.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$5.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$5.icon
-  })), React.createElement(ToolbarButton, {
-    isDisabled: props.disabled,
-    testId: "markdown-action-button-indent",
-    tooltip: "Increase indentation",
-    tooltipPlace: tooltipPlace,
-    onClick: props.actions.simple.indent
-  }, React.createElement(Indent, {
-    label: "Increase indentation",
-    className: styles$5.icon
-  })), React.createElement(ToolbarButton, {
-    isDisabled: props.disabled,
-    testId: "markdown-action-button-dedent",
-    tooltip: "Decrease indentation",
-    tooltipPlace: tooltipPlace,
-    onClick: props.actions.simple.dedent
-  }, React.createElement(Dedent, {
-    label: "Decrease indentation",
-    className: styles$5.icon
-  })), React.createElement(ToolbarButton, {
-    isDisabled: props.disabled,
-    testId: "markdown-action-button-embed",
-    tooltip: "Embed external content",
-    tooltipPlace: tooltipPlace,
-    onClick: props.actions.embedExternalContent
-  }, React.createElement(Cubes, {
-    label: "Embed external content",
-    className: styles$5.icon
-  })), React.createElement(ToolbarButton, {
-    isDisabled: props.disabled,
-    testId: "markdown-action-button-table",
-    tooltip: "Insert table",
-    tooltipPlace: tooltipPlace,
-    onClick: props.actions.insertTable
-  }, React.createElement(Table, {
-    label: "Insert table",
-    className: styles$5.icon
-  })), React.createElement(ToolbarButton, {
-    isDisabled: props.disabled,
-    testId: "markdown-action-button-special",
-    tooltip: "Insert special character",
-    tooltipPlace: tooltipPlace,
-    onClick: props.actions.insertSpecialCharacter
-  }, React.createElement(SpecialChar, {
-    label: "Insert special character",
-    className: styles$5.icon
-  })), React.createElement(ToolbarButton, {
-    isDisabled: props.disabled,
-    testId: "markdown-action-button-organizeLinks",
-    tooltip: "Organize links",
-    tooltipPlace: tooltipPlace,
-    onClick: props.actions.organizeLinks
-  }, React.createElement(OrgLinks, {
-    label: "Organize links",
-    className: styles$5.icon
-  })), React.createElement(ToolbarButton, {
-    isDisabled: props.disabled,
-    testId: "markdown-action-button-undo",
-    tooltip: "Undo",
-    tooltipPlace: tooltipPlace,
-    onClick: props.actions.history.undo
-  }, React.createElement(Undo, {
-    label: "Undo",
-    className: styles$5.icon
-  })), React.createElement(ToolbarButton, {
-    isDisabled: props.disabled,
-    testId: "markdown-action-button-redo",
-    tooltip: "Redo",
-    tooltipPlace: tooltipPlace,
-    onClick: props.actions.history.redo
-  }, React.createElement(Redo, {
-    label: "Redo",
-    className: styles$5.icon
-  })));
-}
-
-function DefaultMarkdownToolbar(props) {
-  const [showAdditional, setShowAdditional] = React.useState(false);
-  return React.createElement("div", {
-    className: styles$5.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$5.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$5.zenButton,
-    tooltip: "Expand"
-  }, React.createElement(Zen, {
-    label: "Expand",
-    className: styles$5.icon
-  })))), showAdditional && React.createElement(Flex, {
-    justifyContent: "space-between",
-    marginTop: "spacingXs"
-  }, React.createElement(Flex, null, React.createElement(AdditionalButtons, { ...props
-  }))));
-}
-function ZenMarkdownToolbar(props) {
-  return React.createElement("div", {
-    className: styles$5.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$5.zenButton, styles$5.zenButtonPressed),
-    onClick: () => {
-      props.actions.closeZenMode();
-    },
-    icon: React.createElement(Zen, {
-      label: "Collapse",
-      className: styles$5.icon
-    }),
-    "aria-label": "Collapse"
-  }))));
-}
-const MarkdownToolbar = /*#__PURE__*/React.memo(props => {
-  if (props.mode === 'zen') {
-    return React.createElement(ZenMarkdownToolbar, { ...props
-    });
-  }
-
-  return React.createElement(DefaultMarkdownToolbar, { ...props
-  });
-});
-MarkdownToolbar.displayName = 'MarkdownToolbar';
-
-var MarkdownDialogType;
-
-(function (MarkdownDialogType) {
-  MarkdownDialogType["cheatsheet"] = "markdown-cheatsheet";
-  MarkdownDialogType["insertLink"] = "markdown-insertLink";
-  MarkdownDialogType["insertSpecialCharacter"] = "markdown-insertSpecialCharacter";
-  MarkdownDialogType["insertTable"] = "markdown-insertTable";
-  MarkdownDialogType["embedExternalContent"] = "markdown-embedExternalContent";
-  MarkdownDialogType["confirmInsertAsset"] = "markdown-confirmInsertAsset";
-  MarkdownDialogType["zenMode"] = "markdown-zenMode";
-})(MarkdownDialogType || (MarkdownDialogType = {}));
-
-const styles$6 = {
-  flexColumnContainer: /*#__PURE__*/css({
-    display: 'flex',
-    flexWrap: 'nowrap'
-  }),
-  flexColumn: /*#__PURE__*/css({
-    flexGrow: 1
-  }),
-  verticalDivider: /*#__PURE__*/css({
-    borderRight: `1px solid ${tokens.gray500}`,
-    paddingRight: tokens.spacing3Xl,
-    marginRight: tokens.spacing2Xl
-  }),
-  preview: /*#__PURE__*/css({
-    display: 'inline-block',
-    paddingRight: tokens.spacingL,
-    width: '50%'
-  }),
-  unOrderedListPreview: /*#__PURE__*/css({
-    listStyleType: 'disc',
-    marginLeft: tokens.spacingS
-  }),
-  orderedListPreview: /*#__PURE__*/css({
-    listStyleType: 'decimal',
-    marginLeft: tokens.spacingS
-  }),
-  markup: /*#__PURE__*/css({
-    display: 'inline-block',
-    color: tokens.gray600,
-    paddingLeft: tokens.spacingL,
-    width: '50%'
-  }),
-  h1: /*#__PURE__*/css({
-    fontSize: tokens.fontSize2Xl
-  }),
-  h2: /*#__PURE__*/css({
-    fontSize: tokens.fontSizeXl
-  }),
-  h3: /*#__PURE__*/css({
-    fontSize: tokens.fontSizeL
-  }),
-  helpItem: /*#__PURE__*/css({
-    marginBottom: tokens.spacingS,
-    display: 'flex',
-    alignItems: 'flex-end',
-    height: tokens.spacingXl
-  }),
-  helpLink: /*#__PURE__*/css({
-    margin: 'auto'
-  }),
-  flexRowContainer: /*#__PURE__*/css({
-    display: 'flex',
-    width: '100%',
-    justifyContent: 'center',
-    marginTop: tokens.spacingXl
-  })
-};
-const CheatsheetModalDialog = () => {
-  return React.createElement(ModalContent, {
-    testId: "markdown-cheatsheet-dialog-content"
-  }, React.createElement("div", {
-    className: styles$6.flexColumnContainer
-  }, React.createElement("div", {
-    className: cx(styles$6.flexColumn, styles$6.verticalDivider)
-  }, React.createElement("div", {
-    className: styles$6.helpItem
-  }, React.createElement(Heading, {
-    marginBottom: "none",
-    as: "h1",
-    className: cx(styles$6.preview, styles$6.h1)
-  }, "H1"), React.createElement("div", {
-    className: styles$6.markup
-  }, "# heading")), React.createElement("div", {
-    className: styles$6.helpItem
-  }, React.createElement(Heading, {
-    marginBottom: "none",
-    as: "h2",
-    className: cx(styles$6.preview, styles$6.h2)
-  }, "H2"), React.createElement("div", {
-    className: styles$6.markup
-  }, "## heading")), React.createElement("div", {
-    className: styles$6.helpItem
-  }, React.createElement(Heading, {
-    marginBottom: "none",
-    as: "h3",
-    className: cx(styles$6.preview, styles$6.h3)
-  }, "H3"), React.createElement("div", {
-    className: styles$6.markup
-  }, "### heading")), React.createElement("div", {
-    className: styles$6.helpItem
-  }, React.createElement("strong", {
-    className: styles$6.preview
-  }, "bold"), React.createElement("div", {
-    className: styles$6.markup
-  }, "__text__")), React.createElement("div", {
-    className: styles$6.helpItem
-  }, React.createElement("em", {
-    className: styles$6.preview
-  }, "italic"), React.createElement("div", {
-    className: styles$6.markup
-  }, "*text*")), React.createElement("div", {
-    className: styles$6.helpItem
-  }, React.createElement("div", {
-    className: styles$6.preview
-  }, "strikethrough"), React.createElement("div", {
-    className: styles$6.markup
-  }, "~~text~~")), React.createElement("div", {
-    className: styles$6.helpItem
-  }, React.createElement(TextLink, {
-    as: "button",
-    className: styles$6.preview
-  }, "Link"), React.createElement("div", {
-    className: styles$6.markup
-  }, "[text](url)"))), React.createElement("div", {
-    className: styles$6.flexColumn
-  }, React.createElement("div", {
-    className: styles$6.helpItem
-  }, React.createElement("div", {
-    className: styles$6.preview
-  }, "Image"), React.createElement("div", {
-    className: styles$6.markup
-  }, "![alt-text](url)")), React.createElement("div", {
-    className: styles$6.helpItem
-  }, React.createElement("div", {
-    className: styles$6.preview
-  }, "Unordered list"), React.createElement("div", {
-    className: styles$6.markup
-  }, "* list item")), React.createElement("div", {
-    className: styles$6.helpItem
-  }, React.createElement("div", {
-    className: styles$6.preview
-  }, React.createElement("div", null, "Ordered list")), React.createElement("div", {
-    className: styles$6.markup
-  }, "1. list item")), React.createElement("div", {
-    className: styles$6.helpItem
-  }, React.createElement("div", {
-    className: styles$6.preview
-  }, React.createElement("div", null, "Blockquote")), React.createElement("div", {
-    className: styles$6.markup
-  }, "> quote")), React.createElement("div", {
-    className: styles$6.helpItem
-  }, React.createElement("div", {
-    className: styles$6.preview
-  }, "code span"), React.createElement("div", {
-    className: styles$6.markup
-  }, "`code here`")), React.createElement("div", {
-    className: styles$6.helpItem
-  }, React.createElement("div", {
-    className: styles$6.preview
-  }, "code block"), React.createElement("div", {
-    className: styles$6.markup
-  }, "```code here```")))), React.createElement("div", {
-    className: styles$6.flexRowContainer
-  }, React.createElement(TextLink, {
-    className: styles$6.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)")));
-};
-const openCheatsheetModal = dialogs => {
-  return dialogs.openCurrent({
-    title: 'Markdown formatting help',
-    width: 'large',
-    minHeight: '415px',
-    shouldCloseOnEscapePress: true,
-    shouldCloseOnOverlayClick: true,
-    parameters: {
-      type: MarkdownDialogType.cheatsheet
-    }
-  });
-};
-
-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")));
-};
-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
-    }
-  });
-};
-
-const urlRegex = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?$/;
-function isValidUrl(value) {
-  return urlRegex.test(value);
-}
-
-const styles$7 = {
-  widthFiledGroup: /*#__PURE__*/css({
-    display: 'flex',
-    flexWrap: 'nowrap',
-    alignItems: 'flex-start'
-  }),
-  radioButtonGroup: /*#__PURE__*/css({
-    display: 'inline-flex',
-    alignItems: 'flex-start',
-    paddingTop: tokens.spacingXl
-  }),
-  radioButton: /*#__PURE__*/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;
-
-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(() => {
-    var _mainInputRef$current;
-
-    if ((_mainInputRef$current = mainInputRef.current) != null && _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$7.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$7.radioButtonGroup
-  }, React.createElement(Radio, {
-    id: "unit-option-percent",
-    value: "percent",
-    isChecked: selectedUnit === 'percent',
-    onChange: () => setUnit('percent'),
-    className: styles$7.radioButton
-  }, "percent"), React.createElement(Radio, {
-    id: "unit-option-pixels",
-    value: "pixels",
-    isChecked: selectedUnit === 'px',
-    onChange: () => setUnit('px'),
-    className: styles$7.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\u00A0", React.createElement(TextLink, {
-    href: "http://embed.ly/docs/products/cards",
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, "Embedly's platform.js"), "\u00A0on 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")));
-};
-const openEmbedExternalContentDialog = dialogs => {
-  return dialogs.openCurrent({
-    title: 'Embed external content',
-    width: 'large',
-    minHeight: '435px',
-    shouldCloseOnEscapePress: true,
-    shouldCloseOnOverlayClick: true,
-    parameters: {
-      type: MarkdownDialogType.embedExternalContent
-    }
-  });
-};
-
-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(() => {
-    var _mainInputRef$current;
-
-    if (mainInputRef != null && (_mainInputRef$current = mainInputRef.current) != null && _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")));
-};
-const openInsertLinkDialog = (dialogs, params) => {
-  return dialogs.openCurrent({
-    title: 'Insert link',
-    width: 'large',
-    minHeight: '410px',
-    shouldCloseOnEscapePress: true,
-    shouldCloseOnOverlayClick: true,
-    parameters: {
-      type: MarkdownDialogType.insertLink,
-      ...params
-    }
-  });
-};
-
-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(() => {
-    var _mainInputRef$current;
-
-    if ((_mainInputRef$current = mainInputRef.current) != null && _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")));
-};
-const openInsertTableDialog = dialogs => {
-  return dialogs.openCurrent({
-    title: 'Insert table',
-    width: 'medium',
-    minHeight: '260px',
-    shouldCloseOnEscapePress: true,
-    shouldCloseOnOverlayClick: true,
-    parameters: {
-      type: MarkdownDialogType.insertTable
-    }
-  });
-};
-
-const specialCharacters = [{
-  code: 180,
-  desc: 'acute accent'
-}, {
-  code: 38,
-  desc: 'ampersand'
-}, {
-  code: 166,
-  desc: 'broken vertical bar'
-}, {
-  code: 8226,
-  desc: 'bullet'
-}, {
-  code: 184,
-  desc: 'cedilla'
-}, {
-  code: 162,
-  desc: 'cent'
-}, {
-  code: 169,
-  desc: 'copyright'
-}, {
-  code: 176,
-  desc: 'degree'
-}, {
-  code: 247,
-  desc: 'division'
-}, {
-  code: 189,
-  desc: 'fraction half'
-}, {
-  code: 188,
-  desc: 'fraction quarter'
-}, {
-  code: 190,
-  desc: 'fraction three quarters'
-}, {
-  code: 62,
-  desc: 'greater than'
-}, {
-  code: 161,
-  desc: 'inverted exclamation mark'
-}, {
-  code: 191,
-  desc: 'inverted question mark'
-}, {
-  code: 171,
-  desc: 'left-pointing double angle quotation mark'
-}, {
-  code: 60,
-  desc: 'less than'
-}, {
-  code: 175,
-  desc: 'macron'
-}, {
-  code: 181,
-  desc: 'micro'
-}, {
-  code: 160,
-  desc: 'non-breaking space'
-}, {
-  code: 172,
-  desc: 'not'
-}, {
-  code: 182,
-  desc: 'paragraph'
-}, {
-  code: 177,
-  desc: 'plus-minus'
-}, {
-  code: 34,
-  desc: 'quotation mark'
-}, {
-  code: 174,
-  desc: 'registered'
-}, {
-  code: 187,
-  desc: 'right-pointing double angle quotation mark'
-}, {
-  code: 167,
-  desc: 'section'
-}, {
-  code: 168,
-  desc: 'umlaut/diaeresis'
-}, {
-  code: 215,
-  desc: 'multiplication'
-}, {
-  code: 8482,
-  desc: 'trade mark'
-}, {
-  code: 8364,
-  desc: 'euro'
-}, {
-  code: 163,
-  desc: 'pound'
-}, {
-  code: 165,
-  desc: 'yen'
-}, {
-  code: 8222,
-  desc: 'double low-9 quotation mark'
-}, {
-  code: 710,
-  desc: 'modifier circumflex accent'
-}, {
-  code: 8224,
-  desc: 'dagger'
-}, {
-  code: 8225,
-  desc: 'double dagger'
-}, {
-  code: 8230,
-  desc: 'horizontal ellipsis'
-}, {
-  code: 8220,
-  desc: 'left double quotation mark'
-}, {
-  code: 8249,
-  desc: 'single left-pointing angle quotation mark'
-}, {
-  code: 8216,
-  desc: 'left single quotation mark'
-}, {
-  code: 183,
-  desc: 'middle dot'
-}, {
-  code: 8212,
-  desc: 'em dash'
-}, {
-  code: 8211,
-  desc: 'en dash'
-}, {
-  code: 8240,
-  desc: 'per mille'
-}, {
-  code: 8250,
-  desc: 'single right-pointing angle quotation mark'
-}, {
-  code: 8217,
-  desc: 'right single quotation mark'
-}, {
-  code: 8218,
-  desc: 'single low-9 quotation mark'
-}, {
-  code: 170,
-  desc: 'feminine ordinal indicator'
-}, {
-  code: 186,
-  desc: 'masculine ordinal indicator'
-}, {
-  code: 8221,
-  desc: 'right double quotation mark'
-}, {
-  code: 732,
-  desc: 'small tilde'
-}, {
-  code: 9829,
-  desc: 'black heart'
-}, {
-  code: 9830,
-  desc: 'diamond'
-}];
-
-const styles$8 = {
-  buttonPanel: /*#__PURE__*/css({
-    display: 'flex',
-    flexWrap: 'wrap'
-  }),
-  charButton: /*#__PURE__*/css({
-    border: `1px solid ${tokens.gray500}`,
-    width: '4.1rem',
-    height: '4.1rem',
-    fontSize: tokens.fontSizeXl,
-    marginTop: tokens.spacing2Xs,
-    marginRight: tokens.spacing2Xs
-  }),
-  selectedCharButton: /*#__PURE__*/css({
-    backgroundColor: tokens.gray100
-  }),
-  tooltip: /*#__PURE__*/css({
-    zIndex: 1000
-  }),
-  button: /*#__PURE__*/css({
-    marginTop: tokens.spacingM,
-    marginRight: tokens.spacingS
-  })
-};
-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$8.buttonPanel
-  }, specialCharacters.map(char => React.createElement("div", {
-    key: char.code
-  }, React.createElement(Tooltip, {
-    className: styles$8.tooltip,
-    content: char.desc
-  }, React.createElement(Button, {
-    testId: "special-character-button",
-    isActive: char.code === selectedCharacter.code,
-    className: styles$8.charButton,
-    variant: "transparent",
-    onClick: () => setSelectedCharacter(char)
-  }, String.fromCharCode(char.code))))))), React.createElement(ModalControls, null, React.createElement(Button, {
-    testId: "insert-character-cancel",
-    className: styles$8.button,
-    onClick: () => onClose(false),
-    variant: "secondary",
-    size: "small"
-  }, "Cancel"), React.createElement(Button, {
-    className: styles$8.button,
-    testId: "insert-character-confirm",
-    onClick: () => onClose(String.fromCharCode(selectedCharacter.code)),
-    variant: "positive",
-    size: "small"
-  }, "Insert selected")));
-};
-const openInsertSpecialCharacter = dialogs => {
-  return dialogs.openCurrent({
-    title: 'Insert special character',
-    width: 'large',
-    minHeight: '600px',
-    shouldCloseOnEscapePress: true,
-    shouldCloseOnOverlayClick: true,
-    parameters: {
-      type: MarkdownDialogType.insertSpecialCharacter
-    }
-  });
-};
-
-const styles$9 = {
-  root: /*#__PURE__*/css({
-    position: 'fixed',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0
-  }),
-  topSplit: /*#__PURE__*/css({
-    position: 'fixed',
-    top: 0,
-    height: '48px',
-    left: 0,
-    right: 0
-  }),
-  bottomSplit: /*#__PURE__*/css({
-    position: 'fixed',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    height: '36px'
-  }),
-  editorSplit: /*#__PURE__*/css({
-    width: '50%',
-    position: 'fixed',
-    top: '48px',
-    left: 0,
-    bottom: '36px',
-    overflowX: 'hidden',
-    overflowY: 'scroll'
-  }),
-  editorSplitFullscreen: /*#__PURE__*/css({
-    left: 0,
-    right: 0,
-    width: '100%'
-  }),
-  previewSplit: /*#__PURE__*/css({
-    width: '50%',
-    position: 'fixed',
-    top: '48px',
-    right: 0,
-    bottom: '36px',
-    overflowX: 'hidden',
-    overflowY: 'scroll'
-  }),
-  separator: /*#__PURE__*/css({
-    position: 'fixed',
-    top: '48px',
-    bottom: '36px',
-    width: '1px',
-    background: tokens.gray400,
-    left: '50%'
-  }),
-  button: /*#__PURE__*/css({
-    position: 'fixed',
-    cursor: 'pointer',
-    zIndex: 105,
-    top: '49%',
-    height: '30px',
-    backgroundColor: tokens.gray100,
-    border: `1px solid ${tokens.gray400}`,
-    padding: 0
-  }),
-  hideButton: /*#__PURE__*/css({
-    left: '50%'
-  }),
-  showButton: /*#__PURE__*/css({
-    right: 0,
-    borderRightWidth: 0
-  }),
-  icon: /*#__PURE__*/css({
-    verticalAlign: 'middle'
-  })
-};
-const ZenModeModalDialog = props => {
-  const [currentValue, setCurrentValue] = React.useState(props.initialValue ?? '');
-  const [showPreview, setShowPreview] = React.useState(true);
-  const [editor, setEditor] = React.useState(null);
-  React.useEffect(() => {
-    var _props$sdk, _props$sdk$window;
-
-    // eslint-disable-next-line -- TODO: describe this disable  @typescript-eslint/no-explicit-any
-    (_props$sdk = props.sdk) == null ? void 0 : (_props$sdk$window = _props$sdk.window) == null ? void 0 : _props$sdk$window.updateHeight('100%'); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  }, []); // refresh editor right after dialog is opened to avoid disappearing effect
-
-  React.useEffect(() => {
-    setTimeout(() => {
-      editor == null ? void 0 : editor.setFullsize();
-      editor == null ? void 0 : editor.refresh();
-    }, 150);
-  }, [editor]);
-  const actions = React.useMemo(() => {
-    return createMarkdownActions({
-      sdk: props.sdk,
-      editor,
-      locale: props.locale
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  }, [editor]);
-
-  actions.closeZenMode = () => {
-    props.onClose({
-      value: currentValue,
-      cursor: editor == null ? void 0 : editor.getCursor()
-    });
-  };
-
-  const direction = props.sdk.locales.direction[props.locale] ?? 'ltr';
-  return React.createElement("div", {
-    className: styles$9.root,
-    "data-test-id": "zen-mode-markdown-editor"
-  }, React.createElement("div", {
-    className: styles$9.topSplit
-  }, React.createElement(MarkdownToolbar, {
-    mode: "zen",
-    disabled: false,
-    canUploadAssets: false,
-    actions: actions
-  })), React.createElement("div", {
-    className: cx(styles$9.editorSplit, {
-      [styles$9.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$9.previewSplit
-  }, React.createElement(MarkdownPreview, {
-    direction: direction,
-    mode: "zen",
-    value: currentValue,
-    previewComponents: props.previewComponents
-  })), showPreview && React.createElement("div", {
-    className: styles$9.separator
-  }), showPreview && React.createElement("button", {
-    className: cx(styles$9.button, styles$9.hideButton),
-    "aria-label": "Hide preview",
-    onClick: () => {
-      setShowPreview(false);
-    }
-  }, React.createElement(ChevronRightIcon, {
-    variant: "muted",
-    size: "tiny",
-    className: styles$9.icon
-  })), !showPreview && React.createElement("button", {
-    className: cx(styles$9.button, styles$9.showButton),
-    "aria-label": "Show preview",
-    onClick: () => {
-      setShowPreview(true);
-    }
-  }, React.createElement(ChevronLeftIcon, {
-    variant: "muted",
-    size: "tiny",
-    className: styles$9.icon
-  })), React.createElement("div", {
-    className: styles$9.bottomSplit
-  }, React.createElement(MarkdownBottomBar, null, React.createElement(MarkdownHelp, {
-    onClick: () => {
-      openCheatsheetModal(props.sdk.dialogs);
-    }
-  }))));
-};
-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
-    }
-  });
-};
-
-function normalizeWhiteSpace(str) {
-  if (str) {
-    return str.trim().replace(/\s{2,}/g, ' ');
-  } else {
-    return str;
-  }
-}
-
-function removeExtension(str) {
-  return str.replace(/\.\w+$/g, '');
-}
-
-function fileNameToTitle(str) {
-  return normalizeWhiteSpace(removeExtension(str).replace(/_/g, ' '));
-}
-
-function replaceAssetDomain(fileUrl) {
-  const assetDomainMap = {
-    images: 'images.ctfassets.net',
-    assets: 'assets.ctfassets.net',
-    downloads: 'downloads.ctfassets.net',
-    videos: 'videos.ctfassets.net'
-  };
-  return fileUrl.replace(/(images|assets|downloads|videos).contentful.com/, (_, p1) => {
-    return assetDomainMap[p1];
-  });
-}
-
-function makeAssetLink(asset, {
-  localeCode,
-  fallbackCode,
-  defaultLocaleCode
-}) {
-  const localizedFile = get(asset, ['fields', 'file', localeCode]);
-  const fallbackFile = fallbackCode ? get(asset, ['fields', 'file', fallbackCode]) : null;
-  const defaultFile = get(asset, ['fields', 'file', defaultLocaleCode]);
-  const file = localizedFile || fallbackFile || defaultFile;
-
-  if (isObject(file) && file.url) {
-    const title = get(asset, ['fields', 'title', localeCode]) || get(asset, ['fields', 'title', fallbackCode || '']) || get(asset, ['fields', 'title', defaultLocaleCode]) || fileNameToTitle(file.fileName);
-    const fileUrl = replaceAssetDomain(file.url);
-    return {
-      title,
-      asset,
-      url: fileUrl,
-      // is normally localized and we should not warn about this file
-      isLocalized: Boolean(localizedFile),
-      // was fallback value used
-      // if it was not localized normally, and we did not used a fallback
-      // it means we used a default locale - we filter empty values
-      isFallback: Boolean(fallbackFile),
-      // todo: tranform using fromHostname
-      asMarkdown: `![${title}](${fileUrl})`
-    };
-  } else {
-    return null;
-  }
-}
-
-async function insertAssetLinks(assets, locales) {
-  // check whether do we have some assets, which don't have
-  // a version in this field's locale
-  const otherLocales = assets.filter(asset => {
-    return !get(asset, ['fields', 'file', locales.localeCode]);
-  });
-  const linksWithMeta = assets.map(asset => makeAssetLink(asset, locales)) // remove empty links
-  .filter(asset => asset !== null); // if there have values from fallback/default locales, we need to
-  // provide user a warning so we show him modal
-
-  if (otherLocales.length > 0) {
-    const fallbackAssets = linksWithMeta // we don't want to warn about normally localized files
-    .filter(({
-      isLocalized
-    }) => !isLocalized).map(({
-      title,
-      isFallback,
-      asset
-    }) => {
-      const code = isFallback ? locales.fallbackCode : locales.defaultLocaleCode;
-      return {
-        title,
-        thumbnailUrl: asset.fields.file[code].url,
-        thumbnailAltText: title,
-        description: isFallback ? `Fallback locale (${code})` : `Default locale (${code})`,
-        asset: asset
-      };
-    });
-    return {
-      fallbacks: fallbackAssets,
-      links: linksWithMeta
-    };
-  }
-
-  return {
-    links: linksWithMeta
-  };
-}
-
-/* eslint-disable @typescript-eslint/no-use-before-define, @typescript-eslint/no-explicit-any */
-
-function extractTitle(title) {
-  title = title || '';
-  title = title.replace(/^ *('|"|\()*/, '');
-  title = title.replace(/('|"|\))* *$/, '');
-  return title;
-}
-
-function head(text) {
-  return text.split(' ').shift();
-}
-
-function tail(text) {
-  const segments = text.split(' ');
-  segments.shift();
-  return segments.join(' ');
-}
-
-const PROCESSORS = {
-  inline: function (match) {
-    return {
-      match: match[0],
-      text: match[1],
-      href: head(match[2]),
-      title: extractTitle(tail(match[2]))
-    };
-  },
-  ref: function (match) {
-    return {
-      match: match[0],
-      text: match[1],
-      id: match[2]
-    };
-  },
-  label: function (match) {
-    return {
-      match: match[0],
-      id: match[1],
-      href: head(match[2]),
-      title: extractTitle(tail(match[2]))
-    };
-  }
-};
-const REGEXS = {
-  inline: /\[([^\r\n[\]]+)]\(([^\r\n)]+)\)/,
-  ref: /\[([^\r\n[\]]+)] ?\[([^\r\n[\]]+)]/,
-  label: /^ {0,3}\[([^\r\n[\]]+)]:\s+(.+)$/
-};
-const findInline = /*#__PURE__*/makeFinder('inline');
-const findRefs = /*#__PURE__*/makeFinder('ref');
-const findLabels = /*#__PURE__*/makeFinder('label');
-function convertInlineToRef(text) {
-  let id = findMaxLabelId(text);
-  forEach(findInline(text), inline => {
-    id += 1;
-    text = text.replace(inline.match, buildRef(inline, id));
-    text += '\n' + buildLabel(inline, id);
-  });
-  return text;
-}
-
-function mergeLabels(text) {
-  const byHref = {};
-  const byOldId = {};
-  forEach(findLabels(text), label => {
-    const alreadyAdded = byHref[label.href];
-    const current = extend({}, label);
-
-    if (!alreadyAdded) {
-      byHref[current.href] = current;
-    } else if (hasTitle(current) && !hasTitle(alreadyAdded)) {
-      alreadyAdded.title = current.title;
-    }
-
-    byOldId[current.id] = alreadyAdded || current;
-  });
-  return {
-    byHref: byHref,
-    byOldId: byOldId
-  };
-}
-
-function rewriteRefs(text) {
-  const merged = mergeLabels(text);
-  const hrefToRefId = {};
-  const labels = [];
-  const rewrites = [];
-  let i = 1; // 1. compose list of labels with new ids, in order
-
-  forEach(findRefs(text), ref => {
-    const oldLabel = merged.byOldId[ref.id];
-
-    if (!oldLabel) {
-      return;
-    }
-
-    const href = oldLabel.href;
-    let newRefId = hrefToRefId[href];
-
-    if (!newRefId) {
-      hrefToRefId[href] = newRefId = i;
-      i += 1;
-      labels.push(extend({
-        newId: newRefId
-      }, oldLabel));
-    } // 1b. prepare rewrites to be applied, with new label ids
-
-
-    rewrites.push(extend({
-      newId: newRefId
-    }, ref));
-  }); // 2. remove all labels!
-
-  forEach(findLabels(text), label => {
-    text = text.replace(label.match, '');
-  }); // 3. remove whitespace from the end of text
-
-  text = text.replace(/[\r\n\s]*$/, '');
-  text += '\n\n'; // 4. apply rewrites
-
-  forEach(rewrites, ref => {
-    text = text.replace(ref.match, buildRef(ref, ref.newId));
-  }); // 5. print new labels at the end of text
-
-  forEach(labels, label => {
-    text += '\n' + buildLabel(label, label.newId);
-  });
-  return text;
-}
-/**
- * Finding stuff
- */
-
-function makeFinder(type) {
-  return text => findAll(text, type).map(PROCESSORS[type]);
-}
-
-function findMaxLabelId(textOrLabels) {
-  if (isString(textOrLabels)) {
-    textOrLabels = findLabels(textOrLabels);
-  }
-
-  const ids = textOrLabels.map(x => x.id).map(x => parseInt(x, 10)).filter(x => isFinite(x) && x > 0);
-  return ids.length > 0 ? max(ids) || 0 : 0;
-}
-
-function findAll(text, type) {
-  const flags = 'g' + (type === 'label' ? 'm' : '');
-  const matches = [];
-  const re = new RegExp(REGEXS[type].source, flags);
-  let found = re.exec(text);
-
-  while (found) {
-    matches.push(found);
-    re.lastIndex = found.index + found[0].length;
-    found = re.exec(text);
-  }
-
-  return matches;
-}
-/**
- * Other utilities
- */
-
-
-function hasTitle(link) {
-  return isObject(link) && isString(link.title) && link.title.length > 0;
-}
-
-function buildLabel(link, id) {
-  let markup = '[' + id + ']: ' + link.href;
-
-  if (hasTitle(link)) {
-    markup += ' "' + link.title + '"';
-  }
-
-  return markup;
-}
-
-function buildRef(link, id) {
-  return '[' + link.text + '][' + id + ']';
-}
-
-function createMarkdownActions(props) {
-  const {
-    sdk,
-    editor,
-    locale
-  } = props; // eslint-disable-next-line -- TODO: describe this disable  @typescript-eslint/ban-types
-
-  const insertAssetsWithConfirmation = async assets => {
-    if (assets) {
-      const {
-        links,
-        fallbacks
-      } = await insertAssetLinks(assets, {
-        localeCode: locale,
-        defaultLocaleCode: sdk.locales.default,
-        fallbackCode: sdk.locales.fallbacks[locale]
-      });
-
-      if (links && links.length > 0) {
-        if (fallbacks) {
-          const insertAnyway = await openConfirmInsertAsset(sdk.dialogs, {
-            locale: locale,
-            assets: fallbacks
-          });
-
-          if (!insertAnyway) {
-            throw Error('User decided to not use fallbacks');
-          }
-        }
-
-        return links.map(link => link.asMarkdown).join('\n\n');
-      }
-    }
-
-    return '';
-  };
-
-  return {
-    headings: {
-      h1: () => {
-        editor == null ? void 0 : editor.actions.h1();
-      },
-      h2: () => {
-        editor == null ? void 0 : editor.actions.h2();
-      },
-      h3: () => {
-        editor == null ? void 0 : editor.actions.h3();
-      }
-    },
-    simple: {
-      italic: () => {
-        editor == null ? void 0 : editor.actions.italic();
-      },
-      bold: () => {
-        editor == null ? void 0 : editor.actions.bold();
-      },
-      quote: () => {
-        editor == null ? void 0 : editor.actions.quote();
-      },
-      ol: () => {
-        editor == null ? void 0 : editor.actions.ol();
-      },
-      ul: () => {
-        editor == null ? void 0 : editor.actions.ul();
-      },
-      strike: () => {
-        editor == null ? void 0 : editor.actions.strike();
-      },
-      code: () => {
-        editor == null ? void 0 : editor.actions.code();
-      },
-      hr: () => {
-        editor == null ? void 0 : editor.actions.hr();
-      },
-      indent: () => {
-        editor == null ? void 0 : editor.actions.indent();
-      },
-      dedent: () => {
-        editor == null ? void 0 : editor.actions.dedent();
-      }
-    },
-    history: {
-      undo: () => {
-        editor == null ? void 0 : editor.actions.undo();
-      },
-      redo: () => {
-        editor == null ? void 0 : editor.actions.redo();
-      }
-    },
-    insertLink: async () => {
-      if (!editor) {
-        return;
-      }
-
-      editor.usePrimarySelection();
-      const selectedText = editor.getSelectedText();
-      const result = await openInsertLinkDialog(sdk.dialogs, {
-        selectedText
-      });
-
-      if (result) {
-        editor.actions.link(result.url, selectedText || result.text, result.title);
-      }
-    },
-    insertSpecialCharacter: async () => {
-      if (!editor) {
-        return;
-      }
-
-      const result = await openInsertSpecialCharacter(sdk.dialogs);
-
-      if (result) {
-        editor.insert(result);
-      }
-    },
-    insertTable: async () => {
-      if (!editor) {
-        return;
-      }
-
-      const result = await openInsertTableDialog(sdk.dialogs);
-
-      if (result) {
-        editor.actions.table(result);
-      }
-    },
-    organizeLinks: () => {
-      if (!editor) {
-        return;
-      }
-
-      let text = editor.getContent();
-
-      if (!text) {
-        return;
-      }
-
-      text = convertInlineToRef(text);
-      text = rewriteRefs(text);
-      editor.setContent(text);
-      sdk.notifier.success('All your links are now references at the bottom of your document.');
-    },
-    embedExternalContent: async () => {
-      if (!editor) {
-        return;
-      }
-
-      const result = await openEmbedExternalContentDialog(sdk.dialogs);
-
-      if (result) {
-        editor.insert(result);
-      }
-    },
-    addNewMedia: async () => {
-      if (!editor) {
-        return;
-      }
-
-      try {
-        const {
-          entity: asset
-        } = await sdk.navigator.openNewAsset({
-          slideIn: {
-            waitForClose: true
-          }
-        }); // eslint-disable-line -- TODO: describe this disable  @typescript-eslint/no-explicit-any
-
-        const markdownLinks = await insertAssetsWithConfirmation([asset]);
-        editor.insert(markdownLinks);
-      } finally {
-        editor.focus();
-      }
-    },
-    linkExistingMedia: async () => {
-      if (!editor) {
-        return;
-      }
-
-      try {
-        const assets = await sdk.dialogs.selectMultipleAssets({
-          locale: locale
-        });
-        const markdownLinks = await insertAssetsWithConfirmation(assets);
-        editor.insert(markdownLinks);
-      } finally {
-        editor.focus();
-      }
-    },
-    openZenMode: async () => {
-      if (!editor) {
-        return;
-      }
-
-      const result = await openZenMode(sdk.dialogs, {
-        initialValue: editor.getContent(),
-        locale: props.locale
-      });
-      editor.setContent(result.value);
-
-      if (result.cursor) {
-        editor.setCursor(result.cursor);
-      }
-
-      editor.focus();
-    },
-    closeZenMode: () => {// do nothing
-      // this method is overwritten in dialog app
-    }
-  };
-}
-
-const styles$a = {
-  container: /*#__PURE__*/css({
-    display: 'flex',
-    flexDirection: 'column',
-    fontFamily: tokens.fontStackPrimary
-  })
-};
-function MarkdownEditor(props) {
-  const [currentValue, setCurrentValue] = React.useState(props.initialValue ?? '');
-  const [selectedTab, setSelectedTab] = React.useState('editor');
-  const [editor, setEditor] = React.useState(null);
-  const [canUploadAssets, setCanUploadAssets] = React.useState(false);
-  React.useEffect(() => {
-    if (editor && props.onReady) {
-      props.onReady(editor); // fix: http://codemirror.977696.n3.nabble.com/codemirror-content-not-visible-in-bootstrap-modal-td4026988.html
-
-      setTimeout(() => {
-        editor.refresh();
-      }, 1);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-
-  }, [editor]);
-  React.useEffect(() => {
-    props.sdk.access.can('create', 'Asset').then(value => {
-      setCanUploadAssets(value);
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  }, []);
-  React.useEffect(() => {
-    if (editor) {
-      editor.setReadOnly(props.disabled);
-    }
-  }, [editor, props.disabled]);
-  const isActionDisabled = editor === null || props.disabled || selectedTab !== 'editor';
-  const direction = props.sdk.locales.direction[props.sdk.field.locale] ?? 'ltr';
-  const actions = React.useMemo(() => {
-    return createMarkdownActions({
-      sdk: props.sdk,
-      editor,
-      locale: props.sdk.field.locale
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  }, [editor]);
-  const openMarkdownHelp = React.useCallback(() => {
-    openCheatsheetModal(props.sdk.dialogs); // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: Evaluate the dependencies
-  }, []);
-  return React.createElement("div", {
-    className: styles$a.container,
-    "data-test-id": "markdown-editor"
-  }, React.createElement(MarkdownTabs, {
-    active: selectedTab,
-    onSelect: tab => {
-      setSelectedTab(tab);
-    }
-  }), React.createElement(MarkdownToolbar, {
-    mode: "default",
-    disabled: isActionDisabled,
-    canUploadAssets: canUploadAssets,
-    actions: actions
-  }), React.createElement(MarkdownTextarea, {
-    minHeight: props.minHeight,
-    mode: "default",
-    visible: selectedTab === 'editor',
-    disabled: isActionDisabled,
-    direction: direction,
-    onReady: editor => {
-      editor.setContent(props.initialValue ?? '');
-      editor.setReadOnly(props.disabled);
-      setEditor(editor);
-      editor.events.onChange(value => {
-        // Trim empty lines
-        const trimmedValue = value.replace(/^\s+$/gm, '');
-        props.saveValueToSDK(trimmedValue);
-        setCurrentValue(value);
-      });
-    }
-  }), selectedTab === 'preview' && React.createElement(MarkdownPreview, {
-    direction: direction,
-    minHeight: props.minHeight,
-    mode: "default",
-    value: currentValue,
-    previewComponents: props.previewComponents
-  }), React.createElement(MarkdownBottomBar, null, React.createElement(MarkdownHelp, {
-    onClick: openMarkdownHelp
-  })), React.createElement(MarkdownConstraints, {
-    sdk: props.sdk,
-    value: currentValue
-  }));
-}
-function MarkdownEditorConnected(props) {
-  return React.createElement(FieldConnector, {
-    throttle: 300,
-    field: props.sdk.field,
-    isInitiallyDisabled: props.isInitiallyDisabled
-  }, ({
-    value,
-    disabled,
-    setValue,
-    externalReset
-  }) => {
-    // on external change reset component completely and init with initial value again
-    return React.createElement(MarkdownEditor, { ...props,
-      key: `markdown-editor-${externalReset}`,
-      initialValue: value,
-      disabled: disabled,
-      saveValueToSDK: setValue
-    });
-  });
-}
-
-const openMarkdownDialog = (sdk, previewComponents) => options => {
-  var _options$parameters, _options$parameters2, _options$parameters3, _options$parameters4, _options$parameters5, _options$parameters6, _options$parameters7;
-
-  if (((_options$parameters = options.parameters) == null ? void 0 : _options$parameters.type) === MarkdownDialogType.cheatsheet) {
-    return ModalDialogLauncher.openDialog(options, () => {
-      return React.createElement(CheatsheetModalDialog, null);
-    });
-  } else if (((_options$parameters2 = options.parameters) == null ? void 0 : _options$parameters2.type) === MarkdownDialogType.insertLink) {
-    const selectedText = options.parameters.selectedText;
-    return ModalDialogLauncher.openDialog(options, ({
-      onClose
-    }) => {
-      return React.createElement(InsertLinkModal, {
-        selectedText: selectedText,
-        onClose: onClose
-      });
-    });
-  } else if (((_options$parameters3 = options.parameters) == null ? void 0 : _options$parameters3.type) === MarkdownDialogType.insertSpecialCharacter) {
-    return ModalDialogLauncher.openDialog(options, ({
-      onClose
-    }) => {
-      return React.createElement(SpecialCharacterModalDialog, {
-        onClose: onClose
-      });
-    });
-  } else if (((_options$parameters4 = options.parameters) == null ? void 0 : _options$parameters4.type) === MarkdownDialogType.insertTable) {
-    return ModalDialogLauncher.openDialog(options, ({
-      onClose
-    }) => {
-      return React.createElement(InsertTableModal, {
-        onClose: onClose
-      });
-    });
-  } else if (((_options$parameters5 = options.parameters) == null ? void 0 : _options$parameters5.type) === MarkdownDialogType.embedExternalContent) {
-    return ModalDialogLauncher.openDialog(options, ({
-      onClose
-    }) => {
-      return React.createElement(EmbedExternalContentModal, {
-        onClose: onClose
-      });
-    });
-  } else if (((_options$parameters6 = options.parameters) == null ? void 0 : _options$parameters6.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$parameters7 = options.parameters) == null ? void 0 : _options$parameters7.type) === MarkdownDialogType.zenMode) {
-    const initialValue = options.parameters.initialValue;
-    const locale = options.parameters.locale;
-    return ModalDialogLauncher.openDialog(options, ({
-      onClose
-    }) => {
-      return React.createElement(ZenModeModalDialog, {
-        saveValueToSDK: value => {
-          var _sdk$field2;
-
-          if (value) {
-            var _sdk$field;
-
-            return sdk == null ? void 0 : (_sdk$field = sdk.field) == null ? void 0 : _sdk$field.setValue(value);
-          }
-
-          return sdk == null ? void 0 : (_sdk$field2 = sdk.field) == null ? void 0 : _sdk$field2.removeValue();
-        },
-        onClose: onClose,
-        initialValue: initialValue,
-        locale: locale,
-        sdk: sdk,
-        previewComponents: previewComponents
-      });
-    });
-  }
-
-  return Promise.reject();
-};
-
-const renderMarkdownDialog = sdk => {
-  const parameters = sdk.parameters.invocation;
-
-  if (parameters.type === MarkdownDialogType.cheatsheet) {
-    sdk.window.startAutoResizer();
-    return React.createElement(CheatsheetModalDialog, null);
-  } else if (parameters.type === MarkdownDialogType.insertLink) {
-    const selectedText = parameters.selectedText;
-    sdk.window.startAutoResizer();
-    return React.createElement(InsertLinkModal, {
-      selectedText: selectedText,
-      onClose: sdk.close
-    });
-  } else if (parameters.type === MarkdownDialogType.insertSpecialCharacter) {
-    sdk.window.startAutoResizer();
-    return React.createElement(SpecialCharacterModalDialog, {
-      onClose: sdk.close
-    });
-  } else if (parameters.type === MarkdownDialogType.insertTable) {
-    sdk.window.startAutoResizer();
-    return React.createElement(InsertTableModal, {
-      onClose: sdk.close
-    });
-  } else if (parameters.type === MarkdownDialogType.embedExternalContent) {
-    sdk.window.startAutoResizer();
-    return React.createElement(EmbedExternalContentModal, {
-      onClose: sdk.close
-    });
-  } else if (parameters.type === MarkdownDialogType.confirmInsertAsset) {
-    const locale = parameters.locale;
-    const assets = parameters.assets;
-    sdk.window.startAutoResizer();
-    return React.createElement(ConfirmInsertAssetModalDialog, {
-      onClose: sdk.close,
-      locale: locale,
-      assets: assets
-    });
-  } else if (parameters.type === MarkdownDialogType.zenMode) {
-    const locale = parameters.locale;
-    const initialValue = parameters.initialValue; // eslint-disable-next-line -- TODO: describe this disable  @typescript-eslint/no-explicit-any
-
-    sdk.window.updateHeight('100%');
-    return React.createElement(ZenModeModalDialog, {
-      onClose: sdk.close,
-      saveValueToSDK: () => {// don't save changes in dialog mode
-      },
-      initialValue: initialValue,
-      locale: locale,
-      sdk: sdk
-    });
-  }
-
-  return React.createElement("div", null);
-};
-
-export { MarkdownEditorConnected as MarkdownEditor, MarkdownPreview, openMarkdownDialog, renderMarkdownDialog };
-//# sourceMappingURL=field-editor-markdown.esm.js.map