@contentful/field-editor-rich-text 3.4.22 → 3.6.0

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

@@ -0,0 +1,160 @@
+import * as React from 'react';
+import { Menu, Flex } from '@contentful/f36-components';
+import { EmbeddedEntryInlineIcon } from '@contentful/f36-icons';
+import tokens from '@contentful/f36-tokens';
+import { INLINES } from '@contentful/rich-text-types';
+import { css } from 'emotion';
+import isHotkey from 'is-hotkey';
+import { useSelected, useReadOnly } from 'slate-react';
+import { useContentfulEditor } from '../../ContentfulEditorProvider';
+import { focus, moveToTheNextChar } from '../../helpers/editor';
+import { IS_CHROME } from '../../helpers/environment';
+import newEntitySelectorConfigFromRichTextField from '../../helpers/newEntitySelectorConfigFromRichTextField';
+import { watchCurrentSlide } from '../../helpers/sdkNavigatorSlideIn';
+import { findNodePath } from '../../internal/queries';
+import { insertNodes, removeNodes, select } from '../../internal/transforms';
+import { useSdkContext } from '../../SdkProvider';
+import { useLinkTracking } from '../links-tracking';
+import { FetchingWrappedInlineEntryCard } from './FetchingWrappedInlineEntryCard';
+import { createInlineEntryNode } from './Util';
+const styles = {
+    icon: css({
+        marginRight: '10px'
+    }),
+    root: css({
+        display: 'inline-block',
+        margin: `0 ${tokens.spacing2Xs}`,
+        fontSize: 'inherit',
+        span: {
+            userSelect: 'none'
+        }
+    })
+};
+function EmbeddedEntityInline(props) {
+    const editor = useContentfulEditor();
+    const sdk = useSdkContext();
+    const isSelected = useSelected();
+    const { id: entryId  } = props.element.data.target.sys;
+    const isDisabled = useReadOnly();
+    const { onEntityFetchComplete  } = useLinkTracking();
+    function handleEditClick() {
+        return sdk.navigator.openEntry(entryId, {
+            slideIn: {
+                waitForClose: true
+            }
+        }).then(()=>{
+            editor && focus(editor);
+        });
+    }
+    function handleRemoveClick() {
+        if (!editor) return;
+        const pathToElement = findNodePath(editor, props.element);
+        removeNodes(editor, {
+            at: pathToElement
+        });
+    }
+    return React.createElement("span", {
+        ...props.attributes,
+        className: styles.root,
+        "data-embedded-entity-inline-id": entryId,
+        contentEditable: IS_CHROME ? undefined : false,
+        draggable: IS_CHROME ? true : undefined
+    }, React.createElement("span", {
+        contentEditable: IS_CHROME ? false : undefined,
+        draggable: IS_CHROME ? true : undefined
+    }, React.createElement(FetchingWrappedInlineEntryCard, {
+        sdk: sdk,
+        entryId: entryId,
+        isSelected: isSelected,
+        isDisabled: isDisabled,
+        onRemove: handleRemoveClick,
+        onEdit: handleEditClick,
+        onEntityFetchComplete: onEntityFetchComplete
+    })), props.children);
+}
+async function selectEntityAndInsert(editor, sdk, logAction) {
+    logAction('openCreateEmbedDialog', {
+        nodeType: INLINES.EMBEDDED_ENTRY
+    });
+    const config = {
+        ...newEntitySelectorConfigFromRichTextField(sdk.field, INLINES.EMBEDDED_ENTRY),
+        withCreate: true
+    };
+    const { selection  } = editor;
+    const rteSlide = watchCurrentSlide(sdk.navigator);
+    const entry = await sdk.dialogs.selectSingleEntry(config);
+    if (!entry) {
+        logAction('cancelCreateEmbedDialog', {
+            nodeType: INLINES.EMBEDDED_ENTRY
+        });
+    } else {
+        select(editor, selection);
+        insertNodes(editor, createInlineEntryNode(entry.sys.id));
+        logAction('insert', {
+            nodeType: INLINES.EMBEDDED_ENTRY
+        });
+    }
+    rteSlide.onActive(()=>{
+        rteSlide.unwatch();
+        focus(editor);
+    });
+}
+export function ToolbarEmbeddedEntityInlineButton(props) {
+    const editor = useContentfulEditor();
+    const sdk = useSdkContext();
+    async function handleClick(event) {
+        event.preventDefault();
+        if (!editor) return;
+        props.onClose();
+        await selectEntityAndInsert(editor, sdk, editor.tracking.onToolbarAction);
+        moveToTheNextChar(editor);
+    }
+    return React.createElement(Menu.Item, {
+        disabled: props.isDisabled,
+        className: "rich-text__entry-link-block-button",
+        testId: `toolbar-toggle-${INLINES.EMBEDDED_ENTRY}`,
+        onClick: handleClick
+    }, React.createElement(Flex, {
+        alignItems: "center",
+        flexDirection: "row"
+    }, React.createElement(EmbeddedEntryInlineIcon, {
+        variant: "secondary",
+        className: `rich-text__embedded-entry-list-icon ${styles.icon}`
+    }), React.createElement("span", null, "Inline entry")));
+}
+export function createEmbeddedEntityInlinePlugin(sdk) {
+    const htmlAttributeName = 'data-embedded-entity-inline-id';
+    return {
+        key: INLINES.EMBEDDED_ENTRY,
+        type: INLINES.EMBEDDED_ENTRY,
+        isElement: true,
+        isInline: true,
+        isVoid: true,
+        component: EmbeddedEntityInline,
+        options: {
+            hotkey: 'mod+shift+2'
+        },
+        handlers: {
+            onKeyDown: getWithEmbeddedEntryInlineEvents(sdk)
+        },
+        deserializeHtml: {
+            rules: [
+                {
+                    validAttribute: htmlAttributeName
+                }
+            ],
+            withoutChildren: true,
+            getNode: (el)=>createInlineEntryNode(el.getAttribute(htmlAttributeName))
+        }
+    };
+}
+function getWithEmbeddedEntryInlineEvents(sdk) {
+    return function withEmbeddedEntryInlineEvents(editor, { options: { hotkey  }  }) {
+        return function handleEvent(event) {
+            if (!editor) return;
+            if (hotkey && isHotkey(hotkey, event)) {
+                selectEntityAndInsert(editor, sdk, editor.tracking.onShortcutAction);
+            }
+        };
+    };
+}

package/dist/esm/plugins/EmbeddedResourceBlock/LinkedResourceBlock.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useSelected, useReadOnly } from 'slate-react';
+import { useContentfulEditor } from '../../ContentfulEditorProvider';
+import { findNodePath, removeNodes } from '../../internal';
+import { useSdkContext } from '../../SdkProvider';
+import { useLinkTracking } from '../links-tracking';
+import { FetchingWrappedResourceCard } from '../shared/FetchingWrappedResourceCard';
+import { LinkedBlockWrapper } from '../shared/LinkedBlockWrapper';
+export function LinkedResourceBlock(props) {
+    const { attributes , children , element  } = props;
+    const { onEntityFetchComplete  } = useLinkTracking();
+    const isSelected = useSelected();
+    const editor = useContentfulEditor();
+    const sdk = useSdkContext();
+    const isDisabled = useReadOnly();
+    const link = element.data.target.sys;
+    const handleRemoveClick = React.useCallback(()=>{
+        if (!editor) return;
+        const pathToElement = findNodePath(editor, element);
+        removeNodes(editor, {
+            at: pathToElement
+        });
+    }, [
+        editor,
+        element
+    ]);
+    return React.createElement(LinkedBlockWrapper, {
+        attributes: attributes,
+        element: element,
+        card: React.createElement(FetchingWrappedResourceCard, {
+            sdk: sdk,
+            link: link,
+            isDisabled: isDisabled,
+            isSelected: isSelected,
+            onRemove: handleRemoveClick,
+            onEntityFetchComplete: onEntityFetchComplete
+        })
+    }, children);
+}

package/dist/esm/plugins/EmbeddedResourceBlock/index.js

@@ -0,0 +1,45 @@
+import { BLOCKS } from '@contentful/rich-text-types';
+import { getWithEmbeddedBlockEvents } from '../shared/EmbeddedBlockUtil';
+import { LinkedResourceBlock } from './LinkedResourceBlock';
+const createEmbeddedResourcePlugin = (nodeType, hotkey)=>(sdk)=>({
+            key: nodeType,
+            type: nodeType,
+            isElement: true,
+            isVoid: true,
+            component: LinkedResourceBlock,
+            options: {
+                hotkey
+            },
+            handlers: {
+                onKeyDown: getWithEmbeddedBlockEvents(nodeType, sdk)
+            },
+            deserializeHtml: {
+                rules: [
+                    {
+                        validAttribute: {
+                            'data-entity-type': 'Contentful:Entry'
+                        }
+                    }
+                ],
+                withoutChildren: true,
+                getNode: (el)=>({
+                        type: nodeType,
+                        children: [
+                            {
+                                text: ''
+                            }
+                        ],
+                        isVoid: true,
+                        data: {
+                            target: {
+                                sys: {
+                                    urn: el.getAttribute('data-entity-id'),
+                                    linkType: el.getAttribute('data-entity-type'),
+                                    type: 'ResourceLink'
+                                }
+                            }
+                        }
+                    })
+            }
+        });
+export const createEmbeddedResourceBlockPlugin = createEmbeddedResourcePlugin(BLOCKS.EMBEDDED_RESOURCE, 'mod+shift+s');

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

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

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

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import tokens from '@contentful/f36-tokens';
+import { BLOCKS } from '@contentful/rich-text-types';
+import { css, cx } from 'emotion';
+const styles = {
+    dropdown: {
+        root: css`
+      font-weight: ${tokens.fontWeightDemiBold};
+    `,
+        [BLOCKS.PARAGRAPH]: css`
+      font-size: ${tokens.fontSizeL};
+    `,
+        [BLOCKS.HEADING_1]: css`
+      font-size: 1.625rem;
+    `,
+        [BLOCKS.HEADING_2]: css`
+      font-size: 1.4375rem;
+    `,
+        [BLOCKS.HEADING_3]: css`
+      font-size: 1.25rem;
+    `,
+        [BLOCKS.HEADING_4]: css`
+      font-size: 1.125rem;
+    `,
+        [BLOCKS.HEADING_5]: css`
+      font-size: 1rem;
+    `,
+        [BLOCKS.HEADING_6]: css`
+      font-size: 0.875rem;
+    `
+    },
+    headings: {
+        root: css`
+      font-weight: ${tokens.fontWeightMedium};
+      line-height: 1.3;
+      margin: 0 0 ${tokens.spacingS};
+    `,
+        [BLOCKS.HEADING_1]: css`
+      font-size: 1.875rem;
+    `,
+        [BLOCKS.HEADING_2]: css`
+      font-size: 1.5625rem;
+    `,
+        [BLOCKS.HEADING_3]: css`
+      font-size: 1.375rem;
+    `,
+        [BLOCKS.HEADING_4]: css`
+      font-size: 1.25rem;
+    `,
+        [BLOCKS.HEADING_5]: css`
+      font-size: 1.125rem;
+    `,
+        [BLOCKS.HEADING_6]: css`
+      font-size: 1rem;
+    `
+    }
+};
+function createHeading(Tag, block) {
+    return function Heading(props) {
+        return React.createElement(Tag, {
+            ...props.attributes,
+            className: cx(styles.headings.root, styles.headings[block])
+        }, props.children);
+    };
+}
+export const HeadingComponents = {
+    [BLOCKS.HEADING_1]: React.memo(createHeading('h1', BLOCKS.HEADING_1)),
+    [BLOCKS.HEADING_2]: React.memo(createHeading('h2', BLOCKS.HEADING_2)),
+    [BLOCKS.HEADING_3]: React.memo(createHeading('h3', BLOCKS.HEADING_3)),
+    [BLOCKS.HEADING_4]: React.memo(createHeading('h4', BLOCKS.HEADING_4)),
+    [BLOCKS.HEADING_5]: React.memo(createHeading('h5', BLOCKS.HEADING_5)),
+    [BLOCKS.HEADING_6]: React.memo(createHeading('h6', BLOCKS.HEADING_6))
+};

package/dist/esm/plugins/Heading/components/ToolbarHeadingButton.js

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { Menu, Button } from '@contentful/f36-components';
+import { ChevronDownIcon } from '@contentful/f36-icons';
+import tokens from '@contentful/f36-tokens';
+import { BLOCKS } from '@contentful/rich-text-types';
+import { css, cx } from 'emotion';
+import { useContentfulEditor } from '../../../ContentfulEditorProvider';
+import { getElementFromCurrentSelection, focus, isBlockSelected, toggleElement } from '../../../helpers/editor';
+import { isNodeTypeEnabled } from '../../../helpers/validations';
+import { useSdkContext } from '../../../SdkProvider';
+const styles = {
+    dropdown: {
+        root: css`
+      font-weight: ${tokens.fontWeightDemiBold};
+    `,
+        [BLOCKS.PARAGRAPH]: css`
+      font-size: ${tokens.fontSizeL};
+    `,
+        [BLOCKS.HEADING_1]: css`
+      font-size: 1.625rem;
+    `,
+        [BLOCKS.HEADING_2]: css`
+      font-size: 1.4375rem;
+    `,
+        [BLOCKS.HEADING_3]: css`
+      font-size: 1.25rem;
+    `,
+        [BLOCKS.HEADING_4]: css`
+      font-size: 1.125rem;
+    `,
+        [BLOCKS.HEADING_5]: css`
+      font-size: 1rem;
+    `,
+        [BLOCKS.HEADING_6]: css`
+      font-size: 0.875rem;
+    `
+    }
+};
+const LABELS = {
+    [BLOCKS.PARAGRAPH]: 'Normal text',
+    [BLOCKS.HEADING_1]: 'Heading 1',
+    [BLOCKS.HEADING_2]: 'Heading 2',
+    [BLOCKS.HEADING_3]: 'Heading 3',
+    [BLOCKS.HEADING_4]: 'Heading 4',
+    [BLOCKS.HEADING_5]: 'Heading 5',
+    [BLOCKS.HEADING_6]: 'Heading 6'
+};
+export function ToolbarHeadingButton(props) {
+    const sdk = useSdkContext();
+    const editor = useContentfulEditor();
+    const [isOpen, setOpen] = React.useState(false);
+    const [selected, setSelected] = React.useState(BLOCKS.PARAGRAPH);
+    React.useEffect(()=>{
+        if (!editor?.selection) return;
+        const [element] = getElementFromCurrentSelection(editor);
+        const type = element.type;
+        setSelected(LABELS[type] ? type : BLOCKS.PARAGRAPH);
+    }, [
+        editor?.operations,
+        editor?.selection
+    ]);
+    const [nodeTypesByEnablement, someHeadingsEnabled] = React.useMemo(()=>{
+        const nodeTypesByEnablement = Object.fromEntries(Object.keys(LABELS).map((nodeType)=>[
+                nodeType,
+                isNodeTypeEnabled(sdk.field, nodeType)
+            ]));
+        const someHeadingsEnabled = Object.values(nodeTypesByEnablement).filter(Boolean).length > 0;
+        return [
+            nodeTypesByEnablement,
+            someHeadingsEnabled
+        ];
+    }, [
+        sdk.field
+    ]);
+    function handleOnSelectItem(type) {
+        return (event)=>{
+            event.preventDefault();
+            if (!editor?.selection) return;
+            setSelected(type);
+            setOpen(false);
+            const prevOnChange = editor.onChange;
+            editor.onChange = (...args)=>{
+                focus(editor);
+                editor.onChange = prevOnChange;
+                prevOnChange(...args);
+            };
+            const isActive = isBlockSelected(editor, type);
+            editor.tracking.onToolbarAction(isActive ? 'remove' : 'insert', {
+                nodeType: type
+            });
+            toggleElement(editor, {
+                activeType: type,
+                inactiveType: type
+            });
+        };
+    }
+    if (!editor) return null;
+    return React.createElement(Menu, {
+        isOpen: isOpen,
+        onClose: ()=>setOpen(false)
+    }, React.createElement(Menu.Trigger, null, React.createElement(Button, {
+        size: "small",
+        testId: "toolbar-heading-toggle",
+        variant: "transparent",
+        endIcon: React.createElement(ChevronDownIcon, null),
+        isDisabled: props.isDisabled,
+        onClick: ()=>someHeadingsEnabled && setOpen(!isOpen)
+    }, LABELS[selected])), React.createElement(Menu.List, {
+        testId: "dropdown-heading-list"
+    }, ' ', Object.keys(LABELS).map((nodeType)=>nodeTypesByEnablement[nodeType] && React.createElement(Menu.Item, {
+            key: nodeType,
+            isInitiallyFocused: selected === nodeType,
+            onClick: handleOnSelectItem(nodeType),
+            testId: `dropdown-option-${nodeType}`,
+            disabled: props.isDisabled
+        }, React.createElement("span", {
+            className: cx(styles.dropdown.root, styles.dropdown[nodeType])
+        }, LABELS[nodeType]))).filter(Boolean)));
+}

package/dist/esm/plugins/Heading/createHeadingPlugin.js

@@ -0,0 +1,87 @@
+import { BLOCKS, HEADINGS } from '@contentful/rich-text-types';
+import isHotkey from 'is-hotkey';
+import { isBlockSelected, isInlineOrText, toggleElement } from '../../helpers/editor';
+import { transformLift, transformUnwrap } from '../../helpers/transformers';
+import { isMarkActive, getAboveNode } from '../../internal/queries';
+import { COMMAND_PROMPT } from '../CommandPalette/constants';
+import { HeadingComponents } from './components/Heading';
+const buildHeadingEventHandler = (type)=>(editor, { options: { hotkey  }  })=>(event)=>{
+            if (editor.selection && hotkey && isHotkey(hotkey, event)) {
+                const isActive = isBlockSelected(editor, type);
+                editor.tracking.onShortcutAction(isActive ? 'remove' : 'insert', {
+                    nodeType: type
+                });
+                toggleElement(editor, {
+                    activeType: type,
+                    inactiveType: BLOCKS.PARAGRAPH
+                });
+            }
+        };
+export const createHeadingPlugin = ()=>({
+        key: 'HeadingPlugin',
+        softBreak: [
+            {
+                hotkey: 'shift+enter',
+                query: {
+                    allow: HEADINGS
+                }
+            }
+        ],
+        normalizer: [
+            {
+                match: {
+                    type: HEADINGS
+                },
+                validChildren: (_, [node])=>isInlineOrText(node),
+                transform: {
+                    [BLOCKS.PARAGRAPH]: transformUnwrap,
+                    default: transformLift
+                }
+            }
+        ],
+        then: (editor)=>{
+            return {
+                exitBreak: [
+                    {
+                        hotkey: 'enter',
+                        query: {
+                            allow: HEADINGS,
+                            end: true,
+                            start: true,
+                            filter: ([, path])=>!getAboveNode(editor, {
+                                    at: path,
+                                    match: {
+                                        type: BLOCKS.LIST_ITEM
+                                    }
+                                }) && !isMarkActive(editor, COMMAND_PROMPT)
+                        }
+                    }
+                ]
+            };
+        },
+        plugins: HEADINGS.map((nodeType, idx)=>{
+            const level = idx + 1;
+            const tagName = `h${level}`;
+            return {
+                key: nodeType,
+                type: nodeType,
+                isElement: true,
+                component: HeadingComponents[nodeType],
+                options: {
+                    hotkey: [
+                        `mod+alt+${level}`
+                    ]
+                },
+                handlers: {
+                    onKeyDown: buildHeadingEventHandler(nodeType)
+                },
+                deserializeHtml: {
+                    rules: [
+                        {
+                            validNodeName: tagName.toUpperCase()
+                        }
+                    ]
+                }
+            };
+        })
+    });

package/dist/esm/plugins/Heading/index.js

@@ -0,0 +1,2 @@
+export * from './components/ToolbarHeadingButton';
+export * from './createHeadingPlugin';