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

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 5.3.8
+
+### Patch Changes
+
+- [`f11ff647ea458`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f11ff647ea458) -
+  [ux] [EDITOR-4521] Implement source deleted reference UI, update block deleted/unsynced reference
+  UI to add delete button, unsynced label and source title/url
+- Updated dependencies
+
 ## 5.3.7
 
 ### Patch Changes

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unsync = exports.removeSyncedBlock = exports.editSyncedBlockSource = exports.createSyncedBlock = exports.copySyncedBlockReferenceToClipboardEditorCommand = exports.copySyncedBlockReferenceToClipboard = void 0;
+exports.unsync = exports.removeSyncedBlockAtPos = exports.removeSyncedBlock = exports.editSyncedBlockSource = exports.createSyncedBlock = exports.copySyncedBlockReferenceToClipboardEditorCommand = exports.copySyncedBlockReferenceToClipboard = void 0;
 var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _copyButton = require("@atlaskit/editor-common/copy-button");
@@ -178,7 +178,17 @@ var removeSyncedBlock = exports.removeSyncedBlock = function removeSyncedBlock(a
     return true;
   };
 };
-
+var removeSyncedBlockAtPos = exports.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/cjs/nodeviews/syncedBlock.js

@@ -18,6 +18,7 @@ var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/rea
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _editorCommands = require("../editor-commands");
 var _SyncBlockRendererWrapper = require("../ui/SyncBlockRendererWrapper");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -42,14 +43,15 @@ var SyncBlock = exports.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;
       }
@@ -70,6 +72,16 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
         component: _analytics.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.default.createElement(_syncBlock.SyncBlockActionsProvider, {
+        removeSyncBlock: function removeSyncBlock() {
+          var pos = getPos();
+          if (pos !== undefined) {
+            (0, _editorCommands.removeSyncedBlockAtPos)(_this2.api, pos);
+          }
+        },
+        fetchSyncBlockSourceInfo: function fetchSyncBlockSourceInfo(sourceAri) {
+          return syncBlockStore.referenceManager.fetchSyncBlockSourceInfoBySourceAri(sourceAri);
+        }
       }, /*#__PURE__*/_react.default.createElement(_SyncBlockRendererWrapper.SyncBlockRendererWrapper, {
         localId: this.node.attrs.localId,
         syncedBlockRenderer: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.syncedBlockRenderer,
@@ -81,7 +93,7 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
           return (0, _editorSyncedBlockProvider.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.default.createElement(_SyncBlockRendererWrapper.SyncBlockRendererWrapper, {
+      }))) : /*#__PURE__*/_react.default.createElement(_SyncBlockRendererWrapper.SyncBlockRendererWrapper, {
         localId: this.node.attrs.localId,
         syncedBlockRenderer: (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.syncedBlockRenderer,
         useFetchSyncBlockTitle: function useFetchSyncBlockTitle() {
@@ -103,10 +115,10 @@ var SyncBlock = exports.SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     }
   }]);
 }(_reactNodeView.default);
-var syncBlockNodeView = exports.syncBlockNodeView = function syncBlockNodeView(_ref) {
-  var options = _ref.options,
-    pmPluginFactoryParams = _ref.pmPluginFactoryParams,
-    api = _ref.api;
+var syncBlockNodeView = exports.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/cjs/ui/DeleteConfirmationModal.js

@@ -26,10 +26,10 @@ 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,
+    titleMultiple: _messages.syncBlockMessages.deleteConfirmationModalTitleMultiple,
     titleSingle: _messages.syncBlockMessages.deleteConfirmationModalTitleSingle,
     descriptionSingle: _messages.syncBlockMessages.deleteConfirmationModalDescriptionNoRef,
-    descriptionMultiple: _messages.syncBlockMessages.deleteConfirmationModalDescription,
+    descriptionMultiple: _messages.syncBlockMessages.deleteConfirmationModalDescriptionMultiple,
     confirmButtonLabel: _messages.syncBlockMessages.deleteConfirmationModalDeleteButton
   },
   'source-block-unsynced': {
@@ -63,10 +63,6 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
     _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 {
@@ -90,7 +86,6 @@ 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) {
@@ -134,7 +129,6 @@ 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, {
@@ -146,49 +140,65 @@ 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) {
+      var fetchReferences = /*#__PURE__*/function () {
+        var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+          var references, totalCount;
+          return _regenerator.default.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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(syncBlockId) {
+                    var _references$reference, _references$reference2;
+                    var references;
+                    return _regenerator.default.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.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
@@ -207,7 +217,7 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
     isDeleting: bodiedSyncBlockDeletionStatus === 'processing',
     isDisabled: (0, _editorPluginConnectivity.isOfflineMode)(mode),
     deleteReason: deleteReason,
-    failToFetch: fetchStatus === 'error'
+    sourceCount: (syncBlockIds === null || syncBlockIds === void 0 ? void 0 : syncBlockIds.length) || 0
   })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, {
     hasCloseButton: true
   }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, {
@@ -225,29 +235,30 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
     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 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.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
+    count: syncBlockCount
   }))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, hasNoReferenceOrFailToFetch ? formatMessage(descriptionSingle) : formatMessage(descriptionMultiple, {
-    syncBlockCount: referenceCount
+    syncBlockCount: syncBlockCount
   }))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_new.default, {
     appearance: "subtle",
     onClick: handleClick(false)

package/dist/cjs/ui/SyncBlockLabel.js

@@ -23,7 +23,8 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
   var contentUpdatedAt = _ref.contentUpdatedAt,
     isSource = _ref.isSource,
     localId = _ref.localId,
-    title = _ref.title;
+    title = _ref.title,
+    isUnsyncedBlock = _ref.isUnsyncedBlock;
   var intl = (0, _reactIntlNext.useIntl)();
   var formatMessage = intl.formatMessage;
   var _useState = (0, _react.useState)(formatMessage(_messages.syncBlockMessages.defaultSyncBlockTooltip)),
@@ -60,6 +61,25 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
     setTooltipContent(tooltipContent);
   }, [contentUpdatedAt, formatMessage, intl, tooltipMessage]);
   var ariaDescribedById = "sync-block-label-description-".concat(localId);
+  var getLabelContent = (0, _react.useMemo)(function () {
+    if (isUnsyncedBlock && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
+      return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+        size: "small",
+        color: "color.text.subtle"
+      }, formatMessage(_messages.syncBlockMessages.unsyncedBlockLabel));
+    }
+    if (isSource || !title) {
+      return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+        size: "small",
+        color: "color.text.subtle"
+      }, formatMessage(_messages.syncBlockMessages.syncedBlockLabel));
+    }
+    return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      maxLines: 1,
+      size: "small",
+      color: "color.text.subtle"
+    }, title);
+  }, [formatMessage, isSource, isUnsyncedBlock, title]);
   var label = /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": SyncBlockLabelDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -70,15 +90,8 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
     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));
-  if (isSource && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
+  }), getLabelContent);
+  if ((isSource || isUnsyncedBlock) && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
     return label;
   }
   return /*#__PURE__*/_react.default.createElement(_tooltip.default, {

package/dist/cjs/ui/SyncBlockRendererWrapper.js

@@ -7,10 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.SyncBlockRendererWrapper = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
+var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _SyncBlockLabel = require("./SyncBlockLabel");
 var SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
 var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperComponent(_ref) {
-  var _syncBlockFetchResult;
+  var _syncBlockFetchResult, _syncBlockFetchResult2;
   var syncedBlockRenderer = _ref.syncedBlockRenderer,
     useFetchSyncBlockData = _ref.useFetchSyncBlockData,
     useFetchSyncBlockTitle = _ref.useFetchSyncBlockTitle,
@@ -19,6 +20,7 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
   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;
+  var isUnsyncedBlock = (syncBlockFetchResult === null || syncBlockFetchResult === void 0 || (_syncBlockFetchResult2 = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult2 === void 0 || (_syncBlockFetchResult2 = _syncBlockFetchResult2.error) === null || _syncBlockFetchResult2 === void 0 ? void 0 : _syncBlockFetchResult2.type) === _editorSyncedBlockProvider.SyncBlockError.NotFound;
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": SyncBlockRendererWrapperDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -31,7 +33,8 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
     isSource: false,
     title: title,
     contentUpdatedAt: contentUpdatedAt,
-    localId: localId
+    localId: localId,
+    isUnsyncedBlock: isUnsyncedBlock
   }));
 };
 var SyncBlockRendererWrapper = exports.SyncBlockRendererWrapper = /*#__PURE__*/_react.default.memo(SyncBlockRendererWrapperComponent);

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

@@ -180,7 +180,18 @@ export const removeSyncedBlock = api => (state, dispatch, _view) => {
   api === null || api === void 0 ? void 0 : api.core.actions.focus();
   return true;
 };
-
+export const removeSyncedBlockAtPos = (api, pos) => {
+  api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+    tr
+  }) => {
+    const 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/es2019/nodeviews/syncedBlock.js

@@ -2,9 +2,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, 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 class SyncBlock extends ReactNodeView {
   constructor(props) {
@@ -18,7 +19,9 @@ export class SyncBlock extends ReactNodeView {
     domRef.classList.add(SyncBlockSharedCssClassName.prefix);
     return domRef;
   }
-  render() {
+  render({
+    getPos
+  }) {
     var _this$options, _this$api$syncedBlock, _this$api, _this$api$syncedBlock2, _this$api$syncedBlock3, _this$api2, _this$api2$analytics, _this$options2, _this$options3;
     if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.syncedBlockRenderer)) {
       return null;
@@ -41,6 +44,14 @@ export class SyncBlock extends ReactNodeView {
       component: ACTION_SUBJECT.SYNCED_BLOCK,
       dispatchAnalyticsEvent: (_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$analytics = _this$api2.analytics) === null || _this$api2$analytics === void 0 ? void 0 : _this$api2$analytics.actions.fireAnalyticsEvent,
       fallbackComponent: null
+    }, /*#__PURE__*/React.createElement(SyncBlockActionsProvider, {
+      removeSyncBlock: () => {
+        const pos = getPos();
+        if (pos !== undefined) {
+          removeSyncedBlockAtPos(this.api, pos);
+        }
+      },
+      fetchSyncBlockSourceInfo: sourceAri => 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,
@@ -50,7 +61,7 @@ export class SyncBlock extends ReactNodeView {
         return useFetchSyncBlockData(syncBlockStore, resourceId, localId, (_this$api3 = this.api) === null || _this$api3 === void 0 ? void 0 : (_this$api3$analytics = _this$api3.analytics) === null || _this$api3$analytics === void 0 ? void 0 : (_this$api3$analytics$ = _this$api3$analytics.actions) === null || _this$api3$analytics$ === void 0 ? void 0 : _this$api3$analytics$.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: () => useFetchSyncBlockTitle(syncBlockStore, this.node),
@@ -81,7 +92,7 @@ export const syncBlockNodeView = ({
     options,
     node,
     view,
-    getPos,
+    getPos: getPos,
     portalProviderAPI,
     eventDispatcher
   }).init();

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,11 @@ const SyncBlockRendererWrapperComponent = ({
   localId,
   api
 }) => {
-  var _syncBlockFetchResult, _syncBlockFetchResult2;
+  var _syncBlockFetchResult, _syncBlockFetchResult2, _syncBlockFetchResult3, _syncBlockFetchResult4;
   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 isUnsyncedBlock = (syncBlockFetchResult === null || syncBlockFetchResult === void 0 ? void 0 : (_syncBlockFetchResult3 = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult3 === void 0 ? void 0 : (_syncBlockFetchResult4 = _syncBlockFetchResult3.error) === null || _syncBlockFetchResult4 === void 0 ? void 0 : _syncBlockFetchResult4.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 +27,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

@@ -172,7 +172,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/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)

package/dist/esm/ui/SyncBlockLabel.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-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';
@@ -14,7 +14,8 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
   var contentUpdatedAt = _ref.contentUpdatedAt,
     isSource = _ref.isSource,
     localId = _ref.localId,
-    title = _ref.title;
+    title = _ref.title,
+    isUnsyncedBlock = _ref.isUnsyncedBlock;
   var intl = useIntl();
   var formatMessage = intl.formatMessage;
   var _useState = useState(formatMessage(messages.defaultSyncBlockTooltip)),
@@ -51,6 +52,25 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
     setTooltipContent(tooltipContent);
   }, [contentUpdatedAt, formatMessage, intl, tooltipMessage]);
   var ariaDescribedById = "sync-block-label-description-".concat(localId);
+  var getLabelContent = useMemo(function () {
+    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]);
   var label = /*#__PURE__*/React.createElement("div", {
     "data-testid": SyncBlockLabelDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -61,15 +81,8 @@ var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
     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/esm/ui/SyncBlockRendererWrapper.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
 import { SyncBlockLabel } from './SyncBlockLabel';
 var SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
 var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperComponent(_ref) {
-  var _syncBlockFetchResult;
+  var _syncBlockFetchResult, _syncBlockFetchResult2;
   var syncedBlockRenderer = _ref.syncedBlockRenderer,
     useFetchSyncBlockData = _ref.useFetchSyncBlockData,
     useFetchSyncBlockTitle = _ref.useFetchSyncBlockTitle,
@@ -12,6 +13,7 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
   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;
+  var isUnsyncedBlock = (syncBlockFetchResult === null || syncBlockFetchResult === void 0 || (_syncBlockFetchResult2 = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult2 === void 0 || (_syncBlockFetchResult2 = _syncBlockFetchResult2.error) === null || _syncBlockFetchResult2 === void 0 ? void 0 : _syncBlockFetchResult2.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
@@ -24,7 +26,8 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
     isSource: false,
     title: title,
     contentUpdatedAt: contentUpdatedAt,
-    localId: localId
+    localId: localId,
+    isUnsyncedBlock: isUnsyncedBlock
   }));
 };
 export var SyncBlockRendererWrapper = /*#__PURE__*/React.memo(SyncBlockRendererWrapperComponent);

package/dist/types/editor-commands/index.d.ts

@@ -15,6 +15,7 @@ export declare const copySyncedBlockReferenceToClipboardEditorCommand: (syncBloc
 export declare const copySyncedBlockReferenceToClipboard: (syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
 export declare const editSyncedBlockSource: (syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
 export declare const removeSyncedBlock: (api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
+export declare const removeSyncedBlockAtPos: (api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined, pos: number) => void;
 /**
  * Deletes (bodied)SyncBlock node and paste its content to the editor
  */

package/dist/types/nodeviews/syncedBlock.d.ts

@@ -3,7 +3,7 @@ import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import ReactNodeView, { type getPosHandler } from '@atlaskit/editor-common/react-node-view';
 import type { ReactComponentProps } from '@atlaskit/editor-common/react-node-view';
-import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI, getPosHandlerNode, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { type SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
@@ -11,7 +11,7 @@ import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlock
 export interface SyncBlockNodeViewProps extends ReactComponentProps {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
     eventDispatcher: EventDispatcher;
-    getPos: getPosHandler;
+    getPos: getPosHandlerNode;
     isNodeNested?: boolean;
     node: PMNode;
     options: SyncedBlockPluginOptions | undefined;
@@ -26,7 +26,7 @@ export declare class SyncBlock extends ReactNodeView<SyncBlockNodeViewProps> {
     constructor(props: SyncBlockNodeViewProps);
     unsubscribe: (() => void) | undefined;
     createDomRef(): HTMLElement;
-    render(): React.JSX.Element | null;
+    render({ getPos }: SyncBlockNodeViewProps): React.JSX.Element | null;
     destroy(): void;
 }
 export interface SyncBlockNodeViewProperties {

package/dist/types/ui/SyncBlockLabel.d.ts

@@ -2,8 +2,9 @@ import React from 'react';
 type SyncBlockLabelProps = {
     contentUpdatedAt?: string;
     isSource: boolean;
+    isUnsyncedBlock?: boolean;
     localId: string;
     title?: string;
 };
-export declare const SyncBlockLabel: React.MemoExoticComponent<({ contentUpdatedAt, isSource, localId, title, }: SyncBlockLabelProps) => React.JSX.Element>;
+export declare const SyncBlockLabel: React.MemoExoticComponent<({ contentUpdatedAt, isSource, localId, title, isUnsyncedBlock, }: SyncBlockLabelProps) => React.JSX.Element>;
 export {};

package/dist/types-ts4.5/editor-commands/index.d.ts

@@ -15,6 +15,7 @@ export declare const copySyncedBlockReferenceToClipboardEditorCommand: (syncBloc
 export declare const copySyncedBlockReferenceToClipboard: (syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
 export declare const editSyncedBlockSource: (syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
 export declare const removeSyncedBlock: (api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
+export declare const removeSyncedBlockAtPos: (api: ExtractInjectionAPI<SyncedBlockPlugin> | undefined, pos: number) => void;
 /**
  * Deletes (bodied)SyncBlock node and paste its content to the editor
  */

package/dist/types-ts4.5/nodeviews/syncedBlock.d.ts

@@ -3,7 +3,7 @@ import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import ReactNodeView, { type getPosHandler } from '@atlaskit/editor-common/react-node-view';
 import type { ReactComponentProps } from '@atlaskit/editor-common/react-node-view';
-import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI, getPosHandlerNode, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { type SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
@@ -11,7 +11,7 @@ import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlock
 export interface SyncBlockNodeViewProps extends ReactComponentProps {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
     eventDispatcher: EventDispatcher;
-    getPos: getPosHandler;
+    getPos: getPosHandlerNode;
     isNodeNested?: boolean;
     node: PMNode;
     options: SyncedBlockPluginOptions | undefined;
@@ -26,7 +26,7 @@ export declare class SyncBlock extends ReactNodeView<SyncBlockNodeViewProps> {
     constructor(props: SyncBlockNodeViewProps);
     unsubscribe: (() => void) | undefined;
     createDomRef(): HTMLElement;
-    render(): React.JSX.Element | null;
+    render({ getPos }: SyncBlockNodeViewProps): React.JSX.Element | null;
     destroy(): void;
 }
 export interface SyncBlockNodeViewProperties {

package/dist/types-ts4.5/ui/SyncBlockLabel.d.ts

@@ -2,8 +2,9 @@ import React from 'react';
 type SyncBlockLabelProps = {
     contentUpdatedAt?: string;
     isSource: boolean;
+    isUnsyncedBlock?: boolean;
     localId: string;
     title?: string;
 };
-export declare const SyncBlockLabel: React.MemoExoticComponent<({ contentUpdatedAt, isSource, localId, title, }: SyncBlockLabelProps) => React.JSX.Element>;
+export declare const SyncBlockLabel: React.MemoExoticComponent<({ contentUpdatedAt, isSource, localId, title, isUnsyncedBlock, }: SyncBlockLabelProps) => React.JSX.Element>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "5.3.7",
+	"version": "5.3.8",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",