@contentful/field-editor-rich-text 3.4.21 → 3.5.0

package/dist/cjs/plugins/EmbeddedEntityInline/FetchingWrappedInlineEntryCard.js

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FetchingWrappedInlineEntryCard", {
+    enumerable: true,
+    get: function() {
+        return FetchingWrappedInlineEntryCard;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36icons = require("@contentful/f36-icons");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _fieldeditorreference = require("@contentful/field-editor-reference");
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+const _richtexttypes = require("@contentful/rich-text-types");
+const _emotion = require("emotion");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const { getEntryTitle , getEntryStatus  } = _fieldeditorshared.entityHelpers;
+const styles = {
+    scheduledIcon: (0, _emotion.css)({
+        verticalAlign: 'text-bottom',
+        marginRight: _f36tokens.default.spacing2Xs
+    })
+};
+function FetchingWrappedInlineEntryCard(props) {
+    const { data: entry , status: requestStatus  } = (0, _fieldeditorreference.useEntity)('Entry', props.entryId);
+    const { getEntityScheduledActions  } = (0, _fieldeditorreference.useEntityLoader)();
+    const loadEntityScheduledActions = ()=>getEntityScheduledActions('Entry', props.entryId);
+    const allContentTypes = props.sdk.space.getCachedContentTypes();
+    const { onEntityFetchComplete  } = props;
+    const contentType = _react.useMemo(()=>{
+        if (!entry || !allContentTypes) return undefined;
+        return allContentTypes.find((contentType)=>contentType.sys.id === entry.sys.contentType.sys.id);
+    }, [
+        allContentTypes,
+        entry
+    ]);
+    _react.useEffect(()=>{
+        if (requestStatus !== 'success') {
+            return;
+        }
+        onEntityFetchComplete?.();
+    }, [
+        requestStatus,
+        onEntityFetchComplete
+    ]);
+    const contentTypeName = contentType ? contentType.name : '';
+    const title = _react.useMemo(()=>getEntryTitle({
+            entry,
+            contentType,
+            localeCode: props.sdk.field.locale,
+            defaultLocaleCode: props.sdk.locales.default,
+            defaultTitle: 'Untitled'
+        }), [
+        entry,
+        contentType,
+        props.sdk.field.locale,
+        props.sdk.locales.default
+    ]);
+    if (requestStatus === 'error') {
+        return _react.createElement(_f36components.InlineEntryCard, {
+            title: "Entry missing or inaccessible",
+            testId: _richtexttypes.INLINES.EMBEDDED_ENTRY,
+            isSelected: props.isSelected
+        });
+    }
+    if (requestStatus === 'loading') {
+        return _react.createElement(_f36components.InlineEntryCard, {
+            isLoading: true
+        });
+    }
+    const entryStatus = getEntryStatus(entry.sys);
+    if (entryStatus === 'deleted') {
+        return _react.createElement(_f36components.InlineEntryCard, {
+            title: "Entry missing or inaccessible",
+            testId: _richtexttypes.INLINES.EMBEDDED_ENTRY,
+            isSelected: props.isSelected,
+            actions: [
+                _react.createElement(_f36components.MenuItem, {
+                    key: "remove",
+                    onClick: props.onRemove,
+                    testId: "delete"
+                }, "Remove")
+            ]
+        });
+    }
+    return _react.createElement(_f36components.InlineEntryCard, {
+        testId: _richtexttypes.INLINES.EMBEDDED_ENTRY,
+        isSelected: props.isSelected,
+        title: `${contentTypeName}: ${title}`,
+        status: entryStatus,
+        actions: [
+            _react.createElement(_f36components.MenuItem, {
+                key: "edit",
+                onClick: props.onEdit
+            }, "Edit"),
+            _react.createElement(_f36components.MenuItem, {
+                key: "remove",
+                onClick: props.onRemove,
+                disabled: props.isDisabled,
+                testId: "delete"
+            }, "Remove")
+        ]
+    }, _react.createElement(_fieldeditorreference.ScheduledIconWithTooltip, {
+        getEntityScheduledActions: loadEntityScheduledActions,
+        entityType: "Entry",
+        entityId: entry.sys.id
+    }, _react.createElement(_f36icons.ClockIcon, {
+        className: styles.scheduledIcon,
+        variant: "muted",
+        testId: "scheduled-icon"
+    })), _react.createElement(_f36components.Text, null, title));
+}

package/dist/cjs/plugins/EmbeddedEntityInline/Util.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createInlineEntryNode", {
+    enumerable: true,
+    get: function() {
+        return createInlineEntryNode;
+    }
+});
+const _richtexttypes = require("@contentful/rich-text-types");
+function createInlineEntryNode(id) {
+    return {
+        type: _richtexttypes.INLINES.EMBEDDED_ENTRY,
+        children: [
+            {
+                text: ''
+            }
+        ],
+        data: {
+            target: {
+                sys: {
+                    id,
+                    type: 'Link',
+                    linkType: 'Entry'
+                }
+            }
+        }
+    };
+}

package/dist/cjs/plugins/EmbeddedEntityInline/index.js

@@ -0,0 +1,221 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ToolbarEmbeddedEntityInlineButton: function() {
+        return ToolbarEmbeddedEntityInlineButton;
+    },
+    createEmbeddedEntityInlinePlugin: function() {
+        return createEmbeddedEntityInlinePlugin;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36icons = require("@contentful/f36-icons");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _richtexttypes = require("@contentful/rich-text-types");
+const _emotion = require("emotion");
+const _ishotkey = _interop_require_default(require("is-hotkey"));
+const _slatereact = require("slate-react");
+const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
+const _editor = require("../../helpers/editor");
+const _environment = require("../../helpers/environment");
+const _newEntitySelectorConfigFromRichTextField = _interop_require_default(require("../../helpers/newEntitySelectorConfigFromRichTextField"));
+const _sdkNavigatorSlideIn = require("../../helpers/sdkNavigatorSlideIn");
+const _queries = require("../../internal/queries");
+const _transforms = require("../../internal/transforms");
+const _SdkProvider = require("../../SdkProvider");
+const _linkstracking = require("../links-tracking");
+const _FetchingWrappedInlineEntryCard = require("./FetchingWrappedInlineEntryCard");
+const _Util = require("./Util");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const styles = {
+    icon: (0, _emotion.css)({
+        marginRight: '10px'
+    }),
+    root: (0, _emotion.css)({
+        display: 'inline-block',
+        margin: `0 ${_f36tokens.default.spacing2Xs}`,
+        fontSize: 'inherit',
+        span: {
+            userSelect: 'none'
+        }
+    })
+};
+function EmbeddedEntityInline(props) {
+    const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
+    const sdk = (0, _SdkProvider.useSdkContext)();
+    const isSelected = (0, _slatereact.useSelected)();
+    const { id: entryId  } = props.element.data.target.sys;
+    const isDisabled = (0, _slatereact.useReadOnly)();
+    function handleEditClick() {
+        return sdk.navigator.openEntry(entryId, {
+            slideIn: {
+                waitForClose: true
+            }
+        }).then(()=>{
+            editor && (0, _editor.focus)(editor);
+        });
+    }
+    function handleRemoveClick() {
+        if (!editor) return;
+        const pathToElement = (0, _queries.findNodePath)(editor, props.element);
+        (0, _transforms.removeNodes)(editor, {
+            at: pathToElement
+        });
+    }
+    return _react.createElement("span", {
+        ...props.attributes,
+        className: styles.root,
+        "data-embedded-entity-inline-id": entryId,
+        contentEditable: _environment.IS_CHROME ? undefined : false,
+        draggable: _environment.IS_CHROME ? true : undefined
+    }, _react.createElement("span", {
+        contentEditable: _environment.IS_CHROME ? false : undefined,
+        draggable: _environment.IS_CHROME ? true : undefined
+    }, _react.createElement(_FetchingWrappedInlineEntryCard.FetchingWrappedInlineEntryCard, {
+        sdk: sdk,
+        entryId: entryId,
+        isSelected: isSelected,
+        isDisabled: isDisabled,
+        onRemove: handleRemoveClick,
+        onEdit: handleEditClick,
+        onEntityFetchComplete: props.onEntityFetchComplete
+    })), props.children);
+}
+async function selectEntityAndInsert(editor, sdk, logAction) {
+    logAction('openCreateEmbedDialog', {
+        nodeType: _richtexttypes.INLINES.EMBEDDED_ENTRY
+    });
+    const config = {
+        ...(0, _newEntitySelectorConfigFromRichTextField.default)(sdk.field, _richtexttypes.INLINES.EMBEDDED_ENTRY),
+        withCreate: true
+    };
+    const { selection  } = editor;
+    const rteSlide = (0, _sdkNavigatorSlideIn.watchCurrentSlide)(sdk.navigator);
+    const entry = await sdk.dialogs.selectSingleEntry(config);
+    if (!entry) {
+        logAction('cancelCreateEmbedDialog', {
+            nodeType: _richtexttypes.INLINES.EMBEDDED_ENTRY
+        });
+    } else {
+        (0, _transforms.select)(editor, selection);
+        (0, _transforms.insertNodes)(editor, (0, _Util.createInlineEntryNode)(entry.sys.id));
+        logAction('insert', {
+            nodeType: _richtexttypes.INLINES.EMBEDDED_ENTRY
+        });
+    }
+    rteSlide.onActive(()=>{
+        rteSlide.unwatch();
+        (0, _editor.focus)(editor);
+    });
+}
+function ToolbarEmbeddedEntityInlineButton(props) {
+    const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
+    const sdk = (0, _SdkProvider.useSdkContext)();
+    async function handleClick(event) {
+        event.preventDefault();
+        if (!editor) return;
+        props.onClose();
+        await selectEntityAndInsert(editor, sdk, editor.tracking.onToolbarAction);
+        (0, _editor.moveToTheNextChar)(editor);
+    }
+    return _react.createElement(_f36components.Menu.Item, {
+        disabled: props.isDisabled,
+        className: "rich-text__entry-link-block-button",
+        testId: `toolbar-toggle-${_richtexttypes.INLINES.EMBEDDED_ENTRY}`,
+        onClick: handleClick
+    }, _react.createElement(_f36components.Flex, {
+        alignItems: "center",
+        flexDirection: "row"
+    }, _react.createElement(_f36icons.EmbeddedEntryInlineIcon, {
+        variant: "secondary",
+        className: `rich-text__embedded-entry-list-icon ${styles.icon}`
+    }), _react.createElement("span", null, "Inline entry")));
+}
+function createEmbeddedEntityInlinePlugin(sdk) {
+    const htmlAttributeName = 'data-embedded-entity-inline-id';
+    return {
+        key: _richtexttypes.INLINES.EMBEDDED_ENTRY,
+        type: _richtexttypes.INLINES.EMBEDDED_ENTRY,
+        isElement: true,
+        isInline: true,
+        isVoid: true,
+        component: (0, _linkstracking.withLinkTracking)(EmbeddedEntityInline),
+        options: {
+            hotkey: 'mod+shift+2'
+        },
+        handlers: {
+            onKeyDown: getWithEmbeddedEntryInlineEvents(sdk)
+        },
+        deserializeHtml: {
+            rules: [
+                {
+                    validAttribute: htmlAttributeName
+                }
+            ],
+            withoutChildren: true,
+            getNode: (el)=>(0, _Util.createInlineEntryNode)(el.getAttribute(htmlAttributeName))
+        }
+    };
+}
+function getWithEmbeddedEntryInlineEvents(sdk) {
+    return function withEmbeddedEntryInlineEvents(editor, { options: { hotkey  }  }) {
+        return function handleEvent(event) {
+            if (!editor) return;
+            if (hotkey && (0, _ishotkey.default)(hotkey, event)) {
+                selectEntityAndInsert(editor, sdk, editor.tracking.onShortcutAction);
+            }
+        };
+    };
+}

package/dist/cjs/plugins/Heading/__tests__/createHeadingPlugin.test.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _testutils = require("../../../test-utils");
+describe('normalization', ()=>{
+    it('can contain inline entries & hyperlinks', ()=>{
+        const input = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hh1", null, "some text before", (0, _testutils.jsx)("hinline", {
+            type: "Entry",
+            id: "inline-entry"
+        }), (0, _testutils.jsx)("hlink", {
+            uri: "https://contentful.com"
+        }), (0, _testutils.jsx)("hlink", {
+            entry: "entry-id"
+        }), (0, _testutils.jsx)("hlink", {
+            asset: "asset-id"
+        }), "some text after"), (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("htext", null)));
+        (0, _testutils.assertOutput)({
+            input,
+            expected: input
+        });
+    });
+    it('unwraps nested paragraphs', ()=>{
+        const input = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hh1", null, "one", ' ', (0, _testutils.jsx)("hp", null, "two ", (0, _testutils.jsx)("hp", null, "three ")), "four"));
+        const expected = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hh1", null, "one two three four"), (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("htext", null)));
+        (0, _testutils.assertOutput)({
+            input,
+            expected
+        });
+    });
+    describe('lifts other invalid children', ()=>{
+        it('block void elements', ()=>{
+            const input = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hh1", null, (0, _testutils.jsx)("hembed", {
+                type: "Asset",
+                id: "1"
+            }), " start"), (0, _testutils.jsx)("hh1", null, "end ", (0, _testutils.jsx)("hembed", {
+                type: "Asset",
+                id: "2"
+            })), (0, _testutils.jsx)("hh1", null, "in ", (0, _testutils.jsx)("hembed", {
+                type: "Asset",
+                id: "3"
+            }), " between"), (0, _testutils.jsx)("hh1", null, (0, _testutils.jsx)("hembed", {
+                type: "Entry",
+                id: "1"
+            }), " start"), (0, _testutils.jsx)("hh1", null, "end ", (0, _testutils.jsx)("hembed", {
+                type: "Entry",
+                id: "2"
+            })), (0, _testutils.jsx)("hh1", null, "in ", (0, _testutils.jsx)("hembed", {
+                type: "Entry",
+                id: "3"
+            }), " between"), (0, _testutils.jsx)("hh1", null, (0, _testutils.jsx)("hhr", null), " start"), (0, _testutils.jsx)("hh1", null, "end ", (0, _testutils.jsx)("hhr", null)), (0, _testutils.jsx)("hh1", null, "in ", (0, _testutils.jsx)("hhr", null), " between"));
+            const expected = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hembed", {
+                type: "Asset",
+                id: "1"
+            }), (0, _testutils.jsx)("hh1", null, " start"), (0, _testutils.jsx)("hh1", null, "end "), (0, _testutils.jsx)("hembed", {
+                type: "Asset",
+                id: "2"
+            }), (0, _testutils.jsx)("hh1", null, "in "), (0, _testutils.jsx)("hembed", {
+                type: "Asset",
+                id: "3"
+            }), (0, _testutils.jsx)("hh1", null, " between"), (0, _testutils.jsx)("hembed", {
+                type: "Entry",
+                id: "1"
+            }), (0, _testutils.jsx)("hh1", null, " start"), (0, _testutils.jsx)("hh1", null, "end "), (0, _testutils.jsx)("hembed", {
+                type: "Entry",
+                id: "2"
+            }), (0, _testutils.jsx)("hh1", null, "in "), (0, _testutils.jsx)("hembed", {
+                type: "Entry",
+                id: "3"
+            }), (0, _testutils.jsx)("hh1", null, " between"), (0, _testutils.jsx)("hhr", null), (0, _testutils.jsx)("hh1", null, " start"), (0, _testutils.jsx)("hh1", null, "end "), (0, _testutils.jsx)("hhr", null), (0, _testutils.jsx)("hh1", null, "in "), (0, _testutils.jsx)("hhr", null), (0, _testutils.jsx)("hh1", null, " between"), (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("htext", null)));
+            (0, _testutils.assertOutput)({
+                input,
+                expected
+            });
+        });
+        it('nested headings', ()=>{
+            const input = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hh1", null, "some", (0, _testutils.jsx)("hh1", null, (0, _testutils.jsx)("htext", {
+                bold: true,
+                italic: true,
+                underline: true
+            }, "paragraph")), "text"));
+            const expected = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hh1", null, "some"), (0, _testutils.jsx)("hh1", null, (0, _testutils.jsx)("htext", {
+                bold: true,
+                italic: true,
+                underline: true
+            }, "paragraph")), (0, _testutils.jsx)("hh1", null, "text"), (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("htext", null)));
+            (0, _testutils.assertOutput)({
+                input,
+                expected
+            });
+        });
+        it('handles quotes', ()=>{
+            const input = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hh1", null, "some", (0, _testutils.jsx)("hquote", null, (0, _testutils.jsx)("hp", null, "quote")), "text"));
+            const expected = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hh1", null, "some"), (0, _testutils.jsx)("hquote", null, (0, _testutils.jsx)("hp", null, "quote")), (0, _testutils.jsx)("hh1", null, "text"), (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("htext", null)));
+            (0, _testutils.assertOutput)({
+                input,
+                expected
+            });
+        });
+        it('handles lists', ()=>{
+            const input = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hh1", null, "some", (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "list item"))), "text"));
+            const expected = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hh1", null, "some"), (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "list item"))), (0, _testutils.jsx)("hh1", null, "text"), (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("htext", null)));
+            (0, _testutils.assertOutput)({
+                input,
+                expected
+            });
+        });
+        it('handles tables', ()=>{
+            const input = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hh1", null, "some", (0, _testutils.jsx)("htable", null, (0, _testutils.jsx)("htr", null, (0, _testutils.jsx)("htd", null, (0, _testutils.jsx)("hp", null, "cell 1")), (0, _testutils.jsx)("htd", null, (0, _testutils.jsx)("hp", null, "cell 2")))), "text"));
+            const expected = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hh1", null, "some"), (0, _testutils.jsx)("htable", null, (0, _testutils.jsx)("htr", null, (0, _testutils.jsx)("htd", null, (0, _testutils.jsx)("hp", null, "cell 1")), (0, _testutils.jsx)("htd", null, (0, _testutils.jsx)("hp", null, "cell 2")))), (0, _testutils.jsx)("hh1", null, "text"), (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("htext", null)));
+            (0, _testutils.assertOutput)({
+                input,
+                expected
+            });
+        });
+    });
+});

package/dist/cjs/plugins/Heading/components/Heading.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "HeadingComponents", {
+    enumerable: true,
+    get: function() {
+        return HeadingComponents;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _richtexttypes = require("@contentful/rich-text-types");
+const _emotion = require("emotion");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const styles = {
+    dropdown: {
+        root: (0, _emotion.css)`
+      font-weight: ${_f36tokens.default.fontWeightDemiBold};
+    `,
+        [_richtexttypes.BLOCKS.PARAGRAPH]: (0, _emotion.css)`
+      font-size: ${_f36tokens.default.fontSizeL};
+    `,
+        [_richtexttypes.BLOCKS.HEADING_1]: (0, _emotion.css)`
+      font-size: 1.625rem;
+    `,
+        [_richtexttypes.BLOCKS.HEADING_2]: (0, _emotion.css)`
+      font-size: 1.4375rem;
+    `,
+        [_richtexttypes.BLOCKS.HEADING_3]: (0, _emotion.css)`
+      font-size: 1.25rem;
+    `,
+        [_richtexttypes.BLOCKS.HEADING_4]: (0, _emotion.css)`
+      font-size: 1.125rem;
+    `,
+        [_richtexttypes.BLOCKS.HEADING_5]: (0, _emotion.css)`
+      font-size: 1rem;
+    `,
+        [_richtexttypes.BLOCKS.HEADING_6]: (0, _emotion.css)`
+      font-size: 0.875rem;
+    `
+    },
+    headings: {
+        root: (0, _emotion.css)`
+      font-weight: ${_f36tokens.default.fontWeightMedium};
+      line-height: 1.3;
+      margin: 0 0 ${_f36tokens.default.spacingS};
+    `,
+        [_richtexttypes.BLOCKS.HEADING_1]: (0, _emotion.css)`
+      font-size: 1.875rem;
+    `,
+        [_richtexttypes.BLOCKS.HEADING_2]: (0, _emotion.css)`
+      font-size: 1.5625rem;
+    `,
+        [_richtexttypes.BLOCKS.HEADING_3]: (0, _emotion.css)`
+      font-size: 1.375rem;
+    `,
+        [_richtexttypes.BLOCKS.HEADING_4]: (0, _emotion.css)`
+      font-size: 1.25rem;
+    `,
+        [_richtexttypes.BLOCKS.HEADING_5]: (0, _emotion.css)`
+      font-size: 1.125rem;
+    `,
+        [_richtexttypes.BLOCKS.HEADING_6]: (0, _emotion.css)`
+      font-size: 1rem;
+    `
+    }
+};
+function createHeading(Tag, block) {
+    return function Heading(props) {
+        return _react.createElement(Tag, {
+            ...props.attributes,
+            className: (0, _emotion.cx)(styles.headings.root, styles.headings[block])
+        }, props.children);
+    };
+}
+const HeadingComponents = {
+    [_richtexttypes.BLOCKS.HEADING_1]: _react.memo(createHeading('h1', _richtexttypes.BLOCKS.HEADING_1)),
+    [_richtexttypes.BLOCKS.HEADING_2]: _react.memo(createHeading('h2', _richtexttypes.BLOCKS.HEADING_2)),
+    [_richtexttypes.BLOCKS.HEADING_3]: _react.memo(createHeading('h3', _richtexttypes.BLOCKS.HEADING_3)),
+    [_richtexttypes.BLOCKS.HEADING_4]: _react.memo(createHeading('h4', _richtexttypes.BLOCKS.HEADING_4)),
+    [_richtexttypes.BLOCKS.HEADING_5]: _react.memo(createHeading('h5', _richtexttypes.BLOCKS.HEADING_5)),
+    [_richtexttypes.BLOCKS.HEADING_6]: _react.memo(createHeading('h6', _richtexttypes.BLOCKS.HEADING_6))
+};