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

package/dist/cjs/plugins/CommandPalette/utils/fetchEntries.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "fetchEntries", {
+    enumerable: true,
+    get: function() {
+        return fetchEntries;
+    }
+});
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+async function fetchEntries(sdk, contentType, query) {
+    const entries = await sdk.space.getEntries({
+        content_type: contentType.sys.id,
+        query
+    });
+    return entries.items.map((entry)=>{
+        const description = _fieldeditorshared.entityHelpers.getEntityDescription({
+            contentType,
+            entity: entry,
+            localeCode: sdk.field.locale,
+            defaultLocaleCode: sdk.locales.default
+        });
+        const displayTitle = _fieldeditorshared.entityHelpers.getEntryTitle({
+            entry,
+            contentType,
+            localeCode: sdk.field.locale,
+            defaultLocaleCode: sdk.locales.default,
+            defaultTitle: 'Untitled'
+        });
+        return {
+            contentTypeName: contentType.name,
+            displayTitle: displayTitle,
+            id: entry.sys.contentType.sys.id,
+            description,
+            entry
+        };
+    });
+}

package/dist/cjs/plugins/CommandPalette/utils/insertBlock.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "insertBlock", {
+    enumerable: true,
+    get: function() {
+        return insertBlock;
+    }
+});
+const _editor = require("../../../helpers/editor");
+const _queries = require("../../../internal/queries");
+const _transforms = require("../../../internal/transforms");
+const createNode = (nodeType, entity)=>({
+        type: nodeType,
+        data: {
+            target: {
+                sys: {
+                    id: entity.sys.id,
+                    type: 'Link',
+                    linkType: entity.sys.type
+                }
+            }
+        },
+        children: [
+            {
+                text: ''
+            }
+        ],
+        isVoid: true
+    });
+function insertBlock(editor, nodeType, entity) {
+    if (!editor?.selection) return;
+    const linkedEntityBlock = createNode(nodeType, entity);
+    const hasText = editor.selection && !!(0, _queries.getText)(editor, editor.selection.focus.path);
+    if (hasText) {
+        (0, _transforms.insertNodes)(editor, linkedEntityBlock);
+    } else {
+        (0, _transforms.setNodes)(editor, linkedEntityBlock);
+    }
+    (0, _editor.focus)(editor);
+}

package/dist/cjs/plugins/CommandPalette/utils/trimLeadingSlash.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "trimLeadingSlash", {
+    enumerable: true,
+    get: function() {
+        return trimLeadingSlash;
+    }
+});
+function trimLeadingSlash(text) {
+    if (!text.startsWith('/')) {
+        return text;
+    }
+    return text.slice(1);
+}

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createDragAndDropPlugin", {
+    enumerable: true,
+    get: function() {
+        return createDragAndDropPlugin;
+    }
+});
+const _richtexttypes = require("@contentful/rich-text-types");
+const _queries = require("../../internal/queries");
+function createDragAndDropPlugin() {
+    const DRAGGABLE_TYPES = [
+        _richtexttypes.BLOCKS.EMBEDDED_ENTRY,
+        _richtexttypes.BLOCKS.EMBEDDED_ASSET,
+        _richtexttypes.BLOCKS.HR,
+        _richtexttypes.INLINES.EMBEDDED_ENTRY
+    ];
+    const ON_DROP_ALLOWED_TYPES = {
+        TABLE: [
+            _richtexttypes.INLINES.EMBEDDED_ENTRY
+        ]
+    };
+    return {
+        key: 'DragAndDropPlugin',
+        handlers: {
+            onDrop: (editor)=>(event)=>{
+                    const [draggingBlock] = Array.from((0, _queries.getNodeEntries)(editor, {
+                        match: (node)=>DRAGGABLE_TYPES.includes(node.type)
+                    }));
+                    if (!draggingBlock) return false;
+                    const [draggingNode] = draggingBlock;
+                    if (!event.nativeEvent.target) return false;
+                    const dropDisallowed = getParents(event.nativeEvent.target).some((node)=>{
+                        return ON_DROP_ALLOWED_TYPES[node.nodeName] ? !ON_DROP_ALLOWED_TYPES[node.nodeName]?.includes(draggingNode.type) : false;
+                    });
+                    if (!dropDisallowed) {
+                        editor.history.undos.push([]);
+                    }
+                    return dropDisallowed;
+                }
+        }
+    };
+}
+function getParents(el) {
+    const parents = [];
+    parents.push(el);
+    while(el.parentNode){
+        parents.unshift(el.parentNode);
+        el = el.parentNode;
+    }
+    return parents;
+}

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

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LinkedEntityBlock", {
+    enumerable: true,
+    get: function() {
+        return 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 _FetchingWrappedAssetCard = require("../shared/FetchingWrappedAssetCard");
+const _FetchingWrappedEntryCard = require("../shared/FetchingWrappedEntryCard");
+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 = {
+    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 isSelected = (0, _slatereact.useSelected)();
+    const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
+    const sdk = (0, _SdkProvider.useSdkContext)();
+    const isDisabled = (0, _slatereact.useReadOnly)();
+    const { id: entityId , linkType: entityType  } = element.data.target.sys;
+    const handleEditClick = _react.useCallback(()=>{
+        const openEntity = entityType === 'Asset' ? sdk.navigator.openAsset : sdk.navigator.openEntry;
+        return openEntity(entityId, {
+            slideIn: true
+        });
+    }, [
+        sdk,
+        entityId,
+        entityType
+    ]);
+    const handleRemoveClick = _react.useCallback(()=>{
+        if (!editor) return;
+        const pathToElement = (0, _queries.findNodePath)(editor, element);
+        (0, _transforms.removeNodes)(editor, {
+            at: pathToElement
+        });
+    }, [
+        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);
+}

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

@@ -0,0 +1,106 @@
+"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, {
+    styles: function() {
+        return styles;
+    },
+    EmbeddedEntityBlockToolbarIcon: function() {
+        return EmbeddedEntityBlockToolbarIcon;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36icons = require("@contentful/f36-icons");
+const _emotion = require("emotion");
+const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
+const _SdkProvider = require("../../SdkProvider");
+const _Util = require("./Util");
+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'
+    })
+};
+function EmbeddedEntityBlockToolbarIcon({ isDisabled , nodeType , onClose  }) {
+    const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
+    const sdk = (0, _SdkProvider.useSdkContext)();
+    const handleClick = async (event)=>{
+        event.preventDefault();
+        if (!editor) {
+            return;
+        }
+        onClose();
+        await (0, _Util.selectEntityAndInsert)(nodeType, sdk, editor, editor.tracking.onToolbarAction);
+    };
+    const type = getEntityTypeFromNodeType(nodeType);
+    const baseClass = `rich-text__${nodeType}`;
+    return _react.createElement(_f36components.Menu.Item, {
+        disabled: isDisabled,
+        className: `${baseClass}-list-item`,
+        onClick: handleClick,
+        testId: `toolbar-toggle-${nodeType}`
+    }, _react.createElement(_f36components.Flex, {
+        alignItems: "center",
+        flexDirection: "row"
+    }, _react.createElement(_f36components.Icon, {
+        as: type === 'Asset' ? _f36icons.AssetIcon : _f36icons.EmbeddedEntryBlockIcon,
+        className: `rich-text__embedded-entry-list-icon ${styles.icon}`,
+        variant: "secondary"
+    }), _react.createElement("span", null, type)));
+}
+function getEntityTypeFromNodeType(nodeType) {
+    const words = nodeType.toLowerCase().split('-');
+    if (words.includes('entry')) {
+        return 'Entry';
+    }
+    if (words.includes('asset')) {
+        return 'Asset';
+    }
+    throw new Error(`Node type \`${nodeType}\` has no associated \`entityType\``);
+}

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

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    selectEntityAndInsert: function() {
+        return selectEntityAndInsert;
+    },
+    insertBlock: function() {
+        return insertBlock;
+    }
+});
+const _richtexttypes = require("@contentful/rich-text-types");
+const _editor = require("../../helpers/editor");
+const _newEntitySelectorConfigFromRichTextField = _interop_require_default(require("../../helpers/newEntitySelectorConfigFromRichTextField"));
+const _sdkNavigatorSlideIn = require("../../helpers/sdkNavigatorSlideIn");
+const _queries = require("../../internal/queries");
+const _transforms = require("../../internal/transforms");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+async function selectEntityAndInsert(nodeType, sdk, editor, logAction) {
+    logAction('openCreateEmbedDialog', {
+        nodeType
+    });
+    const { field , dialogs  } = sdk;
+    const baseConfig = (0, _newEntitySelectorConfigFromRichTextField.default)(field, nodeType);
+    const selectEntity = baseConfig.entityType === 'Asset' ? dialogs.selectSingleAsset : dialogs.selectSingleEntry;
+    const config = {
+        ...baseConfig,
+        withCreate: true
+    };
+    const { selection  } = editor;
+    const rteSlide = (0, _sdkNavigatorSlideIn.watchCurrentSlide)(sdk.navigator);
+    const entity = await selectEntity(config);
+    if (!entity) {
+        logAction('cancelCreateEmbedDialog', {
+            nodeType
+        });
+    } else {
+        (0, _transforms.select)(editor, selection);
+        insertBlock(editor, nodeType, entity);
+        ensureFollowingParagraph(editor);
+        logAction('insert', {
+            nodeType
+        });
+    }
+    rteSlide.onActive(()=>{
+        rteSlide.unwatch();
+        (0, _editor.focus)(editor);
+    });
+}
+function ensureFollowingParagraph(editor) {
+    const entityBlock = (0, _queries.getAboveNode)(editor, {
+        match: {
+            type: [
+                _richtexttypes.BLOCKS.EMBEDDED_ASSET,
+                _richtexttypes.BLOCKS.EMBEDDED_ENTRY
+            ]
+        }
+    });
+    if (!entityBlock) {
+        return;
+    }
+    const level = entityBlock[1].length - 1;
+    const lastNode = (0, _queries.getLastNodeByLevel)(editor, level);
+    const isTextContainer = _richtexttypes.TEXT_CONTAINERS.includes(lastNode?.[0].type ?? '');
+    if (level !== 0 && !isTextContainer) {
+        (0, _editor.insertEmptyParagraph)(editor);
+    }
+    (0, _editor.moveToTheNextChar)(editor);
+}
+const createNode = (nodeType, entity)=>({
+        type: nodeType,
+        data: {
+            target: {
+                sys: {
+                    id: entity.sys.id,
+                    type: 'Link',
+                    linkType: entity.sys.type
+                }
+            }
+        },
+        children: [
+            {
+                text: ''
+            }
+        ],
+        isVoid: true
+    });
+function insertBlock(editor, nodeType, entity) {
+    if (!editor?.selection) return;
+    const linkedEntityBlock = createNode(nodeType, entity);
+    const hasText = editor.selection && !!(0, _queries.getText)(editor, editor.selection.focus.path);
+    if (hasText) {
+        (0, _transforms.insertNodes)(editor, linkedEntityBlock);
+    } else {
+        (0, _transforms.setNodes)(editor, linkedEntityBlock);
+    }
+}

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

@@ -0,0 +1,100 @@
+"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, {
+    ToolbarIcon: function() {
+        return _ToolbarIcon.EmbeddedEntityBlockToolbarIcon;
+    },
+    createEmbeddedEntryBlockPlugin: function() {
+        return createEmbeddedEntryBlockPlugin;
+    },
+    createEmbeddedAssetBlockPlugin: function() {
+        return createEmbeddedAssetBlockPlugin;
+    }
+});
+const _richtexttypes = require("@contentful/rich-text-types");
+const _ishotkey = _interop_require_default(require("is-hotkey"));
+const _editor = require("../../helpers/editor");
+const _transforms = require("../../internal/transforms");
+const _linkstracking = require("../links-tracking");
+const _LinkedEntityBlock = require("./LinkedEntityBlock");
+const _Util = require("./Util");
+const _ToolbarIcon = require("./ToolbarIcon");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const entityTypes = {
+    [_richtexttypes.BLOCKS.EMBEDDED_ENTRY]: 'Entry',
+    [_richtexttypes.BLOCKS.EMBEDDED_ASSET]: 'Asset'
+};
+function getWithEmbeddedEntityEvents(nodeType, sdk) {
+    return (editor, { options: { hotkey  }  })=>(event)=>{
+            const [, pathToSelectedElement] = (0, _editor.getNodeEntryFromSelection)(editor, nodeType);
+            if (pathToSelectedElement) {
+                const isDelete = event.key === 'Delete';
+                const isBackspace = event.key === 'Backspace';
+                if (isDelete || isBackspace) {
+                    event.preventDefault();
+                    (0, _transforms.removeNodes)(editor, {
+                        at: pathToSelectedElement
+                    });
+                }
+                return;
+            }
+            if (hotkey && (0, _ishotkey.default)(hotkey, event)) {
+                (0, _Util.selectEntityAndInsert)(nodeType, sdk, editor, editor.tracking.onShortcutAction);
+            }
+        };
+}
+const createEmbeddedEntityPlugin = (nodeType, hotkey)=>(sdk)=>({
+            key: nodeType,
+            type: nodeType,
+            isElement: true,
+            isVoid: true,
+            component: (0, _linkstracking.withLinkTracking)(_LinkedEntityBlock.LinkedEntityBlock),
+            options: {
+                hotkey
+            },
+            handlers: {
+                onKeyDown: getWithEmbeddedEntityEvents(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');