@contentful/field-editor-rich-text 3.22.3 → 3.23.1

package/dist/cjs/Toolbar/index.js

@@ -25,6 +25,7 @@ const _List = require("../plugins/List");
 const _Bold = require("../plugins/Marks/Bold");
 const _Code = require("../plugins/Marks/Code");
 const _Italic = require("../plugins/Marks/Italic");
+const _Strikethrough = require("../plugins/Marks/Strikethrough");
 const _Subscript = require("../plugins/Marks/Subscript");
 const _Superscript = require("../plugins/Marks/Superscript");
 const _Underline = require("../plugins/Marks/Underline");
@@ -124,9 +125,15 @@ const styles = {
         marginRight: '20px'
     })
 };
+const dropdownMarks = [
+    _richtexttypes.MARKS.SUPERSCRIPT,
+    _richtexttypes.MARKS.SUBSCRIPT,
+    _richtexttypes.MARKS.CODE,
+    _richtexttypes.MARKS.STRIKETHROUGH
+];
 const Dropdown = ({ sdk, isDisabled })=>{
     const editor = (0, _ContentfulEditorProvider.useContentfulEditor)();
-    const isActive = editor && ((0, _queries.isMarkActive)(editor, _richtexttypes.MARKS.SUPERSCRIPT) || (0, _queries.isMarkActive)(editor, _richtexttypes.MARKS.SUBSCRIPT) || (0, _queries.isMarkActive)(editor, _richtexttypes.MARKS.CODE));
+    const isActive = editor && dropdownMarks.some((mark)=>(0, _queries.isMarkActive)(editor, mark));
     return _react.createElement(_f36components.Menu, null, _react.createElement(_f36components.Menu.Trigger, null, _react.createElement("span", null, _react.createElement(_f36components.IconButton, {
         size: "small",
         className: styles.toolbarBtn,
@@ -139,6 +146,8 @@ const Dropdown = ({ sdk, isDisabled })=>{
         isDisabled: isDisabled
     }), (0, _validations.isMarkEnabled)(sdk.field, _richtexttypes.MARKS.SUBSCRIPT) && _react.createElement(_Subscript.ToolbarDropdownSubscriptButton, {
         isDisabled: isDisabled
+    }), (0, _validations.isMarkEnabled)(sdk.field, _richtexttypes.MARKS.STRIKETHROUGH) && _react.createElement(_Strikethrough.ToolbarDropdownStrikethroughButton, {
+        isDisabled: isDisabled
     }), (0, _validations.isMarkEnabled)(sdk.field, _richtexttypes.MARKS.CODE) && _react.createElement(_Code.ToolbarDropdownCodeButton, {
         isDisabled: isDisabled
     })));
@@ -154,7 +163,7 @@ const Toolbar = ({ isDisabled })=>{
     const isBlockquoteSelected = (0, _editor.isNodeTypeSelected)(editor, _richtexttypes.BLOCKS.QUOTE);
     const shouldDisableTables = isDisabled || !canInsertBlocks || isListSelected || isBlockquoteSelected;
     const boldItalicUnderlineAvailable = (0, _validations.isMarkEnabled)(sdk.field, _richtexttypes.MARKS.BOLD) || (0, _validations.isMarkEnabled)(sdk.field, _richtexttypes.MARKS.ITALIC) || (0, _validations.isMarkEnabled)(sdk.field, _richtexttypes.MARKS.UNDERLINE);
-    const dropdownItemsAvailable = (0, _validations.isMarkEnabled)(sdk.field, _richtexttypes.MARKS.SUPERSCRIPT) || (0, _validations.isMarkEnabled)(sdk.field, _richtexttypes.MARKS.SUBSCRIPT) || (0, _validations.isMarkEnabled)(sdk.field, _richtexttypes.MARKS.CODE);
+    const dropdownItemsAvailable = dropdownMarks.some((mark)=>(0, _validations.isMarkEnabled)(sdk.field, mark));
     const shouldShowDropdown = boldItalicUnderlineAvailable && dropdownItemsAvailable;
     return _react.createElement(_f36components.Flex, {
         gap: "spacingS",
@@ -181,6 +190,8 @@ const Toolbar = ({ isDisabled })=>{
         isDisabled: isDisabled
     }), !boldItalicUnderlineAvailable && (0, _validations.isMarkEnabled)(sdk.field, _richtexttypes.MARKS.SUBSCRIPT) && _react.createElement(_Subscript.ToolbarSubscriptButton, {
         isDisabled: isDisabled
+    }), !boldItalicUnderlineAvailable && (0, _validations.isMarkEnabled)(sdk.field, _richtexttypes.MARKS.STRIKETHROUGH) && _react.createElement(_Strikethrough.ToolbarStrikethroughButton, {
+        isDisabled: isDisabled
     }), !boldItalicUnderlineAvailable && (0, _validations.isMarkEnabled)(sdk.field, _richtexttypes.MARKS.CODE) && _react.createElement(_Code.ToolbarCodeButton, {
         isDisabled: isDisabled
     }), shouldShowDropdown && _react.createElement(Dropdown, {

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

@@ -0,0 +1,140 @@
+"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, {
+    Strikethrough: function() {
+        return Strikethrough;
+    },
+    ToolbarDropdownStrikethroughButton: function() {
+        return ToolbarDropdownStrikethroughButton;
+    },
+    ToolbarStrikethroughButton: function() {
+        return ToolbarStrikethroughButton;
+    },
+    createStrikethroughPlugin: function() {
+        return createStrikethroughPlugin;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+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 = {
+        __proto__: null
+    };
+    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 = {
+    strikethrough: (0, _emotion.css)({
+        textDecoration: 'line-through'
+    })
+};
+const ToolbarDropdownStrikethroughButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
+    title: 'Strikethrough',
+    mark: _richtexttypes.MARKS.STRIKETHROUGH
+});
+const ToolbarStrikethroughButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
+    title: 'Strikethrough',
+    mark: _richtexttypes.MARKS.STRIKETHROUGH,
+    icon: _react.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 256 256",
+        width: "18",
+        height: "18"
+    }, _react.createElement("rect", {
+        width: "256",
+        height: "256",
+        fill: "none"
+    }), _react.createElement("line", {
+        x1: "40",
+        y1: "128",
+        x2: "216",
+        y2: "128",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "24"
+    }), _react.createElement("path", {
+        d: "M72,168c0,22.09,25.07,40,56,40s56-17.91,56-40c0-23.77-21.62-33-45.6-40",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "24"
+    }), _react.createElement("path", {
+        d: "M75.11,88c0-22.09,22-40,52.89-40,23,0,40.24,9.87,48,24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "24"
+    }))
+});
+function Strikethrough(props) {
+    return _react.createElement("s", {
+        ...props.attributes,
+        className: styles.strikethrough
+    }, props.children);
+}
+const createStrikethroughPlugin = ()=>(0, _platebasicmarks.createStrikethroughPlugin)({
+        type: _richtexttypes.MARKS.STRIKETHROUGH,
+        component: Strikethrough,
+        handlers: {
+            onKeyDown: (0, _helpers.buildMarkEventHandler)(_richtexttypes.MARKS.STRIKETHROUGH)
+        },
+        deserializeHtml: {
+            rules: [
+                {
+                    validNodeName: [
+                        'S'
+                    ]
+                }
+            ]
+        }
+    });

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

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "createMarksPlugin", {
 const _Bold = require("./Bold");
 const _Code = require("./Code");
 const _Italic = require("./Italic");
+const _Strikethrough = require("./Strikethrough");
 const _Subscript = require("./Subscript");
 const _Superscript = require("./Superscript");
 const _Underline = require("./Underline");
@@ -22,6 +23,7 @@ const createMarksPlugin = ()=>({
             (0, _Italic.createItalicPlugin)(),
             (0, _Underline.createUnderlinePlugin)(),
             (0, _Superscript.createSuperscriptPlugin)(),
-            (0, _Subscript.createSubscriptPlugin)()
+            (0, _Subscript.createSubscriptPlugin)(),
+            (0, _Strikethrough.createStrikethroughPlugin)()
         ]
     });

package/dist/esm/Toolbar/index.js

@@ -15,6 +15,7 @@ import { ToolbarListButton } from '../plugins/List';
 import { ToolbarBoldButton } from '../plugins/Marks/Bold';
 import { ToolbarCodeButton, ToolbarDropdownCodeButton } from '../plugins/Marks/Code';
 import { ToolbarItalicButton } from '../plugins/Marks/Italic';
+import { ToolbarDropdownStrikethroughButton, ToolbarStrikethroughButton } from '../plugins/Marks/Strikethrough';
 import { ToolbarDropdownSubscriptButton, ToolbarSubscriptButton } from '../plugins/Marks/Subscript';
 import { ToolbarDropdownSuperscriptButton, ToolbarSuperscriptButton } from '../plugins/Marks/Superscript';
 import { ToolbarUnderlineButton } from '../plugins/Marks/Underline';
@@ -68,9 +69,15 @@ const styles = {
         marginRight: '20px'
     })
 };
+const dropdownMarks = [
+    MARKS.SUPERSCRIPT,
+    MARKS.SUBSCRIPT,
+    MARKS.CODE,
+    MARKS.STRIKETHROUGH
+];
 const Dropdown = ({ sdk, isDisabled })=>{
     const editor = useContentfulEditor();
-    const isActive = editor && (isMarkActive(editor, MARKS.SUPERSCRIPT) || isMarkActive(editor, MARKS.SUBSCRIPT) || isMarkActive(editor, MARKS.CODE));
+    const isActive = editor && dropdownMarks.some((mark)=>isMarkActive(editor, mark));
     return React.createElement(Menu, null, React.createElement(Menu.Trigger, null, React.createElement("span", null, React.createElement(IconButton, {
         size: "small",
         className: styles.toolbarBtn,
@@ -83,6 +90,8 @@ const Dropdown = ({ sdk, isDisabled })=>{
         isDisabled: isDisabled
     }), isMarkEnabled(sdk.field, MARKS.SUBSCRIPT) && React.createElement(ToolbarDropdownSubscriptButton, {
         isDisabled: isDisabled
+    }), isMarkEnabled(sdk.field, MARKS.STRIKETHROUGH) && React.createElement(ToolbarDropdownStrikethroughButton, {
+        isDisabled: isDisabled
     }), isMarkEnabled(sdk.field, MARKS.CODE) && React.createElement(ToolbarDropdownCodeButton, {
         isDisabled: isDisabled
     })));
@@ -98,7 +107,7 @@ const Toolbar = ({ isDisabled })=>{
     const isBlockquoteSelected = isNodeTypeSelected(editor, BLOCKS.QUOTE);
     const shouldDisableTables = isDisabled || !canInsertBlocks || isListSelected || isBlockquoteSelected;
     const boldItalicUnderlineAvailable = isMarkEnabled(sdk.field, MARKS.BOLD) || isMarkEnabled(sdk.field, MARKS.ITALIC) || isMarkEnabled(sdk.field, MARKS.UNDERLINE);
-    const dropdownItemsAvailable = isMarkEnabled(sdk.field, MARKS.SUPERSCRIPT) || isMarkEnabled(sdk.field, MARKS.SUBSCRIPT) || isMarkEnabled(sdk.field, MARKS.CODE);
+    const dropdownItemsAvailable = dropdownMarks.some((mark)=>isMarkEnabled(sdk.field, mark));
     const shouldShowDropdown = boldItalicUnderlineAvailable && dropdownItemsAvailable;
     return React.createElement(Flex, {
         gap: "spacingS",
@@ -125,6 +134,8 @@ const Toolbar = ({ isDisabled })=>{
         isDisabled: isDisabled
     }), !boldItalicUnderlineAvailable && isMarkEnabled(sdk.field, MARKS.SUBSCRIPT) && React.createElement(ToolbarSubscriptButton, {
         isDisabled: isDisabled
+    }), !boldItalicUnderlineAvailable && isMarkEnabled(sdk.field, MARKS.STRIKETHROUGH) && React.createElement(ToolbarStrikethroughButton, {
+        isDisabled: isDisabled
     }), !boldItalicUnderlineAvailable && isMarkEnabled(sdk.field, MARKS.CODE) && React.createElement(ToolbarCodeButton, {
         isDisabled: isDisabled
     }), shouldShowDropdown && React.createElement(Dropdown, {

package/dist/esm/plugins/Marks/Strikethrough.js

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { MARKS } from '@contentful/rich-text-types';
+import { createStrikethroughPlugin as createDefaultStrikethroughPlugin } from '@udecode/plate-basic-marks';
+import { css } from 'emotion';
+import { createMarkToolbarButton } from './components/MarkToolbarButton';
+import { buildMarkEventHandler } from './helpers';
+const styles = {
+    strikethrough: css({
+        textDecoration: 'line-through'
+    })
+};
+export const ToolbarDropdownStrikethroughButton = createMarkToolbarButton({
+    title: 'Strikethrough',
+    mark: MARKS.STRIKETHROUGH
+});
+export const ToolbarStrikethroughButton = createMarkToolbarButton({
+    title: 'Strikethrough',
+    mark: MARKS.STRIKETHROUGH,
+    icon: React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 256 256",
+        width: "18",
+        height: "18"
+    }, React.createElement("rect", {
+        width: "256",
+        height: "256",
+        fill: "none"
+    }), React.createElement("line", {
+        x1: "40",
+        y1: "128",
+        x2: "216",
+        y2: "128",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "24"
+    }), React.createElement("path", {
+        d: "M72,168c0,22.09,25.07,40,56,40s56-17.91,56-40c0-23.77-21.62-33-45.6-40",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "24"
+    }), React.createElement("path", {
+        d: "M75.11,88c0-22.09,22-40,52.89-40,23,0,40.24,9.87,48,24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "24"
+    }))
+});
+export function Strikethrough(props) {
+    return React.createElement("s", {
+        ...props.attributes,
+        className: styles.strikethrough
+    }, props.children);
+}
+export const createStrikethroughPlugin = ()=>createDefaultStrikethroughPlugin({
+        type: MARKS.STRIKETHROUGH,
+        component: Strikethrough,
+        handlers: {
+            onKeyDown: buildMarkEventHandler(MARKS.STRIKETHROUGH)
+        },
+        deserializeHtml: {
+            rules: [
+                {
+                    validNodeName: [
+                        'S'
+                    ]
+                }
+            ]
+        }
+    });

package/dist/esm/plugins/Marks/index.js

@@ -1,6 +1,7 @@
 import { createBoldPlugin } from './Bold';
 import { createCodePlugin } from './Code';
 import { createItalicPlugin } from './Italic';
+import { createStrikethroughPlugin } from './Strikethrough';
 import { createSubscriptPlugin } from './Subscript';
 import { createSuperscriptPlugin } from './Superscript';
 import { createUnderlinePlugin } from './Underline';
@@ -12,6 +13,7 @@ export const createMarksPlugin = ()=>({
             createItalicPlugin(),
             createUnderlinePlugin(),
             createSuperscriptPlugin(),
-            createSubscriptPlugin()
+            createSubscriptPlugin(),
+            createStrikethroughPlugin()
         ]
     });

package/dist/types/internal/types/editor.d.ts

@@ -15,6 +15,7 @@ export interface Text extends p.TText {
     [MARKS.UNDERLINE]?: boolean;
     [MARKS.SUPERSCRIPT]?: boolean;
     [MARKS.SUBSCRIPT]?: boolean;
+    [MARKS.STRIKETHROUGH]?: boolean;
 }
 export interface Element extends p.TElement {
     type: string;

package/dist/types/plugins/Marks/Strikethrough.d.ts

@@ -0,0 +1,16 @@
+import { MARKS } from '@contentful/rich-text-types';
+import { PlatePlugin, RenderLeafProps } from '../../internal/types';
+export declare const ToolbarDropdownStrikethroughButton: {
+    ({ isDisabled }: {
+        isDisabled?: boolean | undefined;
+    }): JSX.Element | null;
+    displayName: MARKS;
+};
+export declare const ToolbarStrikethroughButton: {
+    ({ isDisabled }: {
+        isDisabled?: boolean | undefined;
+    }): JSX.Element | null;
+    displayName: MARKS;
+};
+export declare function Strikethrough(props: RenderLeafProps): JSX.Element;
+export declare const createStrikethroughPlugin: () => PlatePlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-rich-text",
-  "version": "3.22.3",
+  "version": "3.23.1",
   "source": "./src/index.tsx",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -47,7 +47,7 @@
     "@contentful/field-editor-reference": "^5.28.2",
     "@contentful/field-editor-shared": "^1.5.2",
     "@contentful/rich-text-plain-text-renderer": "^16.0.4",
-    "@contentful/rich-text-types": "16.3.0",
+    "@contentful/rich-text-types": "16.5.1",
     "@popperjs/core": "^2.11.5",
     "@udecode/plate-basic-marks": "30.1.2",
     "@udecode/plate-break": "30.1.2",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "4ec14a5b5611b2bfa17bfa10b4ac5942c2c25406"
+  "gitHead": "458ec5b34c840c2dc8cda3c4878ff8a2c31f08c3"
 }