@atlaskit/editor-synced-block-provider 2.13.1 → 2.14.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-synced-block-provider
 
+## 2.14.1
+
+### Patch Changes
+
+- [`433b512284284`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/433b512284284) -
+  [EDITOR-2558] Update bodiedSyncBlock deletion failure flow
+- Updated dependencies
+
+## 2.14.0
+
+### Minor Changes
+
+- [`8f3a22c66ae60`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8f3a22c66ae60) -
+  Update to read from ssr cache
+
 ## 2.13.1
 
 ### Patch Changes

package/dist/cjs/hooks/useFetchSyncBlockData.js

@@ -14,7 +14,15 @@ var _types = require("../common/types");
 var _errorHandling = require("../utils/errorHandling");
 var _utils = require("../utils/utils");
 var useFetchSyncBlockData = exports.useFetchSyncBlockData = function useFetchSyncBlockData(manager, resourceId, localId, fireAnalyticsEvent) {
-  var _useState = (0, _react.useState)(null),
+  var _useState = (0, _react.useState)(function () {
+      if (resourceId) {
+        var _manager$referenceMan;
+        var _ref = (manager === null || manager === void 0 || (_manager$referenceMan = manager.referenceManager) === null || _manager$referenceMan === void 0 ? void 0 : _manager$referenceMan.getInitialSyncBlockData(resourceId)) || {},
+          data = _ref.data;
+        return data || null;
+      }
+      return null;
+    }),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     syncBlockInstance = _useState2[0],
     setSyncBlockInstance = _useState2[1];

package/dist/cjs/providers/syncBlockProvider.js

@@ -73,7 +73,7 @@ var SyncBlockProvider = exports.SyncBlockProvider = /*#__PURE__*/function (_Sync
   }, {
     key: "nodeDataKey",
     value: function nodeDataKey(node) {
-      return node.attrs.localId;
+      return node.attrs.resourceId;
     }
 
     /**
@@ -298,8 +298,13 @@ var SyncBlockProvider = exports.SyncBlockProvider = /*#__PURE__*/function (_Sync
     }
   }]);
 }(_types2.SyncBlockDataProvider);
-var useMemoizedSyncedBlockProvider = exports.useMemoizedSyncedBlockProvider = function useMemoizedSyncedBlockProvider(fetchProvider, writeProvider, sourceId, providerOptions) {
+var useMemoizedSyncedBlockProvider = exports.useMemoizedSyncedBlockProvider = function useMemoizedSyncedBlockProvider(fetchProvider, writeProvider, sourceId, providerOptions, getSSRData) {
   return (0, _react.useMemo)(function () {
-    return new SyncBlockProvider(fetchProvider, writeProvider, sourceId, providerOptions);
-  }, [fetchProvider, writeProvider, sourceId, providerOptions]);
+    var syncBlockProvider = new SyncBlockProvider(fetchProvider, writeProvider, sourceId, providerOptions);
+    var ssrData = getSSRData ? getSSRData() : undefined;
+    if (ssrData) {
+      syncBlockProvider.setSSRData(ssrData);
+    }
+    return syncBlockProvider;
+  }, [fetchProvider, writeProvider, sourceId, providerOptions, getSSRData]);
 };

package/dist/cjs/store-manager/referenceSyncBlockStoreManager.js

@@ -52,6 +52,13 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
     value: function updateFireAnalyticsEvent(fireAnalyticsEvent) {
       this.fireAnalyticsEvent = fireAnalyticsEvent;
     }
+  }, {
+    key: "getInitialSyncBlockData",
+    value: function getInitialSyncBlockData(resourceId) {
+      var _this$dataProvider;
+      var syncBlockNode = (0, _utils.createSyncBlockNode)('', resourceId);
+      return this.getFromCache(resourceId) || ((_this$dataProvider = this.dataProvider) === null || _this$dataProvider === void 0 || (_this$dataProvider = _this$dataProvider.getNodeDataFromCache(syncBlockNode)) === null || _this$dataProvider === void 0 ? void 0 : _this$dataProvider.data);
+    }
 
     /**
      * Refreshes the subscriptions for all sync blocks.
@@ -315,17 +322,20 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
   }, {
     key: "subscribeToSyncBlock",
     value: function subscribeToSyncBlock(resourceId, localId, callback) {
-      var _this3 = this;
+      var _this$dataProvider2,
+        _this3 = this;
       // add to subscriptions map
       var resourceSubscriptions = this.subscriptions.get(resourceId) || {};
       this.subscriptions.set(resourceId, _objectSpread(_objectSpread({}, resourceSubscriptions), {}, (0, _defineProperty2.default)({}, localId, callback)));
+      var syncBlockNode = (0, _utils.createSyncBlockNode)(localId, resourceId);
 
       // call the callback immediately if we have cached data
-      var cachedData = this.getFromCache(resourceId);
+      // prefer cache from store manager first, should update data provider to use the same cache
+      var cachedData = this.getFromCache(resourceId) || ((_this$dataProvider2 = this.dataProvider) === null || _this$dataProvider2 === void 0 || (_this$dataProvider2 = _this$dataProvider2.getNodeDataFromCache(syncBlockNode)) === null || _this$dataProvider2 === void 0 ? void 0 : _this$dataProvider2.data);
       if (cachedData) {
         callback(cachedData);
       } else {
-        this.fetchSyncBlocksData([(0, _utils.createSyncBlockNode)(localId, resourceId)]).catch(function (error) {
+        this.fetchSyncBlocksData([syncBlockNode]).catch(function (error) {
           var _this3$fireAnalyticsE;
           (0, _monitoring.logException)(error, {
             location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'

package/dist/cjs/store-manager/sourceSyncBlockStoreManager.js

@@ -117,7 +117,7 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
             case 10:
               writeResults = _context.sent;
               if (!writeResults.every(function (result) {
-                return !result.error;
+                return result.resourceId !== undefined;
               })) {
                 _context.next = 15;
                 break;
@@ -125,7 +125,7 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
               return _context.abrupt("return", true);
             case 15:
               writeResults.filter(function (result) {
-                return result.error;
+                return result.resourceId === undefined;
               }).forEach(function (result) {
                 var _this2$fireAnalyticsE;
                 (_this2$fireAnalyticsE = _this2.fireAnalyticsEvent) === null || _this2$fireAnalyticsE === void 0 || _this2$fireAnalyticsE.call(_this2, (0, _errorHandling.updateErrorPayload)(result.error || 'Failed to write data'));
@@ -274,49 +274,40 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
       }
     }
   }, {
-    key: "deleteSyncBlocksWithConfirmation",
+    key: "delete",
     value: function () {
-      var _deleteSyncBlocksWithConfirmation = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(syncBlockIds, deleteCallback) {
+      var _delete2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(syncBlockIds, onDelete, onDeleteCompleted) {
         var _this5 = this;
-        var confirmed, results, callback, _this$fireAnalyticsEv4;
+        var results, callback, isDeleteSuccessful, _this$fireAnalyticsEv4;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              if (!this.confirmationCallback) {
-                _context2.next = 22;
-                break;
-              }
-              _context2.next = 3;
-              return this.confirmationCallback(syncBlockIds.length);
-            case 3:
-              confirmed = _context2.sent;
-              if (!confirmed) {
-                _context2.next = 22;
-                break;
-              }
-              deleteCallback();
-              _context2.prev = 6;
+              _context2.prev = 0;
               if (this.dataProvider) {
-                _context2.next = 9;
+                _context2.next = 3;
                 break;
               }
               throw new Error('Data provider not set');
-            case 9:
+            case 3:
               syncBlockIds.forEach(function (Ids) {
                 _this5.setPendingDeletion(Ids, true);
               });
-              _context2.next = 12;
+              _context2.next = 6;
               return this.dataProvider.deleteNodesData(syncBlockIds.map(function (attrs) {
                 return attrs.resourceId;
               }));
-            case 12:
+            case 6:
               results = _context2.sent;
-              if (results.every(function (result) {
+              isDeleteSuccessful = results.every(function (result) {
                 return result.success;
-              })) {
+              });
+              onDeleteCompleted(isDeleteSuccessful);
+              if (isDeleteSuccessful) {
+                onDelete();
                 callback = function callback(Ids) {
                   return _this5.syncBlockCache.delete(Ids.resourceId);
                 };
+                this.clearPendingDeletion();
               } else {
                 callback = function callback(Ids) {
                   _this5.setPendingDeletion(Ids, false);
@@ -329,11 +320,10 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
                 });
               }
               syncBlockIds.forEach(callback);
-              _context2.next = 22;
-              break;
-            case 17:
-              _context2.prev = 17;
-              _context2.t0 = _context2["catch"](6);
+              return _context2.abrupt("return", isDeleteSuccessful);
+            case 14:
+              _context2.prev = 14;
+              _context2.t0 = _context2["catch"](0);
               syncBlockIds.forEach(function (Ids) {
                 _this5.setPendingDeletion(Ids, false);
               });
@@ -341,17 +331,119 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
                 location: 'editor-synced-block-provider/sourceSyncBlockStoreManager'
               });
               (_this$fireAnalyticsEv4 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv4 === void 0 || _this$fireAnalyticsEv4.call(this, (0, _errorHandling.deleteErrorPayload)(_context2.t0.message));
-            case 22:
+              onDeleteCompleted(false);
+              return _context2.abrupt("return", false);
+            case 21:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, this, [[6, 17]]);
+        }, _callee2, this, [[0, 14]]);
+      }));
+      function _delete(_x, _x2, _x3) {
+        return _delete2.apply(this, arguments);
+      }
+      return _delete;
+    }()
+  }, {
+    key: "isRetryingDeletion",
+    value: function isRetryingDeletion() {
+      return !!this.deletionRetryInfo;
+    }
+  }, {
+    key: "retryDeletion",
+    value: function () {
+      var _retryDeletion = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+        var _this$deletionRetryIn, syncBlockIds, onDelete, onDeleteCompleted;
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              if (this.deletionRetryInfo) {
+                _context3.next = 2;
+                break;
+              }
+              return _context3.abrupt("return", Promise.resolve());
+            case 2:
+              _this$deletionRetryIn = this.deletionRetryInfo, syncBlockIds = _this$deletionRetryIn.syncBlockIds, onDelete = _this$deletionRetryIn.onDelete, onDeleteCompleted = _this$deletionRetryIn.onDeleteCompleted;
+              if (!this.confirmationCallback) {
+                _context3.next = 6;
+                break;
+              }
+              _context3.next = 6;
+              return this.delete(syncBlockIds, onDelete, onDeleteCompleted);
+            case 6:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
       }));
-      function deleteSyncBlocksWithConfirmation(_x, _x2) {
+      function retryDeletion() {
+        return _retryDeletion.apply(this, arguments);
+      }
+      return retryDeletion;
+    }()
+  }, {
+    key: "clearPendingDeletion",
+    value: function clearPendingDeletion() {
+      var _this$deletionRetryIn2;
+      (_this$deletionRetryIn2 = this.deletionRetryInfo) === null || _this$deletionRetryIn2 === void 0 || _this$deletionRetryIn2.destroyCallback();
+      this.deletionRetryInfo = undefined;
+    }
+
+    /**
+     *
+     * @param syncBlockIds - The sync block ids to delete
+     * @param onDelete - The callback to delete sync block node from document
+     * @param onDeleteCompleted - The callback for after the deletion is saved to BE (whether successful or not)
+     * @param destroyCallback - The callback to clear any reference stored for deletion (regardless if deletion is completed or abort)
+     */
+  }, {
+    key: "deleteSyncBlocksWithConfirmation",
+    value: (function () {
+      var _deleteSyncBlocksWithConfirmation = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(syncBlockIds, onDelete, onDeleteCompleted, destroyCallback) {
+        var confirmed, isDeleteSuccessful;
+        return _regenerator.default.wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              if (!this.confirmationCallback) {
+                _context4.next = 12;
+                break;
+              }
+              _context4.next = 3;
+              return this.confirmationCallback(syncBlockIds.length);
+            case 3:
+              confirmed = _context4.sent;
+              if (!confirmed) {
+                _context4.next = 11;
+                break;
+              }
+              _context4.next = 7;
+              return this.delete(syncBlockIds, onDelete, onDeleteCompleted);
+            case 7:
+              isDeleteSuccessful = _context4.sent;
+              if (!isDeleteSuccessful) {
+                // If deletion failed, save deletion info for potential retry
+                this.deletionRetryInfo = {
+                  syncBlockIds: syncBlockIds,
+                  onDelete: onDelete,
+                  onDeleteCompleted: onDeleteCompleted,
+                  destroyCallback: destroyCallback
+                };
+              }
+              _context4.next = 12;
+              break;
+            case 11:
+              destroyCallback();
+            case 12:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4, this);
+      }));
+      function deleteSyncBlocksWithConfirmation(_x4, _x5, _x6, _x7) {
         return _deleteSyncBlocksWithConfirmation.apply(this, arguments);
       }
       return deleteSyncBlocksWithConfirmation;
-    }()
+    }())
   }, {
     key: "destroy",
     value: function destroy() {
@@ -360,6 +452,7 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
       this.pendingResourceId = undefined;
       this.creationCallback = undefined;
       this.dataProvider = undefined;
+      this.clearPendingDeletion();
     }
   }]);
 }();

package/dist/es2019/hooks/useFetchSyncBlockData.js

@@ -4,7 +4,16 @@ import { SyncBlockError } from '../common/types';
 import { fetchErrorPayload } from '../utils/errorHandling';
 import { createSyncBlockNode } from '../utils/utils';
 export const useFetchSyncBlockData = (manager, resourceId, localId, fireAnalyticsEvent) => {
-  const [syncBlockInstance, setSyncBlockInstance] = useState(null);
+  const [syncBlockInstance, setSyncBlockInstance] = useState(() => {
+    if (resourceId) {
+      var _manager$referenceMan;
+      const {
+        data
+      } = (manager === null || manager === void 0 ? void 0 : (_manager$referenceMan = manager.referenceManager) === null || _manager$referenceMan === void 0 ? void 0 : _manager$referenceMan.getInitialSyncBlockData(resourceId)) || {};
+      return data || null;
+    }
+    return null;
+  });
   const [isLoading, setIsLoading] = useState(true);
   const reloadData = useCallback(async () => {
     if (isLoading) {

package/dist/es2019/providers/syncBlockProvider.js

@@ -46,7 +46,7 @@ export class SyncBlockProvider extends SyncBlockDataProvider {
    * @returns The data key
    */
   nodeDataKey(node) {
-    return node.attrs.localId;
+    return node.attrs.resourceId;
   }
 
   /**
@@ -201,8 +201,13 @@ export class SyncBlockProvider extends SyncBlockDataProvider {
     }
   }
 }
-export const useMemoizedSyncedBlockProvider = (fetchProvider, writeProvider, sourceId, providerOptions) => {
+export const useMemoizedSyncedBlockProvider = (fetchProvider, writeProvider, sourceId, providerOptions, getSSRData) => {
   return useMemo(() => {
-    return new SyncBlockProvider(fetchProvider, writeProvider, sourceId, providerOptions);
-  }, [fetchProvider, writeProvider, sourceId, providerOptions]);
+    const syncBlockProvider = new SyncBlockProvider(fetchProvider, writeProvider, sourceId, providerOptions);
+    const ssrData = getSSRData ? getSSRData() : undefined;
+    if (ssrData) {
+      syncBlockProvider.setSSRData(ssrData);
+    }
+    return syncBlockProvider;
+  }, [fetchProvider, writeProvider, sourceId, providerOptions, getSSRData]);
 };

package/dist/es2019/store-manager/referenceSyncBlockStoreManager.js

@@ -31,6 +31,11 @@ export class ReferenceSyncBlockStoreManager {
   updateFireAnalyticsEvent(fireAnalyticsEvent) {
     this.fireAnalyticsEvent = fireAnalyticsEvent;
   }
+  getInitialSyncBlockData(resourceId) {
+    var _this$dataProvider, _this$dataProvider$ge;
+    const syncBlockNode = createSyncBlockNode('', resourceId);
+    return this.getFromCache(resourceId) || ((_this$dataProvider = this.dataProvider) === null || _this$dataProvider === void 0 ? void 0 : (_this$dataProvider$ge = _this$dataProvider.getNodeDataFromCache(syncBlockNode)) === null || _this$dataProvider$ge === void 0 ? void 0 : _this$dataProvider$ge.data);
+  }
 
   /**
    * Refreshes the subscriptions for all sync blocks.
@@ -200,19 +205,22 @@ export class ReferenceSyncBlockStoreManager {
     this.providerFactories.delete(resourceId);
   }
   subscribeToSyncBlock(resourceId, localId, callback) {
+    var _this$dataProvider2, _this$dataProvider2$g;
     // add to subscriptions map
     const resourceSubscriptions = this.subscriptions.get(resourceId) || {};
     this.subscriptions.set(resourceId, {
       ...resourceSubscriptions,
       [localId]: callback
     });
+    const syncBlockNode = createSyncBlockNode(localId, resourceId);
 
     // call the callback immediately if we have cached data
-    const cachedData = this.getFromCache(resourceId);
+    // prefer cache from store manager first, should update data provider to use the same cache
+    const cachedData = this.getFromCache(resourceId) || ((_this$dataProvider2 = this.dataProvider) === null || _this$dataProvider2 === void 0 ? void 0 : (_this$dataProvider2$g = _this$dataProvider2.getNodeDataFromCache(syncBlockNode)) === null || _this$dataProvider2$g === void 0 ? void 0 : _this$dataProvider2$g.data);
     if (cachedData) {
       callback(cachedData);
     } else {
-      this.fetchSyncBlocksData([createSyncBlockNode(localId, resourceId)]).catch(error => {
+      this.fetchSyncBlocksData([syncBlockNode]).catch(error => {
         var _this$fireAnalyticsEv7;
         logException(error, {
           location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'

package/dist/es2019/store-manager/sourceSyncBlockStoreManager.js

@@ -83,10 +83,10 @@ export class SourceSyncBlockStoreManager {
         return Promise.resolve(true);
       }
       const writeResults = await this.dataProvider.writeNodesData(bodiedSyncBlockNodes, bodiedSyncBlockData);
-      if (writeResults.every(result => !result.error)) {
+      if (writeResults.every(result => result.resourceId !== undefined)) {
         return true;
       } else {
-        writeResults.filter(result => result.error).forEach(result => {
+        writeResults.filter(result => result.resourceId === undefined).forEach(result => {
           var _this$fireAnalyticsEv2;
           (_this$fireAnalyticsEv2 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv2 === void 0 ? void 0 : _this$fireAnalyticsEv2.call(this, updateErrorPayload(result.error || 'Failed to write data'));
         });
@@ -205,42 +205,91 @@ export class SourceSyncBlockStoreManager {
       (_this$fireAnalyticsEv6 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv6 === void 0 ? void 0 : _this$fireAnalyticsEv6.call(this, createErrorPayload(error.message));
     }
   }
-  async deleteSyncBlocksWithConfirmation(syncBlockIds, deleteCallback) {
+  async delete(syncBlockIds, onDelete, onDeleteCompleted) {
+    try {
+      if (!this.dataProvider) {
+        throw new Error('Data provider not set');
+      }
+      syncBlockIds.forEach(Ids => {
+        this.setPendingDeletion(Ids, true);
+      });
+      const results = await this.dataProvider.deleteNodesData(syncBlockIds.map(attrs => attrs.resourceId));
+      let callback;
+      const isDeleteSuccessful = results.every(result => result.success);
+      onDeleteCompleted(isDeleteSuccessful);
+      if (isDeleteSuccessful) {
+        onDelete();
+        callback = Ids => this.syncBlockCache.delete(Ids.resourceId);
+        this.clearPendingDeletion();
+      } else {
+        callback = Ids => {
+          this.setPendingDeletion(Ids, false);
+        };
+        results.filter(result => result.resourceId === undefined).forEach(result => {
+          var _this$fireAnalyticsEv7;
+          (_this$fireAnalyticsEv7 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv7 === void 0 ? void 0 : _this$fireAnalyticsEv7.call(this, deleteErrorPayload(result.error || 'Failed to delete synced block'));
+        });
+      }
+      syncBlockIds.forEach(callback);
+      return isDeleteSuccessful;
+    } catch (error) {
+      var _this$fireAnalyticsEv8;
+      syncBlockIds.forEach(Ids => {
+        this.setPendingDeletion(Ids, false);
+      });
+      logException(error, {
+        location: 'editor-synced-block-provider/sourceSyncBlockStoreManager'
+      });
+      (_this$fireAnalyticsEv8 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv8 === void 0 ? void 0 : _this$fireAnalyticsEv8.call(this, deleteErrorPayload(error.message));
+      onDeleteCompleted(false);
+      return false;
+    }
+  }
+  isRetryingDeletion() {
+    return !!this.deletionRetryInfo;
+  }
+  async retryDeletion() {
+    if (!this.deletionRetryInfo) {
+      return Promise.resolve();
+    }
+    const {
+      syncBlockIds,
+      onDelete,
+      onDeleteCompleted
+    } = this.deletionRetryInfo;
+    if (this.confirmationCallback) {
+      await this.delete(syncBlockIds, onDelete, onDeleteCompleted);
+    }
+  }
+  clearPendingDeletion() {
+    var _this$deletionRetryIn;
+    (_this$deletionRetryIn = this.deletionRetryInfo) === null || _this$deletionRetryIn === void 0 ? void 0 : _this$deletionRetryIn.destroyCallback();
+    this.deletionRetryInfo = undefined;
+  }
+
+  /**
+   *
+   * @param syncBlockIds - The sync block ids to delete
+   * @param onDelete - The callback to delete sync block node from document
+   * @param onDeleteCompleted - The callback for after the deletion is saved to BE (whether successful or not)
+   * @param destroyCallback - The callback to clear any reference stored for deletion (regardless if deletion is completed or abort)
+   */
+  async deleteSyncBlocksWithConfirmation(syncBlockIds, onDelete, onDeleteCompleted, destroyCallback) {
     if (this.confirmationCallback) {
       const confirmed = await this.confirmationCallback(syncBlockIds.length);
       if (confirmed) {
-        deleteCallback();
-        try {
-          if (!this.dataProvider) {
-            throw new Error('Data provider not set');
-          }
-          syncBlockIds.forEach(Ids => {
-            this.setPendingDeletion(Ids, true);
-          });
-          const results = await this.dataProvider.deleteNodesData(syncBlockIds.map(attrs => attrs.resourceId));
-          let callback;
-          if (results.every(result => result.success)) {
-            callback = Ids => this.syncBlockCache.delete(Ids.resourceId);
-          } else {
-            callback = Ids => {
-              this.setPendingDeletion(Ids, false);
-            };
-            results.filter(result => result.resourceId === undefined).forEach(result => {
-              var _this$fireAnalyticsEv7;
-              (_this$fireAnalyticsEv7 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv7 === void 0 ? void 0 : _this$fireAnalyticsEv7.call(this, deleteErrorPayload(result.error || 'Failed to delete synced block'));
-            });
-          }
-          syncBlockIds.forEach(callback);
-        } catch (error) {
-          var _this$fireAnalyticsEv8;
-          syncBlockIds.forEach(Ids => {
-            this.setPendingDeletion(Ids, false);
-          });
-          logException(error, {
-            location: 'editor-synced-block-provider/sourceSyncBlockStoreManager'
-          });
-          (_this$fireAnalyticsEv8 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv8 === void 0 ? void 0 : _this$fireAnalyticsEv8.call(this, deleteErrorPayload(error.message));
+        const isDeleteSuccessful = await this.delete(syncBlockIds, onDelete, onDeleteCompleted);
+        if (!isDeleteSuccessful) {
+          // If deletion failed, save deletion info for potential retry
+          this.deletionRetryInfo = {
+            syncBlockIds,
+            onDelete,
+            onDeleteCompleted,
+            destroyCallback
+          };
         }
+      } else {
+        destroyCallback();
       }
     }
   }
@@ -250,5 +299,6 @@ export class SourceSyncBlockStoreManager {
     this.pendingResourceId = undefined;
     this.creationCallback = undefined;
     this.dataProvider = undefined;
+    this.clearPendingDeletion();
   }
 }

package/dist/esm/hooks/useFetchSyncBlockData.js

@@ -7,7 +7,15 @@ import { SyncBlockError } from '../common/types';
 import { fetchErrorPayload } from '../utils/errorHandling';
 import { createSyncBlockNode } from '../utils/utils';
 export var useFetchSyncBlockData = function useFetchSyncBlockData(manager, resourceId, localId, fireAnalyticsEvent) {
-  var _useState = useState(null),
+  var _useState = useState(function () {
+      if (resourceId) {
+        var _manager$referenceMan;
+        var _ref = (manager === null || manager === void 0 || (_manager$referenceMan = manager.referenceManager) === null || _manager$referenceMan === void 0 ? void 0 : _manager$referenceMan.getInitialSyncBlockData(resourceId)) || {},
+          data = _ref.data;
+        return data || null;
+      }
+      return null;
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     syncBlockInstance = _useState2[0],
     setSyncBlockInstance = _useState2[1];

package/dist/esm/providers/syncBlockProvider.js

@@ -66,7 +66,7 @@ export var SyncBlockProvider = /*#__PURE__*/function (_SyncBlockDataProvide) {
   }, {
     key: "nodeDataKey",
     value: function nodeDataKey(node) {
-      return node.attrs.localId;
+      return node.attrs.resourceId;
     }
 
     /**
@@ -291,8 +291,13 @@ export var SyncBlockProvider = /*#__PURE__*/function (_SyncBlockDataProvide) {
     }
   }]);
 }(SyncBlockDataProvider);
-export var useMemoizedSyncedBlockProvider = function useMemoizedSyncedBlockProvider(fetchProvider, writeProvider, sourceId, providerOptions) {
+export var useMemoizedSyncedBlockProvider = function useMemoizedSyncedBlockProvider(fetchProvider, writeProvider, sourceId, providerOptions, getSSRData) {
   return useMemo(function () {
-    return new SyncBlockProvider(fetchProvider, writeProvider, sourceId, providerOptions);
-  }, [fetchProvider, writeProvider, sourceId, providerOptions]);
+    var syncBlockProvider = new SyncBlockProvider(fetchProvider, writeProvider, sourceId, providerOptions);
+    var ssrData = getSSRData ? getSSRData() : undefined;
+    if (ssrData) {
+      syncBlockProvider.setSSRData(ssrData);
+    }
+    return syncBlockProvider;
+  }, [fetchProvider, writeProvider, sourceId, providerOptions, getSSRData]);
 };

package/dist/esm/store-manager/referenceSyncBlockStoreManager.js

@@ -46,6 +46,13 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
     value: function updateFireAnalyticsEvent(fireAnalyticsEvent) {
       this.fireAnalyticsEvent = fireAnalyticsEvent;
     }
+  }, {
+    key: "getInitialSyncBlockData",
+    value: function getInitialSyncBlockData(resourceId) {
+      var _this$dataProvider;
+      var syncBlockNode = createSyncBlockNode('', resourceId);
+      return this.getFromCache(resourceId) || ((_this$dataProvider = this.dataProvider) === null || _this$dataProvider === void 0 || (_this$dataProvider = _this$dataProvider.getNodeDataFromCache(syncBlockNode)) === null || _this$dataProvider === void 0 ? void 0 : _this$dataProvider.data);
+    }
 
     /**
      * Refreshes the subscriptions for all sync blocks.
@@ -309,17 +316,20 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
   }, {
     key: "subscribeToSyncBlock",
     value: function subscribeToSyncBlock(resourceId, localId, callback) {
-      var _this3 = this;
+      var _this$dataProvider2,
+        _this3 = this;
       // add to subscriptions map
       var resourceSubscriptions = this.subscriptions.get(resourceId) || {};
       this.subscriptions.set(resourceId, _objectSpread(_objectSpread({}, resourceSubscriptions), {}, _defineProperty({}, localId, callback)));
+      var syncBlockNode = createSyncBlockNode(localId, resourceId);
 
       // call the callback immediately if we have cached data
-      var cachedData = this.getFromCache(resourceId);
+      // prefer cache from store manager first, should update data provider to use the same cache
+      var cachedData = this.getFromCache(resourceId) || ((_this$dataProvider2 = this.dataProvider) === null || _this$dataProvider2 === void 0 || (_this$dataProvider2 = _this$dataProvider2.getNodeDataFromCache(syncBlockNode)) === null || _this$dataProvider2 === void 0 ? void 0 : _this$dataProvider2.data);
       if (cachedData) {
         callback(cachedData);
       } else {
-        this.fetchSyncBlocksData([createSyncBlockNode(localId, resourceId)]).catch(function (error) {
+        this.fetchSyncBlocksData([syncBlockNode]).catch(function (error) {
           var _this3$fireAnalyticsE;
           logException(error, {
             location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'

package/dist/esm/store-manager/sourceSyncBlockStoreManager.js

@@ -110,7 +110,7 @@ export var SourceSyncBlockStoreManager = /*#__PURE__*/function () {
             case 10:
               writeResults = _context.sent;
               if (!writeResults.every(function (result) {
-                return !result.error;
+                return result.resourceId !== undefined;
               })) {
                 _context.next = 15;
                 break;
@@ -118,7 +118,7 @@ export var SourceSyncBlockStoreManager = /*#__PURE__*/function () {
               return _context.abrupt("return", true);
             case 15:
               writeResults.filter(function (result) {
-                return result.error;
+                return result.resourceId === undefined;
               }).forEach(function (result) {
                 var _this2$fireAnalyticsE;
                 (_this2$fireAnalyticsE = _this2.fireAnalyticsEvent) === null || _this2$fireAnalyticsE === void 0 || _this2$fireAnalyticsE.call(_this2, updateErrorPayload(result.error || 'Failed to write data'));
@@ -267,49 +267,40 @@ export var SourceSyncBlockStoreManager = /*#__PURE__*/function () {
       }
     }
   }, {
-    key: "deleteSyncBlocksWithConfirmation",
+    key: "delete",
     value: function () {
-      var _deleteSyncBlocksWithConfirmation = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(syncBlockIds, deleteCallback) {
+      var _delete2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(syncBlockIds, onDelete, onDeleteCompleted) {
         var _this5 = this;
-        var confirmed, results, callback, _this$fireAnalyticsEv4;
+        var results, callback, isDeleteSuccessful, _this$fireAnalyticsEv4;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              if (!this.confirmationCallback) {
-                _context2.next = 22;
-                break;
-              }
-              _context2.next = 3;
-              return this.confirmationCallback(syncBlockIds.length);
-            case 3:
-              confirmed = _context2.sent;
-              if (!confirmed) {
-                _context2.next = 22;
-                break;
-              }
-              deleteCallback();
-              _context2.prev = 6;
+              _context2.prev = 0;
               if (this.dataProvider) {
-                _context2.next = 9;
+                _context2.next = 3;
                 break;
               }
               throw new Error('Data provider not set');
-            case 9:
+            case 3:
               syncBlockIds.forEach(function (Ids) {
                 _this5.setPendingDeletion(Ids, true);
               });
-              _context2.next = 12;
+              _context2.next = 6;
               return this.dataProvider.deleteNodesData(syncBlockIds.map(function (attrs) {
                 return attrs.resourceId;
               }));
-            case 12:
+            case 6:
               results = _context2.sent;
-              if (results.every(function (result) {
+              isDeleteSuccessful = results.every(function (result) {
                 return result.success;
-              })) {
+              });
+              onDeleteCompleted(isDeleteSuccessful);
+              if (isDeleteSuccessful) {
+                onDelete();
                 callback = function callback(Ids) {
                   return _this5.syncBlockCache.delete(Ids.resourceId);
                 };
+                this.clearPendingDeletion();
               } else {
                 callback = function callback(Ids) {
                   _this5.setPendingDeletion(Ids, false);
@@ -322,11 +313,10 @@ export var SourceSyncBlockStoreManager = /*#__PURE__*/function () {
                 });
               }
               syncBlockIds.forEach(callback);
-              _context2.next = 22;
-              break;
-            case 17:
-              _context2.prev = 17;
-              _context2.t0 = _context2["catch"](6);
+              return _context2.abrupt("return", isDeleteSuccessful);
+            case 14:
+              _context2.prev = 14;
+              _context2.t0 = _context2["catch"](0);
               syncBlockIds.forEach(function (Ids) {
                 _this5.setPendingDeletion(Ids, false);
               });
@@ -334,17 +324,119 @@ export var SourceSyncBlockStoreManager = /*#__PURE__*/function () {
                 location: 'editor-synced-block-provider/sourceSyncBlockStoreManager'
               });
               (_this$fireAnalyticsEv4 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv4 === void 0 || _this$fireAnalyticsEv4.call(this, deleteErrorPayload(_context2.t0.message));
-            case 22:
+              onDeleteCompleted(false);
+              return _context2.abrupt("return", false);
+            case 21:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, this, [[6, 17]]);
+        }, _callee2, this, [[0, 14]]);
+      }));
+      function _delete(_x, _x2, _x3) {
+        return _delete2.apply(this, arguments);
+      }
+      return _delete;
+    }()
+  }, {
+    key: "isRetryingDeletion",
+    value: function isRetryingDeletion() {
+      return !!this.deletionRetryInfo;
+    }
+  }, {
+    key: "retryDeletion",
+    value: function () {
+      var _retryDeletion = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        var _this$deletionRetryIn, syncBlockIds, onDelete, onDeleteCompleted;
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              if (this.deletionRetryInfo) {
+                _context3.next = 2;
+                break;
+              }
+              return _context3.abrupt("return", Promise.resolve());
+            case 2:
+              _this$deletionRetryIn = this.deletionRetryInfo, syncBlockIds = _this$deletionRetryIn.syncBlockIds, onDelete = _this$deletionRetryIn.onDelete, onDeleteCompleted = _this$deletionRetryIn.onDeleteCompleted;
+              if (!this.confirmationCallback) {
+                _context3.next = 6;
+                break;
+              }
+              _context3.next = 6;
+              return this.delete(syncBlockIds, onDelete, onDeleteCompleted);
+            case 6:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
       }));
-      function deleteSyncBlocksWithConfirmation(_x, _x2) {
+      function retryDeletion() {
+        return _retryDeletion.apply(this, arguments);
+      }
+      return retryDeletion;
+    }()
+  }, {
+    key: "clearPendingDeletion",
+    value: function clearPendingDeletion() {
+      var _this$deletionRetryIn2;
+      (_this$deletionRetryIn2 = this.deletionRetryInfo) === null || _this$deletionRetryIn2 === void 0 || _this$deletionRetryIn2.destroyCallback();
+      this.deletionRetryInfo = undefined;
+    }
+
+    /**
+     *
+     * @param syncBlockIds - The sync block ids to delete
+     * @param onDelete - The callback to delete sync block node from document
+     * @param onDeleteCompleted - The callback for after the deletion is saved to BE (whether successful or not)
+     * @param destroyCallback - The callback to clear any reference stored for deletion (regardless if deletion is completed or abort)
+     */
+  }, {
+    key: "deleteSyncBlocksWithConfirmation",
+    value: (function () {
+      var _deleteSyncBlocksWithConfirmation = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(syncBlockIds, onDelete, onDeleteCompleted, destroyCallback) {
+        var confirmed, isDeleteSuccessful;
+        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              if (!this.confirmationCallback) {
+                _context4.next = 12;
+                break;
+              }
+              _context4.next = 3;
+              return this.confirmationCallback(syncBlockIds.length);
+            case 3:
+              confirmed = _context4.sent;
+              if (!confirmed) {
+                _context4.next = 11;
+                break;
+              }
+              _context4.next = 7;
+              return this.delete(syncBlockIds, onDelete, onDeleteCompleted);
+            case 7:
+              isDeleteSuccessful = _context4.sent;
+              if (!isDeleteSuccessful) {
+                // If deletion failed, save deletion info for potential retry
+                this.deletionRetryInfo = {
+                  syncBlockIds: syncBlockIds,
+                  onDelete: onDelete,
+                  onDeleteCompleted: onDeleteCompleted,
+                  destroyCallback: destroyCallback
+                };
+              }
+              _context4.next = 12;
+              break;
+            case 11:
+              destroyCallback();
+            case 12:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4, this);
+      }));
+      function deleteSyncBlocksWithConfirmation(_x4, _x5, _x6, _x7) {
         return _deleteSyncBlocksWithConfirmation.apply(this, arguments);
       }
       return deleteSyncBlocksWithConfirmation;
-    }()
+    }())
   }, {
     key: "destroy",
     value: function destroy() {
@@ -353,6 +445,7 @@ export var SourceSyncBlockStoreManager = /*#__PURE__*/function () {
       this.pendingResourceId = undefined;
       this.creationCallback = undefined;
       this.dataProvider = undefined;
+      this.clearPendingDeletion();
     }
   }]);
 }();

package/dist/types/providers/syncBlockProvider.d.ts

@@ -95,4 +95,4 @@ export declare class SyncBlockProvider extends SyncBlockDataProvider {
      */
     retrieveSyncBlockParentInfo(sourceAri: string, sourceProduct: SyncBlockProduct): SyncBlockParentInfo | undefined;
 }
-export declare const useMemoizedSyncedBlockProvider: (fetchProvider: ADFFetchProvider, writeProvider: ADFWriteProvider, sourceId: string, providerOptions: SyncedBlockRendererProviderOptions) => SyncBlockProvider;
+export declare const useMemoizedSyncedBlockProvider: (fetchProvider: ADFFetchProvider, writeProvider: ADFWriteProvider, sourceId: string, providerOptions: SyncedBlockRendererProviderOptions, getSSRData?: () => Record<string, SyncBlockInstance> | undefined) => SyncBlockProvider;

package/dist/types/store-manager/referenceSyncBlockStoreManager.d.ts

@@ -15,6 +15,7 @@ export declare class ReferenceSyncBlockStoreManager {
     constructor(dataProvider?: SyncBlockDataProvider, fireAnalyticsEvent?: (payload: RendererSyncBlockEventPayload) => void);
     generateResourceIdForReference(sourceId: ResourceId): ResourceId;
     updateFireAnalyticsEvent(fireAnalyticsEvent?: (payload: RendererSyncBlockEventPayload) => void): void;
+    getInitialSyncBlockData(resourceId: ResourceId): SyncBlockInstance | undefined;
     /**
      * Refreshes the subscriptions for all sync blocks.
      * @returns {Promise<void>}

package/dist/types/store-manager/sourceSyncBlockStoreManager.d.ts

@@ -3,12 +3,16 @@ import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { ResourceId, SyncBlockAttrs } from '../common/types';
 import type { SyncBlockDataProvider } from '../providers/types';
 export type ConfirmationCallback = (syncBlockCount: number) => Promise<boolean>;
+type OnDelete = () => void;
+type OnDeleteCompleted = (success: boolean) => void;
+type DestroyCallback = () => void;
 export type CreationCallback = () => void;
 export declare class SourceSyncBlockStoreManager {
     private dataProvider?;
     private fireAnalyticsEvent?;
     private syncBlockCache;
     private confirmationCallback?;
+    private deletionRetryInfo?;
     private pendingResourceId?;
     private creationCallback?;
     constructor(dataProvider?: SyncBlockDataProvider, fireAnalyticsEvent?: (payload: SyncBlockEventPayload) => void);
@@ -51,6 +55,18 @@ export declare class SourceSyncBlockStoreManager {
      */
     createBodiedSyncBlockNode(attrs: SyncBlockAttrs): void;
     private setPendingDeletion;
-    deleteSyncBlocksWithConfirmation(syncBlockIds: SyncBlockAttrs[], deleteCallback: () => void): Promise<void>;
+    private delete;
+    isRetryingDeletion(): boolean;
+    retryDeletion(): Promise<void>;
+    clearPendingDeletion(): void;
+    /**
+     *
+     * @param syncBlockIds - The sync block ids to delete
+     * @param onDelete - The callback to delete sync block node from document
+     * @param onDeleteCompleted - The callback for after the deletion is saved to BE (whether successful or not)
+     * @param destroyCallback - The callback to clear any reference stored for deletion (regardless if deletion is completed or abort)
+     */
+    deleteSyncBlocksWithConfirmation(syncBlockIds: SyncBlockAttrs[], onDelete: OnDelete, onDeleteCompleted: OnDeleteCompleted, destroyCallback: DestroyCallback): Promise<void>;
     destroy(): void;
 }
+export {};

package/dist/types-ts4.5/providers/syncBlockProvider.d.ts

@@ -95,4 +95,4 @@ export declare class SyncBlockProvider extends SyncBlockDataProvider {
      */
     retrieveSyncBlockParentInfo(sourceAri: string, sourceProduct: SyncBlockProduct): SyncBlockParentInfo | undefined;
 }
-export declare const useMemoizedSyncedBlockProvider: (fetchProvider: ADFFetchProvider, writeProvider: ADFWriteProvider, sourceId: string, providerOptions: SyncedBlockRendererProviderOptions) => SyncBlockProvider;
+export declare const useMemoizedSyncedBlockProvider: (fetchProvider: ADFFetchProvider, writeProvider: ADFWriteProvider, sourceId: string, providerOptions: SyncedBlockRendererProviderOptions, getSSRData?: () => Record<string, SyncBlockInstance> | undefined) => SyncBlockProvider;

package/dist/types-ts4.5/store-manager/referenceSyncBlockStoreManager.d.ts

@@ -15,6 +15,7 @@ export declare class ReferenceSyncBlockStoreManager {
     constructor(dataProvider?: SyncBlockDataProvider, fireAnalyticsEvent?: (payload: RendererSyncBlockEventPayload) => void);
     generateResourceIdForReference(sourceId: ResourceId): ResourceId;
     updateFireAnalyticsEvent(fireAnalyticsEvent?: (payload: RendererSyncBlockEventPayload) => void): void;
+    getInitialSyncBlockData(resourceId: ResourceId): SyncBlockInstance | undefined;
     /**
      * Refreshes the subscriptions for all sync blocks.
      * @returns {Promise<void>}

package/dist/types-ts4.5/store-manager/sourceSyncBlockStoreManager.d.ts

@@ -3,12 +3,16 @@ import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { ResourceId, SyncBlockAttrs } from '../common/types';
 import type { SyncBlockDataProvider } from '../providers/types';
 export type ConfirmationCallback = (syncBlockCount: number) => Promise<boolean>;
+type OnDelete = () => void;
+type OnDeleteCompleted = (success: boolean) => void;
+type DestroyCallback = () => void;
 export type CreationCallback = () => void;
 export declare class SourceSyncBlockStoreManager {
     private dataProvider?;
     private fireAnalyticsEvent?;
     private syncBlockCache;
     private confirmationCallback?;
+    private deletionRetryInfo?;
     private pendingResourceId?;
     private creationCallback?;
     constructor(dataProvider?: SyncBlockDataProvider, fireAnalyticsEvent?: (payload: SyncBlockEventPayload) => void);
@@ -51,6 +55,18 @@ export declare class SourceSyncBlockStoreManager {
      */
     createBodiedSyncBlockNode(attrs: SyncBlockAttrs): void;
     private setPendingDeletion;
-    deleteSyncBlocksWithConfirmation(syncBlockIds: SyncBlockAttrs[], deleteCallback: () => void): Promise<void>;
+    private delete;
+    isRetryingDeletion(): boolean;
+    retryDeletion(): Promise<void>;
+    clearPendingDeletion(): void;
+    /**
+     *
+     * @param syncBlockIds - The sync block ids to delete
+     * @param onDelete - The callback to delete sync block node from document
+     * @param onDeleteCompleted - The callback for after the deletion is saved to BE (whether successful or not)
+     * @param destroyCallback - The callback to clear any reference stored for deletion (regardless if deletion is completed or abort)
+     */
+    deleteSyncBlocksWithConfirmation(syncBlockIds: SyncBlockAttrs[], onDelete: OnDelete, onDeleteCompleted: OnDeleteCompleted, destroyCallback: DestroyCallback): Promise<void>;
     destroy(): void;
 }
+export {};

package/package.json

@@ -6,7 +6,7 @@
 			"category": "Layout and structure"
 		}
 	},
-	"repository": "https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo",
+	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-monorepo",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",
 	"module:es2019": "dist/es2019/index.js",
@@ -34,11 +34,11 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.40.0",
+		"@atlaskit/editor-common": "^110.41.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@testing-library/react": "^13.4.0",
+		"@testing-library/react": "^16.3.0",
 		"react-dom": "^18.2.0"
 	},
 	"techstack": {
@@ -77,7 +77,7 @@
 		}
 	},
 	"name": "@atlaskit/editor-synced-block-provider",
-	"version": "2.13.1",
+	"version": "2.14.1",
 	"description": "Synced Block Provider for @atlaskit/editor-plugin-synced-block",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",