@takeshape/util 8.16.0 → 8.20.2

package/es/draftjs.js

@@ -0,0 +1,871 @@
+/*
+ * The intention is to move all this to the client package in the end, but right now it's here
+ * to be shared between the draftjs / mdx implementations, which span the client / server differently.
+ */
+import { draftToMarkdown, markdownToDraft } from 'markdown-draft-js';
+import { imageTemplate, imageTemplateMdx, oembedTemplate, oembedTemplateMdx } from './templates'; // With @types/htmlparser2 it says parseDOM is not exported; excluding types for now
+// @ts-expect-error Untyped
+
+import { parseDOM } from 'htmlparser2';
+import Url from 'url-parse';
+import render from 'dom-serializer';
+import shortid from 'shortid';
+import { getDraftjsImage, getDraftjsOembed, getDraftjsPullquote } from './draftjs-templates';
+import escape from 'lodash/escape';
+import unescape from 'lodash/unescape';
+import pickBy from 'lodash/pickBy';
+import { getImageUrl } from '@takeshape/routing';
+import forEach from 'lodash/forEach';
+const SUPERSCRIPT_MARKER = 'TEMPORARY_SUPERSCRIPT_MARKER_TLfDNyf7VYKDduyL';
+const SUBSCRIPT_MARKER = 'TEMPORARY_SUBSCRIPT_MARKER_K5VrdPEzyQyy2RcY';
+const INSERT_MARKER = 'TEMPORARY_INSERT_MARKER_FSYdr8m8CS7YLb8y';
+const EXTERNAL_LINK_MARKER = 'TEMPORARY_EXTERNAL_LINK_MARKER_HP3vprmERkc9ZAss';
+const pullquoteStyle = 'font-style: italic; margin: 2em 2.5em;';
+
+const getDraftjsEmpty = (depth = 0) => {
+  return {
+    key: shortid.generate(),
+    depth,
+    type: 'unstyled',
+    text: '',
+    entityRanges: [],
+    inlineStyleRanges: []
+  };
+};
+
+const REMOVAL_MARKER_TYPE = 'removal-marker';
+
+const getDraftjsRemovalMarker = (depth = 0) => {
+  return {
+    key: shortid.generate(),
+    type: REMOVAL_MARKER_TYPE,
+    depth,
+    text: '',
+    entityRanges: [],
+    inlineStyleRanges: []
+  };
+};
+
+const mdxShortcodePrefix = tagName => `TS${tagName}`;
+
+const handleMultiword = (markdown, marker, markdownSyntax, markdownRegex) => {
+  const parts = markdown.replace(markdownRegex, `\\${markdownSyntax}`).split(marker);
+  let result = '';
+  let open = false;
+
+  for (const [i, part] of parts.entries()) {
+    if (open) {
+      result += part.replace(/\s+/g, match => `${markdownSyntax}${match}${markdownSyntax}`);
+    } else {
+      result += part;
+    }
+
+    if (i !== parts.length - 1) {
+      result += markdownSyntax;
+      open = !open;
+    }
+  }
+
+  return result;
+}; // Workaround inability to reasonably process child content using draftToMarkdown
+
+
+const handleExternalLinks = markdown => {
+  const regex = /(<TSExternalLink text="TEMPORARY_EXTERNAL_LINK_MARKER_HP3vprmERkc9ZAss" href="[^"]+">)([^<]+)<\/TSExternalLink>/g;
+  return markdown.replace(regex, (match, openTag, content) => match.replace(EXTERNAL_LINK_MARKER, escape(content)));
+};
+
+export function fromDraftjs(draftjs, styleItems, entityItems) {
+  let markdown = draftToMarkdown(draftjs, {
+    styleItems: {
+      'section-break': {
+        open() {
+          return '***';
+        },
+
+        close() {
+          return '';
+        }
+
+      },
+      SUP: {
+        open() {
+          return SUPERSCRIPT_MARKER;
+        },
+
+        close() {
+          return SUPERSCRIPT_MARKER;
+        }
+
+      },
+      SUB: {
+        open() {
+          return SUBSCRIPT_MARKER;
+        },
+
+        close() {
+          return SUBSCRIPT_MARKER;
+        }
+
+      },
+      UNDERLINE: {
+        open() {
+          return INSERT_MARKER;
+        },
+
+        close() {
+          return INSERT_MARKER;
+        }
+
+      },
+      'code-block': {
+        open(entity) {
+          var _entity$data;
+
+          const lang = (entity === null || entity === void 0 ? void 0 : (_entity$data = entity.data) === null || _entity$data === void 0 ? void 0 : _entity$data.lang) ?? '';
+          return `\`\`\`${lang}\n`;
+        },
+
+        close() {
+          return '\n```';
+        }
+
+      },
+      ...styleItems
+    },
+    entityItems: {
+      LINK: {
+        open(entity) {
+          var _entity$data2;
+
+          if ((entity === null || entity === void 0 ? void 0 : (_entity$data2 = entity.data) === null || _entity$data2 === void 0 ? void 0 : _entity$data2.target) === '_blank') {
+            var _entity$data3, _entity$data4;
+
+            const url = escape((entity === null || entity === void 0 ? void 0 : (_entity$data3 = entity.data) === null || _entity$data3 === void 0 ? void 0 : _entity$data3.url) || (entity === null || entity === void 0 ? void 0 : (_entity$data4 = entity.data) === null || _entity$data4 === void 0 ? void 0 : _entity$data4.href) || '');
+            return `<TSExternalLink text="${EXTERNAL_LINK_MARKER}" href="${url}">`;
+          }
+
+          return '[';
+        },
+
+        close(entity) {
+          var _entity$data5, _entity$data6, _entity$data7;
+
+          if ((entity === null || entity === void 0 ? void 0 : (_entity$data5 = entity.data) === null || _entity$data5 === void 0 ? void 0 : _entity$data5.target) === '_blank') {
+            return '</TSExternalLink>';
+          }
+
+          return ']('.concat((entity === null || entity === void 0 ? void 0 : (_entity$data6 = entity.data) === null || _entity$data6 === void 0 ? void 0 : _entity$data6.url) || (entity === null || entity === void 0 ? void 0 : (_entity$data7 = entity.data) === null || _entity$data7 === void 0 ? void 0 : _entity$data7.href) || '', ')');
+        }
+
+      },
+      ...entityItems
+    }
+  });
+  markdown = handleExternalLinks(markdown);
+  markdown = handleMultiword(markdown, SUPERSCRIPT_MARKER, '^', /\^/g);
+  markdown = handleMultiword(markdown, SUBSCRIPT_MARKER, '~', /~/g); // eslint-disable-next-line security-node/non-literal-reg-expr
+
+  markdown = markdown.replace(/\+/g, '\\+').replace(new RegExp(INSERT_MARKER, 'g'), '++');
+  return markdown;
+}
+export function draftjsToMd(draftjs, assets) {
+  return fromDraftjs(draftjs, {
+    pullquote: {
+      open() {
+        return `<aside style="${pullquoteStyle}">`;
+      },
+
+      close() {
+        return '</aside>';
+      }
+
+    }
+  }, {
+    oembed: {
+      open() {
+        return '';
+      },
+
+      close(entity) {
+        if (!(entity !== null && entity !== void 0 && entity.data)) {
+          return '';
+        }
+
+        const {
+          data
+        } = entity;
+        return oembedTemplate(str => str, data);
+      }
+
+    },
+    image: {
+      open() {
+        return '';
+      },
+
+      close(entity) {
+        if (!(entity !== null && entity !== void 0 && entity.data)) {
+          return '';
+        }
+
+        const {
+          data
+        } = entity;
+        const asset = assets[data.id];
+
+        if (asset === undefined) {
+          return '';
+        }
+
+        const imageTemplateData = { ...data,
+          alignment: data.alignment,
+          size: data.size,
+          asset,
+          caption: getAssetField(data, asset, 'caption'),
+          credit: getAssetField(data, asset, 'credit'),
+          imageParams: {}
+        };
+        return imageTemplate(str => str, imageTemplateData);
+      }
+
+    }
+  });
+}
+
+function getTextFromDraftjs(draftjs) {
+  var _draftjs$blocks, _draftjs$blocks$;
+
+  return draftjs === null || draftjs === void 0 ? void 0 : (_draftjs$blocks = draftjs.blocks) === null || _draftjs$blocks === void 0 ? void 0 : (_draftjs$blocks$ = _draftjs$blocks[0]) === null || _draftjs$blocks$ === void 0 ? void 0 : _draftjs$blocks$.text;
+}
+
+function getAssetField(data, asset, field) {
+  const dataText = getTextFromDraftjs(data[field]);
+
+  if (dataText) {
+    return dataText;
+  }
+
+  if (asset[field]) {
+    return getTextFromDraftjs(asset[field]);
+  }
+
+  return '';
+}
+
+export function draftjsToMdx(draftjs, assets, prefix = mdxShortcodePrefix) {
+  return fromDraftjs(draftjs, {
+    pullquote: {
+      open() {
+        return `<${prefix('Pullquote')}>`;
+      },
+
+      close() {
+        return `</${prefix('Pullquote')}>`;
+      }
+
+    }
+  }, {
+    oembed: {
+      open() {
+        return '';
+      },
+
+      close(entity) {
+        if (!(entity !== null && entity !== void 0 && entity.data)) {
+          return '';
+        }
+
+        const {
+          data
+        } = entity;
+        return oembedTemplateMdx(prefix, data);
+      }
+
+    },
+    image: {
+      open() {
+        return '';
+      },
+
+      close(entity) {
+        var _entity$data8, _data$link, _data$link2;
+
+        const asset = assets[entity === null || entity === void 0 ? void 0 : (_entity$data8 = entity.data) === null || _entity$data8 === void 0 ? void 0 : _entity$data8.id];
+
+        if (!(entity !== null && entity !== void 0 && entity.data) || asset === undefined) {
+          return '';
+        }
+
+        const {
+          data
+        } = entity;
+        const imageUrlOptions = process.env.NODE_ENV === 'production' ? {} : {
+          baseUrl: 'https://images.dev.takeshape.io'
+        };
+        return imageTemplateMdx(prefix, { ...data,
+          assetId: data.id,
+          assetPath: asset.path,
+          credit: getAssetField(data, asset, 'credit'),
+          caption: getAssetField(data, asset, 'caption'),
+          link: (_data$link = data.link) === null || _data$link === void 0 ? void 0 : _data$link.url,
+          linkisexternal: (_data$link2 = data.link) !== null && _data$link2 !== void 0 && _data$link2.external ? 'true' : 'false',
+          src: getImageUrl(asset.path, data.imageParams, imageUrlOptions)
+        });
+      }
+
+    }
+  });
+}
+
+function getAssetIdFromImageSrc(src) {
+  return new Url(src).pathname.split('/')[3];
+}
+
+function parseFigureClass(className) {
+  if (className === undefined) {
+    return {
+      alignment: undefined,
+      size: undefined
+    };
+  }
+
+  const parts = className.split(' ');
+  return {
+    alignment: parts[0],
+    size: parts[1]
+  };
+} // eslint-disable-next-line complexity
+
+
+function htmlDomToDraftjsImage(dom, item, entityKeyGenerator) {
+  for (const figure of dom) {
+    if (figure.type === 'tag' && figure.name === 'figure') {
+      var _figure$children, _figure$children2, _figcaption, _figcaption2, _caption, _credit, _link, _link2;
+
+      let link;
+      const figureChildOne = (_figure$children = figure.children) === null || _figure$children === void 0 ? void 0 : _figure$children[0];
+      const figureChildTwo = (_figure$children2 = figure.children) === null || _figure$children2 === void 0 ? void 0 : _figure$children2[1];
+
+      if ((figureChildOne === null || figureChildOne === void 0 ? void 0 : figureChildOne.type) === 'tag' && (figureChildOne === null || figureChildOne === void 0 ? void 0 : figureChildOne.name) === 'a') {
+        link = figureChildOne;
+      }
+
+      let figcaption;
+
+      if ((figureChildOne === null || figureChildOne === void 0 ? void 0 : figureChildOne.type) === 'tag' && (figureChildOne === null || figureChildOne === void 0 ? void 0 : figureChildOne.name) === 'figcaption') {
+        figcaption = figureChildOne;
+      } else if ((figureChildTwo === null || figureChildTwo === void 0 ? void 0 : figureChildTwo.type) === 'tag' && (figureChildTwo === null || figureChildTwo === void 0 ? void 0 : figureChildTwo.name) === 'figcaption') {
+        figcaption = figure.children[1];
+      }
+
+      const img = link ? link.children[0] : figure.children[0];
+
+      if ((img === null || img === void 0 ? void 0 : img.type) !== 'tag' || (img === null || img === void 0 ? void 0 : img.name) !== 'img') {
+        return;
+      }
+
+      const figcaptionChild = (_figcaption = figcaption) === null || _figcaption === void 0 ? void 0 : _figcaption.children[0];
+      let caption;
+
+      if ((figcaptionChild === null || figcaptionChild === void 0 ? void 0 : figcaptionChild.type) === 'tag' && (figcaptionChild === null || figcaptionChild === void 0 ? void 0 : figcaptionChild.name) === 'span' && (figcaptionChild === null || figcaptionChild === void 0 ? void 0 : figcaptionChild.attribs.class) === 'caption') {
+        caption = figcaptionChild;
+      }
+
+      const captionChildThree = (_figcaption2 = figcaption) === null || _figcaption2 === void 0 ? void 0 : _figcaption2.children[2];
+      let credit;
+
+      if ((captionChildThree === null || captionChildThree === void 0 ? void 0 : captionChildThree.type) === 'tag' && (captionChildThree === null || captionChildThree === void 0 ? void 0 : captionChildThree.name) === 'span' && (captionChildThree === null || captionChildThree === void 0 ? void 0 : captionChildThree.attribs.class) === 'credit') {
+        credit = captionChildThree;
+      }
+
+      const {
+        alignment,
+        size
+      } = parseFigureClass(figure.attribs.class);
+      return getDraftjsImage({
+        captionText: ((_caption = caption) === null || _caption === void 0 ? void 0 : _caption.children[0].data) ?? '',
+        creditText: ((_credit = credit) === null || _credit === void 0 ? void 0 : _credit.children[0].data) ?? '',
+        alignment,
+        size,
+        assetId: getAssetIdFromImageSrc(img.attribs.src),
+        linkUrl: (_link = link) === null || _link === void 0 ? void 0 : _link.attribs.href,
+        linkIsExternal: ((_link2 = link) === null || _link2 === void 0 ? void 0 : _link2.attribs.target) === '_blank',
+        key: entityKeyGenerator(),
+        depth: item.level,
+        path: getImagePathFromUrl(img.attribs.src)
+      });
+    }
+  }
+}
+
+function htmlDomToOembed(dom, item, entityKeyGenerator) {
+  for (const oembedDiv of dom) {
+    if (oembedDiv.type === 'tag' && oembedDiv.name === 'div' && oembedDiv.attribs.class === 'oembed') {
+      const blockquote = oembedDiv.children[0];
+
+      if ((blockquote === null || blockquote === void 0 ? void 0 : blockquote.type) !== 'tag' || (blockquote === null || blockquote === void 0 ? void 0 : blockquote.name) !== 'blockquote') {
+        return;
+      }
+
+      const script = oembedDiv.children[2];
+
+      if ((script === null || script === void 0 ? void 0 : script.type) !== 'script' || (script === null || script === void 0 ? void 0 : script.name) !== 'script') {
+        return;
+      }
+
+      return getDraftjsOembed({
+        html: `${render(blockquote)}\n${render(script)}\n`,
+        key: entityKeyGenerator(),
+        depth: item.level
+      });
+    }
+  }
+}
+
+function mdxToDraftjsOembed(item, entityKeyGenerator) {
+  if (item.content.startsWith(`<${mdxShortcodePrefix('Oembed')}`)) {
+    const dom = parseDOM(item.content)[0];
+    return getDraftjsOembed({
+      html: unescape(dom.attribs.html),
+      width: dom.attribs.width ? Number(dom.attribs.width) : undefined,
+      height: dom.attribs.height ? Number(dom.attribs.height) : undefined,
+      url: unescape(dom.attribs.url),
+      author_name: unescape(dom.attribs.author_name),
+      author_url: unescape(dom.attribs.author_url),
+      type: unescape(dom.attribs.type),
+      cache_age: Number(dom.attribs.cache_age),
+      provider_name: unescape(dom.attribs.provider_name),
+      provider_url: unescape(dom.attribs.provider_url),
+      version: unescape(dom.attribs.version),
+      key: entityKeyGenerator(),
+      depth: item.level
+    });
+  }
+}
+
+function htmlDomToPullquote(dom, item) {
+  for (const pullquote of dom) {
+    if (pullquote.type === 'tag' && pullquote.name === 'aside' && pullquote.attribs.style === pullquoteStyle) {
+      const text = pullquote.children[0];
+
+      if ((text === null || text === void 0 ? void 0 : text.type) !== 'text') {
+        return;
+      }
+
+      return getDraftjsPullquote({
+        text: text.data,
+        depth: item.level
+      });
+    }
+  }
+}
+
+function fromMd(md, blockEntities, blockTypes) {
+  md = md.replace(/\\\+/g, '+').replace(/\\~/g, '~').replace(/\\\^/g, '^');
+  return markdownToDraft(md, {
+    remarkablePreset: 'full',
+    remarkableOptions: {
+      html: true
+    },
+    blockStyles: {
+      ins_open: 'UNDERLINE',
+      sub: 'SUB',
+      sup: 'SUP'
+    },
+    blockEntities,
+    blockTypes: {
+      hr(item) {
+        if (!item) {
+          return getDraftjsEmpty();
+        }
+
+        return {
+          key: shortid.generate(),
+          text: ' ',
+          type: 'section-break',
+          depth: item.level,
+          inlineStyleRanges: [],
+          entityRanges: [],
+          data: {}
+        };
+      },
+
+      fence(item) {
+        if (!item) {
+          return getDraftjsEmpty();
+        }
+
+        return {
+          type: 'code-block',
+          data: {
+            // In markdown-to-draft this is language, we require lang
+            lang: item.params || ''
+          },
+          // Using the text handling from markdown-to-draft
+          text: (item.content || '').replace(/\n$/, ''),
+          entityRanges: [],
+          inlineStyleRanges: []
+        };
+      },
+
+      ...blockTypes
+    }
+  });
+}
+
+export function mdToDraftjs(mdx) {
+  const entities = {}; // Start really high to avoid conflicts with keys created by markdown-draft-js
+
+  let currentEntityKey = 1000000;
+
+  function entityKeyGenerator() {
+    return currentEntityKey++;
+  }
+
+  const result = fromMd(mdx, {}, {
+    htmlblock(item) {
+      if (item === undefined) {
+        return getDraftjsEmpty();
+      }
+
+      const dom = parseDOM(item.content);
+      const image = htmlDomToDraftjsImage(dom, item, entityKeyGenerator);
+
+      if (image) {
+        Object.assign(entities, image.entities);
+        return image.contentBlock;
+      }
+
+      const oembed = htmlDomToOembed(dom, item, entityKeyGenerator);
+
+      if (oembed) {
+        Object.assign(entities, oembed.entities);
+        return oembed.contentBlock;
+      }
+
+      const pullquote = htmlDomToPullquote(dom, item);
+
+      if (pullquote) {
+        Object.assign(entities, pullquote.entities);
+        return pullquote.contentBlock;
+      }
+
+      return getDraftjsEmpty(item.level);
+    }
+
+  });
+  result.entityMap = { ...result.entityMap,
+    ...entities
+  };
+  return result;
+}
+export function getImagePathFromUrl(url) {
+  return new Url(url).pathname.substr(1);
+}
+
+function mdxToBr(item) {
+  if (item.content.startsWith('<br/>')) {
+    return {
+      key: shortid.generate(),
+      depth: item.depth,
+      type: 'unstyled',
+      text: '',
+      entityRanges: [],
+      inlineStyleRanges: []
+    };
+  }
+}
+
+function mdxToLinkData(item) {
+  if (item.content.startsWith('<TSExternalLink')) {
+    const dom = parseDOM(item.content)[0];
+    return {
+      url: dom.attribs.href,
+      target: '_blank',
+      text: dom.attribs.text
+    };
+  }
+}
+
+function mdxToDraftjsImage(item, entityKeyGenerator) {
+  if (item.content.startsWith(`<${mdxShortcodePrefix('Image')}`)) {
+    const dom = parseDOM(item.content)[0];
+    return getDraftjsImage({
+      captionText: unescape(dom.attribs.caption).replace(/<\/?p>/g, ''),
+      creditText: unescape(dom.attribs.credit).replace(/<\/?p>/g, ''),
+      alignment: dom.attribs.alignment,
+      size: dom.attribs.size,
+      assetId: dom.attribs.id,
+      linkUrl: dom.attribs.link,
+      linkIsExternal: dom.attribs.linkisexternal === 'true',
+      key: entityKeyGenerator(),
+      depth: item.level,
+      path: getImagePathFromUrl(decodeURIComponent(dom.attribs.src))
+    });
+  }
+}
+
+function mdxToDraftjsPullquote(item) {
+  if (item.content.startsWith(`<${mdxShortcodePrefix('Pullquote')}`)) {
+    const dom = parseDOM(item.content)[0];
+    return getDraftjsPullquote({
+      text: unescape(dom.attribs.text),
+      depth: item.level
+    });
+  }
+}
+
+/**
+ * Mutates result to replace empty entities with links,
+ * assuming there is nothing else they could be...
+ */
+function addLinks(state, links) {
+  let linkNumber = 0;
+  let linkOpen = false;
+
+  for (const block of state.blocks) {
+    let blockIsCustom = false;
+
+    for (const [i, entityRange] of block.entityRanges.entries()) {
+      var _entity$data9;
+
+      const entity = state.entityMap[entityRange.key];
+
+      if (entity === undefined) {
+        throw new Error('Missing entity');
+      }
+
+      if (i === 0 && (_entity$data9 = entity.data) !== null && _entity$data9 !== void 0 && _entity$data9.marker) {
+        blockIsCustom = true;
+        continue;
+      }
+
+      if (blockIsCustom && i === Object.keys(block.entityRanges).length - 1) {
+        continue;
+      } // Ignore line breaks that were inserted around blocks
+
+
+      if (entity.depth === undefined) {
+        continue;
+      }
+
+      const link = links[linkNumber];
+
+      if (link && !linkOpen) {
+        entity.type = 'LINK';
+        entity.mutability = 'MUTABLE';
+        entity.data = link;
+        entity.text = link.text;
+        entityRange.length += link.text.length;
+        linkNumber++;
+      }
+
+      linkOpen = !linkOpen;
+    }
+  }
+}
+/**
+ * Mutate state to replace blocks with our custom versions
+ * Return a list of entity keys that should be removed
+ */
+
+
+function replaceBlocks(state, replacementBlocks) {
+  let entityKeysToExclude = [];
+
+  for (let i = 0; i < state.blocks.length; i++) {
+    const block = state.blocks[i];
+
+    for (const entityKey of Object.keys(state.entityMap)) {
+      let removeBlockEntityKeys = false;
+      const blockEntityKeys = block.entityRanges.map(range => range.key);
+
+      if (blockEntityKeys.includes(Number(entityKey))) {
+        var _entity$data10;
+
+        const entity = state.entityMap[entityKey];
+        const markerKey = (_entity$data10 = entity.data) === null || _entity$data10 === void 0 ? void 0 : _entity$data10.marker;
+        const replacementBlock = replacementBlocks[markerKey];
+
+        if (replacementBlock && !removeBlockEntityKeys) {
+          const originalBlock = state.blocks[i];
+          const originalBlockText = state.blocks[i].text;
+          replacementBlock.text = originalBlockText !== '' ? originalBlockText : replacementBlock.text;
+          replacementBlock.inlineStyleRanges = originalBlock.inlineStyleRanges;
+          const removeBlockEntities = entity.data.type === 'image' || entity.data.type === 'oembed'; // eslint-disable-next-line max-depth
+
+          if (!removeBlockEntities) {
+            replacementBlock.entityRanges = originalBlock.entityRanges.filter(entityRange => {
+              var _state$entityMap$enti;
+
+              return ((_state$entityMap$enti = state.entityMap[entityRange.key].data) === null || _state$entityMap$enti === void 0 ? void 0 : _state$entityMap$enti.marker) === undefined;
+            });
+          }
+
+          state.blocks[i] = replacementBlock; // eslint-disable-next-line max-depth
+
+          if (removeBlockEntities) {
+            removeBlockEntityKeys = true;
+          }
+        }
+      }
+
+      if (removeBlockEntityKeys) {
+        entityKeysToExclude = entityKeysToExclude.concat(blockEntityKeys);
+      }
+    }
+  }
+
+  return entityKeysToExclude;
+}
+
+const blockStarts = [{
+  regex: ' <TSImage',
+  replacement: ' <TSImage'
+}, {
+  regex: ' <TSOembed',
+  replacement: ' <TSOembed'
+}, {
+  regex: '\\*\\*\\*',
+  replacement: '***'
+}, {
+  regex: '```',
+  replacement: '```'
+}];
+const blockEnds = [{
+  regex: '(?<=<TSImage[^>]+)/>',
+  replacement: '/>'
+}, {
+  regex: '</TSOembed>',
+  replacement: '</TSOembed>'
+}, {
+  regex: '\\*\\*\\*',
+  replacement: '***'
+}, {
+  regex: '```',
+  replacement: '```'
+}];
+/**
+ * Make sure there is a place to put the cursor around block-level items such as images and oembeds
+ */
+
+export function insertBreaksAroundBlocks(mdx) {
+  for (const start of blockStarts) {
+    // eslint-disable-next-line security-node/non-literal-reg-expr
+    mdx = mdx.replace(new RegExp(`^${start.regex}`, 'g'), `<br/>\n\n${start.replacement}`);
+  }
+
+  for (const end of blockEnds) {
+    // eslint-disable-next-line security-node/non-literal-reg-expr
+    mdx = mdx.replace(new RegExp(`${end.regex}\\s*$`, 'g'), `${end.replacement}\n\n<br/>`);
+
+    for (const start of blockStarts) {
+      mdx = mdx.replace( // eslint-disable-next-line security-node/non-literal-reg-expr
+      new RegExp(`${end.regex}\\s*${start.regex}`, 'g'), `${end.replacement}\n\n<br/>\n\n${start.replacement}`);
+    }
+  }
+
+  return mdx;
+}
+export function mdxToDraftjs(mdx) {
+  const replacementBlocks = {};
+  const entities = {};
+  const oembedKeyToHtml = {};
+  let currentOembedKey; // Start really high to avoid conflicts with keys created by markdown-draft-js
+
+  let currentEntityKey = 1000000;
+
+  function entityKeyGenerator() {
+    return currentEntityKey++;
+  }
+
+  mdx = insertBreaksAroundBlocks(mdx);
+  const links = [];
+  const result = fromMd(mdx, {
+    htmltag(item) {
+      if (item === undefined) {
+        return getDraftjsEmpty();
+      }
+
+      const br = mdxToBr(item);
+
+      if (br) {
+        return br;
+      }
+
+      const linkData = mdxToLinkData(item);
+
+      if (linkData) {
+        links.push(linkData);
+      }
+
+      const image = mdxToDraftjsImage(item, entityKeyGenerator);
+
+      if (image) {
+        replacementBlocks[image.contentBlock.key] = image.contentBlock;
+        Object.assign(entities, image.entities);
+        return {
+          data: {
+            marker: image.contentBlock.key,
+            type: 'image'
+          }
+        };
+      }
+
+      const oembed = mdxToDraftjsOembed(item, entityKeyGenerator);
+
+      if (oembed) {
+        currentOembedKey = Object.keys(oembed.entities)[0];
+        replacementBlocks[oembed.contentBlock.key] = oembed.contentBlock;
+        Object.assign(entities, oembed.entities);
+        return {
+          data: {
+            marker: oembed.contentBlock.key,
+            type: 'oembed'
+          }
+        };
+      }
+
+      const pullquote = mdxToDraftjsPullquote(item);
+
+      if (pullquote) {
+        replacementBlocks[pullquote.contentBlock.key] = pullquote.contentBlock;
+        Object.assign(entities, pullquote.entities);
+        return {
+          data: {
+            marker: pullquote.contentBlock.key,
+            type: 'pullquote'
+          }
+        };
+      }
+
+      return getDraftjsEmpty(item.level);
+    }
+
+  }, {
+    htmlblock(item) {
+      if (item && currentOembedKey) {
+        oembedKeyToHtml[currentOembedKey] = item.content.replace(`</${mdxShortcodePrefix('Oembed')}>\n`, '');
+        currentOembedKey = undefined;
+      }
+
+      return getDraftjsRemovalMarker();
+    }
+
+  });
+  addLinks(result, links);
+  const entityKeysToExclude = replaceBlocks(result, replacementBlocks);
+  result.blocks = result.blocks.filter(block => block.type !== REMOVAL_MARKER_TYPE);
+  forEach(oembedKeyToHtml, (html, key) => {
+    entities[key].data.html = html;
+  });
+  result.entityMap = pickBy({ ...result.entityMap,
+    ...entities
+  }, (entity, key) => {
+    var _entity$data11;
+
+    return ((_entity$data11 = entity.data) === null || _entity$data11 === void 0 ? void 0 : _entity$data11.marker) === undefined && !entityKeysToExclude.includes(Number(key));
+  });
+  return result;
+}