@atlaskit/editor-plugin-synced-block 5.3.1 → 5.3.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 5.3.2
+
+### Patch Changes
+
+- [`41d5a8796f3e1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/41d5a8796f3e1) -
+  [EDITOR-4472] Update content copy for sync block
+- [`28434cbe03f1e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/28434cbe03f1e) -
+  [ux] [EDITOR-2851]
+  - Implement unsync feature for source sync block
+  - Update deletion confirmation modal and reference block UI after source deletion
+
+- Updated dependencies
+
 ## 5.3.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -7,7 +7,10 @@
 		"composite": true,
 		"noCheck": true
 	},
-	"include": ["../src/**/*.ts", "../src/**/*.tsx"],
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
 	"exclude": [
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",

package/dist/cjs/editor-commands/index.js

@@ -193,6 +193,10 @@ var unsync = exports.unsync = function unsync(storeManager, isBodiedSyncBlock, v
     return false;
   }
   if (isBodiedSyncBlock) {
+    var content = syncBlock === null || syncBlock === void 0 ? void 0 : syncBlock.node.content;
+    var tr = state.tr;
+    tr.replaceWith(syncBlock.pos, syncBlock.pos + syncBlock.node.nodeSize, content).setMeta('deletionReason', 'source-block-unsynced');
+    view.dispatch(tr);
     return true;
   }
 

package/dist/cjs/pm-plugins/main.js

@@ -43,6 +43,13 @@ var showCopiedFlag = function showCopiedFlag(api) {
     });
   }, 0);
 };
+var getDeleteReason = function getDeleteReason(tr) {
+  var reason = tr.getMeta('deletionReason');
+  if (!reason) {
+    return 'source-block-deleted';
+  }
+  return reason;
+};
 var createPlugin = exports.createPlugin = function createPlugin(options, pmPluginFactoryParams, syncBlockStore, api) {
   var _ref2 = options || {},
     _ref2$useLongPressSel = _ref2.useLongPressSelection,
@@ -206,7 +213,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       if (!isOffline) {
         if (bodiedSyncBlockRemoved.length > 0) {
           confirmationTransactionRef.current = tr;
-          return (0, _handleBodiedSyncBlockRemoval.handleBodiedSyncBlockRemoval)(tr, bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef);
+          return (0, _handleBodiedSyncBlockRemoval.handleBodiedSyncBlockRemoval)(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? getDeleteReason(tr) : undefined);
         }
         if (bodiedSyncBlockAdded.length > 0) {
           if (Boolean(tr.getMeta(_utils.pmHistoryPluginKey))) {

package/dist/cjs/pm-plugins/utils/handle-bodied-sync-block-removal.js

@@ -32,7 +32,7 @@ var onDismissed = function onDismissed(syncBlockStore) {
     });
   };
 };
-var handleBodiedSyncBlockRemoval = exports.handleBodiedSyncBlockRemoval = function handleBodiedSyncBlockRemoval(tr, bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef) {
+var handleBodiedSyncBlockRemoval = exports.handleBodiedSyncBlockRemoval = function handleBodiedSyncBlockRemoval(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, deletionReason) {
   // Clear potential old pending deletion to retreat the deletion as first attempt
   syncBlockStore.sourceManager.clearPendingDeletion();
 
@@ -42,7 +42,7 @@ var handleBodiedSyncBlockRemoval = exports.handleBodiedSyncBlockRemoval = functi
   // proceed with deletion.
   syncBlockStore.sourceManager.deleteSyncBlocksWithConfirmation(bodiedSyncBlockRemoved.map(function (node) {
     return node.attrs;
-  }), function () {
+  }), deletionReason, function () {
     var _api$core2;
     var confirmationTransaction = confirmationTransactionRef.current;
     if (!confirmationTransaction) {

package/dist/cjs/ui/DeleteConfirmationModal.compiled.css

@@ -0,0 +1,2 @@
+._195g1wug{margin-inline:auto}
+._1mou1wug{margin-block:auto}

package/dist/cjs/ui/DeleteConfirmationModal.js

@@ -1,3 +1,4 @@
+/* DeleteConfirmationModal.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DeleteConfirmationModal = void 0;
+require("./DeleteConfirmationModal.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
@@ -16,20 +21,52 @@ var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _main = require("../pm-plugins/main");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var modalContentMap = {
+  'source-block-deleted': {
+    titleMultiple: _messages.syncBlockMessages.deleteConfirmationModalTitleSingle,
+    titleSingle: _messages.syncBlockMessages.deleteConfirmationModalTitleSingle,
+    descriptionSingle: _messages.syncBlockMessages.deleteConfirmationModalDescriptionNoRef,
+    descriptionMultiple: _messages.syncBlockMessages.deleteConfirmationModalDescription,
+    confirmButtonLabel: _messages.syncBlockMessages.deleteConfirmationModalDeleteButton
+  },
+  'source-block-unsynced': {
+    titleMultiple: _messages.syncBlockMessages.unsyncConfirmationModalTitle,
+    titleSingle: _messages.syncBlockMessages.unsyncConfirmationModalTitle,
+    descriptionSingle: _messages.syncBlockMessages.unsyncConfirmationModalDescriptionSingle,
+    descriptionMultiple: _messages.syncBlockMessages.unsyncConfirmationModalDescriptionMultiple,
+    confirmButtonLabel: _messages.syncBlockMessages.deleteConfirmationModalUnsyncButton
+  }
+};
+var styles = {
+  spinner: "_1mou1wug _195g1wug"
+};
 var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
-  var _api$core2, _api$core4, _api$core6;
+  var _api$core2, _api$core4, _api$core6, _syncBlockIds$length;
   var syncBlockStoreManager = _ref.syncBlockStoreManager,
     api = _ref.api;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
-  var _useState3 = (0, _react.useState)(1),
+  var _useState3 = (0, _react.useState)(undefined),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    syncBlockCount = _useState4[0],
-    setSyncBlockCount = _useState4[1];
+    syncBlockIds = _useState4[0],
+    setSyncBlockIds = _useState4[1];
+  var _useState5 = (0, _react.useState)(undefined),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    referenceCount = _useState6[0],
+    setReferenceCount = _useState6[1];
+  var _useState7 = (0, _react.useState)('source-block-deleted'),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    deleteReason = _useState8[0],
+    setDeleteReason = _useState8[1];
+  var _useState9 = (0, _react.useState)('none'),
+    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
+    fetchStatus = _useState0[0],
+    setFetchStatus = _useState0[1];
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity', 'syncedBlock'], function (states) {
       var _states$connectivityS, _states$syncedBlockSt, _states$syncedBlockSt2;
       return {
@@ -53,6 +90,8 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
       }
       if (!confirm) {
         setIsOpen(false);
+        setFetchStatus('none');
+        setReferenceCount(undefined);
       }
       api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
         var tr = _ref2.tr;
@@ -63,9 +102,12 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
       });
     };
   }, [api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions]);
-  var confirmationCallback = (0, _react.useCallback)(function (syncBlockCount) {
+  var confirmationCallback = (0, _react.useCallback)(function (syncBlockIds, deleteReason) {
     setIsOpen(true);
-    setSyncBlockCount(syncBlockCount);
+    setSyncBlockIds(syncBlockIds);
+    if (deleteReason) {
+      setDeleteReason(deleteReason);
+    }
     var confirmedPromise = new Promise(function (resolve) {
       resolverRef.current = resolve;
     });
@@ -92,6 +134,7 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
       var _api$core5;
       // auto close modal once deletion is successful
       setIsOpen(false);
+      setFetchStatus('none');
       api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref4) {
         var tr = _ref4.tr;
         return tr.setMeta(_main.syncedBlockPluginKey, {
@@ -101,15 +144,76 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
       });
     }
   }, [api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, bodiedSyncBlockDeletionStatus, isOpen]);
+  (0, _react.useEffect)(function () {
+    if (isOpen && syncBlockIds !== undefined && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
+      var _referenceCount = 0;
+      setFetchStatus('loading');
+      var fetchFailed = false;
+      syncBlockIds.forEach( /*#__PURE__*/function () {
+        var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(syncBlockId) {
+          var references, _references$reference, _references$reference2;
+          return _regenerator.default.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                if (!fetchFailed) {
+                  _context.next = 2;
+                  break;
+                }
+                return _context.abrupt("return");
+              case 2:
+                _context.next = 4;
+                return syncBlockStoreManager.sourceManager.fetchReferences(syncBlockId.resourceId);
+              case 4:
+                references = _context.sent;
+                if (!references.error) {
+                  _context.next = 11;
+                  break;
+                }
+                // Consider fetch fails as soon as one of the fetches fails
+                setFetchStatus('error');
+                fetchFailed = true;
+                return _context.abrupt("return");
+              case 11:
+                _referenceCount += (_references$reference = (_references$reference2 = references.references) === null || _references$reference2 === void 0 ? void 0 : _references$reference2.length) !== null && _references$reference !== void 0 ? _references$reference : 0;
+              case 12:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function (_x) {
+          return _ref5.apply(this, arguments);
+        };
+      }());
+      if (!fetchFailed) {
+        setReferenceCount(_referenceCount);
+        setFetchStatus('success');
+      }
+    }
+  }, [isOpen, syncBlockIds, syncBlockStoreManager.sourceManager]);
   return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
     onClose: handleClick(false),
-    testId: "sync-block-delete-confirmation"
-  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, {
+    testId: "sync-block-delete-confirmation",
+    height: 184
+  }, (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, referenceCount === undefined ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.spinner
+  }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+    size: "large"
+  })) : /*#__PURE__*/_react.default.createElement(ModalContent, {
+    content: modalContentMap[deleteReason],
+    referenceCount: referenceCount,
+    handleClick: handleClick,
+    formatMessage: formatMessage,
+    isDeleting: bodiedSyncBlockDeletionStatus === 'processing',
+    isDisabled: (0, _editorPluginConnectivity.isOfflineMode)(mode),
+    deleteReason: deleteReason,
+    failToFetch: fetchStatus === 'error'
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, {
     hasCloseButton: true
   }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, {
     appearance: "warning"
-  }, formatMessage(_messages.syncBlockMessages.deleteConfirmationModalTitle))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, formatMessage(_messages.syncBlockMessages.deleteConfirmationModalDescription, {
-    syncBlockCount: syncBlockCount
+  }, formatMessage(_messages.syncBlockMessages.deleteConfirmationModalTitleSingle))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, formatMessage(_messages.syncBlockMessages.deleteConfirmationModalDescription, {
+    syncBlockCount: (_syncBlockIds$length = syncBlockIds === null || syncBlockIds === void 0 ? void 0 : syncBlockIds.length) !== null && _syncBlockIds$length !== void 0 ? _syncBlockIds$length : 1
   }))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_new.default, {
     appearance: "subtle",
     onClick: handleClick(false)
@@ -118,7 +222,41 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
     onClick: handleClick(true),
     autoFocus: true,
     isDisabled: (0, _editorPluginConnectivity.isOfflineMode)(mode),
-    isLoading: bodiedSyncBlockDeletionStatus === 'processing',
-    testId: (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? 'synced-block-delete-confirmation-modal-delete-button' : undefined
-  }, formatMessage(_messages.syncBlockMessages.deleteConfirmationModalDeleteButton)))));
+    isLoading: bodiedSyncBlockDeletionStatus === 'processing'
+  }, formatMessage(_messages.syncBlockMessages.deleteConfirmationModalDeleteButton))))));
+};
+var ModalContent = function ModalContent(_ref6) {
+  var content = _ref6.content,
+    referenceCount = _ref6.referenceCount,
+    handleClick = _ref6.handleClick,
+    formatMessage = _ref6.formatMessage,
+    isDeleting = _ref6.isDeleting,
+    isDisabled = _ref6.isDisabled,
+    deleteReason = _ref6.deleteReason,
+    failToFetch = _ref6.failToFetch;
+  var titleMultiple = content.titleMultiple,
+    titleSingle = content.titleSingle,
+    descriptionSingle = content.descriptionSingle,
+    descriptionMultiple = content.descriptionMultiple,
+    confirmButtonLabel = content.confirmButtonLabel;
+  var hasNoReferenceOrFailToFetch = referenceCount === 0 || failToFetch;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, {
+    hasCloseButton: true
+  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, {
+    appearance: "warning"
+  }, hasNoReferenceOrFailToFetch ? formatMessage(titleSingle) : formatMessage(titleMultiple, {
+    count: referenceCount
+  }))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, hasNoReferenceOrFailToFetch ? formatMessage(descriptionSingle) : formatMessage(descriptionMultiple, {
+    syncBlockCount: referenceCount
+  }))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "subtle",
+    onClick: handleClick(false)
+  }, formatMessage(_messages.syncBlockMessages.deleteConfirmationModalCancelButton)), /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "warning",
+    onClick: handleClick(true),
+    autoFocus: true,
+    isDisabled: isDisabled,
+    isLoading: isDeleting,
+    testId: "synced-block-delete-confirmation-modal-".concat(deleteReason, "-button")
+  }, formatMessage(confirmButtonLabel))));
 };

package/dist/cjs/ui/SyncBlockLabel.js

@@ -5,10 +5,9 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.formatElapsedTime = exports.SyncBlockLabel = void 0;
+exports.SyncBlockLabel = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _isYesterday = _interopRequireDefault(require("date-fns/isYesterday"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
@@ -17,77 +16,22 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _time = require("./utils/time");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var SyncBlockLabelDataId = 'sync-block-label';
-var SECONDS_IN_MINUTE = 60;
-var SECONDS_IN_HOUR = SECONDS_IN_MINUTE * 60;
-var SECONDS_IN_DAY = SECONDS_IN_HOUR * 24;
-var SECONDS_IN_WEEK = SECONDS_IN_DAY * 7;
-var SECONDS_IN_MONTH = SECONDS_IN_DAY * 30;
-var SECONDS_IN_YEAR = SECONDS_IN_DAY * 365;
-var formatElapsedTime = exports.formatElapsedTime = function formatElapsedTime(isoDate, intl) {
-  var now = Date.now();
-  var date = new Date(isoDate).getTime();
-  var diffInSeconds = Math.floor((now - date) / 1000);
-  var dateObj = new Date(isoDate);
-
-  // Show "yesterday" when timestamp is from the previous calendar day
-  if ((0, _isYesterday.default)(dateObj) && diffInSeconds >= SECONDS_IN_DAY) {
-    return intl.formatRelativeTime(-1, 'day', {
-      numeric: 'auto',
-      style: 'long'
-    });
-  }
-  if (diffInSeconds < SECONDS_IN_MINUTE) {
-    return intl.formatRelativeTime(-Math.max(diffInSeconds, 1), 'second', {
-      style: 'long'
-    });
-  } else if (diffInSeconds < SECONDS_IN_HOUR) {
-    var minutes = Math.floor(diffInSeconds / SECONDS_IN_MINUTE);
-    return intl.formatRelativeTime(-minutes, 'minute', {
-      style: 'long'
-    });
-  } else if (diffInSeconds < SECONDS_IN_DAY) {
-    var hours = Math.floor(diffInSeconds / SECONDS_IN_HOUR);
-    return intl.formatRelativeTime(-hours, 'hour', {
-      style: 'long'
-    });
-  } else if (diffInSeconds < SECONDS_IN_WEEK) {
-    var days = Math.floor(diffInSeconds / SECONDS_IN_DAY);
-    return intl.formatRelativeTime(-days, 'day', {
-      style: 'long'
-    });
-  } else if (diffInSeconds < SECONDS_IN_MONTH) {
-    var weeks = Math.floor(diffInSeconds / SECONDS_IN_WEEK);
-    return intl.formatRelativeTime(-weeks, 'week', {
-      style: 'long'
-    });
-  } else if (diffInSeconds < SECONDS_IN_YEAR) {
-    var months = Math.floor(diffInSeconds / SECONDS_IN_MONTH);
-    return intl.formatRelativeTime(-months, 'month', {
-      style: 'long'
-    });
-  } else {
-    var years = Math.floor(diffInSeconds / SECONDS_IN_YEAR);
-    return intl.formatRelativeTime(-years, 'year', {
-      style: 'long'
-    });
-  }
-};
 var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
-  var isSource = _ref.isSource,
-    useFetchSyncBlockTitle = _ref.useFetchSyncBlockTitle,
+  var contentUpdatedAt = _ref.contentUpdatedAt,
+    isSource = _ref.isSource,
     localId = _ref.localId,
-    contentUpdatedAt = _ref.contentUpdatedAt;
+    title = _ref.title;
   var intl = (0, _reactIntlNext.useIntl)();
   var formatMessage = intl.formatMessage;
-  var title = useFetchSyncBlockTitle === null || useFetchSyncBlockTitle === void 0 ? void 0 : useFetchSyncBlockTitle();
   var _useState = (0, _react.useState)(formatMessage(_messages.syncBlockMessages.defaultSyncBlockTooltip)),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     tooltipContent = _useState2[0],
     setTooltipContent = _useState2[1];
   var tooltipMessage = formatMessage(_messages.syncBlockMessages.defaultSyncBlockTooltip);
-  if (isSource) {
+  if (isSource && !(0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
     tooltipMessage = formatMessage(_messages.syncBlockMessages.sourceSyncBlockTooltip);
   } else if (title) {
     tooltipMessage = formatMessage(_messages.syncBlockMessages.referenceSyncBlockTooltip, {
@@ -100,7 +44,7 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
     }
     var tooltipContent = tooltipMessage;
     if (contentUpdatedAt) {
-      var elapsedTime = formatElapsedTime(contentUpdatedAt, intl);
+      var elapsedTime = (0, _time.formatElapsedTime)(contentUpdatedAt, intl);
       tooltipContent = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
         size: "small",
         color: "color.text.inverse"
@@ -116,36 +60,42 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
     setTooltipContent(tooltipContent);
   }, [contentUpdatedAt, formatMessage, intl, tooltipMessage]);
   var ariaDescribedById = "sync-block-label-description-".concat(localId);
-  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    position: "top",
-    content: (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? tooltipContent : tooltipMessage
-    // workaround because tooltip adds aria-describedby with a new id every time the tooltip is opened
-    // this causes an infinite rerender loop because of the forwardRef from the node view we are inside in bodiedSyncBlock
-    // tooltip content is available for screen readers in visually hidden content after the label
-    ,
-    isScreenReaderAnnouncementDisabled: true
-    // using this to ensure that the 'last edited' time is updated when the tooltip is opened
-    ,
-    onShow: updateTooltipContent
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": SyncBlockLabelDataId
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    ,
-    className: _syncBlock.SyncBlockLabelSharedCssClassName.labelClassName,
-    "aria-describedby": ariaDescribedById
-  }, /*#__PURE__*/_react.default.createElement(_blockSynced.default, {
-    color: "var(--ds-icon-subtle, #505258)",
-    size: "small",
-    label: ""
-  }), isSource || !title ? /*#__PURE__*/_react.default.createElement(_compiled.Text, {
-    size: "small",
-    color: "color.text.subtle"
-  }, formatMessage(_messages.syncBlockMessages.syncedBlockLabel)) : /*#__PURE__*/_react.default.createElement(_compiled.Text, {
-    maxLines: 1,
-    size: "small",
-    color: "color.text.subtle"
-  }, title)), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
-    id: ariaDescribedById
-  }, tooltipContent));
+  var LabelComponent = function LabelComponent() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": SyncBlockLabelDataId
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      ,
+      className: _syncBlock.SyncBlockLabelSharedCssClassName.labelClassName,
+      "aria-describedby": ariaDescribedById
+    }, /*#__PURE__*/_react.default.createElement(_blockSynced.default, {
+      color: "var(--ds-icon-subtle, #505258)",
+      size: "small",
+      label: ""
+    }), isSource || !title ? /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      size: "small",
+      color: "color.text.subtle"
+    }, formatMessage(_messages.syncBlockMessages.syncedBlockLabel)) : /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      maxLines: 1,
+      size: "small",
+      color: "color.text.subtle"
+    }, title)), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
+      id: ariaDescribedById
+    }, tooltipContent));
+  };
+  var LabelWithTooltip = function LabelWithTooltip() {
+    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      position: "top",
+      content: (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? tooltipContent : tooltipMessage
+      // workaround because tooltip adds aria-describedby with a new id every time the tooltip is opened
+      // this causes an infinite rerender loop because of the forwardRef from the node view we are inside in bodiedSyncBlock
+      // tooltip content is available for screen readers in visually hidden content after the label
+      ,
+      isScreenReaderAnnouncementDisabled: true
+      // using this to ensure that the 'last edited' time is updated when the tooltip is opened
+      ,
+      onShow: updateTooltipContent
+    }, /*#__PURE__*/_react.default.createElement(LabelComponent, null));
+  };
+  return (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? isSource ? /*#__PURE__*/_react.default.createElement(LabelComponent, null) : /*#__PURE__*/_react.default.createElement(LabelWithTooltip, null) : /*#__PURE__*/_react.default.createElement(LabelWithTooltip, null);
 };
 var SyncBlockLabel = exports.SyncBlockLabel = /*#__PURE__*/_react.default.memo(SyncBlockLabelComponent);

package/dist/cjs/ui/SyncBlockRendererWrapper.js

@@ -17,6 +17,7 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
     localId = _ref.localId,
     api = _ref.api;
   var syncBlockFetchResult = useFetchSyncBlockData();
+  var title = useFetchSyncBlockTitle === null || useFetchSyncBlockTitle === void 0 ? void 0 : useFetchSyncBlockTitle();
   var contentUpdatedAt = syncBlockFetchResult === null || syncBlockFetchResult === void 0 || (_syncBlockFetchResult = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult === void 0 || (_syncBlockFetchResult = _syncBlockFetchResult.data) === null || _syncBlockFetchResult === void 0 ? void 0 : _syncBlockFetchResult.contentUpdatedAt;
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": SyncBlockRendererWrapperDataId
@@ -28,7 +29,7 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
     api: api
   })), /*#__PURE__*/_react.default.createElement(_SyncBlockLabel.SyncBlockLabel, {
     isSource: false,
-    useFetchSyncBlockTitle: useFetchSyncBlockTitle,
+    title: title,
     contentUpdatedAt: contentUpdatedAt,
     localId: localId
   }));

package/dist/cjs/ui/SyncedLocationDropdown.js

@@ -16,6 +16,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react2 = require("@compiled/react");
 var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
@@ -46,13 +47,18 @@ var styles = {
   note: "_syaz1rpy _o5721q9c",
   lozenge: "_ahbq12x7 _1ul91wqb",
   noResultsContainer: "_1bsbo8uj _y3gn1h6o",
-  dropdownContent: "_1rjcv77o _1bsbsmdz _1tkeqkoa _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
+  dropdownContent: "_1rjcv77o _1bsbsmdz _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
+  containerWithMinHeight: "_1tkeqkoa",
   contentContainer: "_y44vfmxe _1bsb1osq _1wpz1fhb _18m91wug",
   errorContainer: "_1bsbo8uj _1e0c1txw",
   errorIcon: "_1mour5cr",
   learnMoreLink: "_4bfu1r31 _1hmsglyw _ajmmnqa1",
   requestAccess: "_1bsb19n7 _o5721q9c _ahbq12x7 _syaz1rpy"
 };
+var shouldApplyMinHeight = function shouldApplyMinHeight(fetchStatus, itemCount) {
+  // When there are 1/2 items, dropdown height is less than minHeight 144px
+  return !(fetchStatus === 'success' && itemCount > 0);
+};
 var ItemTitle = function ItemTitle(_ref) {
   var title = _ref.title,
     formatMessage = _ref.formatMessage,
@@ -66,7 +72,7 @@ var ItemTitle = function ItemTitle(_ref) {
   }, title), onSameDocument && /*#__PURE__*/React.createElement(_compiled.Box, {
     as: "span",
     xcss: styles.note
-  }, "\xA0- ", formatMessage(productType === 'confluence-page' ? _messages.syncBlockMessages.syncedLocationDropdownTitleNoteForConfluencePage : _messages.syncBlockMessages.syncedLocationDropdownTitleNoteForJiraWorkItem)), isSource && /*#__PURE__*/React.createElement(_compiled.Box, {
+  }, "\xA0-", ' ', formatMessage(productType === 'confluence-page' ? _messages.syncBlockMessages.syncedLocationDropdownTitleNoteForConfluencePage : _messages.syncBlockMessages.syncedLocationDropdownTitleNoteForJiraWorkItem)), isSource && /*#__PURE__*/React.createElement(_compiled.Box, {
     as: "span",
     xcss: styles.lozenge
   }, /*#__PURE__*/React.createElement(_lozenge.default, null, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownSourceLozenge))), !hasAccess && /*#__PURE__*/React.createElement(_compiled.Box, {
@@ -293,7 +299,7 @@ var DropdownContent = function DropdownContent(_ref7) {
     }
   };
   return /*#__PURE__*/React.createElement(_compiled.Box, {
-    xcss: styles.dropdownContent
+    xcss: (0, _react2.cx)(styles.dropdownContent, shouldApplyMinHeight(fetchStatus, referenceData.length) && styles.containerWithMinHeight)
   }, content());
 };
 var LoadingScreen = function LoadingScreen() {

package/dist/cjs/ui/floating-toolbar.js

@@ -26,13 +26,13 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(state, intl, api, syncBlockStore) {
-  var _api$decorations, _api$connectivity;
+  var _syncBlockInstance$er, _api$decorations, _api$connectivity;
   var syncBlockObject = (0, _utils2.findSyncBlockOrBodiedSyncBlock)(state.schema, state.selection);
   if (!syncBlockObject) {
     return;
   }
   var syncBlockInstance = syncBlockStore.referenceManager.getFromCache(syncBlockObject.node.attrs.resourceId);
-  var isUnsyncedBlock = (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) === _editorSyncedBlockProvider.SyncBlockError.NotFound;
+  var isUnsyncedBlock = (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$er = syncBlockInstance.error) === null || _syncBlockInstance$er === void 0 ? void 0 : _syncBlockInstance$er.type) === _editorSyncedBlockProvider.SyncBlockError.NotFound;
   var isErroredBlock = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error;
   var bodiedSyncBlock = state.schema.nodes.bodiedSyncBlock;
   var isBodiedSyncBlock = (0, _utils2.isBodiedSyncBlockNode)(syncBlockObject.node, bodiedSyncBlock);

package/dist/cjs/ui/utils/time.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatElapsedTime = void 0;
+var _isYesterday = _interopRequireDefault(require("date-fns/isYesterday"));
+var SECONDS_IN_MINUTE = 60;
+var SECONDS_IN_HOUR = SECONDS_IN_MINUTE * 60;
+var SECONDS_IN_DAY = SECONDS_IN_HOUR * 24;
+var SECONDS_IN_WEEK = SECONDS_IN_DAY * 7;
+var SECONDS_IN_MONTH = SECONDS_IN_DAY * 30;
+var SECONDS_IN_YEAR = SECONDS_IN_DAY * 365;
+var formatElapsedTime = exports.formatElapsedTime = function formatElapsedTime(isoDate, intl) {
+  var now = Date.now();
+  var date = new Date(isoDate).getTime();
+  var diffInSeconds = Math.floor((now - date) / 1000);
+  var dateObj = new Date(isoDate);
+
+  // Show "yesterday" when timestamp is from the previous calendar day
+  if ((0, _isYesterday.default)(dateObj) && diffInSeconds >= SECONDS_IN_DAY) {
+    return intl.formatRelativeTime(-1, 'day', {
+      numeric: 'auto',
+      style: 'long'
+    });
+  }
+  if (diffInSeconds < SECONDS_IN_MINUTE) {
+    return intl.formatRelativeTime(-Math.max(diffInSeconds, 1), 'second', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_HOUR) {
+    var minutes = Math.floor(diffInSeconds / SECONDS_IN_MINUTE);
+    return intl.formatRelativeTime(-minutes, 'minute', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_DAY) {
+    var hours = Math.floor(diffInSeconds / SECONDS_IN_HOUR);
+    return intl.formatRelativeTime(-hours, 'hour', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_WEEK) {
+    var days = Math.floor(diffInSeconds / SECONDS_IN_DAY);
+    return intl.formatRelativeTime(-days, 'day', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_MONTH) {
+    var weeks = Math.floor(diffInSeconds / SECONDS_IN_WEEK);
+    return intl.formatRelativeTime(-weeks, 'week', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_YEAR) {
+    var months = Math.floor(diffInSeconds / SECONDS_IN_MONTH);
+    return intl.formatRelativeTime(-months, 'month', {
+      style: 'long'
+    });
+  } else {
+    var years = Math.floor(diffInSeconds / SECONDS_IN_YEAR);
+    return intl.formatRelativeTime(-years, 'year', {
+      style: 'long'
+    });
+  }
+};