@contentful/field-editor-rich-text 2.3.6 → 2.3.7

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.3.7](https://github.com/contentful/field-editors/compare/@contentful/field-editor-rich-text@2.3.6...@contentful/field-editor-rich-text@2.3.7) (2022-07-19)
+
+### Bug Fixes
+
+- **rich-text:** avoid unnecessary render of reference cards ([#1189](https://github.com/contentful/field-editors/issues/1189)) ([b253014](https://github.com/contentful/field-editors/commit/b2530144857ea9b82259c6fbae02875f0692a62a))
+
 ## [2.3.6](https://github.com/contentful/field-editors/compare/@contentful/field-editor-rich-text@2.3.5...@contentful/field-editor-rich-text@2.3.6) (2022-07-19)
 
 **Note:** Version bump only for package @contentful/field-editor-rich-text

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

@@ -2186,6 +2186,27 @@ function useFetchedEntity(_ref) {
   return entity;
 }
 
+/**
+ * A userland implementation of useEvent RFC
+ *
+ * See: https://github.com/reactjs/rfcs/pull/220
+ */
+
+var useStableCallback = function useStableCallback(callback) {
+  var callbackRef = React.useRef(callback); // Makes sure the callbackRef points to the latest `callback` props
+  // The useLayoutEffect is here for concurrent safety. It has the
+  // disadvantage of not being able to use the result callback during
+  // the render but that's Ok.
+
+  React.useLayoutEffect(function () {
+    callbackRef.current = callback;
+  }); // The stable callback that won't change
+
+  return React.useCallback(function () {
+    return callbackRef.current.apply(callbackRef, arguments);
+  }, []);
+};
+
 var InternalAssetCard = /*#__PURE__*/React.memo(function (props) {
   if (props.asset === undefined) {
     return /*#__PURE__*/React.createElement(f36Components.AssetCard, {
@@ -2221,8 +2242,11 @@ function FetchingWrappedAssetCard(props) {
       assetId = props.assetId;
 
   var _useEntities = fieldEditorReference.useEntities(),
-      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions;
+      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions; // FIXME: remove when useEntities() has been refactored to avoid
+  // unnecessary re-rendering
 
+
+  var stableLoadEntityScheduledActions = useStableCallback(loadEntityScheduledActions);
   var asset = useFetchedEntity({
     type: 'Asset',
     id: assetId,
@@ -2233,7 +2257,7 @@ function FetchingWrappedAssetCard(props) {
     sdk: props.sdk,
     isDisabled: props.isDisabled,
     isSelected: props.isSelected,
-    loadEntityScheduledActions: loadEntityScheduledActions,
+    loadEntityScheduledActions: stableLoadEntityScheduledActions,
     locale: props.locale,
     onEdit: props.onEdit,
     onRemove: props.onRemove
@@ -2283,8 +2307,11 @@ var FetchingWrappedEntryCard = function FetchingWrappedEntryCard(props) {
       onEntityFetchComplete = props.onEntityFetchComplete;
 
   var _useEntities = fieldEditorReference.useEntities(),
-      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions;
+      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions; // FIXME: remove when useEntities() has been refactored to avoid
+  // unnecessary re-rendering
+
 
+  var stableLoadEntityScheduledActions = useStableCallback(loadEntityScheduledActions);
   var entry = useFetchedEntity({
     type: 'Entry',
     id: entryId,
@@ -2298,7 +2325,7 @@ var FetchingWrappedEntryCard = function FetchingWrappedEntryCard(props) {
     isSelected: props.isSelected,
     onEdit: props.onEdit,
     onRemove: props.onRemove,
-    loadEntityScheduledActions: loadEntityScheduledActions
+    loadEntityScheduledActions: stableLoadEntityScheduledActions
   });
 };