@atlaskit/editor-synced-block-renderer 3.0.0 → 3.1.0

package/CHANGELOG.md

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

package/dist/cjs/getSyncedBlockNodeComponent.js

@@ -6,19 +6,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getSyncedBlockNodeComponent = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _SyncedBlockNodeComponentRenderer = require("./ui/SyncedBlockNodeComponentRenderer");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var isSyncBlockDataProvider = function isSyncBlockDataProvider(dataProvider) {
+  return dataProvider.name === 'syncBlockProvider';
+};
+
+// For rendering synced block nodes in Renderer
 var getSyncedBlockNodeComponent = exports.getSyncedBlockNodeComponent = function getSyncedBlockNodeComponent(dataProvider, doc) {
   var content = doc.content;
   var isEmpty = !content || !Array.isArray(content) || content.length === 0;
   var syncBlockNodes = isEmpty ? [] : content.filter(function (node) {
     return node.type === 'syncBlock';
   });
-  var dataPromise = dataProvider.fetchNodesData(syncBlockNodes);
+  var syncBlockStoreManager = isSyncBlockDataProvider(dataProvider) ? new _editorSyncedBlockProvider.SyncBlockStoreManager(dataProvider) : undefined;
+  if (!syncBlockStoreManager) {
+    // TODO: EDITOR-2533 - returns a function that always renders error state
+    throw new Error('Data provider is not a SyncBlockDataProvider');
+  }
+
+  // Pre-fetch sync block data
+  syncBlockStoreManager.getReferenceSyncBlockStoreManager().fetchSyncBlocksData(syncBlockNodes);
   return function (props) {
     return (0, _SyncedBlockNodeComponentRenderer.SyncedBlockNodeComponentRenderer)(_objectSpread(_objectSpread({}, props), {}, {
-      dataPromise: dataPromise
+      syncBlockStoreManager: syncBlockStoreManager
     }));
   };
 };

package/dist/cjs/ui/SyncedBlockErrorComponent.js

@@ -6,27 +6,37 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SyncedBlockErrorComponent = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _SyncedBlockPermissionDenied = require("./SyncedBlockPermissionDenied");
 var SyncedBlockErrorComponent = exports.SyncedBlockErrorComponent = function SyncedBlockErrorComponent(_ref) {
   var error = _ref.error,
     resourceId = _ref.resourceId;
-  switch (error) {
-    case _editorSyncedBlockProvider.SyncBlockError.Forbidden:
-      if (resourceId) {
-        var _getPageIdAndTypeFrom = (0, _editorSyncedBlockProvider.getPageIdAndTypeFromAri)(resourceId),
-          contentId = _getPageIdAndTypeFrom.id;
-        if (contentId) {
-          return /*#__PURE__*/_react.default.createElement(_SyncedBlockPermissionDenied.SyncedBlockPermissionDenied, {
-            contentId: contentId
-          });
+  var getErrorContent = function getErrorContent() {
+    switch (error) {
+      case _editorSyncedBlockProvider.SyncBlockError.Forbidden:
+        if (resourceId) {
+          var _getPageIdAndTypeFrom = (0, _editorSyncedBlockProvider.getPageIdAndTypeFromAri)(resourceId),
+            contentId = _getPageIdAndTypeFrom.id;
+          if (contentId) {
+            return /*#__PURE__*/_react.default.createElement(_SyncedBlockPermissionDenied.SyncedBlockPermissionDenied, {
+              contentId: contentId
+            });
+          }
         }
-      }
-      return /*#__PURE__*/_react.default.createElement("div", null, "Something went wrong");
-    case _editorSyncedBlockProvider.SyncBlockError.NotFound:
-      return /*#__PURE__*/_react.default.createElement("div", null, "Sync Block Not Found");
-    case _editorSyncedBlockProvider.SyncBlockError.Errored:
-    default:
-      return /*#__PURE__*/_react.default.createElement("div", null, "Something went wrong");
-  }
+        return /*#__PURE__*/_react.default.createElement("div", null, "Something went wrong");
+      case _editorSyncedBlockProvider.SyncBlockError.NotFound:
+        return /*#__PURE__*/_react.default.createElement("div", null, "Sync Block Not Found");
+      case _editorSyncedBlockProvider.SyncBlockError.Errored:
+      default:
+        return /*#__PURE__*/_react.default.createElement("div", null, "Something went wrong");
+    }
+  };
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    _react.default.createElement("div", {
+      className: _syncBlock.SyncBlockSharedCssClassName.error
+    }, getErrorContent())
+  );
 };

package/dist/cjs/ui/SyncedBlockNodeComponentRenderer.js

@@ -1,50 +1,35 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SyncedBlockNodeComponentRenderer = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _renderer = require("@atlaskit/renderer");
 var _actions = require("@atlaskit/renderer/actions");
 var _SyncedBlockErrorComponent = require("./SyncedBlockErrorComponent");
 var _SyncedBlockLoadingState = require("./SyncedBlockLoadingState");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentRenderer(props) {
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    data = _useState2[0],
-    setData = _useState2[1];
-  (0, _react.useEffect)(function () {
-    if (!props.dataPromise) {
-      return;
-    }
-    if (data) {
-      return;
-    }
-    props.dataPromise.then(function (data) {
-      setData(data);
-    });
-  }, [props.dataPromise, data]);
-  if (!data) {
+  var resourceId = props.resourceId,
+    localId = props.localId,
+    syncBlockStoreManager = props.syncBlockStoreManager;
+  var _useFetchSyncBlockDat = (0, _editorSyncedBlockProvider.useFetchSyncBlockData)(syncBlockStoreManager, resourceId, localId),
+    syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance,
+    isLoading = _useFetchSyncBlockDat.isLoading;
+  if (isLoading && !syncBlockInstance) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
   }
-  var fetchResult = data.find(function (item) {
-    return item.resourceId === props.resourceId;
-  });
-  if (fetchResult !== null && fetchResult !== void 0 && fetchResult.error || !(fetchResult !== null && fetchResult !== void 0 && fetchResult.data)) {
-    var _fetchResult$error;
+  if (syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data)) {
+    var _syncBlockInstance$er;
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
-      error: (_fetchResult$error = fetchResult === null || fetchResult === void 0 ? void 0 : fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : _editorSyncedBlockProvider.SyncBlockError.Errored,
+      error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : _editorSyncedBlockProvider.SyncBlockError.Errored,
       resourceId: props.resourceId
     });
   }
   var syncBlockDoc = {
-    content: fetchResult.data.content,
+    content: syncBlockInstance.data.content,
     version: 1,
     type: 'doc'
   };

package/dist/cjs/ui/SyncedBlockRenderer.js

@@ -47,22 +47,23 @@ var SyncedBlockRendererWrapper = function SyncedBlockRendererWrapper(_ref) {
 var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref2) {
   var useFetchSyncBlockData = _ref2.useFetchSyncBlockData,
     syncBlockRendererDataProviders = _ref2.syncBlockRendererDataProviders;
-  var fetchResult = useFetchSyncBlockData();
+  var _useFetchSyncBlockDat = useFetchSyncBlockData(),
+    syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance;
   var providerFactory = (0, _react.useMemo)(function () {
     return convertSyncBlockRendererDataProvidersToProviderFactory(syncBlockRendererDataProviders);
   }, [syncBlockRendererDataProviders]);
-  if (!fetchResult) {
+  if (!syncBlockInstance) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
   }
-  if (fetchResult.error || !fetchResult.data) {
-    var _fetchResult$error;
+  if (syncBlockInstance.error || !syncBlockInstance.data) {
+    var _syncBlockInstance$er;
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
-      error: (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : _editorSyncedBlockProvider.SyncBlockError.Errored,
-      resourceId: fetchResult.resourceId
+      error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : _editorSyncedBlockProvider.SyncBlockError.Errored,
+      resourceId: syncBlockInstance.resourceId
     });
   }
   return /*#__PURE__*/_react.default.createElement(SyncedBlockRendererWrapper, {
-    fetchedData: fetchResult.data,
+    fetchedData: syncBlockInstance.data,
     providerFactory: providerFactory
   });
 };

package/dist/es2019/getSyncedBlockNodeComponent.js

@@ -1,13 +1,26 @@
+import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import { SyncedBlockNodeComponentRenderer } from './ui/SyncedBlockNodeComponentRenderer';
+const isSyncBlockDataProvider = dataProvider => {
+  return dataProvider.name === 'syncBlockProvider';
+};
+
+// For rendering synced block nodes in Renderer
 export const getSyncedBlockNodeComponent = (dataProvider, doc) => {
   const {
     content
   } = doc;
   const isEmpty = !content || !Array.isArray(content) || content.length === 0;
   const syncBlockNodes = isEmpty ? [] : content.filter(node => node.type === 'syncBlock');
-  const dataPromise = dataProvider.fetchNodesData(syncBlockNodes);
+  const syncBlockStoreManager = isSyncBlockDataProvider(dataProvider) ? new SyncBlockStoreManager(dataProvider) : undefined;
+  if (!syncBlockStoreManager) {
+    // TODO: EDITOR-2533 - returns a function that always renders error state
+    throw new Error('Data provider is not a SyncBlockDataProvider');
+  }
+
+  // Pre-fetch sync block data
+  syncBlockStoreManager.getReferenceSyncBlockStoreManager().fetchSyncBlocksData(syncBlockNodes);
   return props => SyncedBlockNodeComponentRenderer({
     ...props,
-    dataPromise
+    syncBlockStoreManager
   });
 };

package/dist/es2019/ui/SyncedBlockErrorComponent.js

@@ -1,27 +1,37 @@
 import React from 'react';
+import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { getPageIdAndTypeFromAri, SyncBlockError } from '@atlaskit/editor-synced-block-provider';
 import { SyncedBlockPermissionDenied } from './SyncedBlockPermissionDenied';
 export const SyncedBlockErrorComponent = ({
   error,
   resourceId
 }) => {
-  switch (error) {
-    case SyncBlockError.Forbidden:
-      if (resourceId) {
-        const {
-          id: contentId
-        } = getPageIdAndTypeFromAri(resourceId);
-        if (contentId) {
-          return /*#__PURE__*/React.createElement(SyncedBlockPermissionDenied, {
-            contentId: contentId
-          });
+  const getErrorContent = () => {
+    switch (error) {
+      case SyncBlockError.Forbidden:
+        if (resourceId) {
+          const {
+            id: contentId
+          } = getPageIdAndTypeFromAri(resourceId);
+          if (contentId) {
+            return /*#__PURE__*/React.createElement(SyncedBlockPermissionDenied, {
+              contentId: contentId
+            });
+          }
         }
-      }
-      return /*#__PURE__*/React.createElement("div", null, "Something went wrong");
-    case SyncBlockError.NotFound:
-      return /*#__PURE__*/React.createElement("div", null, "Sync Block Not Found");
-    case SyncBlockError.Errored:
-    default:
-      return /*#__PURE__*/React.createElement("div", null, "Something went wrong");
-  }
+        return /*#__PURE__*/React.createElement("div", null, "Something went wrong");
+      case SyncBlockError.NotFound:
+        return /*#__PURE__*/React.createElement("div", null, "Sync Block Not Found");
+      case SyncBlockError.Errored:
+      default:
+        return /*#__PURE__*/React.createElement("div", null, "Something went wrong");
+    }
+  };
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    React.createElement("div", {
+      className: SyncBlockSharedCssClassName.error
+    }, getErrorContent())
+  );
 };

package/dist/es2019/ui/SyncedBlockNodeComponentRenderer.js

@@ -1,35 +1,31 @@
-import React, { useEffect, useState } from 'react';
-import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
+import React from 'react';
+import { SyncBlockError, useFetchSyncBlockData } from '@atlaskit/editor-synced-block-provider';
 import { ReactRenderer } from '@atlaskit/renderer';
 import { RendererActionsContext } from '@atlaskit/renderer/actions';
 import { SyncedBlockErrorComponent } from './SyncedBlockErrorComponent';
 import { SyncedBlockLoadingState } from './SyncedBlockLoadingState';
 export const SyncedBlockNodeComponentRenderer = props => {
-  const [data, setData] = useState(null);
-  useEffect(() => {
-    if (!props.dataPromise) {
-      return;
-    }
-    if (data) {
-      return;
-    }
-    props.dataPromise.then(data => {
-      setData(data);
-    });
-  }, [props.dataPromise, data]);
-  if (!data) {
+  const {
+    resourceId,
+    localId,
+    syncBlockStoreManager
+  } = props;
+  const {
+    syncBlockInstance,
+    isLoading
+  } = useFetchSyncBlockData(syncBlockStoreManager, resourceId, localId);
+  if (isLoading && !syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
-  const fetchResult = data.find(item => item.resourceId === props.resourceId);
-  if (fetchResult !== null && fetchResult !== void 0 && fetchResult.error || !(fetchResult !== null && fetchResult !== void 0 && fetchResult.data)) {
-    var _fetchResult$error;
+  if (syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data)) {
+    var _syncBlockInstance$er;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: (_fetchResult$error = fetchResult === null || fetchResult === void 0 ? void 0 : fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored,
+      error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : SyncBlockError.Errored,
       resourceId: props.resourceId
     });
   }
   const syncBlockDoc = {
-    content: fetchResult.data.content,
+    content: syncBlockInstance.data.content,
     version: 1,
     type: 'doc'
   };

package/dist/es2019/ui/SyncedBlockRenderer.js

@@ -41,22 +41,24 @@ const SyncedBlockRendererComponent = ({
   useFetchSyncBlockData,
   syncBlockRendererDataProviders
 }) => {
-  const fetchResult = useFetchSyncBlockData();
+  const {
+    syncBlockInstance
+  } = useFetchSyncBlockData();
   const providerFactory = useMemo(() => {
     return convertSyncBlockRendererDataProvidersToProviderFactory(syncBlockRendererDataProviders);
   }, [syncBlockRendererDataProviders]);
-  if (!fetchResult) {
+  if (!syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
-  if (fetchResult.error || !fetchResult.data) {
-    var _fetchResult$error;
+  if (syncBlockInstance.error || !syncBlockInstance.data) {
+    var _syncBlockInstance$er;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored,
-      resourceId: fetchResult.resourceId
+      error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : SyncBlockError.Errored,
+      resourceId: syncBlockInstance.resourceId
     });
   }
   return /*#__PURE__*/React.createElement(SyncedBlockRendererWrapper, {
-    fetchedData: fetchResult.data,
+    fetchedData: syncBlockInstance.data,
     providerFactory: providerFactory
   });
 };

package/dist/esm/getSyncedBlockNodeComponent.js

@@ -1,17 +1,30 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _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; }
+import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import { SyncedBlockNodeComponentRenderer } from './ui/SyncedBlockNodeComponentRenderer';
+var isSyncBlockDataProvider = function isSyncBlockDataProvider(dataProvider) {
+  return dataProvider.name === 'syncBlockProvider';
+};
+
+// For rendering synced block nodes in Renderer
 export var getSyncedBlockNodeComponent = function getSyncedBlockNodeComponent(dataProvider, doc) {
   var content = doc.content;
   var isEmpty = !content || !Array.isArray(content) || content.length === 0;
   var syncBlockNodes = isEmpty ? [] : content.filter(function (node) {
     return node.type === 'syncBlock';
   });
-  var dataPromise = dataProvider.fetchNodesData(syncBlockNodes);
+  var syncBlockStoreManager = isSyncBlockDataProvider(dataProvider) ? new SyncBlockStoreManager(dataProvider) : undefined;
+  if (!syncBlockStoreManager) {
+    // TODO: EDITOR-2533 - returns a function that always renders error state
+    throw new Error('Data provider is not a SyncBlockDataProvider');
+  }
+
+  // Pre-fetch sync block data
+  syncBlockStoreManager.getReferenceSyncBlockStoreManager().fetchSyncBlocksData(syncBlockNodes);
   return function (props) {
     return SyncedBlockNodeComponentRenderer(_objectSpread(_objectSpread({}, props), {}, {
-      dataPromise: dataPromise
+      syncBlockStoreManager: syncBlockStoreManager
     }));
   };
 };

package/dist/esm/ui/SyncedBlockErrorComponent.js

@@ -1,25 +1,35 @@
 import React from 'react';
+import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { getPageIdAndTypeFromAri, SyncBlockError } from '@atlaskit/editor-synced-block-provider';
 import { SyncedBlockPermissionDenied } from './SyncedBlockPermissionDenied';
 export var SyncedBlockErrorComponent = function SyncedBlockErrorComponent(_ref) {
   var error = _ref.error,
     resourceId = _ref.resourceId;
-  switch (error) {
-    case SyncBlockError.Forbidden:
-      if (resourceId) {
-        var _getPageIdAndTypeFrom = getPageIdAndTypeFromAri(resourceId),
-          contentId = _getPageIdAndTypeFrom.id;
-        if (contentId) {
-          return /*#__PURE__*/React.createElement(SyncedBlockPermissionDenied, {
-            contentId: contentId
-          });
+  var getErrorContent = function getErrorContent() {
+    switch (error) {
+      case SyncBlockError.Forbidden:
+        if (resourceId) {
+          var _getPageIdAndTypeFrom = getPageIdAndTypeFromAri(resourceId),
+            contentId = _getPageIdAndTypeFrom.id;
+          if (contentId) {
+            return /*#__PURE__*/React.createElement(SyncedBlockPermissionDenied, {
+              contentId: contentId
+            });
+          }
         }
-      }
-      return /*#__PURE__*/React.createElement("div", null, "Something went wrong");
-    case SyncBlockError.NotFound:
-      return /*#__PURE__*/React.createElement("div", null, "Sync Block Not Found");
-    case SyncBlockError.Errored:
-    default:
-      return /*#__PURE__*/React.createElement("div", null, "Something went wrong");
-  }
+        return /*#__PURE__*/React.createElement("div", null, "Something went wrong");
+      case SyncBlockError.NotFound:
+        return /*#__PURE__*/React.createElement("div", null, "Sync Block Not Found");
+      case SyncBlockError.Errored:
+      default:
+        return /*#__PURE__*/React.createElement("div", null, "Something went wrong");
+    }
+  };
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    React.createElement("div", {
+      className: SyncBlockSharedCssClassName.error
+    }, getErrorContent())
+  );
 };

package/dist/esm/ui/SyncedBlockNodeComponentRenderer.js

@@ -1,41 +1,28 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useEffect, useState } from 'react';
-import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
+import React from 'react';
+import { SyncBlockError, useFetchSyncBlockData } from '@atlaskit/editor-synced-block-provider';
 import { ReactRenderer } from '@atlaskit/renderer';
 import { RendererActionsContext } from '@atlaskit/renderer/actions';
 import { SyncedBlockErrorComponent } from './SyncedBlockErrorComponent';
 import { SyncedBlockLoadingState } from './SyncedBlockLoadingState';
 export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentRenderer(props) {
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    data = _useState2[0],
-    setData = _useState2[1];
-  useEffect(function () {
-    if (!props.dataPromise) {
-      return;
-    }
-    if (data) {
-      return;
-    }
-    props.dataPromise.then(function (data) {
-      setData(data);
-    });
-  }, [props.dataPromise, data]);
-  if (!data) {
+  var resourceId = props.resourceId,
+    localId = props.localId,
+    syncBlockStoreManager = props.syncBlockStoreManager;
+  var _useFetchSyncBlockDat = useFetchSyncBlockData(syncBlockStoreManager, resourceId, localId),
+    syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance,
+    isLoading = _useFetchSyncBlockDat.isLoading;
+  if (isLoading && !syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
-  var fetchResult = data.find(function (item) {
-    return item.resourceId === props.resourceId;
-  });
-  if (fetchResult !== null && fetchResult !== void 0 && fetchResult.error || !(fetchResult !== null && fetchResult !== void 0 && fetchResult.data)) {
-    var _fetchResult$error;
+  if (syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data)) {
+    var _syncBlockInstance$er;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: (_fetchResult$error = fetchResult === null || fetchResult === void 0 ? void 0 : fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored,
+      error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : SyncBlockError.Errored,
       resourceId: props.resourceId
     });
   }
   var syncBlockDoc = {
-    content: fetchResult.data.content,
+    content: syncBlockInstance.data.content,
     version: 1,
     type: 'doc'
   };

package/dist/esm/ui/SyncedBlockRenderer.js

@@ -39,22 +39,23 @@ var SyncedBlockRendererWrapper = function SyncedBlockRendererWrapper(_ref) {
 var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref2) {
   var useFetchSyncBlockData = _ref2.useFetchSyncBlockData,
     syncBlockRendererDataProviders = _ref2.syncBlockRendererDataProviders;
-  var fetchResult = useFetchSyncBlockData();
+  var _useFetchSyncBlockDat = useFetchSyncBlockData(),
+    syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance;
   var providerFactory = useMemo(function () {
     return convertSyncBlockRendererDataProvidersToProviderFactory(syncBlockRendererDataProviders);
   }, [syncBlockRendererDataProviders]);
-  if (!fetchResult) {
+  if (!syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
-  if (fetchResult.error || !fetchResult.data) {
-    var _fetchResult$error;
+  if (syncBlockInstance.error || !syncBlockInstance.data) {
+    var _syncBlockInstance$er;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored,
-      resourceId: fetchResult.resourceId
+      error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : SyncBlockError.Errored,
+      resourceId: syncBlockInstance.resourceId
     });
   }
   return /*#__PURE__*/React.createElement(SyncedBlockRendererWrapper, {
-    fetchedData: fetchResult.data,
+    fetchedData: syncBlockInstance.data,
     providerFactory: providerFactory
   });
 };

package/dist/types/getSyncedBlockNodeComponent.d.ts

@@ -1,5 +1,5 @@
 import type { DocNode } from '@atlaskit/adf-schema';
-import { type SyncBlockNode, type SyncBlockInstance } from '@atlaskit/editor-synced-block-provider';
+import { type SyncBlockInstance, type SyncBlockNode } from '@atlaskit/editor-synced-block-provider';
 import type { NodeDataProvider } from '@atlaskit/node-data-provider';
 import { type SyncedBlockNodeProps } from './ui/SyncedBlockNodeComponentRenderer';
 export declare const getSyncedBlockNodeComponent: (dataProvider: NodeDataProvider<SyncBlockNode, SyncBlockInstance>, doc: DocNode) => (props: SyncedBlockNodeProps) => import("react").JSX.Element;

package/dist/types/ui/SyncedBlockNodeComponentRenderer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type SyncBlockInstance } from '@atlaskit/editor-synced-block-provider';
+import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import { type NodeProps } from '@atlaskit/renderer';
 export interface SyncedBlockProps {
     localId?: string;
@@ -7,5 +7,5 @@ export interface SyncedBlockProps {
 }
 export type SyncedBlockNodeProps = NodeProps<SyncedBlockProps>;
 export declare const SyncedBlockNodeComponentRenderer: (props: SyncedBlockNodeProps & {
-    dataPromise: Promise<SyncBlockInstance[]> | null;
+    syncBlockStoreManager: SyncBlockStoreManager;
 }) => React.JSX.Element;

package/dist/types/ui/SyncedBlockRenderer.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ProviderFactory, type SyncedBlockRendererDataProviders } from '@atlaskit/editor-common/provider-factory';
-import { type SyncBlockInstance } from '@atlaskit/editor-synced-block-provider';
+import { type UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
 export type SyncedBlockRendererProps = {
     syncBlockRendererDataProviders: SyncedBlockRendererDataProviders;
-    useFetchSyncBlockData: () => SyncBlockInstance | null;
+    useFetchSyncBlockData: () => UseFetchSyncBlockDataResult;
 };
 export declare const convertSyncBlockRendererDataProvidersToProviderFactory: (dataProviders: SyncedBlockRendererDataProviders) => ProviderFactory;
 export declare const SyncedBlockRenderer: React.MemoExoticComponent<({ useFetchSyncBlockData, syncBlockRendererDataProviders, }: SyncedBlockRendererProps) => React.JSX.Element>;

package/dist/types-ts4.5/getSyncedBlockNodeComponent.d.ts

@@ -1,5 +1,5 @@
 import type { DocNode } from '@atlaskit/adf-schema';
-import { type SyncBlockNode, type SyncBlockInstance } from '@atlaskit/editor-synced-block-provider';
+import { type SyncBlockInstance, type SyncBlockNode } from '@atlaskit/editor-synced-block-provider';
 import type { NodeDataProvider } from '@atlaskit/node-data-provider';
 import { type SyncedBlockNodeProps } from './ui/SyncedBlockNodeComponentRenderer';
 export declare const getSyncedBlockNodeComponent: (dataProvider: NodeDataProvider<SyncBlockNode, SyncBlockInstance>, doc: DocNode) => (props: SyncedBlockNodeProps) => import("react").JSX.Element;

package/dist/types-ts4.5/ui/SyncedBlockNodeComponentRenderer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type SyncBlockInstance } from '@atlaskit/editor-synced-block-provider';
+import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import { type NodeProps } from '@atlaskit/renderer';
 export interface SyncedBlockProps {
     localId?: string;
@@ -7,5 +7,5 @@ export interface SyncedBlockProps {
 }
 export type SyncedBlockNodeProps = NodeProps<SyncedBlockProps>;
 export declare const SyncedBlockNodeComponentRenderer: (props: SyncedBlockNodeProps & {
-    dataPromise: Promise<SyncBlockInstance[]> | null;
+    syncBlockStoreManager: SyncBlockStoreManager;
 }) => React.JSX.Element;

package/dist/types-ts4.5/ui/SyncedBlockRenderer.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ProviderFactory, type SyncedBlockRendererDataProviders } from '@atlaskit/editor-common/provider-factory';
-import { type SyncBlockInstance } from '@atlaskit/editor-synced-block-provider';
+import { type UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
 export type SyncedBlockRendererProps = {
     syncBlockRendererDataProviders: SyncedBlockRendererDataProviders;
-    useFetchSyncBlockData: () => SyncBlockInstance | null;
+    useFetchSyncBlockData: () => UseFetchSyncBlockDataResult;
 };
 export declare const convertSyncBlockRendererDataProvidersToProviderFactory: (dataProviders: SyncedBlockRendererDataProviders) => ProviderFactory;
 export declare const SyncedBlockRenderer: React.MemoExoticComponent<({ useFetchSyncBlockData, syncBlockRendererDataProviders, }: SyncedBlockRendererProps) => React.JSX.Element>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-synced-block-renderer",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"description": "SyncedBlockRenderer for @atlaskit/editor-plugin-synced-block",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,7 +31,7 @@
 		"@atlaskit/button": "^23.5.0",
 		"@atlaskit/css": "^0.15.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-synced-block-provider": "^2.5.0",
+		"@atlaskit/editor-synced-block-provider": "^2.6.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/image": "^3.0.0",
@@ -43,7 +43,7 @@
 		"relay-runtime": "npm:atl-relay-compiler@0.0.0-main-5980a913"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.21.0",
+		"@atlaskit/editor-common": "^110.22.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},