@atlaskit/editor-synced-block-provider 2.8.0 → 2.9.1

package/dist/es2019/providers/syncBlockProvider.js

@@ -5,19 +5,52 @@ import { SyncBlockDataProvider } from '../providers/types';
 import { getLocalIdFromAri, getPageARIFromResourceId } from '../utils/ari';
 import { fetchSourceInfo } from '../utils/sourceInfo';
 export class SyncBlockProvider extends SyncBlockDataProvider {
-  constructor(fetchProvider, writeProvider, sourceId) {
+  /**
+   * Constructor for the SyncBlockProvider
+   *
+   * @param fetchProvider
+   * @param writeProvider
+   * @param sourceId
+   * @param nestedRendererDataProviders
+   */
+  constructor(fetchProvider, writeProvider, sourceId, providerOptions) {
     super();
     _defineProperty(this, "name", 'syncBlockProvider');
     this.fetchProvider = fetchProvider;
     this.writeProvider = writeProvider;
     this.sourceId = sourceId;
+    this.providerOptions = providerOptions;
   }
+
+  /**
+   * Check if the node is supported by the provider
+   *
+   * @param node
+   *
+   * @returns True if the node is supported, false otherwise
+   */
   isNodeSupported(node) {
-    return node.type === 'syncBlock';
+    return node.type === 'syncBlock' || node.type === 'bodiedSyncBlock';
   }
+
+  /**
+   * Get the data key for the node
+   *
+   * @param node
+   *
+   * @returns The data key
+   */
   nodeDataKey(node) {
     return node.attrs.localId;
   }
+
+  /**
+   * Fetch the data from the fetch provider
+   *
+   * @param nodes
+   *
+   * @returns Array of {resourceId?: string, error?: string}.
+   */
   fetchNodesData(nodes) {
     const resourceIdSet = new Set(nodes.map(node => node.attrs.resourceId));
     const resourceIds = [...resourceIdSet];
@@ -38,6 +71,7 @@ export class SyncBlockProvider extends SyncBlockDataProvider {
   }
 
   /**
+   * Write the data to the write provider
    *
    * @param nodes
    * @param data
@@ -62,6 +96,14 @@ export class SyncBlockProvider extends SyncBlockDataProvider {
       }
     });
   }
+
+  /**
+   * Delete the data from the write provider
+   *
+   * @param resourceIds
+   *
+   * @returns Array of {resourceId?: string, error?: string}.
+   */
   async deleteNodesData(resourceIds) {
     const results = await Promise.allSettled(resourceIds.map(resourceId => this.writeProvider.deleteData(resourceId)));
     return results.map((result, index) => {
@@ -76,9 +118,23 @@ export class SyncBlockProvider extends SyncBlockDataProvider {
       }
     });
   }
+
+  /**
+   * Get the source id
+   *
+   * @returns The source id
+   */
   getSourceId() {
     return this.sourceId;
   }
+
+  /**
+   * Retrieve the source info from the source id
+   *
+   * @param node
+   *
+   * @returns The source info
+   */
   retrieveSyncBlockSourceInfo(node) {
     const {
       resourceId
@@ -99,9 +155,21 @@ export class SyncBlockProvider extends SyncBlockDataProvider {
     }
     return pageARI ? fetchSourceInfo(pageARI, sourceLocalId) : Promise.resolve(undefined);
   }
+  generateResourceId(sourceId, localId) {
+    return this.writeProvider.generateResourceId(sourceId, localId);
+  }
+
+  /**
+   * Get the synced block renderer provider options
+   *
+   * @returns The synced block renderer provider options
+   */
+  getSyncedBlockRendererProviderOptions() {
+    return this.providerOptions;
+  }
 }
-export const useMemoizedSyncedBlockProvider = (fetchProvider, writeProvider, sourceId) => {
+export const useMemoizedSyncedBlockProvider = (fetchProvider, writeProvider, sourceId, providerOptions) => {
   return useMemo(() => {
-    return new SyncBlockProvider(fetchProvider, writeProvider, sourceId);
-  }, [fetchProvider, writeProvider, sourceId]);
+    return new SyncBlockProvider(fetchProvider, writeProvider, sourceId, providerOptions);
+  }, [fetchProvider, writeProvider, sourceId, providerOptions]);
 };

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

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { SyncBlockError } from '../common/types';
 import { resolveSyncBlockInstance } from '../utils/resolveSyncBlockInstance';
 import { createSyncBlockNode } from '../utils/utils';
@@ -10,6 +11,7 @@ export class ReferenceSyncBlockStoreManager {
     this.titleSubscriptions = new Map();
     this.dataProvider = dataProvider;
     this.syncBlockURLRequests = new Map();
+    this.providerFactories = new Map();
   }
 
   /**
@@ -134,6 +136,7 @@ export class ReferenceSyncBlockStoreManager {
   }
   deleteFromCache(resourceId) {
     this.syncBlockCache.delete(resourceId);
+    this.providerFactories.delete(resourceId);
   }
   subscribeToSyncBlock(resourceId, localId, callback) {
     // add to subscriptions map
@@ -227,9 +230,31 @@ export class ReferenceSyncBlockStoreManager {
     }
     return (_syncBlock$data = syncBlock.data) === null || _syncBlock$data === void 0 ? void 0 : _syncBlock$data.sourceURL;
   }
+  getProviderFactory(resourceId) {
+    if (!this.dataProvider) {
+      return undefined;
+    }
+    const {
+      parentDataProviders
+    } = this.dataProvider.getSyncedBlockRendererProviderOptions();
+    if (!this.providerFactories.has(resourceId)) {
+      // TODO: EDITOR-2771 - In follow up PR, create media & emoji providers per ref sync block
+      // The media & emoji providers will be set later, once we get ref sync block data with page ID
+      // So we need to keep the reference to the Provider Factory so we can then set media & emoji providers later
+      this.providerFactories.set(resourceId, ProviderFactory.create({
+        emojiProvider: parentDataProviders === null || parentDataProviders === void 0 ? void 0 : parentDataProviders.emojiProvider,
+        mediaProvider: parentDataProviders === null || parentDataProviders === void 0 ? void 0 : parentDataProviders.mediaProvider,
+        mentionProvider: parentDataProviders === null || parentDataProviders === void 0 ? void 0 : parentDataProviders.mentionProvider,
+        profilecardProvider: parentDataProviders === null || parentDataProviders === void 0 ? void 0 : parentDataProviders.profilecardProvider,
+        taskDecisionProvider: parentDataProviders === null || parentDataProviders === void 0 ? void 0 : parentDataProviders.taskDecisionProvider
+      }));
+    }
+    return this.providerFactories.get(resourceId);
+  }
   destroy() {
     this.syncBlockCache.clear();
     this.subscriptions.clear();
     this.syncBlockURLRequests.clear();
+    this.providerFactories.clear();
   }
 }

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

@@ -2,7 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { rebaseTransaction } from '../common/rebase-transaction';
-import { resourceIdFromSourceAndLocalId } from '../utils/ari';
 import { convertSyncBlockPMNodeToSyncBlockData, createBodiedSyncBlockNode } from '../utils/utils';
 export class SourceSyncBlockStoreManager {
   constructor(dataProvider) {
@@ -106,12 +105,10 @@ export class SourceSyncBlockStoreManager {
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     const localId = uuid();
     const sourceId = (_this$dataProvider = this.dataProvider) === null || _this$dataProvider === void 0 ? void 0 : _this$dataProvider.getSourceId();
-    if (!sourceId) {
+    if (!this.dataProvider || !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, localId);
+    const resourceId = this.dataProvider.generateResourceId(sourceId, localId);
     return {
       resourceId,
       localId

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

@@ -122,6 +122,9 @@ export class SyncBlockStoreManager {
     // only applicable to source sync block, for now (will be refactored further)
     this.sourceSyncBlockStoreManager.rebaseTransaction(incomingTr, state);
   }
+  getReferenceSyncBlockProviderFactory(resourceId) {
+    return this.referenceSyncBlockStoreManager.getProviderFactory(resourceId);
+  }
   destroy() {
     this.referenceSyncBlockStoreManager.destroy();
   }

package/dist/es2019/utils/ari.js

@@ -25,7 +25,37 @@ export const getPageARIFromResourceId = resourceId => {
   }
   throw new Error(`Invalid resourceId: ${resourceId}`);
 };
-export const getContentPropertyAri = (contentPropertyId, cloudId) => `ari:cloud:confluence:${cloudId}:content/${contentPropertyId}`;
 export const resourceIdFromSourceAndLocalId = (sourceId, localId) => {
   return sourceId + '/' + localId;
+};
+
+/**
+ * For the following functions, they are used for the block service API provider.
+ * The resourceId/blockResourceId always refers to the block ARI.
+ */
+
+/**
+ * @param sourceId - the ARI of the document. E.G ari:cloud:confluence:cloudId:page/pageId
+ * @param localId - the localId of the block node. A randomly generated UUID
+ * @returns the block ARI. E.G ari:cloud:blocks:cloudId:synced-block/localId
+ */
+export const blockResourceIdFromSourceAndLocalId = (sourceId, localId) => {
+  const match = sourceId.match(/ari:cloud:confluence:([^:]+):(page|blogpost)\/.*/);
+  if (!(match !== null && match !== void 0 && match[1])) {
+    throw new Error(`Invalid source ARI: ${sourceId}`);
+  }
+  const cloudId = match[1];
+  return `ari:cloud:blocks:${cloudId}:synced-block/${localId}`;
+};
+
+/**
+ * @param ari - the block ARI. E.G ari:cloud:blocks:cloudId:synced-block/localId
+ * @returns the localId of the block node. A randomly generated UUID
+ */
+export const getLocalIdFromResourceId = ari => {
+  const match = ari.match(/ari:cloud:confluence:[^:]+:(page|blogpost)\/\d+\/([a-zA-Z0-9-]+)/);
+  if (match !== null && match !== void 0 && match[2]) {
+    return match[2];
+  }
+  throw new Error(`Invalid page ARI: ${ari}`);
 };

package/dist/esm/hooks/useFetchSyncBlockData.js

@@ -65,8 +65,9 @@ export var useFetchSyncBlockData = function useFetchSyncBlockData(manager, resou
     };
   }, [localId, referenceSyncBlockStoreManager, resourceId]);
   return {
-    syncBlockInstance: syncBlockInstance,
     isLoading: isLoading,
-    reloadData: reloadData
+    providerFactory: referenceSyncBlockStoreManager.getProviderFactory(resourceId || ''),
+    reloadData: reloadData,
+    syncBlockInstance: syncBlockInstance
   };
 };

package/dist/esm/index.js

@@ -10,6 +10,6 @@ export { createContentAPIProvidersWithDefaultKey, useMemoizedContentAPIProviders
 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 { blockResourceIdFromSourceAndLocalId, getConfluencePageAri, getLocalIdFromAri, getLocalIdFromResourceId, getPageARIFromResourceId, getPageIdAndTypeFromAri, resourceIdFromSourceAndLocalId } from './utils/ari';
 export { createSyncBlockNode, convertSyncBlockPMNodeToSyncBlockData, convertSyncBlockJSONNodeToSyncBlockNode } from './utils/utils';
 export { resolveSyncBlockInstance } from './utils/resolveSyncBlockInstance';

package/dist/esm/providers/block-service/blockServiceAPI.js

@@ -4,7 +4,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useMemo } from 'react';
 import { SyncBlockError } from '../../common/types';
-import { getLocalIdFromAri, resourceIdFromSourceAndLocalId } from '../../utils/ari';
+import { blockResourceIdFromSourceAndLocalId, getLocalIdFromResourceId } from '../../utils/ari';
 import { BlockError, createSyncedBlock, deleteSyncedBlock, getSyncedBlockContent, updateSyncedBlock } from '../../utils/blockService';
 import { stringifyError } from '../../utils/errorHandling';
 var mapBlockError = function mapBlockError(error) {
@@ -27,21 +27,22 @@ var BlockServiceADFFetchProvider = /*#__PURE__*/function () {
   return _createClass(BlockServiceADFFetchProvider, [{
     key: "fetchData",
     value: // resourceId is the ARI of the block. E.G ari:cloud:blocks:site-123:synced-block/uuid-456
+    // in the content API provider, this was the concatenation of the source document's ARI and the local ID. E.G ari:cloud:confluence:site-123:page/pageId/uuid-456
     function () {
       var _fetchData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(resourceId) {
-        var localId, contentProperty, value, syncedBlockData;
+        var localId, blockContentResponse, value, syncedBlockData;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              localId = getLocalIdFromAri(resourceId);
+              localId = getLocalIdFromResourceId(resourceId);
               _context.prev = 1;
               _context.next = 4;
               return getSyncedBlockContent({
                 blockAri: resourceId
               });
             case 4:
-              contentProperty = _context.sent;
-              value = contentProperty.content;
+              blockContentResponse = _context.sent;
+              value = blockContentResponse.content;
               if (value) {
                 _context.next = 8;
                 break;
@@ -51,7 +52,7 @@ var BlockServiceADFFetchProvider = /*#__PURE__*/function () {
                 resourceId: resourceId
               });
             case 8:
-              // Parse the synced block content from the property value
+              // Parse the synced block content from the response's content
               syncedBlockData = JSON.parse(value);
               return _context.abrupt("return", {
                 data: {
@@ -99,7 +100,7 @@ var BlockServiceADFWriteProvider = /*#__PURE__*/function () {
   }
   return _createClass(BlockServiceADFWriteProvider, [{
     key: "writeData",
-    value: // it will first try to update and if it can't (404) then it will try to create 
+    value: // it will first try to update and if it can't (404) then it will try to create
     function () {
       var _writeData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(data) {
         var resourceId;
@@ -130,7 +131,7 @@ var BlockServiceADFWriteProvider = /*#__PURE__*/function () {
               }
               _context2.next = 13;
               return createSyncedBlock({
-                blockAri: resourceIdFromSourceAndLocalId(resourceId, data.blockInstanceId),
+                blockAri: resourceId,
                 blockInstanceId: data.blockInstanceId,
                 sourceAri: resourceId,
                 product: 'confluence-page',
@@ -159,7 +160,7 @@ var BlockServiceADFWriteProvider = /*#__PURE__*/function () {
         return _writeData.apply(this, arguments);
       }
       return writeData;
-    }() // soft deletes the source synced block 
+    }() // soft deletes the source synced block
   }, {
     key: "deleteData",
     value: function () {
@@ -207,6 +208,11 @@ var BlockServiceADFWriteProvider = /*#__PURE__*/function () {
       }
       return deleteData;
     }()
+  }, {
+    key: "generateResourceId",
+    value: function generateResourceId(sourceId, localId) {
+      return blockResourceIdFromSourceAndLocalId(sourceId, localId);
+    }
   }]);
 }();
 /**

package/dist/esm/providers/confluence/confluenceContentAPI.js

@@ -6,7 +6,7 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useMemo } from 'react';
 import { SyncBlockError } from '../../common/types';
-import { getLocalIdFromAri, getPageIdAndTypeFromAri } from '../../utils/ari';
+import { getLocalIdFromAri, getPageIdAndTypeFromAri, resourceIdFromSourceAndLocalId } from '../../utils/ari';
 import { getContentProperty, createContentProperty, updateContentProperty, deleteContentProperty } from '../../utils/contentProperty';
 import { stringifyError } from '../../utils/errorHandling';
 import { isBlogPageType } from '../../utils/utils';
@@ -337,6 +337,11 @@ var ConfluenceADFWriteProvider = /*#__PURE__*/function () {
       }
       return deleteData;
     }()
+  }, {
+    key: "generateResourceId",
+    value: function generateResourceId(sourceId, localId) {
+      return resourceIdFromSourceAndLocalId(sourceId, localId);
+    }
   }]);
 }();
 /**

package/dist/esm/providers/syncBlockProvider.js

@@ -15,7 +15,15 @@ import { SyncBlockDataProvider } from '../providers/types';
 import { getLocalIdFromAri, getPageARIFromResourceId } from '../utils/ari';
 import { fetchSourceInfo } from '../utils/sourceInfo';
 export var SyncBlockProvider = /*#__PURE__*/function (_SyncBlockDataProvide) {
-  function SyncBlockProvider(fetchProvider, writeProvider, sourceId) {
+  /**
+   * Constructor for the SyncBlockProvider
+   *
+   * @param fetchProvider
+   * @param writeProvider
+   * @param sourceId
+   * @param nestedRendererDataProviders
+   */
+  function SyncBlockProvider(fetchProvider, writeProvider, sourceId, providerOptions) {
     var _this;
     _classCallCheck(this, SyncBlockProvider);
     _this = _callSuper(this, SyncBlockProvider);
@@ -23,19 +31,44 @@ export var SyncBlockProvider = /*#__PURE__*/function (_SyncBlockDataProvide) {
     _this.fetchProvider = fetchProvider;
     _this.writeProvider = writeProvider;
     _this.sourceId = sourceId;
+    _this.providerOptions = providerOptions;
     return _this;
   }
+
+  /**
+   * Check if the node is supported by the provider
+   *
+   * @param node
+   *
+   * @returns True if the node is supported, false otherwise
+   */
   _inherits(SyncBlockProvider, _SyncBlockDataProvide);
   return _createClass(SyncBlockProvider, [{
     key: "isNodeSupported",
     value: function isNodeSupported(node) {
-      return node.type === 'syncBlock';
+      return node.type === 'syncBlock' || node.type === 'bodiedSyncBlock';
     }
+
+    /**
+     * Get the data key for the node
+     *
+     * @param node
+     *
+     * @returns The data key
+     */
   }, {
     key: "nodeDataKey",
     value: function nodeDataKey(node) {
       return node.attrs.localId;
     }
+
+    /**
+     * Fetch the data from the fetch provider
+     *
+     * @param nodes
+     *
+     * @returns Array of {resourceId?: string, error?: string}.
+     */
   }, {
     key: "fetchNodesData",
     value: function fetchNodesData(nodes) {
@@ -63,6 +96,7 @@ export var SyncBlockProvider = /*#__PURE__*/function (_SyncBlockDataProvide) {
     }
 
     /**
+     * Write the data to the write provider
      *
      * @param nodes
      * @param data
@@ -107,10 +141,18 @@ export var SyncBlockProvider = /*#__PURE__*/function (_SyncBlockDataProvide) {
         return _writeNodesData.apply(this, arguments);
       }
       return writeNodesData;
-    }())
+    }()
+    /**
+     * Delete the data from the write provider
+     *
+     * @param resourceIds
+     *
+     * @returns Array of {resourceId?: string, error?: string}.
+     */
+    )
   }, {
     key: "deleteNodesData",
-    value: function () {
+    value: (function () {
       var _deleteNodesData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(resourceIds) {
         var _this4 = this;
         var results;
@@ -145,11 +187,25 @@ export var SyncBlockProvider = /*#__PURE__*/function (_SyncBlockDataProvide) {
       }
       return deleteNodesData;
     }()
+    /**
+     * Get the source id
+     *
+     * @returns The source id
+     */
+    )
   }, {
     key: "getSourceId",
     value: function getSourceId() {
       return this.sourceId;
     }
+
+    /**
+     * Retrieve the source info from the source id
+     *
+     * @param node
+     *
+     * @returns The source info
+     */
   }, {
     key: "retrieveSyncBlockSourceInfo",
     value: function retrieveSyncBlockSourceInfo(node) {
@@ -170,10 +226,26 @@ export var SyncBlockProvider = /*#__PURE__*/function (_SyncBlockDataProvide) {
       }
       return pageARI ? fetchSourceInfo(pageARI, sourceLocalId) : Promise.resolve(undefined);
     }
+  }, {
+    key: "generateResourceId",
+    value: function generateResourceId(sourceId, localId) {
+      return this.writeProvider.generateResourceId(sourceId, localId);
+    }
+
+    /**
+     * Get the synced block renderer provider options
+     *
+     * @returns The synced block renderer provider options
+     */
+  }, {
+    key: "getSyncedBlockRendererProviderOptions",
+    value: function getSyncedBlockRendererProviderOptions() {
+      return this.providerOptions;
+    }
   }]);
 }(SyncBlockDataProvider);
-export var useMemoizedSyncedBlockProvider = function useMemoizedSyncedBlockProvider(fetchProvider, writeProvider, sourceId) {
+export var useMemoizedSyncedBlockProvider = function useMemoizedSyncedBlockProvider(fetchProvider, writeProvider, sourceId, providerOptions) {
   return useMemo(function () {
-    return new SyncBlockProvider(fetchProvider, writeProvider, sourceId);
-  }, [fetchProvider, writeProvider, sourceId]);
+    return new SyncBlockProvider(fetchProvider, writeProvider, sourceId, providerOptions);
+  }, [fetchProvider, writeProvider, sourceId, providerOptions]);
 };

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

@@ -9,6 +9,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; }
+import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { SyncBlockError } from '../common/types';
 import { resolveSyncBlockInstance } from '../utils/resolveSyncBlockInstance';
 import { createSyncBlockNode } from '../utils/utils';
@@ -21,6 +22,7 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
     this.titleSubscriptions = new Map();
     this.dataProvider = dataProvider;
     this.syncBlockURLRequests = new Map();
+    this.providerFactories = new Map();
   }
 
   /**
@@ -236,6 +238,7 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
     key: "deleteFromCache",
     value: function deleteFromCache(resourceId) {
       this.syncBlockCache.delete(resourceId);
+      this.providerFactories.delete(resourceId);
     }
   }, {
     key: "subscribeToSyncBlock",
@@ -331,12 +334,35 @@ export var ReferenceSyncBlockStoreManager = /*#__PURE__*/function () {
       }
       return (_syncBlock$data = syncBlock.data) === null || _syncBlock$data === void 0 ? void 0 : _syncBlock$data.sourceURL;
     }
+  }, {
+    key: "getProviderFactory",
+    value: function getProviderFactory(resourceId) {
+      if (!this.dataProvider) {
+        return undefined;
+      }
+      var _this$dataProvider$ge = this.dataProvider.getSyncedBlockRendererProviderOptions(),
+        parentDataProviders = _this$dataProvider$ge.parentDataProviders;
+      if (!this.providerFactories.has(resourceId)) {
+        // TODO: EDITOR-2771 - In follow up PR, create media & emoji providers per ref sync block
+        // The media & emoji providers will be set later, once we get ref sync block data with page ID
+        // So we need to keep the reference to the Provider Factory so we can then set media & emoji providers later
+        this.providerFactories.set(resourceId, ProviderFactory.create({
+          emojiProvider: parentDataProviders === null || parentDataProviders === void 0 ? void 0 : parentDataProviders.emojiProvider,
+          mediaProvider: parentDataProviders === null || parentDataProviders === void 0 ? void 0 : parentDataProviders.mediaProvider,
+          mentionProvider: parentDataProviders === null || parentDataProviders === void 0 ? void 0 : parentDataProviders.mentionProvider,
+          profilecardProvider: parentDataProviders === null || parentDataProviders === void 0 ? void 0 : parentDataProviders.profilecardProvider,
+          taskDecisionProvider: parentDataProviders === null || parentDataProviders === void 0 ? void 0 : parentDataProviders.taskDecisionProvider
+        }));
+      }
+      return this.providerFactories.get(resourceId);
+    }
   }, {
     key: "destroy",
     value: function destroy() {
       this.syncBlockCache.clear();
       this.subscriptions.clear();
       this.syncBlockURLRequests.clear();
+      this.providerFactories.clear();
     }
   }]);
 }();

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

@@ -6,7 +6,6 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { rebaseTransaction as _rebaseTransaction } from '../common/rebase-transaction';
-import { resourceIdFromSourceAndLocalId } from '../utils/ari';
 import { convertSyncBlockPMNodeToSyncBlockData, createBodiedSyncBlockNode as _createBodiedSyncBlockNode } from '../utils/utils';
 export var SourceSyncBlockStoreManager = /*#__PURE__*/function () {
   function SourceSyncBlockStoreManager(dataProvider) {
@@ -158,12 +157,10 @@ export var SourceSyncBlockStoreManager = /*#__PURE__*/function () {
       // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
       var localId = uuid();
       var sourceId = (_this$dataProvider = this.dataProvider) === null || _this$dataProvider === void 0 ? void 0 : _this$dataProvider.getSourceId();
-      if (!sourceId) {
+      if (!this.dataProvider || !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
-      var resourceId = resourceIdFromSourceAndLocalId(sourceId, localId);
+      var resourceId = this.dataProvider.generateResourceId(sourceId, localId);
       return {
         resourceId: resourceId,
         localId: localId

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

@@ -165,6 +165,11 @@ export var SyncBlockStoreManager = /*#__PURE__*/function () {
       // only applicable to source sync block, for now (will be refactored further)
       this.sourceSyncBlockStoreManager.rebaseTransaction(incomingTr, state);
     }
+  }, {
+    key: "getReferenceSyncBlockProviderFactory",
+    value: function getReferenceSyncBlockProviderFactory(resourceId) {
+      return this.referenceSyncBlockStoreManager.getProviderFactory(resourceId);
+    }
   }, {
     key: "destroy",
     value: function destroy() {

package/dist/esm/utils/ari.js

@@ -28,9 +28,37 @@ export var getPageARIFromResourceId = function getPageARIFromResourceId(resource
   }
   throw new Error("Invalid resourceId: ".concat(resourceId));
 };
-export var getContentPropertyAri = function getContentPropertyAri(contentPropertyId, cloudId) {
-  return "ari:cloud:confluence:".concat(cloudId, ":content/").concat(contentPropertyId);
-};
 export var resourceIdFromSourceAndLocalId = function resourceIdFromSourceAndLocalId(sourceId, localId) {
   return sourceId + '/' + localId;
+};
+
+/**
+ * For the following functions, they are used for the block service API provider.
+ * The resourceId/blockResourceId always refers to the block ARI.
+ */
+
+/**
+ * @param sourceId - the ARI of the document. E.G ari:cloud:confluence:cloudId:page/pageId
+ * @param localId - the localId of the block node. A randomly generated UUID
+ * @returns the block ARI. E.G ari:cloud:blocks:cloudId:synced-block/localId
+ */
+export var blockResourceIdFromSourceAndLocalId = function blockResourceIdFromSourceAndLocalId(sourceId, localId) {
+  var match = sourceId.match(/ari:cloud:confluence:([^:]+):(page|blogpost)\/.*/);
+  if (!(match !== null && match !== void 0 && match[1])) {
+    throw new Error("Invalid source ARI: ".concat(sourceId));
+  }
+  var cloudId = match[1];
+  return "ari:cloud:blocks:".concat(cloudId, ":synced-block/").concat(localId);
+};
+
+/**
+ * @param ari - the block ARI. E.G ari:cloud:blocks:cloudId:synced-block/localId
+ * @returns the localId of the block node. A randomly generated UUID
+ */
+export var getLocalIdFromResourceId = function getLocalIdFromResourceId(ari) {
+  var match = ari.match(/ari:cloud:confluence:[^:]+:(page|blogpost)\/\d+\/([a-zA-Z0-9-]+)/);
+  if (match !== null && match !== void 0 && match[2]) {
+    return match[2];
+  }
+  throw new Error("Invalid page ARI: ".concat(ari));
 };