@atlaskit/editor-synced-block-renderer 3.1.6 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/editor-synced-block-renderer
 
+## 3.3.0
+
+### Minor Changes
+
+- [`721d3790d48fe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/721d3790d48fe) -
+  EDITOR-2533 implement error-ui with retry
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.2.0
+
+### Minor Changes
+
+- [`9efdcfd413c6d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9efdcfd413c6d) -
+  [ux] Stop sticky table headers within synced blocks
+
+### Patch Changes
+
+- [`df3d682372ee2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/df3d682372ee2) -
+  EDITOR-2379 add data-sync-block attribute to reference sync block wrapper
+- [`e3aafa008fcf4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e3aafa008fcf4) -
+  EDITOR-2771 Pass parent Editor/Renderer data providers through SyncBlockDataProvider to the nested
+  renderer
+- Updated dependencies
+
 ## 3.1.6
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -45,6 +45,9 @@
 		{
 			"path": "../../renderer/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/spinner/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tokens/afm-cc/tsconfig.json"
 		},

package/dist/cjs/getSyncedBlockRenderer.js

@@ -9,13 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 var _SyncedBlockRenderer = require("./ui/SyncedBlockRenderer");
 // For rendering reference synced block nodes in Editor
 var getSyncedBlockRenderer = exports.getSyncedBlockRenderer = function getSyncedBlockRenderer(_ref) {
-  var syncBlockRendererDataProviders = _ref.syncBlockRendererDataProviders,
-    syncBlockRendererOptions = _ref.syncBlockRendererOptions;
+  var syncBlockRendererOptions = _ref.syncBlockRendererOptions;
   return function (_ref2) {
     var useFetchSyncBlockData = _ref2.useFetchSyncBlockData;
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockRenderer.SyncedBlockRenderer, {
       syncBlockRendererOptions: syncBlockRendererOptions,
-      syncBlockRendererDataProviders: syncBlockRendererDataProviders,
       useFetchSyncBlockData: useFetchSyncBlockData
     });
   };

package/dist/cjs/ui/AKRendererWrapper.js

@@ -44,8 +44,7 @@ var defaultOptions = {
       mediaInline: true
     }
   },
-  smartLinks: undefined,
-  stickyHeaders: true
+  smartLinks: undefined
 };
 var AKRendererWrapper = exports.AKRendererWrapper = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   var doc = _ref2.doc,

package/dist/cjs/ui/SyncedBlockErrorComponent.js

@@ -1,42 +1,51 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SyncedBlockErrorComponent = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
+var _SyncedBlockGenericError = require("./SyncedBlockGenericError");
+var _SyncedBlockLoadError = require("./SyncedBlockLoadError");
 var _SyncedBlockPermissionDenied = require("./SyncedBlockPermissionDenied");
+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 SyncedBlockErrorComponent = exports.SyncedBlockErrorComponent = function SyncedBlockErrorComponent(_ref) {
   var error = _ref.error,
+    isLoading = _ref.isLoading,
+    onRetry = _ref.onRetry,
     resourceId = _ref.resourceId;
-  var getErrorContent = function getErrorContent() {
+  var getErrorContent = (0, _react.useMemo)(function () {
     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
-            });
-          }
+        if (!resourceId) {
+          return /*#__PURE__*/_react.default.createElement(_SyncedBlockGenericError.SyncedBlockGenericError, null);
         }
-        return /*#__PURE__*/_react.default.createElement("div", null, "Something went wrong");
+        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(_SyncedBlockGenericError.SyncedBlockGenericError, null);
       case _editorSyncedBlockProvider.SyncBlockError.NotFound:
-        return /*#__PURE__*/_react.default.createElement("div", null, "Sync Block Not Found");
       case _editorSyncedBlockProvider.SyncBlockError.Errored:
+        return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadError.SyncedBlockLoadError, {
+          onRetry: onRetry,
+          isLoading: isLoading
+        });
       default:
-        return /*#__PURE__*/_react.default.createElement("div", null, "Something went wrong");
+        return /*#__PURE__*/_react.default.createElement(_SyncedBlockGenericError.SyncedBlockGenericError, null);
     }
-  };
+  }, [error, isLoading, onRetry, resourceId]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     _react.default.createElement("div", {
       className: _syncBlock.SyncBlockSharedCssClassName.error
-    }, getErrorContent())
+    }, getErrorContent)
   );
 };

package/dist/cjs/ui/SyncedBlockErrorStateCard.js

@@ -0,0 +1,41 @@
+/* SyncedBlockErrorStateCard.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SyncedBlockErrorStateCard = void 0;
+require("./SyncedBlockErrorStateCard.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _image = _interopRequireDefault(require("@atlaskit/image"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var styles = {
+  wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhkby5v _1e0c1txw _1bahv2br _4cvr1h6o",
+  textWrapper: "_18u0u2gc"
+};
+var SyncedBlockErrorStateCard = exports.SyncedBlockErrorStateCard = function SyncedBlockErrorStateCard(_ref) {
+  var children = _ref.children,
+    imageAltText = _ref.imageAltText,
+    imageSrc = _ref.imageSrc,
+    primaryMessage = _ref.primaryMessage,
+    secondaryMessage = _ref.secondaryMessage;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/_react.default.createElement(_image.default, {
+    src: imageSrc,
+    alt: imageAltText,
+    width: "48",
+    height: "48"
+  }), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    space: "space.100",
+    alignInline: "start",
+    xcss: styles.textWrapper
+  }, primaryMessage && /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "xsmall"
+  }, primaryMessage), secondaryMessage && /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    color: "color.text.subtle"
+  }, secondaryMessage), children));
+};

package/dist/cjs/ui/SyncedBlockGenericError.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SyncedBlockGenericError = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _ExclamationWarning = _interopRequireDefault(require("./assets/ExclamationWarning.svg"));
+var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
+var SyncedBlockGenericError = exports.SyncedBlockGenericError = function SyncedBlockGenericError() {
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
+    imageSrc: _ExclamationWarning.default,
+    secondaryMessage: formatMessage(_messages.syncBlockMessages.generalErrorDescription)
+  });
+};

package/dist/cjs/ui/SyncedBlockLoadError.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SyncedBlockLoadError = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _messages = require("@atlaskit/editor-common/messages");
+var _ExclamationWarning = _interopRequireDefault(require("./assets/ExclamationWarning.svg"));
+var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
+var SyncedBlockLoadError = exports.SyncedBlockLoadError = function SyncedBlockLoadError(_ref) {
+  var onRetry = _ref.onRetry,
+    isLoading = _ref.isLoading;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
+    imageSrc: _ExclamationWarning.default,
+    imageAltText: formatMessage(_messages.syncBlockMessages.notFoundAltText),
+    secondaryMessage: formatMessage(_messages.syncBlockMessages.notFoundDescription)
+  }, onRetry && /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "default",
+    spacing: "compact",
+    onClick: function onClick(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      onRetry();
+    },
+    isLoading: isLoading,
+    testId: "sync-block-retry-btn"
+  }, formatMessage(_messages.syncBlockMessages.retryButton)));
+};

package/dist/cjs/ui/SyncedBlockLoadingState.compiled.css

@@ -0,0 +1,6 @@
+._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1tkevbgk{min-height:4pc}
+._4cvr1h6o{align-items:center}

package/dist/cjs/ui/SyncedBlockLoadingState.js

@@ -1,3 +1,4 @@
+/* SyncedBlockLoadingState.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,7 +6,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SyncedBlockLoadingState = void 0;
+require("./SyncedBlockLoadingState.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var styles = {
+  wrapper: "_19itia51 _2rko12b0 _1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
+};
 var SyncedBlockLoadingState = exports.SyncedBlockLoadingState = function SyncedBlockLoadingState() {
-  return /*#__PURE__*/_react.default.createElement("div", null, "Loading...");
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+    size: "small",
+    label: "Loading synced content"
+  }));
 };

package/dist/cjs/ui/SyncedBlockNodeComponentRenderer.js

@@ -15,19 +15,22 @@ var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer
     syncBlockStoreManager = _ref.syncBlockStoreManager,
     rendererOptions = _ref.rendererOptions;
   var resourceId = nodeProps.resourceId,
-    localId = nodeProps.localId,
-    providers = nodeProps.providers;
+    localId = nodeProps.localId;
   var _useFetchSyncBlockDat = (0, _editorSyncedBlockProvider.useFetchSyncBlockData)(syncBlockStoreManager, resourceId, localId),
     syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance,
-    isLoading = _useFetchSyncBlockDat.isLoading;
+    isLoading = _useFetchSyncBlockDat.isLoading,
+    reloadData = _useFetchSyncBlockDat.reloadData,
+    providerFactory = _useFetchSyncBlockDat.providerFactory;
   if (isLoading && !syncBlockInstance) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
   }
-  if (syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data)) {
+  if (!resourceId || 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: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : _editorSyncedBlockProvider.SyncBlockError.Errored,
-      resourceId: resourceId
+      resourceId: resourceId,
+      onRetry: reloadData,
+      isLoading: isLoading
     });
   }
   var syncBlockDoc = {
@@ -35,9 +38,11 @@ var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer
     version: 1,
     type: 'doc'
   };
-  return /*#__PURE__*/_react.default.createElement(_AKRendererWrapper.AKRendererWrapper, {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-sync-block-renderer": true
+  }, /*#__PURE__*/_react.default.createElement(_AKRendererWrapper.AKRendererWrapper, {
     doc: syncBlockDoc,
-    dataProviders: providers,
+    dataProviders: providerFactory,
     options: rendererOptions
-  });
+  }));
 };

package/dist/cjs/ui/SyncedBlockPermissionDenied.js

@@ -1,4 +1,3 @@
-/* SyncedBlockPermissionDenied.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -7,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SyncedBlockPermissionDenied = void 0;
-require("./SyncedBlockPermissionDenied.compiled.css");
-var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _SyncedBlockPermissionDeniedRequestAccessMutation2 = _interopRequireDefault(require("./__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql"));
 var _react = _interopRequireWildcard(require("react"));
@@ -16,16 +13,11 @@ var _reactIntlNext = require("react-intl-next");
 var _reactRelay = require("react-relay");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _messages = require("@atlaskit/editor-common/messages");
-var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _statusSuccess = _interopRequireDefault(require("@atlaskit/icon/core/status-success"));
-var _image = _interopRequireDefault(require("@atlaskit/image"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _PermissionDenied = _interopRequireDefault(require("./assets/PermissionDenied.svg"));
+var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
 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 styles = {
-  wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhkby5v _1e0c1txw _1bahv2br _4cvr1h6o",
-  textWrapper: "_18u0u2gc"
-};
 var RequestAccessState = /*#__PURE__*/function (RequestAccessState) {
   RequestAccessState["default"] = "default";
   RequestAccessState["errored"] = "errored";
@@ -65,22 +57,12 @@ var SyncedBlockPermissionDenied = exports.SyncedBlockPermissionDenied = function
       onError: handleRequestError
     });
   };
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.wrapper
-  }, /*#__PURE__*/_react.default.createElement(_image.default, {
-    src: _PermissionDenied.default,
-    alt: formatMessage(_messages.syncBlockMessages.permissionDeniedAltText),
-    width: "48",
-    height: "48"
-  }), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
-    space: "space.100",
-    alignInline: "start",
-    xcss: styles.textWrapper
-  }, /*#__PURE__*/_react.default.createElement(_heading.default, {
-    size: "xsmall"
-  }, formatMessage(_messages.syncBlockMessages.permissionDeniedHeading)), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
-    color: "color.text.subtle"
-  }, formatMessage(_messages.syncBlockMessages.permissionDeniedDescription)), requestAccessState === RequestAccessState.pending ? /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+  return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
+    imageSrc: _PermissionDenied.default,
+    imageAltText: formatMessage(_messages.syncBlockMessages.permissionDeniedAltText),
+    primaryMessage: formatMessage(_messages.syncBlockMessages.permissionDeniedHeading),
+    secondaryMessage: formatMessage(_messages.syncBlockMessages.permissionDeniedDescription)
+  }, requestAccessState === RequestAccessState.pending ? /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
     columnGap: "space.050",
     alignItems: "center"
   }, /*#__PURE__*/_react.default.createElement(_statusSuccess.default, {
@@ -103,5 +85,5 @@ var SyncedBlockPermissionDenied = exports.SyncedBlockPermissionDenied = function
   }, formatMessage(_messages.syncBlockMessages.requestAccessButton)), requestAccessState === RequestAccessState.errored && /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     color: "color.text.warning",
     testId: "sync-block-access-error-msg"
-  }, formatMessage(_messages.syncBlockMessages.requestAccessError)))));
+  }, formatMessage(_messages.syncBlockMessages.requestAccessError))));
 };

package/dist/cjs/ui/SyncedBlockRenderer.js

@@ -4,33 +4,21 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.convertSyncBlockRendererDataProvidersToProviderFactory = exports.SyncedBlockRenderer = void 0;
+exports.SyncedBlockRenderer = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _AKRendererWrapper = require("./AKRendererWrapper");
 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 convertSyncBlockRendererDataProvidersToProviderFactory = exports.convertSyncBlockRendererDataProvidersToProviderFactory = function convertSyncBlockRendererDataProvidersToProviderFactory(dataProviders) {
-  return _providerFactory.ProviderFactory.create({
-    cardProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.cardProvider,
-    emojiProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.emojiProvider,
-    mediaProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.mediaProvider,
-    mentionProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.mentionProvider,
-    profilecardProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.profilecardProvider,
-    taskDecisionProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.taskDecisionProvider
-  });
-};
 var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
   var useFetchSyncBlockData = _ref.useFetchSyncBlockData,
-    syncBlockRendererDataProviders = _ref.syncBlockRendererDataProviders,
     syncBlockRendererOptions = _ref.syncBlockRendererOptions;
   var _useFetchSyncBlockDat = useFetchSyncBlockData(),
-    syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance;
-  var dataProviders = (0, _react.useMemo)(function () {
-    return convertSyncBlockRendererDataProvidersToProviderFactory(syncBlockRendererDataProviders);
-  }, [syncBlockRendererDataProviders]);
+    syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance,
+    providerFactory = _useFetchSyncBlockDat.providerFactory,
+    isLoading = _useFetchSyncBlockDat.isLoading,
+    reloadData = _useFetchSyncBlockDat.reloadData;
   if (!syncBlockInstance) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
   }
@@ -38,7 +26,9 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
     var _syncBlockInstance$er;
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
       error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : _editorSyncedBlockProvider.SyncBlockError.Errored,
-      resourceId: syncBlockInstance.resourceId
+      resourceId: syncBlockInstance.resourceId,
+      onRetry: reloadData,
+      isLoading: isLoading
     });
   }
   var syncBlockDoc = {
@@ -48,7 +38,7 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
   };
   return /*#__PURE__*/_react.default.createElement(_AKRendererWrapper.AKRendererWrapper, {
     doc: syncBlockDoc,
-    dataProviders: dataProviders,
+    dataProviders: providerFactory,
     options: syncBlockRendererOptions
   });
 };

package/dist/es2019/getSyncedBlockRenderer.js

@@ -2,14 +2,12 @@ import React from 'react';
 import { SyncedBlockRenderer } from './ui/SyncedBlockRenderer';
 // For rendering reference synced block nodes in Editor
 export const getSyncedBlockRenderer = ({
-  syncBlockRendererDataProviders,
   syncBlockRendererOptions
 }) => ({
   useFetchSyncBlockData
 }) => {
   return /*#__PURE__*/React.createElement(SyncedBlockRenderer, {
     syncBlockRendererOptions: syncBlockRendererOptions,
-    syncBlockRendererDataProviders: syncBlockRendererDataProviders,
     useFetchSyncBlockData: useFetchSyncBlockData
   });
 };

package/dist/es2019/ui/AKRendererWrapper.js

@@ -31,8 +31,7 @@ const defaultOptions = {
       mediaInline: true
     }
   },
-  smartLinks: undefined,
-  stickyHeaders: true
+  smartLinks: undefined
 };
 export const AKRendererWrapper = /*#__PURE__*/memo(({
   doc,

package/dist/es2019/ui/SyncedBlockErrorComponent.js

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

package/dist/es2019/ui/SyncedBlockErrorStateCard.js

@@ -0,0 +1,35 @@
+/* SyncedBlockErrorStateCard.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./SyncedBlockErrorStateCard.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import Heading from '@atlaskit/heading';
+import Image from '@atlaskit/image';
+import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
+const styles = {
+  wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhkby5v _1e0c1txw _1bahv2br _4cvr1h6o",
+  textWrapper: "_18u0u2gc"
+};
+export const SyncedBlockErrorStateCard = ({
+  children,
+  imageAltText,
+  imageSrc,
+  primaryMessage,
+  secondaryMessage
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: imageSrc,
+    alt: imageAltText,
+    width: "48",
+    height: "48"
+  }), /*#__PURE__*/React.createElement(Stack, {
+    space: "space.100",
+    alignInline: "start",
+    xcss: styles.textWrapper
+  }, primaryMessage && /*#__PURE__*/React.createElement(Heading, {
+    size: "xsmall"
+  }, primaryMessage), secondaryMessage && /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtle"
+  }, secondaryMessage), children));
+};

package/dist/es2019/ui/SyncedBlockGenericError.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import ExclamationWarning from './assets/ExclamationWarning.svg';
+import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
+export const SyncedBlockGenericError = () => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
+    imageSrc: ExclamationWarning,
+    secondaryMessage: formatMessage(messages.generalErrorDescription)
+  });
+};

package/dist/es2019/ui/SyncedBlockLoadError.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button/new';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import ExclamationWarning from './assets/ExclamationWarning.svg';
+import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
+export const SyncedBlockLoadError = ({
+  onRetry,
+  isLoading
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
+    imageSrc: ExclamationWarning,
+    imageAltText: formatMessage(messages.notFoundAltText),
+    secondaryMessage: formatMessage(messages.notFoundDescription)
+  }, onRetry && /*#__PURE__*/React.createElement(Button, {
+    appearance: "default",
+    spacing: "compact",
+    onClick: event => {
+      event.preventDefault();
+      event.stopPropagation();
+      onRetry();
+    },
+    isLoading: isLoading,
+    testId: "sync-block-retry-btn"
+  }, formatMessage(messages.retryButton)));
+};

package/dist/es2019/ui/SyncedBlockLoadingState.compiled.css

@@ -0,0 +1,6 @@
+._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1tkevbgk{min-height:4pc}
+._4cvr1h6o{align-items:center}

package/dist/es2019/ui/SyncedBlockLoadingState.js

@@ -1,4 +1,17 @@
+/* SyncedBlockLoadingState.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./SyncedBlockLoadingState.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { Box } from '@atlaskit/primitives/compiled';
+import Spinner from '@atlaskit/spinner';
+const styles = {
+  wrapper: "_19itia51 _2rko12b0 _1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
+};
 export const SyncedBlockLoadingState = () => {
-  return /*#__PURE__*/React.createElement("div", null, "Loading...");
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "small",
+    label: "Loading synced content"
+  }));
 };