@atlaskit/editor-synced-block-renderer 5.9.3 → 5.9.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-synced-block-renderer
 
+## 5.9.5
+
+### Patch Changes
+
+- [`6424f86f6390a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6424f86f6390a) -
+  Improve Synced Blocks robustness
+- Updated dependencies
+
+## 5.9.4
+
+### Patch Changes
+
+- [`469aa2343e484`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/469aa2343e484) -
+  Misc fixes for synced blocks
+- Updated dependencies
+
 ## 5.9.3
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "getSyncedBlockRenderer", {
     return _getSyncedBlockRenderer.getSyncedBlockRenderer;
   }
 });
+Object.defineProperty(exports, "renderSyncedBlockContent", {
+  enumerable: true,
+  get: function get() {
+    return _renderSyncedBlockContent.renderSyncedBlockContent;
+  }
+});
 Object.defineProperty(exports, "useMemoizedSyncedBlockNodeComponent", {
   enumerable: true,
   get: function get() {
@@ -22,4 +28,5 @@ Object.defineProperty(exports, "useMemoizedSyncedBlockNodeComponent", {
   }
 });
 var _useSyncedBlockNodeComponent = require("./useSyncedBlockNodeComponent");
-var _getSyncedBlockRenderer = require("./getSyncedBlockRenderer");
+var _getSyncedBlockRenderer = require("./getSyncedBlockRenderer");
+var _renderSyncedBlockContent = require("./ui/renderSyncedBlockContent");

package/dist/cjs/ui/SyncedBlockNodeComponentRenderer.js

@@ -14,13 +14,14 @@ var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _AKRendererWrapper = require("./AKRendererWrapper");
+var _renderSyncedBlockContent = require("./renderSyncedBlockContent");
 var _SyncedBlockErrorComponent = require("./SyncedBlockErrorComponent");
 var _SyncedBlockLoadingState = require("./SyncedBlockLoadingState");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentRenderer(_ref) {
-  var _syncBlockInstance$da4;
+  var _syncBlockInstance$da6;
   var nodeProps = _ref.nodeProps,
     syncBlockStoreManager = _ref.syncBlockStoreManager,
     rendererOptions = _ref.rendererOptions;
@@ -36,7 +37,9 @@ var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  syncBlockStoreManager.referenceManager.updateFireAnalyticsEvent(fireAnalyticsEvent);
+  (0, _react.useEffect)(function () {
+    syncBlockStoreManager.referenceManager.updateFireAnalyticsEvent(fireAnalyticsEvent);
+  }, [syncBlockStoreManager.referenceManager, fireAnalyticsEvent]);
   var _useFetchSyncBlockDat = (0, _editorSyncedBlockProvider.useFetchSyncBlockData)(syncBlockStoreManager, resourceId, localId, fireAnalyticsEvent),
     syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance,
     isLoading = _useFetchSyncBlockDat.isLoading,
@@ -62,6 +65,34 @@ var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer
       })
     });
   }, [rendererOptions, ssrProviders]);
+  if ((0, _platformFeatureFlags.fg)('platform_synced_block_patch_5')) {
+    var _syncBlockInstance$er, _syncBlockInstance$da, _syncBlockInstance$da2;
+    var errorForDisplay = (_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' ? {
+      type: _editorSyncedBlockProvider.SyncBlockError.NotFound,
+      reason: (_syncBlockInstance$da2 = syncBlockInstance.data) === null || _syncBlockInstance$da2 === void 0 ? void 0 : _syncBlockInstance$da2.deletionReason
+    } : {
+      type: _editorSyncedBlockProvider.SyncBlockError.Errored,
+      reason: !resourceId ? 'missing resource id' : "missing data for block ".concat(resourceId)
+    };
+    var result = (0, _renderSyncedBlockContent.renderSyncedBlockContent)({
+      syncBlockInstance: syncBlockInstance !== null && syncBlockInstance !== void 0 ? syncBlockInstance : undefined,
+      isLoading: isLoading,
+      rendererOptions: finalRendererOptions,
+      providerFactory: providerFactory,
+      reloadData: reloadData,
+      fireAnalyticsEvent: fireAnalyticsEvent,
+      resourceId: resourceId,
+      error: errorForDisplay
+    });
+    if (result.isSuccess) {
+      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+        className: _syncBlock.SyncBlockSharedCssClassName.renderer
+        // eslint-disable-next-line react/jsx-props-no-spreading
+      }, (0, _defineProperty2.default)({}, _syncBlock.SyncBlockRendererDataAttributeName, true)), result.element);
+    }
+    return result.element;
+  }
   if (isLoading && !syncBlockInstance) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
   }
@@ -72,16 +103,16 @@ var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
   }
   if (!resourceId || syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data) || syncBlockInstance.data.status === 'deleted') {
-    var _syncBlockInstance$er, _syncBlockInstance$da, _syncBlockInstance$da2, _syncBlockInstance$er2, _syncBlockInstance$da3;
-    var errorMessage = (_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' ? {
+    var _syncBlockInstance$er2, _syncBlockInstance$da3, _syncBlockInstance$da4, _syncBlockInstance$er3, _syncBlockInstance$da5;
+    var errorMessage = (_syncBlockInstance$er2 = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er2 !== void 0 ? _syncBlockInstance$er2 : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da3 = syncBlockInstance.data) === null || _syncBlockInstance$da3 === void 0 ? void 0 : _syncBlockInstance$da3.status) === 'deleted' ? {
       type: _editorSyncedBlockProvider.SyncBlockError.NotFound,
-      reason: (_syncBlockInstance$da2 = syncBlockInstance.data) === null || _syncBlockInstance$da2 === void 0 ? void 0 : _syncBlockInstance$da2.deletionReason
+      reason: (_syncBlockInstance$da4 = syncBlockInstance.data) === null || _syncBlockInstance$da4 === void 0 ? void 0 : _syncBlockInstance$da4.deletionReason
     } : {
       type: _editorSyncedBlockProvider.SyncBlockError.Errored,
       reason: !resourceId ? 'missing resource id' : "missing data for block ".concat(resourceId)
     };
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
-      error: (0, _platformFeatureFlags.fg)('platform_synced_block_patch_3') ? errorMessage : (_syncBlockInstance$er2 = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er2 !== void 0 ? _syncBlockInstance$er2 : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da3 = syncBlockInstance.data) === null || _syncBlockInstance$da3 === void 0 ? void 0 : _syncBlockInstance$da3.status) === 'deleted' ? {
+      error: (0, _platformFeatureFlags.fg)('platform_synced_block_patch_3') ? errorMessage : (_syncBlockInstance$er3 = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er3 !== void 0 ? _syncBlockInstance$er3 : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da5 = syncBlockInstance.data) === null || _syncBlockInstance$da5 === void 0 ? void 0 : _syncBlockInstance$da5.status) === 'deleted' ? {
         type: _editorSyncedBlockProvider.SyncBlockError.NotFound
       } : {
         type: _editorSyncedBlockProvider.SyncBlockError.Errored
@@ -92,14 +123,14 @@ var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer
       fireAnalyticsEvent: fireAnalyticsEvent
     });
   }
-  if ((syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da4 = syncBlockInstance.data) === null || _syncBlockInstance$da4 === void 0 ? void 0 : _syncBlockInstance$da4.status) === 'unpublished') {
-    var _syncBlockInstance$da5;
+  if ((syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da6 = syncBlockInstance.data) === null || _syncBlockInstance$da6 === void 0 ? void 0 : _syncBlockInstance$da6.status) === 'unpublished') {
+    var _syncBlockInstance$da7;
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
       error: {
         type: _editorSyncedBlockProvider.SyncBlockError.Unpublished
       },
       resourceId: syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.resourceId,
-      sourceURL: (_syncBlockInstance$da5 = syncBlockInstance.data) === null || _syncBlockInstance$da5 === void 0 ? void 0 : _syncBlockInstance$da5.sourceURL,
+      sourceURL: (_syncBlockInstance$da7 = syncBlockInstance.data) === null || _syncBlockInstance$da7 === void 0 ? void 0 : _syncBlockInstance$da7.sourceURL,
       fireAnalyticsEvent: fireAnalyticsEvent
     });
   }

package/dist/cjs/ui/SyncedBlockRenderer.js

@@ -12,7 +12,9 @@ var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _AKRendererWrapper = require("./AKRendererWrapper");
+var _renderSyncedBlockContent = require("./renderSyncedBlockContent");
 var _SyncedBlockErrorComponent = require("./SyncedBlockErrorComponent");
 var _SyncedBlockLoadingState = require("./SyncedBlockLoadingState");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -63,6 +65,20 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
       };
     }),
     isCollabOffline = _useSharedPluginState.isCollabOffline;
+  if ((0, _platformFeatureFlags.fg)('platform_synced_block_patch_5')) {
+    var _api$analytics2;
+    var result = (0, _renderSyncedBlockContent.renderSyncedBlockContent)({
+      syncBlockInstance: syncBlockInstance,
+      isLoading: isLoading,
+      rendererOptions: rendererOptions,
+      providerFactory: providerFactory,
+      reloadData: reloadData,
+      fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent,
+      resourceId: syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.resourceId,
+      isOffline: isCollabOffline
+    });
+    return result.element;
+  }
 
   // Show offline error only when collaboration is offline and not in SSR mode
   // In SSR, we should always attempt to render content
@@ -83,7 +99,7 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
   }
   if (syncBlockInstance.error || !syncBlockInstance.data || syncBlockInstance.data.status === 'deleted') {
-    var _syncBlockInstance$er, _syncBlockInstance$da, _api$analytics2;
+    var _syncBlockInstance$er, _syncBlockInstance$da, _api$analytics3;
     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' ? {
         type: _editorSyncedBlockProvider.SyncBlockError.NotFound
@@ -93,20 +109,20 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
       resourceId: syncBlockInstance.resourceId,
       onRetry: reloadData,
       isLoading: isLoading,
-      fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent
+      fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent
     });
   }
 
   // Check for unpublished status
   if (((_syncBlockInstance$da2 = syncBlockInstance.data) === null || _syncBlockInstance$da2 === void 0 ? void 0 : _syncBlockInstance$da2.status) === 'unpublished') {
-    var _syncBlockInstance$da3, _api$analytics3;
+    var _syncBlockInstance$da3, _api$analytics4;
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
       error: {
         type: _editorSyncedBlockProvider.SyncBlockError.Unpublished
       },
       resourceId: syncBlockInstance.resourceId,
       sourceURL: (_syncBlockInstance$da3 = syncBlockInstance.data) === null || _syncBlockInstance$da3 === void 0 ? void 0 : _syncBlockInstance$da3.sourceURL,
-      fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent
+      fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions.fireAnalyticsEvent
     });
   }
   var syncBlockDoc = {

package/dist/cjs/ui/renderSyncedBlockContent.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderSyncedBlockContent = renderSyncedBlockContent;
+var _react = _interopRequireDefault(require("react"));
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
+var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
+var _AKRendererWrapper = require("./AKRendererWrapper");
+var _SyncedBlockErrorComponent = require("./SyncedBlockErrorComponent");
+var _SyncedBlockLoadingState = require("./SyncedBlockLoadingState");
+/**
+ * Shared rendering logic for synced block content used by both
+ * SyncedBlockRenderer (editor mode) and SyncedBlockNodeComponentRenderer (renderer mode).
+ *
+ * Handles the common branching: loading -> SSR error -> error/deleted -> unpublished -> success.
+ * Returns null if the caller should handle rendering itself (e.g. wrapping in a container div).
+ */
+function renderSyncedBlockContent(_ref) {
+  var _syncBlockInstance$da2;
+  var syncBlockInstance = _ref.syncBlockInstance,
+    isLoading = _ref.isLoading,
+    rendererOptions = _ref.rendererOptions,
+    providerFactory = _ref.providerFactory,
+    reloadData = _ref.reloadData,
+    fireAnalyticsEvent = _ref.fireAnalyticsEvent,
+    resourceId = _ref.resourceId,
+    isOffline = _ref.isOffline,
+    error = _ref.error;
+  var isSSRMode = (0, _coreUtils.isSSR)();
+  if (isOffline && !isSSRMode) {
+    return {
+      element: /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
+        error: {
+          type: _editorSyncedBlockProvider.SyncBlockError.Offline
+        }
+      }),
+      isSuccess: false
+    };
+  }
+  if (isLoading && !syncBlockInstance) {
+    return {
+      element: /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null),
+      isSuccess: false
+    };
+  }
+  if (isSSRMode && syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error) {
+    return {
+      element: /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null),
+      isSuccess: false
+    };
+  }
+  if (!resourceId || syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data) || syncBlockInstance.data.status === 'deleted') {
+    var _ref2, _syncBlockInstance$da;
+    var errorToDisplay = (_ref2 = error !== null && error !== void 0 ? error : syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _ref2 !== void 0 ? _ref2 : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' ? {
+      type: _editorSyncedBlockProvider.SyncBlockError.NotFound
+    } : {
+      type: _editorSyncedBlockProvider.SyncBlockError.Errored
+    };
+    return {
+      element: /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
+        error: errorToDisplay,
+        resourceId: resourceId,
+        onRetry: reloadData,
+        isLoading: isLoading,
+        fireAnalyticsEvent: fireAnalyticsEvent
+      }),
+      isSuccess: false
+    };
+  }
+  if ((syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da2 = syncBlockInstance.data) === null || _syncBlockInstance$da2 === void 0 ? void 0 : _syncBlockInstance$da2.status) === 'unpublished') {
+    var _syncBlockInstance$da3;
+    return {
+      element: /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
+        error: {
+          type: _editorSyncedBlockProvider.SyncBlockError.Unpublished
+        },
+        resourceId: resourceId,
+        sourceURL: (_syncBlockInstance$da3 = syncBlockInstance.data) === null || _syncBlockInstance$da3 === void 0 ? void 0 : _syncBlockInstance$da3.sourceURL,
+        fireAnalyticsEvent: fireAnalyticsEvent
+      }),
+      isSuccess: false
+    };
+  }
+  var syncBlockDoc = {
+    content: syncBlockInstance.data.content,
+    version: 1,
+    type: 'doc'
+  };
+  return {
+    element: /*#__PURE__*/_react.default.createElement(_AKRendererWrapper.AKRendererWrapper, {
+      doc: syncBlockDoc,
+      dataProviders: providerFactory,
+      options: rendererOptions
+    }),
+    isSuccess: true
+  };
+}

package/dist/es2019/index.js

@@ -1,3 +1,4 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
 export { getSyncBlockNodesFromDoc, useMemoizedSyncedBlockNodeComponent } from './useSyncedBlockNodeComponent';
-export { getSyncedBlockRenderer } from './getSyncedBlockRenderer';
+export { getSyncedBlockRenderer } from './getSyncedBlockRenderer';
+export { renderSyncedBlockContent } from './ui/renderSyncedBlockContent';

package/dist/es2019/ui/SyncedBlockNodeComponentRenderer.js

@@ -4,6 +4,7 @@ import { SyncBlockSharedCssClassName, SyncBlockRendererDataAttributeName, handle
 import { SyncBlockError, useFetchSyncBlockData } from '@atlaskit/editor-synced-block-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { AKRendererWrapper } from './AKRendererWrapper';
+import { renderSyncedBlockContent } from './renderSyncedBlockContent';
 import { SyncedBlockErrorComponent } from './SyncedBlockErrorComponent';
 import { SyncedBlockLoadingState } from './SyncedBlockLoadingState';
 export const SyncedBlockNodeComponentRenderer = ({
@@ -11,7 +12,7 @@ export const SyncedBlockNodeComponentRenderer = ({
   syncBlockStoreManager,
   rendererOptions
 }) => {
-  var _syncBlockInstance$da4;
+  var _syncBlockInstance$da6;
   const {
     resourceId,
     localId,
@@ -26,7 +27,9 @@ export const SyncedBlockNodeComponentRenderer = ({
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  syncBlockStoreManager.referenceManager.updateFireAnalyticsEvent(fireAnalyticsEvent);
+  useEffect(() => {
+    syncBlockStoreManager.referenceManager.updateFireAnalyticsEvent(fireAnalyticsEvent);
+  }, [syncBlockStoreManager.referenceManager, fireAnalyticsEvent]);
   const {
     syncBlockInstance,
     isLoading,
@@ -55,6 +58,36 @@ export const SyncedBlockNodeComponentRenderer = ({
       }
     };
   }, [rendererOptions, ssrProviders]);
+  if (fg('platform_synced_block_patch_5')) {
+    var _syncBlockInstance$er, _syncBlockInstance$da, _syncBlockInstance$da2;
+    const errorForDisplay = (_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' ? {
+      type: SyncBlockError.NotFound,
+      reason: (_syncBlockInstance$da2 = syncBlockInstance.data) === null || _syncBlockInstance$da2 === void 0 ? void 0 : _syncBlockInstance$da2.deletionReason
+    } : {
+      type: SyncBlockError.Errored,
+      reason: !resourceId ? 'missing resource id' : `missing data for block ${resourceId}`
+    };
+    const result = renderSyncedBlockContent({
+      syncBlockInstance: syncBlockInstance !== null && syncBlockInstance !== void 0 ? syncBlockInstance : undefined,
+      isLoading,
+      rendererOptions: finalRendererOptions,
+      providerFactory,
+      reloadData,
+      fireAnalyticsEvent,
+      resourceId,
+      error: errorForDisplay
+    });
+    if (result.isSuccess) {
+      return /*#__PURE__*/React.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+        className: SyncBlockSharedCssClassName.renderer
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        ,
+        [SyncBlockRendererDataAttributeName]: true
+      }, result.element);
+    }
+    return result.element;
+  }
   if (isLoading && !syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
@@ -65,16 +98,16 @@ export const SyncedBlockNodeComponentRenderer = ({
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
   if (!resourceId || syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data) || syncBlockInstance.data.status === 'deleted') {
-    var _syncBlockInstance$er, _syncBlockInstance$da, _syncBlockInstance$da2, _syncBlockInstance$er2, _syncBlockInstance$da3;
-    const errorMessage = (_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' ? {
+    var _syncBlockInstance$er2, _syncBlockInstance$da3, _syncBlockInstance$da4, _syncBlockInstance$er3, _syncBlockInstance$da5;
+    const errorMessage = (_syncBlockInstance$er2 = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er2 !== void 0 ? _syncBlockInstance$er2 : (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : (_syncBlockInstance$da3 = syncBlockInstance.data) === null || _syncBlockInstance$da3 === void 0 ? void 0 : _syncBlockInstance$da3.status) === 'deleted' ? {
       type: SyncBlockError.NotFound,
-      reason: (_syncBlockInstance$da2 = syncBlockInstance.data) === null || _syncBlockInstance$da2 === void 0 ? void 0 : _syncBlockInstance$da2.deletionReason
+      reason: (_syncBlockInstance$da4 = syncBlockInstance.data) === null || _syncBlockInstance$da4 === void 0 ? void 0 : _syncBlockInstance$da4.deletionReason
     } : {
       type: SyncBlockError.Errored,
       reason: !resourceId ? 'missing resource id' : `missing data for block ${resourceId}`
     };
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: fg('platform_synced_block_patch_3') ? errorMessage : (_syncBlockInstance$er2 = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er2 !== void 0 ? _syncBlockInstance$er2 : (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : (_syncBlockInstance$da3 = syncBlockInstance.data) === null || _syncBlockInstance$da3 === void 0 ? void 0 : _syncBlockInstance$da3.status) === 'deleted' ? {
+      error: fg('platform_synced_block_patch_3') ? errorMessage : (_syncBlockInstance$er3 = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er3 !== void 0 ? _syncBlockInstance$er3 : (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : (_syncBlockInstance$da5 = syncBlockInstance.data) === null || _syncBlockInstance$da5 === void 0 ? void 0 : _syncBlockInstance$da5.status) === 'deleted' ? {
         type: SyncBlockError.NotFound
       } : {
         type: SyncBlockError.Errored
@@ -85,14 +118,14 @@ export const SyncedBlockNodeComponentRenderer = ({
       fireAnalyticsEvent: fireAnalyticsEvent
     });
   }
-  if ((syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : (_syncBlockInstance$da4 = syncBlockInstance.data) === null || _syncBlockInstance$da4 === void 0 ? void 0 : _syncBlockInstance$da4.status) === 'unpublished') {
-    var _syncBlockInstance$da5;
+  if ((syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : (_syncBlockInstance$da6 = syncBlockInstance.data) === null || _syncBlockInstance$da6 === void 0 ? void 0 : _syncBlockInstance$da6.status) === 'unpublished') {
+    var _syncBlockInstance$da7;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
       error: {
         type: SyncBlockError.Unpublished
       },
       resourceId: syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.resourceId,
-      sourceURL: (_syncBlockInstance$da5 = syncBlockInstance.data) === null || _syncBlockInstance$da5 === void 0 ? void 0 : _syncBlockInstance$da5.sourceURL,
+      sourceURL: (_syncBlockInstance$da7 = syncBlockInstance.data) === null || _syncBlockInstance$da7 === void 0 ? void 0 : _syncBlockInstance$da7.sourceURL,
       fireAnalyticsEvent: fireAnalyticsEvent
     });
   }

package/dist/es2019/ui/SyncedBlockRenderer.js

@@ -3,7 +3,9 @@ import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { handleSSRErrorsAnalytics } from '@atlaskit/editor-common/sync-block';
 import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { AKRendererWrapper } from './AKRendererWrapper';
+import { renderSyncedBlockContent } from './renderSyncedBlockContent';
 import { SyncedBlockErrorComponent } from './SyncedBlockErrorComponent';
 import { SyncedBlockLoadingState } from './SyncedBlockLoadingState';
 const SyncedBlockRendererComponent = ({
@@ -56,6 +58,20 @@ const SyncedBlockRendererComponent = ({
   }) => ({
     isCollabOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'collab-offline'
   }));
+  if (fg('platform_synced_block_patch_5')) {
+    var _api$analytics2;
+    const result = renderSyncedBlockContent({
+      syncBlockInstance,
+      isLoading,
+      rendererOptions,
+      providerFactory,
+      reloadData,
+      fireAnalyticsEvent: api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent,
+      resourceId: syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.resourceId,
+      isOffline: isCollabOffline
+    });
+    return result.element;
+  }
 
   // Show offline error only when collaboration is offline and not in SSR mode
   // In SSR, we should always attempt to render content
@@ -76,7 +92,7 @@ const SyncedBlockRendererComponent = ({
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
   if (syncBlockInstance.error || !syncBlockInstance.data || syncBlockInstance.data.status === 'deleted') {
-    var _syncBlockInstance$er, _syncBlockInstance$da, _api$analytics2;
+    var _syncBlockInstance$er, _syncBlockInstance$da, _api$analytics3;
     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' ? {
         type: SyncBlockError.NotFound
@@ -86,20 +102,20 @@ const SyncedBlockRendererComponent = ({
       resourceId: syncBlockInstance.resourceId,
       onRetry: reloadData,
       isLoading: isLoading,
-      fireAnalyticsEvent: api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent
+      fireAnalyticsEvent: api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent
     });
   }
 
   // Check for unpublished status
   if (((_syncBlockInstance$da2 = syncBlockInstance.data) === null || _syncBlockInstance$da2 === void 0 ? void 0 : _syncBlockInstance$da2.status) === 'unpublished') {
-    var _syncBlockInstance$da3, _api$analytics3;
+    var _syncBlockInstance$da3, _api$analytics4;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
       error: {
         type: SyncBlockError.Unpublished
       },
       resourceId: syncBlockInstance.resourceId,
       sourceURL: (_syncBlockInstance$da3 = syncBlockInstance.data) === null || _syncBlockInstance$da3 === void 0 ? void 0 : _syncBlockInstance$da3.sourceURL,
-      fireAnalyticsEvent: api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent
+      fireAnalyticsEvent: api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions.fireAnalyticsEvent
     });
   }
   const syncBlockDoc = {

package/dist/es2019/ui/renderSyncedBlockContent.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { isSSR } from '@atlaskit/editor-common/core-utils';
+import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
+import { AKRendererWrapper } from './AKRendererWrapper';
+import { SyncedBlockErrorComponent } from './SyncedBlockErrorComponent';
+import { SyncedBlockLoadingState } from './SyncedBlockLoadingState';
+/**
+ * Shared rendering logic for synced block content used by both
+ * SyncedBlockRenderer (editor mode) and SyncedBlockNodeComponentRenderer (renderer mode).
+ *
+ * Handles the common branching: loading -> SSR error -> error/deleted -> unpublished -> success.
+ * Returns null if the caller should handle rendering itself (e.g. wrapping in a container div).
+ */
+export function renderSyncedBlockContent({
+  syncBlockInstance,
+  isLoading,
+  rendererOptions,
+  providerFactory,
+  reloadData,
+  fireAnalyticsEvent,
+  resourceId,
+  isOffline,
+  error
+}) {
+  var _syncBlockInstance$da2;
+  const isSSRMode = isSSR();
+  if (isOffline && !isSSRMode) {
+    return {
+      element: /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
+        error: {
+          type: SyncBlockError.Offline
+        }
+      }),
+      isSuccess: false
+    };
+  }
+  if (isLoading && !syncBlockInstance) {
+    return {
+      element: /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null),
+      isSuccess: false
+    };
+  }
+  if (isSSRMode && syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error) {
+    return {
+      element: /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null),
+      isSuccess: false
+    };
+  }
+  if (!resourceId || syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data) || syncBlockInstance.data.status === 'deleted') {
+    var _ref, _syncBlockInstance$da;
+    const errorToDisplay = (_ref = error !== null && error !== void 0 ? error : syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _ref !== void 0 ? _ref : (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' ? {
+      type: SyncBlockError.NotFound
+    } : {
+      type: SyncBlockError.Errored
+    };
+    return {
+      element: /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
+        error: errorToDisplay,
+        resourceId: resourceId,
+        onRetry: reloadData,
+        isLoading: isLoading,
+        fireAnalyticsEvent: fireAnalyticsEvent
+      }),
+      isSuccess: false
+    };
+  }
+  if ((syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : (_syncBlockInstance$da2 = syncBlockInstance.data) === null || _syncBlockInstance$da2 === void 0 ? void 0 : _syncBlockInstance$da2.status) === 'unpublished') {
+    var _syncBlockInstance$da3;
+    return {
+      element: /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
+        error: {
+          type: SyncBlockError.Unpublished
+        },
+        resourceId: resourceId,
+        sourceURL: (_syncBlockInstance$da3 = syncBlockInstance.data) === null || _syncBlockInstance$da3 === void 0 ? void 0 : _syncBlockInstance$da3.sourceURL,
+        fireAnalyticsEvent: fireAnalyticsEvent
+      }),
+      isSuccess: false
+    };
+  }
+  const syncBlockDoc = {
+    content: syncBlockInstance.data.content,
+    version: 1,
+    type: 'doc'
+  };
+  return {
+    element: /*#__PURE__*/React.createElement(AKRendererWrapper, {
+      doc: syncBlockDoc,
+      dataProviders: providerFactory,
+      options: rendererOptions
+    }),
+    isSuccess: true
+  };
+}

package/dist/esm/index.js

@@ -1,3 +1,4 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
 export { getSyncBlockNodesFromDoc, useMemoizedSyncedBlockNodeComponent } from './useSyncedBlockNodeComponent';
-export { getSyncedBlockRenderer } from './getSyncedBlockRenderer';
+export { getSyncedBlockRenderer } from './getSyncedBlockRenderer';
+export { renderSyncedBlockContent } from './ui/renderSyncedBlockContent';

package/dist/esm/ui/SyncedBlockNodeComponentRenderer.js

@@ -8,10 +8,11 @@ import { SyncBlockSharedCssClassName, SyncBlockRendererDataAttributeName, handle
 import { SyncBlockError, useFetchSyncBlockData } from '@atlaskit/editor-synced-block-provider';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { AKRendererWrapper } from './AKRendererWrapper';
+import { renderSyncedBlockContent } from './renderSyncedBlockContent';
 import { SyncedBlockErrorComponent } from './SyncedBlockErrorComponent';
 import { SyncedBlockLoadingState } from './SyncedBlockLoadingState';
 export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentRenderer(_ref) {
-  var _syncBlockInstance$da4;
+  var _syncBlockInstance$da6;
   var nodeProps = _ref.nodeProps,
     syncBlockStoreManager = _ref.syncBlockStoreManager,
     rendererOptions = _ref.rendererOptions;
@@ -27,7 +28,9 @@ export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentR
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  syncBlockStoreManager.referenceManager.updateFireAnalyticsEvent(fireAnalyticsEvent);
+  useEffect(function () {
+    syncBlockStoreManager.referenceManager.updateFireAnalyticsEvent(fireAnalyticsEvent);
+  }, [syncBlockStoreManager.referenceManager, fireAnalyticsEvent]);
   var _useFetchSyncBlockDat = useFetchSyncBlockData(syncBlockStoreManager, resourceId, localId, fireAnalyticsEvent),
     syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance,
     isLoading = _useFetchSyncBlockDat.isLoading,
@@ -53,6 +56,34 @@ export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentR
       })
     });
   }, [rendererOptions, ssrProviders]);
+  if (fg('platform_synced_block_patch_5')) {
+    var _syncBlockInstance$er, _syncBlockInstance$da, _syncBlockInstance$da2;
+    var errorForDisplay = (_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' ? {
+      type: SyncBlockError.NotFound,
+      reason: (_syncBlockInstance$da2 = syncBlockInstance.data) === null || _syncBlockInstance$da2 === void 0 ? void 0 : _syncBlockInstance$da2.deletionReason
+    } : {
+      type: SyncBlockError.Errored,
+      reason: !resourceId ? 'missing resource id' : "missing data for block ".concat(resourceId)
+    };
+    var result = renderSyncedBlockContent({
+      syncBlockInstance: syncBlockInstance !== null && syncBlockInstance !== void 0 ? syncBlockInstance : undefined,
+      isLoading: isLoading,
+      rendererOptions: finalRendererOptions,
+      providerFactory: providerFactory,
+      reloadData: reloadData,
+      fireAnalyticsEvent: fireAnalyticsEvent,
+      resourceId: resourceId,
+      error: errorForDisplay
+    });
+    if (result.isSuccess) {
+      return /*#__PURE__*/React.createElement("div", _extends({
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+        className: SyncBlockSharedCssClassName.renderer
+        // eslint-disable-next-line react/jsx-props-no-spreading
+      }, _defineProperty({}, SyncBlockRendererDataAttributeName, true)), result.element);
+    }
+    return result.element;
+  }
   if (isLoading && !syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
@@ -63,16 +94,16 @@ export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentR
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
   if (!resourceId || syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data) || syncBlockInstance.data.status === 'deleted') {
-    var _syncBlockInstance$er, _syncBlockInstance$da, _syncBlockInstance$da2, _syncBlockInstance$er2, _syncBlockInstance$da3;
-    var errorMessage = (_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' ? {
+    var _syncBlockInstance$er2, _syncBlockInstance$da3, _syncBlockInstance$da4, _syncBlockInstance$er3, _syncBlockInstance$da5;
+    var errorMessage = (_syncBlockInstance$er2 = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er2 !== void 0 ? _syncBlockInstance$er2 : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da3 = syncBlockInstance.data) === null || _syncBlockInstance$da3 === void 0 ? void 0 : _syncBlockInstance$da3.status) === 'deleted' ? {
       type: SyncBlockError.NotFound,
-      reason: (_syncBlockInstance$da2 = syncBlockInstance.data) === null || _syncBlockInstance$da2 === void 0 ? void 0 : _syncBlockInstance$da2.deletionReason
+      reason: (_syncBlockInstance$da4 = syncBlockInstance.data) === null || _syncBlockInstance$da4 === void 0 ? void 0 : _syncBlockInstance$da4.deletionReason
     } : {
       type: SyncBlockError.Errored,
       reason: !resourceId ? 'missing resource id' : "missing data for block ".concat(resourceId)
     };
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: fg('platform_synced_block_patch_3') ? errorMessage : (_syncBlockInstance$er2 = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er2 !== void 0 ? _syncBlockInstance$er2 : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da3 = syncBlockInstance.data) === null || _syncBlockInstance$da3 === void 0 ? void 0 : _syncBlockInstance$da3.status) === 'deleted' ? {
+      error: fg('platform_synced_block_patch_3') ? errorMessage : (_syncBlockInstance$er3 = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er3 !== void 0 ? _syncBlockInstance$er3 : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da5 = syncBlockInstance.data) === null || _syncBlockInstance$da5 === void 0 ? void 0 : _syncBlockInstance$da5.status) === 'deleted' ? {
         type: SyncBlockError.NotFound
       } : {
         type: SyncBlockError.Errored
@@ -83,14 +114,14 @@ export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentR
       fireAnalyticsEvent: fireAnalyticsEvent
     });
   }
-  if ((syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da4 = syncBlockInstance.data) === null || _syncBlockInstance$da4 === void 0 ? void 0 : _syncBlockInstance$da4.status) === 'unpublished') {
-    var _syncBlockInstance$da5;
+  if ((syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da6 = syncBlockInstance.data) === null || _syncBlockInstance$da6 === void 0 ? void 0 : _syncBlockInstance$da6.status) === 'unpublished') {
+    var _syncBlockInstance$da7;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
       error: {
         type: SyncBlockError.Unpublished
       },
       resourceId: syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.resourceId,
-      sourceURL: (_syncBlockInstance$da5 = syncBlockInstance.data) === null || _syncBlockInstance$da5 === void 0 ? void 0 : _syncBlockInstance$da5.sourceURL,
+      sourceURL: (_syncBlockInstance$da7 = syncBlockInstance.data) === null || _syncBlockInstance$da7 === void 0 ? void 0 : _syncBlockInstance$da7.sourceURL,
       fireAnalyticsEvent: fireAnalyticsEvent
     });
   }

package/dist/esm/ui/SyncedBlockRenderer.js

@@ -6,7 +6,9 @@ import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { handleSSRErrorsAnalytics } from '@atlaskit/editor-common/sync-block';
 import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { AKRendererWrapper } from './AKRendererWrapper';
+import { renderSyncedBlockContent } from './renderSyncedBlockContent';
 import { SyncedBlockErrorComponent } from './SyncedBlockErrorComponent';
 import { SyncedBlockLoadingState } from './SyncedBlockLoadingState';
 var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
@@ -54,6 +56,20 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
       };
     }),
     isCollabOffline = _useSharedPluginState.isCollabOffline;
+  if (fg('platform_synced_block_patch_5')) {
+    var _api$analytics2;
+    var result = renderSyncedBlockContent({
+      syncBlockInstance: syncBlockInstance,
+      isLoading: isLoading,
+      rendererOptions: rendererOptions,
+      providerFactory: providerFactory,
+      reloadData: reloadData,
+      fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent,
+      resourceId: syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.resourceId,
+      isOffline: isCollabOffline
+    });
+    return result.element;
+  }
 
   // Show offline error only when collaboration is offline and not in SSR mode
   // In SSR, we should always attempt to render content
@@ -74,7 +90,7 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
   if (syncBlockInstance.error || !syncBlockInstance.data || syncBlockInstance.data.status === 'deleted') {
-    var _syncBlockInstance$er, _syncBlockInstance$da, _api$analytics2;
+    var _syncBlockInstance$er, _syncBlockInstance$da, _api$analytics3;
     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' ? {
         type: SyncBlockError.NotFound
@@ -84,20 +100,20 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
       resourceId: syncBlockInstance.resourceId,
       onRetry: reloadData,
       isLoading: isLoading,
-      fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent
+      fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent
     });
   }
 
   // Check for unpublished status
   if (((_syncBlockInstance$da2 = syncBlockInstance.data) === null || _syncBlockInstance$da2 === void 0 ? void 0 : _syncBlockInstance$da2.status) === 'unpublished') {
-    var _syncBlockInstance$da3, _api$analytics3;
+    var _syncBlockInstance$da3, _api$analytics4;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
       error: {
         type: SyncBlockError.Unpublished
       },
       resourceId: syncBlockInstance.resourceId,
       sourceURL: (_syncBlockInstance$da3 = syncBlockInstance.data) === null || _syncBlockInstance$da3 === void 0 ? void 0 : _syncBlockInstance$da3.sourceURL,
-      fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent
+      fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions.fireAnalyticsEvent
     });
   }
   var syncBlockDoc = {

package/dist/esm/ui/renderSyncedBlockContent.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { isSSR } from '@atlaskit/editor-common/core-utils';
+import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
+import { AKRendererWrapper } from './AKRendererWrapper';
+import { SyncedBlockErrorComponent } from './SyncedBlockErrorComponent';
+import { SyncedBlockLoadingState } from './SyncedBlockLoadingState';
+/**
+ * Shared rendering logic for synced block content used by both
+ * SyncedBlockRenderer (editor mode) and SyncedBlockNodeComponentRenderer (renderer mode).
+ *
+ * Handles the common branching: loading -> SSR error -> error/deleted -> unpublished -> success.
+ * Returns null if the caller should handle rendering itself (e.g. wrapping in a container div).
+ */
+export function renderSyncedBlockContent(_ref) {
+  var _syncBlockInstance$da2;
+  var syncBlockInstance = _ref.syncBlockInstance,
+    isLoading = _ref.isLoading,
+    rendererOptions = _ref.rendererOptions,
+    providerFactory = _ref.providerFactory,
+    reloadData = _ref.reloadData,
+    fireAnalyticsEvent = _ref.fireAnalyticsEvent,
+    resourceId = _ref.resourceId,
+    isOffline = _ref.isOffline,
+    error = _ref.error;
+  var isSSRMode = isSSR();
+  if (isOffline && !isSSRMode) {
+    return {
+      element: /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
+        error: {
+          type: SyncBlockError.Offline
+        }
+      }),
+      isSuccess: false
+    };
+  }
+  if (isLoading && !syncBlockInstance) {
+    return {
+      element: /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null),
+      isSuccess: false
+    };
+  }
+  if (isSSRMode && syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error) {
+    return {
+      element: /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null),
+      isSuccess: false
+    };
+  }
+  if (!resourceId || syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data) || syncBlockInstance.data.status === 'deleted') {
+    var _ref2, _syncBlockInstance$da;
+    var errorToDisplay = (_ref2 = error !== null && error !== void 0 ? error : syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _ref2 !== void 0 ? _ref2 : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' ? {
+      type: SyncBlockError.NotFound
+    } : {
+      type: SyncBlockError.Errored
+    };
+    return {
+      element: /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
+        error: errorToDisplay,
+        resourceId: resourceId,
+        onRetry: reloadData,
+        isLoading: isLoading,
+        fireAnalyticsEvent: fireAnalyticsEvent
+      }),
+      isSuccess: false
+    };
+  }
+  if ((syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da2 = syncBlockInstance.data) === null || _syncBlockInstance$da2 === void 0 ? void 0 : _syncBlockInstance$da2.status) === 'unpublished') {
+    var _syncBlockInstance$da3;
+    return {
+      element: /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
+        error: {
+          type: SyncBlockError.Unpublished
+        },
+        resourceId: resourceId,
+        sourceURL: (_syncBlockInstance$da3 = syncBlockInstance.data) === null || _syncBlockInstance$da3 === void 0 ? void 0 : _syncBlockInstance$da3.sourceURL,
+        fireAnalyticsEvent: fireAnalyticsEvent
+      }),
+      isSuccess: false
+    };
+  }
+  var syncBlockDoc = {
+    content: syncBlockInstance.data.content,
+    version: 1,
+    type: 'doc'
+  };
+  return {
+    element: /*#__PURE__*/React.createElement(AKRendererWrapper, {
+      doc: syncBlockDoc,
+      dataProviders: providerFactory,
+      options: rendererOptions
+    }),
+    isSuccess: true
+  };
+}

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export { getSyncBlockNodesFromDoc, useMemoizedSyncedBlockNodeComponent, type GetSyncedBlockNodeComponentProps, } from './useSyncedBlockNodeComponent';
 export { getSyncedBlockRenderer } from './getSyncedBlockRenderer';
 export type { SyncedBlockNodeProps } from './ui/SyncedBlockNodeComponentRenderer';
+export { renderSyncedBlockContent, type RenderSyncedBlockContentParams, } from './ui/renderSyncedBlockContent';

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { RendererSyncBlockEventPayload } from '@atlaskit/editor-common/analytics';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { type SyncBlockInstance } from '@atlaskit/editor-synced-block-provider';
+import type { SyncedBlockRendererOptions } from '../types';
+export type RenderSyncedBlockContentParams = {
+    error?: SyncBlockInstance['error'];
+    fireAnalyticsEvent?: (payload: RendererSyncBlockEventPayload) => void;
+    isLoading: boolean;
+    isOffline?: boolean;
+    providerFactory: ProviderFactory | undefined;
+    reloadData?: () => void;
+    rendererOptions: SyncedBlockRendererOptions | undefined;
+    resourceId?: string;
+    syncBlockInstance: SyncBlockInstance | null | undefined;
+};
+/**
+ * Shared rendering logic for synced block content used by both
+ * SyncedBlockRenderer (editor mode) and SyncedBlockNodeComponentRenderer (renderer mode).
+ *
+ * Handles the common branching: loading -> SSR error -> error/deleted -> unpublished -> success.
+ * Returns null if the caller should handle rendering itself (e.g. wrapping in a container div).
+ */
+export declare function renderSyncedBlockContent({ syncBlockInstance, isLoading, rendererOptions, providerFactory, reloadData, fireAnalyticsEvent, resourceId, isOffline, error, }: RenderSyncedBlockContentParams): {
+    element: React.JSX.Element;
+    isSuccess: boolean;
+};

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

@@ -1,3 +1,4 @@
 export { getSyncBlockNodesFromDoc, useMemoizedSyncedBlockNodeComponent, type GetSyncedBlockNodeComponentProps, } from './useSyncedBlockNodeComponent';
 export { getSyncedBlockRenderer } from './getSyncedBlockRenderer';
 export type { SyncedBlockNodeProps } from './ui/SyncedBlockNodeComponentRenderer';
+export { renderSyncedBlockContent, type RenderSyncedBlockContentParams, } from './ui/renderSyncedBlockContent';

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { RendererSyncBlockEventPayload } from '@atlaskit/editor-common/analytics';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { type SyncBlockInstance } from '@atlaskit/editor-synced-block-provider';
+import type { SyncedBlockRendererOptions } from '../types';
+export type RenderSyncedBlockContentParams = {
+    error?: SyncBlockInstance['error'];
+    fireAnalyticsEvent?: (payload: RendererSyncBlockEventPayload) => void;
+    isLoading: boolean;
+    isOffline?: boolean;
+    providerFactory: ProviderFactory | undefined;
+    reloadData?: () => void;
+    rendererOptions: SyncedBlockRendererOptions | undefined;
+    resourceId?: string;
+    syncBlockInstance: SyncBlockInstance | null | undefined;
+};
+/**
+ * Shared rendering logic for synced block content used by both
+ * SyncedBlockRenderer (editor mode) and SyncedBlockNodeComponentRenderer (renderer mode).
+ *
+ * Handles the common branching: loading -> SSR error -> error/deleted -> unpublished -> success.
+ * Returns null if the caller should handle rendering itself (e.g. wrapping in a container div).
+ */
+export declare function renderSyncedBlockContent({ syncBlockInstance, isLoading, rendererOptions, providerFactory, reloadData, fireAnalyticsEvent, resourceId, isOffline, error, }: RenderSyncedBlockContentParams): {
+    element: React.JSX.Element;
+    isSuccess: boolean;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-synced-block-renderer",
-	"version": "5.9.3",
+	"version": "5.9.5",
 	"description": "SyncedBlockRenderer for @atlaskit/editor-plugin-synced-block",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,7 +38,7 @@
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^18.0.0",
-		"@atlaskit/renderer": "^126.12.0",
+		"@atlaskit/renderer": "^126.13.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/tooltip": "^20.14.0",
@@ -94,6 +94,9 @@
 		},
 		"platform_synced_block_patch_4": {
 			"type": "boolean"
+		},
+		"platform_synced_block_patch_5": {
+			"type": "boolean"
 		}
 	}
 }