@atlaskit/editor-synced-block-provider 12.0.6 → 12.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-synced-block-provider
 
+## 12.1.0
+
+### Minor Changes
+
+- [`90712d67e0e35`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/90712d67e0e35) -
+  Add APIs and renderer support for unpublished same-page synced block references behind
+  editor-synced-block-same-page-sync.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.0.7
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.0.6
 
 ### Patch Changes

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

@@ -8,14 +8,17 @@ exports.ReferenceSyncBlockStoreManager = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 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 _monitoring = require("@atlaskit/editor-common/monitoring");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _types = require("../common/types");
 var _errorHandling = require("../utils/errorHandling");
 var _experienceTracking = require("../utils/experienceTracking");
+var _resourceId = require("../utils/resourceId");
 var _resolveSyncBlockInstance = require("../utils/resolveSyncBlockInstance");
 var _utils = require("../utils/utils");
 var _syncBlockBatchFetcher = require("./syncBlockBatchFetcher");
@@ -44,7 +47,7 @@ var CACHE_DELETION_MAX_RESCHEDULES = 10;
 // Handles fetching source URL and title for sync blocks.
 // Can be used in both editor and renderer contexts.
 var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
-  function ReferenceSyncBlockStoreManager(dataProvider, viewMode) {
+  function ReferenceSyncBlockStoreManager(dataProvider, viewMode, sourceManager) {
     var _this = this,
       _this$dataProvider;
     (0, _classCallCheck2.default)(this, ReferenceSyncBlockStoreManager);
@@ -69,6 +72,7 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
     (0, _defineProperty2.default)(this, "isDestroyed", false);
     this.dataProvider = dataProvider;
     this.viewMode = viewMode;
+    this.sourceManager = sourceManager;
     this.syncBlockFetchDataRequests = new Map();
     this.syncBlockSourceInfoRequests = new Map();
     this.newlyAddedSyncBlocks = new Set();
@@ -245,6 +249,10 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
     key: "getInitialSyncBlockData",
     value: function getInitialSyncBlockData(resourceId) {
       var _this$dataProvider2;
+      var localReference = this.getLocalReference(resourceId);
+      if (localReference) {
+        return localReference;
+      }
       var syncBlockNode = (0, _utils.createSyncBlockNode)('', resourceId);
       var providerData = (_this$dataProvider2 = this.dataProvider) === null || _this$dataProvider2 === void 0 || (_this$dataProvider2 = _this$dataProvider2.getNodeDataFromCache(syncBlockNode)) === null || _this$dataProvider2 === void 0 ? void 0 : _this$dataProvider2.data;
       if (providerData) {
@@ -254,6 +262,41 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
       }
       return this.getFromSessionCache(resourceId);
     }
+  }, {
+    key: "getSameDocumentReferenceParts",
+    value: function getSameDocumentReferenceParts(resourceId) {
+      var parsed = (0, _resourceId.parseResourceId)(resourceId);
+      if (!parsed || !this.dataProvider || this.dataProvider.generateResourceIdForReference(parsed.uuid) !== resourceId) {
+        return undefined;
+      }
+      return parsed;
+    }
+  }, {
+    key: "getLocalReference",
+    value: function getLocalReference(resourceId) {
+      var _this$sourceManager;
+      if (!(0, _isExperimentEnabled.isExperimentEnabled)('editor-synced-block-same-page-sync')) {
+        return undefined;
+      }
+      var parsed = this.getSameDocumentReferenceParts(resourceId);
+      if (!parsed) {
+        return undefined;
+      }
+      var snapshot = (_this$sourceManager = this.sourceManager) === null || _this$sourceManager === void 0 ? void 0 : _this$sourceManager.getLocalSourceSnapshot(parsed.uuid);
+      if (!snapshot) {
+        return undefined;
+      }
+      return {
+        resourceId: resourceId,
+        data: _objectSpread(_objectSpread({}, snapshot), {}, {
+          content: (0, _toConsumableArray2.default)(snapshot.content)
+        }),
+        localSameDocumentSource: {
+          sourceBlockInstanceId: snapshot.blockInstanceId,
+          sourceProduct: parsed.product
+        }
+      };
+    }
   }, {
     key: "normalizeReferenceData",
     value: function normalizeReferenceData(syncBlock) {
@@ -921,7 +964,35 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
   }, {
     key: "subscribeToSyncBlock",
     value: function subscribeToSyncBlock(resourceId, localId, callback) {
-      return this._subscriptionManager.subscribeToSyncBlock(resourceId, localId, callback);
+      var _this$sourceManager2,
+        _this9 = this;
+      var isSamePageSyncEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('editor-synced-block-same-page-sync');
+      var sameDocumentParts = isSamePageSyncEnabled ? this.getSameDocumentReferenceParts(resourceId) : undefined;
+      var localReference = isSamePageSyncEnabled ? this.getLocalReference(resourceId) : undefined;
+      var unsubscribeRemote = this._subscriptionManager.subscribeToSyncBlock(resourceId, localId, function (instance) {
+        if (!localReference) {
+          callback(instance);
+        }
+      });
+      var unsubscribeLocal = sameDocumentParts ? (_this$sourceManager2 = this.sourceManager) === null || _this$sourceManager2 === void 0 ? void 0 : _this$sourceManager2.subscribeToLocalSource(sameDocumentParts.uuid, function () {
+        var hadLocalReference = Boolean(localReference);
+        localReference = _this9.getLocalReference(resourceId);
+        if (localReference) {
+          callback(localReference);
+          return;
+        }
+        if (!hadLocalReference) {
+          return;
+        }
+        // Source left the document: keep the last local instance on screen
+        // and fetch the current backend value. Do not replay a remote
+        // value captured while the local source was authoritative.
+        _this9.debouncedBatchedFetchSyncBlocks(resourceId);
+      }) : undefined;
+      return function () {
+        unsubscribeLocal === null || unsubscribeLocal === void 0 || unsubscribeLocal();
+        unsubscribeRemote();
+      };
     }
   }, {
     key: "subscribeToSourceTitle",
@@ -942,7 +1013,7 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
         if (!localId || !resourceId) {
           throw new Error('Missing local id or resource id');
         }
-        return this._subscriptionManager.subscribeToSyncBlock(resourceId, localId, callback);
+        return this.subscribeToSyncBlock(resourceId, localId, callback);
       } catch (error) {
         var _this$fireAnalyticsEv7;
         // EDITOR-7860: benign not-ready/torn-down case — suppress both the
@@ -1010,7 +1081,7 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
     key: "flush",
     value: (function () {
       var _flush = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
-        var _this9 = this;
+        var _this0 = this;
         var success, syncedBlocksToFlush, _this$saveExperience, blocks, _iterator, _step, _loop, updateResult, _this$saveExperience2, _this$fireAnalyticsEv8, _this$saveExperience3, _this$fireAnalyticsEv9, _this$saveExperience4, _t2, _t3;
         return _regenerator.default.wrap(function (_context4) {
           while (1) switch (_context4.prev = _context4.next) {
@@ -1154,8 +1225,8 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
                 // Use setTimeout to avoid deep recursion and run queued flush asynchronously
                 // Note: flush() handles all exceptions internally and never rejects
                 this.queuedFlushTimeout = setTimeout(function () {
-                  _this9.queuedFlushTimeout = undefined;
-                  void _this9.flush();
+                  _this0.queuedFlushTimeout = undefined;
+                  void _this0.flush();
                 }, 0);
               }
               return _context4.finish(17);

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

@@ -5,18 +5,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SourceSyncBlockStoreManager = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 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 _monitoring = require("@atlaskit/editor-common/monitoring");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _types = require("../common/types");
 var _errorHandling = require("../utils/errorHandling");
 var _experienceTracking = require("../utils/experienceTracking");
 var _utils = require("../utils/utils");
+var _excluded = ["contentFragment", "isDirty"];
 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; }
@@ -42,6 +46,7 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
   function SourceSyncBlockStoreManager(dataProvider, viewMode, isLivePage) {
     var _this = this;
     (0, _classCallCheck2.default)(this, SourceSyncBlockStoreManager);
+    (0, _defineProperty2.default)(this, "localSourceSubscribers", new Map());
     (0, _defineProperty2.default)(this, "hasReceivedContentChange", false);
     /**
      * Promises for in-flight block creations, keyed by resourceId.
@@ -188,6 +193,7 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
           contentFragment: syncBlockNode.content,
           status: cachedBlock === null || cachedBlock === void 0 ? void 0 : cachedBlock.status
         }));
+        this.notifyLocalSource(resourceId);
         return true;
       } catch (error) {
         var _this$fireAnalyticsEv, _syncBlockNode$attrs2, _syncBlockNode$attrs3;
@@ -306,6 +312,7 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
                   var cachedData = _this2.syncBlockCache.get(result.resourceId);
                   if (cachedData) {
                     cachedData.isDirty = true;
+                    _this2.notifyLocalSource(result.resourceId);
                   }
                 }
               });
@@ -323,6 +330,7 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
                   var cachedData = _this2.syncBlockCache.get(result.resourceId);
                   if (cachedData && result.status) {
                     cachedData.status = result.status;
+                    _this2.notifyLocalSource(result.resourceId);
                   }
                   (_this2$fireAnalyticsE = _this2.fireAnalyticsEvent) === null || _this2$fireAnalyticsE === void 0 || _this2$fireAnalyticsE.call(_this2, (0, _errorHandling.updateSuccessPayload)(result.resourceId, false, (0, _utils.getSourceProductFromResourceIdSafe)(result.resourceId)));
                 }
@@ -407,6 +415,54 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
       var _this$syncBlockCache$;
       return (_this$syncBlockCache$ = this.syncBlockCache.get(resourceId)) === null || _this$syncBlockCache$ === void 0 ? void 0 : _this$syncBlockCache$.status;
     }
+  }, {
+    key: "getLocalSourceSnapshot",
+    value: function getLocalSourceSnapshot(resourceId) {
+      if (!(0, _isExperimentEnabled.isExperimentEnabled)('editor-synced-block-same-page-sync')) {
+        return undefined;
+      }
+      var cached = this.syncBlockCache.get(resourceId);
+      if (!cached || cached.status === 'deleted') {
+        return undefined;
+      }
+      var _contentFragment = cached.contentFragment,
+        _isDirty = cached.isDirty,
+        data = (0, _objectWithoutProperties2.default)(cached, _excluded);
+      return _objectSpread(_objectSpread({}, data), {}, {
+        content: (0, _toConsumableArray2.default)(data.content)
+      });
+    }
+  }, {
+    key: "subscribeToLocalSource",
+    value: function subscribeToLocalSource(resourceId, callback) {
+      var _this3 = this;
+      if (!(0, _isExperimentEnabled.isExperimentEnabled)('editor-synced-block-same-page-sync')) {
+        return function () {};
+      }
+      var subscribers = this.localSourceSubscribers.get(resourceId);
+      if (!subscribers) {
+        subscribers = new Set();
+        this.localSourceSubscribers.set(resourceId, subscribers);
+      }
+      subscribers.add(callback);
+      callback(this.getLocalSourceSnapshot(resourceId));
+      return function () {
+        var currentSubscribers = _this3.localSourceSubscribers.get(resourceId);
+        currentSubscribers === null || currentSubscribers === void 0 || currentSubscribers.delete(callback);
+        if ((currentSubscribers === null || currentSubscribers === void 0 ? void 0 : currentSubscribers.size) === 0) {
+          _this3.localSourceSubscribers.delete(resourceId);
+        }
+      };
+    }
+  }, {
+    key: "notifyLocalSource",
+    value: function notifyLocalSource(resourceId) {
+      var _this$localSourceSubs;
+      var snapshot = this.getLocalSourceSnapshot(resourceId);
+      (_this$localSourceSubs = this.localSourceSubscribers.get(resourceId)) === null || _this$localSourceSubs === void 0 || _this$localSourceSubs.forEach(function (callback) {
+        return callback(snapshot);
+      });
+    }
 
     /**
      *  Fires callback to insert node (if creation is successful) and clears pending creation data
@@ -453,6 +509,7 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
         var _this$fireAnalyticsEv6;
         // Delete the node from cache if fail to create so it's not flushed to BE
         this.syncBlockCache.delete(resourceId || '');
+        this.notifyLocalSource(resourceId);
         this.newSourceBlockResourceIds.delete(resourceId || '');
         // Creation failed, so there is no block to add content to — drop the
         // first-content tracking entry so a later unrelated edit cannot fire it.
@@ -486,10 +543,10 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
   }, {
     key: "registerConfirmationCallback",
     value: function registerConfirmationCallback(callback) {
-      var _this3 = this;
+      var _this4 = this;
       this.confirmationCallback = callback;
       return function () {
-        _this3.confirmationCallback = undefined;
+        _this4.confirmationCallback = undefined;
       };
     }
   }, {
@@ -529,7 +586,7 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
   }, {
     key: "createBodiedSyncBlockNode",
     value: function createBodiedSyncBlockNode(attrs, node, onCompletion, enrichment) {
-      var _this4 = this;
+      var _this5 = this;
       if (this.viewMode === 'view') {
         return;
       }
@@ -559,6 +616,7 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
         var cached = this.syncBlockCache.get(resourceId);
         if (cached) {
           cached.status = 'unpublished';
+          this.notifyLocalSource(resourceId);
         }
         this.creationCompletionCallbacks.set(resourceId, onCompletion);
         (_this$createExperienc = this.createExperience) === null || _this$createExperienc === void 0 || _this$createExperienc.start({});
@@ -569,29 +627,29 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
         }).then(function (result) {
           var resourceId = result.resourceId || '';
           if (resourceId && !result.error) {
-            var _this4$createExperien;
-            _this4.commitPendingCreation(true, resourceId);
-            (_this4$createExperien = _this4.createExperience) === null || _this4$createExperien === void 0 || _this4$createExperien.success();
+            var _this5$createExperien;
+            _this5.commitPendingCreation(true, resourceId);
+            (_this5$createExperien = _this5.createExperience) === null || _this5$createExperien === void 0 || _this5$createExperien.success();
           } else {
-            var _this4$createExperien2, _this4$fireAnalyticsE;
-            _this4.commitPendingCreation(false, resourceId);
-            (_this4$createExperien2 = _this4.createExperience) === null || _this4$createExperien2 === void 0 || _this4$createExperien2.failure({
+            var _this5$createExperien2, _this5$fireAnalyticsE;
+            _this5.commitPendingCreation(false, resourceId);
+            (_this5$createExperien2 = _this5.createExperience) === null || _this5$createExperien2 === void 0 || _this5$createExperien2.failure({
               reason: result.error || 'Failed to create bodied sync block'
             });
-            (_this4$fireAnalyticsE = _this4.fireAnalyticsEvent) === null || _this4$fireAnalyticsE === void 0 || _this4$fireAnalyticsE.call(_this4, (0, _errorHandling.createErrorPayload)(result.error || 'Failed to create bodied sync block', resourceId, (0, _utils.getSourceProductFromResourceIdSafe)(resourceId), (0, _errorHandling.buildErrorAttribution)(result.error, result.statusCode)));
+            (_this5$fireAnalyticsE = _this5.fireAnalyticsEvent) === null || _this5$fireAnalyticsE === void 0 || _this5$fireAnalyticsE.call(_this5, (0, _errorHandling.createErrorPayload)(result.error || 'Failed to create bodied sync block', resourceId, (0, _utils.getSourceProductFromResourceIdSafe)(resourceId), (0, _errorHandling.buildErrorAttribution)(result.error, result.statusCode)));
           }
         }).catch(function (error) {
-          var _this4$createExperien3, _this4$fireAnalyticsE2;
-          _this4.commitPendingCreation(false, resourceId);
+          var _this5$createExperien3, _this5$fireAnalyticsE2;
+          _this5.commitPendingCreation(false, resourceId);
           (0, _monitoring.logException)(error, {
             location: 'editor-synced-block-provider/sourceSyncBlockStoreManager'
           });
-          (_this4$createExperien3 = _this4.createExperience) === null || _this4$createExperien3 === void 0 || _this4$createExperien3.failure({
+          (_this5$createExperien3 = _this5.createExperience) === null || _this5$createExperien3 === void 0 || _this5$createExperien3.failure({
             reason: error.message
           });
-          (_this4$fireAnalyticsE2 = _this4.fireAnalyticsEvent) === null || _this4$fireAnalyticsE2 === void 0 || _this4$fireAnalyticsE2.call(_this4, (0, _errorHandling.createErrorPayload)(error.message, resourceId, (0, _utils.getSourceProductFromResourceIdSafe)(resourceId)));
+          (_this5$fireAnalyticsE2 = _this5.fireAnalyticsEvent) === null || _this5$fireAnalyticsE2 === void 0 || _this5$fireAnalyticsE2.call(_this5, (0, _errorHandling.createErrorPayload)(error.message, resourceId, (0, _utils.getSourceProductFromResourceIdSafe)(resourceId)));
         }).finally(function () {
-          _this4.pendingCreationPromises.delete(resourceId);
+          _this5.pendingCreationPromises.delete(resourceId);
         });
         this.pendingCreationPromises.set(resourceId, creationPromise);
       } catch (error) {
@@ -661,7 +719,7 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
     key: "delete",
     value: function () {
       var _delete2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(syncBlockIds, onDelete, onDeleteCompleted, reason, mechanism) {
-        var _this5 = this;
+        var _this6 = this;
         var _this$deleteExperienc, results, callback, isDeleteSuccessful, _this$deleteExperienc2, _this$deleteExperienc3, attribution, _t2;
         return _regenerator.default.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -680,7 +738,7 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
               throw new Error('Data provider not set');
             case 2:
               syncBlockIds.forEach(function (Ids) {
-                _this5.setPendingDeletion(Ids, true);
+                _this6.setPendingDeletion(Ids, true);
               });
               (_this$deleteExperienc = this.deleteExperience) === null || _this$deleteExperienc === void 0 || _this$deleteExperienc.start({});
               _context2.next = 3;
@@ -698,24 +756,25 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
                 // Emit before the cache entry is deleted below, so blockInstanceId
                 // is still available to emitDeleteSuccess.
                 results.forEach(function (result) {
-                  _this5.emitDeleteSuccess(result.resourceId, reason, mechanism);
+                  _this6.emitDeleteSuccess(result.resourceId, reason, mechanism);
                 });
                 callback = function callback(Ids) {
-                  return _this5.syncBlockCache.delete(Ids.resourceId);
+                  _this6.syncBlockCache.delete(Ids.resourceId);
+                  _this6.notifyLocalSource(Ids.resourceId);
                 };
                 this.clearPendingDeletion();
                 (_this$deleteExperienc2 = this.deleteExperience) === null || _this$deleteExperienc2 === void 0 || _this$deleteExperienc2.success();
               } else {
                 callback = function callback(Ids) {
-                  _this5.setPendingDeletion(Ids, false);
+                  _this6.setPendingDeletion(Ids, false);
                 };
                 (_this$deleteExperienc3 = this.deleteExperience) === null || _this$deleteExperienc3 === void 0 || _this$deleteExperienc3.failure();
                 results.forEach(function (result) {
                   if (result.success) {
-                    _this5.emitDeleteSuccess(result.resourceId, reason, mechanism);
+                    _this6.emitDeleteSuccess(result.resourceId, reason, mechanism);
                   } else {
-                    var _this5$fireAnalyticsE;
-                    (_this5$fireAnalyticsE = _this5.fireAnalyticsEvent) === null || _this5$fireAnalyticsE === void 0 || _this5$fireAnalyticsE.call(_this5, (0, _errorHandling.deleteErrorPayload)(result.error || 'Failed to delete synced block', result.resourceId, (0, _utils.getSourceProductFromResourceIdSafe)(result.resourceId), (0, _errorHandling.buildErrorAttribution)(result.error, result.statusCode)));
+                    var _this6$fireAnalyticsE;
+                    (_this6$fireAnalyticsE = _this6.fireAnalyticsEvent) === null || _this6$fireAnalyticsE === void 0 || _this6$fireAnalyticsE.call(_this6, (0, _errorHandling.deleteErrorPayload)(result.error || 'Failed to delete synced block', result.resourceId, (0, _utils.getSourceProductFromResourceIdSafe)(result.resourceId), (0, _errorHandling.buildErrorAttribution)(result.error, result.statusCode)));
                   }
                 });
               }
@@ -728,9 +787,9 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
               // so the attribution `reason` falls back to `unknown`.
               attribution = (0, _errorHandling.buildErrorAttribution)();
               syncBlockIds.forEach(function (Ids) {
-                var _this5$fireAnalyticsE2;
-                _this5.setPendingDeletion(Ids, false);
-                (_this5$fireAnalyticsE2 = _this5.fireAnalyticsEvent) === null || _this5$fireAnalyticsE2 === void 0 || _this5$fireAnalyticsE2.call(_this5, (0, _errorHandling.deleteErrorPayload)(_t2.message, Ids.resourceId, (0, _utils.getSourceProductFromResourceIdSafe)(Ids.resourceId), attribution));
+                var _this6$fireAnalyticsE2;
+                _this6.setPendingDeletion(Ids, false);
+                (_this6$fireAnalyticsE2 = _this6.fireAnalyticsEvent) === null || _this6$fireAnalyticsE2 === void 0 || _this6$fireAnalyticsE2.call(_this6, (0, _errorHandling.deleteErrorPayload)(_t2.message, Ids.resourceId, (0, _utils.getSourceProductFromResourceIdSafe)(Ids.resourceId), attribution));
               });
               (0, _monitoring.logException)(_t2, {
                 location: 'editor-synced-block-provider/sourceSyncBlockStoreManager'
@@ -808,7 +867,7 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
     key: "fetchAndCacheStatuses",
     value: (function () {
       var _fetchAndCacheStatuses = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
-        var _this6 = this;
+        var _this7 = this;
         var sourceToReferenceMap, syncBlockNodes, results, _iterator3, _step3, _sourceToReferenceMap, _result$data, result, sourceResourceId, cached, _t3;
         return _regenerator.default.wrap(function (_context4) {
           while (1) switch (_context4.prev = _context4.next) {
@@ -826,11 +885,11 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
               // so we can update the correct cache entries.
               sourceToReferenceMap = new Map();
               syncBlockNodes = Array.from(this.syncBlockCache.entries()).map(function (_ref) {
-                var _this6$dataProvider$g, _this6$dataProvider;
+                var _this7$dataProvider$g, _this7$dataProvider;
                 var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
                   resourceId = _ref2[0],
                   data = _ref2[1];
-                var referenceResourceId = (_this6$dataProvider$g = (_this6$dataProvider = _this6.dataProvider) === null || _this6$dataProvider === void 0 ? void 0 : _this6$dataProvider.generateResourceIdForReference(resourceId)) !== null && _this6$dataProvider$g !== void 0 ? _this6$dataProvider$g : resourceId;
+                var referenceResourceId = (_this7$dataProvider$g = (_this7$dataProvider = _this7.dataProvider) === null || _this7$dataProvider === void 0 ? void 0 : _this7$dataProvider.generateResourceIdForReference(resourceId)) !== null && _this7$dataProvider$g !== void 0 ? _this7$dataProvider$g : resourceId;
                 sourceToReferenceMap.set(referenceResourceId, resourceId);
                 return {
                   type: 'bodiedSyncBlock',
@@ -854,6 +913,7 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
                   cached = this.syncBlockCache.get(sourceResourceId);
                   if (cached && (_result$data = result.data) !== null && _result$data !== void 0 && _result$data.status) {
                     cached.status = result.data.status;
+                    this.notifyLocalSource(sourceResourceId);
                   }
                 }
               } catch (err) {
@@ -983,7 +1043,7 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
   }, {
     key: "getSyncBlockSourceInfo",
     value: function getSyncBlockSourceInfo(localId) {
-      var _this7 = this;
+      var _this8 = this;
       try {
         var _this$fetchSourceInfo;
         if (!this.dataProvider) {
@@ -992,13 +1052,13 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
         (_this$fetchSourceInfo = this.fetchSourceInfoExperience) === null || _this$fetchSourceInfo === void 0 || _this$fetchSourceInfo.start();
         return this.dataProvider.fetchSyncBlockSourceInfo(localId, undefined, undefined).then(function (sourceInfo) {
           if (!sourceInfo) {
-            var _this7$fetchSourceInf;
-            (_this7$fetchSourceInf = _this7.fetchSourceInfoExperience) === null || _this7$fetchSourceInf === void 0 || _this7$fetchSourceInf.failure({
+            var _this8$fetchSourceInf;
+            (_this8$fetchSourceInf = _this8.fetchSourceInfoExperience) === null || _this8$fetchSourceInf === void 0 || _this8$fetchSourceInf.failure({
               reason: 'No source info returned'
             });
           } else {
-            var _this7$fetchSourceInf2;
-            (_this7$fetchSourceInf2 = _this7.fetchSourceInfoExperience) === null || _this7$fetchSourceInf2 === void 0 || _this7$fetchSourceInf2.success();
+            var _this8$fetchSourceInf2;
+            (_this8$fetchSourceInf2 = _this8.fetchSourceInfoExperience) === null || _this8$fetchSourceInf2 === void 0 || _this8$fetchSourceInf2.success();
           }
           return sourceInfo;
         });
@@ -1033,8 +1093,17 @@ var SourceSyncBlockStoreManager = exports.SourceSyncBlockStoreManager = /*#__PUR
   }, {
     key: "destroy",
     value: function destroy() {
-      var _this$saveExperience4, _this$createExperienc2, _this$deleteExperienc4, _this$fetchSourceInfo2;
+      var _this9 = this,
+        _this$saveExperience4,
+        _this$createExperienc2,
+        _this$deleteExperienc4,
+        _this$fetchSourceInfo2;
+      var subscribedResourceIds = (0, _toConsumableArray2.default)(this.localSourceSubscribers.keys());
       this.syncBlockCache.clear();
+      subscribedResourceIds.forEach(function (resourceId) {
+        return _this9.notifyLocalSource(resourceId);
+      });
+      this.localSourceSubscribers.clear();
       this.confirmationCallback = undefined;
       this.creationCompletionCallbacks.clear();
       this.flushCompletionCallback = undefined;

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

@@ -29,10 +29,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var SyncBlockStoreManager = exports.SyncBlockStoreManager = /*#__PURE__*/function () {
   function SyncBlockStoreManager(dataProvider, viewMode, isLivePage) {
     (0, _classCallCheck2.default)(this, SyncBlockStoreManager);
-    // In future, if reference manager needs to reach to source manager and read its current in memory cache
-    // we can pass the source manager as a parameter to the reference manager constructor
     this.sourceSyncBlockStoreManager = new _sourceSyncBlockStoreManager.SourceSyncBlockStoreManager(dataProvider, viewMode, isLivePage);
-    this.referenceSyncBlockStoreManager = new _referenceSyncBlockStoreManager.ReferenceSyncBlockStoreManager(dataProvider, viewMode);
+    this.referenceSyncBlockStoreManager = new _referenceSyncBlockStoreManager.ReferenceSyncBlockStoreManager(dataProvider, viewMode, this.sourceSyncBlockStoreManager);
     this.dataProvider = dataProvider;
     this.referenceSyncBlockStoreManager.setRealTimeSubscriptionsEnabled(true);
   }

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

@@ -1,9 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import isEqual from 'lodash/isEqual';
 import { logException } from '@atlaskit/editor-common/monitoring';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { isProviderNotReadyError, ProviderNotReadyError, SyncBlockError } from '../common/types';
 import { buildErrorAttribution, buildFetchErrorAttribution, cacheDeletionForcedPayload, fetchErrorPayload, fetchSuccessPayload, getSourceInfoErrorPayload, sourceInfoOrphanedPayload, updateReferenceErrorPayload } from '../utils/errorHandling';
 import { getFetchExperience, getFetchSourceInfoExperience, getSaveReferenceExperience } from '../utils/experienceTracking';
+import { parseResourceId } from '../utils/resourceId';
 import { resolveSyncBlockInstance } from '../utils/resolveSyncBlockInstance';
 import { createSyncBlockNode, getSourceProductFromResourceIdSafe, normalizeSyncBlockJSONContent } from '../utils/utils';
 import { SyncBlockBatchFetcher } from './syncBlockBatchFetcher';
@@ -27,7 +29,7 @@ const CACHE_DELETION_MAX_RESCHEDULES = 10;
 // Handles fetching source URL and title for sync blocks.
 // Can be used in both editor and renderer contexts.
 export class ReferenceSyncBlockStoreManager {
-  constructor(dataProvider, viewMode) {
+  constructor(dataProvider, viewMode, sourceManager) {
     var _this$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
@@ -50,6 +52,7 @@ export class ReferenceSyncBlockStoreManager {
     _defineProperty(this, "isDestroyed", false);
     this.dataProvider = dataProvider;
     this.viewMode = viewMode;
+    this.sourceManager = sourceManager;
     this.syncBlockFetchDataRequests = new Map();
     this.syncBlockSourceInfoRequests = new Map();
     this.newlyAddedSyncBlocks = new Set();
@@ -170,6 +173,10 @@ export class ReferenceSyncBlockStoreManager {
   }
   getInitialSyncBlockData(resourceId) {
     var _this$dataProvider2, _this$dataProvider2$g;
+    const localReference = this.getLocalReference(resourceId);
+    if (localReference) {
+      return localReference;
+    }
     const syncBlockNode = createSyncBlockNode('', resourceId);
     const providerData = (_this$dataProvider2 = this.dataProvider) === null || _this$dataProvider2 === void 0 ? void 0 : (_this$dataProvider2$g = _this$dataProvider2.getNodeDataFromCache(syncBlockNode)) === null || _this$dataProvider2$g === void 0 ? void 0 : _this$dataProvider2$g.data;
     if (providerData) {
@@ -179,6 +186,38 @@ export class ReferenceSyncBlockStoreManager {
     }
     return this.getFromSessionCache(resourceId);
   }
+  getSameDocumentReferenceParts(resourceId) {
+    const parsed = parseResourceId(resourceId);
+    if (!parsed || !this.dataProvider || this.dataProvider.generateResourceIdForReference(parsed.uuid) !== resourceId) {
+      return undefined;
+    }
+    return parsed;
+  }
+  getLocalReference(resourceId) {
+    var _this$sourceManager;
+    if (!isExperimentEnabled('editor-synced-block-same-page-sync')) {
+      return undefined;
+    }
+    const parsed = this.getSameDocumentReferenceParts(resourceId);
+    if (!parsed) {
+      return undefined;
+    }
+    const snapshot = (_this$sourceManager = this.sourceManager) === null || _this$sourceManager === void 0 ? void 0 : _this$sourceManager.getLocalSourceSnapshot(parsed.uuid);
+    if (!snapshot) {
+      return undefined;
+    }
+    return {
+      resourceId,
+      data: {
+        ...snapshot,
+        content: [...snapshot.content]
+      },
+      localSameDocumentSource: {
+        sourceBlockInstanceId: snapshot.blockInstanceId,
+        sourceProduct: parsed.product
+      }
+    };
+  }
   normalizeReferenceData(syncBlock) {
     var _syncBlock$data, _syncBlock$data$conte;
     if (!((_syncBlock$data = syncBlock.data) !== null && _syncBlock$data !== void 0 && (_syncBlock$data$conte = _syncBlock$data.content) !== null && _syncBlock$data$conte !== void 0 && _syncBlock$data$conte.length)) {
@@ -765,7 +804,34 @@ export class ReferenceSyncBlockStoreManager {
     });
   }
   subscribeToSyncBlock(resourceId, localId, callback) {
-    return this._subscriptionManager.subscribeToSyncBlock(resourceId, localId, callback);
+    var _this$sourceManager2;
+    const isSamePageSyncEnabled = isExperimentEnabled('editor-synced-block-same-page-sync');
+    const sameDocumentParts = isSamePageSyncEnabled ? this.getSameDocumentReferenceParts(resourceId) : undefined;
+    let localReference = isSamePageSyncEnabled ? this.getLocalReference(resourceId) : undefined;
+    const unsubscribeRemote = this._subscriptionManager.subscribeToSyncBlock(resourceId, localId, instance => {
+      if (!localReference) {
+        callback(instance);
+      }
+    });
+    const unsubscribeLocal = sameDocumentParts ? (_this$sourceManager2 = this.sourceManager) === null || _this$sourceManager2 === void 0 ? void 0 : _this$sourceManager2.subscribeToLocalSource(sameDocumentParts.uuid, () => {
+      const hadLocalReference = Boolean(localReference);
+      localReference = this.getLocalReference(resourceId);
+      if (localReference) {
+        callback(localReference);
+        return;
+      }
+      if (!hadLocalReference) {
+        return;
+      }
+      // Source left the document: keep the last local instance on screen
+      // and fetch the current backend value. Do not replay a remote
+      // value captured while the local source was authoritative.
+      this.debouncedBatchedFetchSyncBlocks(resourceId);
+    }) : undefined;
+    return () => {
+      unsubscribeLocal === null || unsubscribeLocal === void 0 ? void 0 : unsubscribeLocal();
+      unsubscribeRemote();
+    };
   }
   subscribeToSourceTitle(node, callback) {
     return this._subscriptionManager.subscribeToSourceTitle(node, callback);
@@ -783,7 +849,7 @@ export class ReferenceSyncBlockStoreManager {
       if (!localId || !resourceId) {
         throw new Error('Missing local id or resource id');
       }
-      return this._subscriptionManager.subscribeToSyncBlock(resourceId, localId, callback);
+      return this.subscribeToSyncBlock(resourceId, localId, callback);
     } catch (error) {
       var _this$fireAnalyticsEv11;
       // EDITOR-7860: benign not-ready/torn-down case — suppress both the