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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-synced-block-renderer
 
+## 3.0.0
+
+### Major Changes
+
+- [`181018115c031`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/181018115c031) -
+  EDITOR-2438 Pass data providers to Synced Block nested renderer
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.3.1
+
+### Patch Changes
+
+- [`ff3e1422d5b70`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ff3e1422d5b70) -
+  [ux] EDITOR-2437 implement request access to sync block component
+- Updated dependencies
+
 ## 2.3.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -18,12 +18,33 @@
 		"../src/**/examples.*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/button/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/css/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-synced-block-provider/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/heading/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/image/afm-cc/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/primitives/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../renderer/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/tokens/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-cc/tsconfig.json"
 		}

package/afm-products/tsconfig.json

@@ -22,12 +22,33 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/button/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/css/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../editor-synced-block-provider/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/heading/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/image/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/primitives/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../renderer/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/tokens/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-products/tsconfig.json"
 		}

package/dist/cjs/getSyncedBlockRenderer.js

@@ -7,8 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.getSyncedBlockRenderer = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _SyncedBlockRenderer = require("./ui/SyncedBlockRenderer");
-var getSyncedBlockRenderer = exports.getSyncedBlockRenderer = function getSyncedBlockRenderer(props) {
+var getSyncedBlockRenderer = exports.getSyncedBlockRenderer = function getSyncedBlockRenderer(_ref) {
+  var syncBlockRendererDataProviders = _ref.syncBlockRendererDataProviders,
+    useFetchSyncBlockData = _ref.useFetchSyncBlockData;
   return /*#__PURE__*/_react.default.createElement(_SyncedBlockRenderer.SyncedBlockRenderer, {
-    useFetchSyncBlockData: props.useFetchSyncBlockData
+    syncBlockRendererDataProviders: syncBlockRendererDataProviders,
+    useFetchSyncBlockData: useFetchSyncBlockData
   });
 };

package/dist/cjs/ui/SyncedBlockErrorComponent.js

@@ -7,11 +7,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.SyncedBlockErrorComponent = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
+var _SyncedBlockPermissionDenied = require("./SyncedBlockPermissionDenied");
 var SyncedBlockErrorComponent = exports.SyncedBlockErrorComponent = function SyncedBlockErrorComponent(_ref) {
-  var error = _ref.error;
+  var error = _ref.error,
+    resourceId = _ref.resourceId;
   switch (error) {
     case _editorSyncedBlockProvider.SyncBlockError.Forbidden:
-      return /*#__PURE__*/_react.default.createElement("div", null, "You don't have permission to view this sync block");
+      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:

package/dist/cjs/ui/SyncedBlockNodeComponentRenderer.js

@@ -39,7 +39,8 @@ var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer
   if (fetchResult !== null && fetchResult !== void 0 && fetchResult.error || !(fetchResult !== null && fetchResult !== void 0 && fetchResult.data)) {
     var _fetchResult$error;
     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: (_fetchResult$error = fetchResult === null || fetchResult === void 0 ? void 0 : fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : _editorSyncedBlockProvider.SyncBlockError.Errored,
+      resourceId: props.resourceId
     });
   }
   var syncBlockDoc = {

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

@@ -0,0 +1,11 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._19bvxy5q{padding-left:var(--ds-space-400,2pc)}
+._1bahv2br{justify-content:start}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
+._ca0qv47k{padding-top:var(--ds-space-250,20px)}
+._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
+._u5f3v47k{padding-right:var(--ds-space-250,20px)}

package/dist/cjs/ui/SyncedBlockPermissionDenied.js

@@ -0,0 +1,107 @@
+/* SyncedBlockPermissionDenied.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+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"));
+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"));
+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 _bfhksyzs _1e0c1txw _1bahv2br _4cvr1h6o",
+  textWrapper: "_18u0u2gc"
+};
+var RequestAccessState = /*#__PURE__*/function (RequestAccessState) {
+  RequestAccessState["default"] = "default";
+  RequestAccessState["errored"] = "errored";
+  RequestAccessState["loading"] = "loading";
+  RequestAccessState["pending"] = "pending";
+  return RequestAccessState;
+}(RequestAccessState || {});
+var SyncedBlockPermissionDenied = exports.SyncedBlockPermissionDenied = function SyncedBlockPermissionDenied(_ref) {
+  var contentId = _ref.contentId;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useState = (0, _react.useState)(RequestAccessState.default),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    requestAccessState = _useState2[0],
+    setRequestAccessState = _useState2[1];
+  var handleRequestComplete = function handleRequestComplete() {
+    setRequestAccessState(RequestAccessState.pending);
+  };
+  var handleRequestError = function handleRequestError(error) {
+    setRequestAccessState(RequestAccessState.errored);
+  };
+  var _useMutation = (0, _reactRelay.useMutation)(_SyncedBlockPermissionDeniedRequestAccessMutation2.default),
+    _useMutation2 = (0, _slicedToArray2.default)(_useMutation, 1),
+    commitMutation = _useMutation2[0];
+  var onClick = function onClick() {
+    setRequestAccessState(RequestAccessState.loading);
+    commitMutation({
+      variables: {
+        requestPageAccessInput: {
+          pageId: contentId,
+          accessType: 'VIEW'
+        }
+      },
+      onCompleted: function onCompleted() {
+        handleRequestComplete();
+      },
+      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, {
+    columnGap: "space.050",
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_statusSuccess.default, {
+    size: "small",
+    color: "var(--ds-icon-subtle, #626F86)",
+    label: ""
+  }), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    color: "color.text.subtlest",
+    weight: "bold",
+    testId: "sync-block-access-requested-msg"
+  }, formatMessage(_messages.syncBlockMessages.accessRequested))) : /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+    columnGap: "space.100",
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "default",
+    spacing: "compact",
+    onClick: onClick,
+    isLoading: requestAccessState === RequestAccessState.loading,
+    testId: "sync-block-request-access-btn"
+  }, 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)))));
+};

package/dist/cjs/ui/SyncedBlockRenderer.js

@@ -1,41 +1,69 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SyncedBlockRenderer = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.convertSyncBlockRendererDataProvidersToProviderFactory = 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 _renderer = require("@atlaskit/renderer");
 var _actions = require("@atlaskit/renderer/actions");
 var _SyncedBlockErrorComponent = require("./SyncedBlockErrorComponent");
 var _SyncedBlockLoadingState = require("./SyncedBlockLoadingState");
-var SyncedBlockRenderer = exports.SyncedBlockRenderer = function SyncedBlockRenderer(_ref) {
-  var useFetchSyncBlockData = _ref.useFetchSyncBlockData,
-    dataProviders = _ref.dataProviders;
+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 SyncedBlockRendererWrapper = function SyncedBlockRendererWrapper(_ref) {
+  var fetchedData = _ref.fetchedData,
+    providerFactory = _ref.providerFactory;
+  var syncBlockDoc = (0, _react.useMemo)(function () {
+    var _fetchedData$content;
+    return {
+      content: (_fetchedData$content = fetchedData.content) !== null && _fetchedData$content !== void 0 ? _fetchedData$content : [],
+      version: 1,
+      type: 'doc'
+    };
+  }, [fetchedData]);
+  return /*#__PURE__*/_react.default.createElement(_actions.RendererActionsContext, null, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "sync-block-renderer-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_renderer.ReactRenderer, {
+    appearance: "full-width",
+    adfStage: "stage0",
+    document: syncBlockDoc,
+    disableHeadingIDs: true,
+    dataProviders: providerFactory
+  })));
+};
+var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref2) {
+  var useFetchSyncBlockData = _ref2.useFetchSyncBlockData,
+    syncBlockRendererDataProviders = _ref2.syncBlockRendererDataProviders;
   var fetchResult = useFetchSyncBlockData();
+  var providerFactory = (0, _react.useMemo)(function () {
+    return convertSyncBlockRendererDataProvidersToProviderFactory(syncBlockRendererDataProviders);
+  }, [syncBlockRendererDataProviders]);
   if (!fetchResult) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
   }
   if (fetchResult.error || !fetchResult.data) {
     var _fetchResult$error;
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
-      error: (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : _editorSyncedBlockProvider.SyncBlockError.Errored
+      error: (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : _editorSyncedBlockProvider.SyncBlockError.Errored,
+      resourceId: fetchResult.resourceId
     });
   }
-  var syncBlockDoc = {
-    content: fetchResult.data.content,
-    version: 1,
-    type: 'doc'
-  };
-  return /*#__PURE__*/_react.default.createElement(_actions.RendererActionsContext, null, /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": "sync-block-renderer-wrapper"
-  }, /*#__PURE__*/_react.default.createElement(_renderer.ReactRenderer, {
-    appearance: "full-width",
-    adfStage: "stage0",
-    document: syncBlockDoc,
-    disableHeadingIDs: true,
-    dataProviders: dataProviders
-  })));
-};
+  return /*#__PURE__*/_react.default.createElement(SyncedBlockRendererWrapper, {
+    fetchedData: fetchResult.data,
+    providerFactory: providerFactory
+  });
+};
+var SyncedBlockRenderer = exports.SyncedBlockRenderer = /*#__PURE__*/(0, _react.memo)(SyncedBlockRendererComponent);

package/dist/cjs/ui/__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * @generated SignedSource<<3bfb9487e57255dc0512f225894a058b>>
+ * @relayHash 676631e44ffd7d0d16b3a7e96ba02def
+ * @lightSyntaxTransform
+ * @nogrep
+ * @codegen-command: yarn relay
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+// @relayRequestID 68a651ca7e5a5c9b5a075954ed948672c451b0f8c255f4edbd3219fe4947484d
+
+var node = function () {
+  var v0 = [{
+      "defaultValue": null,
+      "kind": "LocalArgument",
+      "name": "requestPageAccessInput"
+    }],
+    v1 = [{
+      "args": [{
+        "kind": "Variable",
+        "name": "requestPageAccessInput",
+        "variableName": "requestPageAccessInput"
+      }],
+      "concreteType": "RequestPageAccessPayload",
+      "kind": "LinkedField",
+      "name": "requestPageAccess",
+      "plural": false,
+      "selections": [{
+        "kind": "ScalarField",
+        "name": "displayName"
+      }]
+    }];
+  return {
+    "fragment": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Fragment",
+      "name": "SyncedBlockPermissionDeniedRequestAccessMutation",
+      "selections": v1 /*: any*/,
+      "type": "Mutation"
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Operation",
+      "name": "SyncedBlockPermissionDeniedRequestAccessMutation",
+      "selections": v1 /*: any*/
+    },
+    "params": {
+      "id": "68a651ca7e5a5c9b5a075954ed948672c451b0f8c255f4edbd3219fe4947484d",
+      "metadata": {},
+      "name": "SyncedBlockPermissionDeniedRequestAccessMutation",
+      "operationKind": "mutation",
+      "text": null
+    }
+  };
+}();
+node.hash = "d0d4982ad805583380d2436a8e21ee6a";
+var _default = exports.default = node;

package/dist/es2019/getSyncedBlockRenderer.js

@@ -1,7 +1,11 @@
 import React from 'react';
 import { SyncedBlockRenderer } from './ui/SyncedBlockRenderer';
-export const getSyncedBlockRenderer = props => {
+export const getSyncedBlockRenderer = ({
+  syncBlockRendererDataProviders,
+  useFetchSyncBlockData
+}) => {
   return /*#__PURE__*/React.createElement(SyncedBlockRenderer, {
-    useFetchSyncBlockData: props.useFetchSyncBlockData
+    syncBlockRendererDataProviders: syncBlockRendererDataProviders,
+    useFetchSyncBlockData: useFetchSyncBlockData
   });
 };

package/dist/es2019/ui/SyncedBlockErrorComponent.js

@@ -1,11 +1,23 @@
 import React from 'react';
-import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
+import { getPageIdAndTypeFromAri, SyncBlockError } from '@atlaskit/editor-synced-block-provider';
+import { SyncedBlockPermissionDenied } from './SyncedBlockPermissionDenied';
 export const SyncedBlockErrorComponent = ({
-  error
+  error,
+  resourceId
 }) => {
   switch (error) {
     case SyncBlockError.Forbidden:
-      return /*#__PURE__*/React.createElement("div", null, "You don't have permission to view this sync block");
+      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:

package/dist/es2019/ui/SyncedBlockNodeComponentRenderer.js

@@ -24,7 +24,8 @@ export const SyncedBlockNodeComponentRenderer = props => {
   if (fetchResult !== null && fetchResult !== void 0 && fetchResult.error || !(fetchResult !== null && fetchResult !== void 0 && fetchResult.data)) {
     var _fetchResult$error;
     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: (_fetchResult$error = fetchResult === null || fetchResult === void 0 ? void 0 : fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored,
+      resourceId: props.resourceId
     });
   }
   const syncBlockDoc = {

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

@@ -0,0 +1,11 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._19bvxy5q{padding-left:var(--ds-space-400,2pc)}
+._1bahv2br{justify-content:start}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
+._ca0qv47k{padding-top:var(--ds-space-250,20px)}
+._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
+._u5f3v47k{padding-right:var(--ds-space-250,20px)}

package/dist/es2019/ui/SyncedBlockPermissionDenied.js

@@ -0,0 +1,94 @@
+/* SyncedBlockPermissionDenied.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./SyncedBlockPermissionDenied.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import _SyncedBlockPermissionDeniedRequestAccessMutation from "./__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql";
+import React, { useState } from 'react';
+import { useIntl } from 'react-intl-next';
+import { useMutation, graphql } from 'react-relay';
+import Button from '@atlaskit/button/new';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import Heading from '@atlaskit/heading';
+import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
+import Image from '@atlaskit/image';
+import { Box, Text, Stack, Flex } from '@atlaskit/primitives/compiled';
+import PermissionDenied from './assets/PermissionDenied.svg';
+const styles = {
+  wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhksyzs _1e0c1txw _1bahv2br _4cvr1h6o",
+  textWrapper: "_18u0u2gc"
+};
+var RequestAccessState = /*#__PURE__*/function (RequestAccessState) {
+  RequestAccessState["default"] = "default";
+  RequestAccessState["errored"] = "errored";
+  RequestAccessState["loading"] = "loading";
+  RequestAccessState["pending"] = "pending";
+  return RequestAccessState;
+}(RequestAccessState || {});
+export const SyncedBlockPermissionDenied = ({
+  contentId
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const [requestAccessState, setRequestAccessState] = useState(RequestAccessState.default);
+  const handleRequestComplete = () => {
+    setRequestAccessState(RequestAccessState.pending);
+  };
+  const handleRequestError = error => {
+    setRequestAccessState(RequestAccessState.errored);
+  };
+  const [commitMutation] = useMutation(_SyncedBlockPermissionDeniedRequestAccessMutation);
+  const onClick = () => {
+    setRequestAccessState(RequestAccessState.loading);
+    commitMutation({
+      variables: {
+        requestPageAccessInput: {
+          pageId: contentId,
+          accessType: 'VIEW'
+        }
+      },
+      onCompleted: () => {
+        handleRequestComplete();
+      },
+      onError: handleRequestError
+    });
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: PermissionDenied,
+    alt: formatMessage(messages.permissionDeniedAltText),
+    width: "48",
+    height: "48"
+  }), /*#__PURE__*/React.createElement(Stack, {
+    space: "space.100",
+    alignInline: "start",
+    xcss: styles.textWrapper
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "xsmall"
+  }, formatMessage(messages.permissionDeniedHeading)), /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtle"
+  }, formatMessage(messages.permissionDeniedDescription)), requestAccessState === RequestAccessState.pending ? /*#__PURE__*/React.createElement(Flex, {
+    columnGap: "space.050",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(StatusSuccessIcon, {
+    size: "small",
+    color: "var(--ds-icon-subtle, #626F86)",
+    label: ""
+  }), /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtlest",
+    weight: "bold",
+    testId: "sync-block-access-requested-msg"
+  }, formatMessage(messages.accessRequested))) : /*#__PURE__*/React.createElement(Flex, {
+    columnGap: "space.100",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Button, {
+    appearance: "default",
+    spacing: "compact",
+    onClick: onClick,
+    isLoading: requestAccessState === RequestAccessState.loading,
+    testId: "sync-block-request-access-btn"
+  }, formatMessage(messages.requestAccessButton)), requestAccessState === RequestAccessState.errored && /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.warning",
+    testId: "sync-block-access-error-msg"
+  }, formatMessage(messages.requestAccessError)))));
+};

package/dist/es2019/ui/SyncedBlockRenderer.js

@@ -1,35 +1,63 @@
-import React from 'react';
+import React, { memo, useMemo } from 'react';
+import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { SyncBlockError } 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 SyncedBlockRenderer = ({
+export const convertSyncBlockRendererDataProvidersToProviderFactory = dataProviders => {
+  return 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
+  });
+};
+const SyncedBlockRendererWrapper = ({
+  fetchedData,
+  providerFactory
+}) => {
+  const syncBlockDoc = useMemo(() => {
+    var _fetchedData$content;
+    return {
+      content: (_fetchedData$content = fetchedData.content) !== null && _fetchedData$content !== void 0 ? _fetchedData$content : [],
+      version: 1,
+      type: 'doc'
+    };
+  }, [fetchedData]);
+  return /*#__PURE__*/React.createElement(RendererActionsContext, null, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "sync-block-renderer-wrapper"
+  }, /*#__PURE__*/React.createElement(ReactRenderer, {
+    appearance: "full-width",
+    adfStage: "stage0",
+    document: syncBlockDoc,
+    disableHeadingIDs: true,
+    dataProviders: providerFactory
+  })));
+};
+const SyncedBlockRendererComponent = ({
   useFetchSyncBlockData,
-  dataProviders
+  syncBlockRendererDataProviders
 }) => {
   const fetchResult = useFetchSyncBlockData();
+  const providerFactory = useMemo(() => {
+    return convertSyncBlockRendererDataProvidersToProviderFactory(syncBlockRendererDataProviders);
+  }, [syncBlockRendererDataProviders]);
   if (!fetchResult) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
   if (fetchResult.error || !fetchResult.data) {
     var _fetchResult$error;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored
+      error: (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored,
+      resourceId: fetchResult.resourceId
     });
   }
-  const syncBlockDoc = {
-    content: fetchResult.data.content,
-    version: 1,
-    type: 'doc'
-  };
-  return /*#__PURE__*/React.createElement(RendererActionsContext, null, /*#__PURE__*/React.createElement("div", {
-    "data-testid": "sync-block-renderer-wrapper"
-  }, /*#__PURE__*/React.createElement(ReactRenderer, {
-    appearance: "full-width",
-    adfStage: "stage0",
-    document: syncBlockDoc,
-    disableHeadingIDs: true,
-    dataProviders: dataProviders
-  })));
-};
+  return /*#__PURE__*/React.createElement(SyncedBlockRendererWrapper, {
+    fetchedData: fetchResult.data,
+    providerFactory: providerFactory
+  });
+};
+export const SyncedBlockRenderer = /*#__PURE__*/memo(SyncedBlockRendererComponent);

package/dist/es2019/ui/__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql.js

@@ -0,0 +1,61 @@
+/**
+ * @generated SignedSource<<3bfb9487e57255dc0512f225894a058b>>
+ * @relayHash 676631e44ffd7d0d16b3a7e96ba02def
+ * @lightSyntaxTransform
+ * @nogrep
+ * @codegen-command: yarn relay
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+// @relayRequestID 68a651ca7e5a5c9b5a075954ed948672c451b0f8c255f4edbd3219fe4947484d
+
+const node = function () {
+  var v0 = [{
+      "defaultValue": null,
+      "kind": "LocalArgument",
+      "name": "requestPageAccessInput"
+    }],
+    v1 = [{
+      "args": [{
+        "kind": "Variable",
+        "name": "requestPageAccessInput",
+        "variableName": "requestPageAccessInput"
+      }],
+      "concreteType": "RequestPageAccessPayload",
+      "kind": "LinkedField",
+      "name": "requestPageAccess",
+      "plural": false,
+      "selections": [{
+        "kind": "ScalarField",
+        "name": "displayName"
+      }]
+    }];
+  return {
+    "fragment": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Fragment",
+      "name": "SyncedBlockPermissionDeniedRequestAccessMutation",
+      "selections": v1 /*: any*/,
+      "type": "Mutation"
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Operation",
+      "name": "SyncedBlockPermissionDeniedRequestAccessMutation",
+      "selections": v1 /*: any*/
+    },
+    "params": {
+      "id": "68a651ca7e5a5c9b5a075954ed948672c451b0f8c255f4edbd3219fe4947484d",
+      "metadata": {},
+      "name": "SyncedBlockPermissionDeniedRequestAccessMutation",
+      "operationKind": "mutation",
+      "text": null
+    }
+  };
+}();
+node.hash = "d0d4982ad805583380d2436a8e21ee6a";
+export default node;

package/dist/esm/getSyncedBlockRenderer.js

@@ -1,7 +1,10 @@
 import React from 'react';
 import { SyncedBlockRenderer } from './ui/SyncedBlockRenderer';
-export var getSyncedBlockRenderer = function getSyncedBlockRenderer(props) {
+export var getSyncedBlockRenderer = function getSyncedBlockRenderer(_ref) {
+  var syncBlockRendererDataProviders = _ref.syncBlockRendererDataProviders,
+    useFetchSyncBlockData = _ref.useFetchSyncBlockData;
   return /*#__PURE__*/React.createElement(SyncedBlockRenderer, {
-    useFetchSyncBlockData: props.useFetchSyncBlockData
+    syncBlockRendererDataProviders: syncBlockRendererDataProviders,
+    useFetchSyncBlockData: useFetchSyncBlockData
   });
 };

package/dist/esm/ui/SyncedBlockErrorComponent.js

@@ -1,10 +1,21 @@
 import React from 'react';
-import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
+import { getPageIdAndTypeFromAri, SyncBlockError } from '@atlaskit/editor-synced-block-provider';
+import { SyncedBlockPermissionDenied } from './SyncedBlockPermissionDenied';
 export var SyncedBlockErrorComponent = function SyncedBlockErrorComponent(_ref) {
-  var error = _ref.error;
+  var error = _ref.error,
+    resourceId = _ref.resourceId;
   switch (error) {
     case SyncBlockError.Forbidden:
-      return /*#__PURE__*/React.createElement("div", null, "You don't have permission to view this sync block");
+      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:

package/dist/esm/ui/SyncedBlockNodeComponentRenderer.js

@@ -30,7 +30,8 @@ export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentR
   if (fetchResult !== null && fetchResult !== void 0 && fetchResult.error || !(fetchResult !== null && fetchResult !== void 0 && fetchResult.data)) {
     var _fetchResult$error;
     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: (_fetchResult$error = fetchResult === null || fetchResult === void 0 ? void 0 : fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored,
+      resourceId: props.resourceId
     });
   }
   var syncBlockDoc = {

package/dist/esm/ui/SyncedBlockPermissionDenied.compiled.css

@@ -0,0 +1,11 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._19bvxy5q{padding-left:var(--ds-space-400,2pc)}
+._1bahv2br{justify-content:start}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
+._ca0qv47k{padding-top:var(--ds-space-250,20px)}
+._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
+._u5f3v47k{padding-right:var(--ds-space-250,20px)}

package/dist/esm/ui/SyncedBlockPermissionDenied.js

@@ -0,0 +1,98 @@
+/* SyncedBlockPermissionDenied.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./SyncedBlockPermissionDenied.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import _SyncedBlockPermissionDeniedRequestAccessMutation from "./__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql";
+import React, { useState } from 'react';
+import { useIntl } from 'react-intl-next';
+import { useMutation, graphql } from 'react-relay';
+import Button from '@atlaskit/button/new';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import Heading from '@atlaskit/heading';
+import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
+import Image from '@atlaskit/image';
+import { Box, Text, Stack, Flex } from '@atlaskit/primitives/compiled';
+import PermissionDenied from './assets/PermissionDenied.svg';
+var styles = {
+  wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhksyzs _1e0c1txw _1bahv2br _4cvr1h6o",
+  textWrapper: "_18u0u2gc"
+};
+var RequestAccessState = /*#__PURE__*/function (RequestAccessState) {
+  RequestAccessState["default"] = "default";
+  RequestAccessState["errored"] = "errored";
+  RequestAccessState["loading"] = "loading";
+  RequestAccessState["pending"] = "pending";
+  return RequestAccessState;
+}(RequestAccessState || {});
+export var SyncedBlockPermissionDenied = function SyncedBlockPermissionDenied(_ref) {
+  var contentId = _ref.contentId;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useState = useState(RequestAccessState.default),
+    _useState2 = _slicedToArray(_useState, 2),
+    requestAccessState = _useState2[0],
+    setRequestAccessState = _useState2[1];
+  var handleRequestComplete = function handleRequestComplete() {
+    setRequestAccessState(RequestAccessState.pending);
+  };
+  var handleRequestError = function handleRequestError(error) {
+    setRequestAccessState(RequestAccessState.errored);
+  };
+  var _useMutation = useMutation(_SyncedBlockPermissionDeniedRequestAccessMutation),
+    _useMutation2 = _slicedToArray(_useMutation, 1),
+    commitMutation = _useMutation2[0];
+  var onClick = function onClick() {
+    setRequestAccessState(RequestAccessState.loading);
+    commitMutation({
+      variables: {
+        requestPageAccessInput: {
+          pageId: contentId,
+          accessType: 'VIEW'
+        }
+      },
+      onCompleted: function onCompleted() {
+        handleRequestComplete();
+      },
+      onError: handleRequestError
+    });
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: PermissionDenied,
+    alt: formatMessage(messages.permissionDeniedAltText),
+    width: "48",
+    height: "48"
+  }), /*#__PURE__*/React.createElement(Stack, {
+    space: "space.100",
+    alignInline: "start",
+    xcss: styles.textWrapper
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "xsmall"
+  }, formatMessage(messages.permissionDeniedHeading)), /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtle"
+  }, formatMessage(messages.permissionDeniedDescription)), requestAccessState === RequestAccessState.pending ? /*#__PURE__*/React.createElement(Flex, {
+    columnGap: "space.050",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(StatusSuccessIcon, {
+    size: "small",
+    color: "var(--ds-icon-subtle, #626F86)",
+    label: ""
+  }), /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtlest",
+    weight: "bold",
+    testId: "sync-block-access-requested-msg"
+  }, formatMessage(messages.accessRequested))) : /*#__PURE__*/React.createElement(Flex, {
+    columnGap: "space.100",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Button, {
+    appearance: "default",
+    spacing: "compact",
+    onClick: onClick,
+    isLoading: requestAccessState === RequestAccessState.loading,
+    testId: "sync-block-request-access-btn"
+  }, formatMessage(messages.requestAccessButton)), requestAccessState === RequestAccessState.errored && /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.warning",
+    testId: "sync-block-access-error-msg"
+  }, formatMessage(messages.requestAccessError)))));
+};

package/dist/esm/ui/SyncedBlockRenderer.js

@@ -1,34 +1,61 @@
-import React from 'react';
+import React, { memo, useMemo } from 'react';
+import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { SyncBlockError } 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 SyncedBlockRenderer = function SyncedBlockRenderer(_ref) {
-  var useFetchSyncBlockData = _ref.useFetchSyncBlockData,
-    dataProviders = _ref.dataProviders;
+export var convertSyncBlockRendererDataProvidersToProviderFactory = function convertSyncBlockRendererDataProvidersToProviderFactory(dataProviders) {
+  return 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 SyncedBlockRendererWrapper = function SyncedBlockRendererWrapper(_ref) {
+  var fetchedData = _ref.fetchedData,
+    providerFactory = _ref.providerFactory;
+  var syncBlockDoc = useMemo(function () {
+    var _fetchedData$content;
+    return {
+      content: (_fetchedData$content = fetchedData.content) !== null && _fetchedData$content !== void 0 ? _fetchedData$content : [],
+      version: 1,
+      type: 'doc'
+    };
+  }, [fetchedData]);
+  return /*#__PURE__*/React.createElement(RendererActionsContext, null, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "sync-block-renderer-wrapper"
+  }, /*#__PURE__*/React.createElement(ReactRenderer, {
+    appearance: "full-width",
+    adfStage: "stage0",
+    document: syncBlockDoc,
+    disableHeadingIDs: true,
+    dataProviders: providerFactory
+  })));
+};
+var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref2) {
+  var useFetchSyncBlockData = _ref2.useFetchSyncBlockData,
+    syncBlockRendererDataProviders = _ref2.syncBlockRendererDataProviders;
   var fetchResult = useFetchSyncBlockData();
+  var providerFactory = useMemo(function () {
+    return convertSyncBlockRendererDataProvidersToProviderFactory(syncBlockRendererDataProviders);
+  }, [syncBlockRendererDataProviders]);
   if (!fetchResult) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
   if (fetchResult.error || !fetchResult.data) {
     var _fetchResult$error;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored
+      error: (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored,
+      resourceId: fetchResult.resourceId
     });
   }
-  var syncBlockDoc = {
-    content: fetchResult.data.content,
-    version: 1,
-    type: 'doc'
-  };
-  return /*#__PURE__*/React.createElement(RendererActionsContext, null, /*#__PURE__*/React.createElement("div", {
-    "data-testid": "sync-block-renderer-wrapper"
-  }, /*#__PURE__*/React.createElement(ReactRenderer, {
-    appearance: "full-width",
-    adfStage: "stage0",
-    document: syncBlockDoc,
-    disableHeadingIDs: true,
-    dataProviders: dataProviders
-  })));
-};
+  return /*#__PURE__*/React.createElement(SyncedBlockRendererWrapper, {
+    fetchedData: fetchResult.data,
+    providerFactory: providerFactory
+  });
+};
+export var SyncedBlockRenderer = /*#__PURE__*/memo(SyncedBlockRendererComponent);

package/dist/esm/ui/__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql.js

@@ -0,0 +1,61 @@
+/**
+ * @generated SignedSource<<3bfb9487e57255dc0512f225894a058b>>
+ * @relayHash 676631e44ffd7d0d16b3a7e96ba02def
+ * @lightSyntaxTransform
+ * @nogrep
+ * @codegen-command: yarn relay
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+// @relayRequestID 68a651ca7e5a5c9b5a075954ed948672c451b0f8c255f4edbd3219fe4947484d
+
+var node = function () {
+  var v0 = [{
+      "defaultValue": null,
+      "kind": "LocalArgument",
+      "name": "requestPageAccessInput"
+    }],
+    v1 = [{
+      "args": [{
+        "kind": "Variable",
+        "name": "requestPageAccessInput",
+        "variableName": "requestPageAccessInput"
+      }],
+      "concreteType": "RequestPageAccessPayload",
+      "kind": "LinkedField",
+      "name": "requestPageAccess",
+      "plural": false,
+      "selections": [{
+        "kind": "ScalarField",
+        "name": "displayName"
+      }]
+    }];
+  return {
+    "fragment": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Fragment",
+      "name": "SyncedBlockPermissionDeniedRequestAccessMutation",
+      "selections": v1 /*: any*/,
+      "type": "Mutation"
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": v0 /*: any*/,
+      "kind": "Operation",
+      "name": "SyncedBlockPermissionDeniedRequestAccessMutation",
+      "selections": v1 /*: any*/
+    },
+    "params": {
+      "id": "68a651ca7e5a5c9b5a075954ed948672c451b0f8c255f4edbd3219fe4947484d",
+      "metadata": {},
+      "name": "SyncedBlockPermissionDeniedRequestAccessMutation",
+      "operationKind": "mutation",
+      "text": null
+    }
+  };
+}();
+node.hash = "d0d4982ad805583380d2436a8e21ee6a";
+export default node;

package/dist/types/getSyncedBlockRenderer.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type SyncedBlockRendererProps } from './ui/SyncedBlockRenderer';
-export declare const getSyncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
+export declare const getSyncedBlockRenderer: ({ syncBlockRendererDataProviders, useFetchSyncBlockData, }: SyncedBlockRendererProps) => React.JSX.Element;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
-export declare const SyncedBlockErrorComponent: ({ error }: {
+export declare const SyncedBlockErrorComponent: ({ error, resourceId, }: {
     error: SyncBlockError;
+    resourceId?: string;
 }) => React.JSX.Element;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface SyncedBlockPermissionDeniedProps {
+    contentId: string;
+}
+export declare const SyncedBlockPermissionDenied: ({ contentId }: SyncedBlockPermissionDeniedProps) => React.JSX.Element;
+export {};

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

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

package/dist/types/ui/__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @generated SignedSource<<3bfb9487e57255dc0512f225894a058b>>
+ * @relayHash 676631e44ffd7d0d16b3a7e96ba02def
+ * @lightSyntaxTransform
+ * @nogrep
+ * @codegen-command: yarn relay
+ */
+import type { ConcreteRequest } from 'relay-runtime';
+export type AccessType = "EDIT" | "VIEW" | "%future added value";
+export type RequestPageAccessInput = {
+    accessType: AccessType;
+    pageId: string;
+};
+export type SyncedBlockPermissionDeniedRequestAccessMutation$variables = {
+    requestPageAccessInput: RequestPageAccessInput;
+};
+export type SyncedBlockPermissionDeniedRequestAccessMutation$data = {
+    readonly requestPageAccess: {
+        readonly displayName: string;
+    } | null | undefined;
+};
+export type SyncedBlockPermissionDeniedRequestAccessMutation = {
+    response: SyncedBlockPermissionDeniedRequestAccessMutation$data;
+    variables: SyncedBlockPermissionDeniedRequestAccessMutation$variables;
+};
+declare const node: ConcreteRequest;
+export default node;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type SyncedBlockRendererProps } from './ui/SyncedBlockRenderer';
-export declare const getSyncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
+export declare const getSyncedBlockRenderer: ({ syncBlockRendererDataProviders, useFetchSyncBlockData, }: SyncedBlockRendererProps) => React.JSX.Element;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
-export declare const SyncedBlockErrorComponent: ({ error }: {
+export declare const SyncedBlockErrorComponent: ({ error, resourceId, }: {
     error: SyncBlockError;
+    resourceId?: string;
 }) => React.JSX.Element;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface SyncedBlockPermissionDeniedProps {
+    contentId: string;
+}
+export declare const SyncedBlockPermissionDenied: ({ contentId }: SyncedBlockPermissionDeniedProps) => React.JSX.Element;
+export {};

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

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

package/dist/types-ts4.5/ui/__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @generated SignedSource<<3bfb9487e57255dc0512f225894a058b>>
+ * @relayHash 676631e44ffd7d0d16b3a7e96ba02def
+ * @lightSyntaxTransform
+ * @nogrep
+ * @codegen-command: yarn relay
+ */
+import type { ConcreteRequest } from 'relay-runtime';
+export type AccessType = "EDIT" | "VIEW" | "%future added value";
+export type RequestPageAccessInput = {
+    accessType: AccessType;
+    pageId: string;
+};
+export type SyncedBlockPermissionDeniedRequestAccessMutation$variables = {
+    requestPageAccessInput: RequestPageAccessInput;
+};
+export type SyncedBlockPermissionDeniedRequestAccessMutation$data = {
+    readonly requestPageAccess: {
+        readonly displayName: string;
+    } | null | undefined;
+};
+export type SyncedBlockPermissionDeniedRequestAccessMutation = {
+    response: SyncedBlockPermissionDeniedRequestAccessMutation$data;
+    variables: SyncedBlockPermissionDeniedRequestAccessMutation$variables;
+};
+declare const node: ConcreteRequest;
+export default node;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-synced-block-renderer",
-	"version": "2.3.0",
+	"version": "3.0.0",
 	"description": "SyncedBlockRenderer for @atlaskit/editor-plugin-synced-block",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,14 +28,24 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
+		"@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/heading": "^5.2.0",
+		"@atlaskit/icon": "^28.5.0",
+		"@atlaskit/image": "^3.0.0",
+		"@atlaskit/primitives": "^16.1.0",
 		"@atlaskit/renderer": "^124.9.0",
-		"@babel/runtime": "^7.0.0"
+		"@atlaskit/tokens": "^7.1.0",
+		"@babel/runtime": "^7.0.0",
+		"react-relay": "npm:atl-react-relay@0.0.0-main-5980a913",
+		"relay-runtime": "npm:atl-relay-compiler@0.0.0-main-5980a913"
 	},
 	"peerDependencies": {
 		"@atlaskit/editor-common": "^110.21.0",
-		"react": "^18.2.0"
+		"react": "^18.2.0",
+		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"devDependencies": {
 		"typescript": "5.9.2"