@takeshape/util 11.45.5 → 11.47.1

package/es/draftjs.js

@@ -1,819 +0,0 @@
-/*
- * 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 { ElementType, parseDOM } from 'htmlparser2';
-import Url from 'url-parse';
-import render from 'dom-serializer';
-import shortid from 'shortid';
-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';
-import he from 'he';
-import { getDraftjsImage, getDraftjsOembed, getDraftjsPullquote } from './draftjs-templates';
-import { imageTemplate, imageTemplateMdx, oembedTemplate, oembedTemplateMdx } from './templates';
-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, content));
-};
-
-/**
- * Adjust entity ranges or inline style ranges to insert `amount` space starting at `after`.
- * For example, take this visualization of a range with offset 5 and length 5, where
- * the vertical bars are the start and end of the range, inclusive:
- * -----|---|-----
- * If you insert amount 5 after 0 you get this:
- * ----------|---|-----
- * If you insert amount 5 after 7 you get this:
- * -----|--------|-----
- * If you insert amount 5 after 10 you get this:
- * -----|---|----------
- * If you insert amount -2 after 7 you get this:
- * -----|-|-----
- */
-export const adjustRanges = (ranges, after, amount) => {
-  return ranges.map(range => ({
-    ...range,
-    offset: range.offset > after ? range.offset + amount : range.offset,
-    length: range.offset <= after && range.offset + range.length > after ? range.length + amount : range.length
-  }));
-};
-
-/**
- * Encode HTML entities in this draftjs state.
- * We adjust ranges so that their offsets and lengths are still correct with the encoded text.
- * EG `&#x27;` is 5 characters longer than `'` so if there is a single apostrophe before a link,
- * the link entity's offset needs to be increased by 5 when the text is encoded.
- * This also applies to the entity's length if there are escaped characters inside the entity.
- */
-export const encodeHtmlEntities = draftjs => {
-  const result = {
-    ...draftjs,
-    blocks: draftjs.blocks.map(block => {
-      let {
-        text
-      } = block;
-      let {
-        entityRanges,
-        inlineStyleRanges
-      } = block;
-      for (let i = 0; i < text.length; i++) {
-        const char = text.charAt(i);
-        const encodedChar = he.encode(char);
-        if (encodedChar !== char) {
-          const offset = encodedChar.length - char.length;
-          entityRanges = adjustRanges(entityRanges, i, offset);
-          inlineStyleRanges = adjustRanges(inlineStyleRanges, i, offset);
-          text = text.substring(0, i) + encodedChar + text.substring(i + 1);
-          i += offset;
-        }
-      }
-      return {
-        ...block,
-        entityRanges,
-        inlineStyleRanges,
-        text
-      };
-    })
-  };
-  return result;
-};
-export function fromDraftjs(draftjs, styleItems, entityItems) {
-  let markdown = draftToMarkdown(encodeHtmlEntities(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) {
-          const lang = entity?.data?.lang ?? '';
-          return `\`\`\`${lang}\n`;
-        },
-        close() {
-          return '\n```';
-        }
-      },
-      ...styleItems
-    },
-    entityItems: {
-      LINK: {
-        open(entity) {
-          if (entity?.data?.target === '_blank') {
-            const url = escape(entity?.data?.url || entity?.data?.href || '');
-            return `<TSExternalLink text="${EXTERNAL_LINK_MARKER}" href="${url}">`;
-          }
-          return '[';
-        },
-        close(entity) {
-          if (entity?.data?.target === '_blank') {
-            return '</TSExternalLink>';
-          }
-          return ']('.concat(entity?.data?.url || entity?.data?.href || '', ')');
-        }
-      },
-      ...entityItems
-    }
-  });
-  markdown = handleExternalLinks(markdown);
-  markdown = handleMultiword(markdown, SUPERSCRIPT_MARKER, '^', /\^/g);
-  markdown = handleMultiword(markdown, SUBSCRIPT_MARKER, '~', /~/g);
-  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?.data) {
-          return '';
-        }
-        const {
-          data
-        } = entity;
-        return oembedTemplate(str => str, data);
-      }
-    },
-    image: {
-      open() {
-        return '';
-      },
-      close(entity) {
-        if (!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) {
-  return draftjs?.blocks?.[0]?.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?.data) {
-          return '';
-        }
-        const {
-          data
-        } = entity;
-        return oembedTemplateMdx(prefix, data);
-      }
-    },
-    image: {
-      open() {
-        return '';
-      },
-      close(entity) {
-        const asset = assets[entity?.data?.id];
-        if (!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?.url,
-          linkisexternal: data.link?.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 === ElementType.Tag && figure.name === 'figure') {
-      let link;
-      const figureChildOne = figure.children?.[0];
-      const figureChildTwo = figure.children?.[1];
-      if (figureChildOne?.type === ElementType.Tag && figureChildOne?.name === 'a') {
-        link = figureChildOne;
-      }
-      let figcaption;
-      if (figureChildOne?.type === ElementType.Tag && figureChildOne?.name === 'figcaption') {
-        figcaption = figureChildOne;
-      } else if (figureChildTwo?.type === ElementType.Tag && figureChildTwo?.name === 'figcaption') {
-        figcaption = figure.children[1];
-      }
-      const img = link ? link.children[0] : figure.children[0];
-      if (img?.type !== ElementType.Tag || img?.name !== 'img') {
-        return;
-      }
-      const figcaptionChild = figcaption?.type === ElementType.Tag ? figcaption?.children[0] : undefined;
-      let caption;
-      if (figcaptionChild?.type === ElementType.Tag && figcaptionChild?.name === 'span' && figcaptionChild?.attribs.class === 'caption') {
-        caption = figcaptionChild;
-      }
-      const captionChildThree = figcaption?.type === ElementType.Tag ? figcaption?.children[2] : undefined;
-      let credit;
-      if (captionChildThree?.type === ElementType.Tag && captionChildThree?.name === 'span' && captionChildThree?.attribs.class === 'credit') {
-        credit = captionChildThree;
-      }
-      const {
-        alignment,
-        size
-      } = parseFigureClass(figure.attribs.class);
-      return getDraftjsImage({
-        captionText: caption?.children[0].type === ElementType.Text ? caption.children[0].data ?? '' : '',
-        creditText: credit?.children[0].type === ElementType.Text ? credit?.children[0].data ?? '' : '',
-        alignment,
-        size,
-        assetId: getAssetIdFromImageSrc(img.attribs.src),
-        linkUrl: link?.attribs.href,
-        linkIsExternal: link?.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 === ElementType.Tag && oembedDiv.name === 'div' && oembedDiv.attribs.class === 'oembed') {
-      const blockquote = oembedDiv.children[0];
-      if (blockquote?.type !== ElementType.Tag || blockquote?.name !== 'blockquote') {
-        return;
-      }
-      const script = oembedDiv.children[2];
-      if (script?.type !== 'script' || 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, {
-      decodeEntities: true
-    })[0];
-    if (dom.type !== ElementType.Tag) {
-      return;
-    }
-    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 === ElementType.Tag && pullquote.name === 'aside' && pullquote.attribs.style === pullquoteStyle) {
-      const text = pullquote.children[0];
-      if (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: he.decode((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, {
-        decodeEntities: false
-      });
-      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, {
-      decodeEntities: false
-    })[0];
-    if (dom.type !== ElementType.Tag) {
-      return;
-    }
-    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, {
-      decodeEntities: false
-    })[0];
-    if (dom.type !== ElementType.Tag) {
-      return;
-    }
-    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, {
-      decodeEntities: false
-    })[0];
-    if (dom.type !== ElementType.Tag) {
-      return;
-    }
-    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()) {
-      const entity = state.entityMap[entityRange.key];
-      if (entity === undefined) {
-        throw new Error('Missing entity');
-      }
-      if (i === 0 && entity.data?.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;
-        const decodedText = he.decode(link.text);
-        entity.text = decodedText;
-        entityRange.length += decodedText.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))) {
-        const entity = state.entityMap[entityKey];
-        const markerKey = entity.data?.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 => state.entityMap[entityRange.key].data?.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 = [{
-  lookBehind: '<TSImage.*(?=/>)',
-  regex: '/>',
-  replacement: '/>'
-}, {
-  regex: '</TSOembed>',
-  replacement: '</TSOembed>'
-}, {
-  regex: '\\*\\*\\*',
-  replacement: '***'
-}, {
-  regex: '```',
-  replacement: '```'
-}];
-const getLookBehindValue = (end, str) => {
-  if (end.lookBehind) {
-    const behindMatch = new RegExp(end.lookBehind).exec(str);
-    if (behindMatch) {
-      return behindMatch[0];
-    }
-  }
-  return '';
-};
-
-/**
- * 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) {
-    mdx = mdx.replace(new RegExp(`^${start.regex}`, 'g'), `<br/>\n\n${start.replacement}`);
-  }
-  for (const end of blockEnds) {
-    mdx = mdx.replace(new RegExp(`${end.lookBehind ?? ''}${end.regex}\\s*$`, 'g'), match => {
-      return `${getLookBehindValue(end, match)}${end.replacement}\n\n<br/>`;
-    });
-    for (const start of blockStarts) {
-      mdx = mdx.replace(new RegExp(`${end.lookBehind ?? ''}${end.regex}\\s*${start.regex}`, 'g'), match => {
-        return `${getLookBehindValue(end, match)}${end.replacement ?? 'FFF'}\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) => entity.data?.marker === undefined && !entityKeysToExclude.includes(Number(key)));
-  return result;
-}