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

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

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { HorizontalRuleIcon } from '@contentful/f36-icons';
+import tokens from '@contentful/f36-tokens';
+import { BLOCKS } from '@contentful/rich-text-types';
+import { css, cx } from 'emotion';
+import * as Slate from 'slate-react';
+import { useContentfulEditor } from '../../ContentfulEditorProvider';
+import { getNodeEntryFromSelection, isBlockSelected, moveToTheNextLine, focus } from '../../helpers/editor';
+import { getText } from '../../internal/queries';
+import { insertNodes, setNodes, removeNodes } from '../../internal/transforms';
+import { ToolbarButton } from '../shared/ToolbarButton';
+const styles = {
+    container: css`
+    margin: 0 0 ${tokens.spacingL};
+  `,
+    hr: css`
+    margin: 0;
+    height: ${tokens.spacingM};
+    background: transparent;
+    position: relative;
+    border: 0;
+    user-select: none;
+    &:hover {
+      cursor: pointer;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 1px;
+      background: ${tokens.gray300};
+      top: 50%;
+    }
+  `,
+    hrSelected: css`
+    &::after {
+      background: ${tokens.colorPrimary};
+      -webkit-box-shadow: 0px 0px 5px ${tokens.colorPrimary};
+      box-shadow: 0px 0px 5px ${tokens.colorPrimary};
+    }
+  `
+};
+export function withHrEvents(editor) {
+    return (event)=>{
+        if (!editor) return;
+        const [, pathToSelectedHr] = getNodeEntryFromSelection(editor, BLOCKS.HR);
+        if (pathToSelectedHr) {
+            const isBackspace = event.key === 'Backspace';
+            const isDelete = event.key === 'Delete';
+            if (isBackspace || isDelete) {
+                event.preventDefault();
+                removeNodes(editor, {
+                    at: pathToSelectedHr
+                });
+            }
+        }
+    };
+}
+export function ToolbarHrButton(props) {
+    const editor = useContentfulEditor();
+    function handleOnClick() {
+        if (!editor?.selection) return;
+        const hr = {
+            type: BLOCKS.HR,
+            data: {},
+            children: [
+                {
+                    text: ''
+                }
+            ],
+            isVoid: true
+        };
+        const hasText = !!getText(editor, editor.selection.focus.path);
+        hasText ? insertNodes(editor, hr) : setNodes(editor, hr);
+        moveToTheNextLine(editor);
+        focus(editor);
+    }
+    if (!editor) return null;
+    return React.createElement(ToolbarButton, {
+        title: "HR",
+        isDisabled: props.isDisabled,
+        onClick: handleOnClick,
+        testId: "hr-toolbar-button",
+        isActive: isBlockSelected(editor, BLOCKS.HR)
+    }, React.createElement(HorizontalRuleIcon, null));
+}
+export function Hr(props) {
+    const isSelected = Slate.useSelected();
+    const isFocused = Slate.useFocused();
+    return React.createElement("div", {
+        ...props.attributes,
+        className: styles.container,
+        "data-void-element": BLOCKS.HR
+    }, React.createElement("div", {
+        draggable: true,
+        contentEditable: false
+    }, React.createElement("hr", {
+        className: cx(styles.hr, isSelected && isFocused ? styles.hrSelected : undefined)
+    })), props.children);
+}
+export const createHrPlugin = ()=>({
+        key: BLOCKS.HR,
+        type: BLOCKS.HR,
+        isVoid: true,
+        isElement: true,
+        component: Hr,
+        handlers: {
+            onKeyDown: withHrEvents
+        },
+        deserializeHtml: {
+            rules: [
+                {
+                    validNodeName: [
+                        'HR'
+                    ]
+                },
+                {
+                    validAttribute: {
+                        'data-void-element': BLOCKS.HR
+                    }
+                }
+            ],
+            withoutChildren: true
+        }
+    });

package/dist/esm/plugins/Hyperlink/HyperlinkModal.js

@@ -0,0 +1,220 @@
+import * as React from 'react';
+import { TextLink, Button, FormControl, FormLabel, Select, TextInput, Form, ModalContent, ModalControls } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
+import { EntityProvider } from '@contentful/field-editor-reference';
+import { ModalDialogLauncher } from '@contentful/field-editor-shared';
+import { INLINES } from '@contentful/rich-text-types';
+import { css } from 'emotion';
+import { getNodeEntryFromSelection, insertLink, LINK_TYPES, focus } from '../../helpers/editor';
+import getLinkedContentTypeIdsForNodeType from '../../helpers/getLinkedContentTypeIdsForNodeType';
+import { isNodeTypeEnabled } from '../../helpers/validations';
+import { withoutNormalizing } from '../../internal';
+import { getText, isEditorReadOnly } from '../../internal/queries';
+import { select } from '../../internal/transforms';
+import { FetchingWrappedAssetCard } from '../shared/FetchingWrappedAssetCard';
+import { FetchingWrappedEntryCard } from '../shared/FetchingWrappedEntryCard';
+const styles = {
+    removeSelectionLabel: css`
+    margin-left: ${tokens.spacingS};
+  `
+};
+const SYS_LINK_TYPES = {
+    [INLINES.ENTRY_HYPERLINK]: 'Entry',
+    [INLINES.ASSET_HYPERLINK]: 'Asset'
+};
+const LINK_TYPE_SELECTION_VALUES = {
+    [INLINES.HYPERLINK]: 'URL',
+    [INLINES.ENTRY_HYPERLINK]: 'Entry',
+    [INLINES.ASSET_HYPERLINK]: 'Asset'
+};
+export function HyperlinkModal(props) {
+    const enabledLinkTypes = LINK_TYPES.filter((nodeType)=>isNodeTypeEnabled(props.sdk.field, nodeType));
+    const [defaultLinkType] = enabledLinkTypes;
+    const [linkText, setLinkText] = React.useState(props.linkText ?? '');
+    const [linkType, setLinkType] = React.useState(props.linkType ?? defaultLinkType);
+    const [linkTarget, setLinkTarget] = React.useState(props.linkTarget ?? '');
+    const [linkEntity, setLinkEntity] = React.useState(props.linkEntity ?? null);
+    function isLinkComplete() {
+        const isRegularLink = linkType === INLINES.HYPERLINK;
+        if (isRegularLink) {
+            return !!(linkText && linkTarget);
+        }
+        const entityLinks = Object.keys(SYS_LINK_TYPES);
+        const isEntityLink = entityLinks.includes(linkType);
+        if (isEntityLink) {
+            return !!(linkText && linkEntity);
+        }
+        return false;
+    }
+    function handleOnSubmit(event) {
+        event.preventDefault();
+        props.onClose({
+            linkText,
+            linkType,
+            linkTarget,
+            linkEntity
+        });
+    }
+    function entityToLink(entity) {
+        const { id , type  } = entity.sys;
+        return {
+            sys: {
+                id,
+                type: 'Link',
+                linkType: type
+            }
+        };
+    }
+    async function selectEntry() {
+        const options = {
+            locale: props.sdk.field.locale,
+            contentTypes: getLinkedContentTypeIdsForNodeType(props.sdk.field, INLINES.ENTRY_HYPERLINK)
+        };
+        const entry = await props.sdk.dialogs.selectSingleEntry(options);
+        setLinkTarget('');
+        setLinkEntity(entityToLink(entry));
+    }
+    async function selectAsset() {
+        const options = {
+            locale: props.sdk.field.locale
+        };
+        const asset = await props.sdk.dialogs.selectSingleAsset(options);
+        setLinkTarget('');
+        setLinkEntity(entityToLink(asset));
+    }
+    function resetLinkEntity(event) {
+        event.preventDefault();
+        setLinkEntity(null);
+    }
+    return React.createElement(EntityProvider, {
+        sdk: props.sdk
+    }, React.createElement(React.Fragment, null, React.createElement(ModalContent, null, React.createElement(Form, null, !props.linkType && 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: linkText,
+        onChange: (event)=>setLinkText(event.target.value)
+    })), enabledLinkTypes.length > 1 && React.createElement(FormControl, {
+        id: "link-type"
+    }, React.createElement(FormControl.Label, null, "Link type"), React.createElement(Select, {
+        value: linkType,
+        onChange: (event)=>setLinkType(event.target.value),
+        testId: "link-type-input",
+        isDisabled: props.readonly
+    }, enabledLinkTypes.map((nodeType)=>React.createElement(Select.Option, {
+            key: nodeType,
+            value: nodeType
+        }, LINK_TYPE_SELECTION_VALUES[nodeType])))), linkType === INLINES.HYPERLINK && React.createElement(FormControl, {
+        id: "linkTarget",
+        isRequired: true
+    }, React.createElement(FormControl.Label, null, "Link target"), React.createElement(TextInput, {
+        name: "linkTarget",
+        value: linkTarget,
+        onChange: (event)=>{
+            setLinkEntity(null);
+            setLinkTarget(event.target.value);
+        },
+        testId: "link-target-input",
+        isDisabled: props.readonly
+    }), React.createElement(FormControl.HelpText, null, "A protocol may be required, e.g. https://")), linkType !== INLINES.HYPERLINK && React.createElement("div", null, React.createElement(FormLabel, {
+        isRequired: true,
+        htmlFor: ""
+    }, "Link target", ' '), linkEntity && linkEntity.sys.linkType === SYS_LINK_TYPES[linkType] ? React.createElement(React.Fragment, null, !props.readonly && React.createElement(TextLink, {
+        testId: "entity-selection-link",
+        onClick: resetLinkEntity,
+        className: styles.removeSelectionLabel
+    }, "Remove selection"), React.createElement("div", null, linkType === INLINES.ENTRY_HYPERLINK && React.createElement(FetchingWrappedEntryCard, {
+        sdk: props.sdk,
+        locale: props.sdk.field.locale,
+        entryId: linkEntity.sys.id,
+        isDisabled: true,
+        isSelected: false
+    }), linkType === INLINES.ASSET_HYPERLINK && React.createElement(FetchingWrappedAssetCard, {
+        sdk: props.sdk,
+        locale: props.sdk.field.locale,
+        assetId: linkEntity.sys.id,
+        isDisabled: true,
+        isSelected: false
+    }))) : React.createElement("div", null, linkType === INLINES.ENTRY_HYPERLINK && React.createElement(TextLink, {
+        testId: "entity-selection-link",
+        onClick: selectEntry
+    }, "Select entry"), linkType === INLINES.ASSET_HYPERLINK && React.createElement(TextLink, {
+        testId: "entity-selection-link",
+        onClick: selectAsset
+    }, "Select asset"))))), React.createElement(ModalControls, null, React.createElement(Button, {
+        type: "button",
+        onClick: ()=>props.onClose(null),
+        variant: "secondary",
+        testId: "cancel-cta",
+        size: "small"
+    }, "Cancel"), React.createElement(Button, {
+        type: "submit",
+        variant: "positive",
+        size: "small",
+        isDisabled: props.readonly || !isLinkComplete(),
+        onClick: handleOnSubmit,
+        testId: "confirm-cta"
+    }, props.linkType ? 'Update' : 'Insert'))));
+}
+export async function addOrEditLink(editor, sdk, logAction, targetPath) {
+    const isReadOnly = isEditorReadOnly(editor);
+    const selectionBeforeBlur = editor.selection ? {
+        ...editor.selection
+    } : undefined;
+    if (!targetPath && !selectionBeforeBlur) return;
+    let linkType;
+    let linkText;
+    let linkTarget;
+    let linkEntity;
+    const [node, path] = getNodeEntryFromSelection(editor, LINK_TYPES, targetPath);
+    if (node && path) {
+        linkType = node.type;
+        linkText = getText(editor, path);
+        linkTarget = node.data.uri || '';
+        linkEntity = node.data.target;
+    }
+    const selectionAfterFocus = targetPath ?? selectionBeforeBlur;
+    const currentLinkText = linkText || (editor.selection ? getText(editor, editor.selection) : '');
+    const isEditing = Boolean(node && path);
+    logAction(isEditing ? 'openEditHyperlinkDialog' : 'openCreateHyperlinkDialog');
+    const data = await ModalDialogLauncher.openDialog({
+        title: isEditing ? 'Edit hyperlink' : 'Insert hyperlink',
+        width: 'large',
+        shouldCloseOnEscapePress: true,
+        shouldCloseOnOverlayClick: true,
+        allowHeightOverflow: true
+    }, ({ onClose  })=>{
+        return React.createElement(HyperlinkModal, {
+            linkTarget: linkTarget,
+            linkText: currentLinkText,
+            linkType: linkType,
+            linkEntity: linkEntity,
+            onClose: onClose,
+            sdk: sdk,
+            readonly: isReadOnly
+        });
+    });
+    select(editor, selectionAfterFocus);
+    if (!data) {
+        focus(editor);
+        logAction(isEditing ? 'cancelEditHyperlinkDialog' : 'cancelCreateHyperlinkDialog');
+        return;
+    }
+    const { linkText: text , linkTarget: url , linkType: type , linkEntity: target  } = data;
+    withoutNormalizing(editor, ()=>{
+        insertLink(editor, {
+            text,
+            url,
+            type,
+            target,
+            path
+        });
+    });
+    logAction(isEditing ? 'edit' : 'insert', {
+        nodeType: type,
+        linkType: target?.sys.linkType ?? 'uri'
+    });
+    focus(editor);
+}

package/dist/esm/plugins/Hyperlink/__tests__/createHyperlinkPlugin.test.js

@@ -0,0 +1,21 @@
+import { assertOutput, jsx } from '../../../test-utils';
+describe('normalization', ()=>{
+    it('removes empty links from the document structure', ()=>{
+        const input = jsx("editor", null, jsx("hp", null, jsx("htext", null, "link"), jsx("hlink", {
+            uri: "https://link.com"
+        })), jsx("hp", null, jsx("htext", null, "asset"), jsx("hlink", {
+            asset: "asset-id"
+        })), jsx("hp", null, jsx("htext", null, "entry"), jsx("hlink", {
+            entry: "entry-id"
+        })), jsx("hp", null, jsx("htext", null, "explicit empty link"), jsx("hlink", {
+            uri: "https://link.com"
+        }, '')), jsx("hp", null, jsx("htext", null, "link with empty space"), jsx("hlink", {
+            uri: "https://link.com"
+        }, " ")));
+        const expected = jsx("editor", null, jsx("hp", null, jsx("htext", null, "link")), jsx("hp", null, jsx("htext", null, "asset")), jsx("hp", null, jsx("htext", null, "entry")), jsx("hp", null, jsx("htext", null, "explicit empty link")), jsx("hp", null, jsx("htext", null, "link with empty space")));
+        assertOutput({
+            input,
+            expected
+        });
+    });
+});

package/dist/esm/plugins/Hyperlink/components/EntityHyperlink.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { Tooltip, TextLink } from '@contentful/f36-components';
+import { useContentfulEditor } from '../../../ContentfulEditorProvider';
+import { fromDOMPoint } from '../../../internal';
+import { useSdkContext } from '../../../SdkProvider';
+import { useLinkTracking } from '../../links-tracking';
+import { addOrEditLink } from '../HyperlinkModal';
+import { useEntityInfo } from '../useEntityInfo';
+import { styles } from './styles';
+export function EntityHyperlink(props) {
+    const editor = useContentfulEditor();
+    const sdk = useSdkContext();
+    const { target  } = props.element.data;
+    const { onEntityFetchComplete  } = useLinkTracking();
+    const tooltipContent = useEntityInfo({
+        target,
+        sdk,
+        onEntityFetchComplete
+    });
+    if (!target) return null;
+    function handleClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!editor) return;
+        const p = fromDOMPoint(editor, [
+            event.target,
+            0
+        ]);
+        if (p) {
+            addOrEditLink(editor, sdk, editor.tracking.onViewportAction, p.path);
+        }
+    }
+    return React.createElement(Tooltip, {
+        content: tooltipContent,
+        targetWrapperClassName: styles.hyperlinkWrapper,
+        placement: "bottom",
+        maxWidth: "auto"
+    }, React.createElement(TextLink, {
+        as: "a",
+        onClick: handleClick,
+        className: styles.hyperlink,
+        "data-link-type": target.sys.linkType,
+        "data-link-id": target.sys.id
+    }, props.children));
+}

package/dist/esm/plugins/Hyperlink/components/ToolbarHyperlinkButton.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { LinkIcon } from '@contentful/f36-icons';
+import { useContentfulEditor } from '../../../ContentfulEditorProvider';
+import { isLinkActive, unwrapLink } from '../../../helpers/editor';
+import { useSdkContext } from '../../../SdkProvider';
+import { ToolbarButton } from '../../shared/ToolbarButton';
+import { addOrEditLink } from '../HyperlinkModal';
+export function ToolbarHyperlinkButton(props) {
+    const editor = useContentfulEditor();
+    const isActive = !!(editor && isLinkActive(editor));
+    const sdk = useSdkContext();
+    async function handleClick() {
+        if (!editor) return;
+        if (isActive) {
+            unwrapLink(editor);
+            editor.tracking.onToolbarAction('unlinkHyperlinks');
+        } else {
+            addOrEditLink(editor, sdk, editor.tracking.onToolbarAction);
+        }
+    }
+    if (!editor) return null;
+    return React.createElement(ToolbarButton, {
+        title: "Hyperlink",
+        testId: "hyperlink-toolbar-button",
+        onClick: handleClick,
+        isActive: isActive,
+        isDisabled: props.isDisabled
+    }, React.createElement(LinkIcon, null));
+}

package/dist/esm/plugins/Hyperlink/components/UrlHyperlink.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Tooltip, TextLink } from '@contentful/f36-components';
+import { useContentfulEditor } from '../../../ContentfulEditorProvider';
+import { fromDOMPoint } from '../../../internal';
+import { useSdkContext } from '../../../SdkProvider';
+import { addOrEditLink } from '../HyperlinkModal';
+import { styles } from './styles';
+export function UrlHyperlink(props) {
+    const editor = useContentfulEditor();
+    const sdk = useSdkContext();
+    const { uri  } = props.element.data;
+    function handleClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!editor) return;
+        const p = fromDOMPoint(editor, [
+            event.target,
+            0
+        ], {
+            exactMatch: false,
+            suppressThrow: false
+        });
+        addOrEditLink(editor, sdk, editor.tracking.onViewportAction, p?.path);
+    }
+    return React.createElement(Tooltip, {
+        content: uri,
+        targetWrapperClassName: styles.hyperlinkWrapper,
+        placement: "bottom",
+        maxWidth: "auto"
+    }, React.createElement(TextLink, {
+        as: "a",
+        href: uri,
+        rel: "noopener noreferrer",
+        onClick: handleClick,
+        className: styles.hyperlink
+    }, props.children));
+}

package/dist/esm/plugins/Hyperlink/components/styles.js

@@ -0,0 +1,21 @@
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+export const styles = {
+    hyperlinkWrapper: css({
+        display: 'inline',
+        position: 'static',
+        a: {
+            fontSize: 'inherit !important'
+        }
+    }),
+    hyperlink: css({
+        fontSize: 'inherit !important',
+        display: 'inline !important',
+        '&:hover': {
+            fill: tokens.gray900
+        },
+        '&:focus': {
+            fill: tokens.gray900
+        }
+    })
+};

package/dist/esm/plugins/Hyperlink/createHyperlinkPlugin.js

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { INLINES } from '@contentful/rich-text-types';
+import isHotkey from 'is-hotkey';
+import { isLinkActive, unwrapLink } from '../../helpers/editor';
+import { transformRemove } from '../../helpers/transformers';
+import { EntityHyperlink } from './components/EntityHyperlink';
+import { UrlHyperlink } from './components/UrlHyperlink';
+import { addOrEditLink } from './HyperlinkModal';
+import { hasText } from './utils';
+const isAnchor = (element)=>element.nodeName === 'A' && !!element.getAttribute('href') && element.getAttribute('href') !== '#';
+const isEntryAnchor = (element)=>element.nodeName === 'A' && element.getAttribute('data-link-type') === 'Entry';
+const isAssetAnchor = (element)=>element.nodeName === 'A' && element.getAttribute('data-link-type') === 'Asset';
+const buildHyperlinkEventHandler = (sdk)=>(editor, { options: { hotkey  }  })=>{
+        return (event)=>{
+            if (!editor.selection) {
+                return;
+            }
+            if (hotkey && !isHotkey(hotkey, event)) {
+                return;
+            }
+            if (isLinkActive(editor)) {
+                unwrapLink(editor);
+                editor.tracking.onShortcutAction('unlinkHyperlinks');
+            } else {
+                addOrEditLink(editor, sdk, editor.tracking.onShortcutAction);
+            }
+        };
+    };
+const getNodeOfType = (type)=>(el, node)=>({
+            type,
+            children: node.children,
+            data: type === INLINES.HYPERLINK ? {
+                uri: el.getAttribute('href')
+            } : {
+                target: {
+                    sys: {
+                        id: el.getAttribute('data-link-id'),
+                        linkType: el.getAttribute('data-link-type'),
+                        type: 'Link'
+                    }
+                }
+            }
+        });
+export const createHyperlinkPlugin = (sdk)=>{
+    const common = {
+        isElement: true,
+        isInline: true
+    };
+    return {
+        key: 'HyperlinkPlugin',
+        options: {
+            hotkey: 'mod+k'
+        },
+        handlers: {
+            onKeyDown: buildHyperlinkEventHandler(sdk)
+        },
+        plugins: [
+            {
+                ...common,
+                key: INLINES.HYPERLINK,
+                type: INLINES.HYPERLINK,
+                component: UrlHyperlink,
+                deserializeHtml: {
+                    rules: [
+                        {
+                            validNodeName: [
+                                'A'
+                            ]
+                        }
+                    ],
+                    query: (el)=>isAnchor(el) && !(isEntryAnchor(el) || isAssetAnchor(el)),
+                    getNode: getNodeOfType(INLINES.HYPERLINK)
+                }
+            },
+            {
+                ...common,
+                key: INLINES.ENTRY_HYPERLINK,
+                type: INLINES.ENTRY_HYPERLINK,
+                component: EntityHyperlink,
+                deserializeHtml: {
+                    rules: [
+                        {
+                            validNodeName: [
+                                'A'
+                            ]
+                        }
+                    ],
+                    query: (el)=>isEntryAnchor(el),
+                    getNode: getNodeOfType(INLINES.ENTRY_HYPERLINK)
+                }
+            },
+            {
+                ...common,
+                key: INLINES.ASSET_HYPERLINK,
+                type: INLINES.ASSET_HYPERLINK,
+                component: EntityHyperlink,
+                deserializeHtml: {
+                    rules: [
+                        {
+                            validNodeName: [
+                                'A'
+                            ]
+                        }
+                    ],
+                    query: (el)=>isAssetAnchor(el),
+                    getNode: getNodeOfType(INLINES.ASSET_HYPERLINK)
+                }
+            }
+        ],
+        normalizer: [
+            {
+                match: {
+                    type: [
+                        INLINES.HYPERLINK,
+                        INLINES.ASSET_HYPERLINK,
+                        INLINES.ENTRY_HYPERLINK
+                    ]
+                },
+                validNode: hasText,
+                transform: transformRemove
+            }
+        ]
+    };
+};

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

@@ -0,0 +1,2 @@
+export { ToolbarHyperlinkButton } from './components/ToolbarHyperlinkButton';
+export { createHyperlinkPlugin } from './createHyperlinkPlugin';