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

package/dist/cjs/plugins/Marks/Code.js

@@ -0,0 +1,122 @@
+"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, {
+    ToolbarCodeButton: function() {
+        return ToolbarCodeButton;
+    },
+    ToolbarDropdownCodeButton: function() {
+        return ToolbarDropdownCodeButton;
+    },
+    Code: function() {
+        return Code;
+    },
+    createCodePlugin: function() {
+        return createCodePlugin;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36icons = require("@contentful/f36-icons");
+const _richtexttypes = require("@contentful/rich-text-types");
+const _platebasicmarks = require("@udecode/plate-basic-marks");
+const _emotion = require("emotion");
+const _MarkToolbarButton = require("./components/MarkToolbarButton");
+const _helpers = require("./helpers");
+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 ToolbarCodeButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
+    title: 'Code',
+    mark: _richtexttypes.MARKS.CODE,
+    icon: _react.createElement(_f36icons.CodeIcon, null)
+});
+const ToolbarDropdownCodeButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
+    title: 'Code',
+    mark: _richtexttypes.MARKS.CODE
+});
+const styles = {
+    code: (0, _emotion.css)({
+        fontFamily: 'monospace',
+        fontSize: '.9em'
+    })
+};
+function Code(props) {
+    return _react.createElement("code", {
+        ...props.attributes,
+        className: styles.code
+    }, props.children);
+}
+const createCodePlugin = ()=>(0, _platebasicmarks.createCodePlugin)({
+        type: _richtexttypes.MARKS.CODE,
+        component: Code,
+        options: {
+            hotkey: [
+                'mod+/',
+                'mod+shift+7'
+            ]
+        },
+        handlers: {
+            onKeyDown: (0, _helpers.buildMarkEventHandler)(_richtexttypes.MARKS.CODE)
+        },
+        deserializeHtml: {
+            rules: [
+                {
+                    validNodeName: [
+                        'CODE',
+                        'PRE'
+                    ]
+                },
+                {
+                    validStyle: {
+                        fontFamily: [
+                            'Consolas',
+                            'monospace'
+                        ]
+                    }
+                }
+            ]
+        }
+    });

package/dist/cjs/plugins/Marks/Italic.js

@@ -0,0 +1,114 @@
+"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, {
+    ToolbarItalicButton: function() {
+        return ToolbarItalicButton;
+    },
+    Italic: function() {
+        return Italic;
+    },
+    createItalicPlugin: function() {
+        return createItalicPlugin;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36icons = require("@contentful/f36-icons");
+const _richtexttypes = require("@contentful/rich-text-types");
+const _platebasicmarks = require("@udecode/plate-basic-marks");
+const _emotion = require("emotion");
+const _queries = require("../../internal/queries");
+const _MarkToolbarButton = require("./components/MarkToolbarButton");
+const _helpers = require("./helpers");
+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 ToolbarItalicButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
+    title: 'Italic',
+    mark: _richtexttypes.MARKS.ITALIC,
+    icon: _react.createElement(_f36icons.FormatItalicIcon, null)
+});
+const styles = {
+    italic: (0, _emotion.css)({
+        fontStyle: 'italic'
+    })
+};
+function Italic(props) {
+    return _react.createElement("em", {
+        ...props.attributes,
+        className: styles.italic
+    }, props.children);
+}
+const createItalicPlugin = ()=>(0, _platebasicmarks.createItalicPlugin)({
+        type: _richtexttypes.MARKS.ITALIC,
+        component: Italic,
+        options: {
+            hotkey: [
+                'mod+i'
+            ]
+        },
+        handlers: {
+            onKeyDown: (0, _helpers.buildMarkEventHandler)(_richtexttypes.MARKS.ITALIC)
+        },
+        deserializeHtml: {
+            rules: [
+                {
+                    validNodeName: [
+                        'I',
+                        'EM'
+                    ]
+                },
+                {
+                    validStyle: {
+                        fontStyle: 'italic'
+                    }
+                }
+            ],
+            query: (el)=>{
+                return !(0, _queries.someHtmlElement)(el, (node)=>node.style.fontStyle === 'normal');
+            }
+        }
+    });

package/dist/cjs/plugins/Marks/Subscript.js

@@ -0,0 +1,109 @@
+"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, {
+    ToolbarSubscriptButton: function() {
+        return ToolbarSubscriptButton;
+    },
+    ToolbarDropdownSubscriptButton: function() {
+        return ToolbarDropdownSubscriptButton;
+    },
+    Subscript: function() {
+        return Subscript;
+    },
+    createSubscriptPlugin: function() {
+        return createSubscriptPlugin;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36icons = require("@contentful/f36-icons");
+const _richtexttypes = require("@contentful/rich-text-types");
+const _platebasicmarks = require("@udecode/plate-basic-marks");
+const _emotion = require("emotion");
+const _MarkToolbarButton = require("./components/MarkToolbarButton");
+const _helpers = require("./helpers");
+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 = {
+    subscript: (0, _emotion.css)({
+        verticalAlign: 'sub',
+        fontSize: 'smaller'
+    })
+};
+const ToolbarSubscriptButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
+    title: 'Subscript',
+    mark: _richtexttypes.MARKS.SUBSCRIPT,
+    icon: _react.createElement(_f36icons.SubscriptIcon, {
+        viewBox: "0 0 23 18"
+    })
+});
+const ToolbarDropdownSubscriptButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
+    title: 'Subscript',
+    mark: _richtexttypes.MARKS.SUBSCRIPT
+});
+function Subscript(props) {
+    return _react.createElement("sub", {
+        ...props.attributes,
+        className: styles.subscript
+    }, props.children);
+}
+const createSubscriptPlugin = ()=>(0, _platebasicmarks.createSubscriptPlugin)({
+        type: _richtexttypes.MARKS.SUBSCRIPT,
+        component: Subscript,
+        handlers: {
+            onKeyDown: (0, _helpers.buildMarkEventHandler)(_richtexttypes.MARKS.SUBSCRIPT)
+        },
+        deserializeHtml: {
+            rules: [
+                {
+                    validNodeName: [
+                        'SUB'
+                    ]
+                }
+            ]
+        }
+    });

package/dist/cjs/plugins/Marks/Superscript.js

@@ -0,0 +1,107 @@
+"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, {
+    ToolbarSuperscriptButton: function() {
+        return ToolbarSuperscriptButton;
+    },
+    ToolbarDropdownSuperscriptButton: function() {
+        return ToolbarDropdownSuperscriptButton;
+    },
+    Superscript: function() {
+        return Superscript;
+    },
+    createSuperscriptPlugin: function() {
+        return createSuperscriptPlugin;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36icons = require("@contentful/f36-icons");
+const _richtexttypes = require("@contentful/rich-text-types");
+const _platebasicmarks = require("@udecode/plate-basic-marks");
+const _emotion = require("emotion");
+const _MarkToolbarButton = require("./components/MarkToolbarButton");
+const _helpers = require("./helpers");
+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 = {
+    superscript: (0, _emotion.css)({
+        verticalAlign: 'super',
+        fontSize: 'smaller'
+    })
+};
+const ToolbarSuperscriptButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
+    title: 'Superscript',
+    mark: _richtexttypes.MARKS.SUPERSCRIPT,
+    icon: _react.createElement(_f36icons.SuperscriptIcon, null)
+});
+const ToolbarDropdownSuperscriptButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
+    title: 'Superscript',
+    mark: _richtexttypes.MARKS.SUPERSCRIPT
+});
+function Superscript(props) {
+    return _react.createElement("sup", {
+        ...props.attributes,
+        className: styles.superscript
+    }, props.children);
+}
+const createSuperscriptPlugin = ()=>(0, _platebasicmarks.createSuperscriptPlugin)({
+        type: _richtexttypes.MARKS.SUPERSCRIPT,
+        component: Superscript,
+        handlers: {
+            onKeyDown: (0, _helpers.buildMarkEventHandler)(_richtexttypes.MARKS.SUPERSCRIPT)
+        },
+        deserializeHtml: {
+            rules: [
+                {
+                    validNodeName: [
+                        'SUP'
+                    ]
+                }
+            ]
+        }
+    });

package/dist/cjs/plugins/Marks/Underline.js

@@ -0,0 +1,106 @@
+"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, {
+    ToolbarUnderlineButton: function() {
+        return ToolbarUnderlineButton;
+    },
+    Underline: function() {
+        return Underline;
+    },
+    createUnderlinePlugin: function() {
+        return createUnderlinePlugin;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36icons = require("@contentful/f36-icons");
+const _richtexttypes = require("@contentful/rich-text-types");
+const _platebasicmarks = require("@udecode/plate-basic-marks");
+const _queries = require("../../internal/queries");
+const _MarkToolbarButton = require("./components/MarkToolbarButton");
+const _helpers = require("./helpers");
+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 ToolbarUnderlineButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
+    title: 'Underline',
+    mark: _richtexttypes.MARKS.UNDERLINE,
+    icon: _react.createElement(_f36icons.FormatUnderlinedIcon, null)
+});
+function Underline(props) {
+    return _react.createElement("u", props.attributes, props.children);
+}
+const createUnderlinePlugin = ()=>(0, _platebasicmarks.createUnderlinePlugin)({
+        type: _richtexttypes.MARKS.UNDERLINE,
+        component: Underline,
+        options: {
+            hotkey: [
+                'mod+u'
+            ]
+        },
+        handlers: {
+            onKeyDown: (0, _helpers.buildMarkEventHandler)(_richtexttypes.MARKS.UNDERLINE)
+        },
+        deserializeHtml: {
+            rules: [
+                {
+                    validNodeName: [
+                        'U'
+                    ]
+                },
+                {
+                    validStyle: {
+                        textDecoration: [
+                            'underline'
+                        ]
+                    }
+                }
+            ],
+            query: (el)=>{
+                return !(0, _queries.someHtmlElement)(el, (node)=>node.style.textDecoration === 'none');
+            }
+        }
+    });

package/dist/cjs/plugins/Marks/components/MarkToolbarButton.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createMarkToolbarButton", {
+    enumerable: true,
+    get: function() {
+        return createMarkToolbarButton;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _emotion = require("emotion");
+const _ContentfulEditorProvider = require("../../../ContentfulEditorProvider");
+const _editor = require("../../../helpers/editor");
+const _queries = require("../../../internal/queries");
+const _ToolbarButton = require("../../shared/ToolbarButton");
+const _helpers = require("../helpers");
+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 = {
+    isActive: (0, _emotion.css)({
+        backgroundColor: _f36tokens.default.blue100,
+        color: _f36tokens.default.blue600
+    })
+};
+const createMarkToolbarButton = ({ mark , title , icon  })=>{
+    const Mark = ({ isDisabled  })=>{
+        const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
+        const handleClick = _react.useCallback(()=>{
+            if (!editor?.selection) return;
+            const isActive = (0, _queries.isMarkActive)(editor, mark);
+            editor.tracking.onToolbarAction(isActive ? 'unmark' : 'mark', {
+                markType: mark
+            });
+            (0, _helpers.toggleMarkAndDeactivateConflictingMarks)(editor, mark);
+            (0, _editor.focus)(editor);
+        }, [
+            editor
+        ]);
+        if (!editor) return null;
+        if (!icon) {
+            return _react.createElement(_f36components.Menu.Item, {
+                onClick: handleClick,
+                disabled: isDisabled,
+                className: (0, _emotion.cx)({
+                    [styles.isActive]: (0, _queries.isMarkActive)(editor, mark)
+                }),
+                testId: `${mark}-toolbar-button`
+            }, title);
+        }
+        return _react.createElement(_ToolbarButton.ToolbarButton, {
+            title: title,
+            testId: `${mark}-toolbar-button`,
+            onClick: handleClick,
+            isActive: (0, _queries.isMarkActive)(editor, mark),
+            isDisabled: isDisabled
+        }, icon);
+    };
+    Mark.displayName = mark;
+    return Mark;
+};