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

package/dist/esm/plugins/links-tracking.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useContentfulEditorRef } from '../ContentfulEditorProvider';
+export function withLinkTracking(Component) {
+    return function ComponentWithTracking(props) {
+        const editor = useContentfulEditorRef();
+        const onEntityFetchComplete = React.useCallback(()=>editor?.tracking.onViewportAction('linkRendered'), [
+            editor
+        ]);
+        return React.createElement(Component, {
+            ...props,
+            onEntityFetchComplete: onEntityFetchComplete
+        });
+    };
+}

package/dist/esm/plugins/shared/FetchingWrappedAssetCard.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { AssetCard } from '@contentful/f36-components';
+import { useEntity, useEntityLoader, MissingEntityCard, WrappedAssetCard } from '@contentful/field-editor-reference';
+import areEqual from 'fast-deep-equal';
+const InternalAssetCard = React.memo((props)=>{
+    if (props.asset === undefined) {
+        return React.createElement(AssetCard, {
+            size: "default",
+            isLoading: true
+        });
+    }
+    if (props.asset === 'failed') {
+        return React.createElement(MissingEntityCard, {
+            entityType: "Asset",
+            isDisabled: props.isDisabled,
+            onRemove: props.onRemove
+        });
+    }
+    return React.createElement(WrappedAssetCard, {
+        getEntityScheduledActions: props.loadEntityScheduledActions,
+        size: "small",
+        isSelected: props.isSelected,
+        isDisabled: props.isDisabled,
+        localeCode: props.locale,
+        defaultLocaleCode: props.sdk.locales.default,
+        asset: props.asset,
+        onEdit: props.onEdit,
+        onRemove: props.isDisabled ? undefined : props.onRemove,
+        isClickable: false
+    });
+}, areEqual);
+InternalAssetCard.displayName = 'InternalAssetCard';
+export function FetchingWrappedAssetCard(props) {
+    const { onEntityFetchComplete  } = props;
+    const { data: asset , status  } = useEntity('Asset', props.assetId);
+    const { getEntityScheduledActions  } = useEntityLoader();
+    const loadEntityScheduledActions = React.useCallback(()=>getEntityScheduledActions('Asset', props.assetId), [
+        getEntityScheduledActions,
+        props.assetId
+    ]);
+    React.useEffect(()=>{
+        if (status === 'success') {
+            onEntityFetchComplete?.();
+        }
+    }, [
+        onEntityFetchComplete,
+        status
+    ]);
+    return React.createElement(InternalAssetCard, {
+        asset: asset,
+        sdk: props.sdk,
+        isDisabled: props.isDisabled,
+        isSelected: props.isSelected,
+        loadEntityScheduledActions: loadEntityScheduledActions,
+        locale: props.locale,
+        onEdit: props.onEdit,
+        onRemove: props.onRemove
+    });
+}

package/dist/esm/plugins/shared/FetchingWrappedEntryCard.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { EntryCard } from '@contentful/f36-components';
+import { useEntity, MissingEntityCard, WrappedEntryCard, useEntityLoader } from '@contentful/field-editor-reference';
+import areEqual from 'fast-deep-equal';
+const InternalEntryCard = React.memo((props)=>{
+    const { entry , sdk , loadEntityScheduledActions  } = props;
+    if (entry === undefined) {
+        return React.createElement(EntryCard, {
+            isLoading: true
+        });
+    }
+    if (entry === 'failed') {
+        return React.createElement(MissingEntityCard, {
+            entityType: "Entry",
+            isDisabled: props.isDisabled,
+            onRemove: props.onRemove
+        });
+    }
+    const contentType = sdk.space.getCachedContentTypes().find((contentType)=>contentType.sys.id === entry.sys.contentType.sys.id);
+    return React.createElement(WrappedEntryCard, {
+        size: "default",
+        getAsset: props.sdk.space.getAsset,
+        getEntityScheduledActions: loadEntityScheduledActions,
+        isSelected: props.isSelected,
+        isDisabled: props.isDisabled,
+        localeCode: props.locale,
+        defaultLocaleCode: props.sdk.locales.default,
+        contentType: contentType,
+        entry: entry,
+        onEdit: props.onEdit,
+        onRemove: props.isDisabled ? undefined : props.onRemove,
+        isClickable: false
+    });
+}, areEqual);
+InternalEntryCard.displayName = 'ReferenceCard';
+export const FetchingWrappedEntryCard = (props)=>{
+    const { entryId , onEntityFetchComplete  } = props;
+    const { data: entry , status  } = useEntity('Entry', entryId);
+    const { getEntityScheduledActions  } = useEntityLoader();
+    const loadEntityScheduledActions = React.useCallback(()=>getEntityScheduledActions('Entry', entryId), [
+        getEntityScheduledActions,
+        entryId
+    ]);
+    React.useEffect(()=>{
+        if (status === 'success') {
+            onEntityFetchComplete?.();
+        }
+    }, [
+        onEntityFetchComplete,
+        status
+    ]);
+    return React.createElement(InternalEntryCard, {
+        entry: entry,
+        sdk: props.sdk,
+        locale: props.locale,
+        isDisabled: props.isDisabled,
+        isSelected: props.isSelected,
+        onEdit: props.onEdit,
+        onRemove: props.onRemove,
+        loadEntityScheduledActions: loadEntityScheduledActions
+    });
+};

package/dist/esm/plugins/shared/ToolbarButton.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Button, Tooltip } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { css, cx } from 'emotion';
+const styles = {
+    button: css({
+        height: '30px',
+        width: '30px',
+        marginLeft: tokens.spacing2Xs,
+        marginRight: tokens.spacing2Xs
+    }),
+    tooltip: css({
+        zIndex: Number(tokens.zIndexTooltip)
+    })
+};
+export function ToolbarButton(props) {
+    const { title , testId , isActive , children , className , isDisabled =false  } = props;
+    const handleClick = (event)=>{
+        event.preventDefault();
+        props.onClick();
+    };
+    const button = React.createElement(Button, {
+        className: cx(styles.button, className),
+        isDisabled: isDisabled,
+        startIcon: children,
+        onClick: handleClick,
+        testId: testId,
+        variant: isActive ? 'secondary' : 'transparent',
+        size: "small"
+    });
+    if (title) {
+        return React.createElement(Tooltip, {
+            className: styles.tooltip,
+            placement: "bottom",
+            content: title
+        }, button);
+    }
+    return button;
+}

package/dist/esm/plugins/shared/__tests__/FetchingWrappedAssetCard.test.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { EntityProvider } from '@contentful/field-editor-reference';
+import { createFakeCMAAdapter } from '@contentful/field-editor-test-utils';
+import '@testing-library/jest-dom/extend-expect';
+import { configure, fireEvent, render, waitFor } from '@testing-library/react';
+import publishedAsset from '../__fixtures__/published_asset.json';
+import { FetchingWrappedAssetCard } from '../FetchingWrappedAssetCard';
+configure({
+    testIdAttribute: 'data-test-id'
+});
+let sdk;
+beforeEach(()=>{
+    sdk = {
+        locales: {
+            default: 'en-US'
+        },
+        cmaAdapter: createFakeCMAAdapter({
+            Asset: {
+                get: jest.fn().mockResolvedValue(publishedAsset)
+            },
+            ScheduledAction: {
+                getMany: jest.fn().mockResolvedValue({
+                    items: [],
+                    total: 0
+                })
+            }
+        }),
+        space: {
+            getEntityScheduledActions: jest.fn().mockResolvedValue([])
+        },
+        navigator: {
+            onSlideInNavigation: jest.fn()
+        },
+        ids: {
+            space: 'space-id',
+            environment: 'environment-id'
+        }
+    };
+});
+test('some dropdown actions should be disabled', async ()=>{
+    const { getByTestId , queryByTestId  } = render(React.createElement(EntityProvider, {
+        sdk: sdk
+    }, React.createElement(FetchingWrappedAssetCard, {
+        sdk: sdk,
+        assetId: "asset-id",
+        locale: "en-US",
+        onEdit: ()=>{},
+        onRemove: ()=>{},
+        isDisabled: true,
+        isSelected: true
+    })));
+    await waitFor(()=>expect(getByTestId('cf-ui-asset').textContent).toBe('asset title'));
+    fireEvent.click(getByTestId('cf-ui-card-actions'));
+    await waitFor(()=>{
+        expect(getByTestId('card-action-edit')).not.toBeDisabled();
+        expect(queryByTestId('card-action-remove')).toBeNull();
+        expect(getByTestId('card-action-download')).not.toBeDisabled();
+    });
+});

package/dist/esm/plugins/shared/__tests__/FetchingWrappedEntryCard.test.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { EntityProvider } from '@contentful/field-editor-reference';
+import { createFakeCMAAdapter } from '@contentful/field-editor-test-utils';
+import '@testing-library/jest-dom/extend-expect';
+import { configure, fireEvent, render, waitFor } from '@testing-library/react';
+import publishedCT from '../__fixtures__/published_content_type.json';
+import publishedEntry from '../__fixtures__/published_entry.json';
+import { FetchingWrappedEntryCard } from '../FetchingWrappedEntryCard';
+configure({
+    testIdAttribute: 'data-test-id'
+});
+let sdk;
+beforeEach(()=>{
+    sdk = {
+        locales: {
+            default: 'en-US'
+        },
+        cmaAdapter: createFakeCMAAdapter({
+            Entry: {
+                get: jest.fn().mockResolvedValue(publishedEntry)
+            },
+            ScheduledAction: {
+                getMany: jest.fn().mockResolvedValue({
+                    items: [],
+                    total: 0
+                })
+            }
+        }),
+        space: {
+            getEntityScheduledActions: jest.fn().mockResolvedValue([]),
+            getCachedContentTypes: jest.fn().mockReturnValue([
+                publishedCT
+            ])
+        },
+        navigator: {
+            onSlideInNavigation: jest.fn()
+        },
+        ids: {
+            space: 'space-id',
+            environment: 'environment-id'
+        }
+    };
+});
+test('some dropdown actions should be disabled/removed', async ()=>{
+    const { getByTestId , queryByTestId  } = render(React.createElement(EntityProvider, {
+        sdk: sdk
+    }, React.createElement(FetchingWrappedEntryCard, {
+        sdk: sdk,
+        entryId: "entry-id",
+        locale: "en-US",
+        onEdit: ()=>{},
+        onRemove: ()=>{},
+        isDisabled: true,
+        isSelected: true
+    })));
+    await waitFor(()=>expect(getByTestId('title').textContent).toBe('The best article ever'));
+    fireEvent.click(getByTestId('cf-ui-card-actions'));
+    await waitFor(()=>{
+        expect(getByTestId('edit')).not.toBeDisabled();
+        expect(queryByTestId('delete')).toBeNull();
+    });
+});

package/dist/esm/prepareDocument.js

@@ -0,0 +1,57 @@
+import { toSlatejsDocument } from '@contentful/contentful-slatejs-adapter';
+import { EMPTY_DOCUMENT } from '@contentful/rich-text-types';
+import schema from './constants/Schema';
+import { sanitizeIncomingSlateDoc } from './helpers/sanitizeIncomingSlateDoc';
+import { createPlateEditor, withoutNormalizing } from './internal';
+import { getEndPoint, isNode } from './internal/queries';
+import { normalize, select } from './internal/transforms';
+export const hasContent = (doc)=>{
+    return (doc?.content || []).length > 0;
+};
+export const setEditorContent = (editor, nodes)=>{
+    withoutNormalizing(editor, ()=>{
+        const children = [
+            ...editor.children
+        ];
+        children.forEach((node)=>editor.apply({
+                type: 'remove_node',
+                path: [
+                    0
+                ],
+                node
+            }));
+        if (nodes) {
+            const nodesArray = isNode(nodes) ? [
+                nodes
+            ] : nodes;
+            nodesArray.forEach((node, i)=>{
+                editor.apply({
+                    type: 'insert_node',
+                    path: [
+                        i
+                    ],
+                    node
+                });
+            });
+        }
+        const point = getEndPoint(editor, []);
+        if (point) {
+            select(editor, point);
+        }
+    });
+};
+export const documentToEditorValue = (doc)=>{
+    const slateDoc = toSlatejsDocument({
+        document: hasContent(doc) ? doc : EMPTY_DOCUMENT,
+        schema
+    });
+    return sanitizeIncomingSlateDoc(slateDoc);
+};
+export const normalizeEditorValue = (value, options)=>{
+    const editor = createPlateEditor(options);
+    editor.children = value;
+    normalize(editor, {
+        force: true
+    });
+    return editor.children;
+};

package/dist/esm/test-utils/assertOutput.js

@@ -0,0 +1,21 @@
+import { normalize } from '../internal';
+import { createTestEditor } from './createEditor';
+import { setEmptyDataAttribute } from './setEmptyDataAttribute';
+export const assertOutput = (options)=>{
+    const editor = options.editor ?? createTestEditor({
+        input: options.input
+    }).editor;
+    normalize(editor);
+    setEmptyDataAttribute(editor);
+    if (options.log) {
+        console.log(JSON.stringify({
+            expected: options.expected,
+            actual: editor.children,
+            actualSelection: editor.selection
+        }, null, 2));
+    }
+    expect(editor.children).toEqual(options.expected.children);
+    if (options.expected.selection !== null) {
+        expect(editor.selection).toEqual(options.expected.selection);
+    }
+};

package/dist/esm/test-utils/createEditor.js

@@ -0,0 +1,21 @@
+import { createPlateEditor } from '@udecode/plate-core';
+import { normalize } from '../internal';
+import { getPlugins } from '../plugins';
+import { randomId } from './randomId';
+export const createTestEditor = (options)=>{
+    const trackingHandler = options.trackingHandler ?? jest.fn();
+    const sdk = options.sdk ?? {
+        field: {
+            validation: []
+        }
+    };
+    const editor = createPlateEditor({
+        id: randomId('editor'),
+        editor: options.input,
+        plugins: options.plugins || getPlugins(sdk, trackingHandler)
+    });
+    return {
+        editor,
+        normalize: ()=>normalize(editor)
+    };
+};

package/dist/esm/test-utils/index.js

@@ -0,0 +1,4 @@
+export * from './jsx';
+export * from './createEditor';
+export * from './mockPlugin';
+export * from './assertOutput';

package/dist/esm/test-utils/jsx.js

@@ -0,0 +1,149 @@
+import { BLOCKS, INLINES } from '@contentful/rich-text-types';
+import { createText } from '@udecode/plate-test-utils';
+import { createHyperscript } from 'slate-hyperscript';
+const voidChildren = [
+    {
+        text: ''
+    }
+];
+const createCode = (_, attrs, children)=>{
+    return createText('text', {
+        code: true,
+        ...attrs
+    }, children);
+};
+const createSysLink = (linkType, id)=>({
+        sys: {
+            id,
+            type: 'Link',
+            linkType
+        }
+    });
+const createHyperlink = (_, attrs, children)=>{
+    const data = {};
+    let type = INLINES.HYPERLINK;
+    if (attrs.uri) {
+        data.uri = attrs.uri;
+        type = INLINES.HYPERLINK;
+    }
+    if (attrs.asset) {
+        type = INLINES.ASSET_HYPERLINK;
+        data.target = createSysLink('Asset', attrs.asset);
+    }
+    if (attrs.entry) {
+        type = INLINES.ENTRY_HYPERLINK;
+        data.target = createSysLink('Entry', attrs.entry);
+    }
+    children = children.map((child)=>typeof child === 'string' ? {
+            text: child
+        } : child);
+    return {
+        type,
+        data,
+        children
+    };
+};
+const createInline = (_, attrs, children)=>{
+    return {
+        type: INLINES.EMBEDDED_ENTRY,
+        data: {
+            target: createSysLink('Entry', attrs.id)
+        },
+        isVoid: true,
+        children: children.length > 0 ? children : voidChildren
+    };
+};
+const createEmbeddedBlock = (_, attrs, children)=>{
+    return {
+        type: attrs.type === 'Entry' ? BLOCKS.EMBEDDED_ENTRY : BLOCKS.EMBEDDED_ASSET,
+        data: {
+            target: createSysLink(attrs.type, attrs.id)
+        },
+        isVoid: true,
+        children: children.length > 0 ? children : voidChildren
+    };
+};
+const createHR = (_, __, children)=>{
+    return {
+        type: BLOCKS.HR,
+        data: {},
+        isVoid: true,
+        children: children.length > 0 ? children : voidChildren
+    };
+};
+const createFragment = (_, __, children)=>{
+    return children;
+};
+export const jsx = createHyperscript({
+    elements: {
+        hquote: {
+            type: BLOCKS.QUOTE,
+            data: {}
+        },
+        hh1: {
+            type: BLOCKS.HEADING_1,
+            data: {}
+        },
+        hh2: {
+            type: BLOCKS.HEADING_2,
+            data: {}
+        },
+        hh3: {
+            type: BLOCKS.HEADING_3,
+            data: {}
+        },
+        hh4: {
+            type: BLOCKS.HEADING_4,
+            data: {}
+        },
+        hh5: {
+            type: BLOCKS.HEADING_5,
+            data: {}
+        },
+        hh6: {
+            type: BLOCKS.HEADING_6,
+            data: {}
+        },
+        hli: {
+            type: BLOCKS.LIST_ITEM,
+            data: {}
+        },
+        hol: {
+            type: BLOCKS.OL_LIST,
+            data: {}
+        },
+        hp: {
+            type: BLOCKS.PARAGRAPH,
+            data: {}
+        },
+        htable: {
+            type: BLOCKS.TABLE,
+            data: {}
+        },
+        htd: {
+            type: BLOCKS.TABLE_CELL,
+            data: {}
+        },
+        hth: {
+            type: BLOCKS.TABLE_HEADER_CELL,
+            data: {}
+        },
+        htr: {
+            type: BLOCKS.TABLE_ROW,
+            data: {}
+        },
+        hul: {
+            type: BLOCKS.UL_LIST,
+            data: {}
+        }
+    },
+    creators: {
+        hlink: createHyperlink,
+        hhr: createHR,
+        htext: createText,
+        hcode: createCode,
+        hinline: createInline,
+        hembed: createEmbeddedBlock,
+        hfragment: createFragment
+    }
+});

package/dist/esm/test-utils/mockPlugin.js

@@ -0,0 +1,6 @@
+import { mockPlugin as mock } from '@udecode/plate-core';
+import { randomId } from './randomId';
+export const mockPlugin = (p)=>mock({
+        ...p,
+        key: p.key || randomId('plugin')
+    });

package/dist/esm/test-utils/randomId.js

@@ -0,0 +1,3 @@
+export const randomId = (prefix = '')=>{
+    return `${prefix}-${(Math.random() + 1).toString(36).substring(10)}`;
+};

package/dist/esm/test-utils/setEmptyDataAttribute.js

@@ -0,0 +1,11 @@
+import { setNodes } from '@udecode/plate-core';
+import { Element } from 'slate';
+export const setEmptyDataAttribute = (root)=>{
+    setNodes(root, {
+        data: {}
+    }, {
+        at: [],
+        match: (node)=>Element.isElement(node) && !node.data,
+        mode: 'all'
+    });
+};