@atlaskit/editor-synced-block-provider 2.2.3 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-synced-block-provider
 
+## 2.3.0
+
+### Minor Changes
+
+- [`6f9f13ab4687d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6f9f13ab4687d) -
+  EDITOR-2451 update sync-block refreshed logic based on experience principles
+
 ## 2.2.3
 
 ### Patch Changes

package/dist/cjs/hooks/useFetchSyncBlockData.js

@@ -7,44 +7,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.useFetchSyncBlockData = exports.SYNC_BLOCK_FETCH_INTERVAL = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _types = require("../common/types");
 var SYNC_BLOCK_FETCH_INTERVAL = exports.SYNC_BLOCK_FETCH_INTERVAL = 3000;
 var useFetchSyncBlockData = exports.useFetchSyncBlockData = function useFetchSyncBlockData(manager, syncBlockNode) {
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     fetchSyncBlockDataResult = _useState2[0],
     setFetchSyncBlockDataResult = _useState2[1];
-  var fetchSyncBlockNode = (0, _react.useCallback)(function () {
-    manager.fetchSyncBlockData(syncBlockNode).then(function (data) {
-      if (data !== null && data !== void 0 && data.error) {
-        // if there is an error, we don't want to replace real existing data with the error data
-        setFetchSyncBlockDataResult(function (prev) {
-          if (!prev || prev.error) {
-            return data;
-          }
-          return prev;
-        });
-      } else {
-        setFetchSyncBlockDataResult(data !== null && data !== void 0 ? data : null);
-      }
-    }).catch(function () {
-      //TODO: EDITOR-1921 - add error analytics
-      setFetchSyncBlockDataResult(function (prev) {
-        if (!prev || prev.error) {
-          return {
-            error: _types.SyncBlockError.Errored
-          };
-        }
-        return prev;
-      });
-    });
-  }, [manager, syncBlockNode]);
   (0, _react.useEffect)(function () {
-    fetchSyncBlockNode();
-    var interval = window.setInterval(fetchSyncBlockNode, SYNC_BLOCK_FETCH_INTERVAL);
+    var unsubscribe = manager.subscribeToSyncBlockData(syncBlockNode, function (data) {
+      setFetchSyncBlockDataResult(data);
+    });
     return function () {
-      window.clearInterval(interval);
+      unsubscribe();
     };
-  }, [fetchSyncBlockNode]);
+  }, [manager, setFetchSyncBlockDataResult, syncBlockNode]);
   return fetchSyncBlockDataResult;
 };

package/dist/cjs/providers/syncBlockProvider.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useMemoizedSyncedBlockProvider = exports.SyncBlockProvider = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -14,7 +15,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
-var _types = require("../providers/types");
+var _types = require("../common/types");
+var _types2 = require("../providers/types");
 var _ari = require("../utils/ari");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -44,9 +46,26 @@ var SyncBlockProvider = exports.SyncBlockProvider = /*#__PURE__*/function (_Sync
     key: "fetchNodesData",
     value: function fetchNodesData(nodes) {
       var _this2 = this;
-      return Promise.all(nodes.map(function (node) {
-        return _this2.fetchProvider.fetchData(node.attrs.resourceId);
+      var resourceIdSet = new Set(nodes.map(function (node) {
+        return node.attrs.resourceId;
       }));
+      var resourceIds = (0, _toConsumableArray2.default)(resourceIdSet);
+      return Promise.allSettled(resourceIds.map(function (resourceId) {
+        return _this2.fetchProvider.fetchData(resourceId).then(function (data) {
+          return data;
+        }, function () {
+          return {
+            status: _types.SyncBlockError.Errored,
+            resourceId: resourceId
+          };
+        });
+      })).then(function (results) {
+        return results.filter(function (result) {
+          return result.status === 'fulfilled';
+        }).map(function (result) {
+          return result.value;
+        });
+      });
     }
 
     /**
@@ -97,7 +116,7 @@ var SyncBlockProvider = exports.SyncBlockProvider = /*#__PURE__*/function (_Sync
       return pageARI ? fetchURLfromARI(pageARI, sourceLocalId) : Promise.resolve(undefined);
     }
   }]);
-}(_types.SyncBlockDataProvider);
+}(_types2.SyncBlockDataProvider);
 var useMemoizedSyncedBlockProvider = exports.useMemoizedSyncedBlockProvider = function useMemoizedSyncedBlockProvider(fetchProvider, writeProvider, sourceId) {
   return (0, _react.useMemo)(function () {
     return new SyncBlockProvider(fetchProvider, writeProvider, sourceId);

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

@@ -6,12 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ReferenceSyncBlockStoreManager = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 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 _mergeFetchSyncBlockDataResult = require("../utils/mergeFetchSyncBlockDataResult");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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; }
 var createSyncBlockNode = function createSyncBlockNode(localId, resourceId) {
   return {
     type: 'syncBlock',
@@ -24,108 +29,359 @@ var createSyncBlockNode = function createSyncBlockNode(localId, resourceId) {
 var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
   function ReferenceSyncBlockStoreManager(dataProvider) {
     (0, _classCallCheck2.default)(this, ReferenceSyncBlockStoreManager);
-    this.dataProvider = dataProvider;
+    (0, _defineProperty2.default)(this, "isInitialized", false);
+    (0, _defineProperty2.default)(this, "isRefreshingSubscriptions", false);
     this.syncBlockCache = new Map();
+    this.subscriptions = new Map();
+    this.dataProvider = dataProvider;
     this.syncBlockURLRequests = new Map();
   }
-
-  /**
-   *
-   * @param localId - The local ID of the sync block to get the source URL for
-   * @param resourceId - The resource ID of the sync block to get the source URL for
-   * Fetches source URl for a sync block and updates sync block data with the source URL asynchronously.
-   */
   return (0, _createClass2.default)(ReferenceSyncBlockStoreManager, [{
+    key: "init",
+    value: function () {
+      var _init = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(editorView) {
+        var _this = this;
+        var syncBlockNodes, dataResults;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!(!this.editorView && !this.isInitialized)) {
+                _context.next = 15;
+                break;
+              }
+              this.editorView = editorView;
+              syncBlockNodes = editorView.state.doc.children.filter(function (node) {
+                return node.type.name === 'syncBlock';
+              }).map(function (node) {
+                return node.toJSON();
+              }) || [];
+              if (!(syncBlockNodes.length > 0)) {
+                _context.next = 15;
+                break;
+              }
+              _context.prev = 4;
+              _context.next = 7;
+              return this.fetchSyncBlocksData(syncBlockNodes);
+            case 7:
+              dataResults = _context.sent;
+              if (dataResults) {
+                _context.next = 10;
+                break;
+              }
+              throw new Error('No data results returned when initializing sync block store manager');
+            case 10:
+              dataResults.forEach(function (dataResult) {
+                _this.updateCache(dataResult);
+              });
+              _context.next = 15;
+              break;
+            case 13:
+              _context.prev = 13;
+              _context.t0 = _context["catch"](4);
+            case 15:
+              this.isInitialized = true;
+            case 16:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this, [[4, 13]]);
+      }));
+      function init(_x) {
+        return _init.apply(this, arguments);
+      }
+      return init;
+    }()
+    /**
+     * Refreshes the subscriptions for all sync blocks.
+     * @returns {Promise<void>}
+     */
+  }, {
+    key: "refreshSubscriptions",
+    value: (function () {
+      var _refreshSubscriptions = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        var syncBlocks, _iterator, _step, _loop;
+        return _regenerator.default.wrap(function _callee2$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              if (!(this.isRefreshingSubscriptions || !this.isInitialized)) {
+                _context3.next = 2;
+                break;
+              }
+              return _context3.abrupt("return");
+            case 2:
+              this.isRefreshingSubscriptions = true;
+              syncBlocks = [];
+              _iterator = _createForOfIteratorHelper(this.subscriptions.entries());
+              _context3.prev = 5;
+              _loop = /*#__PURE__*/_regenerator.default.mark(function _loop() {
+                var _step$value, resourceId, callbacks;
+                return _regenerator.default.wrap(function _loop$(_context2) {
+                  while (1) switch (_context2.prev = _context2.next) {
+                    case 0:
+                      _step$value = (0, _slicedToArray2.default)(_step.value, 2), resourceId = _step$value[0], callbacks = _step$value[1];
+                      Object.keys(callbacks).forEach(function (localId) {
+                        syncBlocks.push(createSyncBlockNode(localId, resourceId));
+                      });
+                    case 2:
+                    case "end":
+                      return _context2.stop();
+                  }
+                }, _loop);
+              });
+              _iterator.s();
+            case 8:
+              if ((_step = _iterator.n()).done) {
+                _context3.next = 12;
+                break;
+              }
+              return _context3.delegateYield(_loop(), "t0", 10);
+            case 10:
+              _context3.next = 8;
+              break;
+            case 12:
+              _context3.next = 17;
+              break;
+            case 14:
+              _context3.prev = 14;
+              _context3.t1 = _context3["catch"](5);
+              _iterator.e(_context3.t1);
+            case 17:
+              _context3.prev = 17;
+              _iterator.f();
+              return _context3.finish(17);
+            case 20:
+              _context3.prev = 20;
+              _context3.next = 23;
+              return this.fetchSyncBlocksData(syncBlocks);
+            case 23:
+              _context3.next = 27;
+              break;
+            case 25:
+              _context3.prev = 25;
+              _context3.t2 = _context3["catch"](20);
+            case 27:
+              _context3.prev = 27;
+              this.isRefreshingSubscriptions = false;
+              return _context3.finish(27);
+            case 30:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee2, this, [[5, 14, 17, 20], [20, 25, 27, 30]]);
+      }));
+      function refreshSubscriptions() {
+        return _refreshSubscriptions.apply(this, arguments);
+      }
+      return refreshSubscriptions;
+    }())
+  }, {
     key: "fetchSyncBlockSourceURL",
-    value: function fetchSyncBlockSourceURL(_ref) {
-      var _this = this;
-      var localId = _ref.localId,
-        resourceId = _ref.resourceId;
-      if (!localId || !resourceId || !this.dataProvider) {
+    value: function fetchSyncBlockSourceURL(resourceId) {
+      var _this2 = this;
+      if (!resourceId || !this.dataProvider) {
         return;
       }
 
       // if the sync block is a reference block, we need to fetch the URL to the source
       // we could optimise this further by checking if the sync block is on the same page as the source
-      if (!this.syncBlockURLRequests.get(localId)) {
-        this.syncBlockURLRequests.set(localId, true);
-        this.dataProvider.retrieveSyncBlockSourceUrl(createSyncBlockNode(localId, resourceId)).then(function (sourceURL) {
-          var existingSyncBlock = _this.syncBlockCache.get(localId);
-          if (existingSyncBlock) {
-            existingSyncBlock.sourceURL = sourceURL;
+      if (!this.syncBlockURLRequests.get(resourceId)) {
+        this.syncBlockURLRequests.set(resourceId, true);
+        this.dataProvider.retrieveSyncBlockSourceUrl(createSyncBlockNode('', resourceId)).then(function (sourceURL) {
+          var existingSyncBlock = _this2.getFromCache(resourceId);
+          if (existingSyncBlock && existingSyncBlock.data) {
+            existingSyncBlock.data = _objectSpread(_objectSpread({}, existingSyncBlock.data), {}, {
+              sourceURL: sourceURL
+            });
+            _this2.updateCache(existingSyncBlock);
           }
         }).finally(function () {
-          _this.syncBlockURLRequests.set(localId, false);
+          _this2.syncBlockURLRequests.set(resourceId, false);
         });
       }
     }
+
+    /**
+     * Fetch sync block data for a given sync block node.
+     * @param syncBlockNode - The sync block node to fetch data for
+     * @returns The fetched sync block data result
+     */
   }, {
     key: "fetchSyncBlockData",
-    value: function () {
-      var _fetchSyncBlockData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(syncBlockNode) {
-        var syncNode, existingSyncBlock, data, fetchSyncBlockDataResult;
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+    value: (function () {
+      var _fetchSyncBlockData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(syncBlockNode) {
+        var syncNode, data;
+        return _regenerator.default.wrap(function _callee3$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
             case 0:
               if (this.dataProvider) {
-                _context.next = 2;
+                _context4.next = 2;
                 break;
               }
               throw new Error('Data provider not set');
             case 2:
-              syncNode = createSyncBlockNode(syncBlockNode.attrs.localId, syncBlockNode.attrs.resourceId); // async fetch source URL if it is not already fetched
-              existingSyncBlock = this.syncBlockCache.get(syncBlockNode.attrs.localId);
-              if (!(existingSyncBlock !== null && existingSyncBlock !== void 0 && existingSyncBlock.sourceURL)) {
-                this.fetchSyncBlockSourceURL({
-                  localId: syncBlockNode.attrs.localId,
-                  resourceId: syncBlockNode.attrs.resourceId
-                });
+              syncNode = createSyncBlockNode(syncBlockNode.attrs.localId, syncBlockNode.attrs.resourceId);
+              _context4.next = 5;
+              return this.fetchSyncBlocksData([syncNode]);
+            case 5:
+              data = _context4.sent;
+              if (!(!data || data.length === 0)) {
+                _context4.next = 8;
+                break;
               }
-              _context.prev = 5;
-              _context.next = 8;
-              return this.dataProvider.fetchNodesData([syncNode]);
+              throw new Error('Failed to fetch sync block data');
             case 8:
-              data = _context.sent;
+              return _context4.abrupt("return", data[0]);
+            case 9:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee3, this);
+      }));
+      function fetchSyncBlockData(_x2) {
+        return _fetchSyncBlockData.apply(this, arguments);
+      }
+      return fetchSyncBlockData;
+    }())
+  }, {
+    key: "fetchSyncBlocksData",
+    value: function () {
+      var _fetchSyncBlocksData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(syncBlockNodes) {
+        var _this3 = this;
+        var data, resolvedData;
+        return _regenerator.default.wrap(function _callee4$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              if (this.dataProvider) {
+                _context5.next = 2;
+                break;
+              }
+              throw new Error('Data provider not set');
+            case 2:
+              _context5.next = 4;
+              return this.dataProvider.fetchNodesData(syncBlockNodes);
+            case 4:
+              data = _context5.sent;
               if (data) {
-                _context.next = 11;
+                _context5.next = 7;
                 break;
               }
               throw new Error('Failed to fetch sync block node data');
-            case 11:
-              _context.next = 16;
-              break;
-            case 13:
-              _context.prev = 13;
-              _context.t0 = _context["catch"](5);
-              throw new Error('Failed to fetch sync block node data');
-            case 16:
-              fetchSyncBlockDataResult = data[0];
-              if (!fetchSyncBlockDataResult.error && fetchSyncBlockDataResult.data) {
-                // only adds it to the map if it did not error out
-                this.syncBlockCache.set(syncBlockNode.attrs.localId, _objectSpread(_objectSpread({}, existingSyncBlock), fetchSyncBlockDataResult.data));
-              }
-              return _context.abrupt("return", fetchSyncBlockDataResult);
-            case 19:
+            case 7:
+              resolvedData = [];
+              data.forEach(function (fetchSyncBlockDataResult) {
+                var _resolvedFetchSyncBlo;
+                if (!fetchSyncBlockDataResult.resourceId) {
+                  return;
+                }
+                var existingSyncBlock = _this3.getFromCache(fetchSyncBlockDataResult.resourceId);
+                var resolvedFetchSyncBlockDataResult = existingSyncBlock ? (0, _mergeFetchSyncBlockDataResult.resolveFetchSyncBlockDataResult)(existingSyncBlock, fetchSyncBlockDataResult) : fetchSyncBlockDataResult;
+                _this3.updateCache(resolvedFetchSyncBlockDataResult);
+                resolvedData.push(resolvedFetchSyncBlockDataResult);
+
+                // fetch source URL if not already present
+                if (!((_resolvedFetchSyncBlo = resolvedFetchSyncBlockDataResult.data) !== null && _resolvedFetchSyncBlo !== void 0 && _resolvedFetchSyncBlo.sourceURL) && resolvedFetchSyncBlockDataResult.resourceId) {
+                  _this3.fetchSyncBlockSourceURL(resolvedFetchSyncBlockDataResult.resourceId);
+                }
+              });
+              return _context5.abrupt("return", resolvedData);
+            case 10:
             case "end":
-              return _context.stop();
+              return _context5.stop();
           }
-        }, _callee, this, [[5, 13]]);
+        }, _callee4, this);
       }));
-      function fetchSyncBlockData(_x) {
-        return _fetchSyncBlockData.apply(this, arguments);
+      function fetchSyncBlocksData(_x3) {
+        return _fetchSyncBlocksData.apply(this, arguments);
       }
-      return fetchSyncBlockData;
+      return fetchSyncBlocksData;
     }()
+  }, {
+    key: "updateCache",
+    value: function updateCache(syncBlock) {
+      var resourceId = syncBlock.resourceId;
+      if (resourceId) {
+        this.syncBlockCache.set(resourceId, syncBlock);
+        var callbacks = this.subscriptions.get(resourceId);
+        if (callbacks) {
+          Object.values(callbacks).forEach(function (callback) {
+            callback(syncBlock);
+          });
+        }
+      }
+    }
+  }, {
+    key: "getFromCache",
+    value: function getFromCache(resourceId) {
+      return this.syncBlockCache.get(resourceId);
+    }
+  }, {
+    key: "deleteFromCache",
+    value: function deleteFromCache(resourceId) {
+      this.syncBlockCache.delete(resourceId);
+    }
+  }, {
+    key: "subscribe",
+    value: function subscribe(node, callback) {
+      var _this4 = this;
+      // check node is a sync block, as we only support sync block subscriptions
+      if (node.type.name !== 'syncBlock') {
+        return function () {};
+      }
+      var _node$attrs = node.attrs,
+        resourceId = _node$attrs.resourceId,
+        localId = _node$attrs.localId;
+      if (!localId || !resourceId) {
+        return function () {};
+      }
+
+      // add to subscriptions map
+      var resourceSubscriptions = this.subscriptions.get(resourceId) || {};
+      this.subscriptions.set(resourceId, _objectSpread(_objectSpread({}, resourceSubscriptions), {}, (0, _defineProperty2.default)({}, localId, callback)));
+
+      // call the callback immediately if we have cached data
+      var cachedData = this.getFromCache(resourceId);
+      if (cachedData) {
+        callback(cachedData);
+      } else {
+        this.fetchSyncBlockData(node).catch(function () {});
+      }
+      return function () {
+        var resourceSubscriptions = _this4.subscriptions.get(resourceId);
+        if (resourceSubscriptions) {
+          delete resourceSubscriptions[localId];
+          if (Object.keys(resourceSubscriptions).length === 0) {
+            _this4.subscriptions.delete(resourceId);
+            _this4.deleteFromCache(resourceId);
+          } else {
+            _this4.subscriptions.set(resourceId, resourceSubscriptions);
+          }
+        }
+      };
+    }
+
     /**
      * Get the URL for a sync block.
-     * @param localId - The local ID of the sync block to get the URL for
+     * @param resourceId - The resource ID of the sync block
      * @returns
      */
   }, {
     key: "getSyncBlockURL",
-    value: function getSyncBlockURL(localId) {
-      var syncBlock = this.syncBlockCache.get(localId);
-      return syncBlock === null || syncBlock === void 0 ? void 0 : syncBlock.sourceURL;
+    value: function getSyncBlockURL(resourceId) {
+      var _syncBlock$data;
+      var syncBlock = this.getFromCache(resourceId);
+      if (!syncBlock) {
+        return undefined;
+      }
+      return (_syncBlock$data = syncBlock.data) === null || _syncBlock$data === void 0 ? void 0 : _syncBlock$data.sourceURL;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.syncBlockCache.clear();
+      this.subscriptions.clear();
+      this.syncBlockURLRequests.clear();
+      this.editorView = undefined;
+      this.isInitialized = false;
     }
   }]);
 }();

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

@@ -20,6 +20,12 @@ var SyncBlockStoreManager = exports.SyncBlockStoreManager = /*#__PURE__*/functio
     this.referenceSyncBlockStoreManager = new _referenceSyncBlockStoreManager.ReferenceSyncBlockStoreManager(dataProvider);
     this.sourceSyncBlockStoreManager = new _sourceSyncBlockStoreManager.SourceSyncBlockStoreManager(dataProvider);
   }
+
+  /**
+   * Fetch sync block data for a given sync block node.
+   * @param syncBlockNode - The sync block node to fetch data for
+   * @returns The fetched sync block data result
+   */
   return (0, _createClass2.default)(SyncBlockStoreManager, [{
     key: "fetchSyncBlockData",
     value: function fetchSyncBlockData(syncBlockNode) {
@@ -60,20 +66,22 @@ var SyncBlockStoreManager = exports.SyncBlockStoreManager = /*#__PURE__*/functio
 
     /**
      * Get the URL for a sync block.
-     * @param localId - The local ID of the sync block to get the URL for
+     * @param resourceId - The resource ID of the sync block to get the URL for
      * @returns
      */
   }, {
     key: "getSyncBlockURL",
-    value: function getSyncBlockURL(localId) {
+    value: function getSyncBlockURL(resourceId) {
       // only applicable to reference sync block, for now (will be refactored further)
-      return this.referenceSyncBlockStoreManager.getSyncBlockURL(localId);
+      return this.referenceSyncBlockStoreManager.getSyncBlockURL(resourceId);
     }
   }, {
     key: "setEditorView",
     value: function setEditorView(editorView) {
-      // only applicable to source sync block, for now (will be refactored further)
       this.sourceSyncBlockStoreManager.setEditorView(editorView);
+      if (editorView) {
+        this.referenceSyncBlockStoreManager.init(editorView);
+      }
     }
   }, {
     key: "isSourceBlock",
@@ -98,6 +106,16 @@ var SyncBlockStoreManager = exports.SyncBlockStoreManager = /*#__PURE__*/functio
       // only applicable to source sync block, for now (will be refactored further)
       return this.sourceSyncBlockStoreManager.createSyncBlockNode();
     }
+  }, {
+    key: "subscribeToSyncBlockData",
+    value: function subscribeToSyncBlockData(node, callback) {
+      return this.referenceSyncBlockStoreManager.subscribe(node, callback);
+    }
+  }, {
+    key: "refreshSubscriptions",
+    value: function refreshSubscriptions() {
+      this.referenceSyncBlockStoreManager.refreshSubscriptions();
+    }
   }, {
     key: "deleteSyncBlocksWithConfirmation",
     value: function deleteSyncBlocksWithConfirmation(tr, syncBlockIds) {
@@ -110,5 +128,10 @@ var SyncBlockStoreManager = exports.SyncBlockStoreManager = /*#__PURE__*/functio
       // only applicable to source sync block, for now (will be refactored further)
       this.sourceSyncBlockStoreManager.rebaseTransaction(incomingTr, state);
     }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.referenceSyncBlockStoreManager.destroy();
+    }
   }]);
 }();

package/dist/cjs/utils/mergeFetchSyncBlockDataResult.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolveFetchSyncBlockDataResult = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Merges two FetchSyncBlockDataResult objects,
+ * currently it only preserves the sourceURL from the old result,
+ * but this can be extended in the future to preserve other fields and resolve conflicts as needed.
+ * e.g. compare timestamps or version numbers to determine which data is more recent.
+ *
+ * @param oldResult - The existing FetchSyncBlockDataResult object.
+ * @param newResult - The new FetchSyncBlockDataResult object to merge.
+ * @returns A merged FetchSyncBlockDataResult object.
+ */
+var resolveFetchSyncBlockDataResult = exports.resolveFetchSyncBlockDataResult = function resolveFetchSyncBlockDataResult(oldResult, newResult) {
+  var _newResult$data, _oldResult$data;
+  // if the old result has no data, we simple return the new result
+  if (!oldResult.data) {
+    return newResult;
+  } else if (!newResult.data) {
+    // if the new result has no data, we simply return the old result
+    // TODO: EDITOR-2533 - handle this case based on the error type and whether we should keep old data or not
+    return oldResult;
+  }
+
+  // otherwise, we merge the two results, preserving the sourceURL from the old result if it exists
+  return _objectSpread(_objectSpread({}, newResult), {}, {
+    data: _objectSpread(_objectSpread({}, newResult.data), {}, {
+      sourceURL: ((_newResult$data = newResult.data) === null || _newResult$data === void 0 ? void 0 : _newResult$data.sourceURL) || ((_oldResult$data = oldResult.data) === null || _oldResult$data === void 0 ? void 0 : _oldResult$data.sourceURL) || undefined
+    })
+  });
+};