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

package/dist/esm/__fixtures__/FakeSdk.js

@@ -0,0 +1,173 @@
+import { createFakeCMAAdapter, createFakeFieldAPI, createFakeLocalesAPI, createFakeSpaceAPI } from '@contentful/field-editor-test-utils';
+import { assets, contentTypes, entries, locales as localesFixtures, spaces } from './fixtures';
+const newLink = (linkType, id)=>({
+        sys: {
+            id,
+            linkType,
+            type: 'Link'
+        }
+    });
+export function newReferenceEditorFakeSdk(props) {
+    const rawInitialValue = window.localStorage.getItem('initialValue');
+    const initialValue = rawInitialValue ? JSON.parse(rawInitialValue) : props?.initialValue;
+    const rawValidations = window.localStorage.getItem('fieldValidations');
+    const validations = rawValidations ? JSON.parse(rawValidations) : props?.validations;
+    const customizeMock = (field)=>{
+        return validations ? {
+            ...field,
+            validations
+        } : field;
+    };
+    const [field, mitt] = createFakeFieldAPI(customizeMock, initialValue);
+    const space = createFakeSpaceAPI();
+    const locales = createFakeLocalesAPI();
+    const entryLinks = [
+        newLink('Entry', entries.published.sys.id),
+        newLink('Entry', entries.changed.sys.id),
+        newLink('Entry', entries.empty.sys.id)
+    ];
+    const assetLinks = [
+        newLink('Asset', assets.published.sys.id),
+        newLink('Asset', assets.changed.sys.id),
+        newLink('Asset', assets.empty.sys.id)
+    ];
+    let selectorCounter = 0;
+    const delay = (ms)=>{
+        return new Promise((resolve)=>setTimeout(resolve, ms));
+    };
+    const localizeContentTypes = (contentTypes)=>{
+        return contentTypes.map((contentType)=>({
+                ...contentType,
+                fields: contentType.fields.map((field)=>({
+                        ...field,
+                        localized: true
+                    }))
+            }));
+    };
+    const sdk = {
+        field,
+        locales,
+        cmaAdapter: createFakeCMAAdapter({
+            Entry: {
+                get: async ({ entryId  })=>{
+                    if (props?.fetchDelay) {
+                        await delay(props.fetchDelay);
+                    }
+                    if (entryId === entries.empty.sys.id) {
+                        return entries.empty;
+                    }
+                    if (entryId === entries.published.sys.id) {
+                        return entries.published;
+                    }
+                    if (entryId === entries.changed.sys.id) {
+                        return entries.changed;
+                    }
+                    return Promise.reject({});
+                }
+            },
+            Asset: {
+                get: async ({ assetId  })=>{
+                    if (props?.fetchDelay) {
+                        await delay(props.fetchDelay);
+                    }
+                    if (assetId === assets.empty.sys.id) {
+                        return assets.empty;
+                    }
+                    if (assetId === assets.published.sys.id) {
+                        return assets.published;
+                    }
+                    if (assetId === assets.changed.sys.id) {
+                        return assets.changed;
+                    }
+                    return Promise.reject({});
+                }
+            },
+            Space: {
+                get: async (params)=>{
+                    if (params.spaceId === spaces.indifferent.sys.id) {
+                        return spaces.indifferent;
+                    }
+                    return Promise.reject({});
+                }
+            },
+            ContentType: {
+                get: async ({ contentTypeId  })=>{
+                    if (contentTypeId === contentTypes.published.sys.id) {
+                        return contentTypes.published;
+                    }
+                    return Promise.reject({});
+                }
+            },
+            Locale: {
+                getMany: async ()=>localesFixtures.list
+            }
+        }),
+        space: {
+            ...space,
+            getCachedContentTypes () {
+                return localizeContentTypes(space.getCachedContentTypes());
+            },
+            getContentTypes () {
+                return Promise.resolve(space.getContentTypes().then((response)=>{
+                    return {
+                        ...response,
+                        items: localizeContentTypes(response.items)
+                    };
+                }));
+            },
+            async getEntityScheduledActions () {
+                return [];
+            }
+        },
+        dialogs: {
+            selectSingleAsset: async ()=>{
+                selectorCounter++;
+                return assetLinks[selectorCounter % assetLinks.length];
+            },
+            selectMultipleAssets: async ()=>{
+                selectorCounter++;
+                return selectorCounter % 2 ? assetLinks.slice(0, 2) : [
+                    assetLinks[2]
+                ];
+            },
+            selectSingleEntry: async ()=>{
+                selectorCounter++;
+                return entryLinks[selectorCounter % entryLinks.length];
+            },
+            selectMultipleEntries: async ()=>{
+                selectorCounter++;
+                return selectorCounter % 2 ? entryLinks.slice(0, 2) : [
+                    entryLinks[2]
+                ];
+            }
+        },
+        navigator: {
+            openNewAsset: async ()=>({
+                    entity: newLink('Asset', assets.empty.sys.id)
+                }),
+            openAsset: async ()=>{
+                alert('open Asset in slide in');
+                return {};
+            },
+            openNewEntry: async ()=>({
+                    entity: newLink('Entry', entries.empty.sys.id)
+                }),
+            openEntry: async ()=>{
+                alert('open entry in slide in');
+                return {};
+            },
+            onSlideInNavigation: ()=>()=>({})
+        },
+        access: {
+            can: async ()=>true
+        },
+        ids: {
+            space: 'space-id',
+            environment: 'environment-id'
+        }
+    };
+    return [
+        sdk,
+        mitt
+    ];
+}

package/dist/esm/__fixtures__/asset/index.js

@@ -0,0 +1,6 @@
+import changed from './changed_asset.json';
+import created from './created_asset.json';
+import empty from './empty_asset.json';
+import invalid from './invalid_asset.json';
+import published from './published_asset.json';
+export { changed, empty, published, invalid, created };

package/dist/esm/__fixtures__/content-type/index.js

@@ -0,0 +1,2 @@
+import published from './published_content_type.json';
+export { published };

package/dist/esm/__fixtures__/entry/index.js

@@ -0,0 +1,5 @@
+import changed from './changed_entry.json';
+import empty from './empty_entry.json';
+import invalid from './invalid_entry.json';
+import published from './published_entry.json';
+export { changed, empty, published, invalid };

package/dist/esm/__fixtures__/fixtures.js

@@ -0,0 +1,6 @@
+import * as assets from './asset';
+import * as contentTypes from './content-type';
+import * as entries from './entry';
+import * as locales from './locale';
+import * as spaces from './space';
+export { assets, contentTypes, entries, locales, spaces };

package/dist/esm/__fixtures__/locale/index.js

@@ -0,0 +1,15 @@
+import englishDefault from './english_default_locale.json';
+import german from './german_locale.json';
+const list = {
+    sys: {
+        type: 'Array'
+    },
+    total: 2,
+    skip: 0,
+    limit: 100,
+    items: [
+        englishDefault,
+        german
+    ]
+};
+export { englishDefault, german, list };

package/dist/esm/__fixtures__/space/index.js

@@ -0,0 +1,2 @@
+import indifferent from './indifferent_space.json';
+export { indifferent };

package/dist/esm/constants/Schema.js

@@ -0,0 +1,162 @@
+import { BLOCKS, INLINES, TOP_LEVEL_BLOCKS, VOID_BLOCKS, CONTAINERS } from '@contentful/rich-text-types';
+const inlines = Object.values(INLINES).map((type)=>({
+        type
+    }));
+export default {
+    document: {
+        nodes: [
+            {
+                types: TOP_LEVEL_BLOCKS.map((type)=>({
+                        type
+                    }))
+            }
+        ]
+    },
+    blocks: {
+        [BLOCKS.PARAGRAPH]: {
+            nodes: [
+                {
+                    match: [
+                        ...inlines,
+                        {
+                            object: 'text'
+                        }
+                    ]
+                }
+            ]
+        },
+        [BLOCKS.HEADING_1]: {
+            nodes: [
+                {
+                    match: [
+                        ...inlines,
+                        {
+                            object: 'text'
+                        }
+                    ]
+                }
+            ]
+        },
+        [BLOCKS.HEADING_2]: {
+            nodes: [
+                {
+                    match: [
+                        ...inlines,
+                        {
+                            object: 'text'
+                        }
+                    ]
+                }
+            ]
+        },
+        [BLOCKS.HEADING_3]: {
+            nodes: [
+                {
+                    match: [
+                        ...inlines,
+                        {
+                            object: 'text'
+                        }
+                    ]
+                }
+            ]
+        },
+        [BLOCKS.HEADING_4]: {
+            nodes: [
+                {
+                    match: [
+                        ...inlines,
+                        {
+                            object: 'text'
+                        }
+                    ]
+                }
+            ]
+        },
+        [BLOCKS.HEADING_5]: {
+            nodes: [
+                {
+                    match: [
+                        ...inlines,
+                        {
+                            object: 'text'
+                        }
+                    ]
+                }
+            ]
+        },
+        [BLOCKS.HEADING_6]: {
+            nodes: [
+                {
+                    match: [
+                        ...inlines,
+                        {
+                            object: 'text'
+                        }
+                    ]
+                }
+            ]
+        },
+        ...VOID_BLOCKS.reduce((blocks, nodeType)=>({
+                ...blocks,
+                [nodeType]: {
+                    isVoid: true
+                }
+            }), {}),
+        [BLOCKS.QUOTE]: {
+            nodes: [
+                {
+                    match: [
+                        CONTAINERS[BLOCKS.QUOTE].map((type)=>({
+                                type
+                            }))
+                    ],
+                    min: 1
+                }
+            ],
+            normalize: (editor, error)=>{
+                if (error.code === 'child_type_invalid') {
+                    return editor.unwrapBlockByKey(error.node.key, BLOCKS.QUOTE);
+                }
+            }
+        }
+    },
+    inlines: {
+        [INLINES.HYPERLINK]: {
+            nodes: [
+                {
+                    match: [
+                        {
+                            object: 'text'
+                        }
+                    ]
+                }
+            ]
+        },
+        [INLINES.ENTRY_HYPERLINK]: {
+            nodes: [
+                {
+                    match: [
+                        {
+                            object: 'text'
+                        }
+                    ]
+                }
+            ]
+        },
+        [INLINES.ASSET_HYPERLINK]: {
+            nodes: [
+                {
+                    match: [
+                        {
+                            object: 'text'
+                        }
+                    ]
+                }
+            ]
+        },
+        [INLINES.EMBEDDED_ENTRY]: {
+            isVoid: true
+        }
+    }
+};

package/dist/esm/dialogs/HypelinkDialog/HyperlinkDialog.js

@@ -0,0 +1,283 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+import * as React from 'react';
+import { Button, Form, FormControl, FormLabel, ModalContent, ModalControls, Select, TextInput, TextLink } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { EntityProvider } from '@contentful/field-editor-reference';
+import { css } from 'emotion';
+import PropTypes from 'prop-types';
+import { FetchingWrappedAssetCard } from '../../plugins/shared/FetchingWrappedAssetCard';
+import { FetchingWrappedEntryCard } from '../../plugins/shared/FetchingWrappedEntryCard';
+export const LINK_TYPES = {
+    URI: 'uri',
+    ENTRY: 'Entry',
+    ASSET: 'Asset'
+};
+function isFeaturingEntitySelector(entitySelectorConfigs = {}) {
+    return !!entitySelectorConfigs.Entry || !!entitySelectorConfigs.Asset;
+}
+function entityToLink(entity) {
+    const { id , type  } = entity.sys;
+    return {
+        sys: {
+            id,
+            type: 'Link',
+            linkType: type
+        }
+    };
+}
+var _React_Component;
+export class HyperlinkDialog extends (_React_Component = React.Component) {
+    setTargetEntity(type, entity) {
+        this.setState((state)=>({
+                entityLinks: {
+                    ...state.entityLinks,
+                    [type]: entity ? entityToLink(entity) : undefined
+                }
+            }));
+    }
+    getValue() {
+        const { text , type , uri  } = this.state;
+        const value = {
+            type
+        };
+        if (text) {
+            value.text = text;
+        }
+        if (type === LINK_TYPES.URI) {
+            value.uri = uri;
+        } else {
+            value.target = this.state.entityLinks[type];
+        }
+        return value;
+    }
+    isLinkComplete() {
+        const { text , type , uri , target  } = this.getValue();
+        const requiresText = !this.props.hideText;
+        if (requiresText && !text) {
+            return false;
+        }
+        return type === LINK_TYPES.URI && uri || target;
+    }
+    render() {
+        const { labels  } = this.props;
+        return React.createElement(EntityProvider, {
+            sdk: this.props.sdk
+        }, React.createElement(React.Fragment, null, React.createElement(ModalContent, null, this.renderFields()), React.createElement(ModalControls, null, React.createElement(Button, {
+            type: "button",
+            onClick: ()=>this.props.onClose(null),
+            variant: "secondary",
+            testId: "cancel-cta",
+            size: "small"
+        }, "Cancel"), React.createElement(Button, {
+            type: "submit",
+            variant: "positive",
+            onClick: this.handleSubmit,
+            isDisabled: !this.isLinkComplete(),
+            testId: "confirm-cta",
+            size: "small"
+        }, labels.confirm))));
+    }
+    renderFields() {
+        const { hideText , allowedHyperlinkTypes , entitySelectorConfigs  } = this.props;
+        const { uri , text , type  } = this.state;
+        const isUriInputAutoFocused = type === LINK_TYPES.URI && (hideText || !!text);
+        return React.createElement(Form, null, hideText ? null : React.createElement(FormControl, {
+            id: "link-text",
+            isRequired: true
+        }, React.createElement(FormControl.Label, null, "Link text"), React.createElement(TextInput, {
+            testId: "link-text-input",
+            name: "link-text",
+            value: text || '',
+            onChange: (e)=>this.setState({
+                    text: e.target.value
+                }),
+            autoFocus: !isUriInputAutoFocused
+        })), isFeaturingEntitySelector(entitySelectorConfigs) && React.createElement(FormControl, {
+            id: "link-type",
+            name: "link-type"
+        }, React.createElement(FormControl.Label, null, "Link type"), React.createElement(Select, {
+            value: type,
+            onChange: (e)=>this.setState({
+                    type: e.target.value
+                }),
+            testId: "link-type-select"
+        }, allowedHyperlinkTypes.includes(LINK_TYPES.URI) || type === LINK_TYPES.URI ? React.createElement(Select.Option, {
+            value: LINK_TYPES.URI
+        }, "URL") : null, allowedHyperlinkTypes.includes(LINK_TYPES.ENTRY) || type === LINK_TYPES.ENTRY ? React.createElement(Select.Option, {
+            value: LINK_TYPES.ENTRY
+        }, "Entry") : null, allowedHyperlinkTypes.includes(LINK_TYPES.ASSET) || type === LINK_TYPES.ASSET ? React.createElement(Select.Option, {
+            value: LINK_TYPES.ASSET
+        }, "Asset") : null)), type === LINK_TYPES.URI ? React.createElement(FormControl, {
+            id: "link-uri",
+            isRequired: true
+        }, React.createElement(FormControl.Label, null, "Link target"), React.createElement(TextInput, {
+            testId: "link-target-input",
+            name: "link-uri",
+            value: uri || '',
+            placeholder: "https://",
+            onChange: (e)=>this.setState({
+                    uri: e.target.value
+                }),
+            autoFocus: isUriInputAutoFocused
+        }), React.createElement(FormControl.HelpText, null, "A protocol may be required, e.g. https://")) : this.renderEntityField());
+    }
+    renderEntityField() {
+        const { type , entityLinks  } = this.state;
+        const resetEntity = ()=>this.setTargetEntity(type, null);
+        const entityLink = entityLinks[type];
+        const isEntitySelectorVisible = !entityLink;
+        return React.createElement("div", null, React.createElement(FormLabel, {
+            required: true,
+            htmlFor: ""
+        }, "Link target"), !isEntitySelectorVisible && React.createElement(TextLink, {
+            as: "button",
+            className: css({
+                marginLeft: tokens.spacingS
+            }),
+            onClick: resetEntity
+        }, "Remove selection"), entityLink && React.createElement("div", null, type === LINK_TYPES.ENTRY && React.createElement(FetchingWrappedEntryCard, {
+            sdk: this.props.sdk,
+            locale: this.props.entitySelectorConfigs.Entry.locale,
+            entryId: entityLink.sys.id,
+            isDisabled: true,
+            isSelected: false
+        }), type == LINK_TYPES.ASSET && React.createElement(FetchingWrappedAssetCard, {
+            sdk: this.props.sdk,
+            locale: this.props.entitySelectorConfigs.Asset.locale,
+            assetId: entityLink.sys.id,
+            isDisabled: true,
+            isSelected: false
+        })), isEntitySelectorVisible && this.renderEntitySelector(type, isEntitySelectorVisible));
+    }
+    renderEntitySelector(type) {
+        return React.createElement("div", {
+            className: css({
+                marginTop: tokens.spacingS
+            })
+        }, type === LINK_TYPES.ENTRY && React.createElement(TextLink, {
+            as: "button",
+            onClick: this.selectEntry
+        }, "Select entry"), type === LINK_TYPES.ASSET && React.createElement(TextLink, {
+            as: "button",
+            onClick: this.selectAsset
+        }, "Select asset"));
+    }
+    constructor(props){
+        super(props);
+        _define_property(this, "handleSubmit", (event)=>{
+            event.preventDefault();
+            this.props.onClose(this.getValue());
+        });
+        _define_property(this, "selectEntry", async ()=>{
+            const { locale , contentTypes  } = this.props.entitySelectorConfigs.Entry;
+            const entry = await this.props.sdk.dialogs.selectSingleEntry({
+                locale,
+                contentTypes
+            });
+            this.setTargetEntity(LINK_TYPES.ENTRY, entry);
+        });
+        _define_property(this, "selectAsset", async ()=>{
+            const { locale  } = this.props.entitySelectorConfigs.Asset;
+            const asset = await this.props.sdk.dialogs.selectSingleAsset({
+                locale
+            });
+            this.setTargetEntity(LINK_TYPES.ASSET, asset);
+        });
+        const { text , type , uri , target  } = props.value;
+        const isEntityLink = Boolean(target);
+        const entityLinks = {
+            [LINK_TYPES.ENTRY]: null,
+            [LINK_TYPES.ASSET]: null
+        };
+        let linkType = type;
+        if (isEntityLink) {
+            linkType = target.sys.linkType;
+            entityLinks[linkType] = target;
+        } else if (props.allowedHyperlinkTypes.includes(LINK_TYPES.URI)) {
+            linkType = LINK_TYPES.URI;
+        } else {
+            linkType = props.allowedHyperlinkTypes[0];
+        }
+        this.state = {
+            text,
+            uri,
+            entityLinks,
+            type: linkType
+        };
+    }
+}
+_define_property(HyperlinkDialog, "propTypes", {
+    sdk: PropTypes.object.isRequired,
+    labels: PropTypes.shape({
+        title: PropTypes.string,
+        confirm: PropTypes.string
+    }),
+    value: PropTypes.shape({
+        text: PropTypes.string,
+        uri: PropTypes.string,
+        target: PropTypes.object,
+        type: PropTypes.oneOf([
+            'uri',
+            'Entry',
+            'Asset'
+        ])
+    }),
+    entitySelectorConfigs: PropTypes.object,
+    allowedHyperlinkTypes: PropTypes.arrayOf(PropTypes.oneOf([
+        LINK_TYPES.ENTRY,
+        LINK_TYPES.ASSET,
+        LINK_TYPES.URI
+    ])),
+    hideText: PropTypes.bool,
+    onClose: PropTypes.func.isRequired
+});
+_define_property(HyperlinkDialog, "defaultProps", {
+    labels: {
+        title: 'Insert link',
+        confirm: 'Insert link'
+    },
+    value: {},
+    hideText: false,
+    entitySelectorConfigs: {},
+    allowedHyperlinkTypes: [
+        LINK_TYPES.ENTRY,
+        LINK_TYPES.ASSET,
+        LINK_TYPES.URI
+    ]
+});
+export const openHyperlinkDialog = (dialogs, { value , showTextInput , allowedHyperlinkTypes , entitySelectorConfigs  })=>{
+    const isNew = !(value.uri || value.target);
+    const props = {
+        labels: {
+            title: isNew ? 'Insert hyperlink' : 'Edit hyperlink',
+            confirm: isNew ? 'Insert' : 'Update'
+        },
+        value,
+        hideText: !showTextInput,
+        allowedHyperlinkTypes,
+        entitySelectorConfigs
+    };
+    return dialogs.openCurrent({
+        title: props.labels.title,
+        width: 'large',
+        shouldCloseOnEscapePress: true,
+        shouldCloseOnOverlayClick: true,
+        allowHeightOverflow: true,
+        parameters: {
+            type: 'rich-text-hyperlink-dialog',
+            ...props
+        }
+    });
+};

package/dist/esm/dialogs/openRichTextDialog.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ModalDialogLauncher } from '@contentful/field-editor-shared';
+import { HyperlinkDialog } from './HypelinkDialog/HyperlinkDialog';
+export const openRichTextDialog = (sdk)=>(options)=>{
+        if (options.parameters?.type === 'rich-text-hyperlink-dialog') {
+            return ModalDialogLauncher.openDialog(options, ({ onClose  })=>{
+                return React.createElement(HyperlinkDialog, {
+                    ...options.parameters,
+                    onClose: onClose,
+                    sdk: sdk
+                });
+            });
+        }
+        return Promise.reject();
+    };

package/dist/esm/dialogs/renderRichTextDialog.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { HyperlinkDialog } from './HypelinkDialog/HyperlinkDialog';
+export const renderRichTextDialog = (sdk)=>{
+    const parameters = sdk.parameters.invocation;
+    if (parameters?.type === 'rich-text-hyperlink-dialog') {
+        sdk.window.startAutoResizer();
+        return React.createElement(HyperlinkDialog, {
+            ...parameters,
+            onClose: sdk.close,
+            sdk: sdk
+        });
+    }
+    return React.createElement("div", null);
+};