@atlaskit/editor-synced-block-provider 3.27.1 → 3.28.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-synced-block-provider
 
+## 3.28.0
+
+### Minor Changes
+
+- [`2d04d83eba130`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2d04d83eba130) -
+  EDITOR-4997 update cache dirty logic to reduce request
+
+## 3.27.2
+
+### Patch Changes
+
+- [`7b605d0a82c41`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7b605d0a82c41) -
+  Add some tests + remove pending fetch requests for resourceId if reference blocks deleted
+- Updated dependencies
+
 ## 3.27.1
 
 ### Patch Changes

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

@@ -11,6 +11,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _monitoring = require("@atlaskit/editor-common/monitoring");
@@ -43,6 +44,12 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
     (0, _defineProperty2.default)(this, "isRefreshingSubscriptions", false);
     // Flag to indicate if real-time subscriptions are enabled
     (0, _defineProperty2.default)(this, "useRealTimeSubscriptions", false);
+    // Keep track of the last flushed subscriptions to optimize cache flushing on document save
+    (0, _defineProperty2.default)(this, "lastFlushedSyncedBlocks", {});
+    // Track if a flush operation is currently in progress
+    (0, _defineProperty2.default)(this, "isFlushInProgress", false);
+    // Track if another flush is needed after the current one completes
+    (0, _defineProperty2.default)(this, "flushNeededAfterCurrent", false);
     (0, _defineProperty2.default)(this, "pendingFetchRequests", new Set());
     (0, _defineProperty2.default)(this, "scheduledBatchFetch", (0, _rafSchd.default)(function () {
       if (_this.pendingFetchRequests.size === 0) {
@@ -833,8 +840,18 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
   }, {
     key: "debouncedBatchedFetchSyncBlocks",
     value: function debouncedBatchedFetchSyncBlocks(resourceId) {
-      this.pendingFetchRequests.add(resourceId);
-      this.scheduledBatchFetch();
+      if ((0, _platformFeatureFlags.fg)('platform_synced_block_patch_2')) {
+        // Only add to pending requests if there are active subscriptions for this resource
+        if (this.subscriptions.has(resourceId) && Object.keys(this.subscriptions.get(resourceId) || {}).length > 0) {
+          this.pendingFetchRequests.add(resourceId);
+          this.scheduledBatchFetch();
+        } else {
+          this.pendingFetchRequests.delete(resourceId);
+        }
+      } else {
+        this.pendingFetchRequests.add(resourceId);
+        this.scheduledBatchFetch();
+      }
     }
   }, {
     key: "subscribeToSyncBlock",
@@ -1150,19 +1167,104 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
     key: "flush",
     value: (function () {
       var _flush = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
-        var success, _this$saveExperience, blocks, updateResult, _this$saveExperience2, _this$fireAnalyticsEv1, _this$saveExperience3, _this$fireAnalyticsEv10, _this$saveExperience4;
-        return _regenerator.default.wrap(function _callee4$(_context5) {
-          while (1) switch (_context5.prev = _context5.next) {
+        var _this10 = this;
+        var success, syncedBlocksToFlush, _this$saveExperience, blocks, _iterator4, _step4, _loop2, updateResult, _this$saveExperience2, _this$fireAnalyticsEv1, _this$saveExperience3, _this$fireAnalyticsEv10, _this$saveExperience4;
+        return _regenerator.default.wrap(function _callee4$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
             case 0:
               if (this.isCacheDirty) {
-                _context5.next = 2;
+                _context6.next = 2;
                 break;
               }
-              return _context5.abrupt("return", true);
+              return _context6.abrupt("return", true);
             case 2:
-              success = true;
-              _context5.prev = 3;
-              blocks = []; // Collect all reference synced blocks on the current document
+              if (!(0, _platformFeatureFlags.fg)('platform_synced_block_patch_2')) {
+                _context6.next = 9;
+                break;
+              }
+              if (!this.isFlushInProgress) {
+                _context6.next = 8;
+                break;
+              }
+              // Mark that another flush is needed after the current one completes
+              this.flushNeededAfterCurrent = true;
+
+              // We return true here because we know the pending flush will handle the dirty cache
+              return _context6.abrupt("return", true);
+            case 8:
+              this.isFlushInProgress = true;
+            case 9:
+              success = true; // a copy of the subscriptions STRUCTURE (without the callbacks)
+              // To be saved as the last flushed structure if the flush is successful
+              syncedBlocksToFlush = {};
+              _context6.prev = 11;
+              if (this.dataProvider) {
+                _context6.next = 14;
+                break;
+              }
+              throw new Error('Data provider not set');
+            case 14:
+              blocks = [];
+              if (!(0, _platformFeatureFlags.fg)('platform_synced_block_patch_2')) {
+                _context6.next = 37;
+                break;
+              }
+              // First, build the complete subscription structure
+              _iterator4 = _createForOfIteratorHelper(this.subscriptions.entries());
+              _context6.prev = 17;
+              _loop2 = /*#__PURE__*/_regenerator.default.mark(function _loop2() {
+                var _step4$value, resourceId, callbacks;
+                return _regenerator.default.wrap(function _loop2$(_context5) {
+                  while (1) switch (_context5.prev = _context5.next) {
+                    case 0:
+                      _step4$value = (0, _slicedToArray2.default)(_step4.value, 2), resourceId = _step4$value[0], callbacks = _step4$value[1];
+                      syncedBlocksToFlush[resourceId] = {};
+                      Object.keys(callbacks).forEach(function (localId) {
+                        blocks.push({
+                          resourceId: resourceId,
+                          localId: localId
+                        });
+                        syncedBlocksToFlush[resourceId][localId] = true;
+                      });
+                    case 3:
+                    case "end":
+                      return _context5.stop();
+                  }
+                }, _loop2);
+              });
+              _iterator4.s();
+            case 20:
+              if ((_step4 = _iterator4.n()).done) {
+                _context6.next = 24;
+                break;
+              }
+              return _context6.delegateYield(_loop2(), "t0", 22);
+            case 22:
+              _context6.next = 20;
+              break;
+            case 24:
+              _context6.next = 29;
+              break;
+            case 26:
+              _context6.prev = 26;
+              _context6.t1 = _context6["catch"](17);
+              _iterator4.e(_context6.t1);
+            case 29:
+              _context6.prev = 29;
+              _iterator4.f();
+              return _context6.finish(29);
+            case 32:
+              if (!(0, _isEqual.default)(syncedBlocksToFlush, this.lastFlushedSyncedBlocks)) {
+                _context6.next = 35;
+                break;
+              }
+              this.isCacheDirty = false; // Reset since we're considering this a successful no-op flush
+              return _context6.abrupt("return", true);
+            case 35:
+              _context6.next = 38;
+              break;
+            case 37:
+              // Collect all reference synced blocks on the current document
               Array.from(this.subscriptions.entries()).forEach(function (_ref2) {
                 var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
                   resourceId = _ref3[0],
@@ -1174,12 +1276,7 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
                   });
                 });
               });
-              if (this.dataProvider) {
-                _context5.next = 8;
-                break;
-              }
-              throw new Error('Data provider not set');
-            case 8:
+            case 38:
               // reset isCacheDirty early to prevent race condition
               // There is a race condition where if a user makes changes (create/delete) to a reference sync block
               // on a live page and the reference sync block is being saved while the user
@@ -1187,10 +1284,10 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
               // exactly at a time when the updateReferenceData is being executed asynchronously.
               this.isCacheDirty = false;
               (_this$saveExperience = this.saveExperience) === null || _this$saveExperience === void 0 || _this$saveExperience.start();
-              _context5.next = 12;
+              _context6.next = 42;
               return this.dataProvider.updateReferenceData(blocks);
-            case 12:
-              updateResult = _context5.sent;
+            case 42:
+              updateResult = _context6.sent;
               if (!updateResult.success) {
                 success = false;
                 (_this$saveExperience2 = this.saveExperience) === null || _this$saveExperience2 === void 0 || _this$saveExperience2.failure({
@@ -1198,35 +1295,53 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
                 });
                 (_this$fireAnalyticsEv1 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv1 === void 0 || _this$fireAnalyticsEv1.call(this, (0, _errorHandling.updateReferenceErrorPayload)(updateResult.error || 'Failed to update reference synced blocks on the document'));
               }
-              _context5.next = 22;
+              _context6.next = 52;
               break;
-            case 16:
-              _context5.prev = 16;
-              _context5.t0 = _context5["catch"](3);
+            case 46:
+              _context6.prev = 46;
+              _context6.t2 = _context6["catch"](11);
               success = false;
-              (0, _monitoring.logException)(_context5.t0, {
+              (0, _monitoring.logException)(_context6.t2, {
                 location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'
               });
               (_this$saveExperience3 = this.saveExperience) === null || _this$saveExperience3 === void 0 || _this$saveExperience3.failure({
-                reason: _context5.t0.message
+                reason: _context6.t2.message
               });
-              (_this$fireAnalyticsEv10 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv10 === void 0 || _this$fireAnalyticsEv10.call(this, (0, _errorHandling.updateReferenceErrorPayload)(_context5.t0.message));
-            case 22:
-              _context5.prev = 22;
+              (_this$fireAnalyticsEv10 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv10 === void 0 || _this$fireAnalyticsEv10.call(this, (0, _errorHandling.updateReferenceErrorPayload)(_context6.t2.message));
+            case 52:
+              _context6.prev = 52;
               if (!success) {
                 // set isCacheDirty back to true for cases where it failed to update the reference synced blocks on the BE
                 this.isCacheDirty = true;
               } else {
+                if ((0, _platformFeatureFlags.fg)('platform_synced_block_patch_2')) {
+                  this.lastFlushedSyncedBlocks = syncedBlocksToFlush;
+                }
                 (_this$saveExperience4 = this.saveExperience) === null || _this$saveExperience4 === void 0 || _this$saveExperience4.success();
               }
-              return _context5.finish(22);
-            case 25:
-              return _context5.abrupt("return", success);
-            case 26:
+              if ((0, _platformFeatureFlags.fg)('platform_synced_block_patch_2')) {
+                // Always reset isFlushInProgress regardless of feature flag
+                this.isFlushInProgress = false;
+
+                // If another flush was requested while this one was in progress, execute it now
+                if (this.flushNeededAfterCurrent) {
+                  this.flushNeededAfterCurrent = false;
+                  // Use setTimeout to avoid deep recursion and run queued flush asynchronously
+                  // Note: flush() handles all exceptions internally and never rejects
+                  this.queuedFlushTimeout = setTimeout(function () {
+                    _this10.queuedFlushTimeout = undefined;
+                    void _this10.flush();
+                  }, 0);
+                }
+              }
+              return _context6.finish(52);
+            case 56:
+              return _context6.abrupt("return", success);
+            case 57:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
-        }, _callee4, this, [[3, 16, 22, 25]]);
+        }, _callee4, this, [[11, 46, 52, 56], [17, 26, 29, 32]]);
       }));
       function flush() {
         return _flush.apply(this, arguments);
@@ -1237,6 +1352,12 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
     key: "destroy",
     value: function destroy() {
       var _this$saveExperience5, _this$fetchExperience0, _this$fetchSourceInfo2;
+      // Cancel any queued flush to prevent it from running after destroy
+      if (this.queuedFlushTimeout) {
+        clearTimeout(this.queuedFlushTimeout);
+        this.queuedFlushTimeout = undefined;
+      }
+
       // Clean up all GraphQL subscriptions first
       this.cleanupAllGraphQLSubscriptions();
       if ((0, _platformFeatureFlags.fg)('platform_synced_block_patch_1')) {

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

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import isEqual from 'lodash/isEqual';
 import rafSchedule from 'raf-schd';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { logException } from '@atlaskit/editor-common/monitoring';
@@ -25,6 +26,12 @@ export class ReferenceSyncBlockStoreManager {
     _defineProperty(this, "isRefreshingSubscriptions", false);
     // Flag to indicate if real-time subscriptions are enabled
     _defineProperty(this, "useRealTimeSubscriptions", false);
+    // Keep track of the last flushed subscriptions to optimize cache flushing on document save
+    _defineProperty(this, "lastFlushedSyncedBlocks", {});
+    // Track if a flush operation is currently in progress
+    _defineProperty(this, "isFlushInProgress", false);
+    // Track if another flush is needed after the current one completes
+    _defineProperty(this, "flushNeededAfterCurrent", false);
     _defineProperty(this, "pendingFetchRequests", new Set());
     _defineProperty(this, "scheduledBatchFetch", rafSchedule(() => {
       if (this.pendingFetchRequests.size === 0) {
@@ -639,8 +646,18 @@ export class ReferenceSyncBlockStoreManager {
     this.providerFactories.delete(resourceId);
   }
   debouncedBatchedFetchSyncBlocks(resourceId) {
-    this.pendingFetchRequests.add(resourceId);
-    this.scheduledBatchFetch();
+    if (fg('platform_synced_block_patch_2')) {
+      // Only add to pending requests if there are active subscriptions for this resource
+      if (this.subscriptions.has(resourceId) && Object.keys(this.subscriptions.get(resourceId) || {}).length > 0) {
+        this.pendingFetchRequests.add(resourceId);
+        this.scheduledBatchFetch();
+      } else {
+        this.pendingFetchRequests.delete(resourceId);
+      }
+    } else {
+      this.pendingFetchRequests.add(resourceId);
+      this.scheduledBatchFetch();
+    }
   }
   subscribeToSyncBlock(resourceId, localId, callback) {
     var _this$dataProvider7, _this$dataProvider7$g, _this$dataProvider8, _this$dataProvider8$g, _this$dataProvider9, _this$dataProvider9$g;
@@ -950,24 +967,63 @@ export class ReferenceSyncBlockStoreManager {
    */
   async flush() {
     if (!this.isCacheDirty) {
+      // we use the isCacheDirty flag as a quick check.
       return true;
     }
+
+    // Prevent concurrent flushes to avoid race conditions with lastFlushedSyncedBlocks
+    if (fg('platform_synced_block_patch_2')) {
+      if (this.isFlushInProgress) {
+        // Mark that another flush is needed after the current one completes
+        this.flushNeededAfterCurrent = true;
+
+        // We return true here because we know the pending flush will handle the dirty cache
+        return true;
+      } else {
+        this.isFlushInProgress = true;
+      }
+    }
     let success = true;
+    // a copy of the subscriptions STRUCTURE (without the callbacks)
+    // To be saved as the last flushed structure if the flush is successful
+    const syncedBlocksToFlush = {};
     try {
       var _this$saveExperience;
+      if (!this.dataProvider) {
+        throw new Error('Data provider not set');
+      }
       const blocks = [];
+      if (fg('platform_synced_block_patch_2')) {
+        // First, build the complete subscription structure
+        for (const [resourceId, callbacks] of this.subscriptions.entries()) {
+          syncedBlocksToFlush[resourceId] = {};
+          Object.keys(callbacks).forEach(localId => {
+            blocks.push({
+              resourceId,
+              localId
+            });
+            syncedBlocksToFlush[resourceId][localId] = true;
+          });
+        }
 
-      // Collect all reference synced blocks on the current document
-      Array.from(this.subscriptions.entries()).forEach(([resourceId, callbacks]) => {
-        Object.keys(callbacks).forEach(localId => {
-          blocks.push({
-            resourceId,
-            localId
+        // Then, compare with the last flushed structure to detect changes
+        // We check against the last flushed structure to prevent unnecessary flushes
+        // Note that we will always flush at least once when editor starts
+        // This is useful for eventual consistency between the editor and the BE.
+        if (isEqual(syncedBlocksToFlush, this.lastFlushedSyncedBlocks)) {
+          this.isCacheDirty = false; // Reset since we're considering this a successful no-op flush
+          return true;
+        }
+      } else {
+        // Collect all reference synced blocks on the current document
+        Array.from(this.subscriptions.entries()).forEach(([resourceId, callbacks]) => {
+          Object.keys(callbacks).forEach(localId => {
+            blocks.push({
+              resourceId,
+              localId
+            });
           });
         });
-      });
-      if (!this.dataProvider) {
-        throw new Error('Data provider not set');
       }
 
       // reset isCacheDirty early to prevent race condition
@@ -1002,13 +1058,37 @@ export class ReferenceSyncBlockStoreManager {
         this.isCacheDirty = true;
       } else {
         var _this$saveExperience4;
+        if (fg('platform_synced_block_patch_2')) {
+          this.lastFlushedSyncedBlocks = syncedBlocksToFlush;
+        }
         (_this$saveExperience4 = this.saveExperience) === null || _this$saveExperience4 === void 0 ? void 0 : _this$saveExperience4.success();
       }
+      if (fg('platform_synced_block_patch_2')) {
+        // Always reset isFlushInProgress regardless of feature flag
+        this.isFlushInProgress = false;
+
+        // If another flush was requested while this one was in progress, execute it now
+        if (this.flushNeededAfterCurrent) {
+          this.flushNeededAfterCurrent = false;
+          // Use setTimeout to avoid deep recursion and run queued flush asynchronously
+          // Note: flush() handles all exceptions internally and never rejects
+          this.queuedFlushTimeout = setTimeout(() => {
+            this.queuedFlushTimeout = undefined;
+            void this.flush();
+          }, 0);
+        }
+      }
     }
     return success;
   }
   destroy() {
     var _this$saveExperience5, _this$fetchExperience0, _this$fetchSourceInfo6;
+    // Cancel any queued flush to prevent it from running after destroy
+    if (this.queuedFlushTimeout) {
+      clearTimeout(this.queuedFlushTimeout);
+      this.queuedFlushTimeout = undefined;
+    }
+
     // Clean up all GraphQL subscriptions first
     this.cleanupAllGraphQLSubscriptions();
     if (fg('platform_synced_block_patch_1')) {

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

@@ -9,6 +9,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; }
+import isEqual from 'lodash/isEqual';
 import rafSchedule from 'raf-schd';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { logException } from '@atlaskit/editor-common/monitoring';
@@ -37,6 +38,12 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
     _defineProperty(this, "isRefreshingSubscriptions", false);
     // Flag to indicate if real-time subscriptions are enabled
     _defineProperty(this, "useRealTimeSubscriptions", false);
+    // Keep track of the last flushed subscriptions to optimize cache flushing on document save
+    _defineProperty(this, "lastFlushedSyncedBlocks", {});
+    // Track if a flush operation is currently in progress
+    _defineProperty(this, "isFlushInProgress", false);
+    // Track if another flush is needed after the current one completes
+    _defineProperty(this, "flushNeededAfterCurrent", false);
     _defineProperty(this, "pendingFetchRequests", new Set());
     _defineProperty(this, "scheduledBatchFetch", rafSchedule(function () {
       if (_this.pendingFetchRequests.size === 0) {
@@ -827,8 +834,18 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
   }, {
     key: "debouncedBatchedFetchSyncBlocks",
     value: function debouncedBatchedFetchSyncBlocks(resourceId) {
-      this.pendingFetchRequests.add(resourceId);
-      this.scheduledBatchFetch();
+      if (fg('platform_synced_block_patch_2')) {
+        // Only add to pending requests if there are active subscriptions for this resource
+        if (this.subscriptions.has(resourceId) && Object.keys(this.subscriptions.get(resourceId) || {}).length > 0) {
+          this.pendingFetchRequests.add(resourceId);
+          this.scheduledBatchFetch();
+        } else {
+          this.pendingFetchRequests.delete(resourceId);
+        }
+      } else {
+        this.pendingFetchRequests.add(resourceId);
+        this.scheduledBatchFetch();
+      }
     }
   }, {
     key: "subscribeToSyncBlock",
@@ -1144,19 +1161,104 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
     key: "flush",
     value: (function () {
       var _flush = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-        var success, _this$saveExperience, blocks, updateResult, _this$saveExperience2, _this$fireAnalyticsEv1, _this$saveExperience3, _this$fireAnalyticsEv10, _this$saveExperience4;
-        return _regeneratorRuntime.wrap(function _callee4$(_context5) {
-          while (1) switch (_context5.prev = _context5.next) {
+        var _this10 = this;
+        var success, syncedBlocksToFlush, _this$saveExperience, blocks, _iterator4, _step4, _loop2, updateResult, _this$saveExperience2, _this$fireAnalyticsEv1, _this$saveExperience3, _this$fireAnalyticsEv10, _this$saveExperience4;
+        return _regeneratorRuntime.wrap(function _callee4$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
             case 0:
               if (this.isCacheDirty) {
-                _context5.next = 2;
+                _context6.next = 2;
                 break;
               }
-              return _context5.abrupt("return", true);
+              return _context6.abrupt("return", true);
             case 2:
-              success = true;
-              _context5.prev = 3;
-              blocks = []; // Collect all reference synced blocks on the current document
+              if (!fg('platform_synced_block_patch_2')) {
+                _context6.next = 9;
+                break;
+              }
+              if (!this.isFlushInProgress) {
+                _context6.next = 8;
+                break;
+              }
+              // Mark that another flush is needed after the current one completes
+              this.flushNeededAfterCurrent = true;
+
+              // We return true here because we know the pending flush will handle the dirty cache
+              return _context6.abrupt("return", true);
+            case 8:
+              this.isFlushInProgress = true;
+            case 9:
+              success = true; // a copy of the subscriptions STRUCTURE (without the callbacks)
+              // To be saved as the last flushed structure if the flush is successful
+              syncedBlocksToFlush = {};
+              _context6.prev = 11;
+              if (this.dataProvider) {
+                _context6.next = 14;
+                break;
+              }
+              throw new Error('Data provider not set');
+            case 14:
+              blocks = [];
+              if (!fg('platform_synced_block_patch_2')) {
+                _context6.next = 37;
+                break;
+              }
+              // First, build the complete subscription structure
+              _iterator4 = _createForOfIteratorHelper(this.subscriptions.entries());
+              _context6.prev = 17;
+              _loop2 = /*#__PURE__*/_regeneratorRuntime.mark(function _loop2() {
+                var _step4$value, resourceId, callbacks;
+                return _regeneratorRuntime.wrap(function _loop2$(_context5) {
+                  while (1) switch (_context5.prev = _context5.next) {
+                    case 0:
+                      _step4$value = _slicedToArray(_step4.value, 2), resourceId = _step4$value[0], callbacks = _step4$value[1];
+                      syncedBlocksToFlush[resourceId] = {};
+                      Object.keys(callbacks).forEach(function (localId) {
+                        blocks.push({
+                          resourceId: resourceId,
+                          localId: localId
+                        });
+                        syncedBlocksToFlush[resourceId][localId] = true;
+                      });
+                    case 3:
+                    case "end":
+                      return _context5.stop();
+                  }
+                }, _loop2);
+              });
+              _iterator4.s();
+            case 20:
+              if ((_step4 = _iterator4.n()).done) {
+                _context6.next = 24;
+                break;
+              }
+              return _context6.delegateYield(_loop2(), "t0", 22);
+            case 22:
+              _context6.next = 20;
+              break;
+            case 24:
+              _context6.next = 29;
+              break;
+            case 26:
+              _context6.prev = 26;
+              _context6.t1 = _context6["catch"](17);
+              _iterator4.e(_context6.t1);
+            case 29:
+              _context6.prev = 29;
+              _iterator4.f();
+              return _context6.finish(29);
+            case 32:
+              if (!isEqual(syncedBlocksToFlush, this.lastFlushedSyncedBlocks)) {
+                _context6.next = 35;
+                break;
+              }
+              this.isCacheDirty = false; // Reset since we're considering this a successful no-op flush
+              return _context6.abrupt("return", true);
+            case 35:
+              _context6.next = 38;
+              break;
+            case 37:
+              // Collect all reference synced blocks on the current document
               Array.from(this.subscriptions.entries()).forEach(function (_ref2) {
                 var _ref3 = _slicedToArray(_ref2, 2),
                   resourceId = _ref3[0],
@@ -1168,12 +1270,7 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
                   });
                 });
               });
-              if (this.dataProvider) {
-                _context5.next = 8;
-                break;
-              }
-              throw new Error('Data provider not set');
-            case 8:
+            case 38:
               // reset isCacheDirty early to prevent race condition
               // There is a race condition where if a user makes changes (create/delete) to a reference sync block
               // on a live page and the reference sync block is being saved while the user
@@ -1181,10 +1278,10 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
               // exactly at a time when the updateReferenceData is being executed asynchronously.
               this.isCacheDirty = false;
               (_this$saveExperience = this.saveExperience) === null || _this$saveExperience === void 0 || _this$saveExperience.start();
-              _context5.next = 12;
+              _context6.next = 42;
               return this.dataProvider.updateReferenceData(blocks);
-            case 12:
-              updateResult = _context5.sent;
+            case 42:
+              updateResult = _context6.sent;
               if (!updateResult.success) {
                 success = false;
                 (_this$saveExperience2 = this.saveExperience) === null || _this$saveExperience2 === void 0 || _this$saveExperience2.failure({
@@ -1192,35 +1289,53 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
                 });
                 (_this$fireAnalyticsEv1 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv1 === void 0 || _this$fireAnalyticsEv1.call(this, updateReferenceErrorPayload(updateResult.error || 'Failed to update reference synced blocks on the document'));
               }
-              _context5.next = 22;
+              _context6.next = 52;
               break;
-            case 16:
-              _context5.prev = 16;
-              _context5.t0 = _context5["catch"](3);
+            case 46:
+              _context6.prev = 46;
+              _context6.t2 = _context6["catch"](11);
               success = false;
-              logException(_context5.t0, {
+              logException(_context6.t2, {
                 location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'
               });
               (_this$saveExperience3 = this.saveExperience) === null || _this$saveExperience3 === void 0 || _this$saveExperience3.failure({
-                reason: _context5.t0.message
+                reason: _context6.t2.message
               });
-              (_this$fireAnalyticsEv10 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv10 === void 0 || _this$fireAnalyticsEv10.call(this, updateReferenceErrorPayload(_context5.t0.message));
-            case 22:
-              _context5.prev = 22;
+              (_this$fireAnalyticsEv10 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv10 === void 0 || _this$fireAnalyticsEv10.call(this, updateReferenceErrorPayload(_context6.t2.message));
+            case 52:
+              _context6.prev = 52;
               if (!success) {
                 // set isCacheDirty back to true for cases where it failed to update the reference synced blocks on the BE
                 this.isCacheDirty = true;
               } else {
+                if (fg('platform_synced_block_patch_2')) {
+                  this.lastFlushedSyncedBlocks = syncedBlocksToFlush;
+                }
                 (_this$saveExperience4 = this.saveExperience) === null || _this$saveExperience4 === void 0 || _this$saveExperience4.success();
               }
-              return _context5.finish(22);
-            case 25:
-              return _context5.abrupt("return", success);
-            case 26:
+              if (fg('platform_synced_block_patch_2')) {
+                // Always reset isFlushInProgress regardless of feature flag
+                this.isFlushInProgress = false;
+
+                // If another flush was requested while this one was in progress, execute it now
+                if (this.flushNeededAfterCurrent) {
+                  this.flushNeededAfterCurrent = false;
+                  // Use setTimeout to avoid deep recursion and run queued flush asynchronously
+                  // Note: flush() handles all exceptions internally and never rejects
+                  this.queuedFlushTimeout = setTimeout(function () {
+                    _this10.queuedFlushTimeout = undefined;
+                    void _this10.flush();
+                  }, 0);
+                }
+              }
+              return _context6.finish(52);
+            case 56:
+              return _context6.abrupt("return", success);
+            case 57:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
-        }, _callee4, this, [[3, 16, 22, 25]]);
+        }, _callee4, this, [[11, 46, 52, 56], [17, 26, 29, 32]]);
       }));
       function flush() {
         return _flush.apply(this, arguments);
@@ -1231,6 +1346,12 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
     key: "destroy",
     value: function destroy() {
       var _this$saveExperience5, _this$fetchExperience0, _this$fetchSourceInfo2;
+      // Cancel any queued flush to prevent it from running after destroy
+      if (this.queuedFlushTimeout) {
+        clearTimeout(this.queuedFlushTimeout);
+        this.queuedFlushTimeout = undefined;
+      }
+
       // Clean up all GraphQL subscriptions first
       this.cleanupAllGraphQLSubscriptions();
       if (fg('platform_synced_block_patch_1')) {

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

@@ -21,7 +21,11 @@ export declare class ReferenceSyncBlockStoreManager {
     private useRealTimeSubscriptions;
     private subscriptionChangeListeners;
     private newlyAddedSyncBlocks;
+    private lastFlushedSyncedBlocks;
     private onUnpublishedSyncBlockDetected?;
+    private isFlushInProgress;
+    private flushNeededAfterCurrent;
+    private queuedFlushTimeout?;
     fetchExperience: Experience | undefined;
     private fetchSourceInfoExperience;
     private saveExperience;

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

@@ -21,7 +21,11 @@ export declare class ReferenceSyncBlockStoreManager {
     private useRealTimeSubscriptions;
     private subscriptionChangeListeners;
     private newlyAddedSyncBlocks;
+    private lastFlushedSyncedBlocks;
     private onUnpublishedSyncBlockDetected?;
+    private isFlushInProgress;
+    private flushNeededAfterCurrent;
+    private queuedFlushTimeout?;
     fetchExperience: Experience | undefined;
     private fetchSourceInfoExperience;
     private saveExperience;

package/package.json

@@ -32,6 +32,7 @@
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
 		"graphql-ws": "^5.14.2",
+		"lodash": "^4.17.21",
 		"raf-schd": "^4.0.3",
 		"uuid": "^3.1.0"
 	},
@@ -79,7 +80,7 @@
 		}
 	},
 	"name": "@atlaskit/editor-synced-block-provider",
-	"version": "3.27.1",
+	"version": "3.28.0",
 	"description": "Synced Block Provider for @atlaskit/editor-plugin-synced-block",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",