@atlaskit/editor-synced-block-renderer 5.5.0 → 5.6.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-synced-block-renderer
 
+## 5.6.1
+
+### Patch Changes
+
+- [`28434cbe03f1e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/28434cbe03f1e) -
+  [ux] [EDITOR-2851]
+  - Implement unsync feature for source sync block
+  - Update deletion confirmation modal and reference block UI after source deletion
+
+- Updated dependencies
+
+## 5.6.0
+
+### Minor Changes
+
+- [`f998026c7a01a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f998026c7a01a) -
+  EDITOR-2849 fix editor SSR
+
 ## 5.5.0
 
 ### Minor Changes

package/dist/cjs/ui/SyncedBlockErrorComponent.js

@@ -42,13 +42,15 @@ var SyncedBlockErrorComponent = exports.SyncedBlockErrorComponent = function Syn
     resourceId = _ref.resourceId,
     fireAnalyticsEvent = _ref.fireAnalyticsEvent;
   var getErrorContent = (0, _react.useMemo)(function () {
-    switch (error) {
+    switch (error === null || error === void 0 ? void 0 : error.type) {
       case _editorSyncedBlockProvider.SyncBlockError.Offline:
         return /*#__PURE__*/_react.default.createElement(_SyncedBlockOfflineError.SyncedBlockOfflineError, null);
       case _editorSyncedBlockProvider.SyncBlockError.Forbidden:
         return getForbiddenErrorContent(resourceId, fireAnalyticsEvent);
       case _editorSyncedBlockProvider.SyncBlockError.NotFound:
-        return /*#__PURE__*/_react.default.createElement(_SyncedBlockNotFoundError.SyncedBlockNotFoundError, null);
+        return /*#__PURE__*/_react.default.createElement(_SyncedBlockNotFoundError.SyncedBlockNotFoundError, {
+          reason: error.reason
+        });
       case _editorSyncedBlockProvider.SyncBlockError.Errored:
       case _editorSyncedBlockProvider.SyncBlockError.RateLimited:
       case _editorSyncedBlockProvider.SyncBlockError.ServerError:
@@ -64,6 +66,7 @@ var SyncedBlockErrorComponent = exports.SyncedBlockErrorComponent = function Syn
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     _react.default.createElement("div", {
+      "data-testid": "sync-block-error",
       className: _syncBlock.SyncBlockSharedCssClassName.error
     }, getErrorContent)
   );

package/dist/cjs/ui/SyncedBlockErrorStateCard.js

@@ -10,16 +10,19 @@ require("./SyncedBlockErrorStateCard.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _warningOutline = _interopRequireDefault(require("@atlaskit/icon-lab/core/warning-outline"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var styles = {
   wrapper: "_zulppxbi _ca0qu2gc _n3tdu2gc _19bvpxbi _u5f3pxbi _1e0c1txw _1bahv2br _4cvr1h6o"
 };
 var SyncedBlockErrorStateCard = exports.SyncedBlockErrorStateCard = function SyncedBlockErrorStateCard(_ref) {
   var children = _ref.children,
-    description = _ref.description;
+    description = _ref.description,
+    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.wrapper
-  }, /*#__PURE__*/_react.default.createElement(_warningOutline.default, {
+  }, /*#__PURE__*/_react.default.createElement(Icon, {
     color: "var(--ds-icon-subtle, #505258)",
     label: ""
   }), /*#__PURE__*/_react.default.createElement(_compiled.Text, {

package/dist/cjs/ui/SyncedBlockNodeComponentRenderer.js

@@ -56,7 +56,11 @@ var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer
   if (!resourceId || syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data) || syncBlockInstance.data.status === 'deleted' && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
     var _syncBlockInstance$er, _syncBlockInstance$da;
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
-      error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? _editorSyncedBlockProvider.SyncBlockError.NotFound : _editorSyncedBlockProvider.SyncBlockError.Errored,
+      error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? {
+        type: _editorSyncedBlockProvider.SyncBlockError.NotFound
+      } : {
+        type: _editorSyncedBlockProvider.SyncBlockError.Errored
+      },
       resourceId: syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.resourceId,
       onRetry: reloadData,
       isLoading: isLoading,

package/dist/cjs/ui/SyncedBlockNotFoundError.js

@@ -8,11 +8,36 @@ exports.SyncedBlockNotFoundError = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
+var _linkBroken = _interopRequireDefault(require("@atlaskit/icon/core/link-broken"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
-var SyncedBlockNotFoundError = exports.SyncedBlockNotFoundError = function SyncedBlockNotFoundError() {
+var errorMap = {
+  'source-block-unsynced': {
+    description: _messages.syncBlockMessages.sourceUnsyncedDescription,
+    icon: _linkBroken.default
+  },
+  'source-block-deleted': {
+    description: _messages.syncBlockMessages.sourceDeletedDescription,
+    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 _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 : {};
+  }
+  var _errorInfo = errorInfo,
+    description = _errorInfo.description,
+    icon = _errorInfo.icon;
   return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
-    description: formatMessage(_messages.syncBlockMessages.notFoundDescription)
+    description: formatMessage(description),
+    icon: icon
   });
 };

package/dist/cjs/ui/SyncedBlockRenderer.js

@@ -47,13 +47,18 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity'], function (_ref2) {
       var connectivityState = _ref2.connectivityState;
       return {
-        isInternetOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'collab-offline'
+        isCollabOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'collab-offline'
       };
     }),
-    isInternetOffline = _useSharedPluginState.isInternetOffline;
-  if (isInternetOffline) {
+    isCollabOffline = _useSharedPluginState.isCollabOffline;
+
+  // Show offline error only when collaboration is offline and not in SSR mode
+  // In SSR, we should always attempt to render content
+  if (isCollabOffline && !(0, _coreUtils.isSSR)()) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
-      error: _editorSyncedBlockProvider.SyncBlockError.Offline
+      error: {
+        type: _editorSyncedBlockProvider.SyncBlockError.Offline
+      }
     });
   }
   if (!syncBlockInstance) {
@@ -62,7 +67,11 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
   if (syncBlockInstance.error || !syncBlockInstance.data || syncBlockInstance.data.status === 'deleted' && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
     var _syncBlockInstance$er, _syncBlockInstance$da, _api$analytics;
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
-      error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? _editorSyncedBlockProvider.SyncBlockError.NotFound : _editorSyncedBlockProvider.SyncBlockError.Errored,
+      error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? {
+        type: _editorSyncedBlockProvider.SyncBlockError.NotFound
+      } : {
+        type: _editorSyncedBlockProvider.SyncBlockError.Errored
+      },
       resourceId: syncBlockInstance.resourceId,
       onRetry: reloadData,
       isLoading: isLoading,

package/dist/es2019/ui/SyncedBlockErrorComponent.js

@@ -36,13 +36,15 @@ export const SyncedBlockErrorComponent = ({
   fireAnalyticsEvent
 }) => {
   const getErrorContent = useMemo(() => {
-    switch (error) {
+    switch (error === null || error === void 0 ? void 0 : error.type) {
       case SyncBlockError.Offline:
         return /*#__PURE__*/React.createElement(SyncedBlockOfflineError, null);
       case SyncBlockError.Forbidden:
         return getForbiddenErrorContent(resourceId, fireAnalyticsEvent);
       case SyncBlockError.NotFound:
-        return /*#__PURE__*/React.createElement(SyncedBlockNotFoundError, null);
+        return /*#__PURE__*/React.createElement(SyncedBlockNotFoundError, {
+          reason: error.reason
+        });
       case SyncBlockError.Errored:
       case SyncBlockError.RateLimited:
       case SyncBlockError.ServerError:
@@ -58,6 +60,7 @@ export const SyncedBlockErrorComponent = ({
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     React.createElement("div", {
+      "data-testid": "sync-block-error",
       className: SyncBlockSharedCssClassName.error
     }, getErrorContent)
   );

package/dist/es2019/ui/SyncedBlockErrorStateCard.js

@@ -3,17 +3,20 @@ import "./SyncedBlockErrorStateCard.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 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"
 };
 export const SyncedBlockErrorStateCard = ({
   children,
-  description
+  description,
+  icon
 }) => {
+  const Icon = fg('platform_synced_block_dogfooding') ? icon !== null && icon !== void 0 ? icon : WarningOutlineIcon : WarningOutlineIcon;
   return /*#__PURE__*/React.createElement(Box, {
     xcss: styles.wrapper
-  }, /*#__PURE__*/React.createElement(WarningOutlineIcon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
     color: "var(--ds-icon-subtle, #505258)",
     label: ""
   }), /*#__PURE__*/React.createElement(Text, {

package/dist/es2019/ui/SyncedBlockNodeComponentRenderer.js

@@ -49,7 +49,11 @@ export const SyncedBlockNodeComponentRenderer = ({
   if (!resourceId || syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data) || syncBlockInstance.data.status === 'deleted' && fg('platform_synced_block_dogfooding')) {
     var _syncBlockInstance$er, _syncBlockInstance$da;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && fg('platform_synced_block_dogfooding') ? SyncBlockError.NotFound : SyncBlockError.Errored,
+      error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && fg('platform_synced_block_dogfooding') ? {
+        type: SyncBlockError.NotFound
+      } : {
+        type: SyncBlockError.Errored
+      },
       resourceId: syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.resourceId,
       onRetry: reloadData,
       isLoading: isLoading,

package/dist/es2019/ui/SyncedBlockNotFoundError.js

@@ -1,12 +1,38 @@
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import LinkBrokenIcon from '@atlaskit/icon/core/link-broken';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
-export const SyncedBlockNotFoundError = () => {
+const errorMap = {
+  'source-block-unsynced': {
+    description: messages.sourceUnsyncedDescription,
+    icon: LinkBrokenIcon
+  },
+  'source-block-deleted': {
+    description: messages.sourceDeletedDescription,
+    icon: LinkBrokenIcon
+  }
+};
+export const SyncedBlockNotFoundError = ({
+  reason = 'source-block-deleted'
+}) => {
   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 : {};
+  }
+  const {
+    description,
+    icon
+  } = errorInfo;
   return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    description: formatMessage(messages.notFoundDescription)
+    description: formatMessage(description),
+    icon: icon
   });
 };

package/dist/es2019/ui/SyncedBlockRenderer.js

@@ -38,15 +38,20 @@ const SyncedBlockRendererComponent = ({
     };
   }, [syncBlockRendererOptions, ssrProviders]);
   const {
-    isInternetOffline
+    isCollabOffline
   } = useSharedPluginStateWithSelector(api, ['connectivity'], ({
     connectivityState
   }) => ({
-    isInternetOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'collab-offline'
+    isCollabOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'collab-offline'
   }));
-  if (isInternetOffline) {
+
+  // Show offline error only when collaboration is offline and not in SSR mode
+  // In SSR, we should always attempt to render content
+  if (isCollabOffline && !isSSR()) {
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: SyncBlockError.Offline
+      error: {
+        type: SyncBlockError.Offline
+      }
     });
   }
   if (!syncBlockInstance) {
@@ -55,7 +60,11 @@ const SyncedBlockRendererComponent = ({
   if (syncBlockInstance.error || !syncBlockInstance.data || syncBlockInstance.data.status === 'deleted' && fg('platform_synced_block_dogfooding')) {
     var _syncBlockInstance$er, _syncBlockInstance$da, _api$analytics;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && fg('platform_synced_block_dogfooding') ? SyncBlockError.NotFound : SyncBlockError.Errored,
+      error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && fg('platform_synced_block_dogfooding') ? {
+        type: SyncBlockError.NotFound
+      } : {
+        type: SyncBlockError.Errored
+      },
       resourceId: syncBlockInstance.resourceId,
       onRetry: reloadData,
       isLoading: isLoading,

package/dist/esm/ui/SyncedBlockErrorComponent.js

@@ -34,13 +34,15 @@ export var SyncedBlockErrorComponent = function SyncedBlockErrorComponent(_ref)
     resourceId = _ref.resourceId,
     fireAnalyticsEvent = _ref.fireAnalyticsEvent;
   var getErrorContent = useMemo(function () {
-    switch (error) {
+    switch (error === null || error === void 0 ? void 0 : error.type) {
       case SyncBlockError.Offline:
         return /*#__PURE__*/React.createElement(SyncedBlockOfflineError, null);
       case SyncBlockError.Forbidden:
         return getForbiddenErrorContent(resourceId, fireAnalyticsEvent);
       case SyncBlockError.NotFound:
-        return /*#__PURE__*/React.createElement(SyncedBlockNotFoundError, null);
+        return /*#__PURE__*/React.createElement(SyncedBlockNotFoundError, {
+          reason: error.reason
+        });
       case SyncBlockError.Errored:
       case SyncBlockError.RateLimited:
       case SyncBlockError.ServerError:
@@ -56,6 +58,7 @@ export var SyncedBlockErrorComponent = function SyncedBlockErrorComponent(_ref)
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     React.createElement("div", {
+      "data-testid": "sync-block-error",
       className: SyncBlockSharedCssClassName.error
     }, getErrorContent)
   );

package/dist/esm/ui/SyncedBlockErrorStateCard.js

@@ -3,16 +3,19 @@ import "./SyncedBlockErrorStateCard.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 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"
 };
 export var SyncedBlockErrorStateCard = function SyncedBlockErrorStateCard(_ref) {
   var children = _ref.children,
-    description = _ref.description;
+    description = _ref.description,
+    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.wrapper
-  }, /*#__PURE__*/React.createElement(WarningOutlineIcon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
     color: "var(--ds-icon-subtle, #505258)",
     label: ""
   }), /*#__PURE__*/React.createElement(Text, {

package/dist/esm/ui/SyncedBlockNodeComponentRenderer.js

@@ -47,7 +47,11 @@ export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentR
   if (!resourceId || syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data) || syncBlockInstance.data.status === 'deleted' && fg('platform_synced_block_dogfooding')) {
     var _syncBlockInstance$er, _syncBlockInstance$da;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && fg('platform_synced_block_dogfooding') ? SyncBlockError.NotFound : SyncBlockError.Errored,
+      error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && fg('platform_synced_block_dogfooding') ? {
+        type: SyncBlockError.NotFound
+      } : {
+        type: SyncBlockError.Errored
+      },
       resourceId: syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.resourceId,
       onRetry: reloadData,
       isLoading: isLoading,

package/dist/esm/ui/SyncedBlockNotFoundError.js

@@ -1,11 +1,36 @@
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import LinkBrokenIcon from '@atlaskit/icon/core/link-broken';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
-export var SyncedBlockNotFoundError = function SyncedBlockNotFoundError() {
+var errorMap = {
+  'source-block-unsynced': {
+    description: messages.sourceUnsyncedDescription,
+    icon: LinkBrokenIcon
+  },
+  'source-block-deleted': {
+    description: messages.sourceDeletedDescription,
+    icon: LinkBrokenIcon
+  }
+};
+export var SyncedBlockNotFoundError = function SyncedBlockNotFoundError(_ref) {
+  var _ref$reason = _ref.reason,
+    reason = _ref$reason === void 0 ? 'source-block-deleted' : _ref$reason;
   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 : {};
+  }
+  var _errorInfo = errorInfo,
+    description = _errorInfo.description,
+    icon = _errorInfo.icon;
   return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    description: formatMessage(messages.notFoundDescription)
+    description: formatMessage(description),
+    icon: icon
   });
 };

package/dist/esm/ui/SyncedBlockRenderer.js

@@ -38,13 +38,18 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['connectivity'], function (_ref2) {
       var connectivityState = _ref2.connectivityState;
       return {
-        isInternetOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'collab-offline'
+        isCollabOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'collab-offline'
       };
     }),
-    isInternetOffline = _useSharedPluginState.isInternetOffline;
-  if (isInternetOffline) {
+    isCollabOffline = _useSharedPluginState.isCollabOffline;
+
+  // Show offline error only when collaboration is offline and not in SSR mode
+  // In SSR, we should always attempt to render content
+  if (isCollabOffline && !isSSR()) {
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: SyncBlockError.Offline
+      error: {
+        type: SyncBlockError.Offline
+      }
     });
   }
   if (!syncBlockInstance) {
@@ -53,7 +58,11 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
   if (syncBlockInstance.error || !syncBlockInstance.data || syncBlockInstance.data.status === 'deleted' && fg('platform_synced_block_dogfooding')) {
     var _syncBlockInstance$er, _syncBlockInstance$da, _api$analytics;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && fg('platform_synced_block_dogfooding') ? SyncBlockError.NotFound : SyncBlockError.Errored,
+      error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && fg('platform_synced_block_dogfooding') ? {
+        type: SyncBlockError.NotFound
+      } : {
+        type: SyncBlockError.Errored
+      },
       resourceId: syncBlockInstance.resourceId,
       onRetry: reloadData,
       isLoading: isLoading,

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { RendererSyncBlockEventPayload } from '@atlaskit/editor-common/analytics';
-import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
+import { type SyncBlockInstance } from '@atlaskit/editor-synced-block-provider';
 export declare const SyncedBlockErrorComponent: ({ error, isLoading, onRetry, resourceId, fireAnalyticsEvent, }: {
-    error: SyncBlockError;
+    error: SyncBlockInstance["error"];
     fireAnalyticsEvent?: (payload: RendererSyncBlockEventPayload) => void;
     isLoading?: boolean;
     onRetry?: () => void;

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

@@ -1,7 +1,10 @@
-import React from 'react';
+import React, { type ReactNode } from 'react';
+import type { NewCoreIconProps } from '@atlaskit/icon/types';
 interface SyncedBlockErrorStateCardProps {
-    children?: React.ReactNode;
-    description: string;
+    children?: ReactNode;
+    closeButton?: ReactNode;
+    description: ReactNode;
+    icon?: (props: NewCoreIconProps) => JSX.Element;
 }
-export declare const SyncedBlockErrorStateCard: ({ children, description, }: SyncedBlockErrorStateCardProps) => React.JSX.Element;
+export declare const SyncedBlockErrorStateCard: ({ children, description, icon, }: SyncedBlockErrorStateCardProps) => React.JSX.Element;
 export {};

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

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

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { RendererSyncBlockEventPayload } from '@atlaskit/editor-common/analytics';
-import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
+import { type SyncBlockInstance } from '@atlaskit/editor-synced-block-provider';
 export declare const SyncedBlockErrorComponent: ({ error, isLoading, onRetry, resourceId, fireAnalyticsEvent, }: {
-    error: SyncBlockError;
+    error: SyncBlockInstance["error"];
     fireAnalyticsEvent?: (payload: RendererSyncBlockEventPayload) => void;
     isLoading?: boolean;
     onRetry?: () => void;

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

@@ -1,7 +1,10 @@
-import React from 'react';
+import React, { type ReactNode } from 'react';
+import type { NewCoreIconProps } from '@atlaskit/icon/types';
 interface SyncedBlockErrorStateCardProps {
-    children?: React.ReactNode;
-    description: string;
+    children?: ReactNode;
+    closeButton?: ReactNode;
+    description: ReactNode;
+    icon?: (props: NewCoreIconProps) => JSX.Element;
 }
-export declare const SyncedBlockErrorStateCard: ({ children, description, }: SyncedBlockErrorStateCardProps) => React.JSX.Element;
+export declare const SyncedBlockErrorStateCard: ({ children, description, icon, }: SyncedBlockErrorStateCardProps) => React.JSX.Element;
 export {};

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-synced-block-renderer",
-	"version": "5.5.0",
+	"version": "5.6.1",
 	"description": "SyncedBlockRenderer for @atlaskit/editor-plugin-synced-block",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,7 +31,7 @@
 		"@atlaskit/button": "^23.9.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/editor-plugin-synced-block": "^5.3.0",
-		"@atlaskit/editor-synced-block-provider": "^3.13.0",
+		"@atlaskit/editor-synced-block-provider": "^3.14.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^30.0.0",
 		"@atlaskit/icon-lab": "^5.14.0",