@atlaskit/editor-plugin-synced-block 5.3.7 → 5.3.9

package/dist/es2019/pm-plugins/utils/utils.js

@@ -1,7 +1,9 @@
+import { expandSelectionToBlockRange } from '@atlaskit/editor-common/selection';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { CellSelection, findTable } from '@atlaskit/editor-tables';
+import { fg } from '@atlaskit/platform-feature-flags';
 export const findSyncBlock = (schema, selection) => {
   const {
     syncBlock
@@ -26,6 +28,9 @@ const UNSUPPORTED_NODE_TYPES = new Set(['inlineExtension', 'extension', 'bodiedE
  * or false if conversion is not possible
  */
 export const canBeConvertedToSyncBlock = selection => {
+  return fg('platform_synced_block_dogfooding') ? canBeConvertedToSyncBlockNew(selection) : canBeConvertedToSyncBlockOld(selection);
+};
+export const canBeConvertedToSyncBlockOld = selection => {
   const schema = selection.$from.doc.type.schema;
   const {
     nodes
@@ -66,6 +71,33 @@ export const canBeConvertedToSyncBlock = selection => {
     to
   };
 };
+export const canBeConvertedToSyncBlockNew = selection => {
+  const {
+    $from,
+    range
+  } = expandSelectionToBlockRange(selection);
+  if (!range) {
+    return false;
+  }
+  const from = range.start;
+  const to = range.end;
+  let canBeConverted = true;
+  $from.doc.nodesBetween(from, to, node => {
+    if (UNSUPPORTED_NODE_TYPES.has(node.type.name)) {
+      canBeConverted = false;
+      return false;
+    }
+  });
+  if (!canBeConverted) {
+    return false;
+  }
+  const contentToInclude = removeBreakoutMarks($from.doc.slice(from, to).content);
+  return {
+    contentToInclude,
+    from,
+    to
+  };
+};
 const removeBreakoutMarks = content => {
   const nodes = [];
 

package/dist/es2019/ui/DeleteConfirmationModal.js

@@ -14,10 +14,10 @@ import Spinner from '@atlaskit/spinner';
 import { syncedBlockPluginKey } from '../pm-plugins/main';
 const modalContentMap = {
   'source-block-deleted': {
-    titleMultiple: messages.deleteConfirmationModalTitleSingle,
+    titleMultiple: messages.deleteConfirmationModalTitleMultiple,
     titleSingle: messages.deleteConfirmationModalTitleSingle,
     descriptionSingle: messages.deleteConfirmationModalDescriptionNoRef,
-    descriptionMultiple: messages.deleteConfirmationModalDescription,
+    descriptionMultiple: messages.deleteConfirmationModalDescriptionMultiple,
     confirmButtonLabel: messages.deleteConfirmationModalDeleteButton
   },
   'source-block-unsynced': {
@@ -40,7 +40,6 @@ export const DeleteConfirmationModal = ({
   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,
@@ -65,7 +64,6 @@ 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(({
@@ -110,7 +108,6 @@ 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
       }) => {
@@ -123,28 +120,24 @@ 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 fetchReferences = async () => {
+        try {
+          const references = await Promise.all(syncBlockIds.map(async syncBlockId => {
+            var _references$reference, _references$reference2;
+            const references = await syncBlockStoreManager.sourceManager.fetchReferences(syncBlockId.resourceId);
+            if (references !== null && references !== void 0 && references.error) {
+              // Consider fetch fails as soon as one of the fetches fails
+              throw new Error();
+            }
+            return (_references$reference = (_references$reference2 = references.references) === null || _references$reference2 === void 0 ? void 0 : _references$reference2.length) !== null && _references$reference !== void 0 ? _references$reference : 0;
+          }));
+          const totalCount = references.reduce((sum, count) => sum + count, 0);
+          setReferenceCount(totalCount);
+        } catch {
+          setReferenceCount(0);
         }
-        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');
-      }
+      };
+      fetchReferences();
     }
   }, [isOpen, syncBlockIds, syncBlockStoreManager.sourceManager]);
   return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
@@ -163,7 +156,7 @@ export const DeleteConfirmationModal = ({
     isDeleting: bodiedSyncBlockDeletionStatus === 'processing',
     isDisabled: isOfflineMode(mode),
     deleteReason: deleteReason,
-    failToFetch: fetchStatus === 'error'
+    sourceCount: (syncBlockIds === null || syncBlockIds === void 0 ? void 0 : syncBlockIds.length) || 0
   })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalHeader, {
     hasCloseButton: true
   }, /*#__PURE__*/React.createElement(ModalTitle, {
@@ -189,7 +182,7 @@ const ModalContent = ({
   isDeleting,
   isDisabled,
   deleteReason,
-  failToFetch
+  sourceCount
 }) => {
   const {
     titleMultiple,
@@ -198,15 +191,16 @@ const ModalContent = ({
     descriptionMultiple,
     confirmButtonLabel
   } = content;
-  const hasNoReferenceOrFailToFetch = referenceCount === 0 || failToFetch;
+  const hasNoReferenceOrFailToFetch = referenceCount === 0;
+  const syncBlockCount = deleteReason === 'source-block-deleted' ? referenceCount + sourceCount : referenceCount;
   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
+    count: syncBlockCount
   }))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Text, null, hasNoReferenceOrFailToFetch ? formatMessage(descriptionSingle) : formatMessage(descriptionMultiple, {
-    syncBlockCount: referenceCount
+    syncBlockCount
   }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     onClick: handleClick(false)

package/dist/es2019/ui/SyncBlockLabel.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SyncBlockLabelSharedCssClassName } from '@atlaskit/editor-common/sync-block';
@@ -13,7 +13,8 @@ const SyncBlockLabelComponent = ({
   contentUpdatedAt,
   isSource,
   localId,
-  title
+  title,
+  isUnsyncedBlock
 }) => {
   const intl = useIntl();
   const {
@@ -50,6 +51,25 @@ const SyncBlockLabelComponent = ({
     setTooltipContent(tooltipContent);
   }, [contentUpdatedAt, formatMessage, intl, tooltipMessage]);
   const ariaDescribedById = `sync-block-label-description-${localId}`;
+  const getLabelContent = useMemo(() => {
+    if (isUnsyncedBlock && fg('platform_synced_block_dogfooding')) {
+      return /*#__PURE__*/React.createElement(Text, {
+        size: "small",
+        color: "color.text.subtle"
+      }, formatMessage(messages.unsyncedBlockLabel));
+    }
+    if (isSource || !title) {
+      return /*#__PURE__*/React.createElement(Text, {
+        size: "small",
+        color: "color.text.subtle"
+      }, formatMessage(messages.syncedBlockLabel));
+    }
+    return /*#__PURE__*/React.createElement(Text, {
+      maxLines: 1,
+      size: "small",
+      color: "color.text.subtle"
+    }, title);
+  }, [formatMessage, isSource, isUnsyncedBlock, title]);
   const label = /*#__PURE__*/React.createElement("div", {
     "data-testid": SyncBlockLabelDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -60,15 +80,8 @@ const SyncBlockLabelComponent = ({
     color: "var(--ds-icon-subtle, #505258)",
     size: "small",
     label: ""
-  }), isSource || !title ? /*#__PURE__*/React.createElement(Text, {
-    size: "small",
-    color: "color.text.subtle"
-  }, formatMessage(messages.syncedBlockLabel)) : /*#__PURE__*/React.createElement(Text, {
-    maxLines: 1,
-    size: "small",
-    color: "color.text.subtle"
-  }, title));
-  if (isSource && fg('platform_synced_block_dogfooding')) {
+  }), getLabelContent);
+  if ((isSource || isUnsyncedBlock) && fg('platform_synced_block_dogfooding')) {
     return label;
   }
   return /*#__PURE__*/React.createElement(Tooltip, {

package/dist/es2019/ui/SyncBlockRendererWrapper.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
 import { SyncBlockLabel } from './SyncBlockLabel';
 const SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
 const SyncBlockRendererWrapperComponent = ({
@@ -9,10 +10,12 @@ const SyncBlockRendererWrapperComponent = ({
   localId,
   api
 }) => {
-  var _syncBlockFetchResult, _syncBlockFetchResult2;
+  var _syncBlockFetchResult, _syncBlockFetchResult2, _syncBlockFetchResult3, _syncBlockFetchResult4, _syncBlockFetchResult5, _syncBlockFetchResult6;
   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;
+  const isUnpublishedBlock = ((_syncBlockFetchResult3 = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult3 === void 0 ? void 0 : (_syncBlockFetchResult4 = _syncBlockFetchResult3.data) === null || _syncBlockFetchResult4 === void 0 ? void 0 : _syncBlockFetchResult4.status) === 'unpublished';
+  const isUnsyncedBlock = isUnpublishedBlock || (syncBlockFetchResult === null || syncBlockFetchResult === void 0 ? void 0 : (_syncBlockFetchResult5 = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult5 === void 0 ? void 0 : (_syncBlockFetchResult6 = _syncBlockFetchResult5.error) === null || _syncBlockFetchResult6 === void 0 ? void 0 : _syncBlockFetchResult6.type) === SyncBlockError.NotFound;
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     "data-testid": SyncBlockRendererWrapperDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -25,7 +28,8 @@ const SyncBlockRendererWrapperComponent = ({
     isSource: false,
     title: title,
     contentUpdatedAt: contentUpdatedAt,
-    localId: localId
+    localId: localId,
+    isUnsyncedBlock: isUnsyncedBlock
   }));
 };
 export const SyncBlockRendererWrapper = /*#__PURE__*/React.memo(SyncBlockRendererWrapperComponent);

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

@@ -24,6 +24,17 @@ export var createSyncedBlock = function createSyncedBlock(_ref) {
     var paragraphNode = paragraph.createAndFill({});
     var newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, paragraphNode ? [paragraphNode] : []);
     if (!newBodiedSyncBlockNode) {
+      if (fg('platform_synced_block_dogfooding')) {
+        fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+          action: ACTION.ERROR,
+          actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
+          actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
+          attributes: {
+            error: 'Create and fill for empty content failed'
+          },
+          eventType: EVENT_TYPE.OPERATIONAL
+        });
+      }
       return false;
     }
 
@@ -54,6 +65,17 @@ export var createSyncedBlock = function createSyncedBlock(_ref) {
     var _attrs = syncBlockStore.sourceManager.generateBodiedSyncBlockAttrs();
     var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_attrs, conversionInfo.contentToInclude);
     if (!_newBodiedSyncBlockNode) {
+      if (fg('platform_synced_block_dogfooding')) {
+        fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent({
+          action: ACTION.ERROR,
+          actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
+          actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
+          attributes: {
+            error: 'Create and fill for content failed'
+          },
+          eventType: EVENT_TYPE.OPERATIONAL
+        });
+      }
       return false;
     }
 
@@ -172,7 +194,17 @@ export var removeSyncedBlock = function removeSyncedBlock(api) {
     return true;
   };
 };
-
+export var removeSyncedBlockAtPos = function removeSyncedBlockAtPos(api, pos) {
+  api === null || api === void 0 || api.core.actions.execute(function (_ref4) {
+    var tr = _ref4.tr;
+    var node = tr.doc.nodeAt(pos);
+    if ((node === null || node === void 0 ? void 0 : node.type.name) === 'syncBlock') {
+      var _node$nodeSize;
+      return tr.replace(pos, pos + ((_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 0));
+    }
+    return tr;
+  });
+};
 /**
  * Deletes (bodied)SyncBlock node and paste its content to the editor
  */

package/dist/esm/nodeviews/syncedBlock.js

@@ -11,9 +11,10 @@ import React from 'react';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
-import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+import { SyncBlockSharedCssClassName, SyncBlockActionsProvider } from '@atlaskit/editor-common/sync-block';
 import { useFetchSyncBlockData as _useFetchSyncBlockData, useFetchSyncBlockTitle as _useFetchSyncBlockTitle } from '@atlaskit/editor-synced-block-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { removeSyncedBlockAtPos } from '../editor-commands';
 import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
 export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   function SyncBlock(props) {
@@ -35,14 +36,15 @@ export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     }
   }, {
     key: "render",
-    value: function render() {
+    value: function render(_ref) {
       var _this$options,
         _this$api$syncedBlock,
         _this$api,
         _this$api2,
-        _this$options2,
         _this2 = this,
+        _this$options2,
         _this$options3;
+      var getPos = _ref.getPos;
       if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.syncedBlockRenderer)) {
         return null;
       }
@@ -63,6 +65,16 @@ export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
         component: ACTION_SUBJECT.SYNCED_BLOCK,
         dispatchAnalyticsEvent: (_this$api2 = this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.analytics) === null || _this$api2 === void 0 ? void 0 : _this$api2.actions.fireAnalyticsEvent,
         fallbackComponent: null
+      }, /*#__PURE__*/React.createElement(SyncBlockActionsProvider, {
+        removeSyncBlock: function removeSyncBlock() {
+          var pos = getPos();
+          if (pos !== undefined) {
+            removeSyncedBlockAtPos(_this2.api, pos);
+          }
+        },
+        fetchSyncBlockSourceInfo: function fetchSyncBlockSourceInfo(sourceAri) {
+          return syncBlockStore.referenceManager.fetchSyncBlockSourceInfoBySourceAri(sourceAri);
+        }
       }, /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
         localId: this.node.attrs.localId,
         syncedBlockRenderer: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.syncedBlockRenderer,
@@ -74,7 +86,7 @@ export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
           return _useFetchSyncBlockData(syncBlockStore, resourceId, localId, (_this2$api = _this2.api) === null || _this2$api === void 0 || (_this2$api = _this2$api.analytics) === null || _this2$api === void 0 || (_this2$api = _this2$api.actions) === null || _this2$api === void 0 ? void 0 : _this2$api.fireAnalyticsEvent);
         },
         api: this.api
-      })) : /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
+      }))) : /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
         localId: this.node.attrs.localId,
         syncedBlockRenderer: (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.syncedBlockRenderer,
         useFetchSyncBlockTitle: function useFetchSyncBlockTitle() {
@@ -96,10 +108,10 @@ export var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     }
   }]);
 }(ReactNodeView);
-export var syncBlockNodeView = function syncBlockNodeView(_ref) {
-  var options = _ref.options,
-    pmPluginFactoryParams = _ref.pmPluginFactoryParams,
-    api = _ref.api;
+export var syncBlockNodeView = function syncBlockNodeView(_ref2) {
+  var options = _ref2.options,
+    pmPluginFactoryParams = _ref2.pmPluginFactoryParams,
+    api = _ref2.api;
   return function (node, view, getPos) {
     var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
       eventDispatcher = pmPluginFactoryParams.eventDispatcher;

package/dist/esm/pm-plugins/utils/utils.js

@@ -1,7 +1,9 @@
+import { expandSelectionToBlockRange } from '@atlaskit/editor-common/selection';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { CellSelection, findTable } from '@atlaskit/editor-tables';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var findSyncBlock = function findSyncBlock(schema, selection) {
   var syncBlock = schema.nodes.syncBlock;
   return findSelectedNodeOfType(syncBlock)(selection);
@@ -26,6 +28,9 @@ var UNSUPPORTED_NODE_TYPES = new Set(['inlineExtension', 'extension', 'bodiedExt
  * or false if conversion is not possible
  */
 export var canBeConvertedToSyncBlock = function canBeConvertedToSyncBlock(selection) {
+  return fg('platform_synced_block_dogfooding') ? canBeConvertedToSyncBlockNew(selection) : canBeConvertedToSyncBlockOld(selection);
+};
+export var canBeConvertedToSyncBlockOld = function canBeConvertedToSyncBlockOld(selection) {
   var schema = selection.$from.doc.type.schema;
   var nodes = schema.nodes;
   var from = selection.from;
@@ -64,6 +69,32 @@ export var canBeConvertedToSyncBlock = function canBeConvertedToSyncBlock(select
     to: to
   };
 };
+export var canBeConvertedToSyncBlockNew = function canBeConvertedToSyncBlockNew(selection) {
+  var _expandSelectionToBlo = expandSelectionToBlockRange(selection),
+    $from = _expandSelectionToBlo.$from,
+    range = _expandSelectionToBlo.range;
+  if (!range) {
+    return false;
+  }
+  var from = range.start;
+  var to = range.end;
+  var canBeConverted = true;
+  $from.doc.nodesBetween(from, to, function (node) {
+    if (UNSUPPORTED_NODE_TYPES.has(node.type.name)) {
+      canBeConverted = false;
+      return false;
+    }
+  });
+  if (!canBeConverted) {
+    return false;
+  }
+  var contentToInclude = removeBreakoutMarks($from.doc.slice(from, to).content);
+  return {
+    contentToInclude: contentToInclude,
+    from: from,
+    to: to
+  };
+};
 var removeBreakoutMarks = function removeBreakoutMarks(content) {
   var nodes = [];
 

package/dist/esm/ui/DeleteConfirmationModal.js

@@ -17,10 +17,10 @@ import Spinner from '@atlaskit/spinner';
 import { syncedBlockPluginKey } from '../pm-plugins/main';
 var modalContentMap = {
   'source-block-deleted': {
-    titleMultiple: messages.deleteConfirmationModalTitleSingle,
+    titleMultiple: messages.deleteConfirmationModalTitleMultiple,
     titleSingle: messages.deleteConfirmationModalTitleSingle,
     descriptionSingle: messages.deleteConfirmationModalDescriptionNoRef,
-    descriptionMultiple: messages.deleteConfirmationModalDescription,
+    descriptionMultiple: messages.deleteConfirmationModalDescriptionMultiple,
     confirmButtonLabel: messages.deleteConfirmationModalDeleteButton
   },
   'source-block-unsynced': {
@@ -54,10 +54,6 @@ export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     deleteReason = _useState8[0],
     setDeleteReason = _useState8[1];
-  var _useState9 = useState('none'),
-    _useState0 = _slicedToArray(_useState9, 2),
-    fetchStatus = _useState0[0],
-    setFetchStatus = _useState0[1];
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['connectivity', 'syncedBlock'], function (states) {
       var _states$connectivityS, _states$syncedBlockSt, _states$syncedBlockSt2;
       return {
@@ -81,7 +77,6 @@ export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
       }
       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) {
@@ -125,7 +120,6 @@ export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
       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(syncedBlockPluginKey, {
@@ -137,49 +131,65 @@ export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
   }, [api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, bodiedSyncBlockDeletionStatus, isOpen]);
   useEffect(function () {
     if (isOpen && syncBlockIds !== undefined && fg('platform_synced_block_dogfooding')) {
-      var _referenceCount = 0;
-      setFetchStatus('loading');
-      var fetchFailed = false;
-      syncBlockIds.forEach( /*#__PURE__*/function () {
-        var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(syncBlockId) {
-          var references, _references$reference, _references$reference2;
-          return _regeneratorRuntime.wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
+      var fetchReferences = /*#__PURE__*/function () {
+        var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+          var references, totalCount;
+          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.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");
+                _context2.prev = 0;
+                _context2.next = 3;
+                return Promise.all(syncBlockIds.map( /*#__PURE__*/function () {
+                  var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(syncBlockId) {
+                    var _references$reference, _references$reference2;
+                    var references;
+                    return _regeneratorRuntime.wrap(function _callee$(_context) {
+                      while (1) switch (_context.prev = _context.next) {
+                        case 0:
+                          _context.next = 2;
+                          return syncBlockStoreManager.sourceManager.fetchReferences(syncBlockId.resourceId);
+                        case 2:
+                          references = _context.sent;
+                          if (!(references !== null && references !== void 0 && references.error)) {
+                            _context.next = 5;
+                            break;
+                          }
+                          throw new Error();
+                        case 5:
+                          return _context.abrupt("return", (_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 6:
+                        case "end":
+                          return _context.stop();
+                      }
+                    }, _callee);
+                  }));
+                  return function (_x) {
+                    return _ref6.apply(this, arguments);
+                  };
+                }()));
+              case 3:
+                references = _context2.sent;
+                totalCount = references.reduce(function (sum, count) {
+                  return sum + count;
+                }, 0);
+                setReferenceCount(totalCount);
+                _context2.next = 11;
+                break;
+              case 8:
+                _context2.prev = 8;
+                _context2.t0 = _context2["catch"](0);
+                setReferenceCount(0);
               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();
+                return _context2.stop();
             }
-          }, _callee);
+          }, _callee2, null, [[0, 8]]);
         }));
-        return function (_x) {
+        return function fetchReferences() {
           return _ref5.apply(this, arguments);
         };
-      }());
-      if (!fetchFailed) {
-        setReferenceCount(_referenceCount);
-        setFetchStatus('success');
-      }
+      }();
+      fetchReferences();
     }
   }, [isOpen, syncBlockIds, syncBlockStoreManager.sourceManager]);
   return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
@@ -198,7 +208,7 @@ export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
     isDeleting: bodiedSyncBlockDeletionStatus === 'processing',
     isDisabled: isOfflineMode(mode),
     deleteReason: deleteReason,
-    failToFetch: fetchStatus === 'error'
+    sourceCount: (syncBlockIds === null || syncBlockIds === void 0 ? void 0 : syncBlockIds.length) || 0
   })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalHeader, {
     hasCloseButton: true
   }, /*#__PURE__*/React.createElement(ModalTitle, {
@@ -216,29 +226,30 @@ export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
     isLoading: bodiedSyncBlockDeletionStatus === 'processing'
   }, formatMessage(messages.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 ModalContent = function ModalContent(_ref7) {
+  var content = _ref7.content,
+    referenceCount = _ref7.referenceCount,
+    handleClick = _ref7.handleClick,
+    formatMessage = _ref7.formatMessage,
+    isDeleting = _ref7.isDeleting,
+    isDisabled = _ref7.isDisabled,
+    deleteReason = _ref7.deleteReason,
+    sourceCount = _ref7.sourceCount;
   var titleMultiple = content.titleMultiple,
     titleSingle = content.titleSingle,
     descriptionSingle = content.descriptionSingle,
     descriptionMultiple = content.descriptionMultiple,
     confirmButtonLabel = content.confirmButtonLabel;
-  var hasNoReferenceOrFailToFetch = referenceCount === 0 || failToFetch;
+  var hasNoReferenceOrFailToFetch = referenceCount === 0;
+  var syncBlockCount = deleteReason === 'source-block-deleted' ? referenceCount + sourceCount : referenceCount;
   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
+    count: syncBlockCount
   }))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Text, null, hasNoReferenceOrFailToFetch ? formatMessage(descriptionSingle) : formatMessage(descriptionMultiple, {
-    syncBlockCount: referenceCount
+    syncBlockCount: syncBlockCount
   }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     onClick: handleClick(false)