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

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createResetNodePlugin", {
+    enumerable: true,
+    get: function() {
+        return createResetNodePlugin;
+    }
+});
+const _richtexttypes = require("@contentful/rich-text-types");
+const _plateresetnode = require("@udecode/plate-reset-node");
+const createResetNodePlugin = ()=>(0, _plateresetnode.createResetNodePlugin)({
+        options: {
+            rules: []
+        },
+        then: (editor)=>{
+            const rules = editor.plugins.flatMap((p)=>{
+                return p.resetNode || [];
+            });
+            for (const rule of rules){
+                if (!rule.defaultType) {
+                    rule.defaultType = _richtexttypes.BLOCKS.PARAGRAPH;
+                }
+            }
+            return {
+                options: {
+                    rules
+                }
+            };
+        }
+    });

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createSoftBreakPlugin", {
+    enumerable: true,
+    get: function() {
+        return createSoftBreakPlugin;
+    }
+});
+const _platebreak = require("@udecode/plate-break");
+const createSoftBreakPlugin = ()=>(0, _platebreak.createSoftBreakPlugin)({
+        then: (editor)=>{
+            const rules = editor.plugins.flatMap((p)=>{
+                return p.softBreak || [];
+            });
+            return {
+                options: {
+                    rules
+                }
+            };
+        }
+    });

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./createSoftBreakPlugin"), exports);
+_export_star(require("./createExitBreakPlugin"), exports);
+_export_star(require("./createResetNodePlugin"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

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

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CommandList", {
+    enumerable: true,
+    get: function() {
+        return CommandList;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _reactpopper = require("react-popper");
+const _f36components = require("@contentful/f36-components");
+const _f36utils = require("@contentful/f36-utils");
+const _emotion = require("emotion");
+const _SdkProvider = require("../../../SdkProvider");
+const _useCommandList = require("../hooks/useCommandList");
+const _useCommands = require("../useCommands");
+const _CommandListstyles = _interop_require_default(require("./CommandList.styles"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const Group = ({ commandGroup , selectedItem  })=>_react.createElement("section", {
+        key: commandGroup.group
+    }, _react.createElement(_f36components.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: (0, _emotion.cx)(_CommandListstyles.default.menuItem, {
+                [_CommandListstyles.default.menuItemSelected]: command.id === selectedItem
+            }),
+            onClick: command.callback
+        }, command.label)), _react.createElement("hr", {
+        className: _CommandListstyles.default.menuDivider,
+        "aria-orientation": "horizontal"
+    }));
+const Asset = ({ command , selectedItem  })=>_react.createElement("button", {
+        key: command.id,
+        id: command.id,
+        className: (0, _emotion.cx)(_CommandListstyles.default.menuItem, {
+            [_CommandListstyles.default.menuItemSelected]: command.id === selectedItem
+        }),
+        onClick: command.callback
+    }, _react.createElement(_f36components.Flex, {
+        alignItems: "center",
+        gap: "spacingS"
+    }, command.thumbnail && _react.createElement("img", {
+        width: "30",
+        height: "30",
+        src: command.thumbnail,
+        alt: "",
+        className: _CommandListstyles.default.thumbnail
+    }), _react.createElement("span", null, command.label)));
+const Item = ({ command  })=>_react.createElement("button", {
+        key: command.id,
+        id: command.id,
+        className: _CommandListstyles.default.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
+        });
+    }));
+};
+const CommandList = ({ query , editor , textContainer  })=>{
+    const sdk = (0, _SdkProvider.useSdkContext)();
+    const popoverContainer = _react.useRef(null);
+    const popper = (0, _reactpopper.usePopper)(textContainer, popoverContainer?.current, {
+        placement: 'bottom-start'
+    });
+    const commandItems = (0, _useCommands.useCommands)(sdk, query, editor);
+    const { selectedItem , isOpen  } = (0, _useCommandList.useCommandList)(commandItems, popoverContainer);
+    if (!commandItems.length) {
+        return null;
+    }
+    return _react.createElement("div", {
+        className: _CommandListstyles.default.container,
+        tabIndex: -1,
+        contentEditable: false
+    }, _react.createElement("div", {
+        role: "alert"
+    }, _react.createElement(_f36components.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(_f36utils.Portal, null, _react.createElement("div", {
+        "aria-hidden": true,
+        ref: popoverContainer,
+        className: _CommandListstyles.default.menuPoper,
+        style: popper.styles.popper,
+        ...popper.attributes.popper
+    }, _react.createElement(_f36components.Popover, {
+        isOpen: isOpen,
+        usePortal: false,
+        autoFocus: false
+    }, _react.createElement(_f36components.Popover.Trigger, null, _react.createElement("span", null)), _react.createElement(_f36components.Popover.Content, {
+        className: _CommandListstyles.default.menuContent,
+        testId: "rich-text-commands"
+    }, _react.createElement("header", {
+        className: _CommandListstyles.default.menuHeader
+    }, _react.createElement(_f36components.SectionHeading, {
+        marginBottom: "none"
+    }, "Richtext commands")), _react.createElement("div", {
+        className: _CommandListstyles.default.menuList,
+        "data-test-id": "rich-text-commands-list"
+    }, _react.createElement(CommandListItems, {
+        commandItems: commandItems,
+        selectedItem: selectedItem
+    })), _react.createElement("footer", {
+        className: _CommandListstyles.default.menuFooter
+    }, _react.createElement(_f36components.Stack, {
+        as: "ul",
+        margin: "none",
+        padding: "none",
+        spacing: "spacingS",
+        className: _CommandListstyles.default.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/cjs/plugins/CommandPalette/components/CommandList.styles.js

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

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

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CommandPrompt", {
+    enumerable: true,
+    get: function() {
+        return CommandPrompt;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _trimLeadingSlash = require("../utils/trimLeadingSlash");
+const _CommandList = require("./CommandList");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const CommandPrompt = (props)=>{
+    const query = _react.useMemo(()=>(0, _trimLeadingSlash.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.CommandList, {
+        query: query,
+        editor: editor,
+        textContainer: textElement
+    }));
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "COMMAND_PROMPT", {
+    enumerable: true,
+    get: function() {
+        return COMMAND_PROMPT;
+    }
+});
+const COMMAND_PROMPT = 'command-prompt';

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createCommandPalettePlugin", {
+    enumerable: true,
+    get: function() {
+        return createCommandPalettePlugin;
+    }
+});
+const _CommandPrompt = require("./components/CommandPrompt");
+const _constants = require("./constants");
+const _onKeyDown = require("./onKeyDown");
+const createCommandPalettePlugin = ()=>{
+    return {
+        key: _constants.COMMAND_PROMPT,
+        type: _constants.COMMAND_PROMPT,
+        isLeaf: true,
+        component: _CommandPrompt.CommandPrompt,
+        handlers: {
+            onKeyDown: (0, _onKeyDown.createOnKeyDown)()
+        }
+    };
+};

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

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCommandList", {
+    enumerable: true,
+    get: function() {
+        return useCommandList;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _ishotkey = _interop_require_default(require("is-hotkey"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+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 ((0, _ishotkey.default)('up', event)) {
+                event.preventDefault();
+                if (currIndex === 0) {
+                    return;
+                }
+                setSelectedItem(buttons[currIndex - 1].id);
+                buttons[currIndex - 1].scrollIntoView({
+                    block: 'nearest',
+                    inline: 'start'
+                });
+            } else if ((0, _ishotkey.default)('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 ((0, _ishotkey.default)('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/cjs/plugins/CommandPalette/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createCommandPalettePlugin", {
+    enumerable: true,
+    get: function() {
+        return _createCommandPalettePlugin.createCommandPalettePlugin;
+    }
+});
+const _createCommandPalettePlugin = require("./createCommandPalettePlugin");