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

package/dist/esm/plugins/Break/createExitBreakPlugin.js

@@ -0,0 +1,16 @@
+import { createExitBreakPlugin as createDefaultExitBreakPlugin } from '@udecode/plate-break';
+export const createExitBreakPlugin = ()=>createDefaultExitBreakPlugin({
+        options: {
+            rules: []
+        },
+        then: (editor)=>{
+            const rules = editor.plugins.flatMap((p)=>{
+                return p.exitBreak || [];
+            });
+            return {
+                options: {
+                    rules
+                }
+            };
+        }
+    });

package/dist/esm/plugins/Break/createExitBreakPlugin.test.js

@@ -0,0 +1,32 @@
+import { KEY_EXIT_BREAK } from '@udecode/plate-break';
+import { jsx, createTestEditor, mockPlugin } from '../../test-utils';
+import { createExitBreakPlugin } from './createExitBreakPlugin';
+describe('Exit Break', ()=>{
+    it('derives its config from other plugins', ()=>{
+        const input = jsx("editor", null, jsx("hp", null, jsx("htext", null)));
+        const rules = [
+            {
+                hotkey: 'enter',
+                query: {
+                    allow: 'h1',
+                    end: true,
+                    start: true
+                }
+            }
+        ];
+        const { editor  } = createTestEditor({
+            input,
+            plugins: [
+                mockPlugin({}),
+                mockPlugin({
+                    exitBreak: rules
+                }),
+                createExitBreakPlugin()
+            ]
+        });
+        const outPlugin = editor.pluginsByKey[KEY_EXIT_BREAK];
+        expect(outPlugin.options).toEqual({
+            rules: expect.arrayContaining(rules)
+        });
+    });
+});

package/dist/esm/plugins/Break/createResetNodePlugin.js

@@ -0,0 +1,22 @@
+import { BLOCKS } from '@contentful/rich-text-types';
+import { createResetNodePlugin as createDefaultResetNodePlugin } from '@udecode/plate-reset-node';
+export const createResetNodePlugin = ()=>createDefaultResetNodePlugin({
+        options: {
+            rules: []
+        },
+        then: (editor)=>{
+            const rules = editor.plugins.flatMap((p)=>{
+                return p.resetNode || [];
+            });
+            for (const rule of rules){
+                if (!rule.defaultType) {
+                    rule.defaultType = BLOCKS.PARAGRAPH;
+                }
+            }
+            return {
+                options: {
+                    rules
+                }
+            };
+        }
+    });

package/dist/esm/plugins/Break/createSoftBreakPlugin.js

@@ -0,0 +1,13 @@
+import { createSoftBreakPlugin as createDefaultSoftBreakPlugin } from '@udecode/plate-break';
+export const createSoftBreakPlugin = ()=>createDefaultSoftBreakPlugin({
+        then: (editor)=>{
+            const rules = editor.plugins.flatMap((p)=>{
+                return p.softBreak || [];
+            });
+            return {
+                options: {
+                    rules
+                }
+            };
+        }
+    });

package/dist/esm/plugins/Break/createSoftBreakPlugin.test.js

@@ -0,0 +1,43 @@
+import { KEY_SOFT_BREAK } from '@udecode/plate-break';
+import { jsx, createTestEditor, mockPlugin } from '../../test-utils';
+import { createSoftBreakPlugin } from './createSoftBreakPlugin';
+describe('Soft Break', ()=>{
+    it('derives its config from other plugins', ()=>{
+        const input = jsx("editor", null, jsx("hp", null, jsx("htext", null)));
+        const rules = [
+            {
+                hotkey: 'ctrl+enter',
+                query: {
+                    allow: 'p'
+                }
+            },
+            {
+                hotkey: 'ctrl+enter',
+                query: {
+                    allow: 'h1'
+                }
+            }
+        ];
+        const { editor  } = createTestEditor({
+            input,
+            plugins: [
+                mockPlugin({
+                    softBreak: [
+                        rules[0]
+                    ]
+                }),
+                mockPlugin({}),
+                mockPlugin({
+                    softBreak: [
+                        rules[1]
+                    ]
+                }),
+                createSoftBreakPlugin()
+            ]
+        });
+        const outPlugin = editor.pluginsByKey[KEY_SOFT_BREAK];
+        expect(outPlugin.options).toEqual({
+            rules
+        });
+    });
+});

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

@@ -0,0 +1,3 @@
+export * from './createSoftBreakPlugin';
+export * from './createExitBreakPlugin';
+export * from './createResetNodePlugin';

package/dist/esm/plugins/CommandPalette/components/CommandList.js

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { usePopper } from 'react-popper';
+import { Popover, Stack, SectionHeading, ScreenReaderOnly, Flex } from '@contentful/f36-components';
+import { Portal } from '@contentful/f36-utils';
+import { cx } from 'emotion';
+import { useSdkContext } from '../../../SdkProvider';
+import { useCommandList } from '../hooks/useCommandList';
+import { useCommands } from '../useCommands';
+import styles from './CommandList.styles';
+const Group = ({ commandGroup , selectedItem  })=>React.createElement("section", {
+        key: commandGroup.group
+    }, React.createElement(SectionHeading, {
+        as: "h3",
+        marginBottom: "spacingS",
+        marginTop: "spacingS",
+        marginLeft: "spacingM",
+        marginRight: "spacingM"
+    }, commandGroup.group), commandGroup.commands.map((command)=>React.createElement("button", {
+            key: command.id,
+            id: command.id,
+            className: cx(styles.menuItem, {
+                [styles.menuItemSelected]: command.id === selectedItem
+            }),
+            onClick: command.callback
+        }, command.label)), React.createElement("hr", {
+        className: styles.menuDivider,
+        "aria-orientation": "horizontal"
+    }));
+const Asset = ({ command , selectedItem  })=>React.createElement("button", {
+        key: command.id,
+        id: command.id,
+        className: cx(styles.menuItem, {
+            [styles.menuItemSelected]: command.id === selectedItem
+        }),
+        onClick: command.callback
+    }, React.createElement(Flex, {
+        alignItems: "center",
+        gap: "spacingS"
+    }, command.thumbnail && React.createElement("img", {
+        width: "30",
+        height: "30",
+        src: command.thumbnail,
+        alt: "",
+        className: styles.thumbnail
+    }), React.createElement("span", null, command.label)));
+const Item = ({ command  })=>React.createElement("button", {
+        key: command.id,
+        id: command.id,
+        className: styles.menuItem
+    }, command.label);
+const CommandListItems = ({ commandItems , selectedItem  })=>{
+    return React.createElement(React.Fragment, null, commandItems.map((command)=>{
+        return 'group' in command ? React.createElement(Group, {
+            commandGroup: command,
+            selectedItem: selectedItem
+        }) : command.callback ? React.createElement(Asset, {
+            command: command,
+            selectedItem: selectedItem
+        }) : React.createElement(Item, {
+            command: command
+        });
+    }));
+};
+export const CommandList = ({ query , editor , textContainer  })=>{
+    const sdk = useSdkContext();
+    const popoverContainer = React.useRef(null);
+    const popper = usePopper(textContainer, popoverContainer?.current, {
+        placement: 'bottom-start'
+    });
+    const commandItems = useCommands(sdk, query, editor);
+    const { selectedItem , isOpen  } = useCommandList(commandItems, popoverContainer);
+    if (!commandItems.length) {
+        return null;
+    }
+    return React.createElement("div", {
+        className: styles.container,
+        tabIndex: -1,
+        contentEditable: false
+    }, React.createElement("div", {
+        role: "alert"
+    }, React.createElement(ScreenReaderOnly, null, "Richtext commands. Currently focused item: ", selectedItem, ". Press ", React.createElement("kbd", null, "enter"), " to select, ", React.createElement("kbd", null, "arrows"), " to navigate, ", React.createElement("kbd", null, "escape"), " to close.")), React.createElement(Portal, null, React.createElement("div", {
+        "aria-hidden": true,
+        ref: popoverContainer,
+        className: styles.menuPoper,
+        style: popper.styles.popper,
+        ...popper.attributes.popper
+    }, React.createElement(Popover, {
+        isOpen: isOpen,
+        usePortal: false,
+        autoFocus: false
+    }, React.createElement(Popover.Trigger, null, React.createElement("span", null)), React.createElement(Popover.Content, {
+        className: styles.menuContent,
+        testId: "rich-text-commands"
+    }, React.createElement("header", {
+        className: styles.menuHeader
+    }, React.createElement(SectionHeading, {
+        marginBottom: "none"
+    }, "Richtext commands")), React.createElement("div", {
+        className: styles.menuList,
+        "data-test-id": "rich-text-commands-list"
+    }, React.createElement(CommandListItems, {
+        commandItems: commandItems,
+        selectedItem: selectedItem
+    })), React.createElement("footer", {
+        className: styles.menuFooter
+    }, React.createElement(Stack, {
+        as: "ul",
+        margin: "none",
+        padding: "none",
+        spacing: "spacingS",
+        className: styles.footerList
+    }, React.createElement("li", null, React.createElement("kbd", null, "↑"), React.createElement("kbd", null, "↓"), " to navigate"), React.createElement("li", null, React.createElement("kbd", null, "↵"), " to confirm"), React.createElement("li", null, React.createElement("kbd", null, "esc"), " to close"))))))));
+};

package/dist/esm/plugins/CommandPalette/components/CommandList.styles.js

@@ -0,0 +1,88 @@
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+const styles = {
+    container: css({
+        position: 'absolute',
+        zIndex: tokens.zIndexNotification,
+        fontWeight: tokens.fontWeightNormal,
+        fontStyle: 'normal',
+        fontFamily: tokens.fontStackPrimary,
+        'ul, ol, dl': {
+            listStyle: 'none',
+            marginLeft: 0
+        }
+    }),
+    menuPoper: css({
+        zIndex: tokens.zIndexModal
+    }),
+    menuContent: css({
+        width: '400px',
+        maxHeight: '300px'
+    }),
+    menuList: css({
+        overflow: 'auto',
+        maxHeight: '200px'
+    }),
+    menuItem: css({
+        display: 'block',
+        width: '100%',
+        background: 'none',
+        border: 0,
+        margin: 0,
+        outline: 'none',
+        fontSize: tokens.fontSizeM,
+        lineHeight: tokens.lineHeightM,
+        fontWeight: tokens.fontWeightNormal,
+        position: 'relative',
+        textAlign: 'left',
+        padding: `${tokens.spacingXs} ${tokens.spacingM}`,
+        wordBreak: 'break-word',
+        whiteSpace: 'break-spaces',
+        cursor: 'pointer',
+        hyphens: 'auto',
+        minWidth: '150px',
+        textDecoration: 'none',
+        color: tokens.gray800,
+        '&:hover': {
+            backgroundColor: tokens.gray100
+        },
+        '&:disabled': {
+            opacity: 0.5,
+            cursor: 'auto'
+        }
+    }),
+    menuItemSelected: css({
+        boxShadow: `inset ${tokens.glowPrimary}`,
+        borderRadius: tokens.borderRadiusMedium
+    }),
+    menuDivider: css({
+        border: 'none',
+        width: '100%',
+        height: '1px',
+        background: tokens.gray300,
+        margin: `${tokens.spacingXs} 0`
+    }),
+    menuHeader: css({
+        zIndex: tokens.zIndexDefault,
+        top: 0,
+        backgroundColor: tokens.gray100,
+        padding: tokens.spacingM
+    }),
+    menuFooter: css({
+        position: 'sticky',
+        bottom: 0,
+        backgroundColor: tokens.gray100,
+        padding: tokens.spacingM
+    }),
+    footerList: css({
+        listStyle: 'none',
+        color: tokens.gray600,
+        fontSize: tokens.fontSizeM
+    }),
+    thumbnail: css({
+        width: '30px',
+        height: '30px',
+        objectFit: 'cover'
+    })
+};
+export default styles;

package/dist/esm/plugins/CommandPalette/components/CommandPrompt.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { trimLeadingSlash } from '../utils/trimLeadingSlash';
+import { CommandList } from './CommandList';
+export const CommandPrompt = (props)=>{
+    const query = React.useMemo(()=>trimLeadingSlash(props.text.text), [
+        props.text.text
+    ]);
+    const editor = props.editor;
+    const [textElement, setTextElement] = React.useState();
+    return React.createElement("span", {
+        ref: (e)=>{
+            setTextElement(e);
+        },
+        ...props.attributes
+    }, props.children, React.createElement(CommandList, {
+        query: query,
+        editor: editor,
+        textContainer: textElement
+    }));
+};

package/dist/esm/plugins/CommandPalette/constants.js

@@ -0,0 +1 @@
+export const COMMAND_PROMPT = 'command-prompt';

package/dist/esm/plugins/CommandPalette/createCommandPalettePlugin.js

@@ -0,0 +1,14 @@
+import { CommandPrompt } from './components/CommandPrompt';
+import { COMMAND_PROMPT } from './constants';
+import { createOnKeyDown } from './onKeyDown';
+export const createCommandPalettePlugin = ()=>{
+    return {
+        key: COMMAND_PROMPT,
+        type: COMMAND_PROMPT,
+        isLeaf: true,
+        component: CommandPrompt,
+        handlers: {
+            onKeyDown: createOnKeyDown()
+        }
+    };
+};

package/dist/esm/plugins/CommandPalette/hooks/useCommandList.js

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import isHotkey from 'is-hotkey';
+export const useCommandList = (commandItems, container)=>{
+    const [selectedItem, setSelectedItem] = React.useState(()=>{
+        if (!commandItems.length) {
+            return '';
+        }
+        if ('group' in commandItems[0]) {
+            return commandItems[0].commands[0].id;
+        }
+        return commandItems[0].id;
+    });
+    const [isOpen, setIsOpen] = React.useState(commandItems.length > 0);
+    React.useEffect(()=>{
+        if (!container.current) {
+            return;
+        }
+        const buttons = Array.from(container.current.querySelectorAll('button'));
+        const currBtn = buttons.find((btn)=>btn.id === selectedItem);
+        const currIndex = currBtn ? buttons.indexOf(currBtn) : 0;
+        const shouldSelectFirstBtn = !currBtn && buttons.length;
+        if (shouldSelectFirstBtn) {
+            setSelectedItem(buttons[0].id);
+            buttons[0].scrollIntoView({
+                block: 'nearest',
+                inline: 'start'
+            });
+        }
+        function handleKeyDown(event) {
+            if (isHotkey('up', event)) {
+                event.preventDefault();
+                if (currIndex === 0) {
+                    return;
+                }
+                setSelectedItem(buttons[currIndex - 1].id);
+                buttons[currIndex - 1].scrollIntoView({
+                    block: 'nearest',
+                    inline: 'start'
+                });
+            } else if (isHotkey('down', event)) {
+                event.preventDefault();
+                if (currIndex === buttons.length - 1) {
+                    return;
+                }
+                setSelectedItem(buttons[currIndex + 1].id);
+                buttons[currIndex + 1].scrollIntoView({
+                    block: 'nearest',
+                    inline: 'start'
+                });
+            } else if (isHotkey('enter', event)) {
+                event.preventDefault();
+                if (currBtn) {
+                    setSelectedItem('');
+                    currBtn.click();
+                }
+            }
+        }
+        if (commandItems.length) {
+            window.addEventListener('keydown', handleKeyDown);
+        }
+        return ()=>window.removeEventListener('keydown', handleKeyDown);
+    }, [
+        commandItems,
+        container,
+        selectedItem
+    ]);
+    React.useEffect(()=>{
+        const handleMousedown = (event)=>{
+            if (container.current && !container.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleMousedown);
+        return ()=>{
+            document.removeEventListener('mousedown', handleMousedown);
+        };
+    }, [
+        container
+    ]);
+    return {
+        selectedItem,
+        isOpen
+    };
+};

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

@@ -0,0 +1 @@
+export { createCommandPalettePlugin } from './createCommandPalettePlugin';

package/dist/esm/plugins/CommandPalette/onKeyDown.js

@@ -0,0 +1,36 @@
+import isHotkey from 'is-hotkey';
+import { getRange, getAboveNode, isMarkActive, addMark, removeMark } from '../../internal';
+import { focusEditor } from '../../internal/misc';
+import { COMMAND_PROMPT } from './constants';
+export const createOnKeyDown = ()=>{
+    return (editor)=>{
+        return (event)=>{
+            if (isHotkey('shift?+/', {
+                byKey: true
+            }, event)) {
+                addMark(editor, COMMAND_PROMPT);
+                editor.tracking.onCommandPaletteAction('openRichTextCommandPalette');
+            }
+            const isActive = isMarkActive(editor, COMMAND_PROMPT);
+            if (!isActive) {
+                return;
+            }
+            if (isHotkey('enter', event)) {
+                return event.preventDefault();
+            }
+            const [, path] = getAboveNode(editor);
+            const range = getRange(editor, path);
+            if (isHotkey('backspace', event)) {
+                if (range.focus.offset - range.anchor.offset === 1) {
+                    removeMark(editor, COMMAND_PROMPT, range);
+                }
+            }
+            if (isHotkey('escape', event)) {
+                event.stopPropagation();
+                removeMark(editor, COMMAND_PROMPT, range);
+                editor.tracking.onCommandPaletteAction('cancelRichTextCommandPalette');
+                focusEditor(editor);
+            }
+        };
+    };
+};

package/dist/esm/plugins/CommandPalette/onKeyDown.spec.js

@@ -0,0 +1,40 @@
+import * as internal from '../../internal/transforms';
+import { createTestEditor } from '../../test-utils';
+import { COMMAND_PROMPT } from './constants';
+import { createOnKeyDown } from './onKeyDown';
+jest.mock('../../internal/transforms', ()=>{
+    return {
+        __esModule: true,
+        ...jest.requireActual('../../internal/transforms')
+    };
+});
+describe('onKeyDown', ()=>{
+    const { editor  } = createTestEditor({});
+    const addMark = jest.spyOn(internal, 'addMark');
+    const onCommandPaletteAction = jest.spyOn(editor.tracking, 'onCommandPaletteAction');
+    afterEach(()=>{
+        jest.resetAllMocks();
+    });
+    test.each`
+    layout      | key
+    ${'QUERTY'} | ${{
+        key: '/',
+        which: 191,
+        shiftKey: false
+    }}
+    ${'QWERTZ'} | ${{
+        key: '/',
+        which: 55,
+        shiftKey: true
+    }}
+  `('supports hotKeys for every keyboard layout #{layout}', ({ key  })=>{
+        createOnKeyDown()(editor, {})({
+            type: 'keydown',
+            ...key
+        });
+        expect(addMark).toHaveBeenCalledTimes(1);
+        expect(addMark).toHaveBeenCalledWith(editor, COMMAND_PROMPT);
+        expect(onCommandPaletteAction).toHaveBeenCalledTimes(1);
+        expect(onCommandPaletteAction).toHaveBeenCalledWith('openRichTextCommandPalette');
+    });
+});