@contentful/field-editor-rich-text 3.4.22 → 3.6.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,45 @@
+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.EMBEDDED_RESOURCE,
+        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,62 @@
+import * as React from 'react';
+import { useReadOnly, useSelected } from 'slate-react';
+import { useContentfulEditor } from '../../ContentfulEditorProvider';
+import { findNodePath } from '../../internal/queries';
+import { removeNodes } from '../../internal/transforms';
+import { useSdkContext } from '../../SdkProvider';
+import { useLinkTracking } from '../links-tracking';
+import { FetchingWrappedAssetCard } from '../shared/FetchingWrappedAssetCard';
+import { FetchingWrappedEntryCard } from '../shared/FetchingWrappedEntryCard';
+import { LinkedBlockWrapper } from '../shared/LinkedBlockWrapper';
+export function LinkedEntityBlock(props) {
+    const { attributes , children , element  } = props;
+    const { onEntityFetchComplete  } = useLinkTracking();
+    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(LinkedBlockWrapper, {
+        attributes: attributes,
+        card: React.createElement(React.Fragment, null, 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
+        })),
+        element: element
+    }, children);
+}

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

@@ -0,0 +1,50 @@
+import { BLOCKS } from '@contentful/rich-text-types';
+import { getWithEmbeddedBlockEvents } from '../shared/EmbeddedBlockUtil';
+import { LinkedEntityBlock } from './LinkedEntityBlock';
+const entityTypes = {
+    [BLOCKS.EMBEDDED_ENTRY]: 'Entry',
+    [BLOCKS.EMBEDDED_ASSET]: 'Asset'
+};
+const createEmbeddedEntityPlugin = (nodeType, hotkey)=>(sdk)=>({
+            key: nodeType,
+            type: nodeType,
+            isElement: true,
+            isVoid: true,
+            component: LinkedEntityBlock,
+            options: {
+                hotkey
+            },
+            handlers: {
+                onKeyDown: 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'
+                                }
+                            }
+                        }
+                    })
+            }
+        });
+export const createEmbeddedEntryBlockPlugin = createEmbeddedEntityPlugin(BLOCKS.EMBEDDED_ENTRY, 'mod+shift+e');
+export const createEmbeddedAssetBlockPlugin = createEmbeddedEntityPlugin(BLOCKS.EMBEDDED_ASSET, 'mod+shift+a');

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

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { InlineEntryCard, MenuItem, Text } from '@contentful/f36-components';
+import { ClockIcon } from '@contentful/f36-icons';
+import tokens from '@contentful/f36-tokens';
+import { ScheduledIconWithTooltip, useEntity, useEntityLoader } from '@contentful/field-editor-reference';
+import { entityHelpers } from '@contentful/field-editor-shared';
+import { INLINES } from '@contentful/rich-text-types';
+import { css } from 'emotion';
+const { getEntryTitle , getEntryStatus  } = entityHelpers;
+const styles = {
+    scheduledIcon: css({
+        verticalAlign: 'text-bottom',
+        marginRight: tokens.spacing2Xs
+    })
+};
+export function FetchingWrappedInlineEntryCard(props) {
+    const { data: entry , status: requestStatus  } = useEntity('Entry', props.entryId);
+    const { getEntityScheduledActions  } = 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(InlineEntryCard, {
+            title: "Entry missing or inaccessible",
+            testId: INLINES.EMBEDDED_ENTRY,
+            isSelected: props.isSelected
+        });
+    }
+    if (requestStatus === 'loading') {
+        return React.createElement(InlineEntryCard, {
+            isLoading: true
+        });
+    }
+    const entryStatus = getEntryStatus(entry.sys);
+    if (entryStatus === 'deleted') {
+        return React.createElement(InlineEntryCard, {
+            title: "Entry missing or inaccessible",
+            testId: INLINES.EMBEDDED_ENTRY,
+            isSelected: props.isSelected,
+            actions: [
+                React.createElement(MenuItem, {
+                    key: "remove",
+                    onClick: props.onRemove,
+                    testId: "delete"
+                }, "Remove")
+            ]
+        });
+    }
+    return React.createElement(InlineEntryCard, {
+        testId: INLINES.EMBEDDED_ENTRY,
+        isSelected: props.isSelected,
+        title: `${contentTypeName}: ${title}`,
+        status: entryStatus,
+        actions: [
+            React.createElement(MenuItem, {
+                key: "edit",
+                onClick: props.onEdit
+            }, "Edit"),
+            React.createElement(MenuItem, {
+                key: "remove",
+                onClick: props.onRemove,
+                disabled: props.isDisabled,
+                testId: "delete"
+            }, "Remove")
+        ]
+    }, React.createElement(ScheduledIconWithTooltip, {
+        getEntityScheduledActions: loadEntityScheduledActions,
+        entityType: "Entry",
+        entityId: entry.sys.id
+    }, React.createElement(ClockIcon, {
+        className: styles.scheduledIcon,
+        variant: "muted",
+        testId: "scheduled-icon"
+    })), React.createElement(Text, null, title));
+}

package/dist/esm/plugins/EmbeddedEntityInline/Util.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'
+                }
+            }
+        }
+    };
+}