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

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

@@ -1,10 +1,10 @@
-import React__default, { createContext, useContext, useMemo, useEffect, createElement, useState, memo, Fragment, useCallback } from 'react';
+import React__default, { createContext, useContext, useMemo, useState, useEffect, memo, createElement, Fragment, useCallback } 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';
 import { usePlateEditorRef, usePlateEditorState, getNodes, toggleNodeType, getText, getAbove, setNodes, isAncestorEmpty, match, getLastChildPath, wrapNodes, getPluginType, unwrapNodes, isCollapsed, isRangeAcrossBlocks, ELEMENT_DEFAULT, findNode, getParent, getBlockAbove, isSelectionAtBlockStart, isSelectionAtBlockEnd, isFirstChild, insertNodes, moveChildren, isBlockAboveEmpty, mockPlugin, deleteFragment, isMarkActive, toggleMark, someHtmlElement, KEY_DESERIALIZE_HTML, hasSingleChild, isLastChild, someNode, getChildren as getChildren$1, queryNode, createDeserializeHtmlPlugin, createDeserializeAstPlugin, createPlateEditor, getPlateSelectors, getPlateActions, Plate } from '@udecode/plate-core';
 import { css, cx } from 'emotion';
-import deepEquals from 'fast-deep-equal';
+import areEqual from 'fast-deep-equal';
 import noop from 'lodash-es/noop';
 import { createDeserializeDocxPlugin } from '@udecode/plate-serializer-docx';
 import { createSoftBreakPlugin as createSoftBreakPlugin$1, createExitBreakPlugin as createExitBreakPlugin$1 } from '@udecode/plate-break';
@@ -393,17 +393,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 = [INLINES.HYPERLINK, INLINES.ENTRY_HYPERLINK, INLINES.ASSET_HYPERLINK];
 function isBlockSelected(editor, type) {
@@ -631,26 +622,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 = 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 = useState(store[id]),
+      entity = _useState[0],
+      setEntity = _useState[1]; // Deep compare the entity value to keep re-rendering to minimal
+
 
   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
+
   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]);
+  useEffect(function () {
+    if (entity) {
       onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
     }
-  }, [onEntityFetchComplete, asset]);
+  }, [onEntityFetchComplete, entity]);
+  return entity;
+}
+
+var InternalAssetCard = /*#__PURE__*/memo(function (props) {
+  if (props.asset === undefined) {
+    return /*#__PURE__*/createElement(AssetCard, {
+      size: "default",
+      isLoading: true
+    });
+  }
 
-  if (asset === 'failed') {
+  if (props.asset === 'failed') {
     return /*#__PURE__*/createElement(MissingEntityCard, {
       entityType: "Asset",
       isDisabled: props.isDisabled,
@@ -658,45 +679,48 @@ function FetchingWrappedAssetCard(props) {
     });
   }
 
-  if (asset === undefined) {
-    return /*#__PURE__*/createElement(AssetCard, {
-      size: "default",
-      isLoading: true
-    });
-  }
-
   return /*#__PURE__*/createElement(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 = useEntities(),
-      getOrLoadEntry = _useEntities.getOrLoadEntry,
-      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions,
-      entries = _useEntities.entries;
+      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions;
 
-  useEffect(function () {
-    getOrLoadEntry(entryId);
-  }, [getOrLoadEntry, entryId]);
-  var entry = entries[entryId];
-  useEffect(function () {
-    if (entry) {
-      onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
-    }
-  }, [onEntityFetchComplete, entry]);
+  var asset = useFetchedEntity({
+    type: 'Asset',
+    id: assetId,
+    onEntityFetchComplete: onEntityFetchComplete
+  });
+  return /*#__PURE__*/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__*/memo(function (props) {
+  var entry = props.entry,
+      sdk = props.sdk,
+      loadEntityScheduledActions = props.loadEntityScheduledActions;
 
   if (entry === undefined) {
     return /*#__PURE__*/createElement(EntryCard, {
@@ -712,7 +736,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__*/createElement(WrappedEntryCard, {
@@ -729,7 +753,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 = useEntities(),
+      loadEntityScheduledActions = _useEntities.loadEntityScheduledActions;
+
+  var entry = useFetchedEntity({
+    type: 'Entry',
+    id: entryId,
+    onEntityFetchComplete: onEntityFetchComplete
+  });
+  return /*#__PURE__*/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__*/css({
@@ -756,33 +804,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 = ReactEditor.findPath(editor, element);
     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,
@@ -2036,12 +2081,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__*/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__*/createElement(FetchingWrappedInlineEntryCard, {
     sdk: sdk,
     entryId: entryId,
@@ -6950,7 +6995,7 @@ var RichTextEditor = function RichTextEditor(props) {
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   var isEmptyValue = useCallback(function (value) {
-    return !value || deepEquals(value, EMPTY_DOCUMENT);
+    return !value || areEqual(value, EMPTY_DOCUMENT);
   }, []);
   var id = getContentfulEditorId(props.sdk);
   return /*#__PURE__*/React__default.createElement(EntityProvider, {
@@ -6960,7 +7005,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,