@atlaskit/editor-synced-block-provider 2.5.1 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-synced-block-provider
 
+## 2.6.0
+
+### Minor Changes
+
+- [`261fa27c56fd0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/261fa27c56fd0) -
+  EDITOR-2533 implement retry function for sync-block renderer
+
+## 2.5.2
+
+### Patch Changes
+
+- [`7e3353721fa66`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7e3353721fa66) -
+  [ux] EDITOR-1822 update sync blocks ui to new design
+
 ## 2.5.1
 
 ### Patch Changes

package/dist/cjs/hooks/useFetchSyncBlockData.js

@@ -4,22 +4,76 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFetchSyncBlockData = exports.SYNC_BLOCK_FETCH_INTERVAL = void 0;
+exports.useFetchSyncBlockData = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var SYNC_BLOCK_FETCH_INTERVAL = exports.SYNC_BLOCK_FETCH_INTERVAL = 3000;
-var useFetchSyncBlockData = exports.useFetchSyncBlockData = function useFetchSyncBlockData(manager, syncBlockNode) {
+var _types = require("../common/types");
+var _createSyncBlock = require("../utils/createSyncBlock");
+var useFetchSyncBlockData = exports.useFetchSyncBlockData = function useFetchSyncBlockData(manager, resourceId, localId) {
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     syncBlockInstance = _useState2[0],
     setSyncBlockInstance = _useState2[1];
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isLoading = _useState4[0],
+    setIsLoading = _useState4[1];
+  var referenceSyncBlockStoreManager = manager.getReferenceSyncBlockStoreManager();
+  var reloadData = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var syncBlockNode;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!isLoading) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return");
+        case 2:
+          syncBlockNode = resourceId && localId ? (0, _createSyncBlock.createSyncBlockNode)(localId, resourceId) : null;
+          if (syncBlockNode) {
+            _context.next = 5;
+            break;
+          }
+          return _context.abrupt("return");
+        case 5:
+          setIsLoading(true);
+          _context.prev = 6;
+          _context.next = 9;
+          return referenceSyncBlockStoreManager.fetchSyncBlocksData([syncBlockNode]);
+        case 9:
+          _context.next = 14;
+          break;
+        case 11:
+          _context.prev = 11;
+          _context.t0 = _context["catch"](6);
+          // Set error state if fetching fails
+          setSyncBlockInstance({
+            resourceId: resourceId || '',
+            error: _types.SyncBlockError.Errored
+          });
+        case 14:
+          setIsLoading(false);
+        case 15:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[6, 11]]);
+  })), [isLoading, localId, referenceSyncBlockStoreManager, resourceId]);
   (0, _react.useEffect)(function () {
-    var unsubscribe = manager.subscribeToSyncBlockData(syncBlockNode, function (data) {
+    var unsubscribe = referenceSyncBlockStoreManager.subscribeToSyncBlock(resourceId || '', localId || '', function (data) {
       setSyncBlockInstance(data);
+      setIsLoading(false);
     });
     return function () {
       unsubscribe();
     };
-  }, [manager, syncBlockNode]);
-  return syncBlockInstance;
+  }, [localId, referenceSyncBlockStoreManager, resourceId]);
+  return {
+    syncBlockInstance: syncBlockInstance,
+    isLoading: isLoading,
+    reloadData: reloadData
+  };
 };

package/dist/cjs/hooks/useFetchSyncBlockTitle.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFetchSyncBlockTitle = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var useFetchSyncBlockTitle = exports.useFetchSyncBlockTitle = function useFetchSyncBlockTitle(manager, syncBlockNode) {
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    sourceTitle = _useState2[0],
+    setSourceTitle = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var unsubscribe = manager.subscribeToSyncBlockSourceTitle(syncBlockNode, function (title) {
+      setSourceTitle(title);
+    });
+    return function () {
+      unsubscribe();
+    };
+  }, [manager, syncBlockNode]);
+  return sourceTitle;
+};

package/dist/cjs/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ReferenceSyncBlockStoreManager", {
+  enumerable: true,
+  get: function get() {
+    return _referenceSyncBlockStoreManager.ReferenceSyncBlockStoreManager;
+  }
+});
 Object.defineProperty(exports, "SyncBlockError", {
   enumerable: true,
   get: function get() {
@@ -33,6 +39,12 @@ Object.defineProperty(exports, "createContentAPIProvidersWithDefaultKey", {
     return _confluenceContentAPI.createContentAPIProvidersWithDefaultKey;
   }
 });
+Object.defineProperty(exports, "createSyncBlockNode", {
+  enumerable: true,
+  get: function get() {
+    return _createSyncBlock.createSyncBlockNode;
+  }
+});
 Object.defineProperty(exports, "getConfluencePageAri", {
   enumerable: true,
   get: function get() {
@@ -69,6 +81,12 @@ Object.defineProperty(exports, "useFetchSyncBlockData", {
     return _useFetchSyncBlockData.useFetchSyncBlockData;
   }
 });
+Object.defineProperty(exports, "useFetchSyncBlockTitle", {
+  enumerable: true,
+  get: function get() {
+    return _useFetchSyncBlockTitle.useFetchSyncBlockTitle;
+  }
+});
 Object.defineProperty(exports, "useHandleContentChanges", {
   enumerable: true,
   get: function get() {
@@ -87,14 +105,17 @@ Object.defineProperty(exports, "useMemoizedSyncedBlockProvider", {
     return _syncBlockProvider.useMemoizedSyncedBlockProvider;
   }
 });
-var _syncBlockProvider = require("./providers/syncBlockProvider");
-var _syncBlockStoreManager = require("./store-manager/syncBlockStoreManager");
+var _rebaseTransaction = require("./common/rebase-transaction");
+var _schema = require("./common/schema");
+var _types = require("./common/types");
 var _useFetchSyncBlockData = require("./hooks/useFetchSyncBlockData");
+var _useFetchSyncBlockTitle = require("./hooks/useFetchSyncBlockTitle");
 var _useHandleContentChanges = require("./hooks/useHandleContentChanges");
-var _types = require("./common/types");
-var _schema = require("./common/schema");
 var _confluenceContentAPI = require("./providers/confluence/confluenceContentAPI");
+var _syncBlockProvider = require("./providers/syncBlockProvider");
+var _referenceSyncBlockStoreManager = require("./store-manager/referenceSyncBlockStoreManager");
+var _syncBlockStoreManager = require("./store-manager/syncBlockStoreManager");
 var _ari = require("./utils/ari");
-var _utils = require("./utils/utils");
-var _rebaseTransaction = require("./common/rebase-transaction");
-var _resolveSyncBlockInstance = require("./utils/resolveSyncBlockInstance");
+var _createSyncBlock = require("./utils/createSyncBlock");
+var _resolveSyncBlockInstance = require("./utils/resolveSyncBlockInstance");
+var _utils = require("./utils/utils");

package/dist/cjs/providers/syncBlockProvider.js

@@ -133,8 +133,8 @@ var SyncBlockProvider = exports.SyncBlockProvider = /*#__PURE__*/function (_Sync
       return this.sourceId;
     }
   }, {
-    key: "retrieveSyncBlockSourceUrl",
-    value: function retrieveSyncBlockSourceUrl(node) {
+    key: "retrieveSyncBlockSourceUrlAndTitle",
+    value: function retrieveSyncBlockSourceUrlAndTitle(node) {
       var resourceId = node.attrs.resourceId;
       var pageARI;
       var sourceLocalId;
@@ -150,7 +150,7 @@ var SyncBlockProvider = exports.SyncBlockProvider = /*#__PURE__*/function (_Sync
           // EDITOR-1921: log analytic here, safe to continue
         }
       }
-      return pageARI ? fetchURLfromARI(pageARI, sourceLocalId) : Promise.resolve(undefined);
+      return pageARI ? fetchURLandTitlefromARI(pageARI, sourceLocalId) : Promise.resolve(undefined);
     }
   }]);
 }(_types2.SyncBlockDataProvider);
@@ -159,9 +159,9 @@ var useMemoizedSyncedBlockProvider = exports.useMemoizedSyncedBlockProvider = fu
     return new SyncBlockProvider(fetchProvider, writeProvider, sourceId);
   }, [fetchProvider, writeProvider, sourceId]);
 };
-var fetchURLfromARI = /*#__PURE__*/function () {
+var fetchURLandTitlefromARI = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(ari, sourceLocalId) {
-    var response, _payload$data, payload, url;
+    var response, _payload$data, _payload$data2, payload, url, title;
     return _regenerator.default.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
@@ -187,17 +187,14 @@ var fetchURLfromARI = /*#__PURE__*/function () {
         case 6:
           payload = _context2.sent;
           url = payload === null || payload === void 0 || (_payload$data = payload.data) === null || _payload$data === void 0 ? void 0 : _payload$data.url;
-          if (!(typeof url === 'string')) {
-            _context2.next = 10;
-            break;
-          }
-          return _context2.abrupt("return", sourceLocalId ? url + "?block=".concat(sourceLocalId) : url);
-        case 10:
-          _context2.next = 13;
-          break;
+          title = payload === null || payload === void 0 || (_payload$data2 = payload.data) === null || _payload$data2 === void 0 ? void 0 : _payload$data2.name;
+          return _context2.abrupt("return", {
+            url: typeof url === 'string' ? sourceLocalId ? url + "?block=".concat(sourceLocalId) : url : undefined,
+            title: typeof title === 'string' ? title : undefined
+          });
         case 12:
           //eslint-disable-next-line no-console
-          console.error('Failed to fetch URL from ARI', response.statusText);
+          console.error('Failed to fetch URL and title from ARI', response.statusText);
         case 13:
           return _context2.abrupt("return", undefined);
         case 14:
@@ -206,7 +203,7 @@ var fetchURLfromARI = /*#__PURE__*/function () {
       }
     }, _callee2);
   }));
-  return function fetchURLfromARI(_x2, _x3) {
+  return function fetchURLandTitlefromARI(_x2, _x3) {
     return _ref.apply(this, arguments);
   };
 }();

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

@@ -24,6 +24,7 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
     (0, _defineProperty2.default)(this, "isRefreshingSubscriptions", false);
     this.syncBlockCache = new Map();
     this.subscriptions = new Map();
+    this.titleSubscriptions = new Map();
     this.dataProvider = dataProvider;
     this.syncBlockURLRequests = new Map();
   }
@@ -112,8 +113,8 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
       return refreshSubscriptions;
     }())
   }, {
-    key: "fetchSyncBlockSourceURL",
-    value: function fetchSyncBlockSourceURL(resourceId) {
+    key: "fetchSyncBlockSourceURLAndTitle",
+    value: function fetchSyncBlockSourceURLAndTitle(resourceId) {
       var _this = this;
       if (!resourceId || !this.dataProvider) {
         return;
@@ -123,13 +124,17 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
       // we could optimise this further by checking if the sync block is on the same page as the source
       if (!this.syncBlockURLRequests.get(resourceId)) {
         this.syncBlockURLRequests.set(resourceId, true);
-        this.dataProvider.retrieveSyncBlockSourceUrl((0, _createSyncBlock.createSyncBlockNode)('', resourceId)).then(function (sourceURL) {
+        this.dataProvider.retrieveSyncBlockSourceUrlAndTitle((0, _createSyncBlock.createSyncBlockNode)('', resourceId)).then(function (sourceInfo) {
           var existingSyncBlock = _this.getFromCache(resourceId);
           if (existingSyncBlock && existingSyncBlock.data) {
             existingSyncBlock.data = _objectSpread(_objectSpread({}, existingSyncBlock.data), {}, {
-              sourceURL: sourceURL
+              sourceURL: sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url,
+              sourceTitle: sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.title
             });
             _this.updateCache(existingSyncBlock);
+            if (sourceInfo !== null && sourceInfo !== void 0 && sourceInfo.title) {
+              _this.updateSourceTitleSubscriptions(existingSyncBlock.resourceId, sourceInfo.title);
+            }
           }
         }).finally(function () {
           _this.syncBlockURLRequests.set(resourceId, false);
@@ -163,7 +168,7 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
             case 7:
               resolvedData = [];
               data.forEach(function (syncBlockInstance) {
-                var _resolvedSyncBlockIns;
+                var _resolvedSyncBlockIns, _resolvedSyncBlockIns2;
                 if (!syncBlockInstance.resourceId) {
                   return;
                 }
@@ -172,9 +177,9 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
                 _this2.updateCache(resolvedSyncBlockInstance);
                 resolvedData.push(resolvedSyncBlockInstance);
 
-                // fetch source URL if not already present
-                if (!((_resolvedSyncBlockIns = resolvedSyncBlockInstance.data) !== null && _resolvedSyncBlockIns !== void 0 && _resolvedSyncBlockIns.sourceURL) && resolvedSyncBlockInstance.resourceId) {
-                  _this2.fetchSyncBlockSourceURL(resolvedSyncBlockInstance.resourceId);
+                // fetch source URL and title if not already present
+                if ((!((_resolvedSyncBlockIns = resolvedSyncBlockInstance.data) !== null && _resolvedSyncBlockIns !== void 0 && _resolvedSyncBlockIns.sourceURL) || !((_resolvedSyncBlockIns2 = resolvedSyncBlockInstance.data) !== null && _resolvedSyncBlockIns2 !== void 0 && _resolvedSyncBlockIns2.sourceTitle)) && resolvedSyncBlockInstance.resourceId) {
+                  _this2.fetchSyncBlockSourceURLAndTitle(resolvedSyncBlockInstance.resourceId);
                 }
               });
               return _context3.abrupt("return", resolvedData);
@@ -203,6 +208,16 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
         }
       }
     }
+  }, {
+    key: "updateSourceTitleSubscriptions",
+    value: function updateSourceTitleSubscriptions(resourceId, title) {
+      var callbacks = this.titleSubscriptions.get(resourceId);
+      if (callbacks) {
+        Object.values(callbacks).forEach(function (callback) {
+          callback(title);
+        });
+      }
+    }
   }, {
     key: "getFromCache",
     value: function getFromCache(resourceId) {
@@ -214,20 +229,9 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
       this.syncBlockCache.delete(resourceId);
     }
   }, {
-    key: "subscribe",
-    value: function subscribe(node, callback) {
+    key: "subscribeToSyncBlock",
+    value: function subscribeToSyncBlock(resourceId, localId, callback) {
       var _this3 = 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)));
@@ -252,6 +256,56 @@ var ReferenceSyncBlockStoreManager = exports.ReferenceSyncBlockStoreManager = /*
         }
       };
     }
+  }, {
+    key: "subscribeToSourceTitle",
+    value: function subscribeToSourceTitle(node, callback) {
+      var _cachedData$data,
+        _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 () {};
+      }
+      var cachedData = this.getFromCache(resourceId);
+      if (cachedData !== null && cachedData !== void 0 && (_cachedData$data = cachedData.data) !== null && _cachedData$data !== void 0 && _cachedData$data.sourceTitle) {
+        callback(cachedData.data.sourceTitle);
+      }
+
+      // add to subscriptions map
+      var resourceSubscriptions = this.titleSubscriptions.get(resourceId) || {};
+      this.titleSubscriptions.set(resourceId, _objectSpread(_objectSpread({}, resourceSubscriptions), {}, (0, _defineProperty2.default)({}, localId, callback)));
+      return function () {
+        var resourceSubscriptions = _this4.titleSubscriptions.get(resourceId);
+        if (resourceSubscriptions) {
+          delete resourceSubscriptions[localId];
+          if (Object.keys(resourceSubscriptions).length === 0) {
+            _this4.titleSubscriptions.delete(resourceId);
+          } else {
+            _this4.titleSubscriptions.set(resourceId, resourceSubscriptions);
+          }
+        }
+      };
+    }
+  }, {
+    key: "subscribe",
+    value: function subscribe(node, callback) {
+      // check node is a sync block, as we only support sync block subscriptions
+      if (node.type.name !== 'syncBlock') {
+        return function () {};
+      }
+      var _node$attrs2 = node.attrs,
+        resourceId = _node$attrs2.resourceId,
+        localId = _node$attrs2.localId;
+      if (!localId || !resourceId) {
+        return function () {};
+      }
+      return this.subscribeToSyncBlock(resourceId, localId, callback);
+    }
 
     /**
      * Get the URL for a sync block.

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

@@ -40,6 +40,11 @@ var SyncBlockStoreManager = exports.SyncBlockStoreManager = /*#__PURE__*/functio
       }
       return this.referenceSyncBlockStoreManager.fetchSyncBlocksData(syncBlockNodes);
     }
+  }, {
+    key: "getReferenceSyncBlockStoreManager",
+    value: function getReferenceSyncBlockStoreManager() {
+      return this.referenceSyncBlockStoreManager;
+    }
 
     /**
      * Add/update a sync block node to/from the local cache
@@ -111,6 +116,11 @@ var SyncBlockStoreManager = exports.SyncBlockStoreManager = /*#__PURE__*/functio
     value: function subscribeToSyncBlockData(node, callback) {
       return this.referenceSyncBlockStoreManager.subscribe(node, callback);
     }
+  }, {
+    key: "subscribeToSyncBlockSourceTitle",
+    value: function subscribeToSyncBlockSourceTitle(node, callback) {
+      return this.referenceSyncBlockStoreManager.subscribeToSourceTitle(node, callback);
+    }
   }, {
     key: "refreshSubscriptions",
     value: function refreshSubscriptions() {

package/dist/cjs/utils/resolveSyncBlockInstance.js

@@ -19,7 +19,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @returns A merged SyncBlockInstance object.
  */
 var resolveSyncBlockInstance = exports.resolveSyncBlockInstance = function resolveSyncBlockInstance(oldResult, newResult) {
-  var _newResult$data, _oldResult$data;
+  var _newResult$data, _oldResult$data, _newResult$data2, _oldResult$data2;
   // if the old result has no data, we simple return the new result
   if (!oldResult.data) {
     return newResult;
@@ -29,10 +29,11 @@ var resolveSyncBlockInstance = exports.resolveSyncBlockInstance = function resol
     return oldResult;
   }
 
-  // otherwise, we merge the two results, preserving the sourceURL from the old result if it exists
+  // otherwise, we merge the two results, preserving the sourceURL and sourceTitle 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
+      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,
+      sourceTitle: ((_newResult$data2 = newResult.data) === null || _newResult$data2 === void 0 ? void 0 : _newResult$data2.sourceTitle) || ((_oldResult$data2 = oldResult.data) === null || _oldResult$data2 === void 0 ? void 0 : _oldResult$data2.sourceTitle) || undefined
     })
   });
 };

package/dist/es2019/hooks/useFetchSyncBlockData.js

@@ -1,14 +1,43 @@
-import { useEffect, useState } from 'react';
-export const SYNC_BLOCK_FETCH_INTERVAL = 3000;
-export const useFetchSyncBlockData = (manager, syncBlockNode) => {
+import { useCallback, useEffect, useState } from 'react';
+import { SyncBlockError } from '../common/types';
+import { createSyncBlockNode } from '../utils/createSyncBlock';
+export const useFetchSyncBlockData = (manager, resourceId, localId) => {
   const [syncBlockInstance, setSyncBlockInstance] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const referenceSyncBlockStoreManager = manager.getReferenceSyncBlockStoreManager();
+  const reloadData = useCallback(async () => {
+    if (isLoading) {
+      return;
+    }
+    const syncBlockNode = resourceId && localId ? createSyncBlockNode(localId, resourceId) : null;
+    if (!syncBlockNode) {
+      return;
+    }
+    setIsLoading(true);
+    try {
+      // Fetch sync block data, the `subscribeToSyncBlock` will update the state once data is fetched
+      await referenceSyncBlockStoreManager.fetchSyncBlocksData([syncBlockNode]);
+    } catch (error) {
+      // Set error state if fetching fails
+      setSyncBlockInstance({
+        resourceId: resourceId || '',
+        error: SyncBlockError.Errored
+      });
+    }
+    setIsLoading(false);
+  }, [isLoading, localId, referenceSyncBlockStoreManager, resourceId]);
   useEffect(() => {
-    const unsubscribe = manager.subscribeToSyncBlockData(syncBlockNode, data => {
+    const unsubscribe = referenceSyncBlockStoreManager.subscribeToSyncBlock(resourceId || '', localId || '', data => {
       setSyncBlockInstance(data);
+      setIsLoading(false);
     });
     return () => {
       unsubscribe();
     };
-  }, [manager, syncBlockNode]);
-  return syncBlockInstance;
+  }, [localId, referenceSyncBlockStoreManager, resourceId]);
+  return {
+    syncBlockInstance,
+    isLoading,
+    reloadData
+  };
 };

package/dist/es2019/hooks/useFetchSyncBlockTitle.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+export const useFetchSyncBlockTitle = (manager, syncBlockNode) => {
+  const [sourceTitle, setSourceTitle] = useState(undefined);
+  useEffect(() => {
+    const unsubscribe = manager.subscribeToSyncBlockSourceTitle(syncBlockNode, title => {
+      setSourceTitle(title);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [manager, syncBlockNode]);
+  return sourceTitle;
+};

package/dist/es2019/index.js

@@ -1,13 +1,16 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
 
-export { SyncBlockProvider as SyncedBlockProvider, useMemoizedSyncedBlockProvider } from './providers/syncBlockProvider';
-export { SyncBlockStoreManager } from './store-manager/syncBlockStoreManager';
+export { rebaseTransaction } from './common/rebase-transaction';
+export { getDefaultSyncBlockSchema } from './common/schema';
+export { SyncBlockError } from './common/types';
 export { useFetchSyncBlockData } from './hooks/useFetchSyncBlockData';
+export { useFetchSyncBlockTitle } from './hooks/useFetchSyncBlockTitle';
 export { useHandleContentChanges } from './hooks/useHandleContentChanges';
-export { SyncBlockError } from './common/types';
-export { getDefaultSyncBlockSchema } from './common/schema';
 export { createContentAPIProvidersWithDefaultKey, useMemoizedContentAPIProviders } from './providers/confluence/confluenceContentAPI';
+export { SyncBlockProvider as SyncedBlockProvider, useMemoizedSyncedBlockProvider } from './providers/syncBlockProvider';
+export { ReferenceSyncBlockStoreManager } from './store-manager/referenceSyncBlockStoreManager';
+export { SyncBlockStoreManager } from './store-manager/syncBlockStoreManager';
 export { getConfluencePageAri, getPageIdAndTypeFromAri } from './utils/ari';
-export { convertSyncBlockPMNodeToSyncBlockData } from './utils/utils';
-export { rebaseTransaction } from './common/rebase-transaction';
-export { resolveSyncBlockInstance } from './utils/resolveSyncBlockInstance';
+export { createSyncBlockNode } from './utils/createSyncBlock';
+export { resolveSyncBlockInstance } from './utils/resolveSyncBlockInstance';
+export { convertSyncBlockPMNodeToSyncBlockData } from './utils/utils';

package/dist/es2019/providers/syncBlockProvider.js

@@ -72,7 +72,7 @@ export class SyncBlockProvider extends SyncBlockDataProvider {
   getSourceId() {
     return this.sourceId;
   }
-  retrieveSyncBlockSourceUrl(node) {
+  retrieveSyncBlockSourceUrlAndTitle(node) {
     const {
       resourceId
     } = node.attrs;
@@ -90,7 +90,7 @@ export class SyncBlockProvider extends SyncBlockDataProvider {
         // EDITOR-1921: log analytic here, safe to continue
       }
     }
-    return pageARI ? fetchURLfromARI(pageARI, sourceLocalId) : Promise.resolve(undefined);
+    return pageARI ? fetchURLandTitlefromARI(pageARI, sourceLocalId) : Promise.resolve(undefined);
   }
 }
 export const useMemoizedSyncedBlockProvider = (fetchProvider, writeProvider, sourceId) => {
@@ -98,7 +98,7 @@ export const useMemoizedSyncedBlockProvider = (fetchProvider, writeProvider, sou
     return new SyncBlockProvider(fetchProvider, writeProvider, sourceId);
   }, [fetchProvider, writeProvider, sourceId]);
 };
-const fetchURLfromARI = async (ari, sourceLocalId) => {
+const fetchURLandTitlefromARI = async (ari, sourceLocalId) => {
   const response = await fetch('/gateway/api/object-resolver/resolve/ari', {
     method: 'POST',
     headers: {
@@ -110,15 +110,17 @@ const fetchURLfromARI = async (ari, sourceLocalId) => {
     })
   });
   if (response.ok) {
-    var _payload$data;
+    var _payload$data, _payload$data2;
     const payload = await response.json();
     const url = payload === null || payload === void 0 ? void 0 : (_payload$data = payload.data) === null || _payload$data === void 0 ? void 0 : _payload$data.url;
-    if (typeof url === 'string') {
-      return sourceLocalId ? url + `?block=${sourceLocalId}` : url;
-    }
+    const title = payload === null || payload === void 0 ? void 0 : (_payload$data2 = payload.data) === null || _payload$data2 === void 0 ? void 0 : _payload$data2.name;
+    return {
+      url: typeof url === 'string' ? sourceLocalId ? url + `?block=${sourceLocalId}` : url : undefined,
+      title: typeof title === 'string' ? title : undefined
+    };
   } else {
     //eslint-disable-next-line no-console
-    console.error('Failed to fetch URL from ARI', response.statusText);
+    console.error('Failed to fetch URL and title from ARI', response.statusText);
   }
   return undefined;
 };