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

package/dist/esm/plugins/CommandPalette/useCommands.js

@@ -0,0 +1,204 @@
+import { useState } from 'react';
+import { BLOCKS, INLINES } from '@contentful/rich-text-types';
+import { isNodeTypeSelected } from '../../helpers/editor';
+import { isNodeTypeEnabled } from '../../helpers/validations';
+import { getRange, getAboveNode } from '../../internal/queries';
+import { select, insertNodes, deleteText, removeMark } from '../../internal/transforms';
+import { COMMAND_PROMPT } from './constants';
+import { createInlineEntryNode } from './utils/createInlineEntryNode';
+import { fetchAssets } from './utils/fetchAssets';
+import { fetchEntries } from './utils/fetchEntries';
+import { insertBlock } from './utils/insertBlock';
+const removeCommand = (editor)=>{
+    const [, path] = getAboveNode(editor);
+    const range = getRange(editor, path);
+    select(editor, range.focus.path);
+    removeMark(editor, COMMAND_PROMPT, range);
+    deleteText(editor);
+};
+const removeQuery = (editor)=>{
+    const [, path] = getAboveNode(editor);
+    const range = getRange(editor, path);
+    if (range.focus.offset - range.anchor.offset > 1) {
+        deleteText(editor, {
+            at: range.focus,
+            distance: range.focus.offset - 1,
+            reverse: true
+        });
+    }
+};
+export function isCommandPromptPluginEnabled(sdk) {
+    const inlineAllowed = isNodeTypeEnabled(sdk.field, INLINES.EMBEDDED_ENTRY);
+    const entriesAllowed = isNodeTypeEnabled(sdk.field, BLOCKS.EMBEDDED_ENTRY);
+    const assetsAllowed = isNodeTypeEnabled(sdk.field, BLOCKS.EMBEDDED_ASSET);
+    return {
+        inlineAllowed,
+        entriesAllowed,
+        assetsAllowed
+    };
+}
+function getCommandPermissions(sdk, editor) {
+    const canInsertBlocks = !isNodeTypeSelected(editor, BLOCKS.TABLE);
+    const { inlineAllowed , entriesAllowed , assetsAllowed  } = isCommandPromptPluginEnabled(sdk);
+    return {
+        inlineAllowed,
+        entriesAllowed: entriesAllowed && canInsertBlocks,
+        assetsAllowed: assetsAllowed && canInsertBlocks
+    };
+}
+export const useCommands = (sdk, query, editor)=>{
+    const contentTypes = sdk.space.getCachedContentTypes();
+    const { inlineAllowed , entriesAllowed , assetsAllowed  } = getCommandPermissions(sdk, editor);
+    const [commands, setCommands] = useState(()=>{
+        const getEmbedEntry = (contentType)=>{
+            return {
+                id: contentType.sys.id,
+                label: `Embed ${contentType.name}`,
+                callback: ()=>{
+                    fetchEntries(sdk, contentType, query).then((entries)=>{
+                        removeQuery(editor);
+                        if (!entries.length) {
+                            setCommands([
+                                {
+                                    id: 'no-results',
+                                    label: 'No results'
+                                }
+                            ]);
+                        } else {
+                            setCommands(entries.map((entry)=>{
+                                return {
+                                    id: `${entry.id}-${entry.displayTitle.replace(/\W+/g, '-').toLowerCase()}`,
+                                    label: entry.displayTitle,
+                                    callback: ()=>{
+                                        removeCommand(editor);
+                                        if (editor.selection) {
+                                            const selection = editor.selection;
+                                            editor.insertSoftBreak();
+                                            insertBlock(editor, BLOCKS.EMBEDDED_ENTRY, entry.entry);
+                                            select(editor, selection);
+                                            editor.tracking.onCommandPaletteAction('insert', {
+                                                nodeType: BLOCKS.EMBEDDED_ENTRY
+                                            });
+                                        }
+                                    }
+                                };
+                            }));
+                        }
+                    });
+                }
+            };
+        };
+        const getEmbedInline = (contentType)=>{
+            return {
+                id: `${contentType.sys.id}-inline`,
+                label: `Embed ${contentType.name} - Inline`,
+                callback: ()=>{
+                    fetchEntries(sdk, contentType, query).then((entries)=>{
+                        removeQuery(editor);
+                        if (!entries.length) {
+                            setCommands([
+                                {
+                                    id: 'no-results',
+                                    label: 'No results'
+                                }
+                            ]);
+                        } else {
+                            setCommands(entries.map((entry)=>{
+                                return {
+                                    id: `${entry.id}-${entry.displayTitle.replace(/\W+/g, '-').toLowerCase()}`,
+                                    label: entry.displayTitle,
+                                    callback: ()=>{
+                                        const inlineNode = createInlineEntryNode(entry.id);
+                                        removeCommand(editor);
+                                        insertNodes(editor, inlineNode);
+                                        editor.insertText('');
+                                        editor.tracking.onCommandPaletteAction('insert', {
+                                            nodeType: INLINES.EMBEDDED_ENTRY
+                                        });
+                                    }
+                                };
+                            }));
+                        }
+                    });
+                }
+            };
+        };
+        const contentTypeCommands = entriesAllowed || inlineAllowed ? contentTypes.map((contentType)=>{
+            return {
+                group: contentType.name,
+                commands: entriesAllowed && inlineAllowed ? [
+                    getEmbedEntry(contentType),
+                    getEmbedInline(contentType)
+                ] : entriesAllowed ? [
+                    getEmbedEntry(contentType)
+                ] : [
+                    getEmbedInline(contentType)
+                ]
+            };
+        }) : [];
+        if (assetsAllowed) {
+            const assetCommand = {
+                group: 'Assets',
+                commands: [
+                    {
+                        id: 'embed-asset',
+                        label: 'Embed Asset',
+                        callback: ()=>{
+                            fetchAssets(sdk, query).then((assets)=>{
+                                removeQuery(editor);
+                                if (!assets.length) {
+                                    setCommands([
+                                        {
+                                            id: 'no-results',
+                                            label: 'No results'
+                                        }
+                                    ]);
+                                } else {
+                                    setCommands(assets.map((asset)=>{
+                                        return {
+                                            id: `${asset.id}-${asset.displayTitle.replace(/\W+/g, '-').toLowerCase()}`,
+                                            label: asset.displayTitle,
+                                            thumbnail: asset.thumbnail,
+                                            callback: ()=>{
+                                                removeCommand(editor);
+                                                if (editor.selection) {
+                                                    const selection = editor.selection;
+                                                    editor.insertSoftBreak();
+                                                    insertBlock(editor, BLOCKS.EMBEDDED_ASSET, asset.entity);
+                                                    select(editor, selection);
+                                                    editor.tracking.onCommandPaletteAction('insert', {
+                                                        nodeType: BLOCKS.EMBEDDED_ASSET
+                                                    });
+                                                }
+                                            }
+                                        };
+                                    }));
+                                }
+                            });
+                        }
+                    }
+                ]
+            };
+            return [
+                ...contentTypeCommands,
+                assetCommand
+            ];
+        }
+        return contentTypeCommands;
+    });
+    return query ? commands.reduce((list, nextItem)=>{
+        if ('group' in nextItem) {
+            const subcommands = nextItem.commands.filter((command)=>{
+                return command.label.toLowerCase().includes(query.toLowerCase());
+            });
+            if (subcommands.length > 0) {
+                list.push(nextItem);
+            }
+        } else {
+            if (nextItem.label.toLowerCase().includes(query.toLowerCase())) {
+                list.push(nextItem);
+            }
+        }
+        return list;
+    }, []) : commands;
+};

package/dist/esm/plugins/CommandPalette/utils/createInlineEntryNode.js

@@ -0,0 +1,20 @@
+import { INLINES } from '@contentful/rich-text-types';
+export function createInlineEntryNode(id) {
+    return {
+        type: INLINES.EMBEDDED_ENTRY,
+        children: [
+            {
+                text: ''
+            }
+        ],
+        data: {
+            target: {
+                sys: {
+                    id,
+                    type: 'Link',
+                    linkType: 'Entry'
+                }
+            }
+        }
+    };
+}

package/dist/esm/plugins/CommandPalette/utils/fetchAssets.js

@@ -0,0 +1,21 @@
+import { entityHelpers } from '@contentful/field-editor-shared';
+export async function fetchAssets(sdk, query) {
+    const assets = await sdk.space.getAssets({
+        query
+    });
+    return assets.items.map((asset)=>{
+        const displayTitle = entityHelpers.getAssetTitle({
+            asset,
+            localeCode: sdk.field.locale,
+            defaultLocaleCode: sdk.locales.default,
+            defaultTitle: 'Untitled'
+        });
+        return {
+            contentTypeName: 'Asset',
+            displayTitle,
+            id: asset.sys.id,
+            entity: asset,
+            thumbnail: asset.fields.file && asset.fields.file[sdk.field.locale] && `${asset.fields.file[sdk.field.locale].url}?h=30`
+        };
+    });
+}

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

@@ -0,0 +1,29 @@
+import { entityHelpers } from '@contentful/field-editor-shared';
+export 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 = entityHelpers.getEntityDescription({
+            contentType,
+            entity: entry,
+            localeCode: sdk.field.locale,
+            defaultLocaleCode: sdk.locales.default
+        });
+        const displayTitle = 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/esm/plugins/CommandPalette/utils/insertBlock.js

@@ -0,0 +1,32 @@
+import { focus } from '../../../helpers/editor';
+import { getText } from '../../../internal/queries';
+import { setNodes, insertNodes } from '../../../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
+    });
+export function insertBlock(editor, nodeType, entity) {
+    if (!editor?.selection) return;
+    const linkedEntityBlock = createNode(nodeType, entity);
+    const hasText = editor.selection && !!getText(editor, editor.selection.focus.path);
+    if (hasText) {
+        insertNodes(editor, linkedEntityBlock);
+    } else {
+        setNodes(editor, linkedEntityBlock);
+    }
+    focus(editor);
+}

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

@@ -0,0 +1,6 @@
+export function trimLeadingSlash(text) {
+    if (!text.startsWith('/')) {
+        return text;
+    }
+    return text.slice(1);
+}

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

@@ -0,0 +1,44 @@
+import { BLOCKS, INLINES } from '@contentful/rich-text-types';
+import { getNodeEntries } from '../../internal/queries';
+export function createDragAndDropPlugin() {
+    const DRAGGABLE_TYPES = [
+        BLOCKS.EMBEDDED_ENTRY,
+        BLOCKS.EMBEDDED_ASSET,
+        BLOCKS.HR,
+        INLINES.EMBEDDED_ENTRY
+    ];
+    const ON_DROP_ALLOWED_TYPES = {
+        TABLE: [
+            INLINES.EMBEDDED_ENTRY
+        ]
+    };
+    return {
+        key: 'DragAndDropPlugin',
+        handlers: {
+            onDrop: (editor)=>(event)=>{
+                    const [draggingBlock] = Array.from(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/esm/plugins/EmbeddedEntityBlock/LinkedEntityBlock.js

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

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Flex, Icon, Menu } from '@contentful/f36-components';
+import { AssetIcon, EmbeddedEntryBlockIcon } from '@contentful/f36-icons';
+import { css } from 'emotion';
+import { useContentfulEditor } from '../../ContentfulEditorProvider';
+import { useSdkContext } from '../../SdkProvider';
+import { selectEntityAndInsert } from './Util';
+export const styles = {
+    icon: css({
+        marginRight: '10px'
+    })
+};
+export function EmbeddedEntityBlockToolbarIcon({ isDisabled , nodeType , onClose  }) {
+    const editor = useContentfulEditor();
+    const sdk = useSdkContext();
+    const handleClick = async (event)=>{
+        event.preventDefault();
+        if (!editor) {
+            return;
+        }
+        onClose();
+        await selectEntityAndInsert(nodeType, sdk, editor, editor.tracking.onToolbarAction);
+    };
+    const type = getEntityTypeFromNodeType(nodeType);
+    const baseClass = `rich-text__${nodeType}`;
+    return React.createElement(Menu.Item, {
+        disabled: isDisabled,
+        className: `${baseClass}-list-item`,
+        onClick: handleClick,
+        testId: `toolbar-toggle-${nodeType}`
+    }, React.createElement(Flex, {
+        alignItems: "center",
+        flexDirection: "row"
+    }, React.createElement(Icon, {
+        as: type === 'Asset' ? AssetIcon : 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/esm/plugins/EmbeddedEntityBlock/Util.js

@@ -0,0 +1,85 @@
+import { BLOCKS, TEXT_CONTAINERS } from '@contentful/rich-text-types';
+import { focus, insertEmptyParagraph, moveToTheNextChar } from '../../helpers/editor';
+import newEntitySelectorConfigFromRichTextField from '../../helpers/newEntitySelectorConfigFromRichTextField';
+import { watchCurrentSlide } from '../../helpers/sdkNavigatorSlideIn';
+import { getText, getAboveNode, getLastNodeByLevel } from '../../internal/queries';
+import { insertNodes, select, setNodes } from '../../internal/transforms';
+export async function selectEntityAndInsert(nodeType, sdk, editor, logAction) {
+    logAction('openCreateEmbedDialog', {
+        nodeType
+    });
+    const { field , dialogs  } = sdk;
+    const baseConfig = newEntitySelectorConfigFromRichTextField(field, nodeType);
+    const selectEntity = baseConfig.entityType === 'Asset' ? dialogs.selectSingleAsset : dialogs.selectSingleEntry;
+    const config = {
+        ...baseConfig,
+        withCreate: true
+    };
+    const { selection  } = editor;
+    const rteSlide = watchCurrentSlide(sdk.navigator);
+    const entity = await selectEntity(config);
+    if (!entity) {
+        logAction('cancelCreateEmbedDialog', {
+            nodeType
+        });
+    } else {
+        select(editor, selection);
+        insertBlock(editor, nodeType, entity);
+        ensureFollowingParagraph(editor);
+        logAction('insert', {
+            nodeType
+        });
+    }
+    rteSlide.onActive(()=>{
+        rteSlide.unwatch();
+        focus(editor);
+    });
+}
+function ensureFollowingParagraph(editor) {
+    const entityBlock = getAboveNode(editor, {
+        match: {
+            type: [
+                BLOCKS.EMBEDDED_ASSET,
+                BLOCKS.EMBEDDED_ENTRY
+            ]
+        }
+    });
+    if (!entityBlock) {
+        return;
+    }
+    const level = entityBlock[1].length - 1;
+    const lastNode = getLastNodeByLevel(editor, level);
+    const isTextContainer = TEXT_CONTAINERS.includes(lastNode?.[0].type ?? '');
+    if (level !== 0 && !isTextContainer) {
+        insertEmptyParagraph(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
+    });
+export function insertBlock(editor, nodeType, entity) {
+    if (!editor?.selection) return;
+    const linkedEntityBlock = createNode(nodeType, entity);
+    const hasText = editor.selection && !!getText(editor, editor.selection.focus.path);
+    if (hasText) {
+        insertNodes(editor, linkedEntityBlock);
+    } else {
+        setNodes(editor, linkedEntityBlock);
+    }
+}

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

@@ -0,0 +1,74 @@
+import { BLOCKS } from '@contentful/rich-text-types';
+import isHotkey from 'is-hotkey';
+import { getNodeEntryFromSelection } from '../../helpers/editor';
+import { removeNodes } from '../../internal/transforms';
+import { withLinkTracking } from '../links-tracking';
+import { LinkedEntityBlock } from './LinkedEntityBlock';
+import { selectEntityAndInsert } from './Util';
+export { EmbeddedEntityBlockToolbarIcon as ToolbarIcon } from './ToolbarIcon';
+const entityTypes = {
+    [BLOCKS.EMBEDDED_ENTRY]: 'Entry',
+    [BLOCKS.EMBEDDED_ASSET]: 'Asset'
+};
+function getWithEmbeddedEntityEvents(nodeType, sdk) {
+    return (editor, { options: { hotkey  }  })=>(event)=>{
+            const [, pathToSelectedElement] = getNodeEntryFromSelection(editor, nodeType);
+            if (pathToSelectedElement) {
+                const isDelete = event.key === 'Delete';
+                const isBackspace = event.key === 'Backspace';
+                if (isDelete || isBackspace) {
+                    event.preventDefault();
+                    removeNodes(editor, {
+                        at: pathToSelectedElement
+                    });
+                }
+                return;
+            }
+            if (hotkey && isHotkey(hotkey, event)) {
+                selectEntityAndInsert(nodeType, sdk, editor, editor.tracking.onShortcutAction);
+            }
+        };
+}
+const createEmbeddedEntityPlugin = (nodeType, hotkey)=>(sdk)=>({
+            key: nodeType,
+            type: nodeType,
+            isElement: true,
+            isVoid: true,
+            component: withLinkTracking(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'
+                                }
+                            }
+                        }
+                    })
+            }
+        });
+export const createEmbeddedEntryBlockPlugin = createEmbeddedEntityPlugin(BLOCKS.EMBEDDED_ENTRY, 'mod+shift+e');
+export const createEmbeddedAssetBlockPlugin = createEmbeddedEntityPlugin(BLOCKS.EMBEDDED_ASSET, 'mod+shift+a');