@contentful/field-editor-rich-text 3.15.0 → 3.15.2

package/dist/cjs/plugins/shared/LinkedBlockWrapper.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "LinkedBlockWrapper", {
         return LinkedBlockWrapper;
     }
 });
-const _react = _interop_require_default(require("react"));
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _emotion = require("emotion");
 const _environment = require("../../helpers/environment");
 const _utils = require("./utils");
@@ -23,20 +23,24 @@ const styles = {
         display: 'block'
     }),
     container: (0, _emotion.css)({
+        // The next 2 properties ensure Entity card won't be aligned above
+        // a list item marker (i.e. bullet)
         display: 'inline-block',
         verticalAlign: 'text-top',
         width: '100%'
     })
 };
-function LinkedBlockWrapper({ attributes , card , children , link  }) {
-    return _react.default.createElement("div", {
+function LinkedBlockWrapper({ attributes, card, children, link }) {
+    return /*#__PURE__*/ _react.default.createElement("div", {
         ...attributes,
         className: styles.root,
         "data-entity-type": link.sys.linkType,
         "data-entity-id": (0, _utils.getLinkEntityId)(link),
+        // COMPAT: This makes copy & paste work for Firefox
         contentEditable: _environment.IS_CHROME ? undefined : false,
         draggable: _environment.IS_CHROME ? true : undefined
-    }, _react.default.createElement("div", {
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        // COMPAT: This makes copy & paste work for Chromium/Blink browsers and Safari
         contentEditable: _environment.IS_CHROME ? false : undefined,
         draggable: _environment.IS_CHROME ? true : undefined,
         className: styles.container

package/dist/cjs/plugins/shared/LinkedInlineWrapper.js

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "LinkedInlineWrapper", {
         return LinkedInlineWrapper;
     }
 });
-const _react = _interop_require_wildcard(require("react"));
-const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
 const _emotion = require("emotion");
 const _environment = require("../../helpers/environment");
 const _utils = require("./utils");
@@ -39,7 +39,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -70,15 +72,17 @@ const styles = {
         }
     })
 };
-function LinkedInlineWrapper({ attributes , card , children , link  }) {
-    return _react.createElement("span", {
+function LinkedInlineWrapper({ attributes, card, children, link }) {
+    return /*#__PURE__*/ _react.createElement("span", {
         ...attributes,
         className: styles.root,
         "data-entity-type": link.sys.linkType,
         "data-entity-id": (0, _utils.getLinkEntityId)(link),
+        // COMPAT: This makes copy & paste work for Firefox
         contentEditable: _environment.IS_CHROME ? undefined : false,
         draggable: _environment.IS_CHROME ? true : undefined
-    }, _react.createElement("span", {
+    }, /*#__PURE__*/ _react.createElement("span", {
+        // COMPAT: This makes copy & paste work for Chromium/Blink browsers and Safari
         contentEditable: _environment.IS_CHROME ? false : undefined,
         draggable: _environment.IS_CHROME ? true : undefined
     }, card), children);

package/dist/cjs/plugins/shared/ResourceNewBadge.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "ResourceNewBadge", {
         return ResourceNewBadge;
     }
 });
-const _react = _interop_require_wildcard(require("react"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -31,7 +31,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -50,7 +52,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const ResourceNewBadge = ()=>{
-    return _react.createElement(_react.Fragment, null, ' ', "(different space)", ' ', _react.createElement(_f36components.Badge, {
+    return /*#__PURE__*/ _react.createElement(_react.Fragment, null, ' ', "(different space)", ' ', /*#__PURE__*/ _react.createElement(_f36components.Badge, {
         variant: "primary-filled",
         size: "small"
     }, "new"));

package/dist/cjs/plugins/shared/ToolbarButton.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "ToolbarButton", {
         return ToolbarButton;
     }
 });
-const _react = _interop_require_wildcard(require("react"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
-const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
 const _emotion = require("emotion");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -38,7 +38,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -68,12 +70,12 @@ const styles = {
     })
 };
 function ToolbarButton(props) {
-    const { title , testId , isActive , children , className , isDisabled =false  } = props;
+    const { title, testId, isActive, children, className, isDisabled = false } = props;
     const handleClick = (event)=>{
         event.preventDefault();
         props.onClick();
     };
-    const button = _react.createElement(_f36components.Button, {
+    const button = /*#__PURE__*/ _react.createElement(_f36components.Button, {
         className: (0, _emotion.cx)(styles.button, className),
         isDisabled: isDisabled,
         startIcon: children,
@@ -83,7 +85,7 @@ function ToolbarButton(props) {
         size: "small"
     });
     if (title) {
-        return _react.createElement(_f36components.Tooltip, {
+        return /*#__PURE__*/ _react.createElement(_f36components.Tooltip, {
             className: styles.tooltip,
             placement: "bottom",
             content: title

package/dist/cjs/plugins/shared/__tests__/FetchingWrappedAssetCard.test.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _react = _interop_require_wildcard(require("react"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _fieldeditorreference = require("@contentful/field-editor-reference");
 const _fieldeditortestutils = require("@contentful/field-editor-test-utils");
 require("@testing-library/jest-dom/extend-expect");
 const _react1 = require("@testing-library/react");
-const _published_assetjson = _interop_require_default(require("../__fixtures__/published_asset.json"));
+const _published_assetjson = /*#__PURE__*/ _interop_require_default(require("../__fixtures__/published_asset.json"));
 const _FetchingWrappedAssetCard = require("../FetchingWrappedAssetCard");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -35,7 +35,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -86,17 +88,20 @@ beforeEach(()=>{
     };
 });
 test('some dropdown actions should be disabled', async ()=>{
-    const { getByTestId , queryByTestId  } = (0, _react1.render)(_react.createElement(_fieldeditorreference.EntityProvider, {
+    const { getByTestId, queryByTestId } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_fieldeditorreference.EntityProvider, {
         sdk: sdk
-    }, _react.createElement(_FetchingWrappedAssetCard.FetchingWrappedAssetCard, {
+    }, /*#__PURE__*/ _react.createElement(_FetchingWrappedAssetCard.FetchingWrappedAssetCard, {
         sdk: sdk,
         assetId: "asset-id",
         locale: "en-US",
+        // eslint-disable-next-line -- TODO: explain this disable
         onEdit: ()=>{},
+        // eslint-disable-next-line -- TODO: explain this disable
         onRemove: ()=>{},
         isDisabled: true,
         isSelected: true
     })));
+    // Assert Asset title
     await (0, _react1.waitFor)(()=>expect(getByTestId('cf-ui-asset').textContent).toBe('asset title'));
     _react1.fireEvent.click(getByTestId('cf-ui-card-actions'));
     await (0, _react1.waitFor)(()=>{

package/dist/cjs/plugins/shared/__tests__/FetchingWrappedEntryCard.test.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _react = _interop_require_wildcard(require("react"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _fieldeditorreference = require("@contentful/field-editor-reference");
 const _fieldeditortestutils = require("@contentful/field-editor-test-utils");
 require("@testing-library/jest-dom/extend-expect");
 const _react1 = require("@testing-library/react");
-const _published_content_typejson = _interop_require_default(require("../__fixtures__/published_content_type.json"));
-const _published_entryjson = _interop_require_default(require("../__fixtures__/published_entry.json"));
+const _published_content_typejson = /*#__PURE__*/ _interop_require_default(require("../__fixtures__/published_content_type.json"));
+const _published_entryjson = /*#__PURE__*/ _interop_require_default(require("../__fixtures__/published_entry.json"));
 const _FetchingWrappedEntryCard = require("../FetchingWrappedEntryCard");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -36,7 +36,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -90,17 +92,20 @@ beforeEach(()=>{
     };
 });
 test('some dropdown actions should be disabled/removed', async ()=>{
-    const { getByTestId , queryByTestId  } = (0, _react1.render)(_react.createElement(_fieldeditorreference.EntityProvider, {
+    const { getByTestId, queryByTestId } = (0, _react1.render)(/*#__PURE__*/ _react.createElement(_fieldeditorreference.EntityProvider, {
         sdk: sdk
-    }, _react.createElement(_FetchingWrappedEntryCard.FetchingWrappedEntryCard, {
+    }, /*#__PURE__*/ _react.createElement(_FetchingWrappedEntryCard.FetchingWrappedEntryCard, {
         sdk: sdk,
         entryId: "entry-id",
         locale: "en-US",
+        // eslint-disable-next-line -- TODO: explain this disable
         onEdit: ()=>{},
+        // eslint-disable-next-line -- TODO: explain this disable
         onRemove: ()=>{},
         isDisabled: true,
         isSelected: true
     })));
+    // Assert Asset title
     await (0, _react1.waitFor)(()=>expect(getByTestId('title').textContent).toBe('The best article ever'));
     _react1.fireEvent.click(getByTestId('cf-ui-card-actions'));
     await (0, _react1.waitFor)(()=>{

package/dist/cjs/plugins/shared/__tests__/FetchingWrappedResourceCard.test.js

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _react = _interop_require_wildcard(require("react"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 require("@testing-library/jest-dom/extend-expect");
 const _fieldeditorreference = require("@contentful/field-editor-reference");
 const _fieldeditortestutils = require("@contentful/field-editor-test-utils");
 const _react1 = require("@testing-library/react");
-const _published_content_typejson = _interop_require_default(require("../__fixtures__/published_content_type.json"));
-const _published_entryjson = _interop_require_default(require("../__fixtures__/published_entry.json"));
-const _spacejson = _interop_require_default(require("../__fixtures__/space.json"));
+const _published_content_typejson = /*#__PURE__*/ _interop_require_default(require("../__fixtures__/published_content_type.json"));
+const _published_entryjson = /*#__PURE__*/ _interop_require_default(require("../__fixtures__/published_entry.json"));
+const _spacejson = /*#__PURE__*/ _interop_require_default(require("../__fixtures__/space.json"));
 const _FetchingWrappedResourceCard = require("../FetchingWrappedResourceCard");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -37,7 +37,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -71,7 +73,7 @@ beforeEach(()=>{
                 get: jest.fn().mockReturnValue(_published_content_typejson.default)
             },
             Entry: {
-                get: jest.fn().mockImplementation(({ entryId  })=>{
+                get: jest.fn().mockImplementation(({ entryId })=>{
                     if (entryId === 'linked-entry-urn') {
                         return Promise.resolve(_published_entryjson.default);
                     }
@@ -108,10 +110,10 @@ beforeEach(()=>{
         }
     };
 });
-function renderResourceCard({ linkType ='Contentful:Entry' , entryUrn =resolvableEntryUrn  } = {}) {
-    return (0, _react1.render)(_react.createElement(_fieldeditorreference.EntityProvider, {
+function renderResourceCard({ linkType = 'Contentful:Entry', entryUrn = resolvableEntryUrn } = {}) {
+    return (0, _react1.render)(/*#__PURE__*/ _react.createElement(_fieldeditorreference.EntityProvider, {
         sdk: sdk
-    }, _react.createElement(_FetchingWrappedResourceCard.FetchingWrappedResourceCard, {
+    }, /*#__PURE__*/ _react.createElement(_FetchingWrappedResourceCard.FetchingWrappedResourceCard, {
         isDisabled: false,
         isSelected: false,
         sdk: sdk,
@@ -123,23 +125,23 @@ function renderResourceCard({ linkType ='Contentful:Entry' , entryUrn =resolvabl
     })));
 }
 test('renders entry card', async ()=>{
-    const { getByTestId , getByText  } = renderResourceCard();
+    const { getByTestId, getByText } = renderResourceCard();
     await (0, _react1.waitFor)(()=>expect(getByTestId('cf-ui-entry-card')).toBeDefined());
     expect(getByText(_published_entryjson.default.fields.exField.en)).toBeDefined();
     expect(getByText(_spacejson.default.name)).toBeDefined();
 });
 test('renders skeleton when no data is provided', ()=>{
-    const { getByTestId  } = renderResourceCard();
+    const { getByTestId } = renderResourceCard();
     expect(getByTestId('cf-ui-skeleton-form')).toBeDefined();
 });
 test('renders unsupported entity card when unsupported link is passed', async ()=>{
-    const { getByText  } = renderResourceCard({
+    const { getByText } = renderResourceCard({
         linkType: 'Contentful:UnsupportedLink'
     });
     await (0, _react1.waitFor)(()=>expect(getByText('Resource type Contentful:UnsupportedLink is currently not supported')).toBeDefined());
 });
 test('renders missing entity card when unknown error is returned', async ()=>{
-    const { getByTestId  } = renderResourceCard({
+    const { getByTestId } = renderResourceCard({
         entryUrn: unknownEntryUrn
     });
     await (0, _react1.waitFor)(()=>expect(getByTestId('cf-ui-missing-entry-card')).toBeDefined());

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

@@ -20,7 +20,10 @@ const isResourceLink = (link)=>!!link.sys.urn;
 const getLinkEntityId = (link)=>isResourceLink(link) ? link.sys.urn : link.sys.id;
 function truncateTitle(str, length) {
     if (typeof str === 'string' && str.length > length) {
-        return str && str.substr(0, length + 1).replace(/(\s+\S(?=\S)|\s*)\.?.$/, '…');
+        return str && str.substr(0, length + 1) // +1 to look ahead and be replaced below.
+        // Get rid of orphan letters but not one letter words (I, a, 2).
+        // Try to not have “.” as last character to avoid awkward “....”.
+        .replace(/(\s+\S(?=\S)|\s*)\.?.$/, '…');
     }
     return str;
 }

package/dist/cjs/test-utils/assertOutput.js

@@ -26,6 +26,7 @@ const assertOutput = (options)=>{
     }
     expect(editor.children).toEqual(options.expected.children);
     if (options.expected.selection !== null) {
+        // Assert cursor position
         expect(editor.selection).toEqual(options.expected.selection);
     }
 };

package/dist/cjs/test-utils/hyperscript.d.js

@@ -1 +1,2 @@
+// eslint-disable-next-line -- TODO: explain this disable
 "use strict";

package/dist/cjs/test-utils/randomId.js

@@ -1,4 +1,6 @@
-"use strict";
+/**
+ * Used to guarantee a unique editor and plugin keys for tests.
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

package/dist/cjs/test-utils/validation.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "validateRichTextDocument", {
 });
 const _richtexttypes = require("@contentful/rich-text-types");
 const _schemas = require("@contentful/rich-text-types/dist/schemas");
-const _ajv = _interop_require_default(require("ajv"));
+const _ajv = /*#__PURE__*/ _interop_require_default(require("ajv"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -75,7 +75,7 @@ function buildSchemaErrors(validateSchema, _, errors) {
     errors.push(...schemaErrors);
 }
 function resetChildNodes(node) {
-    const { content  } = node;
+    const { content } = node;
     if (isLeafNode(node)) {
         return node;
     }
@@ -84,7 +84,7 @@ function resetChildNodes(node) {
     });
 }
 function resetNode(node) {
-    const { nodeType  } = node;
+    const { nodeType } = node;
     if (_richtexttypes.helpers.isText(node)) {
         return {
             nodeType,
@@ -100,7 +100,7 @@ function resetNode(node) {
     };
 }
 function removeGrandChildNodes(node) {
-    const { content  } = node;
+    const { content } = node;
     if (isLeafNode(node)) {
         return node;
     }
@@ -119,7 +119,10 @@ function removeChildNodes(node) {
 function isLeafNode(node) {
     return _richtexttypes.helpers.isText(node) || !Array.isArray(node.content);
 }
-function removeGrandChildrenMinItemsErrors(errors) {
+/**
+ * Removes minItems errors occurred in grand-children to avoid
+ * false positives caused by the use of `removeGrandChildNodes`
+ */ function removeGrandChildrenMinItemsErrors(errors) {
     return errors.filter((error)=>{
         const level = error.instancePath.split('/').length;
         return !(level > 3 && error.keyword === 'minItems');

package/dist/esm/ContentfulEditorProvider.js

@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'react';
 import { usePlateEditorRef, usePlateEditorState } from './internal/hooks';
 export function getContentfulEditorId(sdk) {
-    const { entry , field  } = sdk;
+    const { entry, field } = sdk;
     const sys = entry.getSys();
     return `rich-text-editor-${sys.id}-${field.id}-${field.locale}`;
 }
@@ -17,11 +17,14 @@ export function useContentfulEditorId(id) {
     }
     return contextId;
 }
+// This hook re-renders when the value changes
+// Use case: Toolbar icons, for example
 export function useContentfulEditor(id) {
     const editorId = useContentfulEditorId(id);
     const editor = usePlateEditorState(editorId);
     return editor;
 }
+// This doesn't re-render when the value changes
 export function useContentfulEditorRef(id) {
     const editorId = useContentfulEditorId(id);
     const editor = usePlateEditorRef(editorId);

package/dist/esm/RichTextEditor.js

@@ -16,7 +16,7 @@ import { SyncEditorChanges } from './SyncEditorChanges';
 import Toolbar from './Toolbar';
 import StickyToolbarWrapper from './Toolbar/components/StickyToolbarWrapper';
 export const ConnectedRichTextEditor = (props)=>{
-    const { sdk , onAction , restrictedMarks  } = props;
+    const { sdk, onAction, restrictedMarks } = props;
     const id = getContentfulEditorId(sdk);
     const plugins = React.useMemo(()=>getPlugins(sdk, onAction ?? noop, restrictedMarks), [
         sdk,
@@ -37,26 +37,26 @@ export const ConnectedRichTextEditor = (props)=>{
     }) : undefined, props.maxHeight !== undefined ? css({
         maxHeight: props.maxHeight
     }) : undefined, props.isDisabled ? styles.disabled : styles.enabled, props.isToolbarHidden && styles.hiddenToolbar);
-    return React.createElement(SdkProvider, {
+    return /*#__PURE__*/ React.createElement(SdkProvider, {
         sdk: sdk
-    }, React.createElement(ContentfulEditorIdProvider, {
+    }, /*#__PURE__*/ React.createElement(ContentfulEditorIdProvider, {
         value: id
-    }, React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement("div", {
         className: styles.root,
         "data-test-id": "rich-text-editor"
-    }, React.createElement(PlateProvider, {
+    }, /*#__PURE__*/ React.createElement(PlateProvider, {
         id: id,
         initialValue: initialValue,
         plugins: plugins,
         disableCorePlugins: disableCorePlugins
-    }, !props.isToolbarHidden && React.createElement(StickyToolbarWrapper, {
+    }, !props.isToolbarHidden && /*#__PURE__*/ React.createElement(StickyToolbarWrapper, {
         isDisabled: props.isDisabled
-    }, React.createElement(Toolbar, {
+    }, /*#__PURE__*/ React.createElement(Toolbar, {
         isDisabled: props.isDisabled
-    })), React.createElement(SyncEditorChanges, {
+    })), /*#__PURE__*/ React.createElement(SyncEditorChanges, {
         incomingValue: initialValue,
         onChange: props.onChange
-    }), React.createElement(Plate, {
+    }), /*#__PURE__*/ React.createElement(Plate, {
         id: id,
         editableProps: {
             className: classNames,
@@ -65,18 +65,18 @@ export const ConnectedRichTextEditor = (props)=>{
     })))));
 };
 const RichTextEditor = (props)=>{
-    const { sdk , isInitiallyDisabled , onAction , restrictedMarks , ...otherProps } = props;
+    const { sdk, isInitiallyDisabled, onAction, restrictedMarks, ...otherProps } = props;
     const isEmptyValue = React.useCallback((value)=>!value || deepEquals(value, Contentful.EMPTY_DOCUMENT), []);
     const id = getContentfulEditorId(props.sdk);
-    return React.createElement(EntityProvider, {
+    return /*#__PURE__*/ React.createElement(EntityProvider, {
         sdk: sdk
-    }, React.createElement(FieldConnector, {
+    }, /*#__PURE__*/ React.createElement(FieldConnector, {
         debounce: 0,
         field: sdk.field,
         isInitiallyDisabled: isInitiallyDisabled,
         isEmptyValue: isEmptyValue,
         isEqualValues: deepEquals
-    }, ({ lastRemoteValue , disabled , setValue  })=>React.createElement(ConnectedRichTextEditor, {
+    }, ({ lastRemoteValue, disabled, setValue })=>/*#__PURE__*/ React.createElement(ConnectedRichTextEditor, {
             ...otherProps,
             key: `rich-text-editor-${id}`,
             value: lastRemoteValue,

package/dist/esm/RichTextEditor.styles.js

@@ -27,6 +27,7 @@ export const styles = {
                 }
             }
         },
+        // We need to reset LIC style due to conflicts between PARAGRAPH styles
         'ul > li > div': {
             margin: 0
         }

package/dist/esm/SdkProvider.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import constate from 'constate';
-function useSdk({ sdk  }) {
-    const sdkMemo = React.useMemo(()=>sdk, []);
+function useSdk({ sdk }) {
+    const sdkMemo = React.useMemo(()=>sdk, []); // eslint-disable-line -- TODO: explain this disable
     return sdkMemo;
 }
 export const [SdkProvider, useSdkContext] = constate(useSdk);

package/dist/esm/SyncEditorChanges.js

@@ -4,8 +4,12 @@ import equal from 'fast-deep-equal';
 import { createOnChangeCallback } from './helpers/callbacks';
 import { usePlateSelectors } from './internal/hooks';
 import { setEditorValue } from './internal/transforms';
-const useAcceptIncomingChanges = (incomingValue)=>{
+/**
+ * A hook responsible for keeping the editor state in sync with incoming
+ * changes (aka. external updates
+ */ const useAcceptIncomingChanges = (incomingValue)=>{
     const editor = usePlateSelectors().editor();
+    // Cache latest editor value to avoid unnecessary updates
     const lastIncomingValue = React.useRef(incomingValue);
     React.useEffect(()=>{
         if (equal(lastIncomingValue.current, incomingValue)) {
@@ -18,13 +22,16 @@ const useAcceptIncomingChanges = (incomingValue)=>{
         incomingValue
     ]);
 };
-const useOnValueChanged = (onChange)=>{
+/**
+ * Attaches a custom onChange callback that
+ */ const useOnValueChanged = (onChange)=>{
     const editor = usePlateSelectors().editor();
     const setEditorOnChange = usePlateActions().onChange();
     React.useEffect(()=>{
         const cb = createOnChangeCallback(onChange);
         setEditorOnChange({
             fn: (document)=>{
+                // Skip irrelevant events e.g. mouse selection
                 const operations = editor?.operations.filter((op)=>{
                     return op.type !== 'set_selection';
                 });
@@ -40,7 +47,15 @@ const useOnValueChanged = (onChange)=>{
         setEditorOnChange
     ]);
 };
-export const SyncEditorChanges = ({ incomingValue , onChange  })=>{
+/**
+ * A void component that's responsible for keeping the editor
+ * state in sync with incoming changes (aka. external updates) and
+ * triggering onChange events.
+ *
+ * This component is a hack to work around the limitation of Plate v17+
+ * where we can no longer access the editor instance outside the Plate
+ * provider.
+ */ export const SyncEditorChanges = ({ incomingValue, onChange })=>{
     useAcceptIncomingChanges(incomingValue);
     useOnValueChanged(onChange);
     return null;

package/dist/esm/Toolbar/_tests_/toolbar.test.js

@@ -37,13 +37,13 @@ describe('Toolbar', ()=>{
     test('everything on the toolbar should be disabled', async ()=>{
         const sdk = mockSdk();
         const id = getContentfulEditorId(sdk);
-        const { getByTestId  } = render(React.createElement(Plate, {
+        const { getByTestId } = render(/*#__PURE__*/ React.createElement(Plate, {
             id: id
-        }, React.createElement(SdkProvider, {
+        }, /*#__PURE__*/ React.createElement(SdkProvider, {
             sdk: sdk
-        }, React.createElement(ContentfulEditorIdProvider, {
+        }, /*#__PURE__*/ React.createElement(ContentfulEditorIdProvider, {
             value: id
-        }, React.createElement(Toolbar, {
+        }, /*#__PURE__*/ React.createElement(Toolbar, {
             isDisabled: true
         })))));
         await waitFor(()=>{
@@ -71,13 +71,13 @@ describe('Toolbar', ()=>{
                 MARKS.SUPERSCRIPT
             ]);
             const id = getContentfulEditorId(sdk);
-            const { queryByTestId  } = render(React.createElement(Plate, {
+            const { queryByTestId } = render(/*#__PURE__*/ React.createElement(Plate, {
                 id: id
-            }, React.createElement(SdkProvider, {
+            }, /*#__PURE__*/ React.createElement(SdkProvider, {
                 sdk: sdk
-            }, React.createElement(ContentfulEditorIdProvider, {
+            }, /*#__PURE__*/ React.createElement(ContentfulEditorIdProvider, {
                 value: id
-            }, React.createElement(Toolbar, {
+            }, /*#__PURE__*/ React.createElement(Toolbar, {
                 isDisabled: true
             })))));
             expect(queryByTestId('dropdown-toolbar-button')).toBeVisible();
@@ -89,13 +89,13 @@ describe('Toolbar', ()=>{
                 MARKS.CODE
             ]);
             const id = getContentfulEditorId(sdk);
-            const { queryByTestId  } = render(React.createElement(Plate, {
+            const { queryByTestId } = render(/*#__PURE__*/ React.createElement(Plate, {
                 id: id
-            }, React.createElement(SdkProvider, {
+            }, /*#__PURE__*/ React.createElement(SdkProvider, {
                 sdk: sdk
-            }, React.createElement(ContentfulEditorIdProvider, {
+            }, /*#__PURE__*/ React.createElement(ContentfulEditorIdProvider, {
                 value: id
-            }, React.createElement(Toolbar, {
+            }, /*#__PURE__*/ React.createElement(Toolbar, {
                 isDisabled: true
             })))));
             expect(queryByTestId('dropdown-toolbar-button')).not.toBeInTheDocument();