@atlaskit/editor-synced-block-renderer 6.0.2 → 6.0.4

package/AGENTS.md

@@ -0,0 +1,112 @@
+# Synced Block Renderer — Developer Agent Guide
+
+> **Package**: `@atlaskit/editor-synced-block-renderer` **Purpose**: View-mode rendering of
+> reference synced blocks using nested renderer with SSR support. **Full Knowledge Base**:
+> [Synced Blocks — Comprehensive Knowledge Base](https://hello.atlassian.net/wiki/spaces/egcuc/pages/6679548384)
+
+---
+
+## Quick Context
+
+This package renders reference `syncBlock` nodes in view mode (Confluence page view, Jira issue
+view). It fetches content from the Block Service, handles loading/error/offline states, and supports
+SSR for performance-critical page loads.
+
+---
+
+## Source Structure
+
+```
+src/
+├── index.ts                              ← Barrel exports
+├── useSyncedBlockNodeComponent.tsx        ← Core hooks for node management and memoization
+├── ui/
+│   ├── renderSyncedBlockContent.tsx       ← Shared render branching logic (loading → error → success)
+│   └── SyncedBlockNodeComponentRenderer.tsx ← Renderer component with store manager + media SSR
+└── types.ts                              ← SyncedBlockRendererOptions type
+```
+
+---
+
+## Key Exports
+
+```typescript
+getSyncBlockNodesFromDoc; // Extract SyncBlockNode[] from a DocNode
+useMemoizedSyncedBlockNodeComponent; // Returns memoized component for rendering reference blocks
+getSyncedBlockRenderer; // Factory for editor-mode synced block renderer
+renderSyncedBlockContent; // Shared render branching logic
+```
+
+---
+
+## How It Works
+
+### `getSyncBlockNodesFromDoc(doc: DocNode)`
+
+Extracts all `syncBlock` nodes from a document's content array. Maps through `doc.content`, converts
+each via `convertSyncBlockJSONNodeToSyncBlockNode`, filters out undefined entries. Returns `[]` if
+content is empty.
+
+### `renderSyncedBlockContent(params)`
+
+Central rendering decision tree (checked sequentially):
+
+1. **Offline + not SSR** → offline error component
+2. **Loading + no instance** → loading skeleton
+3. **SSR + instance error** → loading state (deferred to client-side hydration)
+4. **Missing resourceId / error / no data / deleted** → error component
+5. **Unpublished** → unpublished error component
+6. **Success** → wraps content in `AKRendererWrapper` and renders
+
+### `useMemoizedSyncedBlockNodeComponent(options)`
+
+1. Creates memoized `SyncBlockStoreManager` via `useMemoizedSyncBlockStoreManager`
+2. First `useEffect`: processes prefetched data via `getPrefetchedData()`
+3. Second `useEffect`: triggers initial fetch of synced block data
+4. Returns memoized callback wrapping `SyncedBlockNodeComponentRenderer` in `ErrorBoundary` +
+   `SyncBlockActionsProvider`
+
+### SSR Behaviour
+
+- `renderSyncedBlockContent`: Skips offline error in SSR; returns loading if SSR + error (deferred)
+- `SyncedBlockNodeComponentRenderer`: Sets media SSR mode to `'server'` during SSR, `'client'` after
+  hydration
+- SSR errors tracked via `handleSSRErrorsAnalytics` in deferred `useEffect`
+- Uses `isSSR()` from `@atlaskit/editor-common/core-utils`
+
+---
+
+## Common Tasks
+
+### Fixing a rendering bug
+
+1. Identify if it's a loading state, error state, or content rendering issue
+2. Check `renderSyncedBlockContent` branching logic — which path is being hit?
+3. For content issues, check if the ADF node type is supported:
+   [Supported nodes](https://hello.atlassian.net/wiki/spaces/egcuc/pages/5926568979)
+4. For SSR issues, check if `isSSR()` detection and hydration timing are correct
+
+### Adding a new error state
+
+1. Add condition check in `renderSyncedBlockContent.tsx`
+2. Create error component UI
+3. Add analytics event for the new error state
+4. Ensure SSR path handles it gracefully (deferred to client if needed)
+
+### Performance considerations
+
+- Reference blocks can regress VC90 due to content shift (CLS)
+- SSR preloading mitigates this — ensure `getPrefetchedData()` is populated
+- Use `SyncBlockInMemorySessionCache` for view→edit transitions
+- Monitor: [VC90 investigation](https://hello.atlassian.net/wiki/spaces/egcuc/pages/6528071518)
+
+---
+
+## Related Packages
+
+- **Plugin**: `platform/packages/editor/editor-plugin-synced-block/` — uses `getSyncedBlockRenderer`
+- **Provider**: `platform/packages/editor/editor-synced-block-provider/` — provides store manager
+  and fetch
+- **Confluence renderer**: `confluence/next/packages/adf-renderer/` — integrates this for page view
+- **Jira**: `jira/src/packages/issue/issue-view-synced-block-provider/` — uses
+  `useMemoizedSyncedBlockNodeComponent`

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-synced-block-renderer
 
+## 6.0.4
+
+### Patch Changes
+
+- [`5221db0d676ef`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5221db0d676ef) -
+  Mechanical type-import autofix for tables, collab, and synchrony packages.
+- Updated dependencies
+
+## 6.0.3
+
+### Patch Changes
+
+- [`7428d9bf3aa13`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7428d9bf3aa13) -
+  Clean up platform_synced_block_patch_5 feature gate
+- Updated dependencies
+
 ## 6.0.2
 
 ### Patch Changes

package/dist/cjs/ui/AKRendererWrapper.js

@@ -12,7 +12,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _renderer = require("@atlaskit/renderer");
 var _actions = require("@atlaskit/renderer/actions");
 var _rendererContext = require("@atlaskit/renderer/renderer-context");
@@ -139,6 +138,6 @@ var AKRendererWrapper = exports.AKRendererWrapper = /*#__PURE__*/(0, _react.memo
     media: media,
     smartLinks: smartLinks,
     stickyHeaders: stickyHeaders,
-    contentMode: (0, _platformFeatureFlags.fg)('platform_synced_block_patch_5') ? contentMode : undefined
+    contentMode: contentMode
   })))));
 });

package/dist/cjs/ui/SyncedBlockLoadError.js

@@ -24,7 +24,9 @@ var SyncedBlockLoadError = exports.SyncedBlockLoadError = function SyncedBlockLo
     formatMessage = _useIntl.formatMessage;
   var button = /*#__PURE__*/_react.default.createElement(_new.default, {
     appearance: "default",
-    spacing: "compact",
+    spacing: "compact"
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onClick: function onClick(event) {
       event.preventDefault();
       event.stopPropagation();

package/dist/cjs/ui/SyncedBlockNodeComponentRenderer.js

@@ -12,16 +12,12 @@ var _react = _interopRequireWildcard(require("react"));
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
 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$da5;
+  var _syncBlockInstance$er, _syncBlockInstance$da, _syncBlockInstance$da2;
   var nodeProps = _ref.nodeProps,
     syncBlockStoreManager = _ref.syncBlockStoreManager,
     rendererOptions = _ref.rendererOptions;
@@ -65,83 +61,29 @@ 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);
-  }
-
-  // In SSR, if server returned error, we should render loading state instead of error state
-  // since  FE will do another fetch and render the error state or proper data then
-  if ((0, _coreUtils.isSSR)() && syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error) {
-    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$er2, _syncBlockInstance$da3, _syncBlockInstance$da4;
-    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$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: errorMessage,
-      resourceId: syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.resourceId,
-      onRetry: reloadData,
-      isLoading: isLoading,
-      fireAnalyticsEvent: fireAnalyticsEvent
-    });
-  }
-  if ((syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da5 = syncBlockInstance.data) === null || _syncBlockInstance$da5 === void 0 ? void 0 : _syncBlockInstance$da5.status) === 'unpublished') {
-    var _syncBlockInstance$da6;
-    return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
-      error: {
-        type: _editorSyncedBlockProvider.SyncBlockError.Unpublished
-      },
-      resourceId: syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.resourceId,
-      sourceURL: (_syncBlockInstance$da6 = syncBlockInstance.data) === null || _syncBlockInstance$da6 === void 0 ? void 0 : _syncBlockInstance$da6.sourceURL,
-      fireAnalyticsEvent: fireAnalyticsEvent
-    });
-  }
-  var syncBlockDoc = {
-    content: syncBlockInstance.data.content,
-    version: 1,
-    type: 'doc'
+  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)
   };
-  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)), /*#__PURE__*/_react.default.createElement(_AKRendererWrapper.AKRendererWrapper, {
-    doc: syncBlockDoc,
-    dataProviders: providerFactory,
-    options: finalRendererOptions
-  }));
+  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;
 };

package/dist/cjs/ui/SyncedBlockRenderer.js

@@ -1,27 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SyncedBlockRenderer = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 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); }
 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 SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
-  var _syncBlockInstance$da2;
+  var _api$analytics2;
   var syncBlockRendererOptions = _ref.syncBlockRendererOptions,
     syncBlockFetchResult = _ref.syncBlockFetchResult,
     api = _ref.api;
@@ -68,77 +61,18 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
     }),
     isCollabOffline = _useSharedPluginState.isCollabOffline,
     contentMode = _useSharedPluginState.contentMode;
-  if ((0, _platformFeatureFlags.fg)('platform_synced_block_patch_5')) {
-    var _api$analytics2;
-    var result = (0, _renderSyncedBlockContent.renderSyncedBlockContent)({
-      syncBlockInstance: syncBlockInstance,
-      isLoading: isLoading,
-      rendererOptions: contentMode ? _objectSpread(_objectSpread({}, rendererOptions), {}, {
-        contentMode: contentMode
-      }) : 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
-  if (isCollabOffline && !isSSRMode) {
-    return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
-      error: {
-        type: _editorSyncedBlockProvider.SyncBlockError.Offline
-      }
-    });
-  }
-  if (!syncBlockInstance) {
-    return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
-  }
-
-  // In SSR, if server returned error, we should render loading state instead of error state
-  // since  FE will do another fetch and render the error state or proper data then
-  if (isSSRMode && syncBlockInstance.error) {
-    return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
-  }
-  if (syncBlockInstance.error || !syncBlockInstance.data || syncBlockInstance.data.status === 'deleted') {
-    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
-      } : {
-        type: _editorSyncedBlockProvider.SyncBlockError.Errored
-      },
-      resourceId: syncBlockInstance.resourceId,
-      onRetry: reloadData,
-      isLoading: isLoading,
-      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$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$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions.fireAnalyticsEvent
-    });
-  }
-  var syncBlockDoc = {
-    content: syncBlockInstance.data.content,
-    version: 1,
-    type: 'doc'
-  };
-  return /*#__PURE__*/_react.default.createElement(_AKRendererWrapper.AKRendererWrapper, {
-    doc: syncBlockDoc,
-    dataProviders: providerFactory,
-    options: rendererOptions
+  var result = (0, _renderSyncedBlockContent.renderSyncedBlockContent)({
+    syncBlockInstance: syncBlockInstance,
+    isLoading: isLoading,
+    rendererOptions: contentMode ? _objectSpread(_objectSpread({}, rendererOptions), {}, {
+      contentMode: contentMode
+    }) : 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;
 };
 var SyncedBlockRenderer = exports.SyncedBlockRenderer = /*#__PURE__*/(0, _react.memo)(SyncedBlockRendererComponent);

package/dist/cjs/ui/renderSyncedBlockContent.js

@@ -32,6 +32,7 @@ function renderSyncedBlockContent(_ref) {
   var isSSRMode = (0, _coreUtils.isSSR)();
   if (isOffline && !isSSRMode) {
     return {
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       element: /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
         error: {
           type: _editorSyncedBlockProvider.SyncBlockError.Offline
@@ -73,7 +74,8 @@ function renderSyncedBlockContent(_ref) {
   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, {
+      element: /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent
+      /* eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) */, {
         error: {
           type: _editorSyncedBlockProvider.SyncBlockError.Unpublished
         },

package/dist/cjs/useSyncedBlockNodeComponent.js

@@ -51,7 +51,9 @@ var useMemoizedSyncedBlockNodeComponent = exports.useMemoizedSyncedBlockNodeComp
       component: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
       dispatchAnalyticsEvent: fireAnalyticsEvent,
       fallbackComponent: null
-    }, /*#__PURE__*/_react.default.createElement(_syncBlock.SyncBlockActionsProvider, {
+    }, /*#__PURE__*/_react.default.createElement(_syncBlock.SyncBlockActionsProvider
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    , {
       fetchSyncBlockSourceInfo: function fetchSyncBlockSourceInfo(sourceAri) {
         return syncBlockStoreManager.referenceManager.fetchSyncBlockSourceInfoBySourceAri(sourceAri);
       }

package/dist/es2019/ui/AKRendererWrapper.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { memo, useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { ReactRenderer, ValidationContextProvider, defaultNodeComponents } from '@atlaskit/renderer';
 import { RendererActionsContext } from '@atlaskit/renderer/actions';
 import { RendererContextProvider } from '@atlaskit/renderer/renderer-context';
@@ -131,6 +130,6 @@ export const AKRendererWrapper = /*#__PURE__*/memo(({
     media: media,
     smartLinks: smartLinks,
     stickyHeaders: stickyHeaders,
-    contentMode: fg('platform_synced_block_patch_5') ? contentMode : undefined
+    contentMode: contentMode
   })))));
 });

package/dist/es2019/ui/SyncedBlockLoadError.js

@@ -19,7 +19,9 @@ export const SyncedBlockLoadError = ({
   } = useIntl();
   const button = /*#__PURE__*/React.createElement(Button, {
     appearance: "default",
-    spacing: "compact",
+    spacing: "compact"
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     onClick: event => {
       event.preventDefault();
       event.stopPropagation();

package/dist/es2019/ui/SyncedBlockNodeComponentRenderer.js

@@ -2,17 +2,13 @@ import React, { useEffect, useMemo } from 'react';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { SyncBlockSharedCssClassName, SyncBlockRendererDataAttributeName, handleSSRErrorsAnalytics } from '@atlaskit/editor-common/sync-block';
 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 = ({
   nodeProps,
   syncBlockStoreManager,
   rendererOptions
 }) => {
-  var _syncBlockInstance$da5;
+  var _syncBlockInstance$er, _syncBlockInstance$da, _syncBlockInstance$da2;
   const {
     resourceId,
     localId,
@@ -58,87 +54,31 @@ 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);
-  }
-
-  // In SSR, if server returned error, we should render loading state instead of error state
-  // since  FE will do another fetch and render the error state or proper data then
-  if (isSSR() && syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error) {
-    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$er2, _syncBlockInstance$da3, _syncBlockInstance$da4;
-    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$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: errorMessage,
-      resourceId: syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.resourceId,
-      onRetry: reloadData,
-      isLoading: isLoading,
-      fireAnalyticsEvent: fireAnalyticsEvent
-    });
-  }
-  if ((syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : (_syncBlockInstance$da5 = syncBlockInstance.data) === null || _syncBlockInstance$da5 === void 0 ? void 0 : _syncBlockInstance$da5.status) === 'unpublished') {
-    var _syncBlockInstance$da6;
-    return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: {
-        type: SyncBlockError.Unpublished
-      },
-      resourceId: syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.resourceId,
-      sourceURL: (_syncBlockInstance$da6 = syncBlockInstance.data) === null || _syncBlockInstance$da6 === void 0 ? void 0 : _syncBlockInstance$da6.sourceURL,
-      fireAnalyticsEvent: fireAnalyticsEvent
-    });
-  }
-  const syncBlockDoc = {
-    content: syncBlockInstance.data.content,
-    version: 1,
-    type: 'doc'
+  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}`
   };
-  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
-  }, /*#__PURE__*/React.createElement(AKRendererWrapper, {
-    doc: syncBlockDoc,
-    dataProviders: providerFactory,
-    options: finalRendererOptions
-  }));
+  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;
 };