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

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'
+    });
+  }
+};

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

@@ -197,6 +197,10 @@ export const unsync = (storeManager, isBodiedSyncBlock, view) => {
     return false;
   }
   if (isBodiedSyncBlock) {
+    const content = syncBlock === null || syncBlock === void 0 ? void 0 : syncBlock.node.content;
+    const 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/es2019/pm-plugins/main.js

@@ -31,6 +31,13 @@ const showCopiedFlag = api => {
     });
   }, 0);
 };
+const getDeleteReason = tr => {
+  const reason = tr.getMeta('deletionReason');
+  if (!reason) {
+    return 'source-block-deleted';
+  }
+  return reason;
+};
 export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api) => {
   const {
     useLongPressSelection = false
@@ -199,7 +206,7 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
       if (!isOffline) {
         if (bodiedSyncBlockRemoved.length > 0) {
           confirmationTransactionRef.current = tr;
-          return handleBodiedSyncBlockRemoval(tr, bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef);
+          return handleBodiedSyncBlockRemoval(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, fg('platform_synced_block_dogfooding') ? getDeleteReason(tr) : undefined);
         }
         if (bodiedSyncBlockAdded.length > 0) {
           if (Boolean(tr.getMeta(pmHistoryPluginKey))) {

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

@@ -19,7 +19,7 @@ const onDismissed = syncBlockStore => tr => {
     bodiedSyncBlockDeletionStatus: 'none'
   });
 };
-export const handleBodiedSyncBlockRemoval = (tr, bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef) => {
+export const handleBodiedSyncBlockRemoval = (bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, deletionReason) => {
   // Clear potential old pending deletion to retreat the deletion as first attempt
   syncBlockStore.sourceManager.clearPendingDeletion();
 
@@ -27,7 +27,7 @@ export const handleBodiedSyncBlockRemoval = (tr, bodiedSyncBlockRemoved, syncBlo
   // we block the transaction here, and wait for user confirmation to proceed with deletion.
   // See editor-common/src/sync-block/sync-block-store-manager.ts for how we handle user confirmation and
   // proceed with deletion.
-  syncBlockStore.sourceManager.deleteSyncBlocksWithConfirmation(bodiedSyncBlockRemoved.map(node => node.attrs), () => {
+  syncBlockStore.sourceManager.deleteSyncBlocksWithConfirmation(bodiedSyncBlockRemoved.map(node => node.attrs), deletionReason, () => {
     var _api$core2;
     const confirmationTransaction = confirmationTransactionRef.current;
     if (!confirmationTransaction) {

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

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

package/dist/es2019/ui/DeleteConfirmationModal.js

@@ -1,3 +1,6 @@
+/* DeleteConfirmationModal.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./DeleteConfirmationModal.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
@@ -6,15 +9,38 @@ import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages'
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import ModalDialog, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Text } from '@atlaskit/primitives/compiled';
+import { Text, Box } from '@atlaskit/primitives/compiled';
+import Spinner from '@atlaskit/spinner';
 import { syncedBlockPluginKey } from '../pm-plugins/main';
+const modalContentMap = {
+  'source-block-deleted': {
+    titleMultiple: messages.deleteConfirmationModalTitleSingle,
+    titleSingle: messages.deleteConfirmationModalTitleSingle,
+    descriptionSingle: messages.deleteConfirmationModalDescriptionNoRef,
+    descriptionMultiple: messages.deleteConfirmationModalDescription,
+    confirmButtonLabel: messages.deleteConfirmationModalDeleteButton
+  },
+  'source-block-unsynced': {
+    titleMultiple: messages.unsyncConfirmationModalTitle,
+    titleSingle: messages.unsyncConfirmationModalTitle,
+    descriptionSingle: messages.unsyncConfirmationModalDescriptionSingle,
+    descriptionMultiple: messages.unsyncConfirmationModalDescriptionMultiple,
+    confirmButtonLabel: messages.deleteConfirmationModalUnsyncButton
+  }
+};
+const styles = {
+  spinner: "_1mou1wug _195g1wug"
+};
 export const DeleteConfirmationModal = ({
   syncBlockStoreManager,
   api
 }) => {
-  var _api$core2, _api$core4, _api$core6;
+  var _api$core2, _api$core4, _api$core6, _syncBlockIds$length;
   const [isOpen, setIsOpen] = useState(false);
-  const [syncBlockCount, setSyncBlockCount] = useState(1);
+  const [syncBlockIds, setSyncBlockIds] = useState(undefined);
+  const [referenceCount, setReferenceCount] = useState(undefined);
+  const [deleteReason, setDeleteReason] = useState('source-block-deleted');
+  const [fetchStatus, setFetchStatus] = useState('none');
   const {
     mode,
     bodiedSyncBlockDeletionStatus,
@@ -39,6 +65,8 @@ export const DeleteConfirmationModal = ({
     }
     if (!confirm) {
       setIsOpen(false);
+      setFetchStatus('none');
+      setReferenceCount(undefined);
     }
     api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
       tr
@@ -49,9 +77,12 @@ export const DeleteConfirmationModal = ({
       });
     });
   }, [api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions]);
-  const confirmationCallback = useCallback(syncBlockCount => {
+  const confirmationCallback = useCallback((syncBlockIds, deleteReason) => {
     setIsOpen(true);
-    setSyncBlockCount(syncBlockCount);
+    setSyncBlockIds(syncBlockIds);
+    if (deleteReason) {
+      setDeleteReason(deleteReason);
+    }
     const confirmedPromise = new Promise(resolve => {
       resolverRef.current = resolve;
     });
@@ -79,6 +110,7 @@ export const DeleteConfirmationModal = ({
       var _api$core5;
       // auto close modal once deletion is successful
       setIsOpen(false);
+      setFetchStatus('none');
       api === null || api === void 0 ? void 0 : (_api$core5 = api.core) === null || _api$core5 === void 0 ? void 0 : _api$core5.actions.execute(({
         tr
       }) => {
@@ -89,15 +121,55 @@ export const DeleteConfirmationModal = ({
       });
     }
   }, [api === null || api === void 0 ? void 0 : (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, bodiedSyncBlockDeletionStatus, isOpen]);
+  useEffect(() => {
+    if (isOpen && syncBlockIds !== undefined && fg('platform_synced_block_dogfooding')) {
+      let referenceCount = 0;
+      setFetchStatus('loading');
+      let fetchFailed = false;
+      syncBlockIds.forEach(async syncBlockId => {
+        if (fetchFailed) {
+          return;
+        }
+        const references = await syncBlockStoreManager.sourceManager.fetchReferences(syncBlockId.resourceId);
+        if (references.error) {
+          // Consider fetch fails as soon as one of the fetches fails
+          setFetchStatus('error');
+          fetchFailed = true;
+          return;
+        } else {
+          var _references$reference, _references$reference2;
+          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;
+        }
+      });
+      if (!fetchFailed) {
+        setReferenceCount(referenceCount);
+        setFetchStatus('success');
+      }
+    }
+  }, [isOpen, syncBlockIds, syncBlockStoreManager.sourceManager]);
   return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
     onClose: handleClick(false),
-    testId: "sync-block-delete-confirmation"
-  }, /*#__PURE__*/React.createElement(ModalHeader, {
+    testId: "sync-block-delete-confirmation",
+    height: 184
+  }, fg('platform_synced_block_dogfooding') ? /*#__PURE__*/React.createElement(React.Fragment, null, referenceCount === undefined ? /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.spinner
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "large"
+  })) : /*#__PURE__*/React.createElement(ModalContent, {
+    content: modalContentMap[deleteReason],
+    referenceCount: referenceCount,
+    handleClick: handleClick,
+    formatMessage: formatMessage,
+    isDeleting: bodiedSyncBlockDeletionStatus === 'processing',
+    isDisabled: isOfflineMode(mode),
+    deleteReason: deleteReason,
+    failToFetch: fetchStatus === 'error'
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalHeader, {
     hasCloseButton: true
   }, /*#__PURE__*/React.createElement(ModalTitle, {
     appearance: "warning"
-  }, formatMessage(messages.deleteConfirmationModalTitle))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Text, null, formatMessage(messages.deleteConfirmationModalDescription, {
-    syncBlockCount
+  }, formatMessage(messages.deleteConfirmationModalTitleSingle))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Text, null, formatMessage(messages.deleteConfirmationModalDescription, {
+    syncBlockCount: (_syncBlockIds$length = syncBlockIds === null || syncBlockIds === void 0 ? void 0 : syncBlockIds.length) !== null && _syncBlockIds$length !== void 0 ? _syncBlockIds$length : 1
   }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     onClick: handleClick(false)
@@ -106,7 +178,44 @@ export const DeleteConfirmationModal = ({
     onClick: handleClick(true),
     autoFocus: true,
     isDisabled: isOfflineMode(mode),
-    isLoading: bodiedSyncBlockDeletionStatus === 'processing',
-    testId: fg('platform_synced_block_dogfooding') ? 'synced-block-delete-confirmation-modal-delete-button' : undefined
-  }, formatMessage(messages.deleteConfirmationModalDeleteButton)))));
+    isLoading: bodiedSyncBlockDeletionStatus === 'processing'
+  }, formatMessage(messages.deleteConfirmationModalDeleteButton))))));
+};
+const ModalContent = ({
+  content,
+  referenceCount,
+  handleClick,
+  formatMessage,
+  isDeleting,
+  isDisabled,
+  deleteReason,
+  failToFetch
+}) => {
+  const {
+    titleMultiple,
+    titleSingle,
+    descriptionSingle,
+    descriptionMultiple,
+    confirmButtonLabel
+  } = content;
+  const hasNoReferenceOrFailToFetch = referenceCount === 0 || failToFetch;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalHeader, {
+    hasCloseButton: true
+  }, /*#__PURE__*/React.createElement(ModalTitle, {
+    appearance: "warning"
+  }, hasNoReferenceOrFailToFetch ? formatMessage(titleSingle) : formatMessage(titleMultiple, {
+    count: referenceCount
+  }))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Text, null, hasNoReferenceOrFailToFetch ? formatMessage(descriptionSingle) : formatMessage(descriptionMultiple, {
+    syncBlockCount: referenceCount
+  }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    onClick: handleClick(false)
+  }, formatMessage(messages.deleteConfirmationModalCancelButton)), /*#__PURE__*/React.createElement(Button, {
+    appearance: "warning",
+    onClick: handleClick(true),
+    autoFocus: true,
+    isDisabled: isDisabled,
+    isLoading: isDeleting,
+    testId: `synced-block-delete-confirmation-modal-${deleteReason}-button`
+  }, formatMessage(confirmButtonLabel))));
 };

package/dist/es2019/ui/SyncBlockLabel.js

@@ -1,5 +1,4 @@
 import React, { useCallback, useState } from 'react';
-import isYesterday from 'date-fns/isYesterday';
 import { useIntl } from 'react-intl-next';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SyncBlockLabelSharedCssClassName } from '@atlaskit/editor-common/sync-block';
@@ -8,76 +7,21 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import { formatElapsedTime } from './utils/time';
 const SyncBlockLabelDataId = 'sync-block-label';
-const SECONDS_IN_MINUTE = 60;
-const SECONDS_IN_HOUR = SECONDS_IN_MINUTE * 60;
-const SECONDS_IN_DAY = SECONDS_IN_HOUR * 24;
-const SECONDS_IN_WEEK = SECONDS_IN_DAY * 7;
-const SECONDS_IN_MONTH = SECONDS_IN_DAY * 30;
-const SECONDS_IN_YEAR = SECONDS_IN_DAY * 365;
-export const formatElapsedTime = (isoDate, intl) => {
-  const now = Date.now();
-  const date = new Date(isoDate).getTime();
-  const diffInSeconds = Math.floor((now - date) / 1000);
-  const dateObj = new Date(isoDate);
-
-  // Show "yesterday" when timestamp is from the previous calendar day
-  if (isYesterday(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) {
-    const minutes = Math.floor(diffInSeconds / SECONDS_IN_MINUTE);
-    return intl.formatRelativeTime(-minutes, 'minute', {
-      style: 'long'
-    });
-  } else if (diffInSeconds < SECONDS_IN_DAY) {
-    const hours = Math.floor(diffInSeconds / SECONDS_IN_HOUR);
-    return intl.formatRelativeTime(-hours, 'hour', {
-      style: 'long'
-    });
-  } else if (diffInSeconds < SECONDS_IN_WEEK) {
-    const days = Math.floor(diffInSeconds / SECONDS_IN_DAY);
-    return intl.formatRelativeTime(-days, 'day', {
-      style: 'long'
-    });
-  } else if (diffInSeconds < SECONDS_IN_MONTH) {
-    const weeks = Math.floor(diffInSeconds / SECONDS_IN_WEEK);
-    return intl.formatRelativeTime(-weeks, 'week', {
-      style: 'long'
-    });
-  } else if (diffInSeconds < SECONDS_IN_YEAR) {
-    const months = Math.floor(diffInSeconds / SECONDS_IN_MONTH);
-    return intl.formatRelativeTime(-months, 'month', {
-      style: 'long'
-    });
-  } else {
-    const years = Math.floor(diffInSeconds / SECONDS_IN_YEAR);
-    return intl.formatRelativeTime(-years, 'year', {
-      style: 'long'
-    });
-  }
-};
 const SyncBlockLabelComponent = ({
+  contentUpdatedAt,
   isSource,
-  useFetchSyncBlockTitle,
   localId,
-  contentUpdatedAt
+  title
 }) => {
   const intl = useIntl();
   const {
     formatMessage
   } = intl;
-  const title = useFetchSyncBlockTitle === null || useFetchSyncBlockTitle === void 0 ? void 0 : useFetchSyncBlockTitle();
   const [tooltipContent, setTooltipContent] = useState(formatMessage(messages.defaultSyncBlockTooltip));
   let tooltipMessage = formatMessage(messages.defaultSyncBlockTooltip);
-  if (isSource) {
+  if (isSource && !fg('platform_synced_block_dogfooding')) {
     tooltipMessage = formatMessage(messages.sourceSyncBlockTooltip);
   } else if (title) {
     tooltipMessage = formatMessage(messages.referenceSyncBlockTooltip, {
@@ -106,18 +50,7 @@ const SyncBlockLabelComponent = ({
     setTooltipContent(tooltipContent);
   }, [contentUpdatedAt, formatMessage, intl, tooltipMessage]);
   const ariaDescribedById = `sync-block-label-description-${localId}`;
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    position: "top",
-    content: 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.createElement("div", {
+  const LabelComponent = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     "data-testid": SyncBlockLabelDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
@@ -137,5 +70,18 @@ const SyncBlockLabelComponent = ({
   }, title)), /*#__PURE__*/React.createElement(VisuallyHidden, {
     id: ariaDescribedById
   }, tooltipContent));
+  const LabelWithTooltip = () => /*#__PURE__*/React.createElement(Tooltip, {
+    position: "top",
+    content: 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.createElement(LabelComponent, null));
+  return fg('platform_synced_block_dogfooding') ? isSource ? /*#__PURE__*/React.createElement(LabelComponent, null) : /*#__PURE__*/React.createElement(LabelWithTooltip, null) : /*#__PURE__*/React.createElement(LabelWithTooltip, null);
 };
 export const SyncBlockLabel = /*#__PURE__*/React.memo(SyncBlockLabelComponent);

package/dist/es2019/ui/SyncBlockRendererWrapper.js

@@ -11,6 +11,7 @@ const SyncBlockRendererWrapperComponent = ({
 }) => {
   var _syncBlockFetchResult, _syncBlockFetchResult2;
   const syncBlockFetchResult = useFetchSyncBlockData();
+  const title = useFetchSyncBlockTitle === null || useFetchSyncBlockTitle === void 0 ? void 0 : useFetchSyncBlockTitle();
   const contentUpdatedAt = syncBlockFetchResult === null || syncBlockFetchResult === void 0 ? void 0 : (_syncBlockFetchResult = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult === void 0 ? void 0 : (_syncBlockFetchResult2 = _syncBlockFetchResult.data) === null || _syncBlockFetchResult2 === void 0 ? void 0 : _syncBlockFetchResult2.contentUpdatedAt;
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     "data-testid": SyncBlockRendererWrapperDataId
@@ -22,7 +23,7 @@ const SyncBlockRendererWrapperComponent = ({
     api
   })), /*#__PURE__*/React.createElement(SyncBlockLabel, {
     isSource: false,
-    useFetchSyncBlockTitle: useFetchSyncBlockTitle,
+    title: title,
     contentUpdatedAt: contentUpdatedAt,
     localId: localId
   }));

package/dist/es2019/ui/SyncedLocationDropdown.js

@@ -4,6 +4,7 @@ import "./SyncedLocationDropdown.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useState, useEffect } from 'react';
+import { cx } from '@compiled/react';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
@@ -29,13 +30,18 @@ const 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"
 };
+const shouldApplyMinHeight = (fetchStatus, itemCount) => {
+  // When there are 1/2 items, dropdown height is less than minHeight 144px
+  return !(fetchStatus === 'success' && itemCount > 0);
+};
 const ItemTitle = ({
   title,
   formatMessage,
@@ -50,7 +56,7 @@ const ItemTitle = ({
   }, title), onSameDocument && /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.note
-  }, "\xA0- ", formatMessage(productType === 'confluence-page' ? messages.syncedLocationDropdownTitleNoteForConfluencePage : messages.syncedLocationDropdownTitleNoteForJiraWorkItem)), isSource && /*#__PURE__*/React.createElement(Box, {
+  }, "\xA0-", ' ', formatMessage(productType === 'confluence-page' ? messages.syncedLocationDropdownTitleNoteForConfluencePage : messages.syncedLocationDropdownTitleNoteForJiraWorkItem)), isSource && /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.lozenge
   }, /*#__PURE__*/React.createElement(Lozenge, null, formatMessage(messages.syncedLocationDropdownSourceLozenge))), !hasAccess && /*#__PURE__*/React.createElement(Box, {
@@ -245,7 +251,7 @@ const DropdownContent = ({
     }
   };
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.dropdownContent
+    xcss: cx(styles.dropdownContent, shouldApplyMinHeight(fetchStatus, referenceData.length) && styles.containerWithMinHeight)
   }, content());
 };
 const LoadingScreen = () => {

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

@@ -14,13 +14,13 @@ import { findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plu
 import { SYNCED_BLOCK_BUTTON_TEST_ID } from '../types';
 import { SyncedLocationDropdown } from './SyncedLocationDropdown';
 export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
-  var _api$decorations, _api$connectivity, _api$connectivity$sha;
+  var _syncBlockInstance$er, _api$decorations, _api$connectivity, _api$connectivity$sha;
   const syncBlockObject = findSyncBlockOrBodiedSyncBlock(state.schema, state.selection);
   if (!syncBlockObject) {
     return;
   }
   const syncBlockInstance = syncBlockStore.referenceManager.getFromCache(syncBlockObject.node.attrs.resourceId);
-  const isUnsyncedBlock = (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) === SyncBlockError.NotFound;
+  const isUnsyncedBlock = (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : (_syncBlockInstance$er = syncBlockInstance.error) === null || _syncBlockInstance$er === void 0 ? void 0 : _syncBlockInstance$er.type) === SyncBlockError.NotFound;
   const isErroredBlock = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error;
   const {
     schema: {

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

@@ -0,0 +1,56 @@
+import isYesterday from 'date-fns/isYesterday';
+const SECONDS_IN_MINUTE = 60;
+const SECONDS_IN_HOUR = SECONDS_IN_MINUTE * 60;
+const SECONDS_IN_DAY = SECONDS_IN_HOUR * 24;
+const SECONDS_IN_WEEK = SECONDS_IN_DAY * 7;
+const SECONDS_IN_MONTH = SECONDS_IN_DAY * 30;
+const SECONDS_IN_YEAR = SECONDS_IN_DAY * 365;
+export const formatElapsedTime = (isoDate, intl) => {
+  const now = Date.now();
+  const date = new Date(isoDate).getTime();
+  const diffInSeconds = Math.floor((now - date) / 1000);
+  const dateObj = new Date(isoDate);
+
+  // Show "yesterday" when timestamp is from the previous calendar day
+  if (isYesterday(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) {
+    const minutes = Math.floor(diffInSeconds / SECONDS_IN_MINUTE);
+    return intl.formatRelativeTime(-minutes, 'minute', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_DAY) {
+    const hours = Math.floor(diffInSeconds / SECONDS_IN_HOUR);
+    return intl.formatRelativeTime(-hours, 'hour', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_WEEK) {
+    const days = Math.floor(diffInSeconds / SECONDS_IN_DAY);
+    return intl.formatRelativeTime(-days, 'day', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_MONTH) {
+    const weeks = Math.floor(diffInSeconds / SECONDS_IN_WEEK);
+    return intl.formatRelativeTime(-weeks, 'week', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_YEAR) {
+    const months = Math.floor(diffInSeconds / SECONDS_IN_MONTH);
+    return intl.formatRelativeTime(-months, 'month', {
+      style: 'long'
+    });
+  } else {
+    const years = Math.floor(diffInSeconds / SECONDS_IN_YEAR);
+    return intl.formatRelativeTime(-years, 'year', {
+      style: 'long'
+    });
+  }
+};

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

@@ -187,6 +187,10 @@ export var unsync = function unsync(storeManager, isBodiedSyncBlock, view) {
     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/esm/pm-plugins/main.js

@@ -36,6 +36,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;
+};
 export var createPlugin = function createPlugin(options, pmPluginFactoryParams, syncBlockStore, api) {
   var _ref2 = options || {},
     _ref2$useLongPressSel = _ref2.useLongPressSelection,
@@ -199,7 +206,7 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
       if (!isOffline) {
         if (bodiedSyncBlockRemoved.length > 0) {
           confirmationTransactionRef.current = tr;
-          return handleBodiedSyncBlockRemoval(tr, bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef);
+          return handleBodiedSyncBlockRemoval(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, fg('platform_synced_block_dogfooding') ? getDeleteReason(tr) : undefined);
         }
         if (bodiedSyncBlockAdded.length > 0) {
           if (Boolean(tr.getMeta(pmHistoryPluginKey))) {

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

@@ -25,7 +25,7 @@ var onDismissed = function onDismissed(syncBlockStore) {
     });
   };
 };
-export var handleBodiedSyncBlockRemoval = function handleBodiedSyncBlockRemoval(tr, bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef) {
+export var handleBodiedSyncBlockRemoval = function handleBodiedSyncBlockRemoval(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, deletionReason) {
   // Clear potential old pending deletion to retreat the deletion as first attempt
   syncBlockStore.sourceManager.clearPendingDeletion();
 
@@ -35,7 +35,7 @@ export var handleBodiedSyncBlockRemoval = function handleBodiedSyncBlockRemoval(
   // 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/esm/ui/DeleteConfirmationModal.compiled.css

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