@atlaskit/editor-synced-block-provider 3.12.1 → 3.13.0

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

@@ -25,18 +25,17 @@ import { createSyncBlockNode } from '../utils/utils';
 // Handles fetching source URL and title for sync blocks.
 // Can be used in both editor and renderer contexts.
 export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
-  // Track pending cache deletions to handle block moves (unmount/remount)
-  // When a block is moved, the old component unmounts before the new one mounts,
-  // causing the cache to be deleted prematurely. We delay deletion to allow
-  // the new component to subscribe and cancel the pending deletion.
+  // Listeners for subscription changes (used by React components to know when to update)
 
   function ReferenceSyncBlockStoreManager(dataProvider) {
     _classCallCheck(this, ReferenceSyncBlockStoreManager);
     // Keeps track of addition and deletion of reference synced blocks on the document
     // This starts as true to always flush the cache when document is saved for the first time
-    // to cater the case when a editor seesion is closed without document being updated right after reference block is deleted
+    // to cater the case when a editor session is closed without document being updated right after reference block is deleted
     _defineProperty(this, "isCacheDirty", true);
     _defineProperty(this, "isRefreshingSubscriptions", false);
+    // Flag to indicate if real-time subscriptions are enabled
+    _defineProperty(this, "useRealTimeSubscriptions", false);
     this.syncBlockCache = new Map();
     this.subscriptions = new Map();
     this.titleSubscriptions = new Map();
@@ -46,8 +45,105 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
     this.syncBlockSourceInfoRequests = new Map();
     this.providerFactories = new Map();
     this.pendingCacheDeletions = new Map();
+    this.graphqlSubscriptions = new Map();
+    this.subscriptionChangeListeners = new Set();
   }
+
+  /**
+   * Enables or disables real-time GraphQL subscriptions for block updates.
+   * When enabled, the store manager will subscribe to real-time updates
+   * instead of relying on polling.
+   * @param enabled - Whether to enable real-time subscriptions
+   */
   return _createClass(ReferenceSyncBlockStoreManager, [{
+    key: "setRealTimeSubscriptionsEnabled",
+    value: function setRealTimeSubscriptionsEnabled(enabled) {
+      if (this.useRealTimeSubscriptions === enabled) {
+        return;
+      }
+      this.useRealTimeSubscriptions = enabled;
+      if (enabled) {
+        // Set up subscriptions for all currently subscribed blocks
+        this.setupGraphQLSubscriptionsForAllBlocks();
+      } else {
+        // Clean up all GraphQL subscriptions
+        this.cleanupAllGraphQLSubscriptions();
+      }
+    }
+
+    /**
+     * Checks if real-time subscriptions are currently enabled.
+     */
+  }, {
+    key: "isRealTimeSubscriptionsEnabled",
+    value: function isRealTimeSubscriptionsEnabled() {
+      return this.useRealTimeSubscriptions;
+    }
+
+    /**
+     * Returns all resource IDs that are currently subscribed to.
+     * Used by React components to render subscription components.
+     */
+  }, {
+    key: "getSubscribedResourceIds",
+    value: function getSubscribedResourceIds() {
+      return Array.from(this.subscriptions.keys());
+    }
+
+    /**
+     * Registers a listener that will be called when subscriptions change.
+     * @param listener - Callback function to invoke when subscriptions change
+     * @returns Unsubscribe function to remove the listener
+     */
+  }, {
+    key: "onSubscriptionsChanged",
+    value: function onSubscriptionsChanged(listener) {
+      var _this = this;
+      this.subscriptionChangeListeners.add(listener);
+      return function () {
+        _this.subscriptionChangeListeners.delete(listener);
+      };
+    }
+
+    /**
+     * Notifies all subscription change listeners.
+     */
+  }, {
+    key: "notifySubscriptionChangeListeners",
+    value: function notifySubscriptionChangeListeners() {
+      var _this2 = this;
+      this.subscriptionChangeListeners.forEach(function (listener) {
+        try {
+          listener();
+        } catch (error) {
+          var _this2$fireAnalyticsE;
+          logException(error, {
+            location: 'editor-synced-block-provider/referenceSyncBlockStoreManager/notifySubscriptionChangeListeners'
+          });
+          (_this2$fireAnalyticsE = _this2.fireAnalyticsEvent) === null || _this2$fireAnalyticsE === void 0 || _this2$fireAnalyticsE.call(_this2, fetchErrorPayload(error.message));
+        }
+      });
+    }
+
+    /**
+     * Handles incoming data from a GraphQL subscription.
+     * Called by React subscription components when they receive updates.
+     * @param syncBlockInstance - The updated sync block instance
+     */
+  }, {
+    key: "handleSubscriptionUpdate",
+    value: function handleSubscriptionUpdate(syncBlockInstance) {
+      if (!syncBlockInstance.resourceId) {
+        return;
+      }
+      var existingSyncBlock = this.getFromCache(syncBlockInstance.resourceId);
+      var resolvedSyncBlockInstance = existingSyncBlock ? resolveSyncBlockInstance(existingSyncBlock, syncBlockInstance) : syncBlockInstance;
+      this.updateCache(resolvedSyncBlockInstance);
+      if (!syncBlockInstance.error) {
+        this.fetchSyncBlockSourceInfo(resolvedSyncBlockInstance.resourceId);
+      }
+    }
+  }, {
     key: "setFireAnalyticsEvent",
     value: function setFireAnalyticsEvent(fireAnalyticsEvent) {
       this.fireAnalyticsEvent = fireAnalyticsEvent;
@@ -78,6 +174,7 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
 
     /**
      * Refreshes the subscriptions for all sync blocks.
+     * This is a fallback polling mechanism when real-time subscriptions are not enabled.
      * @returns {Promise<void>}
      */
   }, {
@@ -88,16 +185,22 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
         return _regeneratorRuntime.wrap(function _callee$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              if (!this.isRefreshingSubscriptions) {
+              if (!this.useRealTimeSubscriptions) {
                 _context2.next = 2;
                 break;
               }
               return _context2.abrupt("return");
             case 2:
+              if (!this.isRefreshingSubscriptions) {
+                _context2.next = 4;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 4:
               this.isRefreshingSubscriptions = true;
               syncBlocks = [];
               _iterator = _createForOfIteratorHelper(this.subscriptions.entries());
-              _context2.prev = 5;
+              _context2.prev = 7;
               _loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop() {
                 var _step$value, resourceId, callbacks;
                 return _regeneratorRuntime.wrap(function _loop$(_context) {
@@ -114,59 +217,163 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
                 }, _loop);
               });
               _iterator.s();
-            case 8:
+            case 10:
               if ((_step = _iterator.n()).done) {
-                _context2.next = 12;
+                _context2.next = 14;
                 break;
               }
-              return _context2.delegateYield(_loop(), "t0", 10);
-            case 10:
-              _context2.next = 8;
-              break;
+              return _context2.delegateYield(_loop(), "t0", 12);
             case 12:
-              _context2.next = 17;
+              _context2.next = 10;
               break;
             case 14:
-              _context2.prev = 14;
-              _context2.t1 = _context2["catch"](5);
+              _context2.next = 19;
+              break;
+            case 16:
+              _context2.prev = 16;
+              _context2.t1 = _context2["catch"](7);
               _iterator.e(_context2.t1);
-            case 17:
-              _context2.prev = 17;
+            case 19:
+              _context2.prev = 19;
               _iterator.f();
-              return _context2.finish(17);
-            case 20:
-              _context2.prev = 20;
-              _context2.next = 23;
+              return _context2.finish(19);
+            case 22:
+              _context2.prev = 22;
+              _context2.next = 25;
               return this.fetchSyncBlocksData(syncBlocks);
-            case 23:
-              _context2.next = 29;
-              break;
             case 25:
-              _context2.prev = 25;
-              _context2.t2 = _context2["catch"](20);
+              _context2.next = 31;
+              break;
+            case 27:
+              _context2.prev = 27;
+              _context2.t2 = _context2["catch"](22);
               logException(_context2.t2, {
                 location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'
               });
               (_this$fireAnalyticsEv = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv === void 0 || _this$fireAnalyticsEv.call(this, fetchErrorPayload(_context2.t2.message));
-            case 29:
-              _context2.prev = 29;
+            case 31:
+              _context2.prev = 31;
               this.isRefreshingSubscriptions = false;
-              return _context2.finish(29);
-            case 32:
+              return _context2.finish(31);
+            case 34:
             case "end":
               return _context2.stop();
           }
-        }, _callee, this, [[5, 14, 17, 20], [20, 25, 29, 32]]);
+        }, _callee, this, [[7, 16, 19, 22], [22, 27, 31, 34]]);
       }));
       function refreshSubscriptions() {
         return _refreshSubscriptions.apply(this, arguments);
       }
       return refreshSubscriptions;
-    }())
+    }()
+    /**
+     * Sets up a GraphQL subscription for a specific block.
+     * @param resourceId - The resource ID of the block to subscribe to
+     */
+    )
+  }, {
+    key: "setupGraphQLSubscription",
+    value: function setupGraphQLSubscription(resourceId) {
+      var _this$dataProvider2,
+        _this3 = this;
+      // Don't set up duplicate subscriptions
+      if (this.graphqlSubscriptions.has(resourceId)) {
+        return;
+      }
+      if (!((_this$dataProvider2 = this.dataProvider) !== null && _this$dataProvider2 !== void 0 && _this$dataProvider2.subscribeToBlockUpdates)) {
+        return;
+      }
+      var unsubscribe = this.dataProvider.subscribeToBlockUpdates(resourceId, function (syncBlockInstance) {
+        // Handle the subscription update
+        _this3.handleGraphQLSubscriptionUpdate(syncBlockInstance);
+      }, function (error) {
+        var _this3$fireAnalyticsE;
+        logException(error, {
+          location: 'editor-synced-block-provider/referenceSyncBlockStoreManager/graphql-subscription'
+        });
+        (_this3$fireAnalyticsE = _this3.fireAnalyticsEvent) === null || _this3$fireAnalyticsE === void 0 || _this3$fireAnalyticsE.call(_this3, fetchErrorPayload(error.message));
+      });
+      if (unsubscribe) {
+        this.graphqlSubscriptions.set(resourceId, unsubscribe);
+      }
+    }
+
+    /**
+     * Handles updates received from GraphQL subscriptions.
+     * @param syncBlockInstance - The updated sync block instance
+     */
+  }, {
+    key: "handleGraphQLSubscriptionUpdate",
+    value: function handleGraphQLSubscriptionUpdate(syncBlockInstance) {
+      if (!syncBlockInstance.resourceId) {
+        return;
+      }
+      var existingSyncBlock = this.getFromCache(syncBlockInstance.resourceId);
+      var resolvedSyncBlockInstance = existingSyncBlock ? resolveSyncBlockInstance(existingSyncBlock, syncBlockInstance) : syncBlockInstance;
+      this.updateCache(resolvedSyncBlockInstance);
+      if (!syncBlockInstance.error) {
+        this.fetchSyncBlockSourceInfo(resolvedSyncBlockInstance.resourceId);
+      }
+    }
+
+    /**
+     * Cleans up the GraphQL subscription for a specific block.
+     * @param resourceId - The resource ID of the block to unsubscribe from
+     */
+  }, {
+    key: "cleanupGraphQLSubscription",
+    value: function cleanupGraphQLSubscription(resourceId) {
+      var unsubscribe = this.graphqlSubscriptions.get(resourceId);
+      if (unsubscribe) {
+        unsubscribe();
+        this.graphqlSubscriptions.delete(resourceId);
+      }
+    }
+
+    /**
+     * Sets up GraphQL subscriptions for all currently subscribed blocks.
+     */
+  }, {
+    key: "setupGraphQLSubscriptionsForAllBlocks",
+    value: function setupGraphQLSubscriptionsForAllBlocks() {
+      var _iterator2 = _createForOfIteratorHelper(this.subscriptions.keys()),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var resourceId = _step2.value;
+          this.setupGraphQLSubscription(resourceId);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    }
+
+    /**
+     * Cleans up all GraphQL subscriptions.
+     */
+  }, {
+    key: "cleanupAllGraphQLSubscriptions",
+    value: function cleanupAllGraphQLSubscriptions() {
+      var _iterator3 = _createForOfIteratorHelper(this.graphqlSubscriptions.values()),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var unsubscribe = _step3.value;
+          unsubscribe();
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      this.graphqlSubscriptions.clear();
+    }
   }, {
     key: "fetchSyncBlockSourceInfo",
     value: function fetchSyncBlockSourceInfo(resourceId) {
-      var _this = this;
+      var _this4 = this;
       try {
         if (!resourceId || !this.dataProvider) {
           throw new Error('Data provider or resourceId not set');
@@ -189,7 +396,7 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
           blockInstanceId = _ref.blockInstanceId,
           sourceURL = _ref.sourceURL,
           sourceTitle = _ref.sourceTitle,
-          onSamePage = _ref.onSamePage,
+          onSameDocument = _ref.onSameDocument,
           sourceSubType = _ref.sourceSubType;
         // skip if source URL and title are already present
         if (sourceURL && sourceTitle) {
@@ -199,7 +406,7 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
               url: sourceURL,
               subType: sourceSubType,
               sourceAri: sourceAri || '',
-              onSamePage: onSamePage,
+              onSameDocument: onSameDocument,
               productType: product
             });
           } else {
@@ -218,46 +425,46 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
         var sourceInfoPromise = this.dataProvider.fetchSyncBlockSourceInfo(blockInstanceId, sourceAri, product, this.fireAnalyticsEvent).then(function (sourceInfo) {
           if (!sourceInfo) {
             if (fg('platform_synced_block_dogfooding')) {
-              var _this$fetchSourceInfo2, _this$fireAnalyticsEv3;
-              (_this$fetchSourceInfo2 = _this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo2 === void 0 || _this$fetchSourceInfo2.failure({
+              var _this4$fetchSourceInf, _this4$fireAnalyticsE;
+              (_this4$fetchSourceInf = _this4.fetchSourceInfoExperience) === null || _this4$fetchSourceInf === void 0 || _this4$fetchSourceInf.failure({
                 reason: 'No source info returned'
               });
-              (_this$fireAnalyticsEv3 = _this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv3 === void 0 || _this$fireAnalyticsEv3.call(_this, getSourceInfoErrorPayload('No source info returned', resourceId));
+              (_this4$fireAnalyticsE = _this4.fireAnalyticsEvent) === null || _this4$fireAnalyticsE === void 0 || _this4$fireAnalyticsE.call(_this4, getSourceInfoErrorPayload('No source info returned', resourceId));
             }
             return undefined;
           }
-          _this.updateCacheWithSourceInfo(resourceId, sourceInfo);
+          _this4.updateCacheWithSourceInfo(resourceId, sourceInfo);
           if (sourceInfo.title) {
-            _this.updateSourceTitleSubscriptions(resourceId, sourceInfo.title);
+            _this4.updateSourceTitleSubscriptions(resourceId, sourceInfo.title);
           }
           if (fg('platform_synced_block_dogfooding')) {
             if (sourceInfo.title && sourceInfo.url) {
-              var _this$fetchSourceInfo3;
-              (_this$fetchSourceInfo3 = _this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo3 === void 0 || _this$fetchSourceInfo3.success();
+              var _this4$fetchSourceInf2;
+              (_this4$fetchSourceInf2 = _this4.fetchSourceInfoExperience) === null || _this4$fetchSourceInf2 === void 0 || _this4$fetchSourceInf2.success();
             } else {
-              var _this$fetchSourceInfo4, _this$fireAnalyticsEv4;
-              (_this$fetchSourceInfo4 = _this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo4 === void 0 || _this$fetchSourceInfo4.failure({
+              var _this4$fetchSourceInf3, _this4$fireAnalyticsE2;
+              (_this4$fetchSourceInf3 = _this4.fetchSourceInfoExperience) === null || _this4$fetchSourceInf3 === void 0 || _this4$fetchSourceInf3.failure({
                 reason: 'Missing title or url'
               });
-              (_this$fireAnalyticsEv4 = _this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv4 === void 0 || _this$fireAnalyticsEv4.call(_this, getSourceInfoErrorPayload('Missing title or url', resourceId));
+              (_this4$fireAnalyticsE2 = _this4.fireAnalyticsEvent) === null || _this4$fireAnalyticsE2 === void 0 || _this4$fireAnalyticsE2.call(_this4, getSourceInfoErrorPayload('Missing title or url', resourceId));
             }
             return sourceInfo;
           }
         }).catch(function (error) {
-          var _this$fireAnalyticsEv5;
+          var _this4$fireAnalyticsE3;
           if (fg('platform_synced_block_dogfooding')) {
-            var _this$fetchSourceInfo5;
-            (_this$fetchSourceInfo5 = _this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo5 === void 0 || _this$fetchSourceInfo5.failure({
+            var _this4$fetchSourceInf4;
+            (_this4$fetchSourceInf4 = _this4.fetchSourceInfoExperience) === null || _this4$fetchSourceInf4 === void 0 || _this4$fetchSourceInf4.failure({
               reason: error.message
             });
           }
-          (_this$fireAnalyticsEv5 = _this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv5 === void 0 || _this$fireAnalyticsEv5.call(_this, getSourceInfoErrorPayload(error.message, resourceId));
+          (_this4$fireAnalyticsE3 = _this4.fireAnalyticsEvent) === null || _this4$fireAnalyticsE3 === void 0 || _this4$fireAnalyticsE3.call(_this4, getSourceInfoErrorPayload(error.message, resourceId));
           return undefined;
         }).finally(function () {
           if (fg('platform_synced_block_dogfooding')) {
-            _this.syncBlockSourceInfoRequests.delete(resourceId);
+            _this4.syncBlockSourceInfoRequests.delete(resourceId);
           } else {
-            _this.syncBlockSourceInfoRequestsOld.delete(resourceId);
+            _this4.syncBlockSourceInfoRequestsOld.delete(resourceId);
           }
         });
         if (fg('platform_synced_block_dogfooding')) {
@@ -267,11 +474,11 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
           this.syncBlockSourceInfoRequestsOld.set(resourceId, true);
         }
       } catch (error) {
-        var _this$fireAnalyticsEv6;
+        var _this$fireAnalyticsEv3;
         logException(error, {
           location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'
         });
-        (_this$fireAnalyticsEv6 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv6 === void 0 || _this$fireAnalyticsEv6.call(this, getSourceInfoErrorPayload(error.message, resourceId));
+        (_this$fireAnalyticsEv3 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv3 === void 0 || _this$fireAnalyticsEv3.call(this, getSourceInfoErrorPayload(error.message, resourceId));
       }
       return Promise.resolve(undefined);
     }
@@ -285,7 +492,7 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
     key: "fetchSyncBlocksData",
     value: (function () {
       var _fetchSyncBlocksData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(syncBlockNodes) {
-        var _this2 = this;
+        var _this5 = this;
         var nodesToFetch, _this$fetchExperience, data, resolvedData, hasUnexpectedError, hasExpectedError, _this$fetchExperience2, _this$fetchExperience3, _this$fetchExperience4;
         return _regeneratorRuntime.wrap(function _callee2$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
@@ -299,10 +506,10 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
               // Don't fetch for not_found error since the source is already deleted
               nodesToFetch = [];
               syncBlockNodes.forEach(function (node) {
-                if (_this2.syncBlockFetchDataRequests.get(node.attrs.resourceId)) {
+                if (_this5.syncBlockFetchDataRequests.get(node.attrs.resourceId)) {
                   return;
                 }
-                var existingSyncBlock = _this2.getFromCache(node.attrs.resourceId);
+                var existingSyncBlock = _this5.getFromCache(node.attrs.resourceId);
                 if ((existingSyncBlock === null || existingSyncBlock === void 0 ? void 0 : existingSyncBlock.error) === SyncBlockError.NotFound) {
                   return;
                 }
@@ -321,7 +528,7 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
               throw new Error('Data provider not set');
             case 8:
               nodesToFetch.forEach(function (node) {
-                _this2.syncBlockFetchDataRequests.set(node.attrs.resourceId, true);
+                _this5.syncBlockFetchDataRequests.set(node.attrs.resourceId, true);
               });
               if (fg('platform_synced_block_dogfooding')) {
                 (_this$fetchExperience = this.fetchExperience) === null || _this$fetchExperience === void 0 || _this$fetchExperience.start({});
@@ -329,7 +536,7 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
               _context3.next = 12;
               return this.dataProvider.fetchNodesData(nodesToFetch).finally(function () {
                 nodesToFetch.forEach(function (node) {
-                  _this2.syncBlockFetchDataRequests.delete(node.attrs.resourceId);
+                  _this5.syncBlockFetchDataRequests.delete(node.attrs.resourceId);
                 });
               });
             case 12:
@@ -339,17 +546,17 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
               hasExpectedError = false;
               data.forEach(function (syncBlockInstance) {
                 if (!syncBlockInstance.resourceId) {
-                  var _this2$fireAnalyticsE;
-                  (_this2$fireAnalyticsE = _this2.fireAnalyticsEvent) === null || _this2$fireAnalyticsE === void 0 || _this2$fireAnalyticsE.call(_this2, fetchErrorPayload(syncBlockInstance.error || 'Returned sync block instance does not have resource id'));
+                  var _this5$fireAnalyticsE;
+                  (_this5$fireAnalyticsE = _this5.fireAnalyticsEvent) === null || _this5$fireAnalyticsE === void 0 || _this5$fireAnalyticsE.call(_this5, fetchErrorPayload(syncBlockInstance.error || 'Returned sync block instance does not have resource id'));
                   return;
                 }
-                var existingSyncBlock = _this2.getFromCache(syncBlockInstance.resourceId);
+                var existingSyncBlock = _this5.getFromCache(syncBlockInstance.resourceId);
                 var resolvedSyncBlockInstance = existingSyncBlock ? resolveSyncBlockInstance(existingSyncBlock, syncBlockInstance) : syncBlockInstance;
-                _this2.updateCache(resolvedSyncBlockInstance);
+                _this5.updateCache(resolvedSyncBlockInstance);
                 resolvedData.push(resolvedSyncBlockInstance);
                 if (syncBlockInstance.error) {
-                  var _this2$fireAnalyticsE2;
-                  (_this2$fireAnalyticsE2 = _this2.fireAnalyticsEvent) === null || _this2$fireAnalyticsE2 === void 0 || _this2$fireAnalyticsE2.call(_this2, fetchErrorPayload(syncBlockInstance.error, syncBlockInstance.resourceId));
+                  var _this5$fireAnalyticsE2;
+                  (_this5$fireAnalyticsE2 = _this5.fireAnalyticsEvent) === null || _this5$fireAnalyticsE2 === void 0 || _this5$fireAnalyticsE2.call(_this5, fetchErrorPayload(syncBlockInstance.error, syncBlockInstance.resourceId));
                   if (syncBlockInstance.error === SyncBlockError.NotFound || syncBlockInstance.error === SyncBlockError.Forbidden) {
                     hasExpectedError = true;
                   } else if (syncBlockInstance.error) {
@@ -357,10 +564,10 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
                   }
                   return;
                 } else if (fg('platform_synced_block_dogfooding')) {
-                  var _this2$fireAnalyticsE3, _syncBlockInstance$da, _syncBlockInstance$da2;
-                  (_this2$fireAnalyticsE3 = _this2.fireAnalyticsEvent) === null || _this2$fireAnalyticsE3 === void 0 || _this2$fireAnalyticsE3.call(_this2, fetchSuccessPayload(syncBlockInstance.resourceId, (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.blockInstanceId, (_syncBlockInstance$da2 = syncBlockInstance.data) === null || _syncBlockInstance$da2 === void 0 ? void 0 : _syncBlockInstance$da2.product));
+                  var _this5$fireAnalyticsE3, _syncBlockInstance$da, _syncBlockInstance$da2;
+                  (_this5$fireAnalyticsE3 = _this5.fireAnalyticsEvent) === null || _this5$fireAnalyticsE3 === void 0 || _this5$fireAnalyticsE3.call(_this5, fetchSuccessPayload(syncBlockInstance.resourceId, (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.blockInstanceId, (_syncBlockInstance$da2 = syncBlockInstance.data) === null || _syncBlockInstance$da2 === void 0 ? void 0 : _syncBlockInstance$da2.product));
                 }
-                _this2.fetchSyncBlockSourceInfo(resolvedSyncBlockInstance.resourceId);
+                _this5.fetchSyncBlockSourceInfo(resolvedSyncBlockInstance.resourceId);
               });
               if (fg('platform_synced_block_dogfooding')) {
                 if (hasUnexpectedError) {
@@ -395,7 +602,7 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
         existingSyncBlock.data = _objectSpread(_objectSpread({}, existingSyncBlock.data), {}, {
           sourceURL: sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url,
           sourceTitle: sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.title,
-          onSamePage: sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.onSamePage,
+          onSameDocument: sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.onSameDocument,
           sourceSubType: sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.subType
         });
         this.updateCache(existingSyncBlock);
@@ -439,8 +646,8 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
   }, {
     key: "subscribeToSyncBlock",
     value: function subscribeToSyncBlock(resourceId, localId, callback) {
-      var _this$dataProvider2,
-        _this3 = this;
+      var _this$dataProvider3,
+        _this6 = this;
       // Cancel any pending cache deletion for this resourceId.
       // This handles the case where a block is moved - the old component unmounts
       // (scheduling deletion) but the new component mounts and subscribes before
@@ -453,34 +660,52 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
 
       // add to subscriptions map
       var resourceSubscriptions = this.subscriptions.get(resourceId) || {};
+      var isNewResourceSubscription = Object.keys(resourceSubscriptions).length === 0;
       this.subscriptions.set(resourceId, _objectSpread(_objectSpread({}, resourceSubscriptions), {}, _defineProperty({}, localId, callback)));
 
       // New subscription means new reference synced block is added to the document
       this.isCacheDirty = true;
+
+      // Notify listeners if this is a new resource subscription
+      if (isNewResourceSubscription) {
+        this.notifySubscriptionChangeListeners();
+      }
       var syncBlockNode = createSyncBlockNode(localId, resourceId);
 
       // call the callback immediately if we have cached data
       // 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);
+      var cachedData = this.getFromCache(resourceId) || ((_this$dataProvider3 = this.dataProvider) === null || _this$dataProvider3 === void 0 || (_this$dataProvider3 = _this$dataProvider3.getNodeDataFromCache(syncBlockNode)) === null || _this$dataProvider3 === void 0 ? void 0 : _this$dataProvider3.data);
       if (cachedData) {
         callback(cachedData);
       } else {
         this.fetchSyncBlocksData([syncBlockNode]).catch(function (error) {
-          var _this3$fireAnalyticsE;
+          var _this6$fireAnalyticsE;
           logException(error, {
             location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'
           });
-          (_this3$fireAnalyticsE = _this3.fireAnalyticsEvent) === null || _this3$fireAnalyticsE === void 0 || _this3$fireAnalyticsE.call(_this3, fetchErrorPayload(error.message, resourceId));
+          (_this6$fireAnalyticsE = _this6.fireAnalyticsEvent) === null || _this6$fireAnalyticsE === void 0 || _this6$fireAnalyticsE.call(_this6, fetchErrorPayload(error.message, resourceId));
         });
       }
+
+      // Set up GraphQL subscription if real-time subscriptions are enabled
+      if (this.useRealTimeSubscriptions) {
+        this.setupGraphQLSubscription(resourceId);
+      }
       return function () {
-        var resourceSubscriptions = _this3.subscriptions.get(resourceId);
+        var resourceSubscriptions = _this6.subscriptions.get(resourceId);
         if (resourceSubscriptions) {
           // Unsubscription means a reference synced block is removed from the document
-          _this3.isCacheDirty = true;
+          _this6.isCacheDirty = true;
           delete resourceSubscriptions[localId];
           if (Object.keys(resourceSubscriptions).length === 0) {
-            _this3.subscriptions.delete(resourceId);
+            _this6.subscriptions.delete(resourceId);
+
+            // Clean up GraphQL subscription when no more local subscribers
+            _this6.cleanupGraphQLSubscription(resourceId);
+
+            // Notify listeners that subscription was removed
+            _this6.notifySubscriptionChangeListeners();
+
             // Delay cache deletion to handle block moves (unmount/remount).
             // When a block is moved, the old component unmounts before the new one mounts.
             // By delaying deletion, we give the new component time to subscribe and
@@ -488,14 +713,14 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
             // TODO: EDITOR-4152 - Rework this logic
             var deletionTimeout = setTimeout(function () {
               // Only delete if still no subscribers (wasn't re-subscribed)
-              if (!_this3.subscriptions.has(resourceId)) {
-                _this3.deleteFromCache(resourceId);
+              if (!_this6.subscriptions.has(resourceId)) {
+                _this6.deleteFromCache(resourceId);
               }
-              _this3.pendingCacheDeletions.delete(resourceId);
+              _this6.pendingCacheDeletions.delete(resourceId);
             }, 1000);
-            _this3.pendingCacheDeletions.set(resourceId, deletionTimeout);
+            _this6.pendingCacheDeletions.set(resourceId, deletionTimeout);
           } else {
-            _this3.subscriptions.set(resourceId, resourceSubscriptions);
+            _this6.subscriptions.set(resourceId, resourceSubscriptions);
           }
         }
       };
@@ -504,7 +729,7 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
     key: "subscribeToSourceTitle",
     value: function subscribeToSourceTitle(node, callback) {
       var _cachedData$data,
-        _this4 = this;
+        _this7 = this;
       // check node is a sync block, as we only support sync block subscriptions
       if (node.type.name !== 'syncBlock') {
         return function () {};
@@ -524,13 +749,13 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
       var resourceSubscriptions = this.titleSubscriptions.get(resourceId) || {};
       this.titleSubscriptions.set(resourceId, _objectSpread(_objectSpread({}, resourceSubscriptions), {}, _defineProperty({}, localId, callback)));
       return function () {
-        var resourceSubscriptions = _this4.titleSubscriptions.get(resourceId);
+        var resourceSubscriptions = _this7.titleSubscriptions.get(resourceId);
         if (resourceSubscriptions) {
           delete resourceSubscriptions[localId];
           if (Object.keys(resourceSubscriptions).length === 0) {
-            _this4.titleSubscriptions.delete(resourceId);
+            _this7.titleSubscriptions.delete(resourceId);
           } else {
-            _this4.titleSubscriptions.set(resourceId, resourceSubscriptions);
+            _this7.titleSubscriptions.set(resourceId, resourceSubscriptions);
           }
         }
       };
@@ -551,11 +776,11 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
         }
         return this.subscribeToSyncBlock(resourceId, localId, callback);
       } catch (error) {
-        var _this$fireAnalyticsEv7;
+        var _this$fireAnalyticsEv4;
         logException(error, {
           location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'
         });
-        (_this$fireAnalyticsEv7 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv7 === void 0 || _this$fireAnalyticsEv7.call(this, fetchErrorPayload(error.message));
+        (_this$fireAnalyticsEv4 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv4 === void 0 || _this$fireAnalyticsEv4.call(this, fetchErrorPayload(error.message));
         return function () {};
       }
     }
@@ -579,12 +804,12 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
     key: "getProviderFactory",
     value: function getProviderFactory(resourceId) {
       if (!this.dataProvider) {
-        var _this$fireAnalyticsEv8;
+        var _this$fireAnalyticsEv5;
         var error = new Error('Data provider not set');
         logException(error, {
           location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'
         });
-        (_this$fireAnalyticsEv8 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv8 === void 0 || _this$fireAnalyticsEv8.call(this, fetchErrorPayload(error.message));
+        (_this$fireAnalyticsEv5 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv5 === void 0 || _this$fireAnalyticsEv5.call(this, fetchErrorPayload(error.message));
         return undefined;
       }
       var _this$dataProvider$ge = this.dataProvider.getSyncedBlockRendererProviderOptions(),
@@ -613,11 +838,11 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
         try {
           this.retrieveDynamicProviders(resourceId, providerFactory, providerCreator);
         } catch (error) {
-          var _this$fireAnalyticsEv9;
+          var _this$fireAnalyticsEv6;
           logException(error, {
             location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'
           });
-          (_this$fireAnalyticsEv9 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv9 === void 0 || _this$fireAnalyticsEv9.call(this, fetchErrorPayload(error.message, resourceId));
+          (_this$fireAnalyticsEv6 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv6 === void 0 || _this$fireAnalyticsEv6.call(this, fetchErrorPayload(error.message, resourceId));
         }
       }
       return providerFactory;
@@ -677,8 +902,8 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
         return;
       }
       if (!((_syncBlock$data2 = syncBlock.data) !== null && _syncBlock$data2 !== void 0 && _syncBlock$data2.sourceAri) || !((_syncBlock$data3 = syncBlock.data) !== null && _syncBlock$data3 !== void 0 && _syncBlock$data3.product)) {
-        var _this$fireAnalyticsEv0;
-        (_this$fireAnalyticsEv0 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv0 === void 0 || _this$fireAnalyticsEv0.call(this, fetchErrorPayload('Sync block source ari or product not found'));
+        var _this$fireAnalyticsEv7;
+        (_this$fireAnalyticsEv7 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv7 === void 0 || _this$fireAnalyticsEv7.call(this, fetchErrorPayload('Sync block source ari or product not found'));
         return;
       }
       var parentInfo = this.dataProvider.retrieveSyncBlockParentInfo((_syncBlock$data4 = syncBlock.data) === null || _syncBlock$data4 === void 0 ? void 0 : _syncBlock$data4.sourceAri, (_syncBlock$data5 = syncBlock.data) === null || _syncBlock$data5 === void 0 ? void 0 : _syncBlock$data5.product);
@@ -728,7 +953,7 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
     key: "flush",
     value: (function () {
       var _flush = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-        var success, blocks, _this$saveExperience, updateResult, _this$fireAnalyticsEv1, _this$saveExperience2, _this$fireAnalyticsEv10, _this$saveExperience3, _this$saveExperience4;
+        var success, blocks, _this$saveExperience, updateResult, _this$fireAnalyticsEv8, _this$saveExperience2, _this$fireAnalyticsEv9, _this$saveExperience3, _this$saveExperience4;
         return _regeneratorRuntime.wrap(function _callee3$(_context4) {
           while (1) switch (_context4.prev = _context4.next) {
             case 0:
@@ -752,19 +977,23 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
                   });
                 });
               });
+              if (fg('platform_synced_block_dogfooding')) {
+                _context4.next = 10;
+                break;
+              }
               if (!(blocks.length === 0)) {
-                _context4.next = 9;
+                _context4.next = 10;
                 break;
               }
               this.isCacheDirty = false;
               return _context4.abrupt("return", true);
-            case 9:
+            case 10:
               if (this.dataProvider) {
-                _context4.next = 11;
+                _context4.next = 12;
                 break;
               }
               throw new Error('Data provider not set');
-            case 11:
+            case 12:
               // 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
@@ -774,9 +1003,9 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
               if (fg('platform_synced_block_dogfooding')) {
                 (_this$saveExperience = this.saveExperience) === null || _this$saveExperience === void 0 || _this$saveExperience.start();
               }
-              _context4.next = 15;
+              _context4.next = 16;
               return this.dataProvider.updateReferenceData(blocks);
-            case 15:
+            case 16:
               updateResult = _context4.sent;
               if (!updateResult.success) {
                 success = false;
@@ -785,12 +1014,12 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
                     reason: updateResult.error || 'Failed to update reference synced blocks on the document'
                   });
                 }
-                (_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'));
+                (_this$fireAnalyticsEv8 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv8 === void 0 || _this$fireAnalyticsEv8.call(this, updateReferenceErrorPayload(updateResult.error || 'Failed to update reference synced blocks on the document'));
               }
-              _context4.next = 25;
+              _context4.next = 26;
               break;
-            case 19:
-              _context4.prev = 19;
+            case 20:
+              _context4.prev = 20;
               _context4.t0 = _context4["catch"](3);
               success = false;
               logException(_context4.t0, {
@@ -801,23 +1030,23 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
                   reason: _context4.t0.message
                 });
               }
-              (_this$fireAnalyticsEv10 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv10 === void 0 || _this$fireAnalyticsEv10.call(this, updateReferenceErrorPayload(_context4.t0.message));
-            case 25:
-              _context4.prev = 25;
+              (_this$fireAnalyticsEv9 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv9 === void 0 || _this$fireAnalyticsEv9.call(this, updateReferenceErrorPayload(_context4.t0.message));
+            case 26:
+              _context4.prev = 26;
               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_dogfooding')) {
                 (_this$saveExperience4 = this.saveExperience) === null || _this$saveExperience4 === void 0 || _this$saveExperience4.success();
               }
-              return _context4.finish(25);
-            case 28:
-              return _context4.abrupt("return", success);
+              return _context4.finish(26);
             case 29:
+              return _context4.abrupt("return", success);
+            case 30:
             case "end":
               return _context4.stop();
           }
-        }, _callee3, this, [[3, 19, 25, 28]]);
+        }, _callee3, this, [[3, 20, 26, 29]]);
       }));
       function flush() {
         return _flush.apply(this, arguments);
@@ -827,7 +1056,9 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
-      var _this$saveExperience5, _this$fetchExperience5, _this$fetchSourceInfo6;
+      var _this$saveExperience5, _this$fetchExperience5, _this$fetchSourceInfo2;
+      // Clean up all GraphQL subscriptions first
+      this.cleanupAllGraphQLSubscriptions();
       this.dataProvider = undefined;
       this.syncBlockCache.clear();
       this.subscriptions.clear();
@@ -837,6 +1068,8 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
       this.syncBlockSourceInfoRequests.clear();
       this.providerFactories.clear();
       this.isRefreshingSubscriptions = false;
+      this.useRealTimeSubscriptions = false;
+      this.subscriptionChangeListeners.clear();
       this.providerFactories.forEach(function (providerFactory) {
         providerFactory.destroy();
       });
@@ -847,7 +1080,7 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
       (_this$fetchExperience5 = this.fetchExperience) === null || _this$fetchExperience5 === void 0 || _this$fetchExperience5.abort({
         reason: 'editor-destroyed'
       });
-      (_this$fetchSourceInfo6 = this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo6 === void 0 || _this$fetchSourceInfo6.abort({
+      (_this$fetchSourceInfo2 = this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo2 === void 0 || _this$fetchSourceInfo2.abort({
         reason: 'editor-destroyed'
       });
       this.fireAnalyticsEvent = undefined;