@contentful/field-editor-rich-text 2.0.0-next.41 → 2.0.0-next.44

package/dist/field-editor-rich-text.cjs.development.js

@@ -11,7 +11,7 @@ var fieldEditorShared = require('@contentful/field-editor-shared');
 var Contentful = require('@contentful/rich-text-types');
 var plateCore = require('@udecode/plate-core');
 var emotion = require('emotion');
-var deepEquals = _interopDefault(require('fast-deep-equal'));
+var areEqual = _interopDefault(require('fast-deep-equal'));
 var noop = _interopDefault(require('lodash/noop'));
 var plateSerializerDocx = require('@udecode/plate-serializer-docx');
 var plateBreak = require('@udecode/plate-break');
@@ -400,17 +400,8 @@ function getParents(el) {
   return parents;
 }
 
-// "modern" Edge was released at 79.x
-var IS_EDGE_LEGACY = typeof navigator !== 'undefined' && /*#__PURE__*/ /Edge?\/(?:[0-6][0-9]|[0-7][0-8])/i.test(navigator.userAgent); // Native `beforeInput` events don't work well with react on Chrome 75
-// and older, Chrome 76+ can use `beforeInput` though.
-
-var IS_CHROME_LEGACY = typeof navigator !== 'undefined' && /*#__PURE__*/ /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])/i.test(navigator.userAgent); // COMPAT: Firefox/Edge Legacy don't support the `beforeinput` event
-// Chrome Legacy doesn't support `beforeinput` correctly
-
-var HAS_BEFORE_INPUT_SUPPORT = !IS_CHROME_LEGACY && !IS_EDGE_LEGACY && // globalThis is undefined in older browsers
-typeof globalThis !== 'undefined' && globalThis.InputEvent && typeof globalThis.InputEvent.prototype.getTargetRanges === 'function'; // The `getTargetRanges` property isn't recognized.
-
 var IS_SAFARI = typeof navigator !== 'undefined' && /*#__PURE__*/ /Version\/[\d.]+.*Safari/.test(navigator.userAgent);
+var IS_CHROME = /*#__PURE__*/ /(?!Chrom.*OPR)Chrom(?:e|ium)\/([0-9.]+)(:?\s|$)/.test(navigator.userAgent);
 
 var LINK_TYPES = [Contentful.INLINES.HYPERLINK, Contentful.INLINES.ENTRY_HYPERLINK, Contentful.INLINES.ASSET_HYPERLINK];
 function isBlockSelected(editor, type) {
@@ -638,26 +629,56 @@ var _constate = /*#__PURE__*/constate(useSdk),
     SdkProvider = _constate[0],
     useSdkContext = _constate[1];
 
-function FetchingWrappedAssetCard(props) {
-  var onEntityFetchComplete = props.onEntityFetchComplete,
-      assetId = props.assetId;
+function useFetchedEntity(_ref) {
+  var type = _ref.type,
+      id = _ref.id,
+      onEntityFetchComplete = _ref.onEntityFetchComplete;
 
   var _useEntities = fieldEditorReference.useEntities(),
-      getOrLoadAsset = _useEntities.getOrLoadAsset,
-      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions,
-      assets = _useEntities.assets;
+      entries = _useEntities.entries,
+      assets = _useEntities.assets,
+      getOrLoadEntry = _useEntities.getOrLoadEntry,
+      getOrLoadAsset = _useEntities.getOrLoadAsset;
+
+  var store = type === 'Entry' ? entries : assets;
+
+  var _useState = React.useState(store[id]),
+      entity = _useState[0],
+      setEntity = _useState[1]; // Deep compare the entity value to keep re-rendering to minimal
+
 
   React.useEffect(function () {
-    getOrLoadAsset(assetId);
-  }, [getOrLoadAsset, assetId]);
-  var asset = assets[assetId];
+    var newValue = store[id];
+
+    if (!areEqual(entity, newValue)) {
+      setEntity(newValue);
+    }
+  }, [store, entity, id]); // Fetch the entity if needed
+
   React.useEffect(function () {
-    if (asset) {
+    (type === 'Entry' ? getOrLoadEntry : getOrLoadAsset)(id); // "getOrLoadEntry" and "getOrLoadAsset" instances change with every
+    // entity store update causing page lag on initial load
+    // TODO: consider rewriting useEntities() hook to avoid that happening in
+    // first place.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [type, id]);
+  React.useEffect(function () {
+    if (entity) {
       onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
     }
-  }, [onEntityFetchComplete, asset]);
+  }, [onEntityFetchComplete, entity]);
+  return entity;
+}
+
+var InternalAssetCard = /*#__PURE__*/React.memo(function (props) {
+  if (props.asset === undefined) {
+    return /*#__PURE__*/React.createElement(f36Components.AssetCard, {
+      size: "default",
+      isLoading: true
+    });
+  }
 
-  if (asset === 'failed') {
+  if (props.asset === 'failed') {
     return /*#__PURE__*/React.createElement(fieldEditorReference.MissingEntityCard, {
       entityType: "Asset",
       isDisabled: props.isDisabled,
@@ -665,45 +686,48 @@ function FetchingWrappedAssetCard(props) {
     });
   }
 
-  if (asset === undefined) {
-    return /*#__PURE__*/React.createElement(f36Components.AssetCard, {
-      size: "default",
-      isLoading: true
-    });
-  }
-
   return /*#__PURE__*/React.createElement(fieldEditorReference.WrappedAssetCard, {
-    getEntityScheduledActions: loadEntityScheduledActions,
+    getEntityScheduledActions: props.loadEntityScheduledActions,
     size: "small",
     isSelected: props.isSelected,
     isDisabled: props.isDisabled,
     localeCode: props.locale,
     defaultLocaleCode: props.sdk.locales["default"],
-    asset: asset,
+    asset: props.asset,
     onEdit: props.onEdit,
     onRemove: props.isDisabled ? undefined : props.onRemove,
     isClickable: false
   });
-}
-
-function FetchingWrappedEntryCard(props) {
-  var entryId = props.entryId,
-      onEntityFetchComplete = props.onEntityFetchComplete;
+}, areEqual);
+InternalAssetCard.displayName = 'InternalAssetCard';
+function FetchingWrappedAssetCard(props) {
+  var onEntityFetchComplete = props.onEntityFetchComplete,
+      assetId = props.assetId;
 
   var _useEntities = fieldEditorReference.useEntities(),
-      getOrLoadEntry = _useEntities.getOrLoadEntry,
-      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions,
-      entries = _useEntities.entries;
+      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions;
 
-  React.useEffect(function () {
-    getOrLoadEntry(entryId);
-  }, [getOrLoadEntry, entryId]);
-  var entry = entries[entryId];
-  React.useEffect(function () {
-    if (entry) {
-      onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
-    }
-  }, [onEntityFetchComplete, entry]);
+  var asset = useFetchedEntity({
+    type: 'Asset',
+    id: assetId,
+    onEntityFetchComplete: onEntityFetchComplete
+  });
+  return /*#__PURE__*/React.createElement(InternalAssetCard, {
+    asset: asset,
+    sdk: props.sdk,
+    isDisabled: props.isDisabled,
+    isSelected: props.isSelected,
+    loadEntityScheduledActions: loadEntityScheduledActions,
+    locale: props.locale,
+    onEdit: props.onEdit,
+    onRemove: props.onRemove
+  });
+}
+
+var InternalEntryCard = /*#__PURE__*/React.memo(function (props) {
+  var entry = props.entry,
+      sdk = props.sdk,
+      loadEntityScheduledActions = props.loadEntityScheduledActions;
 
   if (entry === undefined) {
     return /*#__PURE__*/React.createElement(f36Components.EntryCard, {
@@ -719,7 +743,7 @@ function FetchingWrappedEntryCard(props) {
     });
   }
 
-  var contentType = props.sdk.space.getCachedContentTypes().find(function (contentType) {
+  var contentType = sdk.space.getCachedContentTypes().find(function (contentType) {
     return contentType.sys.id === entry.sys.contentType.sys.id;
   });
   return /*#__PURE__*/React.createElement(fieldEditorReference.WrappedEntryCard, {
@@ -736,7 +760,31 @@ function FetchingWrappedEntryCard(props) {
     onRemove: props.isDisabled ? undefined : props.onRemove,
     isClickable: false
   });
-}
+}, areEqual);
+InternalEntryCard.displayName = 'ReferenceCard';
+var FetchingWrappedEntryCard = function FetchingWrappedEntryCard(props) {
+  var entryId = props.entryId,
+      onEntityFetchComplete = props.onEntityFetchComplete;
+
+  var _useEntities = fieldEditorReference.useEntities(),
+      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions;
+
+  var entry = useFetchedEntity({
+    type: 'Entry',
+    id: entryId,
+    onEntityFetchComplete: onEntityFetchComplete
+  });
+  return /*#__PURE__*/React.createElement(InternalEntryCard, {
+    entry: entry,
+    sdk: props.sdk,
+    locale: props.locale,
+    isDisabled: props.isDisabled,
+    isSelected: props.isSelected,
+    onEdit: props.onEdit,
+    onRemove: props.onRemove,
+    loadEntityScheduledActions: loadEntityScheduledActions
+  });
+};
 
 var styles = {
   root: /*#__PURE__*/emotion.css({
@@ -763,33 +811,30 @@ function LinkedEntityBlock(props) {
   var _element$data$target$ = element.data.target.sys,
       entityId = _element$data$target$.id,
       entityType = _element$data$target$.linkType;
-
-  var handleEditClick = function handleEditClick() {
+  var handleEditClick = React__default.useCallback(function () {
     var openEntity = entityType === 'Asset' ? sdk.navigator.openAsset : sdk.navigator.openEntry;
     return openEntity(entityId, {
       slideIn: true
     });
-  };
-
-  var handleRemoveClick = function handleRemoveClick() {
+  }, [sdk, entityId, entityType]);
+  var handleRemoveClick = React__default.useCallback(function () {
     if (!editor) return;
     var pathToElement = Slate.ReactEditor.findPath(editor, element);
     slate.Transforms.removeNodes(editor, {
       at: pathToElement
     });
-  };
-
+  }, [editor, element]);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
     className: styles.root,
     "data-entity-type": entityType,
     "data-entity-id": entityId,
     // COMPAT: This makes copy & paste work for Firefox
-    contentEditable: !HAS_BEFORE_INPUT_SUPPORT ? false : undefined,
-    draggable: !HAS_BEFORE_INPUT_SUPPORT ? true : undefined
+    contentEditable: IS_CHROME ? undefined : false,
+    draggable: IS_CHROME ? true : undefined
   }), /*#__PURE__*/React__default.createElement("div", {
     // COMPAT: This makes copy & paste work for Chromium/Blink browsers and Safari
-    contentEditable: HAS_BEFORE_INPUT_SUPPORT ? false : undefined,
-    draggable: HAS_BEFORE_INPUT_SUPPORT ? true : undefined,
+    contentEditable: IS_CHROME ? false : undefined,
+    draggable: IS_CHROME ? true : undefined,
     className: styles.container
   }, entityType === 'Entry' && /*#__PURE__*/React__default.createElement(FetchingWrappedEntryCard, {
     sdk: sdk,
@@ -2043,12 +2088,12 @@ function EmbeddedEntityInline(props) {
     className: styles$3.root,
     "data-embedded-entity-inline-id": entryId,
     // COMPAT: This makes copy & paste work for Firefox
-    contentEditable: !HAS_BEFORE_INPUT_SUPPORT ? false : undefined,
-    draggable: !HAS_BEFORE_INPUT_SUPPORT ? true : undefined
+    contentEditable: IS_CHROME ? undefined : false,
+    draggable: IS_CHROME ? true : undefined
   }), /*#__PURE__*/React.createElement("span", {
     // COMPAT: This makes copy & paste work for Chromium/Blink browsers and Safari
-    contentEditable: HAS_BEFORE_INPUT_SUPPORT ? false : undefined,
-    draggable: HAS_BEFORE_INPUT_SUPPORT ? true : undefined
+    contentEditable: IS_CHROME ? false : undefined,
+    draggable: IS_CHROME ? true : undefined
   }, /*#__PURE__*/React.createElement(FetchingWrappedInlineEntryCard, {
     sdk: sdk,
     entryId: entryId,
@@ -6957,7 +7002,7 @@ var RichTextEditor = function RichTextEditor(props) {
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   var isEmptyValue = React.useCallback(function (value) {
-    return !value || deepEquals(value, Contentful.EMPTY_DOCUMENT);
+    return !value || areEqual(value, Contentful.EMPTY_DOCUMENT);
   }, []);
   var id = getContentfulEditorId(props.sdk);
   return /*#__PURE__*/React__default.createElement(fieldEditorReference.EntityProvider, {
@@ -6967,7 +7012,7 @@ var RichTextEditor = function RichTextEditor(props) {
     field: sdk.field,
     isInitiallyDisabled: isInitiallyDisabled,
     isEmptyValue: isEmptyValue,
-    isEqualValues: deepEquals
+    isEqualValues: areEqual
   }, function (_ref) {
     var lastRemoteValue = _ref.lastRemoteValue,
         disabled = _ref.disabled,