@atlaskit/editor-synced-block-provider 0.1.3 → 0.3.0

package/dist/es2019/common/schema.js

@@ -0,0 +1,13 @@
+import { createSchema } from '@atlaskit/adf-schema';
+
+/**
+ * We currently do not need any of the new features, like nested tables
+ * Otherwise we could import defaultSchemaConfig from '@atlaskit/adf-schema/schema-default';
+ * @returns
+ */
+export const getDefaultSyncBlockSchema = () => {
+  return createSchema({
+    nodes: ['doc', 'paragraph', 'text', 'bulletList', 'orderedList', 'listItem', 'heading', 'blockquote', 'codeBlock', 'panel', 'rule', 'expand', 'nestedExpand', 'table', 'tableCell', 'tableHeader', 'tableRow', 'date', 'status', 'layoutSection', 'layoutColumn', 'unsupportedBlock', 'unsupportedInline'],
+    marks: ['link', 'em', 'strong', 'strike', 'subsup', 'underline', 'code', 'textColor', 'backgroundColor', 'alignment', 'indentation', 'border', 'unsupportedMark', 'unsupportedNodeAttribute', 'typeAheadQuery']
+  });
+};

package/dist/es2019/common/syncBlockProvider.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { convertSyncBlockPMNodeToSyncBlockData } from '../utils/utils';
 import { SyncBlockDataProvider } from './types';
 export class SyncBlockProvider extends SyncBlockDataProvider {
@@ -32,6 +32,9 @@ export class SyncBlockProvider extends SyncBlockDataProvider {
       });
       return Promise.all(resourceIds);
     });
+    _defineProperty(this, "getSourceId", () => {
+      return this.sourceId;
+    });
     this.fetchProvider = fetchProvider;
     this.writeProvider = writeProvider;
     this.sourceId = sourceId;
@@ -39,26 +42,35 @@ export class SyncBlockProvider extends SyncBlockDataProvider {
 }
 export const useFetchDocNode = (editorView, node, defaultDocNode, provider) => {
   const [docNode, setDocNode] = useState(defaultDocNode);
+  const fetchNode = (editorView, node, provider) => {
+    const nodes = [convertSyncBlockPMNodeToSyncBlockData(node, false)];
+    provider === null || provider === void 0 ? void 0 : provider.fetchNodesData(nodes).then(data => {
+      var _data$;
+      if (data && (_data$ = data[0]) !== null && _data$ !== void 0 && _data$.content) {
+        const newNode = editorView.state.schema.nodeFromJSON(data[0].content);
+        setDocNode({
+          ...newNode.toJSON(),
+          version: 1
+        });
+      }
+    });
+  };
   useEffect(() => {
     if (!provider) {
       return;
     }
+    fetchNode(editorView, node, provider);
     const interval = window.setInterval(() => {
-      const nodes = [convertSyncBlockPMNodeToSyncBlockData(node, false)];
-      provider === null || provider === void 0 ? void 0 : provider.fetchNodesData(nodes).then(data => {
-        var _data$;
-        if (data && (_data$ = data[0]) !== null && _data$ !== void 0 && _data$.content) {
-          const newNode = editorView.state.schema.nodeFromJSON(data[0].content);
-          setDocNode({
-            ...newNode.toJSON(),
-            version: 1
-          });
-        }
-      });
-    }, 1000);
+      fetchNode(editorView, node, provider);
+    }, 3000);
     return () => {
       window.clearInterval(interval);
     };
   }, [editorView, node, provider]);
   return docNode;
+};
+export const useMemoizedSyncedBlockProvider = (fetchProvider, writeProvider, sourceId) => {
+  return useMemo(() => {
+    return new SyncBlockProvider(fetchProvider, writeProvider, sourceId);
+  }, [fetchProvider, writeProvider, sourceId]);
 };

package/dist/es2019/common/syncBlockStoreManager.js

@@ -9,14 +9,14 @@ import uuid from 'uuid';
 // 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) {
+  constructor(dataProvider) {
     this.syncBlocks = new Map();
+    this.dataProvider = dataProvider;
   }
   setEditorView(editorView) {
     this.editorView = editorView;
   }
   isSourceBlock(node) {
-    var _this$syncBlocks$get;
     if (node.type.name !== 'syncBlock') {
       return false;
     }
@@ -24,7 +24,7 @@ export class SyncBlockStoreManager {
       resourceId,
       localId
     } = node.attrs;
-    return this.syncBlocks.has(resourceId) && ((_this$syncBlocks$get = this.syncBlocks.get(resourceId)) === null || _this$syncBlocks$get === void 0 ? void 0 : _this$syncBlocks$get.sourceLocalId) === localId;
+    return resourceId.includes(localId);
   }
   registerConfirmationCallback(callback) {
     this.confirmationCallback = callback;
@@ -36,15 +36,18 @@ export class SyncBlockStoreManager {
     return !!this.confirmationCallback;
   }
   createSyncBlockNode() {
+    var _this$dataProvider;
     // TODO: EDITOR-1644 - properly implement creation of the synced block
     // below is a temporary implementation for the creation of the synced block
     // the resource id needs to have pageId and content property key in it
+    // Note: If the data provider is not set, the resource id will be the local id
 
-    const blockInstanceId = uuid();
     const localId = uuid();
+    const sourceId = (_this$dataProvider = this.dataProvider) === null || _this$dataProvider === void 0 ? void 0 : _this$dataProvider.getSourceId();
+    const resourceId = sourceId ? `${sourceId}/${localId}` : localId;
     const syncBlockNode = {
       attrs: {
-        resourceId: `ari:cloud:confluence:fake_cloud_id:page/fake_page_id/${blockInstanceId}`,
+        resourceId,
         localId
       },
       type: 'syncBlock'

package/dist/es2019/index.js

@@ -1,6 +1,9 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
 
-export { SyncBlockProvider as SyncedBlockProvider, useFetchDocNode } from './common/syncBlockProvider';
+export { SyncBlockProvider as SyncedBlockProvider, useFetchDocNode, useMemoizedSyncedBlockProvider } from './common/syncBlockProvider';
 export { SyncBlockStoreManager } from './common/syncBlockStoreManager';
 export { inMemoryFetchProvider, inMemoryWriteProvider } from './providers/inMemory';
+export { getDefaultSyncBlockSchema } from './common/schema';
+export { createContentAPIProvidersWithDefaultKey, useMemoizedContentAPIProviders } from './providers/confluenceContentAPI';
+export { getConfluencePageAri } from './utils/ari';
 export { convertSyncBlockPMNodeToSyncBlockData, generateSyncBlockSourceUrl } from './utils/utils';

package/dist/es2019/providers/confluenceContentAPI.js

@@ -0,0 +1,150 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { useMemo } from 'react';
+import { getLocalIdFromAri, getPageIdFromAri } from '../utils/ari';
+import { getContentProperty, createContentProperty, updateContentProperty } from '../utils/contentProperty';
+
+/**
+ * Configuration for Content API providers
+ */
+
+const getContentPropertyKey = (contentPropertyKey, localId) => {
+  return contentPropertyKey + '-' + localId;
+};
+const parseSyncedBlockContentPropertyValue = value => {
+  try {
+    if (typeof value === 'string') {
+      return JSON.parse(value);
+    }
+    return value;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Failed to parse synced block content:', error);
+    return {
+      content: undefined
+    };
+  }
+};
+
+/**
+ * ADFFetchProvider implementation that fetches synced block data from Confluence Content API
+ */
+class ConfluenceADFFetchProvider {
+  constructor(config) {
+    this.config = config;
+  }
+  async fetchData(resourceId) {
+    try {
+      var _contentProperty$data, _contentProperty$data2;
+      const pageId = getPageIdFromAri(resourceId);
+      const localId = getLocalIdFromAri(resourceId);
+      const key = getContentPropertyKey(this.config.contentPropertyKey, localId);
+      const options = {
+        pageId,
+        key,
+        cloudId: this.config.cloudId
+      };
+      const contentProperty = await getContentProperty(options);
+      const value = (_contentProperty$data = contentProperty.data.confluence.page.properties) === null || _contentProperty$data === void 0 ? void 0 : (_contentProperty$data2 = _contentProperty$data[0]) === null || _contentProperty$data2 === void 0 ? void 0 : _contentProperty$data2.value;
+      if (!value) {
+        throw new Error('Content property value does not exist');
+      }
+
+      // Parse the synced block content from the property value
+      const syncedBlockData = parseSyncedBlockContentPropertyValue(value);
+      return {
+        content: syncedBlockData.content
+      };
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Failed to fetch synced block data:', error);
+      return {
+        content: undefined
+      };
+    }
+  }
+}
+
+/**
+ * ADFWriteProvider implementation that writes synced block data to Confluence Content API
+ */
+class ConfluenceADFWriteProvider {
+  constructor(config) {
+    _defineProperty(this, "createNewContentProperty", async (pageId, key, value) => {
+      var _contentProperty$data3;
+      const contentProperty = await createContentProperty({
+        pageId,
+        key,
+        value,
+        cloudId: this.config.cloudId
+      });
+      if (((_contentProperty$data3 = contentProperty.data.confluence.createPageProperty.pageProperty) === null || _contentProperty$data3 === void 0 ? void 0 : _contentProperty$data3.key) === key) {
+        return key;
+      } else {
+        throw new Error('Failed to create content property');
+      }
+    });
+    this.config = config;
+  }
+  async writeData(sourceId, localId, data, resourceId) {
+    try {
+      const pageId = getPageIdFromAri(sourceId);
+      const syncedBlockValue = JSON.stringify({
+        content: data
+      });
+      if (resourceId) {
+        var _contentProperty$data4;
+        // Update existing content property
+        const localId = getLocalIdFromAri(resourceId);
+        const key = getContentPropertyKey(this.config.contentPropertyKey, localId);
+        const contentProperty = await updateContentProperty({
+          pageId,
+          key,
+          value: syncedBlockValue,
+          cloudId: this.config.cloudId
+        });
+        if (((_contentProperty$data4 = contentProperty.data.confluence.updateValuePageProperty.pageProperty) === null || _contentProperty$data4 === void 0 ? void 0 : _contentProperty$data4.key) === key) {
+          return key;
+        } else if (contentProperty.data.confluence.updateValuePageProperty.pageProperty === null) {
+          return this.createNewContentProperty(pageId, key, syncedBlockValue);
+        } else {
+          throw new Error('Failed to update content property');
+        }
+      } else {
+        // Create new content property
+        const key = getContentPropertyKey(this.config.contentPropertyKey, localId);
+        return this.createNewContentProperty(pageId, key, syncedBlockValue);
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Failed to write synced block data:', error);
+      return Promise.reject(error);
+    }
+  }
+}
+
+/**
+ * Factory function to create both providers with shared configuration
+ */
+const createContentAPIProviders = config => {
+  const fetchProvider = new ConfluenceADFFetchProvider(config);
+  const writeProvider = new ConfluenceADFWriteProvider(config);
+  return {
+    fetchProvider,
+    writeProvider
+  };
+};
+
+/**
+ * Convenience function to create providers with default content property key
+ */
+export const createContentAPIProvidersWithDefaultKey = cloudId => {
+  return createContentAPIProviders({
+    cloudId,
+    contentPropertyKey: 'editor-synced-block'
+  });
+};
+export const useMemoizedContentAPIProviders = cloudId => {
+  return useMemo(() => {
+    return createContentAPIProvidersWithDefaultKey(cloudId);
+  }, [cloudId]);
+};

package/dist/es2019/utils/ari.js

@@ -0,0 +1,32 @@
+export const getConfluencePageAri = (pageId, cloudId) => `ari:cloud:confluence:${cloudId}:page/${pageId}`;
+export const getPageIdFromAri = ari => {
+  // eslint-disable-next-line require-unicode-regexp
+  const match = ari.match(/ari:cloud:confluence:[^:]+:page\/(\d+)/);
+  if (match !== null && match !== void 0 && match[1]) {
+    return match[1];
+  }
+  throw new Error(`Invalid page ARI: ${ari}`);
+};
+
+/**
+ *
+ * @param ari ari:cloud:confluence:<cloudId>:page/<pageId>/<localId>
+ * @returns
+ */
+export const getLocalIdFromAri = ari => {
+  // eslint-disable-next-line require-unicode-regexp
+  const match = ari.match(/ari:cloud:confluence:[^:]+:page\/\d+\/([a-zA-Z0-9-]+)/);
+  if (match !== null && match !== void 0 && match[1]) {
+    return match[1];
+  }
+  throw new Error(`Invalid page ARI: ${ari}`);
+};
+export const getContentPropertyAri = (contentPropertyId, cloudId) => `ari:cloud:confluence:${cloudId}:content/${contentPropertyId}`;
+export const getContentPropertyIdFromAri = ari => {
+  // eslint-disable-next-line require-unicode-regexp
+  const match = ari.match(/ari:cloud:confluence:[^:]+:content\/([^/]+)/);
+  if (match) {
+    return match[1];
+  }
+  throw new Error(`Invalid content property ARI: ${ari}`);
+};

package/dist/es2019/utils/contentProperty.js

@@ -0,0 +1,160 @@
+import { getConfluencePageAri } from './ari';
+const COMMON_HEADERS = {
+  'Content-Type': 'application/json',
+  Accept: 'application/json'
+};
+const AGG_HEADERS = {
+  'X-ExperimentalApi': 'confluence-agg-beta'
+};
+const GRAPHQL_ENDPOINT = '/gateway/api/graphql';
+const GET_OPERATION_NAME = 'EDITOR_SYNCED_BLOCK_GET';
+const CREATE_OPERATION_NAME = 'EDITOR_SYNCED_BLOCK_CREATE';
+const UPDATE_OPERATION_NAME = 'EDITOR_SYNCED_BLOCK_UPDATE';
+/**
+ * Query to get the page property by key
+ * @param documentARI
+ * @param key
+ * @returns
+ */
+const GET_QUERY = `query ${GET_OPERATION_NAME} ($id: ID!, $keys: [String]!) {
+					confluence {
+						page (id: $id) {
+							properties(keys: $keys) {
+								key,
+								value
+							}
+						}
+					}
+				}`;
+
+/**
+ * Query to create a page property with key and value
+ * @param documentARI
+ * @param key
+ * @param value
+ * @returns
+ */
+const CREATE_QUERY = `mutation ${CREATE_OPERATION_NAME} ($input: ConfluenceCreatePagePropertyInput!){
+						confluence {
+							createPageProperty(input: $input) {
+								pageProperty {
+									key,
+									value
+								}
+							}
+						}
+					}`;
+
+/**
+ * Query to update a page property with key and value without bumping the version
+ * @param documentARI
+ * @param key
+ * @param value
+ * @returns
+ */
+const UPDATE_QUERY = `mutation ${UPDATE_OPERATION_NAME} ($input: ConfluenceUpdateValuePagePropertyInput!) {
+						confluence {
+							updateValuePageProperty(input: $input) {
+								pageProperty {
+									key,
+									value
+								}
+							}
+						}
+					}`;
+export const getContentProperty = async ({
+  pageId,
+  key,
+  cloudId
+}) => {
+  const documentARI = getConfluencePageAri(pageId, cloudId);
+  const bodyData = {
+    query: GET_QUERY,
+    operationName: GET_OPERATION_NAME,
+    variables: {
+      id: documentARI,
+      keys: [key]
+    }
+  };
+  const response = await fetch(GRAPHQL_ENDPOINT, {
+    method: 'POST',
+    headers: {
+      ...COMMON_HEADERS,
+      ...AGG_HEADERS
+    },
+    body: JSON.stringify(bodyData)
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to get content property: ${response.statusText}`);
+  }
+  const contentProperty = await response.json();
+  return contentProperty;
+};
+export const updateContentProperty = async ({
+  pageId,
+  key,
+  value,
+  cloudId
+}) => {
+  const documentARI = getConfluencePageAri(pageId, cloudId);
+  const bodyData = {
+    query: UPDATE_QUERY,
+    operationName: UPDATE_OPERATION_NAME,
+    variables: {
+      input: {
+        pageId: documentARI,
+        key,
+        value,
+        useSameVersion: true
+      }
+    }
+  };
+  const response = await fetch(GRAPHQL_ENDPOINT, {
+    method: 'POST',
+    headers: {
+      ...COMMON_HEADERS,
+      ...AGG_HEADERS
+    },
+    body: JSON.stringify(bodyData)
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to update content property: ${response.statusText}`);
+  }
+  const contentProperty = await response.json();
+  return contentProperty;
+};
+export const createContentProperty = async ({
+  pageId,
+  key,
+  value,
+  cloudId
+}) => {
+  const documentARI = getConfluencePageAri(pageId, cloudId);
+
+  // eslint-disable-next-line require-unicode-regexp
+  const escapedValue = value.replace(/"/g, '\\"');
+  const bodyData = {
+    query: CREATE_QUERY,
+    operationName: CREATE_OPERATION_NAME,
+    variables: {
+      input: {
+        pageId: documentARI,
+        key,
+        value: escapedValue
+      }
+    }
+  };
+  const response = await fetch(GRAPHQL_ENDPOINT, {
+    method: 'POST',
+    headers: {
+      ...COMMON_HEADERS,
+      ...AGG_HEADERS
+    },
+    body: JSON.stringify(bodyData)
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to create content property: ${response.statusText}`);
+  }
+  const contentProperty = await response.json();
+  return contentProperty;
+};

package/dist/esm/common/schema.js

@@ -0,0 +1,13 @@
+import { createSchema } from '@atlaskit/adf-schema';
+
+/**
+ * We currently do not need any of the new features, like nested tables
+ * Otherwise we could import defaultSchemaConfig from '@atlaskit/adf-schema/schema-default';
+ * @returns
+ */
+export var getDefaultSyncBlockSchema = function getDefaultSyncBlockSchema() {
+  return createSchema({
+    nodes: ['doc', 'paragraph', 'text', 'bulletList', 'orderedList', 'listItem', 'heading', 'blockquote', 'codeBlock', 'panel', 'rule', 'expand', 'nestedExpand', 'table', 'tableCell', 'tableHeader', 'tableRow', 'date', 'status', 'layoutSection', 'layoutColumn', 'unsupportedBlock', 'unsupportedInline'],
+    marks: ['link', 'em', 'strong', 'strike', 'subsup', 'underline', 'code', 'textColor', 'backgroundColor', 'alignment', 'indentation', 'border', 'unsupportedMark', 'unsupportedNodeAttribute', 'typeAheadQuery']
+  });
+};

package/dist/esm/common/syncBlockProvider.js

@@ -9,7 +9,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 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 { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { convertSyncBlockPMNodeToSyncBlockData } from '../utils/utils';
 import { SyncBlockDataProvider } from './types';
 export var SyncBlockProvider = /*#__PURE__*/function (_SyncBlockDataProvide) {
@@ -48,6 +48,9 @@ export var SyncBlockProvider = /*#__PURE__*/function (_SyncBlockDataProvide) {
       });
       return Promise.all(resourceIds);
     });
+    _defineProperty(_this, "getSourceId", function () {
+      return _this.sourceId;
+    });
     _this.fetchProvider = fetchProvider;
     _this.writeProvider = writeProvider;
     _this.sourceId = sourceId;
@@ -61,25 +64,34 @@ export var useFetchDocNode = function useFetchDocNode(editorView, node, defaultD
     _useState2 = _slicedToArray(_useState, 2),
     docNode = _useState2[0],
     setDocNode = _useState2[1];
+  var fetchNode = function fetchNode(editorView, node, provider) {
+    var nodes = [convertSyncBlockPMNodeToSyncBlockData(node, false)];
+    provider === null || provider === void 0 || provider.fetchNodesData(nodes).then(function (data) {
+      var _data$;
+      if (data && (_data$ = data[0]) !== null && _data$ !== void 0 && _data$.content) {
+        var newNode = editorView.state.schema.nodeFromJSON(data[0].content);
+        setDocNode(_objectSpread(_objectSpread({}, newNode.toJSON()), {}, {
+          version: 1
+        }));
+      }
+    });
+  };
   useEffect(function () {
     if (!provider) {
       return;
     }
+    fetchNode(editorView, node, provider);
     var interval = window.setInterval(function () {
-      var nodes = [convertSyncBlockPMNodeToSyncBlockData(node, false)];
-      provider === null || provider === void 0 || provider.fetchNodesData(nodes).then(function (data) {
-        var _data$;
-        if (data && (_data$ = data[0]) !== null && _data$ !== void 0 && _data$.content) {
-          var newNode = editorView.state.schema.nodeFromJSON(data[0].content);
-          setDocNode(_objectSpread(_objectSpread({}, newNode.toJSON()), {}, {
-            version: 1
-          }));
-        }
-      });
-    }, 1000);
+      fetchNode(editorView, node, provider);
+    }, 3000);
     return function () {
       window.clearInterval(interval);
     };
   }, [editorView, node, provider]);
   return docNode;
+};
+export var useMemoizedSyncedBlockProvider = function useMemoizedSyncedBlockProvider(fetchProvider, writeProvider, sourceId) {
+  return useMemo(function () {
+    return new SyncBlockProvider(fetchProvider, writeProvider, sourceId);
+  }, [fetchProvider, writeProvider, sourceId]);
 };

package/dist/esm/common/syncBlockStoreManager.js

@@ -13,9 +13,10 @@ import uuid from 'uuid';
 // 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 var SyncBlockStoreManager = /*#__PURE__*/function () {
-  function SyncBlockStoreManager(_dataProvider) {
+  function SyncBlockStoreManager(dataProvider) {
     _classCallCheck(this, SyncBlockStoreManager);
     this.syncBlocks = new Map();
+    this.dataProvider = dataProvider;
   }
   return _createClass(SyncBlockStoreManager, [{
     key: "setEditorView",
@@ -25,14 +26,13 @@ export var SyncBlockStoreManager = /*#__PURE__*/function () {
   }, {
     key: "isSourceBlock",
     value: function isSourceBlock(node) {
-      var _this$syncBlocks$get;
       if (node.type.name !== 'syncBlock') {
         return false;
       }
       var _node$attrs = node.attrs,
         resourceId = _node$attrs.resourceId,
         localId = _node$attrs.localId;
-      return this.syncBlocks.has(resourceId) && ((_this$syncBlocks$get = this.syncBlocks.get(resourceId)) === null || _this$syncBlocks$get === void 0 ? void 0 : _this$syncBlocks$get.sourceLocalId) === localId;
+      return resourceId.includes(localId);
     }
   }, {
     key: "registerConfirmationCallback",
@@ -51,15 +51,18 @@ export var SyncBlockStoreManager = /*#__PURE__*/function () {
   }, {
     key: "createSyncBlockNode",
     value: function createSyncBlockNode() {
+      var _this$dataProvider;
       // TODO: EDITOR-1644 - properly implement creation of the synced block
       // below is a temporary implementation for the creation of the synced block
       // the resource id needs to have pageId and content property key in it
+      // Note: If the data provider is not set, the resource id will be the local id
 
-      var blockInstanceId = uuid();
       var localId = uuid();
+      var sourceId = (_this$dataProvider = this.dataProvider) === null || _this$dataProvider === void 0 ? void 0 : _this$dataProvider.getSourceId();
+      var resourceId = sourceId ? "".concat(sourceId, "/").concat(localId) : localId;
       var syncBlockNode = {
         attrs: {
-          resourceId: "ari:cloud:confluence:fake_cloud_id:page/fake_page_id/".concat(blockInstanceId),
+          resourceId: resourceId,
           localId: localId
         },
         type: 'syncBlock'

package/dist/esm/index.js

@@ -1,6 +1,9 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
 
-export { SyncBlockProvider as SyncedBlockProvider, useFetchDocNode } from './common/syncBlockProvider';
+export { SyncBlockProvider as SyncedBlockProvider, useFetchDocNode, useMemoizedSyncedBlockProvider } from './common/syncBlockProvider';
 export { SyncBlockStoreManager } from './common/syncBlockStoreManager';
 export { inMemoryFetchProvider, inMemoryWriteProvider } from './providers/inMemory';
+export { getDefaultSyncBlockSchema } from './common/schema';
+export { createContentAPIProvidersWithDefaultKey, useMemoizedContentAPIProviders } from './providers/confluenceContentAPI';
+export { getConfluencePageAri } from './utils/ari';
 export { convertSyncBlockPMNodeToSyncBlockData, generateSyncBlockSourceUrl } from './utils/utils';