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

package/dist/cjs/plugins/Hyperlink/createHyperlinkPlugin.js

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createHyperlinkPlugin", {
+    enumerable: true,
+    get: function() {
+        return createHyperlinkPlugin;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _richtexttypes = require("@contentful/rich-text-types");
+const _ishotkey = _interop_require_default(require("is-hotkey"));
+const _editor = require("../../helpers/editor");
+const _transformers = require("../../helpers/transformers");
+const _linkstracking = require("../links-tracking");
+const _EntityHyperlink = require("./components/EntityHyperlink");
+const _UrlHyperlink = require("./components/UrlHyperlink");
+const _HyperlinkModal = require("./HyperlinkModal");
+const _utils = require("./utils");
+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 isAnchor = (element)=>element.nodeName === 'A' && !!element.getAttribute('href') && element.getAttribute('href') !== '#';
+const isEntryAnchor = (element)=>element.nodeName === 'A' && element.getAttribute('data-link-type') === 'Entry';
+const isAssetAnchor = (element)=>element.nodeName === 'A' && element.getAttribute('data-link-type') === 'Asset';
+const buildHyperlinkEventHandler = (sdk)=>(editor, { options: { hotkey  }  })=>{
+        return (event)=>{
+            if (!editor.selection) {
+                return;
+            }
+            if (hotkey && !(0, _ishotkey.default)(hotkey, event)) {
+                return;
+            }
+            if ((0, _editor.isLinkActive)(editor)) {
+                (0, _editor.unwrapLink)(editor);
+                editor.tracking.onShortcutAction('unlinkHyperlinks');
+            } else {
+                (0, _HyperlinkModal.addOrEditLink)(editor, sdk, editor.tracking.onShortcutAction);
+            }
+        };
+    };
+const getNodeOfType = (type)=>(el, node)=>({
+            type,
+            children: node.children,
+            data: type === _richtexttypes.INLINES.HYPERLINK ? {
+                uri: el.getAttribute('href')
+            } : {
+                target: {
+                    sys: {
+                        id: el.getAttribute('data-link-id'),
+                        linkType: el.getAttribute('data-link-type'),
+                        type: 'Link'
+                    }
+                }
+            }
+        });
+const createHyperlinkPlugin = (sdk)=>{
+    const common = {
+        isElement: true,
+        isInline: true
+    };
+    return {
+        key: 'HyperlinkPlugin',
+        options: {
+            hotkey: 'mod+k'
+        },
+        handlers: {
+            onKeyDown: buildHyperlinkEventHandler(sdk)
+        },
+        plugins: [
+            {
+                ...common,
+                key: _richtexttypes.INLINES.HYPERLINK,
+                type: _richtexttypes.INLINES.HYPERLINK,
+                component: _UrlHyperlink.UrlHyperlink,
+                deserializeHtml: {
+                    rules: [
+                        {
+                            validNodeName: [
+                                'A'
+                            ]
+                        }
+                    ],
+                    query: (el)=>isAnchor(el) && !(isEntryAnchor(el) || isAssetAnchor(el)),
+                    getNode: getNodeOfType(_richtexttypes.INLINES.HYPERLINK)
+                }
+            },
+            {
+                ...common,
+                key: _richtexttypes.INLINES.ENTRY_HYPERLINK,
+                type: _richtexttypes.INLINES.ENTRY_HYPERLINK,
+                component: (0, _linkstracking.withLinkTracking)(_EntityHyperlink.EntityHyperlink),
+                deserializeHtml: {
+                    rules: [
+                        {
+                            validNodeName: [
+                                'A'
+                            ]
+                        }
+                    ],
+                    query: (el)=>isEntryAnchor(el),
+                    getNode: getNodeOfType(_richtexttypes.INLINES.ENTRY_HYPERLINK)
+                }
+            },
+            {
+                ...common,
+                key: _richtexttypes.INLINES.ASSET_HYPERLINK,
+                type: _richtexttypes.INLINES.ASSET_HYPERLINK,
+                component: (0, _linkstracking.withLinkTracking)(_EntityHyperlink.EntityHyperlink),
+                deserializeHtml: {
+                    rules: [
+                        {
+                            validNodeName: [
+                                'A'
+                            ]
+                        }
+                    ],
+                    query: (el)=>isAssetAnchor(el),
+                    getNode: getNodeOfType(_richtexttypes.INLINES.ASSET_HYPERLINK)
+                }
+            }
+        ],
+        normalizer: [
+            {
+                match: {
+                    type: [
+                        _richtexttypes.INLINES.HYPERLINK,
+                        _richtexttypes.INLINES.ASSET_HYPERLINK,
+                        _richtexttypes.INLINES.ENTRY_HYPERLINK
+                    ]
+                },
+                validNode: _utils.hasText,
+                transform: _transformers.transformRemove
+            }
+        ]
+    };
+};

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

@@ -0,0 +1,20 @@
+"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, {
+    ToolbarHyperlinkButton: function() {
+        return _ToolbarHyperlinkButton.ToolbarHyperlinkButton;
+    },
+    createHyperlinkPlugin: function() {
+        return _createHyperlinkPlugin.createHyperlinkPlugin;
+    }
+});
+const _ToolbarHyperlinkButton = require("./components/ToolbarHyperlinkButton");
+const _createHyperlinkPlugin = require("./createHyperlinkPlugin");

package/dist/cjs/plugins/Hyperlink/useEntityInfo.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useEntityInfo", {
+    enumerable: true,
+    get: function() {
+        return useEntityInfo;
+    }
+});
+const _react = require("react");
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+const _utils = require("./utils");
+async function fetchAllData({ sdk , entityId , entityType , localeCode , defaultLocaleCode  }) {
+    let contentType;
+    const getEntity = entityType === 'Entry' ? sdk.space.getEntry : sdk.space.getAsset;
+    const entity = await getEntity(entityId);
+    if (entity.sys.contentType) {
+        const contentTypeId = entity.sys.contentType.sys.id;
+        contentType = sdk.space.getCachedContentTypes().find((ct)=>ct.sys.id === contentTypeId);
+    }
+    const entityTitle = entityType === 'Entry' ? _fieldeditorshared.entityHelpers.getEntryTitle({
+        entry: entity,
+        contentType,
+        localeCode,
+        defaultLocaleCode,
+        defaultTitle: 'Untitled'
+    }) : _fieldeditorshared.entityHelpers.getAssetTitle({
+        asset: entity,
+        localeCode,
+        defaultLocaleCode,
+        defaultTitle: 'Untitled'
+    });
+    const entityDescription = _fieldeditorshared.entityHelpers.getEntityDescription({
+        entity,
+        contentType,
+        localeCode,
+        defaultLocaleCode
+    });
+    const jobs = await sdk.space.getEntityScheduledActions(entityType, entityId);
+    const entityStatus = _fieldeditorshared.entityHelpers.getEntryStatus(entity.sys);
+    return {
+        jobs,
+        entity,
+        entityTitle,
+        entityDescription,
+        entityStatus,
+        contentTypeName: contentType ? contentType.name : ''
+    };
+}
+function useRequestStatus({ sdk , target , onEntityFetchComplete  }) {
+    const [requestStatus, setRequestStatus] = (0, _react.useState)({
+        type: 'loading'
+    });
+    (0, _react.useEffect)(()=>{
+        if (target) {
+            fetchAllData({
+                sdk,
+                entityId: target?.sys?.id,
+                entityType: target?.sys?.linkType,
+                localeCode: sdk.field.locale,
+                defaultLocaleCode: sdk.locales.default
+            }).then((entityInfo)=>{
+                setRequestStatus({
+                    type: 'success',
+                    data: entityInfo
+                });
+            }).catch((e)=>{
+                console.log(e);
+                setRequestStatus({
+                    type: 'error',
+                    error: e
+                });
+            }).finally(()=>{
+                onEntityFetchComplete?.();
+            });
+        }
+    }, [
+        sdk,
+        target,
+        onEntityFetchComplete
+    ]);
+    return requestStatus;
+}
+function useEntityInfo(props) {
+    const status = useRequestStatus(props);
+    const { linkType  } = props.target.sys;
+    if (status.type === 'loading') {
+        return `Loading ${linkType.toLowerCase()}...`;
+    }
+    if (status.type === 'error') {
+        return `${linkType} missing or inaccessible`;
+    }
+    return (0, _utils.getEntityInfo)(status.data);
+}

package/dist/cjs/plugins/Hyperlink/utils.js

@@ -0,0 +1,43 @@
+"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, {
+    hasText: function() {
+        return hasText;
+    },
+    getEntityInfo: function() {
+        return getEntityInfo;
+    }
+});
+const _fieldeditorreference = require("@contentful/field-editor-reference");
+const _platecore = require("@udecode/plate-core");
+const _queries = require("../../internal/queries");
+const hasText = (editor, entry)=>{
+    const [node, path] = entry;
+    return !(0, _platecore.isAncestorEmpty)(editor, node) && (0, _queries.getText)(editor, path).trim() !== '';
+};
+function truncate(str, length) {
+    if (typeof str === 'string' && str.length > length) {
+        return str && str.substr(0, length + 1).replace(/(\s+\S(?=\S)|\s*)\.?.$/, '…');
+    }
+    return str;
+}
+function getEntityInfo(data) {
+    if (!data) {
+        return '';
+    }
+    const { entityTitle , contentTypeName , entityStatus , jobs  } = data;
+    const title = truncate(entityTitle, 60) || 'Untitled';
+    const scheduledActions = jobs.length > 0 ? (0, _fieldeditorreference.getScheduleTooltipContent)({
+        job: jobs[0],
+        jobsCount: jobs.length
+    }) : '';
+    return `${contentTypeName || 'Asset'} "${title}", ${entityStatus} ${scheduledActions}`;
+}

package/dist/cjs/plugins/List/__tests__/createListPlugin.test.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _testutils = require("../../../test-utils");
+describe('normalization', ()=>{
+    it('wraps orphaned list items in a list', ()=>{
+        const input = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "Item")), (0, _testutils.jsx)("hp", null));
+        const expected = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "Item"))), (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("htext", null)));
+        (0, _testutils.assertOutput)({
+            input,
+            expected
+        });
+    });
+    it('adds empty paragraph to empty list items', ()=>{
+        const input = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null)), (0, _testutils.jsx)("hp", null));
+        const expected = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("htext", null)))), (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("htext", null)));
+        (0, _testutils.assertOutput)({
+            input,
+            expected
+        });
+    });
+    it('replaces invalid list items with text', ()=>{
+        const input = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "Item"), (0, _testutils.jsx)("htd", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("htext", {
+            bold: true
+        }, "bold text"))), (0, _testutils.jsx)("htd", null, (0, _testutils.jsx)("hp", null, "Take a look at this ", (0, _testutils.jsx)("hlink", {
+            uri: "https://google.com"
+        }, "link"))))), (0, _testutils.jsx)("hp", null));
+        const expected = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "Item"), (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("htext", {
+            bold: true
+        }, "bold text")), (0, _testutils.jsx)("hp", null, "Take a look at this ", (0, _testutils.jsx)("hlink", {
+            uri: "https://google.com"
+        }, "link"), (0, _testutils.jsx)("htext", null)))), (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("htext", null)));
+        (0, _testutils.assertOutput)({
+            input,
+            expected
+        });
+    });
+    it('replaces list items with nested lists as a first child', ()=>{
+        const input = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "Item 1"), (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "Item 1.1")))), (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "Item 2.1"), (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "Item 2.1.1")))), (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "Item 2.2"))))), (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("htext", null)));
+        const expected = (0, _testutils.jsx)("editor", null, (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "Item 1"), (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "Item 1.1")))), (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "Item 2.1"), (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "Item 2.1.1")))), (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "Item 2.2"))), (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("htext", null)));
+        (0, _testutils.assertOutput)({
+            input,
+            expected
+        });
+    });
+});

package/dist/cjs/plugins/List/__tests__/insertListBreak.test.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _testutils = require("../../../test-utils");
+describe('insert line break', ()=>{
+    const tests = [
+        {
+            title: 'at the start of a li',
+            input: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null), "p1"))),
+            expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null))), (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "p1")))
+        },
+        {
+            title: 'at the end of a li',
+            input: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "p1", (0, _testutils.jsx)("cursor", null)))),
+            expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "p1")), (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null))))
+        },
+        {
+            title: 'at the middle of a li',
+            input: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "split ", (0, _testutils.jsx)("cursor", null), "me"))),
+            expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "split ")), (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null), "me")))
+        },
+        {
+            title: 'at the start of a li with multiple p',
+            input: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null), "p1"), (0, _testutils.jsx)("hp", null, "p2"))),
+            expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null))), (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "p1"), (0, _testutils.jsx)("hp", null, "p2")))
+        },
+        {
+            title: 'at the start of the second p of a li',
+            input: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "p1"), (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null), "p2"))),
+            expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "p1")), (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null)), (0, _testutils.jsx)("hp", null, "p2")))
+        },
+        {
+            title: 'at the end of a li with multiple p',
+            input: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "p1"), (0, _testutils.jsx)("hp", null, "p2", (0, _testutils.jsx)("cursor", null)))),
+            expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "p1"), (0, _testutils.jsx)("hp", null, "p2")), (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null))))
+        },
+        {
+            title: 'at the middle of a li with multiple p',
+            input: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "split ", (0, _testutils.jsx)("cursor", null), "me"), (0, _testutils.jsx)("hp", null, "move me"))),
+            expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "split ")), (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null), "me"), (0, _testutils.jsx)("hp", null, "move me")))
+        },
+        {
+            title: 'at the start of a li with heading',
+            input: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hh1", null, (0, _testutils.jsx)("cursor", null), "p1"))),
+            expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null))), (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hh1", null, "p1")))
+        },
+        {
+            title: 'at the end of a li with heading',
+            input: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hh1", null, "p1", (0, _testutils.jsx)("cursor", null)))),
+            expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hh1", null, "p1")), (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null))))
+        },
+        {
+            title: 'at the middle of a li with heading',
+            input: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hh1", null, "split ", (0, _testutils.jsx)("cursor", null), "me"))),
+            expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hh1", null, "split ")), (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hh1", null, (0, _testutils.jsx)("cursor", null), "me")))
+        },
+        {
+            title: 'at a li with nested list',
+            input: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "item 1")), (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "item 2", (0, _testutils.jsx)("cursor", null)), (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "sub list"))))),
+            expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "item 1")), (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "item 2")), (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null)), (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "sub list")))))
+        }
+    ];
+    const render = (children)=>(0, _testutils.jsx)("editor", null, children, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("htext", null)));
+    for (const t of tests){
+        test(t.title, ()=>{
+            const { editor  } = (0, _testutils.createTestEditor)({
+                input: render(t.input)
+            });
+            editor.insertBreak();
+            (0, _testutils.assertOutput)({
+                editor,
+                expected: render(t.expected)
+            });
+        });
+    }
+});

package/dist/cjs/plugins/List/__tests__/insertListFragment.test.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _testutils = require("../../../test-utils");
+describe('insert fragment', ()=>{
+    const tests = [
+        {
+            title: 'text wrapped in li > p',
+            input: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "hello ", (0, _testutils.jsx)("cursor", null)))),
+            fragment: (0, _testutils.jsx)("fragment", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "world"))),
+            expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "hello world")))
+        },
+        {
+            title: 'text wrapped in li > h*',
+            input: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "hello ", (0, _testutils.jsx)("cursor", null)))),
+            fragment: (0, _testutils.jsx)("fragment", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hh1", null, "world"))),
+            expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "hello world")))
+        },
+        {
+            title: 'single li with only asset card',
+            input: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "hello", (0, _testutils.jsx)("cursor", null), "world"))),
+            fragment: (0, _testutils.jsx)("fragment", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hembed", {
+                type: "Asset",
+                id: "asset-id"
+            }))),
+            expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "hello"), (0, _testutils.jsx)("hembed", {
+                type: "Asset",
+                id: "asset-id"
+            }), (0, _testutils.jsx)("hp", null, "world")))
+        },
+        {
+            title: 'two paragraphs',
+            input: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "hello ", (0, _testutils.jsx)("cursor", null)))),
+            fragment: (0, _testutils.jsx)("fragment", null, (0, _testutils.jsx)("hp", null, "world"), (0, _testutils.jsx)("hp", null, "line 2")),
+            expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "hello world"), (0, _testutils.jsx)("hp", null, "line 2")))
+        },
+        {
+            title: 'two headings',
+            input: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "hello ", (0, _testutils.jsx)("cursor", null)))),
+            fragment: (0, _testutils.jsx)("fragment", null, (0, _testutils.jsx)("hh1", null, "world"), (0, _testutils.jsx)("hh1", null, "line 2")),
+            expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "hello world"), (0, _testutils.jsx)("hh1", null, "line 2")))
+        },
+        {
+            title: 'two paragraphs wrapped in a li',
+            input: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "hello ", (0, _testutils.jsx)("cursor", null)))),
+            fragment: (0, _testutils.jsx)("fragment", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "world"), (0, _testutils.jsx)("hp", null, "line 2"))),
+            expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "hello "), (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "world"), (0, _testutils.jsx)("hp", null, "line 2")))))
+        }
+    ];
+    const render = (children)=>(0, _testutils.jsx)("editor", null, children, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("htext", null)));
+    for (const t of tests){
+        test(t.title, ()=>{
+            const { editor  } = (0, _testutils.createTestEditor)({
+                input: render(t.input)
+            });
+            editor.insertFragment(t.fragment);
+            (0, _testutils.assertOutput)({
+                editor,
+                expected: render(t.expected)
+            });
+        });
+    }
+});

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

@@ -0,0 +1,108 @@
+"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, {
+    ListUL: function() {
+        return ListUL;
+    },
+    ListOL: function() {
+        return ListOL;
+    }
+});
+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 baseStyle = (0, _emotion.css)`
+  padding: 0;
+  margin: 0 0 1.25rem 1.25rem;
+
+  div:first-child {
+    margin: 0;
+    line-height: ${_f36tokens.default.lineHeightDefault};
+  }
+`;
+const styles = {
+    [_richtexttypes.BLOCKS.UL_LIST]: (0, _emotion.css)`
+    list-style-type: disc;
+    ul {
+      list-style-type: circle;
+      ul {
+        list-style-type: square;
+      }
+    }
+  `,
+    [_richtexttypes.BLOCKS.OL_LIST]: (0, _emotion.css)`
+    list-style-type: decimal;
+    ol {
+      list-style-type: upper-alpha;
+      ol {
+        list-style-type: lower-roman;
+        ol {
+          list-style-type: lower-alpha;
+        }
+      }
+    }
+  `
+};
+function createList(Tag, block) {
+    return function List(props) {
+        return _react.createElement(Tag, {
+            ...props.attributes,
+            className: (0, _emotion.cx)(baseStyle, styles[block])
+        }, props.children);
+    };
+}
+const ListUL = createList('ul', _richtexttypes.BLOCKS.UL_LIST);
+const ListOL = createList('ol', _richtexttypes.BLOCKS.OL_LIST);