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

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");

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

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createOnKeyDown", {
+    enumerable: true,
+    get: function() {
+        return createOnKeyDown;
+    }
+});
+const _ishotkey = _interop_require_default(require("is-hotkey"));
+const _internal = require("../../internal");
+const _misc = require("../../internal/misc");
+const _constants = require("./constants");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const createOnKeyDown = ()=>{
+    return (editor)=>{
+        return (event)=>{
+            if ((0, _ishotkey.default)('shift?+/', {
+                byKey: true
+            }, event)) {
+                (0, _internal.addMark)(editor, _constants.COMMAND_PROMPT);
+                editor.tracking.onCommandPaletteAction('openRichTextCommandPalette');
+            }
+            const isActive = (0, _internal.isMarkActive)(editor, _constants.COMMAND_PROMPT);
+            if (!isActive) {
+                return;
+            }
+            if ((0, _ishotkey.default)('enter', event)) {
+                return event.preventDefault();
+            }
+            const [, path] = (0, _internal.getAboveNode)(editor);
+            const range = (0, _internal.getRange)(editor, path);
+            if ((0, _ishotkey.default)('backspace', event)) {
+                if (range.focus.offset - range.anchor.offset === 1) {
+                    (0, _internal.removeMark)(editor, _constants.COMMAND_PROMPT, range);
+                }
+            }
+            if ((0, _ishotkey.default)('escape', event)) {
+                event.stopPropagation();
+                (0, _internal.removeMark)(editor, _constants.COMMAND_PROMPT, range);
+                editor.tracking.onCommandPaletteAction('cancelRichTextCommandPalette');
+                (0, _misc.focusEditor)(editor);
+            }
+        };
+    };
+};

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

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _transforms = _interop_require_wildcard(require("../../internal/transforms"));
+const _testutils = require("../../test-utils");
+const _constants = require("./constants");
+const _onKeyDown = require("./onKeyDown");
+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;
+}
+jest.mock('../../internal/transforms', ()=>{
+    return {
+        __esModule: true,
+        ...jest.requireActual('../../internal/transforms')
+    };
+});
+describe('onKeyDown', ()=>{
+    const { editor  } = (0, _testutils.createTestEditor)({});
+    const addMark = jest.spyOn(_transforms, '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  })=>{
+        (0, _onKeyDown.createOnKeyDown)()(editor, {})({
+            type: 'keydown',
+            ...key
+        });
+        expect(addMark).toHaveBeenCalledTimes(1);
+        expect(addMark).toHaveBeenCalledWith(editor, _constants.COMMAND_PROMPT);
+        expect(onCommandPaletteAction).toHaveBeenCalledTimes(1);
+        expect(onCommandPaletteAction).toHaveBeenCalledWith('openRichTextCommandPalette');
+    });
+});

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

@@ -0,0 +1,222 @@
+"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, {
+    isCommandPromptPluginEnabled: function() {
+        return isCommandPromptPluginEnabled;
+    },
+    useCommands: function() {
+        return useCommands;
+    }
+});
+const _react = require("react");
+const _richtexttypes = require("@contentful/rich-text-types");
+const _editor = require("../../helpers/editor");
+const _validations = require("../../helpers/validations");
+const _queries = require("../../internal/queries");
+const _transforms = require("../../internal/transforms");
+const _constants = require("./constants");
+const _createInlineEntryNode = require("./utils/createInlineEntryNode");
+const _fetchAssets = require("./utils/fetchAssets");
+const _fetchEntries = require("./utils/fetchEntries");
+const _insertBlock = require("./utils/insertBlock");
+const removeCommand = (editor)=>{
+    const [, path] = (0, _queries.getAboveNode)(editor);
+    const range = (0, _queries.getRange)(editor, path);
+    (0, _transforms.select)(editor, range.focus.path);
+    (0, _transforms.removeMark)(editor, _constants.COMMAND_PROMPT, range);
+    (0, _transforms.deleteText)(editor);
+};
+const removeQuery = (editor)=>{
+    const [, path] = (0, _queries.getAboveNode)(editor);
+    const range = (0, _queries.getRange)(editor, path);
+    if (range.focus.offset - range.anchor.offset > 1) {
+        (0, _transforms.deleteText)(editor, {
+            at: range.focus,
+            distance: range.focus.offset - 1,
+            reverse: true
+        });
+    }
+};
+function isCommandPromptPluginEnabled(sdk) {
+    const inlineAllowed = (0, _validations.isNodeTypeEnabled)(sdk.field, _richtexttypes.INLINES.EMBEDDED_ENTRY);
+    const entriesAllowed = (0, _validations.isNodeTypeEnabled)(sdk.field, _richtexttypes.BLOCKS.EMBEDDED_ENTRY);
+    const assetsAllowed = (0, _validations.isNodeTypeEnabled)(sdk.field, _richtexttypes.BLOCKS.EMBEDDED_ASSET);
+    return {
+        inlineAllowed,
+        entriesAllowed,
+        assetsAllowed
+    };
+}
+function getCommandPermissions(sdk, editor) {
+    const canInsertBlocks = !(0, _editor.isNodeTypeSelected)(editor, _richtexttypes.BLOCKS.TABLE);
+    const { inlineAllowed , entriesAllowed , assetsAllowed  } = isCommandPromptPluginEnabled(sdk);
+    return {
+        inlineAllowed,
+        entriesAllowed: entriesAllowed && canInsertBlocks,
+        assetsAllowed: assetsAllowed && canInsertBlocks
+    };
+}
+const useCommands = (sdk, query, editor)=>{
+    const contentTypes = sdk.space.getCachedContentTypes();
+    const { inlineAllowed , entriesAllowed , assetsAllowed  } = getCommandPermissions(sdk, editor);
+    const [commands, setCommands] = (0, _react.useState)(()=>{
+        const getEmbedEntry = (contentType)=>{
+            return {
+                id: contentType.sys.id,
+                label: `Embed ${contentType.name}`,
+                callback: ()=>{
+                    (0, _fetchEntries.fetchEntries)(sdk, contentType, query).then((entries)=>{
+                        removeQuery(editor);
+                        if (!entries.length) {
+                            setCommands([
+                                {
+                                    id: 'no-results',
+                                    label: 'No results'
+                                }
+                            ]);
+                        } else {
+                            setCommands(entries.map((entry)=>{
+                                return {
+                                    id: `${entry.id}-${entry.displayTitle.replace(/\W+/g, '-').toLowerCase()}`,
+                                    label: entry.displayTitle,
+                                    callback: ()=>{
+                                        removeCommand(editor);
+                                        if (editor.selection) {
+                                            const selection = editor.selection;
+                                            editor.insertSoftBreak();
+                                            (0, _insertBlock.insertBlock)(editor, _richtexttypes.BLOCKS.EMBEDDED_ENTRY, entry.entry);
+                                            (0, _transforms.select)(editor, selection);
+                                            editor.tracking.onCommandPaletteAction('insert', {
+                                                nodeType: _richtexttypes.BLOCKS.EMBEDDED_ENTRY
+                                            });
+                                        }
+                                    }
+                                };
+                            }));
+                        }
+                    });
+                }
+            };
+        };
+        const getEmbedInline = (contentType)=>{
+            return {
+                id: `${contentType.sys.id}-inline`,
+                label: `Embed ${contentType.name} - Inline`,
+                callback: ()=>{
+                    (0, _fetchEntries.fetchEntries)(sdk, contentType, query).then((entries)=>{
+                        removeQuery(editor);
+                        if (!entries.length) {
+                            setCommands([
+                                {
+                                    id: 'no-results',
+                                    label: 'No results'
+                                }
+                            ]);
+                        } else {
+                            setCommands(entries.map((entry)=>{
+                                return {
+                                    id: `${entry.id}-${entry.displayTitle.replace(/\W+/g, '-').toLowerCase()}`,
+                                    label: entry.displayTitle,
+                                    callback: ()=>{
+                                        const inlineNode = (0, _createInlineEntryNode.createInlineEntryNode)(entry.id);
+                                        removeCommand(editor);
+                                        (0, _transforms.insertNodes)(editor, inlineNode);
+                                        editor.insertText('');
+                                        editor.tracking.onCommandPaletteAction('insert', {
+                                            nodeType: _richtexttypes.INLINES.EMBEDDED_ENTRY
+                                        });
+                                    }
+                                };
+                            }));
+                        }
+                    });
+                }
+            };
+        };
+        const contentTypeCommands = entriesAllowed || inlineAllowed ? contentTypes.map((contentType)=>{
+            return {
+                group: contentType.name,
+                commands: entriesAllowed && inlineAllowed ? [
+                    getEmbedEntry(contentType),
+                    getEmbedInline(contentType)
+                ] : entriesAllowed ? [
+                    getEmbedEntry(contentType)
+                ] : [
+                    getEmbedInline(contentType)
+                ]
+            };
+        }) : [];
+        if (assetsAllowed) {
+            const assetCommand = {
+                group: 'Assets',
+                commands: [
+                    {
+                        id: 'embed-asset',
+                        label: 'Embed Asset',
+                        callback: ()=>{
+                            (0, _fetchAssets.fetchAssets)(sdk, query).then((assets)=>{
+                                removeQuery(editor);
+                                if (!assets.length) {
+                                    setCommands([
+                                        {
+                                            id: 'no-results',
+                                            label: 'No results'
+                                        }
+                                    ]);
+                                } else {
+                                    setCommands(assets.map((asset)=>{
+                                        return {
+                                            id: `${asset.id}-${asset.displayTitle.replace(/\W+/g, '-').toLowerCase()}`,
+                                            label: asset.displayTitle,
+                                            thumbnail: asset.thumbnail,
+                                            callback: ()=>{
+                                                removeCommand(editor);
+                                                if (editor.selection) {
+                                                    const selection = editor.selection;
+                                                    editor.insertSoftBreak();
+                                                    (0, _insertBlock.insertBlock)(editor, _richtexttypes.BLOCKS.EMBEDDED_ASSET, asset.entity);
+                                                    (0, _transforms.select)(editor, selection);
+                                                    editor.tracking.onCommandPaletteAction('insert', {
+                                                        nodeType: _richtexttypes.BLOCKS.EMBEDDED_ASSET
+                                                    });
+                                                }
+                                            }
+                                        };
+                                    }));
+                                }
+                            });
+                        }
+                    }
+                ]
+            };
+            return [
+                ...contentTypeCommands,
+                assetCommand
+            ];
+        }
+        return contentTypeCommands;
+    });
+    return query ? commands.reduce((list, nextItem)=>{
+        if ('group' in nextItem) {
+            const subcommands = nextItem.commands.filter((command)=>{
+                return command.label.toLowerCase().includes(query.toLowerCase());
+            });
+            if (subcommands.length > 0) {
+                list.push(nextItem);
+            }
+        } else {
+            if (nextItem.label.toLowerCase().includes(query.toLowerCase())) {
+                list.push(nextItem);
+            }
+        }
+        return list;
+    }, []) : commands;
+};

package/dist/cjs/plugins/CommandPalette/utils/createInlineEntryNode.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createInlineEntryNode", {
+    enumerable: true,
+    get: function() {
+        return createInlineEntryNode;
+    }
+});
+const _richtexttypes = require("@contentful/rich-text-types");
+function createInlineEntryNode(id) {
+    return {
+        type: _richtexttypes.INLINES.EMBEDDED_ENTRY,
+        children: [
+            {
+                text: ''
+            }
+        ],
+        data: {
+            target: {
+                sys: {
+                    id,
+                    type: 'Link',
+                    linkType: 'Entry'
+                }
+            }
+        }
+    };
+}

package/dist/cjs/plugins/CommandPalette/utils/fetchAssets.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "fetchAssets", {
+    enumerable: true,
+    get: function() {
+        return fetchAssets;
+    }
+});
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+async function fetchAssets(sdk, query) {
+    const assets = await sdk.space.getAssets({
+        query
+    });
+    return assets.items.map((asset)=>{
+        const displayTitle = _fieldeditorshared.entityHelpers.getAssetTitle({
+            asset,
+            localeCode: sdk.field.locale,
+            defaultLocaleCode: sdk.locales.default,
+            defaultTitle: 'Untitled'
+        });
+        return {
+            contentTypeName: 'Asset',
+            displayTitle,
+            id: asset.sys.id,
+            entity: asset,
+            thumbnail: asset.fields.file && asset.fields.file[sdk.field.locale] && `${asset.fields.file[sdk.field.locale].url}?h=30`
+        };
+    });
+}