@contentful/field-editor-rich-text 2.0.0-next.20 → 2.0.0-next.21

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

@@ -1,5 +1,5 @@
 import React__default, { createContext, useContext, useMemo, createElement, useEffect, useState, memo, Fragment, useCallback } from 'react';
-import { useEntities, ScheduledIconWithTooltip, MissingEntityCard, AssetThumbnail, getScheduleTooltipContent, EntityProvider } from '@contentful/field-editor-reference';
+import { useEntities, ScheduledIconWithTooltip, MissingEntityCard, AssetThumbnail, EntityProvider, getScheduleTooltipContent } from '@contentful/field-editor-reference';
 import { entityHelpers, shortenStorageUnit, isValidImage, ModalDialogLauncher, FieldConnector } from '@contentful/field-editor-shared';
 import { BLOCKS, INLINES, TABLE_BLOCKS, TEXT_CONTAINERS, HEADINGS, LIST_ITEM_BLOCKS, MARKS, CONTAINERS, TOP_LEVEL_BLOCKS, VOID_BLOCKS, EMPTY_DOCUMENT } from '@contentful/rich-text-types';
 import { usePlateEditorState, usePlateEditorRef, getNodes, toggleNodeType, getText, getAbove, setNodes, isAncestorEmpty, getParent, getBlockAbove, isSelectionAtBlockStart, isSelectionAtBlockEnd, isFirstChild, insertNodes, moveChildren, isBlockAboveEmpty, mockPlugin, getPluginType, ELEMENT_DEFAULT, findNode, unwrapNodes, deleteFragment, isCollapsed, isRangeAcrossBlocks, wrapNodes, isMarkActive, toggleMark, someHtmlElement, match, KEY_DESERIALIZE_HTML, hasSingleChild, isLastChild, someNode, getChildren as getChildren$1, getLastChildPath, createDeserializeHtmlPlugin, createDeserializeAstPlugin, createPlateEditor, getPlateActions, Plate } from '@udecode/plate-core';
@@ -2270,15 +2270,7 @@ function FetchingWrappedInlineEntryCard(props) {
   return /*#__PURE__*/React__default.createElement(InlineEntryCard, {
     testId: INLINES.EMBEDDED_ENTRY,
     isSelected: props.isSelected,
-    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", null, contentTypeName, " ", title), /*#__PURE__*/React__default.createElement(ScheduledIconWithTooltip, {
-      getEntityScheduledActions: loadEntityScheduledActions,
-      entityType: "Entry",
-      entityId: entry.sys.id
-    }, /*#__PURE__*/React__default.createElement(ClockIcon, {
-      className: styles$5.scheduledIcon,
-      variant: "muted",
-      testId: "scheduled-icon"
-    }))),
+    title: contentTypeName + ": " + title,
     status: status,
     actions: [/*#__PURE__*/React__default.createElement(MenuItem, {
       key: "edit",
@@ -2290,7 +2282,15 @@ function FetchingWrappedInlineEntryCard(props) {
       disabled: props.isDisabled,
       testId: "card-action-remove"
     }, "Remove")]
-  });
+  }, /*#__PURE__*/React__default.createElement(ScheduledIconWithTooltip, {
+    getEntityScheduledActions: loadEntityScheduledActions,
+    entityType: "Entry",
+    entityId: entry.sys.id
+  }, /*#__PURE__*/React__default.createElement(ClockIcon, {
+    className: styles$5.scheduledIcon,
+    variant: "muted",
+    testId: "scheduled-icon"
+  })), /*#__PURE__*/React__default.createElement(Text$1, null, title));
 }
 
 function createInlineEntryNode(id) {
@@ -2972,159 +2972,6 @@ var createHrPlugin = function createHrPlugin() {
   };
 };
 
-function truncate(str, length) {
-  if (typeof str === 'string' && str.length > length) {
-    return str && str.substr(0, length + 1) // +1 to look ahead and be replaced below.
-    // Get rid of orphan letters but not one letter words (I, a, 2).
-    // Try to not have “.” as last character to avoid awkward “....”.
-    .replace(/(\s+\S(?=\S)|\s*)\.?.$/, '…');
-  }
-
-  return str;
-}
-
-function getEntityInfo(_ref) {
-  var entityTitle = _ref.entityTitle,
-      entityStatus = _ref.entityStatus,
-      contentTypeName = _ref.contentTypeName;
-  var title = truncate(entityTitle, 60) || 'Untitled';
-  return (contentTypeName || 'Asset') + " \"" + title + "\", " + entityStatus;
-}
-
-function EntryAssetTooltip(_ref2) {
-  var id = _ref2.id,
-      type = _ref2.type,
-      sdk = _ref2.sdk;
-
-  var _React$useState = useState(''),
-      entityTitle = _React$useState[0],
-      setEntityTitle = _React$useState[1];
-
-  var _React$useState2 = useState(''),
-      entityStatus = _React$useState2[0],
-      setEntityStatus = _React$useState2[1];
-
-  var _React$useState3 = useState([]),
-      jobs = _React$useState3[0],
-      setJobs = _React$useState3[1];
-
-  var _React$useState4 = useState(true),
-      isLoading = _React$useState4[0],
-      setIsLoading = _React$useState4[1];
-
-  var _React$useState5 = useState(false),
-      hasError = _React$useState5[0],
-      setHasError = _React$useState5[1];
-
-  useEffect(function () {
-    function loadContent() {
-      return _loadContent.apply(this, arguments);
-    }
-
-    function _loadContent() {
-      _loadContent = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-        var actions, contentType, entity, contentTypeId, contentTypes, _entityTitle, _jobs, _entityStatus;
-
-        return runtime_1.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _context.prev = 0;
-                setIsLoading(true);
-                setHasError(false);
-                actions = {
-                  Asset: {
-                    getEntity: sdk.space.getAsset,
-                    getEntityTitle: function getEntityTitle(args) {
-                      return entityHelpers.getAssetTitle(_extends({}, args, {
-                        asset: args.entity
-                      }));
-                    }
-                  },
-                  Entry: {
-                    getEntity: sdk.space.getEntry,
-                    getEntityTitle: function getEntityTitle(args) {
-                      return entityHelpers.getEntryTitle(_extends({}, args, {
-                        entry: args.entity
-                      }));
-                    }
-                  }
-                };
-                _context.next = 6;
-                return actions[type].getEntity(id);
-
-              case 6:
-                entity = _context.sent;
-
-                if (entity.sys.contentType) {
-                  contentTypeId = entity.sys.contentType.sys.id;
-                  contentTypes = sdk.space.getCachedContentTypes();
-                  contentType = contentTypes.find(function (ct) {
-                    return ct.sys.id === contentTypeId;
-                  });
-                }
-
-                _entityTitle = actions[type].getEntityTitle({
-                  entity: entity,
-                  contentType: contentType,
-                  localeCode: sdk.field.locale,
-                  defaultLocaleCode: sdk.locales["default"],
-                  entityType: type
-                });
-                _context.next = 11;
-                return sdk.space.getEntityScheduledActions(type, id);
-
-              case 11:
-                _jobs = _context.sent;
-                _entityStatus = entityHelpers.getEntryStatus(entity.sys);
-                setEntityTitle(_entityTitle);
-                setEntityStatus(_entityStatus);
-                setJobs(_jobs);
-                _context.next = 22;
-                break;
-
-              case 18:
-                _context.prev = 18;
-                _context.t0 = _context["catch"](0);
-                console.log(_context.t0);
-                setHasError(true);
-
-              case 22:
-                _context.prev = 22;
-                setIsLoading(false);
-                return _context.finish(22);
-
-              case 25:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, null, [[0, 18, 22, 25]]);
-      }));
-      return _loadContent.apply(this, arguments);
-    }
-
-    loadContent();
-  }, [id, type, sdk]);
-
-  if (isLoading) {
-    return /*#__PURE__*/createElement(Fragment, null, "Loading " + type.toLowerCase() + "...");
-  }
-
-  if (hasError) {
-    return /*#__PURE__*/createElement(Fragment, null, type + " missing or inaccessible");
-  }
-
-  return /*#__PURE__*/createElement(Fragment, null, getEntityInfo({
-    entityTitle: entityTitle,
-    contentTypeName: type,
-    entityStatus: entityStatus
-  }), ' ', jobs.length > 0 ? getScheduleTooltipContent({
-    job: jobs[0],
-    jobsCount: jobs.length
-  }) : '');
-}
-
 var _templateObject$3, _SYS_LINK_TYPES, _LINK_TYPE_SELECTION_;
 var styles$b = {
   removeSelectionLabel: /*#__PURE__*/css(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    margin-left: ", ";\n  "])), tokens.spacingS)
@@ -3436,11 +3283,213 @@ function _addOrEditLink() {
   return _addOrEditLink.apply(this, arguments);
 }
 
+function ToolbarHyperlinkButton(props) {
+  var editor = useContentfulEditor();
+  var isActive = !!(editor && isLinkActive(editor));
+  var sdk = useSdkContext();
+
+  function handleClick() {
+    return _handleClick.apply(this, arguments);
+  }
+
+  function _handleClick() {
+    _handleClick = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (editor) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 2:
+              if (isActive) {
+                unwrapLink(editor);
+                editor.tracking.onToolbarAction('unlinkHyperlinks');
+              } else {
+                addOrEditLink(editor, sdk, editor.tracking.onToolbarAction);
+              }
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _handleClick.apply(this, arguments);
+  }
+
+  if (!editor) return null;
+  return /*#__PURE__*/createElement(ToolbarButton, {
+    title: "Hyperlink",
+    testId: "hyperlink-toolbar-button",
+    onClick: handleClick,
+    isActive: isActive,
+    isDisabled: props.isDisabled
+  }, /*#__PURE__*/createElement(LinkIcon, null));
+}
+
 var hasText = function hasText(editor, entry) {
   var node = entry[0];
   return !isAncestorEmpty(editor, node) && Node.string(node).trim() !== '';
 };
 
+function truncate(str, length) {
+  if (typeof str === 'string' && str.length > length) {
+    return str && str.substr(0, length + 1) // +1 to look ahead and be replaced below.
+    // Get rid of orphan letters but not one letter words (I, a, 2).
+    // Try to not have “.” as last character to avoid awkward “....”.
+    .replace(/(\s+\S(?=\S)|\s*)\.?.$/, '…');
+  }
+
+  return str;
+}
+
+function getEntityInfo(data) {
+  if (!data) {
+    return '';
+  }
+
+  var entityTitle = data.entityTitle,
+      contentTypeName = data.contentTypeName,
+      entityStatus = data.entityStatus,
+      jobs = data.jobs;
+  var title = truncate(entityTitle, 60) || 'Untitled';
+  var scheduledActions = jobs.length > 0 ? getScheduleTooltipContent({
+    job: jobs[0],
+    jobsCount: jobs.length
+  }) : '';
+  return (contentTypeName || 'Asset') + " \"" + title + "\", " + entityStatus + " " + scheduledActions;
+}
+
+function fetchAllData(_x) {
+  return _fetchAllData.apply(this, arguments);
+}
+
+function _fetchAllData() {
+  _fetchAllData = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref) {
+    var sdk, entityId, entityType, localeCode, defaultLocaleCode, contentType, getEntity, entity, contentTypeId, entityTitle, entityDescription, jobs, entityStatus;
+    return runtime_1.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            sdk = _ref.sdk, entityId = _ref.entityId, entityType = _ref.entityType, localeCode = _ref.localeCode, defaultLocaleCode = _ref.defaultLocaleCode;
+            getEntity = entityType === 'Entry' ? sdk.space.getEntry : sdk.space.getAsset;
+            _context.next = 4;
+            return getEntity(entityId);
+
+          case 4:
+            entity = _context.sent;
+
+            if (entity.sys.contentType) {
+              contentTypeId = entity.sys.contentType.sys.id;
+              contentType = sdk.space.getCachedContentTypes().find(function (ct) {
+                return ct.sys.id === contentTypeId;
+              });
+            }
+
+            entityTitle = entityType === 'Entry' ? entityHelpers.getEntryTitle({
+              entry: entity,
+              contentType: contentType,
+              localeCode: localeCode,
+              defaultLocaleCode: defaultLocaleCode,
+              defaultTitle: 'Untitled'
+            }) : entityHelpers.getAssetTitle({
+              asset: entity,
+              localeCode: localeCode,
+              defaultLocaleCode: defaultLocaleCode,
+              defaultTitle: 'Untitled'
+            });
+            entityDescription = entityHelpers.getEntityDescription({
+              entity: entity,
+              contentType: contentType,
+              localeCode: localeCode,
+              defaultLocaleCode: defaultLocaleCode
+            });
+            _context.next = 10;
+            return sdk.space.getEntityScheduledActions(entityType, entityId);
+
+          case 10:
+            jobs = _context.sent;
+            entityStatus = entityHelpers.getEntryStatus(entity.sys);
+            return _context.abrupt("return", {
+              jobs: jobs,
+              entity: entity,
+              entityTitle: entityTitle,
+              entityDescription: entityDescription,
+              entityStatus: entityStatus,
+              contentTypeName: contentType ? contentType.name : ''
+            });
+
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _fetchAllData.apply(this, arguments);
+}
+
+function useRequestStatus(_ref2) {
+  var sdk = _ref2.sdk,
+      target = _ref2.target,
+      onEntityFetchComplete = _ref2.onEntityFetchComplete;
+
+  var _useState = useState({
+    type: 'loading'
+  }),
+      requestStatus = _useState[0],
+      setRequestStatus = _useState[1];
+
+  useEffect(function () {
+    if (target) {
+      var _target$sys, _target$sys2;
+
+      fetchAllData({
+        sdk: sdk,
+        entityId: target == null ? void 0 : (_target$sys = target.sys) == null ? void 0 : _target$sys.id,
+        entityType: target == null ? void 0 : (_target$sys2 = target.sys) == null ? void 0 : _target$sys2.linkType,
+        localeCode: sdk.field.locale,
+        defaultLocaleCode: sdk.locales["default"]
+      }).then(function (entityInfo) {
+        setRequestStatus({
+          type: 'success',
+          data: entityInfo
+        });
+      })["catch"](function (e) {
+        console.log(e);
+        setRequestStatus({
+          type: 'error',
+          error: e
+        });
+      })["finally"](function () {
+        onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
+      });
+    }
+  }, [sdk, target, onEntityFetchComplete]);
+  return requestStatus;
+}
+
+function useEntityInfo(props) {
+  var status = useRequestStatus(props);
+  var linkType = props.target.sys.linkType;
+
+  if (status.type === 'loading') {
+    return "Loading " + linkType.toLowerCase() + "...";
+  }
+
+  if (status.type === 'error') {
+    return linkType + " missing or inaccessible";
+  }
+
+  return getEntityInfo(status.data);
+}
+
 var styles$c = {
   hyperlinkWrapper: /*#__PURE__*/css({
     display: 'inline',
@@ -3458,33 +3507,21 @@ var styles$c = {
     '&:focus': {
       fill: tokens.gray900
     }
-  }),
-  hyperlinkIEFallback: /*#__PURE__*/css({
-    color: '#1683d0',
-    textDecoration: 'underline'
-  }),
-  // TODO: use these styles once we can use the icon
-  hyperlinkIcon: /*#__PURE__*/css({
-    position: 'relative',
-    top: '4px',
-    height: '14px',
-    margin: '0 -2px 0 -1px',
-    webkitTransition: 'fill 100ms ease-in-out',
-    transition: 'fill 100ms ease-in-out',
-    '&:hover': {
-      fill: tokens.gray900
-    },
-    '&:focus': {
-      fill: tokens.gray900
-    }
   })
 };
 
-function UrlHyperlink(props) {
+function EntityHyperlink(props) {
   var editor = useContentfulEditor();
   var isReadOnly = useReadOnly();
   var sdk = useSdkContext();
-  var uri = props.element.data.uri;
+  var target = props.element.data.target;
+  var onEntityFetchComplete = props.onEntityFetchComplete;
+  var tooltipContent = useEntityInfo({
+    target: target,
+    sdk: sdk,
+    onEntityFetchComplete: onEntityFetchComplete
+  });
+  if (!target) return null;
 
   function handleClick(event) {
     event.preventDefault();
@@ -3494,33 +3531,25 @@ function UrlHyperlink(props) {
   }
 
   return /*#__PURE__*/createElement(Tooltip, {
-    content: uri,
+    content: tooltipContent,
     targetWrapperClassName: styles$c.hyperlinkWrapper,
     placement: "bottom",
     maxWidth: "auto"
   }, /*#__PURE__*/createElement(TextLink, {
     as: "a",
-    href: uri,
-    rel: "noopener noreferrer",
     onClick: handleClick,
     isDisabled: isReadOnly,
-    className: styles$c.hyperlink
+    className: styles$c.hyperlink,
+    "data-link-type": target.sys.linkType,
+    "data-link-id": target.sys.id
   }, props.children));
 }
 
-function EntityHyperlink(props) {
+function UrlHyperlink(props) {
   var editor = useContentfulEditor();
   var isReadOnly = useReadOnly();
   var sdk = useSdkContext();
-  var target = props.element.data.target;
-  var onEntityFetchComplete = props.onEntityFetchComplete;
-  useEffect(function () {
-    // The real entity loading happens in the tooltip
-    // Since that is deferred the link is considered rendered as soon
-    // the component mounts (link text displayed)
-    onEntityFetchComplete == null ? void 0 : onEntityFetchComplete();
-  }, [onEntityFetchComplete]);
-  if (!target) return null;
+  var uri = props.element.data.uri;
 
   function handleClick(event) {
     event.preventDefault();
@@ -3530,74 +3559,20 @@ function EntityHyperlink(props) {
   }
 
   return /*#__PURE__*/createElement(Tooltip, {
-    content: /*#__PURE__*/createElement(EntryAssetTooltip, {
-      id: target.sys.id,
-      type: target.sys.linkType,
-      sdk: sdk
-    }),
+    content: uri,
     targetWrapperClassName: styles$c.hyperlinkWrapper,
     placement: "bottom",
     maxWidth: "auto"
   }, /*#__PURE__*/createElement(TextLink, {
     as: "a",
+    href: uri,
+    rel: "noopener noreferrer",
     onClick: handleClick,
     isDisabled: isReadOnly,
-    className: styles$c.hyperlink,
-    "data-link-type": target.sys.linkType,
-    "data-link-id": target.sys.id
+    className: styles$c.hyperlink
   }, props.children));
 }
 
-function ToolbarHyperlinkButton(props) {
-  var editor = useContentfulEditor();
-  var isActive = !!(editor && isLinkActive(editor));
-  var sdk = useSdkContext();
-
-  function handleClick() {
-    return _handleClick.apply(this, arguments);
-  }
-
-  function _handleClick() {
-    _handleClick = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-      return runtime_1.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (editor) {
-                _context.next = 2;
-                break;
-              }
-
-              return _context.abrupt("return");
-
-            case 2:
-              if (isActive) {
-                unwrapLink(editor);
-                editor.tracking.onToolbarAction('unlinkHyperlinks');
-              } else {
-                addOrEditLink(editor, sdk, editor.tracking.onToolbarAction);
-              }
-
-            case 3:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-    return _handleClick.apply(this, arguments);
-  }
-
-  if (!editor) return null;
-  return /*#__PURE__*/createElement(ToolbarButton, {
-    title: "Hyperlink",
-    testId: "hyperlink-toolbar-button",
-    onClick: handleClick,
-    isActive: isActive,
-    isDisabled: props.isDisabled
-  }, /*#__PURE__*/createElement(LinkIcon, null));
-}
-
 var isAnchor = function isAnchor(element) {
   return element.nodeName === 'A' && !!element.getAttribute('href') && element.getAttribute('href') !== '#';
 };