@contentful/field-editor-rich-text 4.13.12 → 4.14.0

package/dist/cjs/CharConstraints.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CharConstraints", {
+    enumerable: true,
+    get: function() {
+        return CharConstraints;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+const _emotion = require("emotion");
+const _hooks = require("./internal/hooks");
+const _SdkProvider = require("./SdkProvider");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const styles = {
+    container: (0, _emotion.css)({
+        display: 'flex',
+        justifyContent: 'space-between',
+        fontSize: _f36tokens.default.fontSizeM,
+        marginTop: _f36tokens.default.spacingXs,
+        color: _f36tokens.default.gray700
+    }),
+    counterInvalid: (0, _emotion.css)({
+        color: _f36tokens.default.red600
+    })
+};
+function CharCounter({ checkConstraints }) {
+    const editor = (0, _hooks.usePlateEditorState)();
+    const count = editor.getCharacterCount();
+    const valid = checkConstraints(count);
+    return /*#__PURE__*/ _react.default.createElement("span", {
+        className: (0, _emotion.cx)({
+            [styles.counterInvalid]: !valid
+        })
+    }, count, " characters");
+}
+function CharConstraints() {
+    const sdk = (0, _SdkProvider.useSdkContext)();
+    const { constraints, checkConstraints } = _react.default.useMemo(()=>{
+        const constraints = _fieldeditorshared.ConstraintsUtils.fromFieldValidations(sdk.field.validations, 'RichText');
+        const checkConstraints = _fieldeditorshared.ConstraintsUtils.makeChecker(constraints);
+        return {
+            constraints,
+            checkConstraints
+        };
+    }, [
+        sdk.field.validations
+    ]);
+    return /*#__PURE__*/ _react.default.createElement("div", {
+        className: styles.container
+    }, /*#__PURE__*/ _react.default.createElement(CharCounter, {
+        checkConstraints: checkConstraints
+    }), /*#__PURE__*/ _react.default.createElement(_fieldeditorshared.CharValidation, {
+        constraints: constraints
+    }));
+}

package/dist/cjs/RichTextEditor.js

@@ -24,6 +24,7 @@ const _platecommon = require("@udecode/plate-common");
 const _emotion = require("emotion");
 const _fastdeepequal = /*#__PURE__*/ _interop_require_default(require("fast-deep-equal"));
 const _noop = /*#__PURE__*/ _interop_require_default(require("lodash/noop"));
+const _CharConstraints = require("./CharConstraints");
 const _ContentfulEditorProvider = require("./ContentfulEditorProvider");
 const _editoroverrides = require("./editor-overrides");
 const _toSlateValue = require("./helpers/toSlateValue");
@@ -130,7 +131,7 @@ const ConnectedRichTextEditor = (props)=>{
         className: classNames,
         readOnly: props.isDisabled,
         scrollSelectionIntoView: _editoroverrides.defaultScrollSelectionIntoView
-    }))))));
+    }), props.withCharValidation && /*#__PURE__*/ _react.createElement(_CharConstraints.CharConstraints, null))))));
 };
 const RichTextEditor = (props)=>{
     const { sdk, isInitiallyDisabled, onAction, restrictedMarks, onChange, isDisabled, ...otherProps } = props;
@@ -159,7 +160,8 @@ const RichTextEditor = (props)=>{
             onAction: onAction,
             isDisabled: disabled,
             onChange: setValue,
-            restrictedMarks: restrictedMarks
+            restrictedMarks: restrictedMarks,
+            withCharValidation: props.withCharValidation ?? true
         }));
 };
 const _default = RichTextEditor;

package/dist/cjs/Toolbar/components/ButtonRedo.js

@@ -9,8 +9,7 @@ Object.defineProperty(exports, "ButtonRedo", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-const _f36components = require("@contentful/f36-components");
-const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
+const _f36icons = require("@contentful/f36-icons");
 const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
 const _ToolbarButton = require("../../plugins/shared/ToolbarButton");
 function _interop_require_default(obj) {
@@ -29,9 +28,5 @@ const ButtonRedo = ()=>{
         onClick: onClickHandler,
         isActive: false,
         isDisabled: editor.history.redos.length === 0
-    }, /*#__PURE__*/ _react.default.createElement(_f36components.Icon, {
-        color: _f36tokens.default.gray900
-    }, /*#__PURE__*/ _react.default.createElement("path", {
-        d: "M18.4,10.6C16.55,9 14.15,8 11.5,8C6.85,8 2.92,11.03 1.54,15.22L3.9,16C4.95,12.81 7.95,10.5 11.5,10.5C13.45,10.5 15.23,11.22 16.62,12.38L13,16H22V7L18.4,10.6Z"
-    })));
+    }, /*#__PURE__*/ _react.default.createElement(_f36icons.ArrowArcRightIcon, null));
 };

package/dist/cjs/Toolbar/components/ButtonUndo.js

@@ -9,8 +9,7 @@ Object.defineProperty(exports, "ButtonUndo", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-const _f36components = require("@contentful/f36-components");
-const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
+const _f36icons = require("@contentful/f36-icons");
 const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
 const _ToolbarButton = require("../../plugins/shared/ToolbarButton");
 function _interop_require_default(obj) {
@@ -29,9 +28,5 @@ const ButtonUndo = ()=>{
         onClick: onClickHandler,
         isActive: false,
         isDisabled: editor.history.undos.length === 0
-    }, /*#__PURE__*/ _react.default.createElement(_f36components.Icon, {
-        color: _f36tokens.default.gray900
-    }, /*#__PURE__*/ _react.default.createElement("path", {
-        d: "M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z"
-    })));
+    }, /*#__PURE__*/ _react.default.createElement(_f36icons.ArrowArcLeftIcon, null));
 };

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createCharCounterPlugin", {
+    enumerable: true,
+    get: function() {
+        return createCharCounterPlugin;
+    }
+});
+const _withCharCounter = require("./withCharCounter");
+const createCharCounterPlugin = ()=>({
+        key: 'char-counter',
+        withOverrides: _withCharCounter.withCharCounter
+    });

package/dist/cjs/plugins/CharCounter/utils.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getTextContent", {
+    enumerable: true,
+    get: function() {
+        return getTextContent;
+    }
+});
+const _internal = require("../../internal");
+const _richtexttypes = require("@contentful/rich-text-types");
+const blocks = new Set(Object.values(_richtexttypes.BLOCKS));
+function getTextContent(root) {
+    if ((0, _internal.isText)(root)) {
+        return root.text;
+    }
+    const nodes = root.children;
+    return nodes.reduce((acc, node, index)=>{
+        const text = getTextContent(node);
+        if (!text) {
+            return acc;
+        }
+        const nextNode = nodes[index + 1];
+        if (nextNode && blocks.has(nextNode.type)) {
+            return acc + text + ' ';
+        }
+        return acc + text;
+    }, '');
+}

package/dist/cjs/plugins/CharCounter/utils.spec.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _testutils = require("../../test-utils");
+const _richtextplaintextrenderer = require("@contentful/rich-text-plain-text-renderer");
+const _utils = require("./utils");
+const _contentfulslatejsadapter = require("@contentful/contentful-slatejs-adapter");
+describe('getTextContent', ()=>{
+    const cases = [
+        {
+            title: 'empty document',
+            input: /*#__PURE__*/ (0, _testutils.jsx)("editor", null)
+        },
+        {
+            title: 'list of paragraphs',
+            input: /*#__PURE__*/ (0, _testutils.jsx)("editor", null, /*#__PURE__*/ (0, _testutils.jsx)("hp", null, /*#__PURE__*/ (0, _testutils.jsx)("htext", null, "paragraph 1")), /*#__PURE__*/ (0, _testutils.jsx)("hp", null, /*#__PURE__*/ (0, _testutils.jsx)("htext", null, "paragraph 2")), /*#__PURE__*/ (0, _testutils.jsx)("hp", null, /*#__PURE__*/ (0, _testutils.jsx)("htext", null, "paragraph 3")))
+        },
+        {
+            title: 'void blocks',
+            input: /*#__PURE__*/ (0, _testutils.jsx)("editor", null, /*#__PURE__*/ (0, _testutils.jsx)("hp", null, /*#__PURE__*/ (0, _testutils.jsx)("htext", null, "paragraph 1")), /*#__PURE__*/ (0, _testutils.jsx)("hhr", null), /*#__PURE__*/ (0, _testutils.jsx)("hhr", null), /*#__PURE__*/ (0, _testutils.jsx)("hp", null, /*#__PURE__*/ (0, _testutils.jsx)("htext", null, "paragraph 2")), /*#__PURE__*/ (0, _testutils.jsx)("hp", null, /*#__PURE__*/ (0, _testutils.jsx)("htext", null, "paragraph 3")))
+        },
+        {
+            title: 'blockquote inside list item',
+            input: /*#__PURE__*/ (0, _testutils.jsx)("editor", null, /*#__PURE__*/ (0, _testutils.jsx)("hul", null, /*#__PURE__*/ (0, _testutils.jsx)("hli", null, /*#__PURE__*/ (0, _testutils.jsx)("hp", null, /*#__PURE__*/ (0, _testutils.jsx)("htext", null, "paragraph 1")), /*#__PURE__*/ (0, _testutils.jsx)("hquote", null, /*#__PURE__*/ (0, _testutils.jsx)("hp", null, /*#__PURE__*/ (0, _testutils.jsx)("htext", null, "paragraph 2"))))), /*#__PURE__*/ (0, _testutils.jsx)("hp", null, /*#__PURE__*/ (0, _testutils.jsx)("htext", null, "trailing paragraph")))
+        },
+        {
+            title: 'empty blockquote between paragraphs',
+            input: /*#__PURE__*/ (0, _testutils.jsx)("editor", null, /*#__PURE__*/ (0, _testutils.jsx)("hp", null, /*#__PURE__*/ (0, _testutils.jsx)("htext", null, "paragraph 1")), /*#__PURE__*/ (0, _testutils.jsx)("hquote", null, /*#__PURE__*/ (0, _testutils.jsx)("hp", null, /*#__PURE__*/ (0, _testutils.jsx)("htext", null))), /*#__PURE__*/ (0, _testutils.jsx)("hp", null, /*#__PURE__*/ (0, _testutils.jsx)("htext", null, "paragraph 3")))
+        },
+        {
+            title: 'paragraphs with inline nodes',
+            input: /*#__PURE__*/ (0, _testutils.jsx)("editor", null, /*#__PURE__*/ (0, _testutils.jsx)("hp", null, /*#__PURE__*/ (0, _testutils.jsx)("htext", null, "text 1"), /*#__PURE__*/ (0, _testutils.jsx)("hinline", {
+                id: "first-entry",
+                type: "Entry"
+            }), /*#__PURE__*/ (0, _testutils.jsx)("htext", null, "text 2"), /*#__PURE__*/ (0, _testutils.jsx)("hinline", {
+                id: "another-entry",
+                type: "Entry"
+            })), /*#__PURE__*/ (0, _testutils.jsx)("hp", null, /*#__PURE__*/ (0, _testutils.jsx)("htext", null, "text 3")))
+        }
+    ];
+    cases.forEach(({ title, input })=>{
+        it(title, ()=>{
+            expect((0, _utils.getTextContent)(input)).toBe((0, _richtextplaintextrenderer.documentToPlainTextString)((0, _contentfulslatejsadapter.toContentfulDocument)({
+                document: input.children
+            })));
+        });
+    });
+});

package/dist/cjs/plugins/CharCounter/withCharCounter.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "withCharCounter", {
+    enumerable: true,
+    get: function() {
+        return withCharCounter;
+    }
+});
+const _utils = require("./utils");
+const _pdebounce = /*#__PURE__*/ _interop_require_default(require("p-debounce"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const withCharCounter = (editor)=>{
+    const { apply } = editor;
+    let count = (0, _utils.getTextContent)(editor).length;
+    editor.getCharacterCount = ()=>count;
+    const recount = (0, _pdebounce.default)(async ()=>{
+        count = (0, _utils.getTextContent)(editor).length;
+    }, 300);
+    editor.apply = (op)=>{
+        apply(op);
+        recount();
+    };
+    return editor;
+};

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

@@ -23,6 +23,7 @@ _export(exports, {
     }
 });
 const _react = /*#__PURE__*/ _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");
@@ -81,40 +82,7 @@ const ToolbarDropdownStrikethroughButton = (0, _MarkToolbarButton.createMarkTool
 const ToolbarStrikethroughButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
     title: 'Strikethrough',
     mark: _richtexttypes.MARKS.STRIKETHROUGH,
-    icon: /*#__PURE__*/ _react.createElement("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 256 256",
-        width: "18",
-        height: "18"
-    }, /*#__PURE__*/ _react.createElement("rect", {
-        width: "256",
-        height: "256",
-        fill: "none"
-    }), /*#__PURE__*/ _react.createElement("line", {
-        x1: "40",
-        y1: "128",
-        x2: "216",
-        y2: "128",
-        fill: "none",
-        stroke: "currentColor",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "24"
-    }), /*#__PURE__*/ _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"
-    }), /*#__PURE__*/ _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"
-    }))
+    icon: /*#__PURE__*/ _react.createElement(_f36icons.TextStrikethroughIcon, null)
 });
 function Strikethrough(props) {
     return /*#__PURE__*/ _react.createElement("s", {

package/dist/cjs/plugins/index.js

@@ -17,6 +17,7 @@ _export(exports, {
     }
 });
 const _Break = require("./Break");
+const _CharCounter = require("./CharCounter");
 const _CommandPalette = require("./CommandPalette");
 const _useCommands = require("./CommandPalette/useCommands");
 const _DeserializeDocx = require("./DeserializeDocx");
@@ -65,6 +66,7 @@ const getPlugins = (sdk, onAction, restrictedMarks)=>[
         (0, _Voids.createVoidsPlugin)(),
         (0, _SelectOnBackspace.createSelectOnBackspacePlugin)(),
         (0, _PasteHTML.createPasteHTMLPlugin)(),
+        (0, _CharCounter.createCharCounterPlugin)(),
         (0, _Break.createSoftBreakPlugin)(),
         (0, _Break.createExitBreakPlugin)(),
         (0, _Break.createResetNodePlugin)(),

package/dist/esm/CharConstraints.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import tokens from '@contentful/f36-tokens';
+import { CharValidation, ConstraintsUtils } from '@contentful/field-editor-shared';
+import { css, cx } from 'emotion';
+import { usePlateEditorState } from './internal/hooks';
+import { useSdkContext } from './SdkProvider';
+const styles = {
+    container: css({
+        display: 'flex',
+        justifyContent: 'space-between',
+        fontSize: tokens.fontSizeM,
+        marginTop: tokens.spacingXs,
+        color: tokens.gray700
+    }),
+    counterInvalid: css({
+        color: tokens.red600
+    })
+};
+function CharCounter({ checkConstraints }) {
+    const editor = usePlateEditorState();
+    const count = editor.getCharacterCount();
+    const valid = checkConstraints(count);
+    return /*#__PURE__*/ React.createElement("span", {
+        className: cx({
+            [styles.counterInvalid]: !valid
+        })
+    }, count, " characters");
+}
+export function CharConstraints() {
+    const sdk = useSdkContext();
+    const { constraints, checkConstraints } = React.useMemo(()=>{
+        const constraints = ConstraintsUtils.fromFieldValidations(sdk.field.validations, 'RichText');
+        const checkConstraints = ConstraintsUtils.makeChecker(constraints);
+        return {
+            constraints,
+            checkConstraints
+        };
+    }, [
+        sdk.field.validations
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: styles.container
+    }, /*#__PURE__*/ React.createElement(CharCounter, {
+        checkConstraints: checkConstraints
+    }), /*#__PURE__*/ React.createElement(CharValidation, {
+        constraints: constraints
+    }));
+}

package/dist/esm/RichTextEditor.js

@@ -6,6 +6,7 @@ import { PlateContent, Plate } from '@udecode/plate-common';
 import { css, cx } from 'emotion';
 import deepEquals from 'fast-deep-equal';
 import noop from 'lodash/noop';
+import { CharConstraints } from './CharConstraints';
 import { ContentfulEditorIdProvider, getContentfulEditorId } from './ContentfulEditorProvider';
 import { defaultScrollSelectionIntoView } from './editor-overrides';
 import { toSlateValue } from './helpers/toSlateValue';
@@ -66,7 +67,7 @@ export const ConnectedRichTextEditor = (props)=>{
         className: classNames,
         readOnly: props.isDisabled,
         scrollSelectionIntoView: defaultScrollSelectionIntoView
-    }))))));
+    }), props.withCharValidation && /*#__PURE__*/ React.createElement(CharConstraints, null))))));
 };
 const RichTextEditor = (props)=>{
     const { sdk, isInitiallyDisabled, onAction, restrictedMarks, onChange, isDisabled, ...otherProps } = props;
@@ -95,7 +96,8 @@ const RichTextEditor = (props)=>{
             onAction: onAction,
             isDisabled: disabled,
             onChange: setValue,
-            restrictedMarks: restrictedMarks
+            restrictedMarks: restrictedMarks,
+            withCharValidation: props.withCharValidation ?? true
         }));
 };
 export default RichTextEditor;

package/dist/esm/Toolbar/components/ButtonRedo.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Icon } from '@contentful/f36-components';
-import tokens from '@contentful/f36-tokens';
+import { ArrowArcRightIcon } from '@contentful/f36-icons';
 import { useContentfulEditor } from '../../ContentfulEditorProvider';
 import { ToolbarButton } from '../../plugins/shared/ToolbarButton';
 export const ButtonRedo = ()=>{
@@ -14,9 +13,5 @@ export const ButtonRedo = ()=>{
         onClick: onClickHandler,
         isActive: false,
         isDisabled: editor.history.redos.length === 0
-    }, /*#__PURE__*/ React.createElement(Icon, {
-        color: tokens.gray900
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M18.4,10.6C16.55,9 14.15,8 11.5,8C6.85,8 2.92,11.03 1.54,15.22L3.9,16C4.95,12.81 7.95,10.5 11.5,10.5C13.45,10.5 15.23,11.22 16.62,12.38L13,16H22V7L18.4,10.6Z"
-    })));
+    }, /*#__PURE__*/ React.createElement(ArrowArcRightIcon, null));
 };

package/dist/esm/Toolbar/components/ButtonUndo.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Icon } from '@contentful/f36-components';
-import tokens from '@contentful/f36-tokens';
+import { ArrowArcLeftIcon } from '@contentful/f36-icons';
 import { useContentfulEditor } from '../../ContentfulEditorProvider';
 import { ToolbarButton } from '../../plugins/shared/ToolbarButton';
 export const ButtonUndo = ()=>{
@@ -14,9 +13,5 @@ export const ButtonUndo = ()=>{
         onClick: onClickHandler,
         isActive: false,
         isDisabled: editor.history.undos.length === 0
-    }, /*#__PURE__*/ React.createElement(Icon, {
-        color: tokens.gray900
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z"
-    })));
+    }, /*#__PURE__*/ React.createElement(ArrowArcLeftIcon, null));
 };

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

@@ -0,0 +1,5 @@
+import { withCharCounter } from './withCharCounter';
+export const createCharCounterPlugin = ()=>({
+        key: 'char-counter',
+        withOverrides: withCharCounter
+    });

package/dist/esm/plugins/CharCounter/utils.js

@@ -0,0 +1,20 @@
+import { isText } from '../../internal';
+import { BLOCKS } from '@contentful/rich-text-types';
+const blocks = new Set(Object.values(BLOCKS));
+export function getTextContent(root) {
+    if (isText(root)) {
+        return root.text;
+    }
+    const nodes = root.children;
+    return nodes.reduce((acc, node, index)=>{
+        const text = getTextContent(node);
+        if (!text) {
+            return acc;
+        }
+        const nextNode = nodes[index + 1];
+        if (nextNode && blocks.has(nextNode.type)) {
+            return acc + text + ' ';
+        }
+        return acc + text;
+    }, '');
+}

package/dist/esm/plugins/CharCounter/utils.spec.js

@@ -0,0 +1,45 @@
+import { jsx } from '../../test-utils';
+import { documentToPlainTextString } from '@contentful/rich-text-plain-text-renderer';
+import { getTextContent } from './utils';
+import { toContentfulDocument } from '@contentful/contentful-slatejs-adapter';
+describe('getTextContent', ()=>{
+    const cases = [
+        {
+            title: 'empty document',
+            input: /*#__PURE__*/ jsx("editor", null)
+        },
+        {
+            title: 'list of paragraphs',
+            input: /*#__PURE__*/ jsx("editor", null, /*#__PURE__*/ jsx("hp", null, /*#__PURE__*/ jsx("htext", null, "paragraph 1")), /*#__PURE__*/ jsx("hp", null, /*#__PURE__*/ jsx("htext", null, "paragraph 2")), /*#__PURE__*/ jsx("hp", null, /*#__PURE__*/ jsx("htext", null, "paragraph 3")))
+        },
+        {
+            title: 'void blocks',
+            input: /*#__PURE__*/ jsx("editor", null, /*#__PURE__*/ jsx("hp", null, /*#__PURE__*/ jsx("htext", null, "paragraph 1")), /*#__PURE__*/ jsx("hhr", null), /*#__PURE__*/ jsx("hhr", null), /*#__PURE__*/ jsx("hp", null, /*#__PURE__*/ jsx("htext", null, "paragraph 2")), /*#__PURE__*/ jsx("hp", null, /*#__PURE__*/ jsx("htext", null, "paragraph 3")))
+        },
+        {
+            title: 'blockquote inside list item',
+            input: /*#__PURE__*/ jsx("editor", null, /*#__PURE__*/ jsx("hul", null, /*#__PURE__*/ jsx("hli", null, /*#__PURE__*/ jsx("hp", null, /*#__PURE__*/ jsx("htext", null, "paragraph 1")), /*#__PURE__*/ jsx("hquote", null, /*#__PURE__*/ jsx("hp", null, /*#__PURE__*/ jsx("htext", null, "paragraph 2"))))), /*#__PURE__*/ jsx("hp", null, /*#__PURE__*/ jsx("htext", null, "trailing paragraph")))
+        },
+        {
+            title: 'empty blockquote between paragraphs',
+            input: /*#__PURE__*/ jsx("editor", null, /*#__PURE__*/ jsx("hp", null, /*#__PURE__*/ jsx("htext", null, "paragraph 1")), /*#__PURE__*/ jsx("hquote", null, /*#__PURE__*/ jsx("hp", null, /*#__PURE__*/ jsx("htext", null))), /*#__PURE__*/ jsx("hp", null, /*#__PURE__*/ jsx("htext", null, "paragraph 3")))
+        },
+        {
+            title: 'paragraphs with inline nodes',
+            input: /*#__PURE__*/ jsx("editor", null, /*#__PURE__*/ jsx("hp", null, /*#__PURE__*/ jsx("htext", null, "text 1"), /*#__PURE__*/ jsx("hinline", {
+                id: "first-entry",
+                type: "Entry"
+            }), /*#__PURE__*/ jsx("htext", null, "text 2"), /*#__PURE__*/ jsx("hinline", {
+                id: "another-entry",
+                type: "Entry"
+            })), /*#__PURE__*/ jsx("hp", null, /*#__PURE__*/ jsx("htext", null, "text 3")))
+        }
+    ];
+    cases.forEach(({ title, input })=>{
+        it(title, ()=>{
+            expect(getTextContent(input)).toBe(documentToPlainTextString(toContentfulDocument({
+                document: input.children
+            })));
+        });
+    });
+});

package/dist/esm/plugins/CharCounter/withCharCounter.js

@@ -0,0 +1,15 @@
+import { getTextContent } from './utils';
+import debounce from 'p-debounce';
+export const withCharCounter = (editor)=>{
+    const { apply } = editor;
+    let count = getTextContent(editor).length;
+    editor.getCharacterCount = ()=>count;
+    const recount = debounce(async ()=>{
+        count = getTextContent(editor).length;
+    }, 300);
+    editor.apply = (op)=>{
+        apply(op);
+        recount();
+    };
+    return editor;
+};

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { TextStrikethroughIcon } from '@contentful/f36-icons';
 import { MARKS } from '@contentful/rich-text-types';
 import { createStrikethroughPlugin as createDefaultStrikethroughPlugin } from '@udecode/plate-basic-marks';
 import { css } from 'emotion';
@@ -16,40 +17,7 @@ export const ToolbarDropdownStrikethroughButton = createMarkToolbarButton({
 export const ToolbarStrikethroughButton = createMarkToolbarButton({
     title: 'Strikethrough',
     mark: MARKS.STRIKETHROUGH,
-    icon: /*#__PURE__*/ React.createElement("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 256 256",
-        width: "18",
-        height: "18"
-    }, /*#__PURE__*/ React.createElement("rect", {
-        width: "256",
-        height: "256",
-        fill: "none"
-    }), /*#__PURE__*/ React.createElement("line", {
-        x1: "40",
-        y1: "128",
-        x2: "216",
-        y2: "128",
-        fill: "none",
-        stroke: "currentColor",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "24"
-    }), /*#__PURE__*/ 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"
-    }), /*#__PURE__*/ 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"
-    }))
+    icon: /*#__PURE__*/ React.createElement(TextStrikethroughIcon, null)
 });
 export function Strikethrough(props) {
     return /*#__PURE__*/ React.createElement("s", {

package/dist/esm/plugins/index.js

@@ -1,4 +1,5 @@
 import { createSoftBreakPlugin, createExitBreakPlugin, createResetNodePlugin } from './Break';
+import { createCharCounterPlugin } from './CharCounter';
 import { createCommandPalettePlugin } from './CommandPalette';
 import { isCommandPromptPluginEnabled } from './CommandPalette/useCommands';
 import { createDeserializeDocxPlugin } from './DeserializeDocx';
@@ -47,6 +48,7 @@ export const getPlugins = (sdk, onAction, restrictedMarks)=>[
         createVoidsPlugin(),
         createSelectOnBackspacePlugin(),
         createPasteHTMLPlugin(),
+        createCharCounterPlugin(),
         createSoftBreakPlugin(),
         createExitBreakPlugin(),
         createResetNodePlugin(),

package/dist/types/CharConstraints.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function CharConstraints(): React.JSX.Element;

package/dist/types/RichTextEditor.d.ts

@@ -17,6 +17,7 @@ type RichTextProps = {
      * @deprecated Use `sdk.field.onValueChanged` instead
      */
     onChange?: (doc: Contentful.Document) => unknown;
+    withCharValidation?: boolean;
 };
 type ConnectedRichTextProps = {
     sdk: FieldAppSDK;
@@ -30,6 +31,7 @@ type ConnectedRichTextProps = {
     isToolbarHidden?: boolean;
     actionsDisabled?: boolean;
     stickyToolbarOffset?: number;
+    withCharValidation?: boolean;
 };
 export declare const ConnectedRichTextEditor: (props: ConnectedRichTextProps) => React.JSX.Element;
 declare const RichTextEditor: (props: RichTextProps) => React.JSX.Element;

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

@@ -27,8 +27,8 @@ export interface Element extends p.TElement {
 export type Value = Element[];
 export type ReactEditor = p.PlateEditor<Value>;
 export interface PlateEditor extends p.PlateEditor<Value> {
+    getCharacterCount: () => number;
     tracking: TrackingPluginActions;
-    f: any;
     undo: {
         (): void;
         (source: 'toolbar' | 'shortcut'): void;

package/dist/types/plugins/CharCounter/index.d.ts

@@ -0,0 +1,2 @@
+import { PlatePlugin } from '../../internal/types';
+export declare const createCharCounterPlugin: () => PlatePlugin;

package/dist/types/plugins/CharCounter/utils.d.ts

@@ -0,0 +1,2 @@
+import type { Node, PlateEditor } from '../../internal/types';
+export declare function getTextContent(root: PlateEditor | Node): string;

package/dist/types/plugins/CharCounter/utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/plugins/CharCounter/withCharCounter.d.ts

@@ -0,0 +1,2 @@
+import { PlateEditor } from '../../internal';
+export declare const withCharCounter: (editor: PlateEditor) => PlateEditor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-rich-text",
-  "version": "4.13.12",
+  "version": "4.14.0",
   "source": "./src/index.tsx",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -44,8 +44,8 @@
     "@contentful/f36-icons": "^5.4.1",
     "@contentful/f36-tokens": "^5.1.0",
     "@contentful/f36-utils": "^5.1.0",
-    "@contentful/field-editor-reference": "^6.13.12",
-    "@contentful/field-editor-shared": "^2.13.10",
+    "@contentful/field-editor-reference": "^6.13.13",
+    "@contentful/field-editor-shared": "^2.14.0",
     "@contentful/rich-text-plain-text-renderer": "^17.0.0",
     "@contentful/rich-text-types": "^17.0.0",
     "@popperjs/core": "^2.11.5",
@@ -65,6 +65,7 @@
     "fast-deep-equal": "^3.1.3",
     "is-hotkey": "^0.2.0",
     "is-plain-obj": "^3.0.0",
+    "p-debounce": "^2.1.0",
     "react-popper": "^2.3.0",
     "slate": "0.94.1",
     "slate-history": "0.100.0",
@@ -88,5 +89,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "381053321a01093836775e15c7c36c1fac080fa9"
+  "gitHead": "5e69589554e4e8e0870f08886848dc13434573ca"
 }