@atlaskit/editor-plugin-synced-block 4.4.0 → 4.5.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 4.5.0
+
+### Minor Changes
+
+- [`4daaa6358e6fb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4daaa6358e6fb) -
+  Update resourceId generation for create reference from browser copy + pasting source block
+
+### Patch Changes
+
+- [`dcc6a3e73f414`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dcc6a3e73f414) -
+  [ux] EDITOR-3304 add offline error state for sync blocks and update other error UI to match new
+  designs
+- Updated dependencies
+
+## 4.4.1
+
+### Patch Changes
+
+- [`433b512284284`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/433b512284284) -
+  [EDITOR-2558] Update bodiedSyncBlock deletion failure flow
+- Updated dependencies
+
 ## 4.4.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -4,7 +4,8 @@
 		"target": "es5",
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__editor-plugin-synced-block",
 		"rootDir": "../",
-		"composite": true
+		"composite": true,
+		"noCheck": true
 	},
 	"include": [
 		"../src/**/*.ts",

package/afm-jira/tsconfig.json

@@ -4,7 +4,8 @@
 		"target": "es5",
 		"outDir": "../../../../../jira/tsDist/@atlaskit__editor-plugin-synced-block/app",
 		"rootDir": "../",
-		"composite": true
+		"composite": true,
+		"noCheck": true
 	},
 	"include": [
 		"../src/**/*.ts",

package/afm-products/tsconfig.json

@@ -4,7 +4,8 @@
 		"target": "es5",
 		"outDir": "../../../../../tsDist/@atlaskit__editor-plugin-synced-block/app",
 		"rootDir": "../",
-		"composite": true
+		"composite": true,
+		"noCheck": true
 	},
 	"include": [
 		"../src/**/*.ts",

package/dist/cjs/nodeviews/syncedBlock.js

@@ -67,7 +67,8 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
         useFetchSyncBlockData: function useFetchSyncBlockData() {
           var _this2$api;
           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
       });
     }
   }, {

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

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.syncedBlockPluginKey = exports.createPlugin = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _selection = require("@atlaskit/editor-common/selection");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
@@ -14,18 +16,23 @@ var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider
 var _bodiedLazySyncedBlock = require("../nodeviews/bodiedLazySyncedBlock");
 var _lazySyncedBlock = require("../nodeviews/lazySyncedBlock");
 var _types = require("../types");
+var _handleBodiedSyncBlockRemoval = require("./utils/handle-bodied-sync-block-removal");
 var _ignoreDomEvent = require("./utils/ignore-dom-event");
 var _selectionDecorations = require("./utils/selection-decorations");
 var _trackSyncBlocks4 = require("./utils/track-sync-blocks");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var syncedBlockPluginKey = exports.syncedBlockPluginKey = new _state.PluginKey('syncedBlockPlugin');
 var createPlugin = exports.createPlugin = function createPlugin(options, pmPluginFactoryParams, syncBlockStore, api) {
   var _ref = options || {},
     _ref$useLongPressSele = _ref.useLongPressSelection,
     useLongPressSelection = _ref$useLongPressSele === void 0 ? false : _ref$useLongPressSele;
-  var confirmationTransaction;
+  var confirmationTransactionRef = {
+    current: undefined
+  };
   return new _safePlugin.SafePlugin({
     key: syncedBlockPluginKey,
     state: {
@@ -36,23 +43,25 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         syncBlockStore.referenceManager.fetchSyncBlocksData((0, _editorSyncedBlockProvider.convertPMNodesToSyncBlockNodes)(syncBlockNodes));
         return {
           selectionDecorationSet: (0, _selectionDecorations.calculateDecorations)(instance.doc, instance.selection, instance.schema),
-          showFlag: false,
+          activeFlag: false,
           syncBlockStore: syncBlockStore
         };
       },
       apply: function apply(tr, currentPluginState, oldEditorState) {
-        var _meta$showFlag;
+        var _meta$activeFlag, _meta$bodiedSyncBlock;
         var meta = tr.getMeta(syncedBlockPluginKey);
-        var showFlag = currentPluginState.showFlag,
-          selectionDecorationSet = currentPluginState.selectionDecorationSet;
+        var activeFlag = currentPluginState.activeFlag,
+          selectionDecorationSet = currentPluginState.selectionDecorationSet,
+          bodiedSyncBlockDeletionStatus = currentPluginState.bodiedSyncBlockDeletionStatus;
         var newDecorationSet = selectionDecorationSet.map(tr.mapping, tr.doc);
         if (!tr.selection.eq(oldEditorState.selection)) {
           newDecorationSet = (0, _selectionDecorations.calculateDecorations)(tr.doc, tr.selection, tr.doc.type.schema);
         }
         return {
-          showFlag: (_meta$showFlag = meta === null || meta === void 0 ? void 0 : meta.showFlag) !== null && _meta$showFlag !== void 0 ? _meta$showFlag : showFlag,
+          activeFlag: (_meta$activeFlag = meta === null || meta === void 0 ? void 0 : meta.activeFlag) !== null && _meta$activeFlag !== void 0 ? _meta$activeFlag : activeFlag,
           selectionDecorationSet: newDecorationSet,
-          syncBlockStore: syncBlockStore
+          syncBlockStore: syncBlockStore,
+          bodiedSyncBlockDeletionStatus: (_meta$bodiedSyncBlock = meta === null || meta === void 0 ? void 0 : meta.bodiedSyncBlockDeletionStatus) !== null && _meta$bodiedSyncBlock !== void 0 ? _meta$bodiedSyncBlock : bodiedSyncBlockDeletionStatus
         };
       }
     },
@@ -103,6 +112,36 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         mousedown: function mousedown(view, event) {
           return (0, _ignoreDomEvent.shouldIgnoreDomEvent)(view, event, api);
         }
+      },
+      transformCopied: function transformCopied(slice, _ref2) {
+        var state = _ref2.state;
+        var pluginState = syncedBlockPluginKey.getState(state);
+        var syncBlockStore = pluginState === null || pluginState === void 0 ? void 0 : pluginState.syncBlockStore;
+        var schema = state.schema;
+        if (!syncBlockStore) {
+          return slice;
+        }
+        return (0, _utils.mapSlice)(slice, function (node) {
+          if (node.type.name === 'bodiedSyncBlock' && node.attrs.resourceId) {
+            try {
+              var newResourceId = syncBlockStore.referenceManager.generateResourceIdForReference(node.attrs.resourceId);
+              // Convert bodiedSyncBlock to syncBlock
+              // The paste transformation will regenrate the localId
+              var newAttrs = _objectSpread(_objectSpread({}, node.attrs), {}, {
+                resourceId: newResourceId
+              });
+              var newMarks = schema.nodes.syncBlock.markSet ? node.marks.filter(function (mark) {
+                var _schema$nodes$syncBlo;
+                return (_schema$nodes$syncBlo = schema.nodes.syncBlock.markSet) === null || _schema$nodes$syncBlo === void 0 ? void 0 : _schema$nodes$syncBlo.includes(mark.type);
+              }) : node.marks;
+              return schema.nodes.syncBlock.create(newAttrs, null, newMarks);
+            } catch (error) {
+              // If generateResourceIdForReference died, return the original node
+              return node;
+            }
+          }
+          return node;
+        });
       }
     },
     filterTransaction: function filterTransaction(tr, state) {
@@ -121,28 +160,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         bodiedSyncBlockAdded = _trackSyncBlocks.added;
       if (!isOffline) {
         if (bodiedSyncBlockRemoved.length > 0) {
-          // If there are source sync blocks being removed, and we need to confirm with user before deleting,
-          // we block the transaction here, and wait for user confirmation to proceed with deletion.
-          // See editor-common/src/sync-block/sync-block-store-manager.ts for how we handle user confirmation and
-          // proceed with deletion.
-          confirmationTransaction = tr;
-          syncBlockStore.sourceManager.deleteSyncBlocksWithConfirmation(bodiedSyncBlockRemoved.map(function (node) {
-            return node.attrs;
-          }), function () {
-            var _api$core;
-            api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function () {
-              var trToDispatch = tr.setMeta('isConfirmedSyncBlockDeletion', true);
-              if (!trToDispatch.getMeta(_utils.pmHistoryPluginKey)) {
-                // bodiedSyncBlock deletion is expected to be permanent (cannot undo)
-                // For a normal deletion (not triggered by undo), remove it from history so that it cannot be undone
-                trToDispatch.setMeta('addToHistory', false);
-              }
-              return trToDispatch;
-            });
-          }).finally(function () {
-            confirmationTransaction = undefined;
-          });
-          return false;
+          confirmationTransactionRef.current = tr;
+          return (0, _handleBodiedSyncBlockRemoval.handleBodiedSyncBlockRemoval)(tr, bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef);
         }
         if (bodiedSyncBlockAdded.length > 0) {
           if (Boolean(tr.getMeta(_utils.pmHistoryPluginKey))) {
@@ -156,8 +175,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           // we need to intercept the transaction and save it in insert callback so that we only insert it to the document when backend call if backend call is successful
           // The callback will be evoked by in SourceSyncBlockStoreManager.commitPendingCreation
           syncBlockStore.sourceManager.registerCreationCallback(function () {
-            var _api$core2;
-            api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function () {
+            var _api$core;
+            api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function () {
               return tr.setMeta('isCommitSyncBlockCreation', true);
             });
             api === null || api === void 0 || api.core.actions.focus();
@@ -183,10 +202,12 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
         if (errorFlag) {
           // Use setTimeout to dispatch transaction in next tick and avoid re-entrant dispatch
           setTimeout(function () {
-            api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
-              var tr = _ref2.tr;
+            api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
+              var tr = _ref3.tr;
               return tr.setMeta(syncedBlockPluginKey, {
-                showFlag: errorFlag
+                activeFlag: {
+                  id: errorFlag
+                }
               });
             });
           }, 0);
@@ -199,8 +220,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       trs.filter(function (tr) {
         return tr.docChanged;
       }).forEach(function (tr) {
-        if (confirmationTransaction) {
-          confirmationTransaction = (0, _editorSyncedBlockProvider.rebaseTransaction)(confirmationTransaction, tr, newState);
+        if (confirmationTransactionRef.current) {
+          confirmationTransactionRef.current = (0, _editorSyncedBlockProvider.rebaseTransaction)(confirmationTransactionRef.current, tr, newState);
         }
       });
       var _iterator = _createForOfIteratorHelper(trs),

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

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleBodiedSyncBlockRemoval = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _utils = require("@atlaskit/editor-common/utils");
+var _types = require("../../types");
+var _main = require("../main");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var onRetry = function onRetry(api, syncBlockStore) {
+  return function () {
+    var _api$core;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref) {
+      var tr = _ref.tr;
+      return tr.setMeta(_main.syncedBlockPluginKey, {
+        bodiedSyncBlockDeletionStatus: 'processing',
+        activeFlag: false
+      });
+    });
+    syncBlockStore.sourceManager.retryDeletion();
+  };
+};
+var onDismissed = function onDismissed(syncBlockStore) {
+  return function (tr) {
+    syncBlockStore.sourceManager.clearPendingDeletion();
+    return tr.setMeta(_main.syncedBlockPluginKey, {
+      bodiedSyncBlockDeletionStatus: 'none'
+    });
+  };
+};
+var handleBodiedSyncBlockRemoval = exports.handleBodiedSyncBlockRemoval = function handleBodiedSyncBlockRemoval(tr, bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef) {
+  // Clear potential old pending deletion to retreat the deletion as first attempt
+  syncBlockStore.sourceManager.clearPendingDeletion();
+
+  // If there are source sync blocks being removed, and we need to confirm with user before deleting,
+  // we block the transaction here, and wait for user confirmation to proceed with deletion.
+  // See editor-common/src/sync-block/sync-block-store-manager.ts for how we handle user confirmation and
+  // proceed with deletion.
+  syncBlockStore.sourceManager.deleteSyncBlocksWithConfirmation(bodiedSyncBlockRemoved.map(function (node) {
+    return node.attrs;
+  }), function () {
+    var _api$core2;
+    var confirmationTransaction = confirmationTransactionRef.current;
+    if (!confirmationTransaction) {
+      return;
+    }
+    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function () {
+      var trToDispatch = confirmationTransaction.setMeta('isConfirmedSyncBlockDeletion', true);
+      if (!trToDispatch.getMeta(_utils.pmHistoryPluginKey)) {
+        // bodiedSyncBlock deletion is expected to be permanent (cannot undo)
+        // For a normal deletion (not triggered by undo), remove it from history so that it cannot be undone
+        trToDispatch.setMeta('addToHistory', false);
+      }
+      return trToDispatch;
+    });
+  }, function (success) {
+    var _api$core3;
+    api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref2) {
+      var tr = _ref2.tr;
+      var newState;
+      if (!success) {
+        newState = {
+          activeFlag: {
+            id: _types.FLAG_ID.FAIL_TO_DELETE,
+            onRetry: onRetry(api, syncBlockStore),
+            onDismissed: onDismissed(syncBlockStore)
+          }
+        };
+      }
+      newState = _objectSpread(_objectSpread({}, newState), {}, {
+        bodiedSyncBlockDeletionStatus: syncBlockStore.sourceManager.isRetryingDeletion() ?
+        // For retry, reset to none directly to clean up the status
+        'none' :
+        // For the first attempt, set to completed for deletion modal can close the modal
+        'completed'
+      });
+      return tr.setMeta(_main.syncedBlockPluginKey, newState);
+    });
+  }, function () {
+    confirmationTransactionRef.current = undefined;
+  });
+  return false;
+};

package/dist/cjs/syncedBlockPlugin.js

@@ -113,11 +113,13 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
         return;
       }
       var _syncedBlockPluginKey = _main.syncedBlockPluginKey.getState(editorState),
-        showFlag = _syncedBlockPluginKey.showFlag,
-        currentSyncBlockStore = _syncedBlockPluginKey.syncBlockStore;
+        activeFlag = _syncedBlockPluginKey.activeFlag,
+        currentSyncBlockStore = _syncedBlockPluginKey.syncBlockStore,
+        bodiedSyncBlockDeletionStatus = _syncedBlockPluginKey.bodiedSyncBlockDeletionStatus;
       return {
-        showFlag: showFlag,
-        syncBlockStore: currentSyncBlockStore
+        activeFlag: activeFlag,
+        syncBlockStore: currentSyncBlockStore,
+        bodiedSyncBlockDeletionStatus: bodiedSyncBlockDeletionStatus
       };
     }
   };

package/dist/cjs/types/index.js

@@ -8,5 +8,6 @@ var FLAG_ID = exports.FLAG_ID = /*#__PURE__*/function (FLAG_ID) {
   FLAG_ID["CANNOT_DELETE_WHEN_OFFLINE"] = "cannot-delete-when-offline";
   FLAG_ID["CANNOT_EDIT_WHEN_OFFLINE"] = "cannot-edit-when-offline";
   FLAG_ID["CANNOT_CREATE_WHEN_OFFLINE"] = "cannot-create-when-offline";
+  FLAG_ID["FAIL_TO_DELETE"] = "fail-to-delete";
   return FLAG_ID;
 }({});

package/dist/cjs/ui/DeleteConfirmationModal.js

@@ -14,8 +14,10 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 var _compiled = require("@atlaskit/primitives/compiled");
+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 DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
+  var _api$core2, _api$core4, _api$core6;
   var syncBlockStoreManager = _ref.syncBlockStoreManager,
     api = _ref.api;
   var _useState = (0, _react.useState)(false),
@@ -26,41 +28,79 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     syncBlockCount = _useState4[0],
     setSyncBlockCount = _useState4[1];
-  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity'], function (states) {
-      var _states$connectivityS;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity', 'syncedBlock'], function (states) {
+      var _states$connectivityS, _states$syncedBlockSt, _states$syncedBlockSt2;
       return {
-        mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
+        mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode,
+        bodiedSyncBlockDeletionStatus: (_states$syncedBlockSt = states.syncedBlockState) === null || _states$syncedBlockSt === void 0 ? void 0 : _states$syncedBlockSt.bodiedSyncBlockDeletionStatus,
+        activeFlag: (_states$syncedBlockSt2 = states.syncedBlockState) === null || _states$syncedBlockSt2 === void 0 ? void 0 : _states$syncedBlockSt2.activeFlag
       };
     }),
-    mode = _useSharedPluginState.mode;
+    mode = _useSharedPluginState.mode,
+    bodiedSyncBlockDeletionStatus = _useSharedPluginState.bodiedSyncBlockDeletionStatus,
+    activeFlag = _useSharedPluginState.activeFlag;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var resolverRef = _react.default.useRef(undefined);
-  var handleClose = (0, _react.useCallback)(function (confirm) {
+  var handleClick = (0, _react.useCallback)(function (confirm) {
     return function () {
+      var _api$core;
       if (resolverRef.current) {
         resolverRef.current(confirm);
         resolverRef.current = undefined;
       }
-      setIsOpen(false);
+      if (!confirm) {
+        setIsOpen(false);
+      }
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
+        var tr = _ref2.tr;
+        return tr.setMeta(_main.syncedBlockPluginKey, {
+          bodiedSyncBlockDeletionStatus: confirm ? 'processing' : 'none',
+          activeFlag: false
+        });
+      });
     };
-  }, []);
+  }, [api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions]);
   var confirmationCallback = (0, _react.useCallback)(function (syncBlockCount) {
     setIsOpen(true);
     setSyncBlockCount(syncBlockCount);
     var confirmedPromise = new Promise(function (resolve) {
       resolverRef.current = resolve;
     });
+    if (activeFlag) {
+      var _api$core3;
+      api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
+        var tr = _ref3.tr;
+        return tr.setMeta(_main.syncedBlockPluginKey, {
+          // Clear flag to avoid potential retry deletion of different blocks
+          activeFlag: false
+        });
+      });
+    }
     return confirmedPromise;
-  }, []);
+  }, [activeFlag, api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions]);
   (0, _react.useEffect)(function () {
     var unregister = syncBlockStoreManager.sourceManager.registerConfirmationCallback(confirmationCallback);
     return function () {
       unregister();
     };
   }, [syncBlockStoreManager, confirmationCallback]);
+  (0, _react.useEffect)(function () {
+    if (bodiedSyncBlockDeletionStatus === 'completed' && isOpen) {
+      var _api$core5;
+      // auto close modal once deletion is successful
+      setIsOpen(false);
+      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, {
+          // Reset deletion status to have a clean state for next deletion
+          bodiedSyncBlockDeletionStatus: 'none'
+        });
+      });
+    }
+  }, [api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, bodiedSyncBlockDeletionStatus, isOpen]);
   return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
-    onClose: handleClose(false),
+    onClose: handleClick(false),
     testId: "sync-block-delete-confirmation"
   }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, {
     hasCloseButton: true
@@ -70,11 +110,12 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
     syncBlockCount: syncBlockCount
   }))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_new.default, {
     appearance: "subtle",
-    onClick: handleClose(false)
+    onClick: handleClick(false)
   }, formatMessage(_messages.syncBlockMessages.deleteConfirmationModalCancelButton)), /*#__PURE__*/_react.default.createElement(_new.default, {
     appearance: "warning",
-    onClick: handleClose(true),
+    onClick: handleClick(true),
     autoFocus: true,
-    isDisabled: mode === 'offline'
+    isDisabled: mode === 'offline',
+    isLoading: bodiedSyncBlockDeletionStatus === 'processing'
   }, formatMessage(_messages.syncBlockMessages.deleteConfirmationModalDeleteButton)))));
 };

package/dist/cjs/ui/Flag.js

@@ -12,11 +12,13 @@ var _reactIntlNext = require("react-intl-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _flag = _interopRequireWildcard(require("@atlaskit/flag"));
-var _statusError = _interopRequireDefault(require("@atlaskit/icon/core/status-error"));
+var _statusWarning = _interopRequireDefault(require("@atlaskit/icon/core/status-warning"));
 var _main = require("../pm-plugins/main");
 var _types = require("../types");
 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 flagMap = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE, {
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var flagMap = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE, {
   title: _messages.syncBlockMessages.failToDeleteTitle,
   description: _messages.syncBlockMessages.failToDeleteWhenOfflineDescription
 }), _types.FLAG_ID.CANNOT_EDIT_WHEN_OFFLINE, {
@@ -25,43 +27,68 @@ var flagMap = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _d
 }), _types.FLAG_ID.CANNOT_CREATE_WHEN_OFFLINE, {
   title: _messages.syncBlockMessages.failToCreateTitle,
   description: _messages.syncBlockMessages.failToCreateWhenOfflineDescription
+}), _types.FLAG_ID.FAIL_TO_DELETE, {
+  title: _messages.syncBlockMessages.cannotDeleteTitle,
+  description: _messages.syncBlockMessages.cannotDeleteDescription
 });
 var Flag = exports.Flag = function Flag(_ref) {
   var api = _ref.api;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['syncedBlock'], function (states) {
-      var _states$syncedBlockSt;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['syncedBlock', 'connectivity'], function (states) {
+      var _states$syncedBlockSt, _states$connectivityS;
       return {
-        showFlag: (_states$syncedBlockSt = states.syncedBlockState) === null || _states$syncedBlockSt === void 0 ? void 0 : _states$syncedBlockSt.showFlag
+        activeFlag: (_states$syncedBlockSt = states.syncedBlockState) === null || _states$syncedBlockSt === void 0 ? void 0 : _states$syncedBlockSt.activeFlag,
+        mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
       };
     }),
-    showFlag = _useSharedPluginState.showFlag;
+    activeFlag = _useSharedPluginState.activeFlag,
+    mode = _useSharedPluginState.mode;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  if (!showFlag) {
+  if (!activeFlag) {
     return;
   }
-  var _flagMap$showFlag = flagMap[showFlag],
-    title = _flagMap$showFlag.title,
-    description = _flagMap$showFlag.description;
-  var onDismissed = function onDismissed() {
+  var _flagMap$activeFlag$i = flagMap[activeFlag.id],
+    title = _flagMap$activeFlag$i.title,
+    description = _flagMap$activeFlag$i.description;
+  var onRetry = activeFlag.onRetry,
+    onDismissedCallback = activeFlag.onDismissed;
+
+  // Retry button often involves network request, hence we dismiss the flag in offline mode to avoid retry
+  if (mode === 'offline' && !!onRetry) {
     api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
       var tr = _ref2.tr;
       tr.setMeta(_main.syncedBlockPluginKey, {
-        showFlag: false
+        activeFlag: false
       });
       return tr;
     });
+    return;
+  }
+  var onDismissed = function onDismissed() {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
+      var tr = _ref3.tr;
+      onDismissedCallback === null || onDismissedCallback === void 0 || onDismissedCallback(tr);
+      var oldMeta = tr.getMeta(_main.syncedBlockPluginKey);
+      tr.setMeta(_main.syncedBlockPluginKey, _objectSpread(_objectSpread({}, oldMeta), {}, {
+        activeFlag: false
+      }));
+      return tr;
+    });
     api === null || api === void 0 || api.core.actions.focus();
   };
   return /*#__PURE__*/_react.default.createElement(_flag.FlagGroup, null, /*#__PURE__*/_react.default.createElement(_flag.default, {
     onDismissed: onDismissed,
     title: formatMessage(title),
     description: formatMessage(description),
-    id: showFlag,
-    testId: showFlag,
-    icon: /*#__PURE__*/_react.default.createElement(_statusError.default, {
+    id: activeFlag.id,
+    testId: activeFlag.id,
+    icon: /*#__PURE__*/_react.default.createElement(_statusWarning.default, {
       label: "",
-      color: "var(--ds-icon-danger, #C9372C)"
-    })
+      color: "var(--ds-icon-warning, #E06C00)"
+    }),
+    actions: onRetry ? [{
+      content: formatMessage(_messages.syncBlockMessages.deleteRetryButton),
+      onClick: onRetry
+    }] : undefined
   }));
 };

package/dist/cjs/ui/SyncBlockRendererWrapper.js

@@ -13,14 +13,16 @@ var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperCompone
   var syncedBlockRenderer = _ref.syncedBlockRenderer,
     useFetchSyncBlockData = _ref.useFetchSyncBlockData,
     localId = _ref.localId,
-    useFetchSyncBlockTitle = _ref.useFetchSyncBlockTitle;
+    useFetchSyncBlockTitle = _ref.useFetchSyncBlockTitle,
+    api = _ref.api;
   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
     ,
     className: _syncBlock.SyncBlockSharedCssClassName.renderer
   }, syncedBlockRenderer({
-    useFetchSyncBlockData: useFetchSyncBlockData
+    useFetchSyncBlockData: useFetchSyncBlockData,
+    api: api
   })), /*#__PURE__*/_react.default.createElement(_SyncBlockLabel.SyncBlockLabel, {
     isSource: false,
     useFetchSyncBlockTitle: useFetchSyncBlockTitle,

package/dist/es2019/nodeviews/syncedBlock.js

@@ -39,7 +39,8 @@ class SyncBlock extends ReactNodeView {
       useFetchSyncBlockData: () => {
         var _this$api2, _this$api2$analytics, _this$api2$analytics$;
         return useFetchSyncBlockData(syncBlockStore, resourceId, localId, (_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$ = _this$api2$analytics.actions) === null || _this$api2$analytics$ === void 0 ? void 0 : _this$api2$analytics$.fireAnalyticsEvent);
-      }
+      },
+      api: this.api
     });
   }
   destroy() {