@takeshape/util 11.45.5 → 11.47.1

package/dist/esm/common/draftjs.js

@@ -0,0 +1,792 @@
+import { getImageUrl } from '@takeshape/routing';
+import render from 'dom-serializer';
+import he from 'he';
+import { ElementType, parseDOM } from 'htmlparser2';
+import escape from 'lodash/escape.js';
+import forEach from 'lodash/forEach.js';
+import pickBy from 'lodash/pickBy.js';
+import unescape from 'lodash/unescape.js';
+import { draftToMarkdown, markdownToDraft } from 'markdown-draft-js';
+import shortid from 'shortid';
+import Url from 'url-parse';
+import { getDraftjsImage, getDraftjsOembed, getDraftjsPullquote } from './draftjs-templates.js';
+import { imageTemplate, imageTemplateMdx, oembedTemplate, oembedTemplateMdx } from './templates.js';
+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]
+    };
+}
+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';
+                    if (!removeBlockEntities) {
+                        replacementBlock.entityRanges = originalBlock.entityRanges.filter((entityRange) => state.entityMap[entityRange.key].data?.marker === undefined);
+                    }
+                    state.blocks[i] = replacementBlock;
+                    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;
+}