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

package/dist/cjs/internal/transforms.js

@@ -0,0 +1,195 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    normalize: function() {
+        return normalize;
+    },
+    setSelection: function() {
+        return setSelection;
+    },
+    select: function() {
+        return select;
+    },
+    moveSelection: function() {
+        return moveSelection;
+    },
+    moveChildren: function() {
+        return moveChildren;
+    },
+    collapseSelection: function() {
+        return collapseSelection;
+    },
+    setNodes: function() {
+        return setNodes;
+    },
+    unsetNodes: function() {
+        return unsetNodes;
+    },
+    insertNodes: function() {
+        return insertNodes;
+    },
+    splitNodes: function() {
+        return splitNodes;
+    },
+    liftNodes: function() {
+        return liftNodes;
+    },
+    unwrapNodes: function() {
+        return unwrapNodes;
+    },
+    wrapNodes: function() {
+        return wrapNodes;
+    },
+    toggleNodeType: function() {
+        return toggleNodeType;
+    },
+    removeMark: function() {
+        return removeMark;
+    },
+    unhangRange: function() {
+        return unhangRange;
+    },
+    toggleMark: function() {
+        return toggleMark;
+    },
+    addMark: function() {
+        return addMark;
+    },
+    insertText: function() {
+        return insertText;
+    },
+    deleteText: function() {
+        return deleteText;
+    },
+    removeNodes: function() {
+        return removeNodes;
+    },
+    moveNodes: function() {
+        return moveNodes;
+    },
+    deleteFragment: function() {
+        return deleteFragment;
+    }
+});
+const _platecore = _interop_require_wildcard(require("@udecode/plate-core"));
+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 normalize = (editor, options = {
+    force: true
+})=>{
+    return _platecore.normalizeEditor(editor, options);
+};
+const setSelection = (editor, props)=>{
+    return _platecore.setSelection(editor, props);
+};
+const select = (editor, location)=>{
+    return _platecore.select(editor, location);
+};
+const moveSelection = (editor, options)=>{
+    return _platecore.moveSelection(editor, options);
+};
+const moveChildren = (editor, options)=>{
+    return _platecore.moveChildren(editor, options);
+};
+const collapseSelection = (editor, options)=>{
+    return _platecore.collapseSelection(editor, options);
+};
+const setNodes = (editor, attrs, opts)=>{
+    _platecore.setNodes(editor, attrs, opts);
+};
+const unsetNodes = (editor, props, options)=>{
+    _platecore.unsetNodes(editor, props, options);
+};
+const insertNodes = (editor, nodes, opts)=>{
+    return _platecore.insertNodes(editor, nodes, opts);
+};
+const splitNodes = (editor, options)=>{
+    return _platecore.splitNodes(editor, options);
+};
+const liftNodes = (editor, options)=>{
+    return _platecore.liftNodes(editor, options);
+};
+const unwrapNodes = (editor, options)=>{
+    return _platecore.unwrapNodes(editor, options);
+};
+const wrapNodes = (editor, element, options)=>{
+    return _platecore.wrapNodes(editor, element, options);
+};
+const toggleNodeType = (editor, options, editorOptions)=>{
+    _platecore.toggleNodeType(editor, options, editorOptions);
+};
+const removeMark = (editor, type, at)=>{
+    _platecore.removeMark(editor, {
+        key: type,
+        at
+    });
+};
+const unhangRange = (editor, range, options)=>{
+    return _platecore.unhangRange(editor, range, options);
+};
+const toggleMark = (editor, options)=>{
+    return _platecore.toggleMark(editor, options);
+};
+const addMark = (editor, type, value = true)=>{
+    _platecore.addMark(editor, type, value);
+};
+const insertText = (editor, text, options)=>{
+    return _platecore.insertText(editor, text, options);
+};
+const deleteText = (editor, opts)=>{
+    _platecore.deleteText(editor, opts);
+};
+const removeNodes = (editor, opts)=>{
+    _platecore.removeNodes(editor, opts);
+};
+const moveNodes = (editor, opts)=>{
+    _platecore.moveNodes(editor, opts);
+};
+const deleteFragment = (editor, options)=>{
+    return _platecore.deleteFragment(editor, options);
+};

package/dist/cjs/internal/types/editor.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/cjs/internal/types/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./editor"), exports);
+_export_star(require("./plugins"), 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/internal/types/plugins.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

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

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

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _platebreak = require("@udecode/plate-break");
+const _testutils = require("../../test-utils");
+const _createExitBreakPlugin = require("./createExitBreakPlugin");
+describe('Exit 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: 'enter',
+                query: {
+                    allow: 'h1',
+                    end: true,
+                    start: true
+                }
+            }
+        ];
+        const { editor  } = (0, _testutils.createTestEditor)({
+            input,
+            plugins: [
+                (0, _testutils.mockPlugin)({}),
+                (0, _testutils.mockPlugin)({
+                    exitBreak: rules
+                }),
+                (0, _createExitBreakPlugin.createExitBreakPlugin)()
+            ]
+        });
+        const outPlugin = editor.pluginsByKey[_platebreak.KEY_EXIT_BREAK];
+        expect(outPlugin.options).toEqual({
+            rules: expect.arrayContaining(rules)
+        });
+    });
+});

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;