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

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

@@ -3,7 +3,8 @@ import { logException } from '@atlaskit/editor-common/monitoring';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SyncBlockError } from '../common/types';
-import { fetchErrorPayload, getSourceInfoErrorPayload, updateReferenceErrorPayload } from '../utils/errorHandling';
+import { fetchErrorPayload, fetchSuccessPayload, getSourceInfoErrorPayload, updateReferenceErrorPayload } from '../utils/errorHandling';
+import { getFetchExperience, getFetchSourceInfoExperience, getSaveReferenceExperience } from '../utils/experienceTracking';
 import { resolveSyncBlockInstance } from '../utils/resolveSyncBlockInstance';
 import { parseResourceId } from '../utils/resourceId';
 import { createSyncBlockNode } from '../utils/utils';
@@ -14,17 +15,16 @@ import { createSyncBlockNode } from '../utils/utils';
 // Handles fetching source URL and title for sync blocks.
 // Can be used in both editor and renderer contexts.
 export class ReferenceSyncBlockStoreManager {
-  // 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)
 
   constructor(dataProvider) {
     // 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();
@@ -34,18 +34,96 @@ export class ReferenceSyncBlockStoreManager {
     this.syncBlockSourceInfoRequests = new Map();
     this.providerFactories = new Map();
     this.pendingCacheDeletions = new Map();
+    this.graphqlSubscriptions = new Map();
+    this.subscriptionChangeListeners = new Set();
   }
-  setFireAnalyticsEvent(fireAnalyticsEvent) {
-    this.fireAnalyticsEvent = fireAnalyticsEvent;
+
+  /**
+   * 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
+   */
+  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.
+   */
+  isRealTimeSubscriptionsEnabled() {
+    return this.useRealTimeSubscriptions;
+  }
+
+  /**
+   * Returns all resource IDs that are currently subscribed to.
+   * Used by React components to render subscription components.
+   */
+  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
+   */
+  onSubscriptionsChanged(listener) {
+    this.subscriptionChangeListeners.add(listener);
+    return () => {
+      this.subscriptionChangeListeners.delete(listener);
+    };
+  }
+
+  /**
+   * Notifies all subscription change listeners.
+   */
+  notifySubscriptionChangeListeners() {
+    this.subscriptionChangeListeners.forEach(listener => {
+      try {
+        listener();
+      } catch (error) {
+        var _this$fireAnalyticsEv;
+        logException(error, {
+          location: 'editor-synced-block-provider/referenceSyncBlockStoreManager/notifySubscriptionChangeListeners'
+        });
+        (_this$fireAnalyticsEv = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv === void 0 ? void 0 : _this$fireAnalyticsEv.call(this, fetchErrorPayload(error.message));
+      }
+    });
   }
-  setExperiences(fetchExperience, fetchSourceInfoExperience, saveExperience) {
-    // don't reset experiences after they have already been set
-    if (!this.fetchExperience || !this.fetchSourceInfoExperience || !this.saveExperience) {
-      this.fetchExperience = fetchExperience;
-      this.fetchSourceInfoExperience = fetchSourceInfoExperience;
-      this.saveExperience = saveExperience;
+
+  /**
+   * Handles incoming data from a GraphQL subscription.
+   * Called by React subscription components when they receive updates.
+   * @param syncBlockInstance - The updated sync block instance
+   */
+  handleSubscriptionUpdate(syncBlockInstance) {
+    if (!syncBlockInstance.resourceId) {
+      return;
+    }
+    const existingSyncBlock = this.getFromCache(syncBlockInstance.resourceId);
+    const resolvedSyncBlockInstance = existingSyncBlock ? resolveSyncBlockInstance(existingSyncBlock, syncBlockInstance) : syncBlockInstance;
+    this.updateCache(resolvedSyncBlockInstance);
+    if (!syncBlockInstance.error) {
+      this.fetchSyncBlockSourceInfo(resolvedSyncBlockInstance.resourceId);
     }
   }
+  setFireAnalyticsEvent(fireAnalyticsEvent) {
+    this.fireAnalyticsEvent = fireAnalyticsEvent;
+    this.fetchExperience = getFetchExperience(fireAnalyticsEvent);
+    this.fetchSourceInfoExperience = getFetchSourceInfoExperience(fireAnalyticsEvent);
+    this.saveExperience = getSaveReferenceExperience(fireAnalyticsEvent);
+  }
   generateResourceIdForReference(sourceId) {
     if (!this.dataProvider) {
       throw new Error('Data provider not set');
@@ -63,9 +141,14 @@ export class ReferenceSyncBlockStoreManager {
 
   /**
    * Refreshes the subscriptions for all sync blocks.
+   * This is a fallback polling mechanism when real-time subscriptions are not enabled.
    * @returns {Promise<void>}
    */
   async refreshSubscriptions() {
+    // Skip polling refresh if real-time subscriptions are enabled
+    if (this.useRealTimeSubscriptions) {
+      return;
+    }
     if (this.isRefreshingSubscriptions) {
       return;
     }
@@ -81,30 +164,93 @@ export class ReferenceSyncBlockStoreManager {
       // this function will update the cache and call the subscriptions
       await this.fetchSyncBlocksData(syncBlocks);
     } catch (error) {
+      var _this$fireAnalyticsEv2;
       logException(error, {
         location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'
       });
-      if (fg('platform_synced_block_dogfooding')) {
-        var _this$fetchExperience;
-        (_this$fetchExperience = this.fetchExperience) === null || _this$fetchExperience === void 0 ? void 0 : _this$fetchExperience.failure({
-          reason: error.message
-        });
-      } else {
-        var _this$fireAnalyticsEv;
-        (_this$fireAnalyticsEv = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv === void 0 ? void 0 : _this$fireAnalyticsEv.call(this, fetchErrorPayload(error.message));
-      }
+      (_this$fireAnalyticsEv2 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv2 === void 0 ? void 0 : _this$fireAnalyticsEv2.call(this, fetchErrorPayload(error.message));
     } finally {
       this.isRefreshingSubscriptions = false;
     }
   }
+
+  /**
+   * Sets up a GraphQL subscription for a specific block.
+   * @param resourceId - The resource ID of the block to subscribe to
+   */
+  setupGraphQLSubscription(resourceId) {
+    var _this$dataProvider2;
+    // 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;
+    }
+    const unsubscribe = this.dataProvider.subscribeToBlockUpdates(resourceId, syncBlockInstance => {
+      // Handle the subscription update
+      this.handleGraphQLSubscriptionUpdate(syncBlockInstance);
+    }, error => {
+      var _this$fireAnalyticsEv3;
+      logException(error, {
+        location: 'editor-synced-block-provider/referenceSyncBlockStoreManager/graphql-subscription'
+      });
+      (_this$fireAnalyticsEv3 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv3 === void 0 ? void 0 : _this$fireAnalyticsEv3.call(this, fetchErrorPayload(error.message));
+    });
+    if (unsubscribe) {
+      this.graphqlSubscriptions.set(resourceId, unsubscribe);
+    }
+  }
+
+  /**
+   * Handles updates received from GraphQL subscriptions.
+   * @param syncBlockInstance - The updated sync block instance
+   */
+  handleGraphQLSubscriptionUpdate(syncBlockInstance) {
+    if (!syncBlockInstance.resourceId) {
+      return;
+    }
+    const existingSyncBlock = this.getFromCache(syncBlockInstance.resourceId);
+    const 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
+   */
+  cleanupGraphQLSubscription(resourceId) {
+    const unsubscribe = this.graphqlSubscriptions.get(resourceId);
+    if (unsubscribe) {
+      unsubscribe();
+      this.graphqlSubscriptions.delete(resourceId);
+    }
+  }
+
+  /**
+   * Sets up GraphQL subscriptions for all currently subscribed blocks.
+   */
+  setupGraphQLSubscriptionsForAllBlocks() {
+    for (const resourceId of this.subscriptions.keys()) {
+      this.setupGraphQLSubscription(resourceId);
+    }
+  }
+
+  /**
+   * Cleans up all GraphQL subscriptions.
+   */
+  cleanupAllGraphQLSubscriptions() {
+    for (const unsubscribe of this.graphqlSubscriptions.values()) {
+      unsubscribe();
+    }
+    this.graphqlSubscriptions.clear();
+  }
   fetchSyncBlockSourceInfo(resourceId) {
     try {
       if (!resourceId || !this.dataProvider) {
-        // make sure experience has been started before throwing error
-        if (fg('platform_synced_block_dogfooding')) {
-          var _this$fetchSourceInfo;
-          (_this$fetchSourceInfo = this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo === void 0 ? void 0 : _this$fetchSourceInfo.start({});
-        }
         throw new Error('Data provider or resourceId not set');
       }
       if (fg('platform_synced_block_dogfooding')) {
@@ -117,10 +263,6 @@ export class ReferenceSyncBlockStoreManager {
       }
       const existingSyncBlock = this.getFromCache(resourceId);
       if (!existingSyncBlock) {
-        if (fg('platform_synced_block_dogfooding')) {
-          var _this$fetchSourceInfo2;
-          (_this$fetchSourceInfo2 = this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo2 === void 0 ? void 0 : _this$fetchSourceInfo2.start({});
-        }
         throw new Error('No existing sync block to fetch source info for');
       }
       const {
@@ -129,7 +271,7 @@ export class ReferenceSyncBlockStoreManager {
         blockInstanceId,
         sourceURL,
         sourceTitle,
-        onSamePage,
+        onSameDocument,
         sourceSubType
       } = existingSyncBlock.data || {};
       // skip if source URL and title are already present
@@ -140,38 +282,30 @@ export class ReferenceSyncBlockStoreManager {
             url: sourceURL,
             subType: sourceSubType,
             sourceAri: sourceAri || '',
-            onSamePage,
+            onSameDocument,
             productType: product
           });
         } else {
           return Promise.resolve(undefined);
         }
       }
-
-      // only start experience if there is data to fetch
-      if (fg('platform_synced_block_dogfooding')) {
-        var _this$fetchSourceInfo3;
-        (_this$fetchSourceInfo3 = this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo3 === void 0 ? void 0 : _this$fetchSourceInfo3.start({});
-      }
       if (!sourceAri || !product || !blockInstanceId) {
-        if (fg('platform_synced_block_dogfooding')) {
-          var _this$fetchSourceInfo4;
-          (_this$fetchSourceInfo4 = this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo4 === void 0 ? void 0 : _this$fetchSourceInfo4.failure({
-            reason: 'SourceAri, product or blockInstanceId missing'
-          });
-        } else {
-          var _this$fireAnalyticsEv2;
-          (_this$fireAnalyticsEv2 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv2 === void 0 ? void 0 : _this$fireAnalyticsEv2.call(this, getSourceInfoErrorPayload('SourceAri, product or blockInstanceId missing'));
-        }
+        var _this$fireAnalyticsEv4;
+        (_this$fireAnalyticsEv4 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv4 === void 0 ? void 0 : _this$fireAnalyticsEv4.call(this, getSourceInfoErrorPayload('SourceAri, product or blockInstanceId missing', resourceId));
         return Promise.resolve(undefined);
       }
+      if (fg('platform_synced_block_dogfooding')) {
+        var _this$fetchSourceInfo;
+        (_this$fetchSourceInfo = this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo === void 0 ? void 0 : _this$fetchSourceInfo.start({});
+      }
       const sourceInfoPromise = this.dataProvider.fetchSyncBlockSourceInfo(blockInstanceId, sourceAri, product, this.fireAnalyticsEvent).then(sourceInfo => {
         if (!sourceInfo) {
           if (fg('platform_synced_block_dogfooding')) {
-            var _this$fetchSourceInfo5;
-            (_this$fetchSourceInfo5 = this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo5 === void 0 ? void 0 : _this$fetchSourceInfo5.failure({
+            var _this$fetchSourceInfo2, _this$fireAnalyticsEv5;
+            (_this$fetchSourceInfo2 = this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo2 === void 0 ? void 0 : _this$fetchSourceInfo2.failure({
               reason: 'No source info returned'
             });
+            (_this$fireAnalyticsEv5 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv5 === void 0 ? void 0 : _this$fireAnalyticsEv5.call(this, getSourceInfoErrorPayload('No source info returned', resourceId));
           }
           return undefined;
         }
@@ -181,26 +315,26 @@ export class ReferenceSyncBlockStoreManager {
         }
         if (fg('platform_synced_block_dogfooding')) {
           if (sourceInfo.title && sourceInfo.url) {
-            var _this$fetchSourceInfo6;
-            (_this$fetchSourceInfo6 = this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo6 === void 0 ? void 0 : _this$fetchSourceInfo6.success();
+            var _this$fetchSourceInfo3;
+            (_this$fetchSourceInfo3 = this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo3 === void 0 ? void 0 : _this$fetchSourceInfo3.success();
           } else {
-            var _this$fetchSourceInfo7;
-            (_this$fetchSourceInfo7 = this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo7 === void 0 ? void 0 : _this$fetchSourceInfo7.failure({
+            var _this$fetchSourceInfo4, _this$fireAnalyticsEv6;
+            (_this$fetchSourceInfo4 = this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo4 === void 0 ? void 0 : _this$fetchSourceInfo4.failure({
               reason: 'Missing title or url'
             });
+            (_this$fireAnalyticsEv6 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv6 === void 0 ? void 0 : _this$fireAnalyticsEv6.call(this, getSourceInfoErrorPayload('Missing title or url', resourceId));
           }
           return sourceInfo;
         }
       }).catch(error => {
+        var _this$fireAnalyticsEv7;
         if (fg('platform_synced_block_dogfooding')) {
-          var _this$fetchSourceInfo8;
-          (_this$fetchSourceInfo8 = this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo8 === void 0 ? void 0 : _this$fetchSourceInfo8.failure({
+          var _this$fetchSourceInfo5;
+          (_this$fetchSourceInfo5 = this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo5 === void 0 ? void 0 : _this$fetchSourceInfo5.failure({
             reason: error.message
           });
-        } else {
-          var _this$fireAnalyticsEv3;
-          (_this$fireAnalyticsEv3 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv3 === void 0 ? void 0 : _this$fireAnalyticsEv3.call(this, getSourceInfoErrorPayload(error.message));
         }
+        (_this$fireAnalyticsEv7 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv7 === void 0 ? void 0 : _this$fireAnalyticsEv7.call(this, getSourceInfoErrorPayload(error.message, resourceId));
         return undefined;
       }).finally(() => {
         if (fg('platform_synced_block_dogfooding')) {
@@ -216,18 +350,11 @@ export class ReferenceSyncBlockStoreManager {
         this.syncBlockSourceInfoRequestsOld.set(resourceId, true);
       }
     } catch (error) {
+      var _this$fireAnalyticsEv8;
       logException(error, {
         location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'
       });
-      if (fg('platform_synced_block_dogfooding')) {
-        var _this$fetchSourceInfo9;
-        (_this$fetchSourceInfo9 = this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo9 === void 0 ? void 0 : _this$fetchSourceInfo9.failure({
-          reason: error.message
-        });
-      } else {
-        var _this$fireAnalyticsEv4;
-        (_this$fireAnalyticsEv4 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv4 === void 0 ? void 0 : _this$fireAnalyticsEv4.call(this, getSourceInfoErrorPayload(error.message));
-      }
+      (_this$fireAnalyticsEv8 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv8 === void 0 ? void 0 : _this$fireAnalyticsEv8.call(this, getSourceInfoErrorPayload(error.message, resourceId));
     }
     return Promise.resolve(undefined);
   }
@@ -257,36 +384,28 @@ export class ReferenceSyncBlockStoreManager {
     if (nodesToFetch.length === 0) {
       return;
     }
-
-    // only start fetch experience if there is data to fetch
-    if (fg('platform_synced_block_dogfooding')) {
-      var _this$fetchExperience2;
-      (_this$fetchExperience2 = this.fetchExperience) === null || _this$fetchExperience2 === void 0 ? void 0 : _this$fetchExperience2.start({});
-    }
     if (!this.dataProvider) {
       throw new Error('Data provider not set');
     }
     nodesToFetch.forEach(node => {
       this.syncBlockFetchDataRequests.set(node.attrs.resourceId, true);
     });
+    if (fg('platform_synced_block_dogfooding')) {
+      var _this$fetchExperience;
+      (_this$fetchExperience = this.fetchExperience) === null || _this$fetchExperience === void 0 ? void 0 : _this$fetchExperience.start({});
+    }
     const data = await this.dataProvider.fetchNodesData(nodesToFetch).finally(() => {
       nodesToFetch.forEach(node => {
         this.syncBlockFetchDataRequests.delete(node.attrs.resourceId);
       });
     });
     const resolvedData = [];
-    const successfulFetched = [];
-    const failedFetch = [];
+    let hasUnexpectedError = false;
+    let hasExpectedError = false;
     data.forEach(syncBlockInstance => {
       if (!syncBlockInstance.resourceId) {
-        if (fg('platform_synced_block_dogfooding')) {
-          failedFetch.push({
-            reason: syncBlockInstance.error || 'Returned sync block instance does not have resource id'
-          });
-        } else {
-          var _this$fireAnalyticsEv5;
-          (_this$fireAnalyticsEv5 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv5 === void 0 ? void 0 : _this$fireAnalyticsEv5.call(this, fetchErrorPayload(syncBlockInstance.error || 'Returned sync block instance does not have resource id'));
-        }
+        var _this$fireAnalyticsEv9;
+        (_this$fireAnalyticsEv9 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv9 === void 0 ? void 0 : _this$fireAnalyticsEv9.call(this, fetchErrorPayload(syncBlockInstance.error || 'Returned sync block instance does not have resource id'));
         return;
       }
       const existingSyncBlock = this.getFromCache(syncBlockInstance.resourceId);
@@ -294,36 +413,34 @@ export class ReferenceSyncBlockStoreManager {
       this.updateCache(resolvedSyncBlockInstance);
       resolvedData.push(resolvedSyncBlockInstance);
       if (syncBlockInstance.error) {
-        if (fg('platform_synced_block_dogfooding')) {
-          failedFetch.push({
-            reason: syncBlockInstance.error,
-            resourceId: syncBlockInstance.resourceId
-          });
-        } else {
-          var _this$fireAnalyticsEv6;
-          (_this$fireAnalyticsEv6 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv6 === void 0 ? void 0 : _this$fireAnalyticsEv6.call(this, fetchErrorPayload(syncBlockInstance.error));
+        var _this$fireAnalyticsEv0;
+        (_this$fireAnalyticsEv0 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv0 === void 0 ? void 0 : _this$fireAnalyticsEv0.call(this, fetchErrorPayload(syncBlockInstance.error, syncBlockInstance.resourceId));
+        if (syncBlockInstance.error === SyncBlockError.NotFound || syncBlockInstance.error === SyncBlockError.Forbidden) {
+          hasExpectedError = true;
+        } else if (syncBlockInstance.error) {
+          hasUnexpectedError = true;
         }
         return;
+      } else if (fg('platform_synced_block_dogfooding')) {
+        var _this$fireAnalyticsEv1, _syncBlockInstance$da, _syncBlockInstance$da2;
+        (_this$fireAnalyticsEv1 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv1 === void 0 ? void 0 : _this$fireAnalyticsEv1.call(this, 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));
       }
-      successfulFetched.push(syncBlockInstance.resourceId);
       this.fetchSyncBlockSourceInfo(resolvedSyncBlockInstance.resourceId);
     });
     if (fg('platform_synced_block_dogfooding')) {
-      if (data.every(syncBlockInstance => syncBlockInstance.resourceId && !syncBlockInstance.error)) {
+      if (hasUnexpectedError) {
+        var _this$fetchExperience2;
+        (_this$fetchExperience2 = this.fetchExperience) === null || _this$fetchExperience2 === void 0 ? void 0 : _this$fetchExperience2.failure({
+          reason: 'Unexpected error during fetch'
+        });
+      } else if (hasExpectedError) {
         var _this$fetchExperience3;
-        (_this$fetchExperience3 = this.fetchExperience) === null || _this$fetchExperience3 === void 0 ? void 0 : _this$fetchExperience3.success({
-          metadata: {
-            successfulFetched
-          }
+        (_this$fetchExperience3 = this.fetchExperience) === null || _this$fetchExperience3 === void 0 ? void 0 : _this$fetchExperience3.abort({
+          reason: 'Expected error: NotFound or PermissionDenied'
         });
       } else {
         var _this$fetchExperience4;
-        (_this$fetchExperience4 = this.fetchExperience) === null || _this$fetchExperience4 === void 0 ? void 0 : _this$fetchExperience4.failure({
-          metadata: {
-            successfulFetched,
-            failedFetch
-          }
-        });
+        (_this$fetchExperience4 = this.fetchExperience) === null || _this$fetchExperience4 === void 0 ? void 0 : _this$fetchExperience4.success();
       }
     }
   }
@@ -335,7 +452,7 @@ export class ReferenceSyncBlockStoreManager {
         ...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);
@@ -371,7 +488,7 @@ export class ReferenceSyncBlockStoreManager {
     this.providerFactories.delete(resourceId);
   }
   subscribeToSyncBlock(resourceId, localId, callback) {
-    var _this$dataProvider2, _this$dataProvider2$g;
+    var _this$dataProvider3, _this$dataProvider3$g;
     // 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
@@ -384,6 +501,7 @@ export class ReferenceSyncBlockStoreManager {
 
     // add to subscriptions map
     const resourceSubscriptions = this.subscriptions.get(resourceId) || {};
+    const isNewResourceSubscription = Object.keys(resourceSubscriptions).length === 0;
     this.subscriptions.set(resourceId, {
       ...resourceSubscriptions,
       [localId]: callback
@@ -391,29 +509,32 @@ export class ReferenceSyncBlockStoreManager {
 
     // 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();
+    }
     const 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
-    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);
+    const cachedData = this.getFromCache(resourceId) || ((_this$dataProvider3 = this.dataProvider) === null || _this$dataProvider3 === void 0 ? void 0 : (_this$dataProvider3$g = _this$dataProvider3.getNodeDataFromCache(syncBlockNode)) === null || _this$dataProvider3$g === void 0 ? void 0 : _this$dataProvider3$g.data);
     if (cachedData) {
       callback(cachedData);
     } else {
       this.fetchSyncBlocksData([syncBlockNode]).catch(error => {
+        var _this$fireAnalyticsEv10;
         logException(error, {
           location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'
         });
-        if (fg('platform_synced_block_dogfooding')) {
-          var _this$fetchExperience5;
-          (_this$fetchExperience5 = this.fetchExperience) === null || _this$fetchExperience5 === void 0 ? void 0 : _this$fetchExperience5.failure({
-            reason: error.message
-          });
-        } else {
-          var _this$fireAnalyticsEv7;
-          (_this$fireAnalyticsEv7 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv7 === void 0 ? void 0 : _this$fireAnalyticsEv7.call(this, fetchErrorPayload(error.message));
-        }
+        (_this$fireAnalyticsEv10 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv10 === void 0 ? void 0 : _this$fireAnalyticsEv10.call(this, fetchErrorPayload(error.message, resourceId));
       });
     }
+
+    // Set up GraphQL subscription if real-time subscriptions are enabled
+    if (this.useRealTimeSubscriptions) {
+      this.setupGraphQLSubscription(resourceId);
+    }
     return () => {
       const resourceSubscriptions = this.subscriptions.get(resourceId);
       if (resourceSubscriptions) {
@@ -422,6 +543,13 @@ export class ReferenceSyncBlockStoreManager {
         delete resourceSubscriptions[localId];
         if (Object.keys(resourceSubscriptions).length === 0) {
           this.subscriptions.delete(resourceId);
+
+          // Clean up GraphQL subscription when no more local subscribers
+          this.cleanupGraphQLSubscription(resourceId);
+
+          // Notify listeners that subscription was removed
+          this.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
@@ -492,11 +620,11 @@ export class ReferenceSyncBlockStoreManager {
       }
       return this.subscribeToSyncBlock(resourceId, localId, callback);
     } catch (error) {
-      var _this$fireAnalyticsEv8;
+      var _this$fireAnalyticsEv11;
       logException(error, {
         location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'
       });
-      (_this$fireAnalyticsEv8 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv8 === void 0 ? void 0 : _this$fireAnalyticsEv8.call(this, fetchErrorPayload(error.message));
+      (_this$fireAnalyticsEv11 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv11 === void 0 ? void 0 : _this$fireAnalyticsEv11.call(this, fetchErrorPayload(error.message));
       return () => {};
     }
   }
@@ -516,12 +644,12 @@ export class ReferenceSyncBlockStoreManager {
   }
   getProviderFactory(resourceId) {
     if (!this.dataProvider) {
-      var _this$fireAnalyticsEv9;
+      var _this$fireAnalyticsEv12;
       const error = new Error('Data provider not set');
       logException(error, {
         location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'
       });
-      (_this$fireAnalyticsEv9 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv9 === void 0 ? void 0 : _this$fireAnalyticsEv9.call(this, fetchErrorPayload(error.message));
+      (_this$fireAnalyticsEv12 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv12 === void 0 ? void 0 : _this$fireAnalyticsEv12.call(this, fetchErrorPayload(error.message));
       return undefined;
     }
     const {
@@ -551,11 +679,11 @@ export class ReferenceSyncBlockStoreManager {
       try {
         this.retrieveDynamicProviders(resourceId, providerFactory, providerCreator);
       } catch (error) {
-        var _this$fireAnalyticsEv0;
+        var _this$fireAnalyticsEv13;
         logException(error, {
           location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'
         });
-        (_this$fireAnalyticsEv0 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv0 === void 0 ? void 0 : _this$fireAnalyticsEv0.call(this, fetchErrorPayload(error.message));
+        (_this$fireAnalyticsEv13 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv13 === void 0 ? void 0 : _this$fireAnalyticsEv13.call(this, fetchErrorPayload(error.message, resourceId));
       }
     }
     return providerFactory;
@@ -610,9 +738,12 @@ export class ReferenceSyncBlockStoreManager {
       return;
     }
     const syncBlock = this.getFromCache(resourceId);
-    if (!syncBlock || !((_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$fireAnalyticsEv1;
-      (_this$fireAnalyticsEv1 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv1 === void 0 ? void 0 : _this$fireAnalyticsEv1.call(this, fetchErrorPayload('Sync block or source ari or product not found'));
+    if (!syncBlock) {
+      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$fireAnalyticsEv14;
+      (_this$fireAnalyticsEv14 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv14 === void 0 ? void 0 : _this$fireAnalyticsEv14.call(this, fetchErrorPayload('Sync block source ari or product not found'));
       return;
     }
     const 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);
@@ -677,13 +808,13 @@ export class ReferenceSyncBlockStoreManager {
           });
         });
       });
-      if (blocks.length === 0) {
-        this.isCacheDirty = false;
-        return true;
-      }
-      if (fg('platform_synced_block_dogfooding')) {
-        var _this$saveExperience;
-        (_this$saveExperience = this.saveExperience) === null || _this$saveExperience === void 0 ? void 0 : _this$saveExperience.start();
+      if (!fg('platform_synced_block_dogfooding')) {
+        // It's possible that the last reference block on the document was just deleted,
+        // we still want to write to BE to update reference count
+        if (blocks.length === 0) {
+          this.isCacheDirty = false;
+          return true;
+        }
       }
       if (!this.dataProvider) {
         throw new Error('Data provider not set');
@@ -695,20 +826,24 @@ export class ReferenceSyncBlockStoreManager {
       // is still making changes, the new changes might not be saved if they all happen
       // exactly at a time when the updateReferenceData is being executed asynchronously.
       this.isCacheDirty = false;
+      if (fg('platform_synced_block_dogfooding')) {
+        var _this$saveExperience;
+        (_this$saveExperience = this.saveExperience) === null || _this$saveExperience === void 0 ? void 0 : _this$saveExperience.start();
+      }
       const updateResult = await this.dataProvider.updateReferenceData(blocks);
       if (!updateResult.success) {
+        var _this$fireAnalyticsEv15;
         success = false;
         if (fg('platform_synced_block_dogfooding')) {
           var _this$saveExperience2;
           (_this$saveExperience2 = this.saveExperience) === null || _this$saveExperience2 === void 0 ? void 0 : _this$saveExperience2.failure({
             reason: updateResult.error || 'Failed to update reference synced blocks on the document'
           });
-        } else {
-          var _this$fireAnalyticsEv10;
-          (_this$fireAnalyticsEv10 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv10 === void 0 ? void 0 : _this$fireAnalyticsEv10.call(this, updateReferenceErrorPayload(updateResult.error || 'Failed to update reference synced blocks on the document'));
         }
+        (_this$fireAnalyticsEv15 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv15 === void 0 ? void 0 : _this$fireAnalyticsEv15.call(this, updateReferenceErrorPayload(updateResult.error || 'Failed to update reference synced blocks on the document'));
       }
     } catch (error) {
+      var _this$fireAnalyticsEv16;
       success = false;
       logException(error, {
         location: 'editor-synced-block-provider/referenceSyncBlockStoreManager'
@@ -718,10 +853,8 @@ export class ReferenceSyncBlockStoreManager {
         (_this$saveExperience3 = this.saveExperience) === null || _this$saveExperience3 === void 0 ? void 0 : _this$saveExperience3.failure({
           reason: error.message
         });
-      } else {
-        var _this$fireAnalyticsEv11;
-        (_this$fireAnalyticsEv11 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv11 === void 0 ? void 0 : _this$fireAnalyticsEv11.call(this, updateReferenceErrorPayload(error.message));
       }
+      (_this$fireAnalyticsEv16 = this.fireAnalyticsEvent) === null || _this$fireAnalyticsEv16 === void 0 ? void 0 : _this$fireAnalyticsEv16.call(this, updateReferenceErrorPayload(error.message));
     } finally {
       if (!success) {
         // set isCacheDirty back to true for cases where it failed to update the reference synced blocks on the BE
@@ -734,6 +867,9 @@ export class ReferenceSyncBlockStoreManager {
     return success;
   }
   destroy() {
+    var _this$saveExperience5, _this$fetchExperience5, _this$fetchSourceInfo6;
+    // Clean up all GraphQL subscriptions first
+    this.cleanupAllGraphQLSubscriptions();
     this.dataProvider = undefined;
     this.syncBlockCache.clear();
     this.subscriptions.clear();
@@ -743,10 +879,21 @@ export class ReferenceSyncBlockStoreManager {
     this.syncBlockSourceInfoRequests.clear();
     this.providerFactories.clear();
     this.isRefreshingSubscriptions = false;
+    this.useRealTimeSubscriptions = false;
+    this.subscriptionChangeListeners.clear();
     this.providerFactories.forEach(providerFactory => {
       providerFactory.destroy();
     });
     this.providerFactories.clear();
+    (_this$saveExperience5 = this.saveExperience) === null || _this$saveExperience5 === void 0 ? void 0 : _this$saveExperience5.abort({
+      reason: 'editor-destroyed'
+    });
+    (_this$fetchExperience5 = this.fetchExperience) === null || _this$fetchExperience5 === void 0 ? void 0 : _this$fetchExperience5.abort({
+      reason: 'editor-destroyed'
+    });
+    (_this$fetchSourceInfo6 = this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo6 === void 0 ? void 0 : _this$fetchSourceInfo6.abort({
+      reason: 'editor-destroyed'
+    });
     this.fireAnalyticsEvent = undefined;
   }
 }