@atlaskit/editor-synced-block-provider 2.1.2 → 2.2.1

package/dist/es2019/common/types.js

@@ -1,8 +1,6 @@
-import { NodeDataProvider } from '@atlaskit/node-data-provider';
 export let SyncBlockStatus = /*#__PURE__*/function (SyncBlockStatus) {
   SyncBlockStatus["Errored"] = "errored";
   SyncBlockStatus["NotFound"] = "not_found";
   SyncBlockStatus["Unauthorized"] = "unauthorized";
   return SyncBlockStatus;
-}({});
-export class SyncBlockDataProvider extends NodeDataProvider {}
+}({});

package/dist/es2019/hooks/useFetchSyncBlockData.js

@@ -0,0 +1,32 @@
+import { useCallback, useEffect, useState } from 'react';
+import { SyncBlockStatus } from '../common/types';
+export const useFetchSyncBlockData = (manager, syncBlockNode) => {
+  const [fetchSyncBlockDataResult, setFetchSyncBlockDataResult] = useState(null);
+  const fetchSyncBlockNode = useCallback(() => {
+    manager.fetchSyncBlockData(syncBlockNode).then(data => {
+      if (data && 'status' in data) {
+        // if there is an error, we don't want to replace real existing data with the error data
+        if (!fetchSyncBlockDataResult || 'status' in fetchSyncBlockDataResult) {
+          setFetchSyncBlockDataResult(data);
+        }
+      } else {
+        setFetchSyncBlockDataResult(data !== null && data !== void 0 ? data : null);
+      }
+    }).catch(() => {
+      //TODO: EDITOR-1921 - add error analytics
+      if (!fetchSyncBlockDataResult || 'status' in fetchSyncBlockDataResult) {
+        setFetchSyncBlockDataResult({
+          status: SyncBlockStatus.Errored
+        });
+      }
+    });
+  }, [manager, syncBlockNode, fetchSyncBlockDataResult]);
+  useEffect(() => {
+    fetchSyncBlockNode();
+    const interval = window.setInterval(fetchSyncBlockNode, 3000);
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [fetchSyncBlockNode]);
+  return fetchSyncBlockDataResult;
+};

package/dist/es2019/hooks/useHandleContentChanges.js

@@ -0,0 +1,7 @@
+import { useEffect } from 'react';
+export const useHandleContentChanges = (manager, syncBlockNode) => {
+  useEffect(() => {
+    //TODO: EDITOR-1921 - add error analytics
+    manager.updateSyncBlockData(syncBlockNode);
+  }, [manager, syncBlockNode]);
+};

package/dist/es2019/index.js

@@ -1,11 +1,13 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
 
-export { SyncBlockProvider as SyncedBlockProvider, useMemoizedSyncedBlockProvider } from './common/syncBlockProvider';
-export { SyncBlockStoreManager, useFetchSyncBlockData, useHandleContentChanges } from './common/syncBlockStoreManager';
+export { SyncBlockProvider as SyncedBlockProvider, useMemoizedSyncedBlockProvider } from './providers/syncBlockProvider';
+export { SyncBlockStoreManager } from './store-manager/syncBlockStoreManager';
+export { useFetchSyncBlockData } from './hooks/useFetchSyncBlockData';
+export { useHandleContentChanges } from './hooks/useHandleContentChanges';
 export { SyncBlockStatus } from './common/types';
-export { inMemoryFetchProvider, inMemoryWriteProvider } from './providers/inMemory';
+export { inMemoryFetchProvider, inMemoryWriteProvider } from './providers/in-memory/inMemory';
 export { getDefaultSyncBlockSchema } from './common/schema';
-export { createContentAPIProvidersWithDefaultKey, useMemoizedContentAPIProviders } from './providers/confluenceContentAPI';
+export { createContentAPIProvidersWithDefaultKey, useMemoizedContentAPIProviders } from './providers/confluence/confluenceContentAPI';
 export { getConfluencePageAri } from './utils/ari';
-export { convertSyncBlockPMNodeToSyncBlockNode as convertSyncBlockPMNodeToSyncBlockData } from './utils/utils';
+export { convertSyncBlockPMNodeToSyncBlockData } from './utils/utils';
 export { rebaseTransaction } from './common/rebase-transaction';

package/dist/es2019/providers/{confluenceContentAPI.js → confluence/confluenceContentAPI.js}

@@ -1,9 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { useMemo } from 'react';
-import { SyncBlockStatus } from '../common/types';
-import { getLocalIdFromAri, getPageIdAndTypeFromAri } from '../utils/ari';
-import { getContentProperty, createContentProperty, updateContentProperty } from '../utils/contentProperty';
-import { isBlogPageType } from '../utils/utils';
+import { SyncBlockStatus } from '../../common/types';
+import { getLocalIdFromAri, getPageIdAndTypeFromAri } from '../../utils/ari';
+import { getContentProperty, createContentProperty, updateContentProperty } from '../../utils/contentProperty';
+import { isBlogPageType } from '../../utils/utils';
 
 /**
  * Configuration for Content API providers

package/dist/es2019/{common → providers}/syncBlockProvider.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { useMemo } from 'react';
+import { SyncBlockDataProvider } from '../providers/types';
 import { getLocalIdFromAri, getPageARIFromResourceId } from '../utils/ari';
-import { SyncBlockDataProvider } from './types';
 export class SyncBlockProvider extends SyncBlockDataProvider {
   constructor(fetchProvider, writeProvider, sourceId) {
     super();

package/dist/es2019/providers/types.js

@@ -0,0 +1,2 @@
+import { NodeDataProvider } from '@atlaskit/node-data-provider';
+export class SyncBlockDataProvider extends NodeDataProvider {}

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

@@ -0,0 +1,83 @@
+const createSyncBlockNode = (localId, resourceId) => {
+  return {
+    type: 'syncBlock',
+    attrs: {
+      localId,
+      resourceId
+    }
+  };
+};
+export class ReferenceSyncBlockStoreManager {
+  constructor(dataProvider) {
+    this.dataProvider = dataProvider;
+    this.syncBlockCache = new Map();
+    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.
+   */
+  fetchSyncBlockSourceURL({
+    localId,
+    resourceId
+  }) {
+    if (!localId || !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(sourceURL => {
+        const existingSyncBlock = this.syncBlockCache.get(localId);
+        if (existingSyncBlock) {
+          existingSyncBlock.sourceURL = sourceURL;
+        }
+      }).finally(() => {
+        this.syncBlockURLRequests.set(localId, false);
+      });
+    }
+  }
+  async fetchSyncBlockData(syncBlockNode) {
+    if (!this.dataProvider) {
+      throw new Error('Data provider not set');
+    }
+    const syncNode = createSyncBlockNode(syncBlockNode.attrs.localId, syncBlockNode.attrs.resourceId);
+
+    // async fetch source URL if it is not already fetched
+    const 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
+      });
+    }
+    const data = await this.dataProvider.fetchNodesData([syncNode]);
+    if (!data) {
+      throw new Error('Failed to fetch sync block node data');
+    }
+    const fetchSyncBlockDataResult = data[0];
+    if (!('status' in fetchSyncBlockDataResult)) {
+      // only adds it to the map if it did not error out
+      this.syncBlockCache.set(syncBlockNode.attrs.localId, {
+        ...existingSyncBlock,
+        ...fetchSyncBlockDataResult
+      });
+    }
+    return fetchSyncBlockDataResult;
+  }
+
+  /**
+   * Get the URL for a sync block.
+   * @param localId - The local ID of the sync block to get the URL for
+   * @returns
+   */
+  getSyncBlockURL(localId) {
+    const syncBlock = this.syncBlockCache.get(localId);
+    return syncBlock === null || syncBlock === void 0 ? void 0 : syncBlock.sourceURL;
+  }
+}

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

@@ -0,0 +1,115 @@
+import uuid from 'uuid';
+import { rebaseTransaction } from '../common/rebase-transaction';
+import { resourceIdFromSourceAndLocalId } from '../utils/ari';
+import { convertSyncBlockPMNodeToSyncBlockData } from '../utils/utils';
+export class SourceSyncBlockStoreManager {
+  constructor(dataProvider) {
+    this.dataProvider = dataProvider;
+    this.syncBlockCache = new Map();
+  }
+
+  /**
+   * Add/update a sync block node to/from the local cache
+   * @param syncBlockNode - The sync block node to update
+   */
+  updateSyncBlockData(syncBlockNode) {
+    try {
+      const {
+        localId,
+        resourceId
+      } = syncBlockNode.attrs;
+      if (!localId || !resourceId) {
+        throw new Error('Local ID or resource ID is not set');
+      }
+      const syncBlockData = convertSyncBlockPMNodeToSyncBlockData(syncBlockNode);
+      this.syncBlockCache.set(localId, syncBlockData);
+    } catch {
+      //TODO: EDITOR-1921 - add error analytics
+    }
+  }
+
+  /**
+   * Save content of bodiedSyncBlock nodes in local cache to backend
+   *
+   * @returns true if saving all nodes successfully, false if fail to save some/all nodes
+   */
+  async flushBodiedSyncBlocks() {
+    try {
+      if (!this.dataProvider) {
+        throw new Error('Data provider not set');
+      }
+      const bodiedSyncBlockNodes = [];
+      const bodiedSyncBlockData = [];
+      Array.from(this.syncBlockCache.values()).forEach(syncBlockData => {
+        bodiedSyncBlockNodes.push({
+          type: 'bodiedSyncBlock',
+          attrs: {
+            localId: syncBlockData.blockInstanceId,
+            resourceId: syncBlockData.resourceId
+          }
+        });
+        bodiedSyncBlockData.push(syncBlockData);
+      });
+      if (bodiedSyncBlockNodes.length === 0) {
+        return Promise.resolve(true);
+      }
+      const resourceIds = await this.dataProvider.writeNodesData(bodiedSyncBlockNodes, bodiedSyncBlockData);
+      return resourceIds.every(resourceId => resourceId !== undefined);
+    } catch {
+      //TODO: EDITOR-1921 - add error analytics
+      return false;
+    }
+  }
+  setEditorView(editorView) {
+    this.editorView = editorView;
+  }
+  registerConfirmationCallback(callback) {
+    this.confirmationCallback = callback;
+    return () => {
+      this.confirmationCallback = undefined;
+    };
+  }
+  requireConfirmationBeforeDelete() {
+    return !!this.confirmationCallback;
+  }
+  createSyncBlockNode() {
+    var _this$dataProvider;
+    const blockInstanceId = uuid();
+    const sourceId = (_this$dataProvider = this.dataProvider) === null || _this$dataProvider === void 0 ? void 0 : _this$dataProvider.getSourceId();
+    if (!sourceId) {
+      throw new Error('Provider of sync block plugin is not set');
+    }
+
+    // This should be generated by the data provider implementation as it differs between data providers
+    const resourceId = resourceIdFromSourceAndLocalId(sourceId, blockInstanceId);
+    const syncBlockNode = {
+      attrs: {
+        resourceId,
+        localId: blockInstanceId
+      },
+      type: 'bodiedSyncBlock'
+    };
+    return syncBlockNode;
+  }
+  async deleteSyncBlocksWithConfirmation(tr, syncBlockIds) {
+    if (this.confirmationCallback) {
+      this.confirmationTransaction = tr;
+      const confirmed = await this.confirmationCallback();
+      if (confirmed) {
+        var _this$editorView;
+        (_this$editorView = this.editorView) === null || _this$editorView === void 0 ? void 0 : _this$editorView.dispatch(this.confirmationTransaction.setMeta('isConfirmedSyncBlockDeletion', true));
+        // Need to update the BE on deletion
+        syncBlockIds.forEach(({
+          localId
+        }) => this.syncBlockCache.delete(localId));
+      }
+      this.confirmationTransaction = undefined;
+    }
+  }
+  rebaseTransaction(incomingTr, state) {
+    if (!this.confirmationTransaction) {
+      return;
+    }
+    this.confirmationTransaction = rebaseTransaction(this.confirmationTransaction, incomingTr, state);
+  }
+}

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

@@ -0,0 +1,79 @@
+import { ReferenceSyncBlockStoreManager } from './referenceSyncBlockStoreManager';
+import { SourceSyncBlockStoreManager } from './sourceSyncBlockStoreManager';
+
+// A store manager responsible for the lifecycle and state management of sync blocks in an editor instance.
+// Supports create, read, update, and delete operations for sync blocks.
+// Designed to manage local in-memory state and synchronize with an external data provider.
+// Handles caching, debouncing updates, and publish/subscribe for local changes.
+// Ensures consistency between local and remote state, and can be used in both editor and renderer contexts.
+export class SyncBlockStoreManager {
+  constructor(dataProvider) {
+    this.referenceSyncBlockStoreManager = new ReferenceSyncBlockStoreManager(dataProvider);
+    this.sourceSyncBlockStoreManager = new SourceSyncBlockStoreManager(dataProvider);
+  }
+  fetchSyncBlockData(syncBlockNode) {
+    if (this.isSourceBlock(syncBlockNode)) {
+      return Promise.reject(new Error('Invalid sync block node type provided for fetchSyncBlockData'));
+    }
+    return this.referenceSyncBlockStoreManager.fetchSyncBlockData(syncBlockNode);
+  }
+
+  /**
+   * Add/update a sync block node to/from the local cache
+   * @param syncBlockNode - The sync block node to update
+   */
+  updateSyncBlockData(syncBlockNode) {
+    if (this.isSourceBlock(syncBlockNode)) {
+      this.sourceSyncBlockStoreManager.updateSyncBlockData(syncBlockNode);
+    } else {
+      throw new Error('Invalid sync block node type provided for updateSyncBlockData');
+    }
+  }
+
+  /**
+   * Save content of bodiedSyncBlock nodes in local cache to backend
+   *
+   * @returns true if saving all nodes successfully, false if fail to save some/all nodes
+   */
+  flushBodiedSyncBlocks() {
+    // only applicable to source sync block, for now (will be refactored further)
+    return this.sourceSyncBlockStoreManager.flushBodiedSyncBlocks();
+  }
+
+  /**
+   * Get the URL for a sync block.
+   * @param localId - The local ID of the sync block to get the URL for
+   * @returns
+   */
+  getSyncBlockURL(localId) {
+    // only applicable to reference sync block, for now (will be refactored further)
+    return this.referenceSyncBlockStoreManager.getSyncBlockURL(localId);
+  }
+  setEditorView(editorView) {
+    // only applicable to source sync block, for now (will be refactored further)
+    this.sourceSyncBlockStoreManager.setEditorView(editorView);
+  }
+  isSourceBlock(node) {
+    return node.type.name === 'bodiedSyncBlock';
+  }
+  registerConfirmationCallback(callback) {
+    // only applicable to source sync block, for now (will be refactored further)
+    return this.sourceSyncBlockStoreManager.registerConfirmationCallback(callback);
+  }
+  requireConfirmationBeforeDelete() {
+    // only applicable to source sync block, for now (will be refactored further)
+    return this.sourceSyncBlockStoreManager.requireConfirmationBeforeDelete();
+  }
+  createSyncBlockNode() {
+    // only applicable to source sync block, for now (will be refactored further)
+    return this.sourceSyncBlockStoreManager.createSyncBlockNode();
+  }
+  deleteSyncBlocksWithConfirmation(tr, syncBlockIds) {
+    // only applicable to source sync block, for now (will be refactored further)
+    return this.sourceSyncBlockStoreManager.deleteSyncBlocksWithConfirmation(tr, syncBlockIds);
+  }
+  rebaseTransaction(incomingTr, state) {
+    // only applicable to source sync block, for now (will be refactored further)
+    this.sourceSyncBlockStoreManager.rebaseTransaction(incomingTr, state);
+  }
+}

package/dist/es2019/utils/utils.js

@@ -1,16 +1,3 @@
-import { JSONTransformer } from '@atlaskit/editor-json-transformer';
-export const convertSyncBlockPMNodeToSyncBlockNode = (node, includeContent = false) => {
-  const transformer = new JSONTransformer();
-  const toJSON = node => transformer.encodeNode(node);
-  return {
-    type: 'syncBlock',
-    attrs: {
-      localId: node.attrs.localId,
-      resourceId: node.attrs.resourceId
-    },
-    content: includeContent ? node.content.content.map(toJSON) : undefined
-  };
-};
 export const convertSyncBlockPMNodeToSyncBlockData = node => {
   return {
     blockInstanceId: node.attrs.localId,

package/dist/esm/common/types.js

@@ -1,22 +1,6 @@
-import _createClass from "@babel/runtime/helpers/createClass";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
-import { NodeDataProvider } from '@atlaskit/node-data-provider';
 export var SyncBlockStatus = /*#__PURE__*/function (SyncBlockStatus) {
   SyncBlockStatus["Errored"] = "errored";
   SyncBlockStatus["NotFound"] = "not_found";
   SyncBlockStatus["Unauthorized"] = "unauthorized";
   return SyncBlockStatus;
-}({});
-export var SyncBlockDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
-  function SyncBlockDataProvider() {
-    _classCallCheck(this, SyncBlockDataProvider);
-    return _callSuper(this, SyncBlockDataProvider, arguments);
-  }
-  _inherits(SyncBlockDataProvider, _NodeDataProvider);
-  return _createClass(SyncBlockDataProvider);
-}(NodeDataProvider);
+}({});

package/dist/esm/hooks/useFetchSyncBlockData.js

@@ -0,0 +1,36 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useEffect, useState } from 'react';
+import { SyncBlockStatus } from '../common/types';
+export var useFetchSyncBlockData = function useFetchSyncBlockData(manager, syncBlockNode) {
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    fetchSyncBlockDataResult = _useState2[0],
+    setFetchSyncBlockDataResult = _useState2[1];
+  var fetchSyncBlockNode = useCallback(function () {
+    manager.fetchSyncBlockData(syncBlockNode).then(function (data) {
+      if (data && 'status' in data) {
+        // if there is an error, we don't want to replace real existing data with the error data
+        if (!fetchSyncBlockDataResult || 'status' in fetchSyncBlockDataResult) {
+          setFetchSyncBlockDataResult(data);
+        }
+      } else {
+        setFetchSyncBlockDataResult(data !== null && data !== void 0 ? data : null);
+      }
+    }).catch(function () {
+      //TODO: EDITOR-1921 - add error analytics
+      if (!fetchSyncBlockDataResult || 'status' in fetchSyncBlockDataResult) {
+        setFetchSyncBlockDataResult({
+          status: SyncBlockStatus.Errored
+        });
+      }
+    });
+  }, [manager, syncBlockNode, fetchSyncBlockDataResult]);
+  useEffect(function () {
+    fetchSyncBlockNode();
+    var interval = window.setInterval(fetchSyncBlockNode, 3000);
+    return function () {
+      window.clearInterval(interval);
+    };
+  }, [fetchSyncBlockNode]);
+  return fetchSyncBlockDataResult;
+};

package/dist/esm/hooks/useHandleContentChanges.js

@@ -0,0 +1,7 @@
+import { useEffect } from 'react';
+export var useHandleContentChanges = function useHandleContentChanges(manager, syncBlockNode) {
+  useEffect(function () {
+    //TODO: EDITOR-1921 - add error analytics
+    manager.updateSyncBlockData(syncBlockNode);
+  }, [manager, syncBlockNode]);
+};

package/dist/esm/index.js

@@ -1,11 +1,13 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
 
-export { SyncBlockProvider as SyncedBlockProvider, useMemoizedSyncedBlockProvider } from './common/syncBlockProvider';
-export { SyncBlockStoreManager, useFetchSyncBlockData, useHandleContentChanges } from './common/syncBlockStoreManager';
+export { SyncBlockProvider as SyncedBlockProvider, useMemoizedSyncedBlockProvider } from './providers/syncBlockProvider';
+export { SyncBlockStoreManager } from './store-manager/syncBlockStoreManager';
+export { useFetchSyncBlockData } from './hooks/useFetchSyncBlockData';
+export { useHandleContentChanges } from './hooks/useHandleContentChanges';
 export { SyncBlockStatus } from './common/types';
-export { inMemoryFetchProvider, inMemoryWriteProvider } from './providers/inMemory';
+export { inMemoryFetchProvider, inMemoryWriteProvider } from './providers/in-memory/inMemory';
 export { getDefaultSyncBlockSchema } from './common/schema';
-export { createContentAPIProvidersWithDefaultKey, useMemoizedContentAPIProviders } from './providers/confluenceContentAPI';
+export { createContentAPIProvidersWithDefaultKey, useMemoizedContentAPIProviders } from './providers/confluence/confluenceContentAPI';
 export { getConfluencePageAri } from './utils/ari';
-export { convertSyncBlockPMNodeToSyncBlockNode as convertSyncBlockPMNodeToSyncBlockData } from './utils/utils';
+export { convertSyncBlockPMNodeToSyncBlockData } from './utils/utils';
 export { rebaseTransaction } from './common/rebase-transaction';

package/dist/esm/providers/{confluenceContentAPI.js → confluence/confluenceContentAPI.js}

@@ -5,10 +5,10 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useMemo } from 'react';
-import { SyncBlockStatus } from '../common/types';
-import { getLocalIdFromAri, getPageIdAndTypeFromAri } from '../utils/ari';
-import { getContentProperty, createContentProperty, updateContentProperty } from '../utils/contentProperty';
-import { isBlogPageType } from '../utils/utils';
+import { SyncBlockStatus } from '../../common/types';
+import { getLocalIdFromAri, getPageIdAndTypeFromAri } from '../../utils/ari';
+import { getContentProperty, createContentProperty, updateContentProperty } from '../../utils/contentProperty';
+import { isBlogPageType } from '../../utils/utils';
 
 /**
  * Configuration for Content API providers

package/dist/esm/{common → providers}/syncBlockProvider.js

@@ -9,8 +9,8 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 import { useMemo } from 'react';
+import { SyncBlockDataProvider } from '../providers/types';
 import { getLocalIdFromAri, getPageARIFromResourceId } from '../utils/ari';
-import { SyncBlockDataProvider } from './types';
 export var SyncBlockProvider = /*#__PURE__*/function (_SyncBlockDataProvide) {
   function SyncBlockProvider(fetchProvider, writeProvider, sourceId) {
     var _this;

package/dist/esm/providers/types.js

@@ -0,0 +1,16 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
+import { NodeDataProvider } from '@atlaskit/node-data-provider';
+export var SyncBlockDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
+  function SyncBlockDataProvider() {
+    _classCallCheck(this, SyncBlockDataProvider);
+    return _callSuper(this, SyncBlockDataProvider, arguments);
+  }
+  _inherits(SyncBlockDataProvider, _NodeDataProvider);
+  return _createClass(SyncBlockDataProvider);
+}(NodeDataProvider);

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

@@ -0,0 +1,116 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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) { _defineProperty(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; }
+var createSyncBlockNode = function createSyncBlockNode(localId, resourceId) {
+  return {
+    type: 'syncBlock',
+    attrs: {
+      localId: localId,
+      resourceId: resourceId
+    }
+  };
+};
+export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
+  function ReferenceSyncBlockStoreManager(dataProvider) {
+    _classCallCheck(this, ReferenceSyncBlockStoreManager);
+    this.dataProvider = dataProvider;
+    this.syncBlockCache = new Map();
+    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 _createClass(ReferenceSyncBlockStoreManager, [{
+    key: "fetchSyncBlockSourceURL",
+    value: function fetchSyncBlockSourceURL(_ref) {
+      var _this = this;
+      var localId = _ref.localId,
+        resourceId = _ref.resourceId;
+      if (!localId || !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;
+          }
+        }).finally(function () {
+          _this.syncBlockURLRequests.set(localId, false);
+        });
+      }
+    }
+  }, {
+    key: "fetchSyncBlockData",
+    value: function () {
+      var _fetchSyncBlockData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(syncBlockNode) {
+        var syncNode, existingSyncBlock, data, fetchSyncBlockDataResult;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (this.dataProvider) {
+                _context.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
+                });
+              }
+              _context.next = 7;
+              return this.dataProvider.fetchNodesData([syncNode]);
+            case 7:
+              data = _context.sent;
+              if (data) {
+                _context.next = 10;
+                break;
+              }
+              throw new Error('Failed to fetch sync block node data');
+            case 10:
+              fetchSyncBlockDataResult = data[0];
+              if (!('status' in fetchSyncBlockDataResult)) {
+                // only adds it to the map if it did not error out
+                this.syncBlockCache.set(syncBlockNode.attrs.localId, _objectSpread(_objectSpread({}, existingSyncBlock), fetchSyncBlockDataResult));
+              }
+              return _context.abrupt("return", fetchSyncBlockDataResult);
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function fetchSyncBlockData(_x) {
+        return _fetchSyncBlockData.apply(this, arguments);
+      }
+      return fetchSyncBlockData;
+    }()
+    /**
+     * Get the URL for a sync block.
+     * @param localId - The local ID of the sync block to get the URL for
+     * @returns
+     */
+  }, {
+    key: "getSyncBlockURL",
+    value: function getSyncBlockURL(localId) {
+      var syncBlock = this.syncBlockCache.get(localId);
+      return syncBlock === null || syncBlock === void 0 ? void 0 : syncBlock.sourceURL;
+    }
+  }]);
+}();