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

package/dist/cjs/RichTextEditor.js

@@ -25,14 +25,14 @@ const _emotion = require("emotion");
 const _fastdeepequal = _interop_require_default(require("fast-deep-equal"));
 const _noop = _interop_require_default(require("lodash/noop"));
 const _ContentfulEditorProvider = require("./ContentfulEditorProvider");
-const _misc = require("./internal/misc");
+const _callbacks = require("./helpers/callbacks");
+const _toSlateValue = require("./helpers/toSlateValue");
 const _plugins = require("./plugins");
-const _prepareDocument = require("./prepareDocument");
 const _RichTextEditorstyles = require("./RichTextEditor.styles");
 const _SdkProvider = require("./SdkProvider");
+const _SyncEditorValue = require("./SyncEditorValue");
 const _Toolbar = _interop_require_default(require("./Toolbar"));
 const _StickyToolbarWrapper = _interop_require_default(require("./Toolbar/components/StickyToolbarWrapper"));
-const _useOnValueChanged = require("./useOnValueChanged");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -79,84 +79,73 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const ConnectedRichTextEditor = (props)=>{
     const id = (0, _ContentfulEditorProvider.getContentfulEditorId)(props.sdk);
-    const plugins = _react.default.useMemo(()=>(0, _plugins.getPlugins)(props.sdk, props.onAction ?? _noop.default, props.restrictedMarks), [
+    const plugins = _react.useMemo(()=>(0, _plugins.getPlugins)(props.sdk, props.onAction ?? _noop.default, props.restrictedMarks), [
         props.sdk,
         props.onAction,
         props.restrictedMarks
     ]);
-    const [isFirstRender, setIsFirstRender] = (0, _react.useState)(true);
-    const [pendingExternalUpdate, setPendingExternalUpdate] = (0, _react.useState)(false);
-    const onValueChanged = (0, _useOnValueChanged.useOnValueChanged)({
-        editorId: id,
-        handler: props.onChange,
-        skip: pendingExternalUpdate || isFirstRender,
-        onSkip: ()=>setPendingExternalUpdate(false)
-    });
-    (0, _react.useEffect)(()=>{
-        setIsFirstRender(false);
-        const editor = (0, _misc.getPlateSelectors)(id).editor();
-        if (!editor) {
-            return;
-        }
-        setPendingExternalUpdate(true);
-        (0, _prepareDocument.setEditorContent)(editor, (0, _prepareDocument.documentToEditorValue)(props.value));
+    const handleChange = props.onChange;
+    const isFirstRender = _react.useRef(true);
+    const value = (0, _toSlateValue.toSlateValue)(props.value);
+    const onChange = _react.useMemo(()=>(0, _callbacks.createOnChangeCallback)((document)=>{
+            if (!isFirstRender.current && handleChange) {
+                handleChange(document);
+            }
+        }), [
+        handleChange
+    ]);
+    const firstInteractionHandler = _react.useCallback(()=>{
+        isFirstRender.current = false;
     }, [
-        props.value,
-        id
+        isFirstRender
     ]);
     const classNames = (0, _emotion.cx)(_RichTextEditorstyles.styles.editor, props.minHeight !== undefined ? (0, _emotion.css)({
         minHeight: props.minHeight
     }) : undefined, props.isDisabled ? _RichTextEditorstyles.styles.disabled : _RichTextEditorstyles.styles.enabled, props.isToolbarHidden && _RichTextEditorstyles.styles.hiddenToolbar);
-    (0, _react.useEffect)(()=>{
-        if (!isFirstRender) {
-            return;
-        }
-        (0, _platecore.getPlateActions)(id).value((0, _prepareDocument.normalizeEditorValue)((0, _prepareDocument.documentToEditorValue)(props.value), {
-            plugins,
-            disableCorePlugins: _plugins.disableCorePlugins
-        }));
-    }, [
-        isFirstRender,
-        plugins,
-        id,
-        props.value
-    ]);
-    return _react.default.createElement(_SdkProvider.SdkProvider, {
+    return _react.createElement(_SdkProvider.SdkProvider, {
         sdk: props.sdk
-    }, _react.default.createElement(_ContentfulEditorProvider.ContentfulEditorIdProvider, {
+    }, _react.createElement(_ContentfulEditorProvider.ContentfulEditorIdProvider, {
         value: id
-    }, _react.default.createElement("div", {
+    }, _react.createElement("div", {
         className: _RichTextEditorstyles.styles.root,
         "data-test-id": "rich-text-editor"
-    }, _react.default.createElement(_platecore.Plate, {
+    }, _react.createElement(_platecore.PlateProvider, {
         id: id,
+        initialValue: value,
+        normalizeInitialValue: true,
         plugins: plugins,
         disableCorePlugins: _plugins.disableCorePlugins,
+        onChange: onChange
+    }, !props.isToolbarHidden && _react.createElement(_StickyToolbarWrapper.default, {
+        isDisabled: props.isDisabled
+    }, _react.createElement(_Toolbar.default, {
+        isDisabled: props.isDisabled
+    })), _react.createElement(_SyncEditorValue.SyncEditorValue, {
+        incomingValue: value
+    }), _react.createElement(_platecore.Plate, {
+        id: id,
         editableProps: {
             className: classNames,
-            readOnly: props.isDisabled
-        },
-        onChange: onValueChanged,
-        firstChildren: !props.isToolbarHidden && _react.default.createElement(_StickyToolbarWrapper.default, {
-            isDisabled: props.isDisabled
-        }, _react.default.createElement(_Toolbar.default, {
-            isDisabled: props.isDisabled
-        }))
-    }))));
+            readOnly: props.isDisabled,
+            onKeyDown: firstInteractionHandler,
+            onChange: firstInteractionHandler,
+            onClick: firstInteractionHandler
+        }
+    })))));
 };
 const RichTextEditor = (props)=>{
     const { sdk , isInitiallyDisabled , onAction , restrictedMarks , ...otherProps } = props;
-    const isEmptyValue = (0, _react.useCallback)((value)=>!value || (0, _fastdeepequal.default)(value, _richtexttypes.EMPTY_DOCUMENT), []);
+    const isEmptyValue = _react.useCallback((value)=>!value || (0, _fastdeepequal.default)(value, _richtexttypes.EMPTY_DOCUMENT), []);
     const id = (0, _ContentfulEditorProvider.getContentfulEditorId)(props.sdk);
-    return _react.default.createElement(_fieldeditorreference.EntityProvider, {
+    return _react.createElement(_fieldeditorreference.EntityProvider, {
         sdk: sdk
-    }, _react.default.createElement(_fieldeditorshared.FieldConnector, {
+    }, _react.createElement(_fieldeditorshared.FieldConnector, {
         throttle: 0,
         field: sdk.field,
         isInitiallyDisabled: isInitiallyDisabled,
         isEmptyValue: isEmptyValue,
         isEqualValues: _fastdeepequal.default
-    }, ({ lastRemoteValue , disabled , setValue  })=>_react.default.createElement(ConnectedRichTextEditor, {
+    }, ({ lastRemoteValue , disabled , setValue  })=>_react.createElement(ConnectedRichTextEditor, {
             ...otherProps,
             key: `rich-text-editor-${id}`,
             value: lastRemoteValue,

package/dist/cjs/SyncEditorValue.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SyncEditorValue", {
+    enumerable: true,
+    get: function() {
+        return SyncEditorValue;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _fastdeepequal = _interop_require_default(require("fast-deep-equal"));
+const _hooks = require("./internal/hooks");
+const _misc = require("./internal/misc");
+const _queries = require("./internal/queries");
+const _transforms = require("./internal/transforms");
+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 setEditorContent = (editor, nodes)=>{
+    (0, _misc.withoutNormalizing)(editor, ()=>{
+        const children = [
+            ...editor.children
+        ];
+        children.forEach((node)=>editor.apply({
+                type: 'remove_node',
+                path: [
+                    0
+                ],
+                node
+            }));
+        if (nodes) {
+            const nodesArray = (0, _queries.isNode)(nodes) ? [
+                nodes
+            ] : nodes;
+            nodesArray.forEach((node, i)=>{
+                editor.apply({
+                    type: 'insert_node',
+                    path: [
+                        i
+                    ],
+                    node
+                });
+            });
+        }
+        const point = (0, _queries.getEndPoint)(editor, []);
+        if (point) {
+            (0, _transforms.select)(editor, point);
+        }
+    });
+};
+const SyncEditorValue = ({ incomingValue  })=>{
+    const editor = (0, _hooks.usePlateSelectors)().editor();
+    const lastIncomingValue = _react.useRef(incomingValue);
+    _react.useEffect(()=>{
+        if ((0, _fastdeepequal.default)(lastIncomingValue.current, incomingValue)) {
+            return;
+        }
+        lastIncomingValue.current = incomingValue;
+        setEditorContent(editor, incomingValue);
+    }, [
+        editor,
+        incomingValue
+    ]);
+    return null;
+};

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

@@ -13,8 +13,8 @@ const _richtexttypes = require("@contentful/rich-text-types");
 const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
 const _editor = require("../../helpers/editor");
 const _validations = require("../../helpers/validations");
-const _EmbeddedEntityBlock = require("../../plugins/EmbeddedEntityBlock");
 const _EmbeddedEntityInline = require("../../plugins/EmbeddedEntityInline");
+const _EmbeddedBlockToolbarIcon = require("../../plugins/shared/EmbeddedBlockToolbarIcon");
 const _SdkProvider = require("../../SdkProvider");
 const _EmbeddedEntityDropdownButton = require("./EmbeddedEntityDropdownButton");
 function _getRequireWildcardCache(nodeInterop) {
@@ -64,15 +64,20 @@ const EmbedEntityWidget = ({ isDisabled , canInsertBlocks  })=>{
     const onToggleEntityDropdown = ()=>setEmbedDropdownOpen(!isEmbedDropdownOpen);
     const inlineEntryEmbedEnabled = (0, _validations.isNodeTypeEnabled)(sdk.field, _richtexttypes.INLINES.EMBEDDED_ENTRY);
     const blockEntryEmbedEnabled = (0, _validations.isNodeTypeEnabled)(sdk.field, _richtexttypes.BLOCKS.EMBEDDED_ENTRY) && canInsertBlocks;
+    const blockResourceEmbedEnabled = (0, _validations.isNodeTypeEnabled)(sdk.field, _richtexttypes.BLOCKS.EMBEDDED_RESOURCE) && canInsertBlocks;
     const blockAssetEmbedEnabled = (0, _validations.isNodeTypeEnabled)(sdk.field, _richtexttypes.BLOCKS.EMBEDDED_ASSET) && canInsertBlocks;
-    const actions = _react.default.createElement(_react.default.Fragment, null, blockEntryEmbedEnabled && _react.default.createElement(_EmbeddedEntityBlock.ToolbarIcon, {
+    const actions = _react.default.createElement(_react.default.Fragment, null, blockEntryEmbedEnabled && _react.default.createElement(_EmbeddedBlockToolbarIcon.EmbeddedBlockToolbarIcon, {
         isDisabled: !!isDisabled,
         nodeType: _richtexttypes.BLOCKS.EMBEDDED_ENTRY,
         onClose: onCloseEntityDropdown
+    }), blockResourceEmbedEnabled && _react.default.createElement(_EmbeddedBlockToolbarIcon.EmbeddedBlockToolbarIcon, {
+        isDisabled: !!isDisabled,
+        nodeType: _richtexttypes.BLOCKS.EMBEDDED_RESOURCE,
+        onClose: onCloseEntityDropdown
     }), inlineEntryEmbedEnabled && _react.default.createElement(_EmbeddedEntityInline.ToolbarEmbeddedEntityInlineButton, {
         isDisabled: !!isDisabled || (0, _editor.isLinkActive)(editor),
         onClose: onCloseEntityDropdown
-    }), blockAssetEmbedEnabled && _react.default.createElement(_EmbeddedEntityBlock.ToolbarIcon, {
+    }), blockAssetEmbedEnabled && _react.default.createElement(_EmbeddedBlockToolbarIcon.EmbeddedBlockToolbarIcon, {
         isDisabled: !!isDisabled,
         nodeType: _richtexttypes.BLOCKS.EMBEDDED_ASSET,
         onClose: onCloseEntityDropdown

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

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

package/dist/cjs/helpers/callbacks.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createOnChangeCallback", {
+    enumerable: true,
+    get: function() {
+        return createOnChangeCallback;
+    }
+});
+const _contentfulslatejsadapter = require("@contentful/contentful-slatejs-adapter");
+const _fastdeepequal = _interop_require_default(require("fast-deep-equal"));
+const _debounce = _interop_require_default(require("lodash/debounce"));
+const _Schema = _interop_require_default(require("../constants/Schema"));
+const _removeInternalMarks = require("./removeInternalMarks");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const createOnChangeCallback = (handler)=>{
+    let cache = null;
+    return (0, _debounce.default)((document)=>{
+        if ((0, _fastdeepequal.default)(document, cache)) {
+            return;
+        }
+        cache = document;
+        const doc = (0, _removeInternalMarks.removeInternalMarks)((0, _contentfulslatejsadapter.toContentfulDocument)({
+            document: document,
+            schema: _Schema.default
+        }));
+        const cleanedDocument = (0, _removeInternalMarks.removeInternalMarks)(doc);
+        handler?.(cleanedDocument);
+    }, 500);
+};

package/dist/cjs/helpers/getAllowedResourcesForNodeType.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return getAllowedResourcesForNodeType;
+    }
+});
+const _find = _interop_require_default(require("lodash/find"));
+const _flow = _interop_require_default(require("lodash/flow"));
+const _get = _interop_require_default(require("lodash/get"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function getAllowedResourcesForNodeType(field, nodeType) {
+    return (0, _flow.default)((validations)=>(0, _find.default)(validations, 'nodes'), (validations)=>(0, _get.default)(validations, [
+            'nodes',
+            nodeType,
+            'allowedResources'
+        ], []))(field.validations);
+}

package/dist/cjs/helpers/newResourceEntitySelectorConfigFromRichTextField.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return newResourceEntitySelectorConfigFromRichTextField;
+    }
+});
+const _getAllowedResourcesForNodeType = _interop_require_default(require("./getAllowedResourcesForNodeType"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function newResourceEntitySelectorConfigFromRichTextField(field, nodeType) {
+    return {
+        allowedResources: (0, _getAllowedResourcesForNodeType.default)(field, nodeType)
+    };
+}

package/dist/cjs/helpers/toSlateValue.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "toSlateValue", {
+    enumerable: true,
+    get: function() {
+        return toSlateValue;
+    }
+});
+const _contentfulslatejsadapter = require("@contentful/contentful-slatejs-adapter");
+const _richtexttypes = require("@contentful/rich-text-types");
+const _Schema = _interop_require_default(require("../constants/Schema"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const isTextElement = (node)=>'text' in node;
+function sanitizeIncomingSlateDoc(nodes = []) {
+    return nodes.map((node)=>{
+        if (isTextElement(node)) {
+            return node;
+        }
+        if (node.children?.length === 0) {
+            return {
+                ...node,
+                children: [
+                    {
+                        text: '',
+                        data: {}
+                    }
+                ]
+            };
+        }
+        return {
+            ...node,
+            children: sanitizeIncomingSlateDoc(node?.children)
+        };
+    });
+}
+const toSlateValue = (doc)=>{
+    const hasContent = (doc)=>{
+        return (doc?.content || []).length > 0;
+    };
+    const slateDoc = (0, _contentfulslatejsadapter.toSlatejsDocument)({
+        document: doc && hasContent(doc) ? doc : _richtexttypes.EMPTY_DOCUMENT,
+        schema: _Schema.default
+    });
+    return sanitizeIncomingSlateDoc(slateDoc);
+};

package/dist/cjs/internal/hooks.js

@@ -17,6 +17,9 @@ _export(exports, {
     },
     usePlateEditorState: function() {
         return usePlateEditorState;
+    },
+    usePlateSelectors: function() {
+        return usePlateSelectors;
     }
 });
 const _platecore = _interop_require_wildcard(require("@udecode/plate-core"));
@@ -61,5 +64,12 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const useReadOnly = _slatereact.useReadOnly;
-const usePlateEditorRef = _platecore.usePlateEditorRef;
-const usePlateEditorState = _platecore.usePlateEditorState;
+const usePlateEditorRef = (id)=>{
+    return _platecore.usePlateEditorRef(id);
+};
+const usePlateEditorState = (id)=>{
+    return _platecore.usePlateEditorState(id);
+};
+const usePlateSelectors = (id)=>{
+    return _platecore.usePlateSelectors(id);
+};

package/dist/cjs/internal/misc.js

@@ -29,9 +29,6 @@ _export(exports, {
     },
     mockPlugin: function() {
         return mockPlugin;
-    },
-    getPlateSelectors: function() {
-        return getPlateSelectors;
     }
 });
 const _platecore = _interop_require_wildcard(require("@udecode/plate-core"));
@@ -98,6 +95,3 @@ const fromDOMPoint = (editor, domPoint, opts = {
 const mockPlugin = (plugin)=>{
     return _platecore.mockPlugin(plugin);
 };
-const getPlateSelectors = (id)=>{
-    return _platecore.getPlateSelectors(id);
-};

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

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

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

@@ -9,15 +9,15 @@ Object.defineProperty(exports, "LinkedEntityBlock", {
     }
 });
 const _react = _interop_require_wildcard(require("react"));
-const _emotion = require("emotion");
 const _slatereact = require("slate-react");
 const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
-const _environment = require("../../helpers/environment");
 const _queries = require("../../internal/queries");
 const _transforms = require("../../internal/transforms");
 const _SdkProvider = require("../../SdkProvider");
+const _linkstracking = require("../links-tracking");
 const _FetchingWrappedAssetCard = require("../shared/FetchingWrappedAssetCard");
 const _FetchingWrappedEntryCard = require("../shared/FetchingWrappedEntryCard");
+const _LinkedBlockWrapper = require("../shared/LinkedBlockWrapper");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -57,19 +57,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const styles = {
-    root: (0, _emotion.css)({
-        marginBottom: '1.25rem !important',
-        display: 'block'
-    }),
-    container: (0, _emotion.css)({
-        display: 'inline-block',
-        verticalAlign: 'text-top',
-        width: '100%'
-    })
-};
 function LinkedEntityBlock(props) {
-    const { attributes , children , element , onEntityFetchComplete  } = props;
+    const { attributes , children , element  } = props;
+    const { onEntityFetchComplete  } = (0, _linkstracking.useLinkTracking)();
     const isSelected = (0, _slatereact.useSelected)();
     const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
     const sdk = (0, _SdkProvider.useSdkContext)();
@@ -95,34 +85,27 @@ function LinkedEntityBlock(props) {
         editor,
         element
     ]);
-    return _react.createElement("div", {
-        ...attributes,
-        className: styles.root,
-        "data-entity-type": entityType,
-        "data-entity-id": entityId,
-        contentEditable: _environment.IS_CHROME ? undefined : false,
-        draggable: _environment.IS_CHROME ? true : undefined
-    }, _react.createElement("div", {
-        contentEditable: _environment.IS_CHROME ? false : undefined,
-        draggable: _environment.IS_CHROME ? true : undefined,
-        className: styles.container
-    }, entityType === 'Entry' && _react.createElement(_FetchingWrappedEntryCard.FetchingWrappedEntryCard, {
-        sdk: sdk,
-        entryId: entityId,
-        locale: sdk.field.locale,
-        isDisabled: isDisabled,
-        isSelected: isSelected,
-        onRemove: handleRemoveClick,
-        onEdit: handleEditClick,
-        onEntityFetchComplete: onEntityFetchComplete
-    }), entityType === 'Asset' && _react.createElement(_FetchingWrappedAssetCard.FetchingWrappedAssetCard, {
-        sdk: sdk,
-        assetId: entityId,
-        locale: sdk.field.locale,
-        isDisabled: isDisabled,
-        isSelected: isSelected,
-        onRemove: handleRemoveClick,
-        onEdit: handleEditClick,
-        onEntityFetchComplete: onEntityFetchComplete
-    })), children);
+    return _react.createElement(_LinkedBlockWrapper.LinkedBlockWrapper, {
+        attributes: attributes,
+        card: _react.createElement(_react.Fragment, null, entityType === 'Entry' && _react.createElement(_FetchingWrappedEntryCard.FetchingWrappedEntryCard, {
+            sdk: sdk,
+            entryId: entityId,
+            locale: sdk.field.locale,
+            isDisabled: isDisabled,
+            isSelected: isSelected,
+            onRemove: handleRemoveClick,
+            onEdit: handleEditClick,
+            onEntityFetchComplete: onEntityFetchComplete
+        }), entityType === 'Asset' && _react.createElement(_FetchingWrappedAssetCard.FetchingWrappedAssetCard, {
+            sdk: sdk,
+            assetId: entityId,
+            locale: sdk.field.locale,
+            isDisabled: isDisabled,
+            isSelected: isSelected,
+            onRemove: handleRemoveClick,
+            onEdit: handleEditClick,
+            onEntityFetchComplete: onEntityFetchComplete
+        })),
+        element: element
+    }, children);
 }