@contentful/field-editor-rich-text 2.3.5 → 2.3.8

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';
@@ -366,6 +366,10 @@ var _constate = /*#__PURE__*/constate(useSdk),
 var useCommandList = function useCommandList(commandItems, container) {
   var _React$useState = useState(function () {
     // select the first item on initial render
+    if (!commandItems.length) {
+      return '';
+    }
+
     if ('group' in commandItems[0]) {
       return commandItems[0].commands[0].id;
     }
@@ -2179,6 +2183,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 +2239,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 +2254,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 +2304,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 +2322,7 @@ var FetchingWrappedEntryCard = function FetchingWrappedEntryCard(props) {
     isSelected: props.isSelected,
     onEdit: props.onEdit,
     onRemove: props.onRemove,
-    loadEntityScheduledActions: loadEntityScheduledActions
+    loadEntityScheduledActions: stableLoadEntityScheduledActions
   });
 };