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

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

@@ -0,0 +1,68 @@
+"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, {
+    createEmbeddedEntryBlockPlugin: function() {
+        return createEmbeddedEntryBlockPlugin;
+    },
+    createEmbeddedAssetBlockPlugin: function() {
+        return createEmbeddedAssetBlockPlugin;
+    }
+});
+const _richtexttypes = require("@contentful/rich-text-types");
+const _EmbeddedBlockUtil = require("../shared/EmbeddedBlockUtil");
+const _LinkedEntityBlock = require("./LinkedEntityBlock");
+const entityTypes = {
+    [_richtexttypes.BLOCKS.EMBEDDED_ENTRY]: 'Entry',
+    [_richtexttypes.BLOCKS.EMBEDDED_ASSET]: 'Asset'
+};
+const createEmbeddedEntityPlugin = (nodeType, hotkey)=>(sdk)=>({
+            key: nodeType,
+            type: nodeType,
+            isElement: true,
+            isVoid: true,
+            component: _LinkedEntityBlock.LinkedEntityBlock,
+            options: {
+                hotkey
+            },
+            handlers: {
+                onKeyDown: (0, _EmbeddedBlockUtil.getWithEmbeddedBlockEvents)(nodeType, sdk)
+            },
+            deserializeHtml: {
+                rules: [
+                    {
+                        validAttribute: {
+                            'data-entity-type': entityTypes[nodeType]
+                        }
+                    }
+                ],
+                withoutChildren: true,
+                getNode: (el)=>({
+                        type: nodeType,
+                        children: [
+                            {
+                                text: ''
+                            }
+                        ],
+                        isVoid: true,
+                        data: {
+                            target: {
+                                sys: {
+                                    id: el.getAttribute('data-entity-id'),
+                                    linkType: el.getAttribute('data-entity-type'),
+                                    type: 'Link'
+                                }
+                            }
+                        }
+                    })
+            }
+        });
+const createEmbeddedEntryBlockPlugin = createEmbeddedEntityPlugin(_richtexttypes.BLOCKS.EMBEDDED_ENTRY, 'mod+shift+e');
+const createEmbeddedAssetBlockPlugin = createEmbeddedEntityPlugin(_richtexttypes.BLOCKS.EMBEDDED_ASSET, 'mod+shift+a');

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

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FetchingWrappedInlineEntryCard", {
+    enumerable: true,
+    get: function() {
+        return FetchingWrappedInlineEntryCard;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36icons = require("@contentful/f36-icons");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _fieldeditorreference = require("@contentful/field-editor-reference");
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+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 { getEntryTitle , getEntryStatus  } = _fieldeditorshared.entityHelpers;
+const styles = {
+    scheduledIcon: (0, _emotion.css)({
+        verticalAlign: 'text-bottom',
+        marginRight: _f36tokens.default.spacing2Xs
+    })
+};
+function FetchingWrappedInlineEntryCard(props) {
+    const { data: entry , status: requestStatus  } = (0, _fieldeditorreference.useEntity)('Entry', props.entryId);
+    const { getEntityScheduledActions  } = (0, _fieldeditorreference.useEntityLoader)();
+    const loadEntityScheduledActions = ()=>getEntityScheduledActions('Entry', props.entryId);
+    const allContentTypes = props.sdk.space.getCachedContentTypes();
+    const { onEntityFetchComplete  } = props;
+    const contentType = _react.useMemo(()=>{
+        if (!entry || !allContentTypes) return undefined;
+        return allContentTypes.find((contentType)=>contentType.sys.id === entry.sys.contentType.sys.id);
+    }, [
+        allContentTypes,
+        entry
+    ]);
+    _react.useEffect(()=>{
+        if (requestStatus !== 'success') {
+            return;
+        }
+        onEntityFetchComplete?.();
+    }, [
+        requestStatus,
+        onEntityFetchComplete
+    ]);
+    const contentTypeName = contentType ? contentType.name : '';
+    const title = _react.useMemo(()=>getEntryTitle({
+            entry,
+            contentType,
+            localeCode: props.sdk.field.locale,
+            defaultLocaleCode: props.sdk.locales.default,
+            defaultTitle: 'Untitled'
+        }), [
+        entry,
+        contentType,
+        props.sdk.field.locale,
+        props.sdk.locales.default
+    ]);
+    if (requestStatus === 'error') {
+        return _react.createElement(_f36components.InlineEntryCard, {
+            title: "Entry missing or inaccessible",
+            testId: _richtexttypes.INLINES.EMBEDDED_ENTRY,
+            isSelected: props.isSelected
+        });
+    }
+    if (requestStatus === 'loading') {
+        return _react.createElement(_f36components.InlineEntryCard, {
+            isLoading: true
+        });
+    }
+    const entryStatus = getEntryStatus(entry.sys);
+    if (entryStatus === 'deleted') {
+        return _react.createElement(_f36components.InlineEntryCard, {
+            title: "Entry missing or inaccessible",
+            testId: _richtexttypes.INLINES.EMBEDDED_ENTRY,
+            isSelected: props.isSelected,
+            actions: [
+                _react.createElement(_f36components.MenuItem, {
+                    key: "remove",
+                    onClick: props.onRemove,
+                    testId: "delete"
+                }, "Remove")
+            ]
+        });
+    }
+    return _react.createElement(_f36components.InlineEntryCard, {
+        testId: _richtexttypes.INLINES.EMBEDDED_ENTRY,
+        isSelected: props.isSelected,
+        title: `${contentTypeName}: ${title}`,
+        status: entryStatus,
+        actions: [
+            _react.createElement(_f36components.MenuItem, {
+                key: "edit",
+                onClick: props.onEdit
+            }, "Edit"),
+            _react.createElement(_f36components.MenuItem, {
+                key: "remove",
+                onClick: props.onRemove,
+                disabled: props.isDisabled,
+                testId: "delete"
+            }, "Remove")
+        ]
+    }, _react.createElement(_fieldeditorreference.ScheduledIconWithTooltip, {
+        getEntityScheduledActions: loadEntityScheduledActions,
+        entityType: "Entry",
+        entityId: entry.sys.id
+    }, _react.createElement(_f36icons.ClockIcon, {
+        className: styles.scheduledIcon,
+        variant: "muted",
+        testId: "scheduled-icon"
+    })), _react.createElement(_f36components.Text, null, title));
+}

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createInlineEntryNode", {
+    enumerable: true,
+    get: function() {
+        return createInlineEntryNode;
+    }
+});
+const _richtexttypes = require("@contentful/rich-text-types");
+function createInlineEntryNode(id) {
+    return {
+        type: _richtexttypes.INLINES.EMBEDDED_ENTRY,
+        children: [
+            {
+                text: ''
+            }
+        ],
+        data: {
+            target: {
+                sys: {
+                    id,
+                    type: 'Link',
+                    linkType: 'Entry'
+                }
+            }
+        }
+    };
+}

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

@@ -0,0 +1,222 @@
+"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, {
+    ToolbarEmbeddedEntityInlineButton: function() {
+        return ToolbarEmbeddedEntityInlineButton;
+    },
+    createEmbeddedEntityInlinePlugin: function() {
+        return createEmbeddedEntityInlinePlugin;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36icons = require("@contentful/f36-icons");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _richtexttypes = require("@contentful/rich-text-types");
+const _emotion = require("emotion");
+const _ishotkey = _interop_require_default(require("is-hotkey"));
+const _slatereact = require("slate-react");
+const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
+const _editor = require("../../helpers/editor");
+const _environment = require("../../helpers/environment");
+const _newEntitySelectorConfigFromRichTextField = _interop_require_default(require("../../helpers/newEntitySelectorConfigFromRichTextField"));
+const _sdkNavigatorSlideIn = require("../../helpers/sdkNavigatorSlideIn");
+const _queries = require("../../internal/queries");
+const _transforms = require("../../internal/transforms");
+const _SdkProvider = require("../../SdkProvider");
+const _linkstracking = require("../links-tracking");
+const _FetchingWrappedInlineEntryCard = require("./FetchingWrappedInlineEntryCard");
+const _Util = require("./Util");
+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 styles = {
+    icon: (0, _emotion.css)({
+        marginRight: '10px'
+    }),
+    root: (0, _emotion.css)({
+        display: 'inline-block',
+        margin: `0 ${_f36tokens.default.spacing2Xs}`,
+        fontSize: 'inherit',
+        span: {
+            userSelect: 'none'
+        }
+    })
+};
+function EmbeddedEntityInline(props) {
+    const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
+    const sdk = (0, _SdkProvider.useSdkContext)();
+    const isSelected = (0, _slatereact.useSelected)();
+    const { id: entryId  } = props.element.data.target.sys;
+    const isDisabled = (0, _slatereact.useReadOnly)();
+    const { onEntityFetchComplete  } = (0, _linkstracking.useLinkTracking)();
+    function handleEditClick() {
+        return sdk.navigator.openEntry(entryId, {
+            slideIn: {
+                waitForClose: true
+            }
+        }).then(()=>{
+            editor && (0, _editor.focus)(editor);
+        });
+    }
+    function handleRemoveClick() {
+        if (!editor) return;
+        const pathToElement = (0, _queries.findNodePath)(editor, props.element);
+        (0, _transforms.removeNodes)(editor, {
+            at: pathToElement
+        });
+    }
+    return _react.createElement("span", {
+        ...props.attributes,
+        className: styles.root,
+        "data-embedded-entity-inline-id": entryId,
+        contentEditable: _environment.IS_CHROME ? undefined : false,
+        draggable: _environment.IS_CHROME ? true : undefined
+    }, _react.createElement("span", {
+        contentEditable: _environment.IS_CHROME ? false : undefined,
+        draggable: _environment.IS_CHROME ? true : undefined
+    }, _react.createElement(_FetchingWrappedInlineEntryCard.FetchingWrappedInlineEntryCard, {
+        sdk: sdk,
+        entryId: entryId,
+        isSelected: isSelected,
+        isDisabled: isDisabled,
+        onRemove: handleRemoveClick,
+        onEdit: handleEditClick,
+        onEntityFetchComplete: onEntityFetchComplete
+    })), props.children);
+}
+async function selectEntityAndInsert(editor, sdk, logAction) {
+    logAction('openCreateEmbedDialog', {
+        nodeType: _richtexttypes.INLINES.EMBEDDED_ENTRY
+    });
+    const config = {
+        ...(0, _newEntitySelectorConfigFromRichTextField.default)(sdk.field, _richtexttypes.INLINES.EMBEDDED_ENTRY),
+        withCreate: true
+    };
+    const { selection  } = editor;
+    const rteSlide = (0, _sdkNavigatorSlideIn.watchCurrentSlide)(sdk.navigator);
+    const entry = await sdk.dialogs.selectSingleEntry(config);
+    if (!entry) {
+        logAction('cancelCreateEmbedDialog', {
+            nodeType: _richtexttypes.INLINES.EMBEDDED_ENTRY
+        });
+    } else {
+        (0, _transforms.select)(editor, selection);
+        (0, _transforms.insertNodes)(editor, (0, _Util.createInlineEntryNode)(entry.sys.id));
+        logAction('insert', {
+            nodeType: _richtexttypes.INLINES.EMBEDDED_ENTRY
+        });
+    }
+    rteSlide.onActive(()=>{
+        rteSlide.unwatch();
+        (0, _editor.focus)(editor);
+    });
+}
+function ToolbarEmbeddedEntityInlineButton(props) {
+    const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
+    const sdk = (0, _SdkProvider.useSdkContext)();
+    async function handleClick(event) {
+        event.preventDefault();
+        if (!editor) return;
+        props.onClose();
+        await selectEntityAndInsert(editor, sdk, editor.tracking.onToolbarAction);
+        (0, _editor.moveToTheNextChar)(editor);
+    }
+    return _react.createElement(_f36components.Menu.Item, {
+        disabled: props.isDisabled,
+        className: "rich-text__entry-link-block-button",
+        testId: `toolbar-toggle-${_richtexttypes.INLINES.EMBEDDED_ENTRY}`,
+        onClick: handleClick
+    }, _react.createElement(_f36components.Flex, {
+        alignItems: "center",
+        flexDirection: "row"
+    }, _react.createElement(_f36icons.EmbeddedEntryInlineIcon, {
+        variant: "secondary",
+        className: `rich-text__embedded-entry-list-icon ${styles.icon}`
+    }), _react.createElement("span", null, "Inline entry")));
+}
+function createEmbeddedEntityInlinePlugin(sdk) {
+    const htmlAttributeName = 'data-embedded-entity-inline-id';
+    return {
+        key: _richtexttypes.INLINES.EMBEDDED_ENTRY,
+        type: _richtexttypes.INLINES.EMBEDDED_ENTRY,
+        isElement: true,
+        isInline: true,
+        isVoid: true,
+        component: EmbeddedEntityInline,
+        options: {
+            hotkey: 'mod+shift+2'
+        },
+        handlers: {
+            onKeyDown: getWithEmbeddedEntryInlineEvents(sdk)
+        },
+        deserializeHtml: {
+            rules: [
+                {
+                    validAttribute: htmlAttributeName
+                }
+            ],
+            withoutChildren: true,
+            getNode: (el)=>(0, _Util.createInlineEntryNode)(el.getAttribute(htmlAttributeName))
+        }
+    };
+}
+function getWithEmbeddedEntryInlineEvents(sdk) {
+    return function withEmbeddedEntryInlineEvents(editor, { options: { hotkey  }  }) {
+        return function handleEvent(event) {
+            if (!editor) return;
+            if (hotkey && (0, _ishotkey.default)(hotkey, event)) {
+                selectEntityAndInsert(editor, sdk, editor.tracking.onShortcutAction);
+            }
+        };
+    };
+}

package/dist/cjs/plugins/EmbeddedResourceBlock/LinkedResourceBlock.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LinkedResourceBlock", {
+    enumerable: true,
+    get: function() {
+        return LinkedResourceBlock;
+    }
+});
+const _react = _interop_require_default(require("react"));
+const _slatereact = require("slate-react");
+const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
+const _internal = require("../../internal");
+const _SdkProvider = require("../../SdkProvider");
+const _linkstracking = require("../links-tracking");
+const _FetchingWrappedResourceCard = require("../shared/FetchingWrappedResourceCard");
+const _LinkedBlockWrapper = require("../shared/LinkedBlockWrapper");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function LinkedResourceBlock(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)();
+    const isDisabled = (0, _slatereact.useReadOnly)();
+    const link = element.data.target.sys;
+    const handleRemoveClick = _react.default.useCallback(()=>{
+        if (!editor) return;
+        const pathToElement = (0, _internal.findNodePath)(editor, element);
+        (0, _internal.removeNodes)(editor, {
+            at: pathToElement
+        });
+    }, [
+        editor,
+        element
+    ]);
+    return _react.default.createElement(_LinkedBlockWrapper.LinkedBlockWrapper, {
+        attributes: attributes,
+        element: element,
+        card: _react.default.createElement(_FetchingWrappedResourceCard.FetchingWrappedResourceCard, {
+            sdk: sdk,
+            link: link,
+            isDisabled: isDisabled,
+            isSelected: isSelected,
+            onRemove: handleRemoveClick,
+            onEntityFetchComplete: onEntityFetchComplete
+        })
+    }, children);
+}

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createEmbeddedResourceBlockPlugin", {
+    enumerable: true,
+    get: function() {
+        return createEmbeddedResourceBlockPlugin;
+    }
+});
+const _richtexttypes = require("@contentful/rich-text-types");
+const _EmbeddedBlockUtil = require("../shared/EmbeddedBlockUtil");
+const _LinkedResourceBlock = require("./LinkedResourceBlock");
+const createEmbeddedResourcePlugin = (nodeType, hotkey)=>(sdk)=>({
+            key: nodeType,
+            type: nodeType,
+            isElement: true,
+            isVoid: true,
+            component: _LinkedResourceBlock.LinkedResourceBlock,
+            options: {
+                hotkey
+            },
+            handlers: {
+                onKeyDown: (0, _EmbeddedBlockUtil.getWithEmbeddedBlockEvents)(nodeType, sdk)
+            },
+            deserializeHtml: {
+                rules: [
+                    {
+                        validAttribute: {
+                            'data-entity-type': 'Contentful:Entry'
+                        }
+                    }
+                ],
+                withoutChildren: true,
+                getNode: (el)=>({
+                        type: nodeType,
+                        children: [
+                            {
+                                text: ''
+                            }
+                        ],
+                        isVoid: true,
+                        data: {
+                            target: {
+                                sys: {
+                                    urn: el.getAttribute('data-entity-id'),
+                                    linkType: el.getAttribute('data-entity-type'),
+                                    type: 'ResourceLink'
+                                }
+                            }
+                        }
+                    })
+            }
+        });
+const createEmbeddedResourceBlockPlugin = createEmbeddedResourcePlugin(_richtexttypes.BLOCKS.EMBEDDED_RESOURCE, 'mod+shift+s');