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

package/dist/cjs/plugins/Heading/components/ToolbarHeadingButton.js

@@ -0,0 +1,173 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ToolbarHeadingButton", {
+    enumerable: true,
+    get: function() {
+        return ToolbarHeadingButton;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36icons = require("@contentful/f36-icons");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _richtexttypes = require("@contentful/rich-text-types");
+const _emotion = require("emotion");
+const _ContentfulEditorProvider = require("../../../ContentfulEditorProvider");
+const _editor = require("../../../helpers/editor");
+const _validations = require("../../../helpers/validations");
+const _SdkProvider = require("../../../SdkProvider");
+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 styles = {
+    dropdown: {
+        root: (0, _emotion.css)`
+      font-weight: ${_f36tokens.default.fontWeightDemiBold};
+    `,
+        [_richtexttypes.BLOCKS.PARAGRAPH]: (0, _emotion.css)`
+      font-size: ${_f36tokens.default.fontSizeL};
+    `,
+        [_richtexttypes.BLOCKS.HEADING_1]: (0, _emotion.css)`
+      font-size: 1.625rem;
+    `,
+        [_richtexttypes.BLOCKS.HEADING_2]: (0, _emotion.css)`
+      font-size: 1.4375rem;
+    `,
+        [_richtexttypes.BLOCKS.HEADING_3]: (0, _emotion.css)`
+      font-size: 1.25rem;
+    `,
+        [_richtexttypes.BLOCKS.HEADING_4]: (0, _emotion.css)`
+      font-size: 1.125rem;
+    `,
+        [_richtexttypes.BLOCKS.HEADING_5]: (0, _emotion.css)`
+      font-size: 1rem;
+    `,
+        [_richtexttypes.BLOCKS.HEADING_6]: (0, _emotion.css)`
+      font-size: 0.875rem;
+    `
+    }
+};
+const LABELS = {
+    [_richtexttypes.BLOCKS.PARAGRAPH]: 'Normal text',
+    [_richtexttypes.BLOCKS.HEADING_1]: 'Heading 1',
+    [_richtexttypes.BLOCKS.HEADING_2]: 'Heading 2',
+    [_richtexttypes.BLOCKS.HEADING_3]: 'Heading 3',
+    [_richtexttypes.BLOCKS.HEADING_4]: 'Heading 4',
+    [_richtexttypes.BLOCKS.HEADING_5]: 'Heading 5',
+    [_richtexttypes.BLOCKS.HEADING_6]: 'Heading 6'
+};
+function ToolbarHeadingButton(props) {
+    const sdk = (0, _SdkProvider.useSdkContext)();
+    const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
+    const [isOpen, setOpen] = _react.useState(false);
+    const [selected, setSelected] = _react.useState(_richtexttypes.BLOCKS.PARAGRAPH);
+    _react.useEffect(()=>{
+        if (!editor?.selection) return;
+        const [element] = (0, _editor.getElementFromCurrentSelection)(editor);
+        const type = element.type;
+        setSelected(LABELS[type] ? type : _richtexttypes.BLOCKS.PARAGRAPH);
+    }, [
+        editor?.operations,
+        editor?.selection
+    ]);
+    const [nodeTypesByEnablement, someHeadingsEnabled] = _react.useMemo(()=>{
+        const nodeTypesByEnablement = Object.fromEntries(Object.keys(LABELS).map((nodeType)=>[
+                nodeType,
+                (0, _validations.isNodeTypeEnabled)(sdk.field, nodeType)
+            ]));
+        const someHeadingsEnabled = Object.values(nodeTypesByEnablement).filter(Boolean).length > 0;
+        return [
+            nodeTypesByEnablement,
+            someHeadingsEnabled
+        ];
+    }, [
+        sdk.field
+    ]);
+    function handleOnSelectItem(type) {
+        return (event)=>{
+            event.preventDefault();
+            if (!editor?.selection) return;
+            setSelected(type);
+            setOpen(false);
+            const prevOnChange = editor.onChange;
+            editor.onChange = (...args)=>{
+                (0, _editor.focus)(editor);
+                editor.onChange = prevOnChange;
+                prevOnChange(...args);
+            };
+            const isActive = (0, _editor.isBlockSelected)(editor, type);
+            editor.tracking.onToolbarAction(isActive ? 'remove' : 'insert', {
+                nodeType: type
+            });
+            (0, _editor.toggleElement)(editor, {
+                activeType: type,
+                inactiveType: type
+            });
+        };
+    }
+    if (!editor) return null;
+    return _react.createElement(_f36components.Menu, {
+        isOpen: isOpen,
+        onClose: ()=>setOpen(false)
+    }, _react.createElement(_f36components.Menu.Trigger, null, _react.createElement(_f36components.Button, {
+        size: "small",
+        testId: "toolbar-heading-toggle",
+        variant: "transparent",
+        endIcon: _react.createElement(_f36icons.ChevronDownIcon, null),
+        isDisabled: props.isDisabled,
+        onClick: ()=>someHeadingsEnabled && setOpen(!isOpen)
+    }, LABELS[selected])), _react.createElement(_f36components.Menu.List, {
+        testId: "dropdown-heading-list"
+    }, ' ', Object.keys(LABELS).map((nodeType)=>nodeTypesByEnablement[nodeType] && _react.createElement(_f36components.Menu.Item, {
+            key: nodeType,
+            isInitiallyFocused: selected === nodeType,
+            onClick: handleOnSelectItem(nodeType),
+            testId: `dropdown-option-${nodeType}`,
+            disabled: props.isDisabled
+        }, _react.createElement("span", {
+            className: (0, _emotion.cx)(styles.dropdown.root, styles.dropdown[nodeType])
+        }, LABELS[nodeType]))).filter(Boolean)));
+}

package/dist/cjs/plugins/Heading/createHeadingPlugin.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createHeadingPlugin", {
+    enumerable: true,
+    get: function() {
+        return createHeadingPlugin;
+    }
+});
+const _richtexttypes = require("@contentful/rich-text-types");
+const _ishotkey = _interop_require_default(require("is-hotkey"));
+const _editor = require("../../helpers/editor");
+const _transformers = require("../../helpers/transformers");
+const _queries = require("../../internal/queries");
+const _constants = require("../CommandPalette/constants");
+const _Heading = require("./components/Heading");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const buildHeadingEventHandler = (type)=>(editor, { options: { hotkey  }  })=>(event)=>{
+            if (editor.selection && hotkey && (0, _ishotkey.default)(hotkey, event)) {
+                const isActive = (0, _editor.isBlockSelected)(editor, type);
+                editor.tracking.onShortcutAction(isActive ? 'remove' : 'insert', {
+                    nodeType: type
+                });
+                (0, _editor.toggleElement)(editor, {
+                    activeType: type,
+                    inactiveType: _richtexttypes.BLOCKS.PARAGRAPH
+                });
+            }
+        };
+const createHeadingPlugin = ()=>({
+        key: 'HeadingPlugin',
+        softBreak: [
+            {
+                hotkey: 'shift+enter',
+                query: {
+                    allow: _richtexttypes.HEADINGS
+                }
+            }
+        ],
+        normalizer: [
+            {
+                match: {
+                    type: _richtexttypes.HEADINGS
+                },
+                validChildren: (_, [node])=>(0, _editor.isInlineOrText)(node),
+                transform: {
+                    [_richtexttypes.BLOCKS.PARAGRAPH]: _transformers.transformUnwrap,
+                    default: _transformers.transformLift
+                }
+            }
+        ],
+        then: (editor)=>{
+            return {
+                exitBreak: [
+                    {
+                        hotkey: 'enter',
+                        query: {
+                            allow: _richtexttypes.HEADINGS,
+                            end: true,
+                            start: true,
+                            filter: ([, path])=>!(0, _queries.getAboveNode)(editor, {
+                                    at: path,
+                                    match: {
+                                        type: _richtexttypes.BLOCKS.LIST_ITEM
+                                    }
+                                }) && !(0, _queries.isMarkActive)(editor, _constants.COMMAND_PROMPT)
+                        }
+                    }
+                ]
+            };
+        },
+        plugins: _richtexttypes.HEADINGS.map((nodeType, idx)=>{
+            const level = idx + 1;
+            const tagName = `h${level}`;
+            return {
+                key: nodeType,
+                type: nodeType,
+                isElement: true,
+                component: _Heading.HeadingComponents[nodeType],
+                options: {
+                    hotkey: [
+                        `mod+alt+${level}`
+                    ]
+                },
+                handlers: {
+                    onKeyDown: buildHeadingEventHandler(nodeType)
+                },
+                deserializeHtml: {
+                    rules: [
+                        {
+                            validNodeName: tagName.toUpperCase()
+                        }
+                    ]
+                }
+            };
+        })
+    });

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./components/ToolbarHeadingButton"), exports);
+_export_star(require("./createHeadingPlugin"), 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/Hr/index.js

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