@atlaskit/editor-synced-block-renderer 5.6.2 → 5.6.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-synced-block-renderer
 
+## 5.6.3
+
+### Patch Changes
+
+- [`f11ff647ea458`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f11ff647ea458) -
+  [ux] [EDITOR-4521] Implement source deleted reference UI, update block deleted/unsynced reference
+  UI to add delete button, unsynced label and source title/url
+- Updated dependencies
+
 ## 5.6.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -50,6 +50,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-cc/tsconfig.json"
 		},

package/dist/cjs/ui/SyncedBlockErrorComponent.js

@@ -49,7 +49,8 @@ var SyncedBlockErrorComponent = exports.SyncedBlockErrorComponent = function Syn
         return getForbiddenErrorContent(resourceId, fireAnalyticsEvent);
       case _editorSyncedBlockProvider.SyncBlockError.NotFound:
         return /*#__PURE__*/_react.default.createElement(_SyncedBlockNotFoundError.SyncedBlockNotFoundError, {
-          reason: error.reason
+          reason: error.reason,
+          sourceAri: error.sourceAri
         });
       case _editorSyncedBlockProvider.SyncBlockError.Errored:
       case _editorSyncedBlockProvider.SyncBlockError.RateLimited:

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

@@ -1,8 +1,6 @@
 
-._zulppxbi{gap:var(--ds-space-200,1pc)}._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
-._1bahv2br{justify-content:start}
+._zulppxbi{gap:var(--ds-space-200,1pc)}
+._1rjc12x7{padding-block:var(--ds-space-075,6px)}._1bahv2br{justify-content:start}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
-._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
-._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
-._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}

package/dist/cjs/ui/SyncedBlockErrorStateCard.js

@@ -13,7 +13,8 @@ var _warningOutline = _interopRequireDefault(require("@atlaskit/icon-lab/core/wa
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var styles = {
-  wrapper: "_zulppxbi _ca0qu2gc _n3tdu2gc _19bvpxbi _u5f3pxbi _1e0c1txw _1bahv2br _4cvr1h6o"
+  wrapper: "_zulppxbi _1rjc12x7 _bozgpxbi _1e0c1txw _1bahv2br _4cvr1h6o",
+  container: "_1e0c1txw"
 };
 var SyncedBlockErrorStateCard = exports.SyncedBlockErrorStateCard = function SyncedBlockErrorStateCard(_ref) {
   var children = _ref.children,
@@ -21,11 +22,13 @@ var SyncedBlockErrorStateCard = exports.SyncedBlockErrorStateCard = function Syn
     icon = _ref.icon;
   var Icon = (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? icon !== null && icon !== void 0 ? icon : _warningOutline.default : _warningOutline.default;
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.container
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: styles.wrapper
   }, /*#__PURE__*/_react.default.createElement(Icon, {
     color: "var(--ds-icon-subtle, #505258)",
     label: ""
   }), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     color: "color.text.subtle"
-  }, description), children);
+  }, description), !(0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') && children), (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') && children);
 };

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

@@ -0,0 +1,3 @@
+._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}

package/dist/cjs/ui/SyncedBlockLoadError.js

@@ -1,3 +1,4 @@
+/* SyncedBlockLoadError.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,27 +6,37 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SyncedBlockLoadError = void 0;
+require("./SyncedBlockLoadError.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
+var styles = {
+  buttonContainer: "_18u0u2gc _1e0c1txw _4cvr1h6o"
+};
 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, {
-    description: formatMessage(_messages.syncBlockMessages.generalErrorDescription)
-  }, onRetry && /*#__PURE__*/_react.default.createElement(_new.default, {
+  var button = /*#__PURE__*/_react.default.createElement(_new.default, {
     appearance: "default",
     spacing: "compact",
     onClick: function onClick(event) {
       event.preventDefault();
       event.stopPropagation();
-      onRetry();
+      onRetry === null || onRetry === void 0 || onRetry();
     },
     isLoading: isLoading,
     testId: "sync-block-retry-btn"
-  }, formatMessage(_messages.syncBlockMessages.retryButton)));
+  }, formatMessage(_messages.syncBlockMessages.retryButton));
+  return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
+    description: formatMessage(_messages.syncBlockMessages.generalErrorDescription)
+  }, onRetry && ((0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.buttonContainer
+  }, button) : button));
 };

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

@@ -0,0 +1,10 @@
+
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._16jlkb7n{flex-grow:1}
+._1bah1h6o{justify-content:center}
+._1bahesu3{justify-content:flex-end}
+._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
+._1o9zkb7n{flex-shrink:1}
+._4bfu1r31{text-decoration-color:currentColor}
+._ajmmnqa1{text-decoration-style:solid}
+._i0dlf1ug{flex-basis:0%}

package/dist/cjs/ui/SyncedBlockNotFoundError.js

@@ -1,16 +1,36 @@
+/* SyncedBlockNotFoundError.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.SyncedBlockNotFoundError = void 0;
-var _react = _interopRequireDefault(require("react"));
+require("./SyncedBlockNotFoundError.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
-var _messages = require("@atlaskit/editor-common/messages");
+var _new = require("@atlaskit/button/new");
+var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
+var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
+var _eyeOpenStrikethrough = _interopRequireDefault(require("@atlaskit/icon/core/eye-open-strikethrough"));
 var _linkBroken = _interopRequireDefault(require("@atlaskit/icon/core/link-broken"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 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 = {
+  link: "_4bfu1r31 _1hmsglyw _ajmmnqa1",
+  spinner: "_1rjcutpp _1e0c1txw _1bah1h6o",
+  closeButton: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1e0c1txw _1bahesu3"
+};
 var errorMap = {
   'source-block-unsynced': {
     description: _messages.syncBlockMessages.sourceUnsyncedDescription,
@@ -19,25 +39,143 @@ var errorMap = {
   'source-block-deleted': {
     description: _messages.syncBlockMessages.sourceDeletedDescription,
     icon: _linkBroken.default
+  },
+  'source-document-deleted': {
+    description: _messages.syncBlockMessages.notFoundDescription,
+    icon: _eyeOpenStrikethrough.default
+  },
+  generic: {
+    description: _messages.syncBlockMessages.genericNotFoundDescription,
+    icon: _linkBroken.default
   }
 };
-var SyncedBlockNotFoundError = exports.SyncedBlockNotFoundError = function SyncedBlockNotFoundError(_ref) {
-  var _ref$reason = _ref.reason,
-    reason = _ref$reason === void 0 ? 'source-block-deleted' : _ref$reason;
+var useSyncBlockInfo = (0, _platformFeatureFlagsReact.conditionalHooksFactory)(function () {
+  return (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding');
+}, function () {
+  var _useSyncBlockActions;
+  var _ref = (_useSyncBlockActions = (0, _syncBlock.useSyncBlockActions)()) !== null && _useSyncBlockActions !== void 0 ? _useSyncBlockActions : {},
+    deleteSyncBlock = _ref.deleteSyncBlock,
+    fetchSourceInfo = _ref.fetchSourceInfo;
+  return {
+    deleteSyncBlock: deleteSyncBlock,
+    fetchSourceInfo: fetchSourceInfo
+  };
+}, function () {
+  return {
+    deleteSyncBlock: undefined,
+    fetchSourceInfo: undefined
+  };
+});
+var useErrorInfo = (0, _platformFeatureFlagsReact.conditionalHooksFactory)(function () {
+  return (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding');
+}, function (reason, url, title) {
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var errorInfo = {
-    description: _messages.syncBlockMessages.notFoundDescription
-  };
-  if ((0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
-    var _errorMap$reason;
-    errorInfo = (_errorMap$reason = errorMap[reason]) !== null && _errorMap$reason !== void 0 ? _errorMap$reason : {};
+  if (reason === 'source-document-deleted') {
+    var _errorMap$sourceDocu = errorMap['source-document-deleted'],
+      _icon = _errorMap$sourceDocu.icon,
+      _description = _errorMap$sourceDocu.description;
+    return {
+      description: formatMessage(_description),
+      icon: _icon
+    };
+  }
+  if (!url || !title) {
+    var _errorMap$generic = errorMap['generic'],
+      _icon2 = _errorMap$generic.icon,
+      _description2 = _errorMap$generic.description;
+    return {
+      description: formatMessage(_description2),
+      icon: _icon2
+    };
   }
-  var _errorInfo = errorInfo,
-    description = _errorInfo.description,
-    icon = _errorInfo.icon;
-  return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
-    description: formatMessage(description),
+  var _errorMap = errorMap[reason || 'generic'],
+    icon = _errorMap.icon,
+    description = _errorMap.description;
+  return {
+    description: formatMessage(description, {
+      title: title,
+      a: function a(chunk) {
+        return /*#__PURE__*/_react.default.createElement(_compiled.Anchor, {
+          href: url,
+          target: "_blank",
+          xcss: styles.link
+        }, chunk);
+      }
+    }),
+    icon: icon
+  };
+}, function (_) {
+  var _useIntl2 = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl2.formatMessage;
+  return {
+    description: formatMessage(_messages.syncBlockMessages.notFoundDescription),
+    icon: undefined
+  };
+});
+var SyncedBlockNotFoundError = exports.SyncedBlockNotFoundError = function SyncedBlockNotFoundError(_ref2) {
+  var _ref2$reason = _ref2.reason,
+    reason = _ref2$reason === void 0 ? 'source-block-deleted' : _ref2$reason,
+    sourceAri = _ref2.sourceAri;
+  var _useSyncBlockInfo = useSyncBlockInfo(),
+    deleteSyncBlock = _useSyncBlockInfo.deleteSyncBlock,
+    fetchSourceInfo = _useSyncBlockInfo.fetchSourceInfo;
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    sourceInfo = _useState2[0],
+    setSourceInfo = _useState2[1];
+  var _useIntl3 = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl3.formatMessage;
+  (0, _react.useEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') || !sourceAri ||
+    // Only fetch source info for these 2 cases
+    !['source-block-deleted', 'source-block-unsynced'].includes(reason)) {
+      setSourceInfo({});
+      return;
+    }
+    var getSourceInfo = /*#__PURE__*/function () {
+      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var sourceInfo;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return fetchSourceInfo === null || fetchSourceInfo === void 0 ? void 0 : fetchSourceInfo(sourceAri, true);
+            case 2:
+              sourceInfo = _context.sent;
+              setSourceInfo({
+                url: sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url,
+                title: sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.title
+              });
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function getSourceInfo() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    getSourceInfo();
+  }, [reason, sourceAri, fetchSourceInfo]);
+  var _useErrorInfo = useErrorInfo(reason, sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url, sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.title),
+    description = _useErrorInfo.description,
+    icon = _useErrorInfo.icon;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sourceInfo === undefined ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.spinner
+  }, /*#__PURE__*/_react.default.createElement(_spinner.default, null)) : /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
+    description: description,
+    icon: icon
+  }, deleteSyncBlock && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.closeButton
+  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    appearance: "subtle",
+    icon: _cross.default,
+    label: formatMessage(_messages.default.delete),
+    onClick: deleteSyncBlock
+  })))) : /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
+    description: description,
     icon: icon
-  });
+  }));
 };

package/dist/cjs/useSyncedBlockNodeComponent.js

@@ -8,6 +8,7 @@ exports.useMemoizedSyncedBlockNodeComponent = exports.getSyncBlockNodesFromDoc =
 var _react = _interopRequireWildcard(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _SyncedBlockNodeComponentRenderer = require("./ui/SyncedBlockNodeComponentRenderer");
@@ -49,12 +50,16 @@ var useMemoizedSyncedBlockNodeComponent = exports.useMemoizedSyncedBlockNodeComp
       component: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
       dispatchAnalyticsEvent: fireAnalyticsEvent,
       fallbackComponent: null
+    }, /*#__PURE__*/_react.default.createElement(_syncBlock.SyncBlockActionsProvider, {
+      fetchSyncBlockSourceInfo: function fetchSyncBlockSourceInfo(sourceAri) {
+        return syncBlockStoreManager.referenceManager.fetchSyncBlockSourceInfoBySourceAri(sourceAri);
+      }
     }, /*#__PURE__*/_react.default.createElement(_SyncedBlockNodeComponentRenderer.SyncedBlockNodeComponentRenderer, {
       key: props.localId,
       nodeProps: props,
       syncBlockStoreManager: syncBlockStoreManager,
       rendererOptions: syncBlockRendererOptions
-    })) : /*#__PURE__*/_react.default.createElement(_SyncedBlockNodeComponentRenderer.SyncedBlockNodeComponentRenderer, {
+    }))) : /*#__PURE__*/_react.default.createElement(_SyncedBlockNodeComponentRenderer.SyncedBlockNodeComponentRenderer, {
       key: props.localId,
       nodeProps: props,
       syncBlockStoreManager: syncBlockStoreManager,

package/dist/es2019/ui/SyncedBlockErrorComponent.js

@@ -43,7 +43,8 @@ export const SyncedBlockErrorComponent = ({
         return getForbiddenErrorContent(resourceId, fireAnalyticsEvent);
       case SyncBlockError.NotFound:
         return /*#__PURE__*/React.createElement(SyncedBlockNotFoundError, {
-          reason: error.reason
+          reason: error.reason,
+          sourceAri: error.sourceAri
         });
       case SyncBlockError.Errored:
       case SyncBlockError.RateLimited:

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

@@ -1,8 +1,6 @@
 
-._zulppxbi{gap:var(--ds-space-200,1pc)}._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
-._1bahv2br{justify-content:start}
+._zulppxbi{gap:var(--ds-space-200,1pc)}
+._1rjc12x7{padding-block:var(--ds-space-075,6px)}._1bahv2br{justify-content:start}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
-._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
-._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
-._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}

package/dist/es2019/ui/SyncedBlockErrorStateCard.js

@@ -6,7 +6,8 @@ import WarningOutlineIcon from '@atlaskit/icon-lab/core/warning-outline';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text } from '@atlaskit/primitives/compiled';
 const styles = {
-  wrapper: "_zulppxbi _ca0qu2gc _n3tdu2gc _19bvpxbi _u5f3pxbi _1e0c1txw _1bahv2br _4cvr1h6o"
+  wrapper: "_zulppxbi _1rjc12x7 _bozgpxbi _1e0c1txw _1bahv2br _4cvr1h6o",
+  container: "_1e0c1txw"
 };
 export const SyncedBlockErrorStateCard = ({
   children,
@@ -15,11 +16,13 @@ export const SyncedBlockErrorStateCard = ({
 }) => {
   const Icon = fg('platform_synced_block_dogfooding') ? icon !== null && icon !== void 0 ? icon : WarningOutlineIcon : WarningOutlineIcon;
   return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.container
+  }, /*#__PURE__*/React.createElement(Box, {
     xcss: styles.wrapper
   }, /*#__PURE__*/React.createElement(Icon, {
     color: "var(--ds-icon-subtle, #505258)",
     label: ""
   }), /*#__PURE__*/React.createElement(Text, {
     color: "color.text.subtle"
-  }, description), children);
+  }, description), !fg('platform_synced_block_dogfooding') && children), fg('platform_synced_block_dogfooding') && children);
 };

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

@@ -0,0 +1,3 @@
+._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}

package/dist/es2019/ui/SyncedBlockLoadError.js

@@ -1,8 +1,16 @@
+/* SyncedBlockLoadError.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./SyncedBlockLoadError.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 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 { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
+const styles = {
+  buttonContainer: "_18u0u2gc _1e0c1txw _4cvr1h6o"
+};
 export const SyncedBlockLoadError = ({
   onRetry,
   isLoading
@@ -10,17 +18,20 @@ export const SyncedBlockLoadError = ({
   const {
     formatMessage
   } = useIntl();
-  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    description: formatMessage(messages.generalErrorDescription)
-  }, onRetry && /*#__PURE__*/React.createElement(Button, {
+  const button = /*#__PURE__*/React.createElement(Button, {
     appearance: "default",
     spacing: "compact",
     onClick: event => {
       event.preventDefault();
       event.stopPropagation();
-      onRetry();
+      onRetry === null || onRetry === void 0 ? void 0 : onRetry();
     },
     isLoading: isLoading,
     testId: "sync-block-retry-btn"
-  }, formatMessage(messages.retryButton)));
+  }, formatMessage(messages.retryButton));
+  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
+    description: formatMessage(messages.generalErrorDescription)
+  }, onRetry && (fg('platform_synced_block_dogfooding') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.buttonContainer
+  }, button) : button));
 };

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

@@ -0,0 +1,10 @@
+
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._16jlkb7n{flex-grow:1}
+._1bah1h6o{justify-content:center}
+._1bahesu3{justify-content:flex-end}
+._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
+._1o9zkb7n{flex-shrink:1}
+._4bfu1r31{text-decoration-color:currentColor}
+._ajmmnqa1{text-decoration-style:solid}
+._i0dlf1ug{flex-basis:0%}

package/dist/es2019/ui/SyncedBlockNotFoundError.js

@@ -1,9 +1,24 @@
-import React from 'react';
+/* SyncedBlockNotFoundError.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./SyncedBlockNotFoundError.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl-next';
-import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { IconButton } from '@atlaskit/button/new';
+import commonMessages, { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { useSyncBlockActions } from '@atlaskit/editor-common/sync-block';
+import CrossIcon from '@atlaskit/icon/core/cross';
+import EyeOpenStrikethroughIcon from '@atlaskit/icon/core/eye-open-strikethrough';
 import LinkBrokenIcon from '@atlaskit/icon/core/link-broken';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
+import { Anchor, Box } from '@atlaskit/primitives/compiled';
+import Spinner from '@atlaskit/spinner';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
+const styles = {
+  link: "_4bfu1r31 _1hmsglyw _ajmmnqa1",
+  spinner: "_1rjcutpp _1e0c1txw _1bah1h6o",
+  closeButton: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1e0c1txw _1bahesu3"
+};
 const errorMap = {
   'source-block-unsynced': {
     description: messages.sourceUnsyncedDescription,
@@ -12,27 +27,126 @@ const errorMap = {
   'source-block-deleted': {
     description: messages.sourceDeletedDescription,
     icon: LinkBrokenIcon
+  },
+  'source-document-deleted': {
+    description: messages.notFoundDescription,
+    icon: EyeOpenStrikethroughIcon
+  },
+  generic: {
+    description: messages.genericNotFoundDescription,
+    icon: LinkBrokenIcon
   }
 };
+const useSyncBlockInfo = conditionalHooksFactory(() => fg('platform_synced_block_dogfooding'), () => {
+  var _useSyncBlockActions;
+  const {
+    deleteSyncBlock,
+    fetchSourceInfo
+  } = (_useSyncBlockActions = useSyncBlockActions()) !== null && _useSyncBlockActions !== void 0 ? _useSyncBlockActions : {};
+  return {
+    deleteSyncBlock,
+    fetchSourceInfo
+  };
+}, () => {
+  return {
+    deleteSyncBlock: undefined,
+    fetchSourceInfo: undefined
+  };
+});
+const useErrorInfo = conditionalHooksFactory(() => fg('platform_synced_block_dogfooding'), (reason, url, title) => {
+  const {
+    formatMessage
+  } = useIntl();
+  if (reason === 'source-document-deleted') {
+    const {
+      icon,
+      description
+    } = errorMap['source-document-deleted'];
+    return {
+      description: formatMessage(description),
+      icon
+    };
+  }
+  if (!url || !title) {
+    const {
+      icon,
+      description
+    } = errorMap['generic'];
+    return {
+      description: formatMessage(description),
+      icon
+    };
+  }
+  const {
+    icon,
+    description
+  } = errorMap[reason || 'generic'];
+  return {
+    description: formatMessage(description, {
+      title,
+      a: chunk => /*#__PURE__*/React.createElement(Anchor, {
+        href: url,
+        target: "_blank",
+        xcss: styles.link
+      }, chunk)
+    }),
+    icon
+  };
+}, _ => {
+  const {
+    formatMessage
+  } = useIntl();
+  return {
+    description: formatMessage(messages.notFoundDescription),
+    icon: undefined
+  };
+});
 export const SyncedBlockNotFoundError = ({
-  reason = 'source-block-deleted'
+  reason = 'source-block-deleted',
+  sourceAri
 }) => {
+  const {
+    deleteSyncBlock,
+    fetchSourceInfo
+  } = useSyncBlockInfo();
+  const [sourceInfo, setSourceInfo] = useState(undefined);
   const {
     formatMessage
   } = useIntl();
-  let errorInfo = {
-    description: messages.notFoundDescription
-  };
-  if (fg('platform_synced_block_dogfooding')) {
-    var _errorMap$reason;
-    errorInfo = (_errorMap$reason = errorMap[reason]) !== null && _errorMap$reason !== void 0 ? _errorMap$reason : {};
-  }
+  useEffect(() => {
+    if (!fg('platform_synced_block_dogfooding') || !sourceAri ||
+    // Only fetch source info for these 2 cases
+    !['source-block-deleted', 'source-block-unsynced'].includes(reason)) {
+      setSourceInfo({});
+      return;
+    }
+    const getSourceInfo = async () => {
+      const sourceInfo = await (fetchSourceInfo === null || fetchSourceInfo === void 0 ? void 0 : fetchSourceInfo(sourceAri, true));
+      setSourceInfo({
+        url: sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url,
+        title: sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.title
+      });
+    };
+    getSourceInfo();
+  }, [reason, sourceAri, fetchSourceInfo]);
   const {
     description,
     icon
-  } = errorInfo;
-  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    description: formatMessage(description),
+  } = useErrorInfo(reason, sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url, sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.title);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform_synced_block_dogfooding') ? /*#__PURE__*/React.createElement(React.Fragment, null, sourceInfo === undefined ? /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.spinner
+  }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
+    description: description,
+    icon: icon
+  }, deleteSyncBlock && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.closeButton
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "subtle",
+    icon: CrossIcon,
+    label: formatMessage(commonMessages.delete),
+    onClick: deleteSyncBlock
+  })))) : /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
+    description: description,
     icon: icon
-  });
+  }));
 };

package/dist/es2019/useSyncedBlockNodeComponent.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
+import { SyncBlockActionsProvider } from '@atlaskit/editor-common/sync-block';
 import { convertSyncBlockJSONNodeToSyncBlockNode, useMemoizedSyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SyncedBlockNodeComponentRenderer } from './ui/SyncedBlockNodeComponentRenderer';
@@ -39,12 +40,14 @@ export const useMemoizedSyncedBlockNodeComponent = ({
     component: ACTION_SUBJECT.SYNCED_BLOCK,
     dispatchAnalyticsEvent: fireAnalyticsEvent,
     fallbackComponent: null
+  }, /*#__PURE__*/React.createElement(SyncBlockActionsProvider, {
+    fetchSyncBlockSourceInfo: sourceAri => syncBlockStoreManager.referenceManager.fetchSyncBlockSourceInfoBySourceAri(sourceAri)
   }, /*#__PURE__*/React.createElement(SyncedBlockNodeComponentRenderer, {
     key: props.localId,
     nodeProps: props,
     syncBlockStoreManager: syncBlockStoreManager,
     rendererOptions: syncBlockRendererOptions
-  })) : /*#__PURE__*/React.createElement(SyncedBlockNodeComponentRenderer, {
+  }))) : /*#__PURE__*/React.createElement(SyncedBlockNodeComponentRenderer, {
     key: props.localId,
     nodeProps: props,
     syncBlockStoreManager: syncBlockStoreManager,

package/dist/esm/ui/SyncedBlockErrorComponent.js

@@ -41,7 +41,8 @@ export var SyncedBlockErrorComponent = function SyncedBlockErrorComponent(_ref)
         return getForbiddenErrorContent(resourceId, fireAnalyticsEvent);
       case SyncBlockError.NotFound:
         return /*#__PURE__*/React.createElement(SyncedBlockNotFoundError, {
-          reason: error.reason
+          reason: error.reason,
+          sourceAri: error.sourceAri
         });
       case SyncBlockError.Errored:
       case SyncBlockError.RateLimited:

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

@@ -1,8 +1,6 @@
 
-._zulppxbi{gap:var(--ds-space-200,1pc)}._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
-._1bahv2br{justify-content:start}
+._zulppxbi{gap:var(--ds-space-200,1pc)}
+._1rjc12x7{padding-block:var(--ds-space-075,6px)}._1bahv2br{justify-content:start}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
-._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
-._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
-._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}

package/dist/esm/ui/SyncedBlockErrorStateCard.js

@@ -6,7 +6,8 @@ import WarningOutlineIcon from '@atlaskit/icon-lab/core/warning-outline';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text } from '@atlaskit/primitives/compiled';
 var styles = {
-  wrapper: "_zulppxbi _ca0qu2gc _n3tdu2gc _19bvpxbi _u5f3pxbi _1e0c1txw _1bahv2br _4cvr1h6o"
+  wrapper: "_zulppxbi _1rjc12x7 _bozgpxbi _1e0c1txw _1bahv2br _4cvr1h6o",
+  container: "_1e0c1txw"
 };
 export var SyncedBlockErrorStateCard = function SyncedBlockErrorStateCard(_ref) {
   var children = _ref.children,
@@ -14,11 +15,13 @@ export var SyncedBlockErrorStateCard = function SyncedBlockErrorStateCard(_ref)
     icon = _ref.icon;
   var Icon = fg('platform_synced_block_dogfooding') ? icon !== null && icon !== void 0 ? icon : WarningOutlineIcon : WarningOutlineIcon;
   return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.container
+  }, /*#__PURE__*/React.createElement(Box, {
     xcss: styles.wrapper
   }, /*#__PURE__*/React.createElement(Icon, {
     color: "var(--ds-icon-subtle, #505258)",
     label: ""
   }), /*#__PURE__*/React.createElement(Text, {
     color: "color.text.subtle"
-  }, description), children);
+  }, description), !fg('platform_synced_block_dogfooding') && children), fg('platform_synced_block_dogfooding') && children);
 };

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

@@ -0,0 +1,3 @@
+._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}

package/dist/esm/ui/SyncedBlockLoadError.js

@@ -1,24 +1,35 @@
+/* SyncedBlockLoadError.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./SyncedBlockLoadError.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 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 { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
+var styles = {
+  buttonContainer: "_18u0u2gc _1e0c1txw _4cvr1h6o"
+};
 export var SyncedBlockLoadError = function SyncedBlockLoadError(_ref) {
   var onRetry = _ref.onRetry,
     isLoading = _ref.isLoading;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    description: formatMessage(messages.generalErrorDescription)
-  }, onRetry && /*#__PURE__*/React.createElement(Button, {
+  var button = /*#__PURE__*/React.createElement(Button, {
     appearance: "default",
     spacing: "compact",
     onClick: function onClick(event) {
       event.preventDefault();
       event.stopPropagation();
-      onRetry();
+      onRetry === null || onRetry === void 0 || onRetry();
     },
     isLoading: isLoading,
     testId: "sync-block-retry-btn"
-  }, formatMessage(messages.retryButton)));
+  }, formatMessage(messages.retryButton));
+  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
+    description: formatMessage(messages.generalErrorDescription)
+  }, onRetry && (fg('platform_synced_block_dogfooding') ? /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.buttonContainer
+  }, button) : button));
 };

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

@@ -0,0 +1,10 @@
+
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._16jlkb7n{flex-grow:1}
+._1bah1h6o{justify-content:center}
+._1bahesu3{justify-content:flex-end}
+._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
+._1o9zkb7n{flex-shrink:1}
+._4bfu1r31{text-decoration-color:currentColor}
+._ajmmnqa1{text-decoration-style:solid}
+._i0dlf1ug{flex-basis:0%}

package/dist/esm/ui/SyncedBlockNotFoundError.js

@@ -1,9 +1,27 @@
-import React from 'react';
+/* SyncedBlockNotFoundError.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./SyncedBlockNotFoundError.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl-next';
-import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { IconButton } from '@atlaskit/button/new';
+import commonMessages, { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { useSyncBlockActions } from '@atlaskit/editor-common/sync-block';
+import CrossIcon from '@atlaskit/icon/core/cross';
+import EyeOpenStrikethroughIcon from '@atlaskit/icon/core/eye-open-strikethrough';
 import LinkBrokenIcon from '@atlaskit/icon/core/link-broken';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
+import { Anchor, Box } from '@atlaskit/primitives/compiled';
+import Spinner from '@atlaskit/spinner';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
+var styles = {
+  link: "_4bfu1r31 _1hmsglyw _ajmmnqa1",
+  spinner: "_1rjcutpp _1e0c1txw _1bah1h6o",
+  closeButton: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1e0c1txw _1bahesu3"
+};
 var errorMap = {
   'source-block-unsynced': {
     description: messages.sourceUnsyncedDescription,
@@ -12,25 +30,143 @@ var errorMap = {
   'source-block-deleted': {
     description: messages.sourceDeletedDescription,
     icon: LinkBrokenIcon
+  },
+  'source-document-deleted': {
+    description: messages.notFoundDescription,
+    icon: EyeOpenStrikethroughIcon
+  },
+  generic: {
+    description: messages.genericNotFoundDescription,
+    icon: LinkBrokenIcon
   }
 };
-export var SyncedBlockNotFoundError = function SyncedBlockNotFoundError(_ref) {
-  var _ref$reason = _ref.reason,
-    reason = _ref$reason === void 0 ? 'source-block-deleted' : _ref$reason;
+var useSyncBlockInfo = conditionalHooksFactory(function () {
+  return fg('platform_synced_block_dogfooding');
+}, function () {
+  var _useSyncBlockActions;
+  var _ref = (_useSyncBlockActions = useSyncBlockActions()) !== null && _useSyncBlockActions !== void 0 ? _useSyncBlockActions : {},
+    deleteSyncBlock = _ref.deleteSyncBlock,
+    fetchSourceInfo = _ref.fetchSourceInfo;
+  return {
+    deleteSyncBlock: deleteSyncBlock,
+    fetchSourceInfo: fetchSourceInfo
+  };
+}, function () {
+  return {
+    deleteSyncBlock: undefined,
+    fetchSourceInfo: undefined
+  };
+});
+var useErrorInfo = conditionalHooksFactory(function () {
+  return fg('platform_synced_block_dogfooding');
+}, function (reason, url, title) {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var errorInfo = {
-    description: messages.notFoundDescription
-  };
-  if (fg('platform_synced_block_dogfooding')) {
-    var _errorMap$reason;
-    errorInfo = (_errorMap$reason = errorMap[reason]) !== null && _errorMap$reason !== void 0 ? _errorMap$reason : {};
+  if (reason === 'source-document-deleted') {
+    var _errorMap$sourceDocu = errorMap['source-document-deleted'],
+      _icon = _errorMap$sourceDocu.icon,
+      _description = _errorMap$sourceDocu.description;
+    return {
+      description: formatMessage(_description),
+      icon: _icon
+    };
+  }
+  if (!url || !title) {
+    var _errorMap$generic = errorMap['generic'],
+      _icon2 = _errorMap$generic.icon,
+      _description2 = _errorMap$generic.description;
+    return {
+      description: formatMessage(_description2),
+      icon: _icon2
+    };
   }
-  var _errorInfo = errorInfo,
-    description = _errorInfo.description,
-    icon = _errorInfo.icon;
-  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    description: formatMessage(description),
+  var _errorMap = errorMap[reason || 'generic'],
+    icon = _errorMap.icon,
+    description = _errorMap.description;
+  return {
+    description: formatMessage(description, {
+      title: title,
+      a: function a(chunk) {
+        return /*#__PURE__*/React.createElement(Anchor, {
+          href: url,
+          target: "_blank",
+          xcss: styles.link
+        }, chunk);
+      }
+    }),
+    icon: icon
+  };
+}, function (_) {
+  var _useIntl2 = useIntl(),
+    formatMessage = _useIntl2.formatMessage;
+  return {
+    description: formatMessage(messages.notFoundDescription),
+    icon: undefined
+  };
+});
+export var SyncedBlockNotFoundError = function SyncedBlockNotFoundError(_ref2) {
+  var _ref2$reason = _ref2.reason,
+    reason = _ref2$reason === void 0 ? 'source-block-deleted' : _ref2$reason,
+    sourceAri = _ref2.sourceAri;
+  var _useSyncBlockInfo = useSyncBlockInfo(),
+    deleteSyncBlock = _useSyncBlockInfo.deleteSyncBlock,
+    fetchSourceInfo = _useSyncBlockInfo.fetchSourceInfo;
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    sourceInfo = _useState2[0],
+    setSourceInfo = _useState2[1];
+  var _useIntl3 = useIntl(),
+    formatMessage = _useIntl3.formatMessage;
+  useEffect(function () {
+    if (!fg('platform_synced_block_dogfooding') || !sourceAri ||
+    // Only fetch source info for these 2 cases
+    !['source-block-deleted', 'source-block-unsynced'].includes(reason)) {
+      setSourceInfo({});
+      return;
+    }
+    var getSourceInfo = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var sourceInfo;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return fetchSourceInfo === null || fetchSourceInfo === void 0 ? void 0 : fetchSourceInfo(sourceAri, true);
+            case 2:
+              sourceInfo = _context.sent;
+              setSourceInfo({
+                url: sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url,
+                title: sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.title
+              });
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function getSourceInfo() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    getSourceInfo();
+  }, [reason, sourceAri, fetchSourceInfo]);
+  var _useErrorInfo = useErrorInfo(reason, sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url, sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.title),
+    description = _useErrorInfo.description,
+    icon = _useErrorInfo.icon;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform_synced_block_dogfooding') ? /*#__PURE__*/React.createElement(React.Fragment, null, sourceInfo === undefined ? /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.spinner
+  }, /*#__PURE__*/React.createElement(Spinner, null)) : /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
+    description: description,
+    icon: icon
+  }, deleteSyncBlock && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.closeButton
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "subtle",
+    icon: CrossIcon,
+    label: formatMessage(commonMessages.delete),
+    onClick: deleteSyncBlock
+  })))) : /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
+    description: description,
     icon: icon
-  });
+  }));
 };

package/dist/esm/useSyncedBlockNodeComponent.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
+import { SyncBlockActionsProvider } from '@atlaskit/editor-common/sync-block';
 import { convertSyncBlockJSONNodeToSyncBlockNode, useMemoizedSyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SyncedBlockNodeComponentRenderer } from './ui/SyncedBlockNodeComponentRenderer';
@@ -41,12 +42,16 @@ export var useMemoizedSyncedBlockNodeComponent = function useMemoizedSyncedBlock
       component: ACTION_SUBJECT.SYNCED_BLOCK,
       dispatchAnalyticsEvent: fireAnalyticsEvent,
       fallbackComponent: null
+    }, /*#__PURE__*/React.createElement(SyncBlockActionsProvider, {
+      fetchSyncBlockSourceInfo: function fetchSyncBlockSourceInfo(sourceAri) {
+        return syncBlockStoreManager.referenceManager.fetchSyncBlockSourceInfoBySourceAri(sourceAri);
+      }
     }, /*#__PURE__*/React.createElement(SyncedBlockNodeComponentRenderer, {
       key: props.localId,
       nodeProps: props,
       syncBlockStoreManager: syncBlockStoreManager,
       rendererOptions: syncBlockRendererOptions
-    })) : /*#__PURE__*/React.createElement(SyncedBlockNodeComponentRenderer, {
+    }))) : /*#__PURE__*/React.createElement(SyncedBlockNodeComponentRenderer, {
       key: props.localId,
       nodeProps: props,
       syncBlockStoreManager: syncBlockStoreManager,

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

@@ -2,7 +2,6 @@ import React, { type ReactNode } from 'react';
 import type { NewCoreIconProps } from '@atlaskit/icon/types';
 interface SyncedBlockErrorStateCardProps {
     children?: ReactNode;
-    closeButton?: ReactNode;
     description: ReactNode;
     icon?: (props: NewCoreIconProps) => JSX.Element;
 }

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

@@ -4,5 +4,5 @@ interface SyncedBlockNotFoundProps {
     isLoading?: boolean;
     onRetry?: () => void;
 }
-export declare const SyncedBlockLoadError: ({ onRetry, isLoading }: SyncedBlockNotFoundProps) => React.JSX.Element;
+export declare const SyncedBlockLoadError: ({ onRetry, isLoading, }: SyncedBlockNotFoundProps) => React.JSX.Element;
 export {};

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

@@ -1,4 +1,5 @@
 import React from 'react';
-export declare const SyncedBlockNotFoundError: ({ reason, }: {
+export declare const SyncedBlockNotFoundError: ({ reason, sourceAri, }: {
     reason?: string;
+    sourceAri?: string;
 }) => React.JSX.Element;

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

@@ -2,7 +2,6 @@ import React, { type ReactNode } from 'react';
 import type { NewCoreIconProps } from '@atlaskit/icon/types';
 interface SyncedBlockErrorStateCardProps {
     children?: ReactNode;
-    closeButton?: ReactNode;
     description: ReactNode;
     icon?: (props: NewCoreIconProps) => JSX.Element;
 }

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

@@ -4,5 +4,5 @@ interface SyncedBlockNotFoundProps {
     isLoading?: boolean;
     onRetry?: () => void;
 }
-export declare const SyncedBlockLoadError: ({ onRetry, isLoading }: SyncedBlockNotFoundProps) => React.JSX.Element;
+export declare const SyncedBlockLoadError: ({ onRetry, isLoading, }: SyncedBlockNotFoundProps) => React.JSX.Element;
 export {};

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

@@ -1,4 +1,5 @@
 import React from 'react';
-export declare const SyncedBlockNotFoundError: ({ reason, }: {
+export declare const SyncedBlockNotFoundError: ({ reason, sourceAri, }: {
     reason?: string;
+    sourceAri?: string;
 }) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-synced-block-renderer",
-	"version": "5.6.2",
+	"version": "5.6.3",
 	"description": "SyncedBlockRenderer for @atlaskit/editor-plugin-synced-block",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,12 +37,14 @@
 		"@atlaskit/icon-lab": "^5.15.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
+		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/primitives": "^17.1.0",
 		"@atlaskit/renderer": "^126.2.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/tokens": "^10.1.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^0.18.6",
 		"react-relay": "npm:atl-react-relay@0.0.0-main-39e79f66",
 		"relay-runtime": "npm:atl-relay-runtime@0.0.0-main-39e79f66"
 	},