@contentful/field-editor-rich-text 3.6.0 → 3.6.1

package/dist/cjs/RichTextEditor.js

@@ -25,14 +25,14 @@ const _emotion = require("emotion");
 const _fastdeepequal = _interop_require_default(require("fast-deep-equal"));
 const _noop = _interop_require_default(require("lodash/noop"));
 const _ContentfulEditorProvider = require("./ContentfulEditorProvider");
-const _misc = require("./internal/misc");
+const _callbacks = require("./helpers/callbacks");
+const _toSlateValue = require("./helpers/toSlateValue");
 const _plugins = require("./plugins");
-const _prepareDocument = require("./prepareDocument");
 const _RichTextEditorstyles = require("./RichTextEditor.styles");
 const _SdkProvider = require("./SdkProvider");
+const _SyncEditorValue = require("./SyncEditorValue");
 const _Toolbar = _interop_require_default(require("./Toolbar"));
 const _StickyToolbarWrapper = _interop_require_default(require("./Toolbar/components/StickyToolbarWrapper"));
-const _useOnValueChanged = require("./useOnValueChanged");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -79,84 +79,73 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const ConnectedRichTextEditor = (props)=>{
     const id = (0, _ContentfulEditorProvider.getContentfulEditorId)(props.sdk);
-    const plugins = _react.default.useMemo(()=>(0, _plugins.getPlugins)(props.sdk, props.onAction ?? _noop.default, props.restrictedMarks), [
+    const plugins = _react.useMemo(()=>(0, _plugins.getPlugins)(props.sdk, props.onAction ?? _noop.default, props.restrictedMarks), [
         props.sdk,
         props.onAction,
         props.restrictedMarks
     ]);
-    const [isFirstRender, setIsFirstRender] = (0, _react.useState)(true);
-    const [pendingExternalUpdate, setPendingExternalUpdate] = (0, _react.useState)(false);
-    const onValueChanged = (0, _useOnValueChanged.useOnValueChanged)({
-        editorId: id,
-        handler: props.onChange,
-        skip: pendingExternalUpdate || isFirstRender,
-        onSkip: ()=>setPendingExternalUpdate(false)
-    });
-    (0, _react.useEffect)(()=>{
-        setIsFirstRender(false);
-        const editor = (0, _misc.getPlateSelectors)(id).editor();
-        if (!editor) {
-            return;
-        }
-        setPendingExternalUpdate(true);
-        (0, _prepareDocument.setEditorContent)(editor, (0, _prepareDocument.documentToEditorValue)(props.value));
+    const handleChange = props.onChange;
+    const isFirstRender = _react.useRef(true);
+    const value = (0, _toSlateValue.toSlateValue)(props.value);
+    const onChange = _react.useMemo(()=>(0, _callbacks.createOnChangeCallback)((document)=>{
+            if (!isFirstRender.current && handleChange) {
+                handleChange(document);
+            }
+        }), [
+        handleChange
+    ]);
+    const firstInteractionHandler = _react.useCallback(()=>{
+        isFirstRender.current = false;
     }, [
-        props.value,
-        id
+        isFirstRender
     ]);
     const classNames = (0, _emotion.cx)(_RichTextEditorstyles.styles.editor, props.minHeight !== undefined ? (0, _emotion.css)({
         minHeight: props.minHeight
     }) : undefined, props.isDisabled ? _RichTextEditorstyles.styles.disabled : _RichTextEditorstyles.styles.enabled, props.isToolbarHidden && _RichTextEditorstyles.styles.hiddenToolbar);
-    (0, _react.useEffect)(()=>{
-        if (!isFirstRender) {
-            return;
-        }
-        (0, _platecore.getPlateActions)(id).value((0, _prepareDocument.normalizeEditorValue)((0, _prepareDocument.documentToEditorValue)(props.value), {
-            plugins,
-            disableCorePlugins: _plugins.disableCorePlugins
-        }));
-    }, [
-        isFirstRender,
-        plugins,
-        id,
-        props.value
-    ]);
-    return _react.default.createElement(_SdkProvider.SdkProvider, {
+    return _react.createElement(_SdkProvider.SdkProvider, {
         sdk: props.sdk
-    }, _react.default.createElement(_ContentfulEditorProvider.ContentfulEditorIdProvider, {
+    }, _react.createElement(_ContentfulEditorProvider.ContentfulEditorIdProvider, {
         value: id
-    }, _react.default.createElement("div", {
+    }, _react.createElement("div", {
         className: _RichTextEditorstyles.styles.root,
         "data-test-id": "rich-text-editor"
-    }, _react.default.createElement(_platecore.Plate, {
+    }, _react.createElement(_platecore.PlateProvider, {
         id: id,
+        initialValue: value,
+        normalizeInitialValue: true,
         plugins: plugins,
         disableCorePlugins: _plugins.disableCorePlugins,
+        onChange: onChange
+    }, !props.isToolbarHidden && _react.createElement(_StickyToolbarWrapper.default, {
+        isDisabled: props.isDisabled
+    }, _react.createElement(_Toolbar.default, {
+        isDisabled: props.isDisabled
+    })), _react.createElement(_SyncEditorValue.SyncEditorValue, {
+        incomingValue: value
+    }), _react.createElement(_platecore.Plate, {
+        id: id,
         editableProps: {
             className: classNames,
-            readOnly: props.isDisabled
-        },
-        onChange: onValueChanged,
-        firstChildren: !props.isToolbarHidden && _react.default.createElement(_StickyToolbarWrapper.default, {
-            isDisabled: props.isDisabled
-        }, _react.default.createElement(_Toolbar.default, {
-            isDisabled: props.isDisabled
-        }))
-    }))));
+            readOnly: props.isDisabled,
+            onKeyDown: firstInteractionHandler,
+            onChange: firstInteractionHandler,
+            onClick: firstInteractionHandler
+        }
+    })))));
 };
 const RichTextEditor = (props)=>{
     const { sdk , isInitiallyDisabled , onAction , restrictedMarks , ...otherProps } = props;
-    const isEmptyValue = (0, _react.useCallback)((value)=>!value || (0, _fastdeepequal.default)(value, _richtexttypes.EMPTY_DOCUMENT), []);
+    const isEmptyValue = _react.useCallback((value)=>!value || (0, _fastdeepequal.default)(value, _richtexttypes.EMPTY_DOCUMENT), []);
     const id = (0, _ContentfulEditorProvider.getContentfulEditorId)(props.sdk);
-    return _react.default.createElement(_fieldeditorreference.EntityProvider, {
+    return _react.createElement(_fieldeditorreference.EntityProvider, {
         sdk: sdk
-    }, _react.default.createElement(_fieldeditorshared.FieldConnector, {
+    }, _react.createElement(_fieldeditorshared.FieldConnector, {
         throttle: 0,
         field: sdk.field,
         isInitiallyDisabled: isInitiallyDisabled,
         isEmptyValue: isEmptyValue,
         isEqualValues: _fastdeepequal.default
-    }, ({ lastRemoteValue , disabled , setValue  })=>_react.default.createElement(ConnectedRichTextEditor, {
+    }, ({ lastRemoteValue , disabled , setValue  })=>_react.createElement(ConnectedRichTextEditor, {
             ...otherProps,
             key: `rich-text-editor-${id}`,
             value: lastRemoteValue,

package/dist/cjs/SyncEditorValue.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SyncEditorValue", {
+    enumerable: true,
+    get: function() {
+        return SyncEditorValue;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _fastdeepequal = _interop_require_default(require("fast-deep-equal"));
+const _hooks = require("./internal/hooks");
+const _misc = require("./internal/misc");
+const _queries = require("./internal/queries");
+const _transforms = require("./internal/transforms");
+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 setEditorContent = (editor, nodes)=>{
+    (0, _misc.withoutNormalizing)(editor, ()=>{
+        const children = [
+            ...editor.children
+        ];
+        children.forEach((node)=>editor.apply({
+                type: 'remove_node',
+                path: [
+                    0
+                ],
+                node
+            }));
+        if (nodes) {
+            const nodesArray = (0, _queries.isNode)(nodes) ? [
+                nodes
+            ] : nodes;
+            nodesArray.forEach((node, i)=>{
+                editor.apply({
+                    type: 'insert_node',
+                    path: [
+                        i
+                    ],
+                    node
+                });
+            });
+        }
+        const point = (0, _queries.getEndPoint)(editor, []);
+        if (point) {
+            (0, _transforms.select)(editor, point);
+        }
+    });
+};
+const SyncEditorValue = ({ incomingValue  })=>{
+    const editor = (0, _hooks.usePlateSelectors)().editor();
+    const lastIncomingValue = _react.useRef(incomingValue);
+    _react.useEffect(()=>{
+        if ((0, _fastdeepequal.default)(lastIncomingValue.current, incomingValue)) {
+            return;
+        }
+        lastIncomingValue.current = incomingValue;
+        setEditorContent(editor, incomingValue);
+    }, [
+        editor,
+        incomingValue
+    ]);
+    return null;
+};

package/dist/cjs/helpers/callbacks.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createOnChangeCallback", {
+    enumerable: true,
+    get: function() {
+        return createOnChangeCallback;
+    }
+});
+const _contentfulslatejsadapter = require("@contentful/contentful-slatejs-adapter");
+const _fastdeepequal = _interop_require_default(require("fast-deep-equal"));
+const _debounce = _interop_require_default(require("lodash/debounce"));
+const _Schema = _interop_require_default(require("../constants/Schema"));
+const _removeInternalMarks = require("./removeInternalMarks");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const createOnChangeCallback = (handler)=>{
+    let cache = null;
+    return (0, _debounce.default)((document)=>{
+        if ((0, _fastdeepequal.default)(document, cache)) {
+            return;
+        }
+        cache = document;
+        const doc = (0, _removeInternalMarks.removeInternalMarks)((0, _contentfulslatejsadapter.toContentfulDocument)({
+            document: document,
+            schema: _Schema.default
+        }));
+        const cleanedDocument = (0, _removeInternalMarks.removeInternalMarks)(doc);
+        handler?.(cleanedDocument);
+    }, 500);
+};

package/dist/cjs/helpers/toSlateValue.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "toSlateValue", {
+    enumerable: true,
+    get: function() {
+        return toSlateValue;
+    }
+});
+const _contentfulslatejsadapter = require("@contentful/contentful-slatejs-adapter");
+const _richtexttypes = require("@contentful/rich-text-types");
+const _Schema = _interop_require_default(require("../constants/Schema"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const isTextElement = (node)=>'text' in node;
+function sanitizeIncomingSlateDoc(nodes = []) {
+    return nodes.map((node)=>{
+        if (isTextElement(node)) {
+            return node;
+        }
+        if (node.children?.length === 0) {
+            return {
+                ...node,
+                children: [
+                    {
+                        text: '',
+                        data: {}
+                    }
+                ]
+            };
+        }
+        return {
+            ...node,
+            children: sanitizeIncomingSlateDoc(node?.children)
+        };
+    });
+}
+const toSlateValue = (doc)=>{
+    const hasContent = (doc)=>{
+        return (doc?.content || []).length > 0;
+    };
+    const slateDoc = (0, _contentfulslatejsadapter.toSlatejsDocument)({
+        document: doc && hasContent(doc) ? doc : _richtexttypes.EMPTY_DOCUMENT,
+        schema: _Schema.default
+    });
+    return sanitizeIncomingSlateDoc(slateDoc);
+};

package/dist/cjs/internal/hooks.js

@@ -17,6 +17,9 @@ _export(exports, {
     },
     usePlateEditorState: function() {
         return usePlateEditorState;
+    },
+    usePlateSelectors: function() {
+        return usePlateSelectors;
     }
 });
 const _platecore = _interop_require_wildcard(require("@udecode/plate-core"));
@@ -61,5 +64,12 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const useReadOnly = _slatereact.useReadOnly;
-const usePlateEditorRef = _platecore.usePlateEditorRef;
-const usePlateEditorState = _platecore.usePlateEditorState;
+const usePlateEditorRef = (id)=>{
+    return _platecore.usePlateEditorRef(id);
+};
+const usePlateEditorState = (id)=>{
+    return _platecore.usePlateEditorState(id);
+};
+const usePlateSelectors = (id)=>{
+    return _platecore.usePlateSelectors(id);
+};

package/dist/cjs/internal/misc.js

@@ -29,9 +29,6 @@ _export(exports, {
     },
     mockPlugin: function() {
         return mockPlugin;
-    },
-    getPlateSelectors: function() {
-        return getPlateSelectors;
     }
 });
 const _platecore = _interop_require_wildcard(require("@udecode/plate-core"));
@@ -98,6 +95,3 @@ const fromDOMPoint = (editor, domPoint, opts = {
 const mockPlugin = (plugin)=>{
     return _platecore.mockPlugin(plugin);
 };
-const getPlateSelectors = (id)=>{
-    return _platecore.getPlateSelectors(id);
-};

package/dist/cjs/plugins/Table/onKeyDownTable.js

@@ -40,6 +40,20 @@ const onKeyDownTable = (editor, plugin)=>{
                 return;
             }
         }
+        if (event.key === 'Backspace') {
+            const entry = (0, _platetable.getTableEntries)(editor, {});
+            if (entry) {
+                const { table , row , cell  } = entry;
+                const cellText = (0, _queries.getText)(editor, cell[1]);
+                const isFirstCell = (0, _queries.isFirstChild)(row[1]);
+                const isFirstRow = (0, _queries.isFirstChild)(table[1]);
+                if (isFirstCell && isFirstRow && !cellText) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return;
+                }
+            }
+        }
         if (event.key === 'Tab' && !event.shiftKey) {
             event.preventDefault();
             const entry = (0, _platetable.getTableEntries)(editor, {});

package/dist/cjs/plugins/Text/__tests__/createTextPlugin.test.js

@@ -11,19 +11,9 @@ describe('delete backward', ()=>{
             expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "p", (0, _testutils.jsx)("cursor", null))))
         },
         {
-            title: 'deletes the empty paragraph at the beginning of the RTE followed by another paragraph',
+            title: 'does not delete the very first paragraph',
             input: (0, _testutils.jsx)("fragment", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null)), (0, _testutils.jsx)("hp", null, "text")),
-            expected: (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null), "text")
-        },
-        {
-            title: 'deletes the empty paragraph at the beginning of the RTE followed by li',
-            input: (0, _testutils.jsx)("fragment", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null)), (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "p1")))),
-            expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null), "p1")))
-        },
-        {
-            title: 'deletes the empty paragraph at the beginning of the RTE followed by a blockquote',
-            input: (0, _testutils.jsx)("fragment", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null)), (0, _testutils.jsx)("hquote", null, (0, _testutils.jsx)("hp", null, "p1"))),
-            expected: (0, _testutils.jsx)("hquote", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null), "p1"))
+            expected: (0, _testutils.jsx)("fragment", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null)), (0, _testutils.jsx)("hp", null, "text"))
         }
     ];
     const render = (children)=>(0, _testutils.jsx)("editor", null, children, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("htext", null)));
@@ -48,17 +38,17 @@ describe('delete forward', ()=>{
             expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null), "1")))
         },
         {
-            title: 'deletes the empty paragraph at the beginning of the RTE followed by another paragraph',
+            title: 'deletes the first paragraph when followed by another paragraph',
             input: (0, _testutils.jsx)("fragment", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null)), (0, _testutils.jsx)("hp", null, "text")),
             expected: (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null), "text")
         },
         {
-            title: 'deletes the empty paragraph at the beginning of the RTE followed by li',
+            title: 'deletes the first paragraph when followed by li',
             input: (0, _testutils.jsx)("fragment", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null)), (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, "p1")))),
             expected: (0, _testutils.jsx)("hul", null, (0, _testutils.jsx)("hli", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null), "p1")))
         },
         {
-            title: 'deletes the empty paragraph at the beginning of the RTE followed by a blockquote',
+            title: 'deletes the first paragraph when followed by a blockquote',
             input: (0, _testutils.jsx)("fragment", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null)), (0, _testutils.jsx)("hquote", null, (0, _testutils.jsx)("hp", null, "p1"))),
             expected: (0, _testutils.jsx)("hquote", null, (0, _testutils.jsx)("hp", null, (0, _testutils.jsx)("cursor", null), "p1"))
         }

package/dist/cjs/plugins/index.js

@@ -16,7 +16,6 @@ _export(exports, {
         return disableCorePlugins;
     }
 });
-const _platecore = require("@udecode/plate-core");
 const _plateserializerdocx = require("@udecode/plate-serializer-docx");
 const _Break = require("./Break");
 const _CommandPalette = require("./CommandPalette");
@@ -41,8 +40,6 @@ const _Tracking = require("./Tracking");
 const _TrailingParagraph = require("./TrailingParagraph");
 const _Voids = require("./Voids");
 const getPlugins = (sdk, onAction, restrictedMarks)=>[
-        (0, _platecore.createDeserializeHtmlPlugin)(),
-        (0, _platecore.createDeserializeAstPlugin)(),
         (0, _plateserializerdocx.createDeserializeDocxPlugin)(),
         (0, _Tracking.createTrackingPlugin)(onAction),
         (0, _DragAndDrop.createDragAndDropPlugin)(),
@@ -72,7 +69,5 @@ const getPlugins = (sdk, onAction, restrictedMarks)=>[
         (0, _Normalizer.createNormalizerPlugin)()
     ];
 const disableCorePlugins = {
-    deserializeAst: true,
-    deserializeHtml: true,
     eventEditor: true
 };

package/dist/esm/RichTextEditor.js

@@ -1,20 +1,20 @@
-import React, { useCallback, useState, useEffect } from 'react';
+import * as React from 'react';
 import { EntityProvider } from '@contentful/field-editor-reference';
 import { FieldConnector } from '@contentful/field-editor-shared';
 import * as Contentful from '@contentful/rich-text-types';
-import { Plate, getPlateActions } from '@udecode/plate-core';
+import { Plate, PlateProvider } from '@udecode/plate-core';
 import { css, cx } from 'emotion';
 import deepEquals from 'fast-deep-equal';
 import noop from 'lodash/noop';
 import { ContentfulEditorIdProvider, getContentfulEditorId } from './ContentfulEditorProvider';
-import { getPlateSelectors } from './internal/misc';
+import { createOnChangeCallback } from './helpers/callbacks';
+import { toSlateValue } from './helpers/toSlateValue';
 import { getPlugins, disableCorePlugins } from './plugins';
-import { documentToEditorValue, normalizeEditorValue, setEditorContent } from './prepareDocument';
 import { styles } from './RichTextEditor.styles';
 import { SdkProvider } from './SdkProvider';
+import { SyncEditorValue } from './SyncEditorValue';
 import Toolbar from './Toolbar';
 import StickyToolbarWrapper from './Toolbar/components/StickyToolbarWrapper';
-import { useOnValueChanged } from './useOnValueChanged';
 export const ConnectedRichTextEditor = (props)=>{
     const id = getContentfulEditorId(props.sdk);
     const plugins = React.useMemo(()=>getPlugins(props.sdk, props.onAction ?? noop, props.restrictedMarks), [
@@ -22,43 +22,24 @@ export const ConnectedRichTextEditor = (props)=>{
         props.onAction,
         props.restrictedMarks
     ]);
-    const [isFirstRender, setIsFirstRender] = useState(true);
-    const [pendingExternalUpdate, setPendingExternalUpdate] = useState(false);
-    const onValueChanged = useOnValueChanged({
-        editorId: id,
-        handler: props.onChange,
-        skip: pendingExternalUpdate || isFirstRender,
-        onSkip: ()=>setPendingExternalUpdate(false)
-    });
-    useEffect(()=>{
-        setIsFirstRender(false);
-        const editor = getPlateSelectors(id).editor();
-        if (!editor) {
-            return;
-        }
-        setPendingExternalUpdate(true);
-        setEditorContent(editor, documentToEditorValue(props.value));
+    const handleChange = props.onChange;
+    const isFirstRender = React.useRef(true);
+    const value = toSlateValue(props.value);
+    const onChange = React.useMemo(()=>createOnChangeCallback((document)=>{
+            if (!isFirstRender.current && handleChange) {
+                handleChange(document);
+            }
+        }), [
+        handleChange
+    ]);
+    const firstInteractionHandler = React.useCallback(()=>{
+        isFirstRender.current = false;
     }, [
-        props.value,
-        id
+        isFirstRender
     ]);
     const classNames = cx(styles.editor, props.minHeight !== undefined ? css({
         minHeight: props.minHeight
     }) : undefined, props.isDisabled ? styles.disabled : styles.enabled, props.isToolbarHidden && styles.hiddenToolbar);
-    useEffect(()=>{
-        if (!isFirstRender) {
-            return;
-        }
-        getPlateActions(id).value(normalizeEditorValue(documentToEditorValue(props.value), {
-            plugins,
-            disableCorePlugins
-        }));
-    }, [
-        isFirstRender,
-        plugins,
-        id,
-        props.value
-    ]);
     return React.createElement(SdkProvider, {
         sdk: props.sdk
     }, React.createElement(ContentfulEditorIdProvider, {
@@ -66,25 +47,33 @@ export const ConnectedRichTextEditor = (props)=>{
     }, React.createElement("div", {
         className: styles.root,
         "data-test-id": "rich-text-editor"
-    }, React.createElement(Plate, {
+    }, React.createElement(PlateProvider, {
         id: id,
+        initialValue: value,
+        normalizeInitialValue: true,
         plugins: plugins,
         disableCorePlugins: disableCorePlugins,
+        onChange: onChange
+    }, !props.isToolbarHidden && React.createElement(StickyToolbarWrapper, {
+        isDisabled: props.isDisabled
+    }, React.createElement(Toolbar, {
+        isDisabled: props.isDisabled
+    })), React.createElement(SyncEditorValue, {
+        incomingValue: value
+    }), React.createElement(Plate, {
+        id: id,
         editableProps: {
             className: classNames,
-            readOnly: props.isDisabled
-        },
-        onChange: onValueChanged,
-        firstChildren: !props.isToolbarHidden && React.createElement(StickyToolbarWrapper, {
-            isDisabled: props.isDisabled
-        }, React.createElement(Toolbar, {
-            isDisabled: props.isDisabled
-        }))
-    }))));
+            readOnly: props.isDisabled,
+            onKeyDown: firstInteractionHandler,
+            onChange: firstInteractionHandler,
+            onClick: firstInteractionHandler
+        }
+    })))));
 };
 const RichTextEditor = (props)=>{
     const { sdk , isInitiallyDisabled , onAction , restrictedMarks , ...otherProps } = props;
-    const isEmptyValue = useCallback((value)=>!value || deepEquals(value, Contentful.EMPTY_DOCUMENT), []);
+    const isEmptyValue = React.useCallback((value)=>!value || deepEquals(value, Contentful.EMPTY_DOCUMENT), []);
     const id = getContentfulEditorId(props.sdk);
     return React.createElement(EntityProvider, {
         sdk: sdk

package/dist/esm/SyncEditorValue.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import equal from 'fast-deep-equal';
+import { usePlateSelectors } from './internal/hooks';
+import { withoutNormalizing } from './internal/misc';
+import { isNode, getEndPoint } from './internal/queries';
+import { select } from './internal/transforms';
+const setEditorContent = (editor, nodes)=>{
+    withoutNormalizing(editor, ()=>{
+        const children = [
+            ...editor.children
+        ];
+        children.forEach((node)=>editor.apply({
+                type: 'remove_node',
+                path: [
+                    0
+                ],
+                node
+            }));
+        if (nodes) {
+            const nodesArray = isNode(nodes) ? [
+                nodes
+            ] : nodes;
+            nodesArray.forEach((node, i)=>{
+                editor.apply({
+                    type: 'insert_node',
+                    path: [
+                        i
+                    ],
+                    node
+                });
+            });
+        }
+        const point = getEndPoint(editor, []);
+        if (point) {
+            select(editor, point);
+        }
+    });
+};
+export const SyncEditorValue = ({ incomingValue  })=>{
+    const editor = usePlateSelectors().editor();
+    const lastIncomingValue = React.useRef(incomingValue);
+    React.useEffect(()=>{
+        if (equal(lastIncomingValue.current, incomingValue)) {
+            return;
+        }
+        lastIncomingValue.current = incomingValue;
+        setEditorContent(editor, incomingValue);
+    }, [
+        editor,
+        incomingValue
+    ]);
+    return null;
+};