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

package/dist/cjs/plugins/shared/FetchingWrappedResourceCard.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FetchingWrappedResourceCard", {
+    enumerable: true,
+    get: function() {
+        return FetchingWrappedResourceCard;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _fieldeditorreference = require("@contentful/field-editor-reference");
+const _fastdeepequal = _interop_require_default(require("fast-deep-equal"));
+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 InternalEntryCard = _react.memo((props)=>{
+    if (props.status === 'loading') {
+        return _react.createElement(_f36components.EntryCard, {
+            isLoading: true
+        });
+    }
+    if (!props.data || props.status === 'error') {
+        return _react.createElement(_fieldeditorreference.MissingEntityCard, {
+            entityType: "Entry",
+            isDisabled: props.isDisabled,
+            onRemove: props.onRemove
+        });
+    }
+    const { contentType , resource: entry , space  } = props.data;
+    return _react.createElement(_fieldeditorreference.WrappedEntryCard, {
+        size: "default",
+        getAsset: ()=>Promise.resolve(),
+        isSelected: props.isSelected,
+        isDisabled: props.isDisabled,
+        localeCode: props.data.defaultLocaleCode,
+        defaultLocaleCode: props.data.defaultLocaleCode,
+        contentType: contentType,
+        spaceName: space?.name,
+        entry: entry,
+        onEdit: props.onEdit,
+        onRemove: props.isDisabled ? undefined : props.onRemove,
+        isClickable: false,
+        getEntityScheduledActions: ()=>Promise.resolve([])
+    });
+}, _fastdeepequal.default);
+InternalEntryCard.displayName = 'ReferenceCard';
+const FetchingWrappedResourceCard = (props)=>{
+    const { link , onEntityFetchComplete  } = props;
+    const { data , status  } = (0, _fieldeditorreference.useResource)(link.linkType, link.urn);
+    _react.useEffect(()=>{
+        if (status === 'success') {
+            onEntityFetchComplete?.();
+        }
+    }, [
+        onEntityFetchComplete,
+        status
+    ]);
+    return _react.createElement(InternalEntryCard, {
+        data: data,
+        status: status,
+        sdk: props.sdk,
+        isDisabled: props.isDisabled,
+        isSelected: props.isSelected,
+        onEdit: props.onEdit,
+        onRemove: props.onRemove
+    });
+};

package/dist/cjs/plugins/shared/LinkedBlockWrapper.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LinkedBlockWrapper", {
+    enumerable: true,
+    get: function() {
+        return LinkedBlockWrapper;
+    }
+});
+const _react = _interop_require_default(require("react"));
+const _emotion = require("emotion");
+const _environment = require("../../helpers/environment");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const styles = {
+    root: (0, _emotion.css)({
+        marginBottom: '1.25rem !important',
+        display: 'block'
+    }),
+    container: (0, _emotion.css)({
+        display: 'inline-block',
+        verticalAlign: 'text-top',
+        width: '100%'
+    })
+};
+const isResourceLink = (link)=>!!link.urn;
+function LinkedBlockWrapper({ attributes , card , children , element  }) {
+    const link = element.data.target.sys;
+    return _react.default.createElement("div", {
+        ...attributes,
+        className: styles.root,
+        "data-entity-type": link.linkType,
+        "data-entity-id": isResourceLink(link) ? link.urn : link.id,
+        contentEditable: _environment.IS_CHROME ? undefined : false,
+        draggable: _environment.IS_CHROME ? true : undefined
+    }, _react.default.createElement("div", {
+        contentEditable: _environment.IS_CHROME ? false : undefined,
+        draggable: _environment.IS_CHROME ? true : undefined,
+        className: styles.container
+    }, card), children);
+}

package/dist/esm/RichTextEditor.js

@@ -1,20 +1,20 @@
-import React, { useCallback, useState, useEffect } from 'react';
+import * as React from 'react';
 import { EntityProvider } from '@contentful/field-editor-reference';
 import { FieldConnector } from '@contentful/field-editor-shared';
 import * as Contentful from '@contentful/rich-text-types';
-import { Plate, getPlateActions } from '@udecode/plate-core';
+import { Plate, PlateProvider } from '@udecode/plate-core';
 import { css, cx } from 'emotion';
 import deepEquals from 'fast-deep-equal';
 import noop from 'lodash/noop';
 import { ContentfulEditorIdProvider, getContentfulEditorId } from './ContentfulEditorProvider';
-import { getPlateSelectors } from './internal/misc';
+import { createOnChangeCallback } from './helpers/callbacks';
+import { toSlateValue } from './helpers/toSlateValue';
 import { getPlugins, disableCorePlugins } from './plugins';
-import { documentToEditorValue, normalizeEditorValue, setEditorContent } from './prepareDocument';
 import { styles } from './RichTextEditor.styles';
 import { SdkProvider } from './SdkProvider';
+import { SyncEditorValue } from './SyncEditorValue';
 import Toolbar from './Toolbar';
 import StickyToolbarWrapper from './Toolbar/components/StickyToolbarWrapper';
-import { useOnValueChanged } from './useOnValueChanged';
 export const ConnectedRichTextEditor = (props)=>{
     const id = getContentfulEditorId(props.sdk);
     const plugins = React.useMemo(()=>getPlugins(props.sdk, props.onAction ?? noop, props.restrictedMarks), [
@@ -22,43 +22,24 @@ export const ConnectedRichTextEditor = (props)=>{
         props.onAction,
         props.restrictedMarks
     ]);
-    const [isFirstRender, setIsFirstRender] = useState(true);
-    const [pendingExternalUpdate, setPendingExternalUpdate] = useState(false);
-    const onValueChanged = useOnValueChanged({
-        editorId: id,
-        handler: props.onChange,
-        skip: pendingExternalUpdate || isFirstRender,
-        onSkip: ()=>setPendingExternalUpdate(false)
-    });
-    useEffect(()=>{
-        setIsFirstRender(false);
-        const editor = getPlateSelectors(id).editor();
-        if (!editor) {
-            return;
-        }
-        setPendingExternalUpdate(true);
-        setEditorContent(editor, documentToEditorValue(props.value));
+    const handleChange = props.onChange;
+    const isFirstRender = React.useRef(true);
+    const value = toSlateValue(props.value);
+    const onChange = React.useMemo(()=>createOnChangeCallback((document)=>{
+            if (!isFirstRender.current && handleChange) {
+                handleChange(document);
+            }
+        }), [
+        handleChange
+    ]);
+    const firstInteractionHandler = React.useCallback(()=>{
+        isFirstRender.current = false;
     }, [
-        props.value,
-        id
+        isFirstRender
     ]);
     const classNames = cx(styles.editor, props.minHeight !== undefined ? css({
         minHeight: props.minHeight
     }) : undefined, props.isDisabled ? styles.disabled : styles.enabled, props.isToolbarHidden && styles.hiddenToolbar);
-    useEffect(()=>{
-        if (!isFirstRender) {
-            return;
-        }
-        getPlateActions(id).value(normalizeEditorValue(documentToEditorValue(props.value), {
-            plugins,
-            disableCorePlugins
-        }));
-    }, [
-        isFirstRender,
-        plugins,
-        id,
-        props.value
-    ]);
     return React.createElement(SdkProvider, {
         sdk: props.sdk
     }, React.createElement(ContentfulEditorIdProvider, {
@@ -66,25 +47,33 @@ export const ConnectedRichTextEditor = (props)=>{
     }, React.createElement("div", {
         className: styles.root,
         "data-test-id": "rich-text-editor"
-    }, React.createElement(Plate, {
+    }, React.createElement(PlateProvider, {
         id: id,
+        initialValue: value,
+        normalizeInitialValue: true,
         plugins: plugins,
         disableCorePlugins: disableCorePlugins,
+        onChange: onChange
+    }, !props.isToolbarHidden && React.createElement(StickyToolbarWrapper, {
+        isDisabled: props.isDisabled
+    }, React.createElement(Toolbar, {
+        isDisabled: props.isDisabled
+    })), React.createElement(SyncEditorValue, {
+        incomingValue: value
+    }), React.createElement(Plate, {
+        id: id,
         editableProps: {
             className: classNames,
-            readOnly: props.isDisabled
-        },
-        onChange: onValueChanged,
-        firstChildren: !props.isToolbarHidden && React.createElement(StickyToolbarWrapper, {
-            isDisabled: props.isDisabled
-        }, React.createElement(Toolbar, {
-            isDisabled: props.isDisabled
-        }))
-    }))));
+            readOnly: props.isDisabled,
+            onKeyDown: firstInteractionHandler,
+            onChange: firstInteractionHandler,
+            onClick: firstInteractionHandler
+        }
+    })))));
 };
 const RichTextEditor = (props)=>{
     const { sdk , isInitiallyDisabled , onAction , restrictedMarks , ...otherProps } = props;
-    const isEmptyValue = useCallback((value)=>!value || deepEquals(value, Contentful.EMPTY_DOCUMENT), []);
+    const isEmptyValue = React.useCallback((value)=>!value || deepEquals(value, Contentful.EMPTY_DOCUMENT), []);
     const id = getContentfulEditorId(props.sdk);
     return React.createElement(EntityProvider, {
         sdk: sdk

package/dist/esm/SyncEditorValue.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import equal from 'fast-deep-equal';
+import { usePlateSelectors } from './internal/hooks';
+import { withoutNormalizing } from './internal/misc';
+import { isNode, getEndPoint } from './internal/queries';
+import { select } from './internal/transforms';
+const setEditorContent = (editor, nodes)=>{
+    withoutNormalizing(editor, ()=>{
+        const children = [
+            ...editor.children
+        ];
+        children.forEach((node)=>editor.apply({
+                type: 'remove_node',
+                path: [
+                    0
+                ],
+                node
+            }));
+        if (nodes) {
+            const nodesArray = isNode(nodes) ? [
+                nodes
+            ] : nodes;
+            nodesArray.forEach((node, i)=>{
+                editor.apply({
+                    type: 'insert_node',
+                    path: [
+                        i
+                    ],
+                    node
+                });
+            });
+        }
+        const point = getEndPoint(editor, []);
+        if (point) {
+            select(editor, point);
+        }
+    });
+};
+export const SyncEditorValue = ({ incomingValue  })=>{
+    const editor = usePlateSelectors().editor();
+    const lastIncomingValue = React.useRef(incomingValue);
+    React.useEffect(()=>{
+        if (equal(lastIncomingValue.current, incomingValue)) {
+            return;
+        }
+        lastIncomingValue.current = incomingValue;
+        setEditorContent(editor, incomingValue);
+    }, [
+        editor,
+        incomingValue
+    ]);
+    return null;
+};

package/dist/esm/Toolbar/components/EmbedEntityWidget.js

@@ -3,8 +3,8 @@ import { BLOCKS, INLINES } from '@contentful/rich-text-types';
 import { useContentfulEditor } from '../../ContentfulEditorProvider';
 import { isLinkActive } from '../../helpers/editor';
 import { isNodeTypeEnabled } from '../../helpers/validations';
-import { ToolbarIcon as EmbeddedEntityBlockToolbarIcon } from '../../plugins/EmbeddedEntityBlock';
 import { ToolbarEmbeddedEntityInlineButton } from '../../plugins/EmbeddedEntityInline';
+import { EmbeddedBlockToolbarIcon } from '../../plugins/shared/EmbeddedBlockToolbarIcon';
 import { useSdkContext } from '../../SdkProvider';
 import { EmbeddedEntityDropdownButton } from './EmbeddedEntityDropdownButton';
 export const EmbedEntityWidget = ({ isDisabled , canInsertBlocks  })=>{
@@ -15,15 +15,20 @@ export const EmbedEntityWidget = ({ isDisabled , canInsertBlocks  })=>{
     const onToggleEntityDropdown = ()=>setEmbedDropdownOpen(!isEmbedDropdownOpen);
     const inlineEntryEmbedEnabled = isNodeTypeEnabled(sdk.field, INLINES.EMBEDDED_ENTRY);
     const blockEntryEmbedEnabled = isNodeTypeEnabled(sdk.field, BLOCKS.EMBEDDED_ENTRY) && canInsertBlocks;
+    const blockResourceEmbedEnabled = isNodeTypeEnabled(sdk.field, BLOCKS.EMBEDDED_RESOURCE) && canInsertBlocks;
     const blockAssetEmbedEnabled = isNodeTypeEnabled(sdk.field, BLOCKS.EMBEDDED_ASSET) && canInsertBlocks;
-    const actions = React.createElement(React.Fragment, null, blockEntryEmbedEnabled && React.createElement(EmbeddedEntityBlockToolbarIcon, {
+    const actions = React.createElement(React.Fragment, null, blockEntryEmbedEnabled && React.createElement(EmbeddedBlockToolbarIcon, {
         isDisabled: !!isDisabled,
         nodeType: BLOCKS.EMBEDDED_ENTRY,
         onClose: onCloseEntityDropdown
+    }), blockResourceEmbedEnabled && React.createElement(EmbeddedBlockToolbarIcon, {
+        isDisabled: !!isDisabled,
+        nodeType: BLOCKS.EMBEDDED_RESOURCE,
+        onClose: onCloseEntityDropdown
     }), inlineEntryEmbedEnabled && React.createElement(ToolbarEmbeddedEntityInlineButton, {
         isDisabled: !!isDisabled || isLinkActive(editor),
         onClose: onCloseEntityDropdown
-    }), blockAssetEmbedEnabled && React.createElement(EmbeddedEntityBlockToolbarIcon, {
+    }), blockAssetEmbedEnabled && React.createElement(EmbeddedBlockToolbarIcon, {
         isDisabled: !!isDisabled,
         nodeType: BLOCKS.EMBEDDED_ASSET,
         onClose: onCloseEntityDropdown

package/dist/esm/helpers/__tests__/removeInternalMarks.test.js

@@ -7,36 +7,52 @@ describe('internal mark', ()=>{
         const data = [
             {
                 title: 'Paragraph mark is removed',
-                input: toContentfulDocument(jsx("editor", null, jsx("hp", null, jsx("htext", {
-                    [COMMAND_PROMPT]: true
-                }))).children),
-                expected: toContentfulDocument(jsx("editor", null, jsx("hp", null, jsx("htext", null))).children)
+                input: toContentfulDocument({
+                    document: jsx("editor", null, jsx("hp", null, jsx("htext", {
+                        [COMMAND_PROMPT]: true
+                    }))).children
+                }),
+                expected: toContentfulDocument({
+                    document: jsx("editor", null, jsx("hp", null, jsx("htext", null))).children
+                })
             },
             {
                 title: 'Heading mark is removed',
-                input: toContentfulDocument(jsx("editor", null, jsx("hh1", null, jsx("htext", {
-                    [COMMAND_PROMPT]: true
-                }))).children),
-                expected: toContentfulDocument(jsx("editor", null, jsx("hh1", null, jsx("htext", null))).children)
+                input: toContentfulDocument({
+                    document: jsx("editor", null, jsx("hh1", null, jsx("htext", {
+                        [COMMAND_PROMPT]: true
+                    }))).children
+                }),
+                expected: toContentfulDocument({
+                    document: jsx("editor", null, jsx("hh1", null, jsx("htext", null))).children
+                })
             },
             {
                 title: 'Block quote mark is removed',
-                input: toContentfulDocument(jsx("editor", null, jsx("hquote", null, jsx("hp", null, jsx("htext", {
-                    [COMMAND_PROMPT]: true
-                })))).children),
-                expected: toContentfulDocument(jsx("editor", null, jsx("hquote", null, jsx("hp", null, jsx("htext", null)))).children)
+                input: toContentfulDocument({
+                    document: jsx("editor", null, jsx("hquote", null, jsx("hp", null, jsx("htext", {
+                        [COMMAND_PROMPT]: true
+                    })))).children
+                }),
+                expected: toContentfulDocument({
+                    document: jsx("editor", null, jsx("hquote", null, jsx("hp", null, jsx("htext", null)))).children
+                })
             },
             {
                 title: 'Other marks are not removed',
-                input: toContentfulDocument(jsx("editor", null, jsx("hquote", null, jsx("hp", null, jsx("htext", {
-                    bold: true,
-                    underline: true,
-                    [COMMAND_PROMPT]: true
-                })))).children),
-                expected: toContentfulDocument(jsx("editor", null, jsx("hquote", null, jsx("hp", null, jsx("htext", {
-                    bold: true,
-                    underline: true
-                })))).children)
+                input: toContentfulDocument({
+                    document: jsx("editor", null, jsx("hquote", null, jsx("hp", null, jsx("htext", {
+                        bold: true,
+                        underline: true,
+                        [COMMAND_PROMPT]: true
+                    })))).children
+                }),
+                expected: toContentfulDocument({
+                    document: jsx("editor", null, jsx("hquote", null, jsx("hp", null, jsx("htext", {
+                        bold: true,
+                        underline: true
+                    })))).children
+                })
             }
         ];
         for (const { input , expected , title  } of data){

package/dist/esm/helpers/callbacks.js

@@ -0,0 +1,20 @@
+import { toContentfulDocument } from '@contentful/contentful-slatejs-adapter';
+import equal from 'fast-deep-equal';
+import debounce from 'lodash/debounce';
+import schema from '../constants/Schema';
+import { removeInternalMarks } from './removeInternalMarks';
+export const createOnChangeCallback = (handler)=>{
+    let cache = null;
+    return debounce((document)=>{
+        if (equal(document, cache)) {
+            return;
+        }
+        cache = document;
+        const doc = removeInternalMarks(toContentfulDocument({
+            document: document,
+            schema: schema
+        }));
+        const cleanedDocument = removeInternalMarks(doc);
+        handler?.(cleanedDocument);
+    }, 500);
+};

package/dist/esm/helpers/getAllowedResourcesForNodeType.js

@@ -0,0 +1,10 @@
+import find from 'lodash/find';
+import flow from 'lodash/flow';
+import get from 'lodash/get';
+export default function getAllowedResourcesForNodeType(field, nodeType) {
+    return flow((validations)=>find(validations, 'nodes'), (validations)=>get(validations, [
+            'nodes',
+            nodeType,
+            'allowedResources'
+        ], []))(field.validations);
+}

package/dist/esm/helpers/newResourceEntitySelectorConfigFromRichTextField.js

@@ -0,0 +1,6 @@
+import getAllowedResourcesForNodeType from './getAllowedResourcesForNodeType';
+export default function newResourceEntitySelectorConfigFromRichTextField(field, nodeType) {
+    return {
+        allowedResources: getAllowedResourcesForNodeType(field, nodeType)
+    };
+}

package/dist/{cjs/helpers/sanitizeIncomingSlateDoc.js → esm/helpers/toSlateValue.js}

@@ -1,13 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "sanitizeIncomingSlateDoc", {
-    enumerable: true,
-    get: function() {
-        return sanitizeIncomingSlateDoc;
-    }
-});
+import { toSlatejsDocument } from '@contentful/contentful-slatejs-adapter';
+import { EMPTY_DOCUMENT } from '@contentful/rich-text-types';
+import schema from '../constants/Schema';
 const isTextElement = (node)=>'text' in node;
 function sanitizeIncomingSlateDoc(nodes = []) {
     return nodes.map((node)=>{
@@ -31,3 +24,13 @@ function sanitizeIncomingSlateDoc(nodes = []) {
         };
     });
 }
+export const toSlateValue = (doc)=>{
+    const hasContent = (doc)=>{
+        return (doc?.content || []).length > 0;
+    };
+    const slateDoc = toSlatejsDocument({
+        document: doc && hasContent(doc) ? doc : EMPTY_DOCUMENT,
+        schema
+    });
+    return sanitizeIncomingSlateDoc(slateDoc);
+};

package/dist/esm/internal/hooks.js

@@ -1,5 +1,12 @@
 import * as p from '@udecode/plate-core';
 import * as sr from 'slate-react';
 export const useReadOnly = sr.useReadOnly;
-export const usePlateEditorRef = p.usePlateEditorRef;
-export const usePlateEditorState = p.usePlateEditorState;
+export const usePlateEditorRef = (id)=>{
+    return p.usePlateEditorRef(id);
+};
+export const usePlateEditorState = (id)=>{
+    return p.usePlateEditorState(id);
+};
+export const usePlateSelectors = (id)=>{
+    return p.usePlateSelectors(id);
+};

package/dist/esm/internal/misc.js

@@ -23,6 +23,3 @@ export const fromDOMPoint = (editor, domPoint, opts = {
 export const mockPlugin = (plugin)=>{
     return p.mockPlugin(plugin);
 };
-export const getPlateSelectors = (id)=>{
-    return p.getPlateSelectors(id);
-};

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

@@ -4,6 +4,7 @@ export function createDragAndDropPlugin() {
     const DRAGGABLE_TYPES = [
         BLOCKS.EMBEDDED_ENTRY,
         BLOCKS.EMBEDDED_ASSET,
+        BLOCKS.EMBEDDED_RESOURCE,
         BLOCKS.HR,
         INLINES.EMBEDDED_ENTRY
     ];

package/dist/esm/plugins/EmbeddedEntityBlock/LinkedEntityBlock.js

@@ -1,26 +1,16 @@
 import * as React from 'react';
-import { css } from 'emotion';
 import { useReadOnly, useSelected } from 'slate-react';
 import { useContentfulEditor } from '../../ContentfulEditorProvider';
-import { IS_CHROME } from '../../helpers/environment';
 import { findNodePath } from '../../internal/queries';
 import { removeNodes } from '../../internal/transforms';
 import { useSdkContext } from '../../SdkProvider';
+import { useLinkTracking } from '../links-tracking';
 import { FetchingWrappedAssetCard } from '../shared/FetchingWrappedAssetCard';
 import { FetchingWrappedEntryCard } from '../shared/FetchingWrappedEntryCard';
-const styles = {
-    root: css({
-        marginBottom: '1.25rem !important',
-        display: 'block'
-    }),
-    container: css({
-        display: 'inline-block',
-        verticalAlign: 'text-top',
-        width: '100%'
-    })
-};
+import { LinkedBlockWrapper } from '../shared/LinkedBlockWrapper';
 export function LinkedEntityBlock(props) {
-    const { attributes , children , element , onEntityFetchComplete  } = props;
+    const { attributes , children , element  } = props;
+    const { onEntityFetchComplete  } = useLinkTracking();
     const isSelected = useSelected();
     const editor = useContentfulEditor();
     const sdk = useSdkContext();
@@ -46,34 +36,27 @@ export function LinkedEntityBlock(props) {
         editor,
         element
     ]);
-    return React.createElement("div", {
-        ...attributes,
-        className: styles.root,
-        "data-entity-type": entityType,
-        "data-entity-id": entityId,
-        contentEditable: IS_CHROME ? undefined : false,
-        draggable: IS_CHROME ? true : undefined
-    }, React.createElement("div", {
-        contentEditable: IS_CHROME ? false : undefined,
-        draggable: IS_CHROME ? true : undefined,
-        className: styles.container
-    }, entityType === 'Entry' && React.createElement(FetchingWrappedEntryCard, {
-        sdk: sdk,
-        entryId: entityId,
-        locale: sdk.field.locale,
-        isDisabled: isDisabled,
-        isSelected: isSelected,
-        onRemove: handleRemoveClick,
-        onEdit: handleEditClick,
-        onEntityFetchComplete: onEntityFetchComplete
-    }), entityType === 'Asset' && React.createElement(FetchingWrappedAssetCard, {
-        sdk: sdk,
-        assetId: entityId,
-        locale: sdk.field.locale,
-        isDisabled: isDisabled,
-        isSelected: isSelected,
-        onRemove: handleRemoveClick,
-        onEdit: handleEditClick,
-        onEntityFetchComplete: onEntityFetchComplete
-    })), children);
+    return React.createElement(LinkedBlockWrapper, {
+        attributes: attributes,
+        card: React.createElement(React.Fragment, null, entityType === 'Entry' && React.createElement(FetchingWrappedEntryCard, {
+            sdk: sdk,
+            entryId: entityId,
+            locale: sdk.field.locale,
+            isDisabled: isDisabled,
+            isSelected: isSelected,
+            onRemove: handleRemoveClick,
+            onEdit: handleEditClick,
+            onEntityFetchComplete: onEntityFetchComplete
+        }), entityType === 'Asset' && React.createElement(FetchingWrappedAssetCard, {
+            sdk: sdk,
+            assetId: entityId,
+            locale: sdk.field.locale,
+            isDisabled: isDisabled,
+            isSelected: isSelected,
+            onRemove: handleRemoveClick,
+            onEdit: handleEditClick,
+            onEntityFetchComplete: onEntityFetchComplete
+        })),
+        element: element
+    }, children);
 }