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

package/dist/field-editor-rich-text.esm.js

@@ -1,4 +1,4 @@
-import React__default, { createContext, useContext, useMemo, useState, useEffect, useRef, createElement, Fragment, memo, useCallback } from 'react';
+import React__default, { createContext, useContext, useMemo, useState, useEffect, useRef, createElement, Fragment, useCallback, useLayoutEffect, memo } from 'react';
 import { useEntities, MissingEntityCard, WrappedAssetCard, WrappedEntryCard, ScheduledIconWithTooltip, EntityProvider, getScheduleTooltipContent } from '@contentful/field-editor-reference';
 import { entityHelpers, ModalDialogLauncher, FieldConnector } from '@contentful/field-editor-shared';
 import { BLOCKS, INLINES, TEXT_CONTAINERS, HEADINGS, LIST_ITEM_BLOCKS, MARKS, CONTAINERS, TOP_LEVEL_BLOCKS, VOID_BLOCKS, EMPTY_DOCUMENT } from '@contentful/rich-text-types';
@@ -2179,6 +2179,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 = 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.
+
+  useLayoutEffect(function () {
+    callbackRef.current = callback;
+  }); // The stable callback that won't change
+
+  return useCallback(function () {
+    return callbackRef.current.apply(callbackRef, arguments);
+  }, []);
+};
+
 var InternalAssetCard = /*#__PURE__*/memo(function (props) {
   if (props.asset === undefined) {
     return /*#__PURE__*/createElement(AssetCard, {
@@ -2214,8 +2235,11 @@ function FetchingWrappedAssetCard(props) {
       assetId = props.assetId;
 
   var _useEntities = 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,
@@ -2226,7 +2250,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
@@ -2276,8 +2300,11 @@ var FetchingWrappedEntryCard = function FetchingWrappedEntryCard(props) {
       onEntityFetchComplete = props.onEntityFetchComplete;
 
   var _useEntities = 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,
@@ -2291,7 +2318,7 @@ var FetchingWrappedEntryCard = function FetchingWrappedEntryCard(props) {
     isSelected: props.isSelected,
     onEdit: props.onEdit,
     onRemove: props.onRemove,
-    loadEntityScheduledActions: loadEntityScheduledActions
+    loadEntityScheduledActions: stableLoadEntityScheduledActions
   });
 };