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

package/dist/esm/RichTextEditor.js

@@ -0,0 +1,108 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import { EntityProvider } from '@contentful/field-editor-reference';
+import { FieldConnector } from '@contentful/field-editor-shared';
+import * as Contentful from '@contentful/rich-text-types';
+import { Plate, getPlateActions } from '@udecode/plate-core';
+import { css, cx } from 'emotion';
+import deepEquals from 'fast-deep-equal';
+import noop from 'lodash/noop';
+import { ContentfulEditorIdProvider, getContentfulEditorId } from './ContentfulEditorProvider';
+import { getPlateSelectors } from './internal/misc';
+import { getPlugins, disableCorePlugins } from './plugins';
+import { documentToEditorValue, normalizeEditorValue, setEditorContent } from './prepareDocument';
+import { styles } from './RichTextEditor.styles';
+import { SdkProvider } from './SdkProvider';
+import Toolbar from './Toolbar';
+import StickyToolbarWrapper from './Toolbar/components/StickyToolbarWrapper';
+import { useOnValueChanged } from './useOnValueChanged';
+export const ConnectedRichTextEditor = (props)=>{
+    const id = getContentfulEditorId(props.sdk);
+    const plugins = React.useMemo(()=>getPlugins(props.sdk, props.onAction ?? noop, props.restrictedMarks), [
+        props.sdk,
+        props.onAction,
+        props.restrictedMarks
+    ]);
+    const [isFirstRender, setIsFirstRender] = useState(true);
+    const [pendingExternalUpdate, setPendingExternalUpdate] = useState(false);
+    const onValueChanged = useOnValueChanged({
+        editorId: id,
+        handler: props.onChange,
+        skip: pendingExternalUpdate || isFirstRender,
+        onSkip: ()=>setPendingExternalUpdate(false)
+    });
+    useEffect(()=>{
+        setIsFirstRender(false);
+        const editor = getPlateSelectors(id).editor();
+        if (!editor) {
+            return;
+        }
+        setPendingExternalUpdate(true);
+        setEditorContent(editor, documentToEditorValue(props.value));
+    }, [
+        props.value,
+        id
+    ]);
+    const classNames = cx(styles.editor, props.minHeight !== undefined ? css({
+        minHeight: props.minHeight
+    }) : undefined, props.isDisabled ? styles.disabled : styles.enabled, props.isToolbarHidden && styles.hiddenToolbar);
+    useEffect(()=>{
+        if (!isFirstRender) {
+            return;
+        }
+        getPlateActions(id).value(normalizeEditorValue(documentToEditorValue(props.value), {
+            plugins,
+            disableCorePlugins
+        }));
+    }, [
+        isFirstRender,
+        plugins,
+        id,
+        props.value
+    ]);
+    return React.createElement(SdkProvider, {
+        sdk: props.sdk
+    }, React.createElement(ContentfulEditorIdProvider, {
+        value: id
+    }, React.createElement("div", {
+        className: styles.root,
+        "data-test-id": "rich-text-editor"
+    }, React.createElement(Plate, {
+        id: id,
+        plugins: plugins,
+        disableCorePlugins: disableCorePlugins,
+        editableProps: {
+            className: classNames,
+            readOnly: props.isDisabled
+        },
+        onChange: onValueChanged,
+        firstChildren: !props.isToolbarHidden && React.createElement(StickyToolbarWrapper, {
+            isDisabled: props.isDisabled
+        }, React.createElement(Toolbar, {
+            isDisabled: props.isDisabled
+        }))
+    }))));
+};
+const RichTextEditor = (props)=>{
+    const { sdk , isInitiallyDisabled , onAction , restrictedMarks , ...otherProps } = props;
+    const isEmptyValue = useCallback((value)=>!value || deepEquals(value, Contentful.EMPTY_DOCUMENT), []);
+    const id = getContentfulEditorId(props.sdk);
+    return React.createElement(EntityProvider, {
+        sdk: sdk
+    }, React.createElement(FieldConnector, {
+        throttle: 0,
+        field: sdk.field,
+        isInitiallyDisabled: isInitiallyDisabled,
+        isEmptyValue: isEmptyValue,
+        isEqualValues: deepEquals
+    }, ({ lastRemoteValue , disabled , setValue  })=>React.createElement(ConnectedRichTextEditor, {
+            ...otherProps,
+            key: `rich-text-editor-${id}`,
+            value: lastRemoteValue,
+            sdk: sdk,
+            onAction: onAction,
+            isDisabled: disabled,
+            onChange: setValue,
+            restrictedMarks: restrictedMarks
+        })));
+};
+export default RichTextEditor;

package/dist/esm/RichTextEditor.styles.js

@@ -0,0 +1,51 @@
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+const STYLE_EDITOR_BORDER = `1px solid ${tokens.gray400}`;
+export const styles = {
+    root: css({
+        position: 'relative'
+    }),
+    editor: css({
+        borderRadius: `0 0 ${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium}`,
+        border: STYLE_EDITOR_BORDER,
+        borderTop: 0,
+        padding: '20px',
+        fontSize: tokens.spacingM,
+        fontFamily: tokens.fontStackPrimary,
+        minHeight: '400px',
+        background: tokens.colorWhite,
+        outline: 'none',
+        whiteSpace: 'pre-wrap',
+        overflowWrap: 'break-word',
+        webkitUserModify: 'read-write-plaintext-only',
+        a: {
+            span: {
+                cursor: 'not-allowed',
+                '&:hover': {
+                    cursor: 'not-allowed'
+                }
+            }
+        },
+        'ul > li > div': {
+            margin: 0
+        }
+    }),
+    hiddenToolbar: css({
+        borderTop: STYLE_EDITOR_BORDER
+    }),
+    enabled: css({
+        background: tokens.colorWhite,
+        a: {
+            span: {
+                cursor: 'pointer',
+                '&:hover': {
+                    cursor: 'pointer'
+                }
+            }
+        }
+    }),
+    disabled: css({
+        background: tokens.gray100,
+        cursor: 'not-allowed'
+    })
+};

package/dist/esm/SdkProvider.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import constate from 'constate';
+function useSdk({ sdk  }) {
+    const sdkMemo = React.useMemo(()=>sdk, []);
+    return sdkMemo;
+}
+export const [SdkProvider, useSdkContext] = constate(useSdk);

package/dist/esm/Toolbar/_tests_/toolbar.test.js

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { MARKS } from '@contentful/rich-text-types';
+import { configure, render, waitFor } from '@testing-library/react';
+import { Plate } from '@udecode/plate-core';
+import '@testing-library/jest-dom/extend-expect';
+import { ContentfulEditorIdProvider, getContentfulEditorId } from '../../ContentfulEditorProvider';
+import { SdkProvider } from '../../SdkProvider';
+import Toolbar from '../index';
+configure({
+    testIdAttribute: 'data-test-id'
+});
+const mockSdk = (marks)=>{
+    return {
+        locales: {
+            default: 'en-US'
+        },
+        entry: {
+            getSys: jest.fn().mockReturnValue({
+                id: 'entry-id'
+            })
+        },
+        field: {
+            id: 'field-id',
+            locale: 'en-US',
+            validations: [
+                {
+                    enabledMarks: marks || Object.values(MARKS)
+                }
+            ]
+        },
+        access: {
+            can: jest.fn().mockResolvedValue(true)
+        }
+    };
+};
+describe('Toolbar', ()=>{
+    test('everything on the toolbar should be disabled', async ()=>{
+        const sdk = mockSdk();
+        const id = getContentfulEditorId(sdk);
+        const { getByTestId  } = render(React.createElement(Plate, {
+            id: id
+        }, React.createElement(SdkProvider, {
+            sdk: sdk
+        }, React.createElement(ContentfulEditorIdProvider, {
+            value: id
+        }, React.createElement(Toolbar, {
+            isDisabled: true
+        })))));
+        await waitFor(()=>{
+            expect(getByTestId('toolbar-heading-toggle')).toBeDisabled();
+            [
+                MARKS.BOLD,
+                MARKS.ITALIC,
+                MARKS.UNDERLINE,
+                'dropdown',
+                'hyperlink',
+                'quote',
+                'ul',
+                'ol',
+                'hr',
+                'table'
+            ].forEach((s)=>expect(getByTestId(`${s}-toolbar-button`)).toBeDisabled());
+            expect(getByTestId('toolbar-entity-dropdown-toggle')).toBeDisabled();
+        });
+    });
+    describe('Dropdown', ()=>{
+        it('always shows whenever at least bold, italic and underline are available', ()=>{
+            const sdk = mockSdk([
+                MARKS.BOLD,
+                MARKS.ITALIC,
+                MARKS.SUPERSCRIPT
+            ]);
+            const id = getContentfulEditorId(sdk);
+            const { queryByTestId  } = render(React.createElement(Plate, {
+                id: id
+            }, React.createElement(SdkProvider, {
+                sdk: sdk
+            }, React.createElement(ContentfulEditorIdProvider, {
+                value: id
+            }, React.createElement(Toolbar, {
+                isDisabled: true
+            })))));
+            expect(queryByTestId('dropdown-toolbar-button')).toBeVisible();
+        });
+        it('does not show if bold, italic and underline are not available', ()=>{
+            const sdk = mockSdk([
+                MARKS.SUPERSCRIPT,
+                MARKS.SUBSCRIPT,
+                MARKS.CODE
+            ]);
+            const id = getContentfulEditorId(sdk);
+            const { queryByTestId  } = render(React.createElement(Plate, {
+                id: id
+            }, React.createElement(SdkProvider, {
+                sdk: sdk
+            }, React.createElement(ContentfulEditorIdProvider, {
+                value: id
+            }, React.createElement(Toolbar, {
+                isDisabled: true
+            })))));
+            expect(queryByTestId('dropdown-toolbar-button')).not.toBeInTheDocument();
+        });
+    });
+});

package/dist/esm/Toolbar/components/EmbedEntityWidget.js

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { BLOCKS, INLINES } from '@contentful/rich-text-types';
+import { useContentfulEditor } from '../../ContentfulEditorProvider';
+import { isLinkActive } from '../../helpers/editor';
+import { isNodeTypeEnabled } from '../../helpers/validations';
+import { ToolbarIcon as EmbeddedEntityBlockToolbarIcon } from '../../plugins/EmbeddedEntityBlock';
+import { ToolbarEmbeddedEntityInlineButton } from '../../plugins/EmbeddedEntityInline';
+import { useSdkContext } from '../../SdkProvider';
+import { EmbeddedEntityDropdownButton } from './EmbeddedEntityDropdownButton';
+export const EmbedEntityWidget = ({ isDisabled , canInsertBlocks  })=>{
+    const sdk = useSdkContext();
+    const editor = useContentfulEditor();
+    const [isEmbedDropdownOpen, setEmbedDropdownOpen] = useState(false);
+    const onCloseEntityDropdown = ()=>setEmbedDropdownOpen(false);
+    const onToggleEntityDropdown = ()=>setEmbedDropdownOpen(!isEmbedDropdownOpen);
+    const inlineEntryEmbedEnabled = isNodeTypeEnabled(sdk.field, INLINES.EMBEDDED_ENTRY);
+    const blockEntryEmbedEnabled = isNodeTypeEnabled(sdk.field, BLOCKS.EMBEDDED_ENTRY) && canInsertBlocks;
+    const blockAssetEmbedEnabled = isNodeTypeEnabled(sdk.field, BLOCKS.EMBEDDED_ASSET) && canInsertBlocks;
+    const actions = React.createElement(React.Fragment, null, blockEntryEmbedEnabled && React.createElement(EmbeddedEntityBlockToolbarIcon, {
+        isDisabled: !!isDisabled,
+        nodeType: BLOCKS.EMBEDDED_ENTRY,
+        onClose: onCloseEntityDropdown
+    }), inlineEntryEmbedEnabled && React.createElement(ToolbarEmbeddedEntityInlineButton, {
+        isDisabled: !!isDisabled || isLinkActive(editor),
+        onClose: onCloseEntityDropdown
+    }), blockAssetEmbedEnabled && React.createElement(EmbeddedEntityBlockToolbarIcon, {
+        isDisabled: !!isDisabled,
+        nodeType: BLOCKS.EMBEDDED_ASSET,
+        onClose: onCloseEntityDropdown
+    }));
+    const showEmbedButton = blockEntryEmbedEnabled || inlineEntryEmbedEnabled || blockAssetEmbedEnabled;
+    return showEmbedButton ? React.createElement(EmbeddedEntityDropdownButton, {
+        isDisabled: isDisabled,
+        onClose: onCloseEntityDropdown,
+        onToggle: onToggleEntityDropdown,
+        isOpen: isEmbedDropdownOpen
+    }, actions) : null;
+};

package/dist/esm/Toolbar/components/EmbeddedEntityDropdownButton.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Button, Menu } from '@contentful/f36-components';
+import { PlusIcon, ChevronDownIcon } from '@contentful/f36-icons';
+export function EmbeddedEntityDropdownButton({ children , isDisabled , isOpen , onClose , onToggle  }) {
+    return React.createElement(Menu, {
+        placement: "bottom-end",
+        isOpen: isOpen,
+        onClose: onClose,
+        onOpen: onToggle
+    }, React.createElement(Menu.Trigger, null, React.createElement(Button, {
+        endIcon: React.createElement(ChevronDownIcon, null),
+        testId: "toolbar-entity-dropdown-toggle",
+        variant: "secondary",
+        size: "small",
+        startIcon: React.createElement(PlusIcon, null),
+        isDisabled: isDisabled
+    }, "Embed")), React.createElement(Menu.List, {
+        className: "toolbar-entity-dropdown-list"
+    }, children));
+}

package/dist/esm/Toolbar/components/StickyToolbarWrapper.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { css } from 'emotion';
+const styles = {
+    nativeSticky: css`
+    position: -webkit-sticky;
+    position: sticky;
+    top: -1px;
+    z-index: 2;
+  `
+};
+const StickyToolbarWrapper = ({ isDisabled , children  })=>React.createElement("div", {
+        className: isDisabled ? '' : styles.nativeSticky
+    }, children);
+export default StickyToolbarWrapper;

package/dist/esm/Toolbar/index.js

@@ -0,0 +1,168 @@
+import * as React from 'react';
+import { Flex, IconButton, Menu } from '@contentful/f36-components';
+import { MoreHorizontalIcon } from '@contentful/f36-icons';
+import tokens from '@contentful/f36-tokens';
+import { BLOCKS, INLINES, MARKS } from '@contentful/rich-text-types';
+import { css } from 'emotion';
+import { useContentfulEditor } from '../ContentfulEditorProvider';
+import { isNodeTypeSelected } from '../helpers/editor';
+import { isMarkEnabled, isNodeTypeEnabled } from '../helpers/validations';
+import { isMarkActive } from '../internal/queries';
+import { ToolbarHeadingButton } from '../plugins/Heading';
+import { ToolbarHrButton } from '../plugins/Hr';
+import { ToolbarHyperlinkButton } from '../plugins/Hyperlink';
+import { ToolbarListButton } from '../plugins/List';
+import { ToolbarBoldButton } from '../plugins/Marks/Bold';
+import { ToolbarCodeButton, ToolbarDropdownCodeButton } from '../plugins/Marks/Code';
+import { ToolbarItalicButton } from '../plugins/Marks/Italic';
+import { ToolbarDropdownSubscriptButton, ToolbarSubscriptButton } from '../plugins/Marks/Subscript';
+import { ToolbarDropdownSuperscriptButton, ToolbarSuperscriptButton } from '../plugins/Marks/Superscript';
+import { ToolbarUnderlineButton } from '../plugins/Marks/Underline';
+import { ToolbarQuoteButton } from '../plugins/Quote';
+import { ToolbarTableButton } from '../plugins/Table';
+import { useSdkContext } from '../SdkProvider';
+import { EmbedEntityWidget } from './components/EmbedEntityWidget';
+const styles = {
+    toolbar: css({
+        border: `1px solid ${tokens.gray400}`,
+        backgroundColor: tokens.gray100,
+        padding: tokens.spacingXs,
+        borderRadius: `${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium} 0 0`
+    }),
+    toolbarBtn: css({
+        height: '30px',
+        width: '30px',
+        marginLeft: tokens.spacing2Xs,
+        marginRight: tokens.spacing2Xs
+    }),
+    divider: css({
+        display: 'inline-block',
+        height: '21px',
+        width: '1px',
+        background: tokens.gray300,
+        margin: `0 ${tokens.spacing2Xs}`
+    }),
+    embedActionsWrapper: css({
+        display: [
+            '-webkit-box',
+            '-ms-flexbox',
+            'flex'
+        ],
+        webkitAlignSelf: 'flex-start',
+        alignSelf: 'flex-start',
+        msFlexItemAlign: 'start',
+        marginLeft: 'auto'
+    }),
+    formattingOptionsWrapper: css({
+        display: [
+            '-webkit-box',
+            '-ms-flexbox',
+            'flex'
+        ],
+        msFlexAlign: 'center',
+        webkitBoxAlign: 'center',
+        alignItems: 'center',
+        msFlexWrap: 'wrap',
+        flexWrap: 'wrap',
+        marginRight: '20px'
+    })
+};
+const Dropdown = ({ sdk , isDisabled  })=>{
+    const editor = useContentfulEditor();
+    const isActive = editor && (isMarkActive(editor, MARKS.SUPERSCRIPT) || isMarkActive(editor, MARKS.SUBSCRIPT) || isMarkActive(editor, MARKS.CODE));
+    return React.createElement(Menu, null, React.createElement(Menu.Trigger, null, React.createElement("span", null, React.createElement(IconButton, {
+        size: "small",
+        className: styles.toolbarBtn,
+        variant: isActive ? 'secondary' : 'transparent',
+        icon: React.createElement(MoreHorizontalIcon, null),
+        "aria-label": "toggle menu",
+        isDisabled: isDisabled,
+        testId: "dropdown-toolbar-button"
+    }))), React.createElement(Menu.List, null, isMarkEnabled(sdk.field, MARKS.SUPERSCRIPT) && React.createElement(ToolbarDropdownSuperscriptButton, {
+        isDisabled: isDisabled
+    }), isMarkEnabled(sdk.field, MARKS.SUBSCRIPT) && React.createElement(ToolbarDropdownSubscriptButton, {
+        isDisabled: isDisabled
+    }), isMarkEnabled(sdk.field, MARKS.CODE) && React.createElement(ToolbarDropdownCodeButton, {
+        isDisabled: isDisabled
+    })));
+};
+const Toolbar = ({ isDisabled  })=>{
+    const sdk = useSdkContext();
+    const editor = useContentfulEditor();
+    const canInsertBlocks = !isNodeTypeSelected(editor, BLOCKS.TABLE);
+    const validationInfo = React.useMemo(()=>getValidationInfo(sdk.field), [
+        sdk.field
+    ]);
+    const isListSelected = isNodeTypeSelected(editor, BLOCKS.UL_LIST) || isNodeTypeSelected(editor, BLOCKS.OL_LIST);
+    const isBlockquoteSelected = isNodeTypeSelected(editor, BLOCKS.QUOTE);
+    const shouldDisableTables = isDisabled || !canInsertBlocks || isListSelected || isBlockquoteSelected;
+    const boldItalicUnderlineAvailable = isMarkEnabled(sdk.field, MARKS.BOLD) || isMarkEnabled(sdk.field, MARKS.ITALIC) || isMarkEnabled(sdk.field, MARKS.UNDERLINE);
+    const dropdownItemsAvailable = isMarkEnabled(sdk.field, MARKS.SUPERSCRIPT) || isMarkEnabled(sdk.field, MARKS.SUBSCRIPT) || isMarkEnabled(sdk.field, MARKS.CODE);
+    const shouldShowDropdown = boldItalicUnderlineAvailable && dropdownItemsAvailable;
+    return React.createElement(Flex, {
+        testId: "toolbar",
+        className: styles.toolbar,
+        alignItems: "center"
+    }, React.createElement("div", {
+        className: styles.formattingOptionsWrapper
+    }, React.createElement(ToolbarHeadingButton, {
+        isDisabled: isDisabled || !canInsertBlocks
+    }), validationInfo.isAnyMarkEnabled && React.createElement("span", {
+        className: styles.divider
+    }), isMarkEnabled(sdk.field, MARKS.BOLD) && React.createElement(ToolbarBoldButton, {
+        isDisabled: isDisabled
+    }), isMarkEnabled(sdk.field, MARKS.ITALIC) && React.createElement(ToolbarItalicButton, {
+        isDisabled: isDisabled
+    }), isMarkEnabled(sdk.field, MARKS.UNDERLINE) && React.createElement(ToolbarUnderlineButton, {
+        isDisabled: isDisabled
+    }), !boldItalicUnderlineAvailable && isMarkEnabled(sdk.field, MARKS.SUPERSCRIPT) && React.createElement(ToolbarSuperscriptButton, {
+        isDisabled: isDisabled
+    }), !boldItalicUnderlineAvailable && isMarkEnabled(sdk.field, MARKS.SUBSCRIPT) && React.createElement(ToolbarSubscriptButton, {
+        isDisabled: isDisabled
+    }), !boldItalicUnderlineAvailable && isMarkEnabled(sdk.field, MARKS.CODE) && React.createElement(ToolbarCodeButton, {
+        isDisabled: isDisabled
+    }), shouldShowDropdown && React.createElement(Dropdown, {
+        sdk: sdk,
+        isDisabled: isDisabled
+    }), validationInfo.isAnyHyperlinkEnabled && React.createElement(React.Fragment, null, React.createElement("span", {
+        className: styles.divider
+    }), React.createElement(ToolbarHyperlinkButton, {
+        isDisabled: isDisabled
+    })), validationInfo.isAnyBlockFormattingEnabled && React.createElement("span", {
+        className: styles.divider
+    }), React.createElement(ToolbarListButton, {
+        isDisabled: isDisabled || !canInsertBlocks
+    }), isNodeTypeEnabled(sdk.field, BLOCKS.QUOTE) && React.createElement(ToolbarQuoteButton, {
+        isDisabled: isDisabled || !canInsertBlocks
+    }), isNodeTypeEnabled(sdk.field, BLOCKS.HR) && React.createElement(ToolbarHrButton, {
+        isDisabled: isDisabled || !canInsertBlocks
+    }), isNodeTypeEnabled(sdk.field, BLOCKS.TABLE) && React.createElement(ToolbarTableButton, {
+        isDisabled: shouldDisableTables
+    })), React.createElement("div", {
+        className: styles.embedActionsWrapper
+    }, React.createElement(EmbedEntityWidget, {
+        isDisabled: isDisabled,
+        canInsertBlocks: canInsertBlocks
+    })));
+};
+function getValidationInfo(field) {
+    const someWithValidation = (vals, validation)=>vals.some((val)=>validation(field, val));
+    const isAnyMarkEnabled = someWithValidation(Object.values(MARKS), isMarkEnabled);
+    const isAnyHyperlinkEnabled = someWithValidation([
+        INLINES.HYPERLINK,
+        INLINES.ASSET_HYPERLINK,
+        INLINES.ENTRY_HYPERLINK
+    ], isNodeTypeEnabled);
+    const isAnyBlockFormattingEnabled = someWithValidation([
+        BLOCKS.UL_LIST,
+        BLOCKS.OL_LIST,
+        BLOCKS.QUOTE,
+        BLOCKS.HR
+    ], isNodeTypeEnabled);
+    return {
+        isAnyMarkEnabled,
+        isAnyHyperlinkEnabled,
+        isAnyBlockFormattingEnabled
+    };
+}
+export default Toolbar;