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

package/dist/cjs/ContentfulEditorProvider.js

@@ -0,0 +1,59 @@
+"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, {
+    getContentfulEditorId: function() {
+        return getContentfulEditorId;
+    },
+    editorContext: function() {
+        return editorContext;
+    },
+    ContentfulEditorIdProvider: function() {
+        return ContentfulEditorIdProvider;
+    },
+    useContentfulEditorId: function() {
+        return useContentfulEditorId;
+    },
+    useContentfulEditor: function() {
+        return useContentfulEditor;
+    },
+    useContentfulEditorRef: function() {
+        return useContentfulEditorRef;
+    }
+});
+const _react = require("react");
+const _hooks = require("./internal/hooks");
+function getContentfulEditorId(sdk) {
+    const { entry , field  } = sdk;
+    const sys = entry.getSys();
+    return `rich-text-editor-${sys.id}-${field.id}-${field.locale}`;
+}
+const editorContext = (0, _react.createContext)('');
+const ContentfulEditorIdProvider = editorContext.Provider;
+function useContentfulEditorId(id) {
+    const contextId = (0, _react.useContext)(editorContext);
+    if (id) {
+        return id;
+    }
+    if (!contextId) {
+        throw new Error('could not find editor id. Please ensure the component is wrapped in <ContentfulEditorIdProvider> ');
+    }
+    return contextId;
+}
+function useContentfulEditor(id) {
+    const editorId = useContentfulEditorId(id);
+    const editor = (0, _hooks.usePlateEditorState)(editorId);
+    return editor;
+}
+function useContentfulEditorRef(id) {
+    const editorId = useContentfulEditorId(id);
+    const editor = (0, _hooks.usePlateEditorRef)(editorId);
+    return editor;
+}

package/dist/cjs/RichTextEditor.js

@@ -0,0 +1,170 @@
+"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, {
+    ConnectedRichTextEditor: function() {
+        return ConnectedRichTextEditor;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _fieldeditorreference = require("@contentful/field-editor-reference");
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+const _richtexttypes = _interop_require_wildcard(require("@contentful/rich-text-types"));
+const _platecore = require("@udecode/plate-core");
+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 _plugins = require("./plugins");
+const _prepareDocument = require("./prepareDocument");
+const _RichTextEditorstyles = require("./RichTextEditor.styles");
+const _SdkProvider = require("./SdkProvider");
+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
+    };
+}
+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 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), [
+        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));
+    }, [
+        props.value,
+        id
+    ]);
+    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, {
+        sdk: props.sdk
+    }, _react.default.createElement(_ContentfulEditorProvider.ContentfulEditorIdProvider, {
+        value: id
+    }, _react.default.createElement("div", {
+        className: _RichTextEditorstyles.styles.root,
+        "data-test-id": "rich-text-editor"
+    }, _react.default.createElement(_platecore.Plate, {
+        id: id,
+        plugins: plugins,
+        disableCorePlugins: _plugins.disableCorePlugins,
+        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
+        }))
+    }))));
+};
+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 id = (0, _ContentfulEditorProvider.getContentfulEditorId)(props.sdk);
+    return _react.default.createElement(_fieldeditorreference.EntityProvider, {
+        sdk: sdk
+    }, _react.default.createElement(_fieldeditorshared.FieldConnector, {
+        throttle: 0,
+        field: sdk.field,
+        isInitiallyDisabled: isInitiallyDisabled,
+        isEmptyValue: isEmptyValue,
+        isEqualValues: _fastdeepequal.default
+    }, ({ lastRemoteValue , disabled , setValue  })=>_react.default.createElement(ConnectedRichTextEditor, {
+            ...otherProps,
+            key: `rich-text-editor-${id}`,
+            value: lastRemoteValue,
+            sdk: sdk,
+            onAction: onAction,
+            isDisabled: disabled,
+            onChange: setValue,
+            restrictedMarks: restrictedMarks
+        })));
+};
+const _default = RichTextEditor;

package/dist/cjs/RichTextEditor.styles.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "styles", {
+    enumerable: true,
+    get: function() {
+        return styles;
+    }
+});
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const STYLE_EDITOR_BORDER = `1px solid ${_f36tokens.default.gray400}`;
+const styles = {
+    root: (0, _emotion.css)({
+        position: 'relative'
+    }),
+    editor: (0, _emotion.css)({
+        borderRadius: `0 0 ${_f36tokens.default.borderRadiusMedium} ${_f36tokens.default.borderRadiusMedium}`,
+        border: STYLE_EDITOR_BORDER,
+        borderTop: 0,
+        padding: '20px',
+        fontSize: _f36tokens.default.spacingM,
+        fontFamily: _f36tokens.default.fontStackPrimary,
+        minHeight: '400px',
+        background: _f36tokens.default.colorWhite,
+        outline: 'none',
+        whiteSpace: 'pre-wrap',
+        overflowWrap: 'break-word',
+        webkitUserModify: 'read-write-plaintext-only',
+        a: {
+            span: {
+                cursor: 'not-allowed',
+                '&:hover': {
+                    cursor: 'not-allowed'
+                }
+            }
+        },
+        'ul > li > div': {
+            margin: 0
+        }
+    }),
+    hiddenToolbar: (0, _emotion.css)({
+        borderTop: STYLE_EDITOR_BORDER
+    }),
+    enabled: (0, _emotion.css)({
+        background: _f36tokens.default.colorWhite,
+        a: {
+            span: {
+                cursor: 'pointer',
+                '&:hover': {
+                    cursor: 'pointer'
+                }
+            }
+        }
+    }),
+    disabled: (0, _emotion.css)({
+        background: _f36tokens.default.gray100,
+        cursor: 'not-allowed'
+    })
+};

package/dist/cjs/SdkProvider.js

@@ -0,0 +1,69 @@
+"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, {
+    SdkProvider: function() {
+        return SdkProvider;
+    },
+    useSdkContext: function() {
+        return useSdkContext;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _constate = _interop_require_default(require("constate"));
+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;
+}
+function useSdk({ sdk  }) {
+    const sdkMemo = _react.useMemo(()=>sdk, []);
+    return sdkMemo;
+}
+const [SdkProvider, useSdkContext] = (0, _constate.default)(useSdk);

package/dist/cjs/Toolbar/_tests_/toolbar.test.js

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _react = _interop_require_wildcard(require("react"));
+const _richtexttypes = require("@contentful/rich-text-types");
+const _react1 = require("@testing-library/react");
+const _platecore = require("@udecode/plate-core");
+require("@testing-library/jest-dom/extend-expect");
+const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
+const _SdkProvider = require("../../SdkProvider");
+const _index = _interop_require_default(require("../index"));
+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;
+}
+(0, _react1.configure)({
+    testIdAttribute: 'data-test-id'
+});
+const mockSdk = (marks)=>{
+    return {
+        locales: {
+            default: 'en-US'
+        },
+        entry: {
+            getSys: jest.fn().mockReturnValue({
+                id: 'entry-id'
+            })
+        },
+        field: {
+            id: 'field-id',
+            locale: 'en-US',
+            validations: [
+                {
+                    enabledMarks: marks || Object.values(_richtexttypes.MARKS)
+                }
+            ]
+        },
+        access: {
+            can: jest.fn().mockResolvedValue(true)
+        }
+    };
+};
+describe('Toolbar', ()=>{
+    test('everything on the toolbar should be disabled', async ()=>{
+        const sdk = mockSdk();
+        const id = (0, _ContentfulEditorProvider.getContentfulEditorId)(sdk);
+        const { getByTestId  } = (0, _react1.render)(_react.createElement(_platecore.Plate, {
+            id: id
+        }, _react.createElement(_SdkProvider.SdkProvider, {
+            sdk: sdk
+        }, _react.createElement(_ContentfulEditorProvider.ContentfulEditorIdProvider, {
+            value: id
+        }, _react.createElement(_index.default, {
+            isDisabled: true
+        })))));
+        await (0, _react1.waitFor)(()=>{
+            expect(getByTestId('toolbar-heading-toggle')).toBeDisabled();
+            [
+                _richtexttypes.MARKS.BOLD,
+                _richtexttypes.MARKS.ITALIC,
+                _richtexttypes.MARKS.UNDERLINE,
+                'dropdown',
+                'hyperlink',
+                'quote',
+                'ul',
+                'ol',
+                'hr',
+                'table'
+            ].forEach((s)=>expect(getByTestId(`${s}-toolbar-button`)).toBeDisabled());
+            expect(getByTestId('toolbar-entity-dropdown-toggle')).toBeDisabled();
+        });
+    });
+    describe('Dropdown', ()=>{
+        it('always shows whenever at least bold, italic and underline are available', ()=>{
+            const sdk = mockSdk([
+                _richtexttypes.MARKS.BOLD,
+                _richtexttypes.MARKS.ITALIC,
+                _richtexttypes.MARKS.SUPERSCRIPT
+            ]);
+            const id = (0, _ContentfulEditorProvider.getContentfulEditorId)(sdk);
+            const { queryByTestId  } = (0, _react1.render)(_react.createElement(_platecore.Plate, {
+                id: id
+            }, _react.createElement(_SdkProvider.SdkProvider, {
+                sdk: sdk
+            }, _react.createElement(_ContentfulEditorProvider.ContentfulEditorIdProvider, {
+                value: id
+            }, _react.createElement(_index.default, {
+                isDisabled: true
+            })))));
+            expect(queryByTestId('dropdown-toolbar-button')).toBeVisible();
+        });
+        it('does not show if bold, italic and underline are not available', ()=>{
+            const sdk = mockSdk([
+                _richtexttypes.MARKS.SUPERSCRIPT,
+                _richtexttypes.MARKS.SUBSCRIPT,
+                _richtexttypes.MARKS.CODE
+            ]);
+            const id = (0, _ContentfulEditorProvider.getContentfulEditorId)(sdk);
+            const { queryByTestId  } = (0, _react1.render)(_react.createElement(_platecore.Plate, {
+                id: id
+            }, _react.createElement(_SdkProvider.SdkProvider, {
+                sdk: sdk
+            }, _react.createElement(_ContentfulEditorProvider.ContentfulEditorIdProvider, {
+                value: id
+            }, _react.createElement(_index.default, {
+                isDisabled: true
+            })))));
+            expect(queryByTestId('dropdown-toolbar-button')).not.toBeInTheDocument();
+        });
+    });
+});

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

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "EmbedEntityWidget", {
+    enumerable: true,
+    get: function() {
+        return EmbedEntityWidget;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _richtexttypes = require("@contentful/rich-text-types");
+const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
+const _editor = require("../../helpers/editor");
+const _validations = require("../../helpers/validations");
+const _EmbeddedEntityInline = require("../../plugins/EmbeddedEntityInline");
+const _EmbeddedBlockToolbarIcon = require("../../plugins/shared/EmbeddedBlockToolbarIcon");
+const _SdkProvider = require("../../SdkProvider");
+const _EmbeddedEntityDropdownButton = require("./EmbeddedEntityDropdownButton");
+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 EmbedEntityWidget = ({ isDisabled , canInsertBlocks  })=>{
+    const sdk = (0, _SdkProvider.useSdkContext)();
+    const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
+    const [isEmbedDropdownOpen, setEmbedDropdownOpen] = (0, _react.useState)(false);
+    const onCloseEntityDropdown = ()=>setEmbedDropdownOpen(false);
+    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(_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(_EmbeddedBlockToolbarIcon.EmbeddedBlockToolbarIcon, {
+        isDisabled: !!isDisabled,
+        nodeType: _richtexttypes.BLOCKS.EMBEDDED_ASSET,
+        onClose: onCloseEntityDropdown
+    }));
+    const showEmbedButton = blockEntryEmbedEnabled || inlineEntryEmbedEnabled || blockAssetEmbedEnabled;
+    return showEmbedButton ? _react.default.createElement(_EmbeddedEntityDropdownButton.EmbeddedEntityDropdownButton, {
+        isDisabled: isDisabled,
+        onClose: onCloseEntityDropdown,
+        onToggle: onToggleEntityDropdown,
+        isOpen: isEmbedDropdownOpen
+    }, actions) : null;
+};

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

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "EmbeddedEntityDropdownButton", {
+    enumerable: true,
+    get: function() {
+        return EmbeddedEntityDropdownButton;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36icons = require("@contentful/f36-icons");
+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;
+}
+function EmbeddedEntityDropdownButton({ children , isDisabled , isOpen , onClose , onToggle  }) {
+    return _react.createElement(_f36components.Menu, {
+        placement: "bottom-end",
+        isOpen: isOpen,
+        onClose: onClose,
+        onOpen: onToggle
+    }, _react.createElement(_f36components.Menu.Trigger, null, _react.createElement(_f36components.Button, {
+        endIcon: _react.createElement(_f36icons.ChevronDownIcon, null),
+        testId: "toolbar-entity-dropdown-toggle",
+        variant: "secondary",
+        size: "small",
+        startIcon: _react.createElement(_f36icons.PlusIcon, null),
+        isDisabled: isDisabled
+    }, "Embed")), _react.createElement(_f36components.Menu.List, {
+        className: "toolbar-entity-dropdown-list"
+    }, children));
+}