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

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

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { InlineEntryCard, MenuItem, Text } from '@contentful/f36-components';
+import { ClockIcon } from '@contentful/f36-icons';
+import tokens from '@contentful/f36-tokens';
+import { ScheduledIconWithTooltip, useEntity, useEntityLoader } from '@contentful/field-editor-reference';
+import { entityHelpers } from '@contentful/field-editor-shared';
+import { INLINES } from '@contentful/rich-text-types';
+import { css } from 'emotion';
+const { getEntryTitle , getEntryStatus  } = entityHelpers;
+const styles = {
+    scheduledIcon: css({
+        verticalAlign: 'text-bottom',
+        marginRight: tokens.spacing2Xs
+    })
+};
+export function FetchingWrappedInlineEntryCard(props) {
+    const { data: entry , status: requestStatus  } = useEntity('Entry', props.entryId);
+    const { getEntityScheduledActions  } = 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(InlineEntryCard, {
+            title: "Entry missing or inaccessible",
+            testId: INLINES.EMBEDDED_ENTRY,
+            isSelected: props.isSelected
+        });
+    }
+    if (requestStatus === 'loading') {
+        return React.createElement(InlineEntryCard, {
+            isLoading: true
+        });
+    }
+    const entryStatus = getEntryStatus(entry.sys);
+    if (entryStatus === 'deleted') {
+        return React.createElement(InlineEntryCard, {
+            title: "Entry missing or inaccessible",
+            testId: INLINES.EMBEDDED_ENTRY,
+            isSelected: props.isSelected,
+            actions: [
+                React.createElement(MenuItem, {
+                    key: "remove",
+                    onClick: props.onRemove,
+                    testId: "delete"
+                }, "Remove")
+            ]
+        });
+    }
+    return React.createElement(InlineEntryCard, {
+        testId: INLINES.EMBEDDED_ENTRY,
+        isSelected: props.isSelected,
+        title: `${contentTypeName}: ${title}`,
+        status: entryStatus,
+        actions: [
+            React.createElement(MenuItem, {
+                key: "edit",
+                onClick: props.onEdit
+            }, "Edit"),
+            React.createElement(MenuItem, {
+                key: "remove",
+                onClick: props.onRemove,
+                disabled: props.isDisabled,
+                testId: "delete"
+            }, "Remove")
+        ]
+    }, React.createElement(ScheduledIconWithTooltip, {
+        getEntityScheduledActions: loadEntityScheduledActions,
+        entityType: "Entry",
+        entityId: entry.sys.id
+    }, React.createElement(ClockIcon, {
+        className: styles.scheduledIcon,
+        variant: "muted",
+        testId: "scheduled-icon"
+    })), React.createElement(Text, null, title));
+}

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

@@ -0,0 +1,20 @@
+import { INLINES } from '@contentful/rich-text-types';
+export function createInlineEntryNode(id) {
+    return {
+        type: INLINES.EMBEDDED_ENTRY,
+        children: [
+            {
+                text: ''
+            }
+        ],
+        data: {
+            target: {
+                sys: {
+                    id,
+                    type: 'Link',
+                    linkType: 'Entry'
+                }
+            }
+        }
+    };
+}

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

@@ -0,0 +1,159 @@
+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 { withLinkTracking } 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();
+    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: props.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: withLinkTracking(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/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';