@atlaskit/editor-synced-block-renderer 5.9.0 → 5.9.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-synced-block-renderer
 
+## 5.9.2
+
+### Patch Changes
+
+- [`6998dc542380a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6998dc542380a) -
+  [EDITOR-5580] Pass media.ssr prop for reference sync block in view page for both client and ssr
+  environment
+- Updated dependencies
+
+## 5.9.1
+
+### Patch Changes
+
+- [`e18437c28f9ab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e18437c28f9ab) -
+  Improve synced blocks robustness.
+- Updated dependencies
+
 ## 5.9.0
 
 ### Minor Changes

package/dist/cjs/ui/SyncedBlockLoadingState.js

@@ -9,13 +9,18 @@ exports.SyncedBlockLoadingState = void 0;
 require("./SyncedBlockLoadingState.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var styles = {
   wrapper: "_1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
 };
 var SyncedBlockLoadingState = exports.SyncedBlockLoadingState = function SyncedBlockLoadingState() {
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides
@@ -25,7 +30,7 @@ var SyncedBlockLoadingState = exports.SyncedBlockLoadingState = function SyncedB
       xcss: styles.wrapper
     }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
       size: "small",
-      label: "Loading synced content"
+      label: (0, _platformFeatureFlags.fg)('platform_synced_block_patch_4') ? formatMessage(_messages.syncBlockMessages.loadingSyncedContent) : 'Loading synced content'
     })))
   );
 };

package/dist/cjs/ui/SyncedBlockNodeComponentRenderer.js

@@ -45,13 +45,15 @@ var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer
     ssrProviders = _useFetchSyncBlockDat.ssrProviders;
   var finalRendererOptions = (0, _react.useMemo)(function () {
     var _rendererOptions$medi, _ssrProviders$media;
-    if (!(0, _coreUtils.isSSR)() || rendererOptions !== null && rendererOptions !== void 0 && (_rendererOptions$medi = rendererOptions.media) !== null && _rendererOptions$medi !== void 0 && _rendererOptions$medi.ssr ||
+    if (!(0, _coreUtils.isSSR)() && !(0, _platformFeatureFlags.fg)('platform_synced_block_patch_4') || rendererOptions !== null && rendererOptions !== void 0 && (_rendererOptions$medi = rendererOptions.media) !== null && _rendererOptions$medi !== void 0 && _rendererOptions$medi.ssr ||
     // already has ssr config
     !(ssrProviders !== null && ssrProviders !== void 0 && (_ssrProviders$media = ssrProviders.media) !== null && _ssrProviders$media !== void 0 && _ssrProviders$media.viewMediaClientConfig)) {
       return rendererOptions;
     }
     var mediaSSR = {
-      mode: 'server',
+      // Use synced block's media config so auth uses source contentId, not current page.
+      // Server: during SSR; client: after hydration (avoids using page's MediaClient).
+      mode: (0, _platformFeatureFlags.fg)('platform_synced_block_patch_4') ? (0, _coreUtils.isSSR)() ? 'server' : 'client' : 'server',
       config: ssrProviders === null || ssrProviders === void 0 ? void 0 : ssrProviders.media.viewMediaClientConfig
     };
     return _objectSpread(_objectSpread({}, rendererOptions), {}, {

package/dist/cjs/ui/SyncedBlockNotFoundError.js

@@ -20,6 +20,7 @@ var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
 var _eyeOpenStrikethrough = _interopRequireDefault(require("@atlaskit/icon/core/eye-open-strikethrough"));
 var _linkBroken = _interopRequireDefault(require("@atlaskit/icon/core/link-broken"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
@@ -48,6 +49,7 @@ var errorMap = {
   }
 };
 var useErrorInfo = function useErrorInfo(reason, url, title) {
+  var _errorMap;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   if (reason === 'source-document-deleted') {
@@ -68,9 +70,9 @@ var useErrorInfo = function useErrorInfo(reason, url, title) {
       icon: _icon2
     };
   }
-  var _errorMap = errorMap[reason || 'generic'],
-    icon = _errorMap.icon,
-    description = _errorMap.description;
+  var _ref = (0, _platformFeatureFlags.fg)('platform_synced_block_patch_4') ? (_errorMap = errorMap[reason || 'generic']) !== null && _errorMap !== void 0 ? _errorMap : errorMap['generic'] : errorMap[reason || 'generic'],
+    icon = _ref.icon,
+    description = _ref.description;
   return {
     description: formatMessage(description, {
       title: title,
@@ -78,6 +80,7 @@ var useErrorInfo = function useErrorInfo(reason, url, title) {
         return /*#__PURE__*/_react.default.createElement(_compiled.Anchor, {
           href: url,
           target: "_blank",
+          rel: (0, _platformFeatureFlags.fg)('platform_synced_block_patch_4') ? 'noopener noreferrer' : undefined,
           xcss: styles.link
         }, chunk);
       }
@@ -85,14 +88,14 @@ var useErrorInfo = function useErrorInfo(reason, url, title) {
     icon: icon
   };
 };
-var SyncedBlockNotFoundError = exports.SyncedBlockNotFoundError = function SyncedBlockNotFoundError(_ref) {
+var SyncedBlockNotFoundError = exports.SyncedBlockNotFoundError = function SyncedBlockNotFoundError(_ref2) {
   var _useSyncBlockActions;
-  var _ref$reason = _ref.reason,
-    reason = _ref$reason === void 0 ? 'source-block-deleted' : _ref$reason,
-    sourceAri = _ref.sourceAri;
-  var _ref2 = (_useSyncBlockActions = (0, _syncBlock.useSyncBlockActions)()) !== null && _useSyncBlockActions !== void 0 ? _useSyncBlockActions : {},
-    deleteSyncBlock = _ref2.deleteSyncBlock,
-    fetchSourceInfo = _ref2.fetchSourceInfo;
+  var _ref2$reason = _ref2.reason,
+    reason = _ref2$reason === void 0 ? 'source-block-deleted' : _ref2$reason,
+    sourceAri = _ref2.sourceAri;
+  var _ref3 = (_useSyncBlockActions = (0, _syncBlock.useSyncBlockActions)()) !== null && _useSyncBlockActions !== void 0 ? _useSyncBlockActions : {},
+    deleteSyncBlock = _ref3.deleteSyncBlock,
+    fetchSourceInfo = _ref3.fetchSourceInfo;
   var _useState = (0, _react.useState)(undefined),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     sourceInfo = _useState2[0],
@@ -107,7 +110,7 @@ var SyncedBlockNotFoundError = exports.SyncedBlockNotFoundError = function Synce
       return;
     }
     var getSourceInfo = /*#__PURE__*/function () {
-      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
         var sourceInfo;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -127,7 +130,7 @@ var SyncedBlockNotFoundError = exports.SyncedBlockNotFoundError = function Synce
         }, _callee);
       }));
       return function getSourceInfo() {
-        return _ref3.apply(this, arguments);
+        return _ref4.apply(this, arguments);
       };
     }();
     getSourceInfo();

package/dist/cjs/ui/SyncedBlockPermissionDenied.js

@@ -19,6 +19,7 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _statusSuccess = _interopRequireDefault(require("@atlaskit/icon/core/status-success"));
 var _image = _interopRequireDefault(require("@atlaskit/image"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _PermissionDenied = _interopRequireDefault(require("./assets/PermissionDenied.svg"));
 var _SyncedBlockGenericError = require("./SyncedBlockGenericError");
@@ -84,7 +85,7 @@ var SyncedBlockPermissionDeniedConfluencePage = function SyncedBlockPermissionDe
   }, /*#__PURE__*/_react.default.createElement(_statusSuccess.default, {
     size: "small",
     color: "var(--ds-icon-subtle, #505258)",
-    label: ""
+    label: (0, _platformFeatureFlags.fg)('platform_synced_block_patch_4') ? formatMessage(_messages.syncBlockMessages.accessRequested) : ''
   }), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     color: "color.text.subtlest",
     weight: "bold",

package/dist/cjs/ui/SyncedBlockRenderer.js

@@ -38,9 +38,10 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
     reloadData = syncBlockFetchResult.reloadData,
     ssrProviders = syncBlockFetchResult.ssrProviders,
     syncBlockInstance = syncBlockFetchResult.syncBlockInstance;
+  var isSSRMode = (0, _coreUtils.isSSR)();
   var rendererOptions = (0, _react.useMemo)(function () {
     var _syncBlockRendererOpt, _ssrProviders$media;
-    if (!(0, _coreUtils.isSSR)() || syncBlockRendererOptions !== null && syncBlockRendererOptions !== void 0 && (_syncBlockRendererOpt = syncBlockRendererOptions.media) !== null && _syncBlockRendererOpt !== void 0 && _syncBlockRendererOpt.ssr ||
+    if (!isSSRMode || syncBlockRendererOptions !== null && syncBlockRendererOptions !== void 0 && (_syncBlockRendererOpt = syncBlockRendererOptions.media) !== null && _syncBlockRendererOpt !== void 0 && _syncBlockRendererOpt.ssr ||
     // already has ssr config
     !(ssrProviders !== null && ssrProviders !== void 0 && (_ssrProviders$media = ssrProviders.media) !== null && _ssrProviders$media !== void 0 && _ssrProviders$media.viewMediaClientConfig)) {
       return syncBlockRendererOptions;
@@ -54,7 +55,7 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
         ssr: mediaSSR
       })
     });
-  }, [syncBlockRendererOptions, ssrProviders]);
+  }, [syncBlockRendererOptions, ssrProviders, isSSRMode]);
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity'], function (_ref2) {
       var connectivityState = _ref2.connectivityState;
       return {
@@ -65,7 +66,7 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
 
   // Show offline error only when collaboration is offline and not in SSR mode
   // In SSR, we should always attempt to render content
-  if (isCollabOffline && !(0, _coreUtils.isSSR)()) {
+  if (isCollabOffline && !isSSRMode) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
       error: {
         type: _editorSyncedBlockProvider.SyncBlockError.Offline
@@ -78,7 +79,7 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
 
   // 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.error) {
+  if (isSSRMode && syncBlockInstance.error) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
   }
   if (syncBlockInstance.error || !syncBlockInstance.data || syncBlockInstance.data.status === 'deleted') {

package/dist/cjs/ui/SyncedBlockUnpublishedError.js

@@ -12,6 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _eyeOpenStrikethrough = _interopRequireDefault(require("@atlaskit/icon/core/eye-open-strikethrough"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
 var styles = {
@@ -26,6 +27,7 @@ var SyncedBlockUnpublishedError = exports.SyncedBlockUnpublishedError = function
       return sourceURL ? /*#__PURE__*/_react.default.createElement(_compiled.Text, null, /*#__PURE__*/_react.default.createElement(_compiled.Anchor, {
         href: sourceURL,
         target: "_blank",
+        rel: (0, _platformFeatureFlags.fg)('platform_synced_block_patch_4') ? 'noopener noreferrer' : undefined,
         xcss: styles.link
       }, chunks)) : chunks;
     }

package/dist/cjs/useSyncedBlockNodeComponent.js

@@ -10,6 +10,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _SyncedBlockNodeComponentRenderer = require("./ui/SyncedBlockNodeComponentRenderer");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var getSyncBlockNodesFromDoc = exports.getSyncBlockNodesFromDoc = function getSyncBlockNodesFromDoc(doc) {
@@ -32,10 +33,18 @@ var useMemoizedSyncedBlockNodeComponent = exports.useMemoizedSyncedBlockNodeComp
 
   // Process prefetched data early, if available
   (0, _react.useEffect)(function () {
-    var prefetchedData;
     if (getPrefetchedData) {
-      prefetchedData = getPrefetchedData();
-      syncBlockStoreManager.referenceManager.processPrefetchedData(prefetchedData);
+      if ((0, _platformFeatureFlags.fg)('platform_synced_block_patch_4')) {
+        try {
+          var prefetchedData = getPrefetchedData();
+          syncBlockStoreManager.referenceManager.processPrefetchedData(prefetchedData);
+        } catch (_unused) {
+          // Silently ignore errors from getPrefetchedData so the fetch effect can still run
+        }
+      } else {
+        var _prefetchedData = getPrefetchedData();
+        syncBlockStoreManager.referenceManager.processPrefetchedData(_prefetchedData);
+      }
     }
   }, [getPrefetchedData, syncBlockStoreManager.referenceManager]);
 

package/dist/es2019/ui/SyncedBlockLoadingState.js

@@ -2,13 +2,19 @@
 import "./SyncedBlockLoadingState.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 const styles = {
   wrapper: "_1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
 };
 export const SyncedBlockLoadingState = () => {
+  const {
+    formatMessage
+  } = useIntl();
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides
@@ -18,7 +24,7 @@ export const SyncedBlockLoadingState = () => {
       xcss: styles.wrapper
     }, /*#__PURE__*/React.createElement(Spinner, {
       size: "small",
-      label: "Loading synced content"
+      label: fg('platform_synced_block_patch_4') ? formatMessage(messages.loadingSyncedContent) : 'Loading synced content'
     })))
   );
 };

package/dist/es2019/ui/SyncedBlockNodeComponentRenderer.js

@@ -36,13 +36,15 @@ export const SyncedBlockNodeComponentRenderer = ({
   } = useFetchSyncBlockData(syncBlockStoreManager, resourceId, localId, fireAnalyticsEvent);
   const finalRendererOptions = useMemo(() => {
     var _rendererOptions$medi, _ssrProviders$media;
-    if (!isSSR() || rendererOptions !== null && rendererOptions !== void 0 && (_rendererOptions$medi = rendererOptions.media) !== null && _rendererOptions$medi !== void 0 && _rendererOptions$medi.ssr ||
+    if (!isSSR() && !fg('platform_synced_block_patch_4') || rendererOptions !== null && rendererOptions !== void 0 && (_rendererOptions$medi = rendererOptions.media) !== null && _rendererOptions$medi !== void 0 && _rendererOptions$medi.ssr ||
     // already has ssr config
     !(ssrProviders !== null && ssrProviders !== void 0 && (_ssrProviders$media = ssrProviders.media) !== null && _ssrProviders$media !== void 0 && _ssrProviders$media.viewMediaClientConfig)) {
       return rendererOptions;
     }
     const mediaSSR = {
-      mode: 'server',
+      // Use synced block's media config so auth uses source contentId, not current page.
+      // Server: during SSR; client: after hydration (avoids using page's MediaClient).
+      mode: fg('platform_synced_block_patch_4') ? isSSR() ? 'server' : 'client' : 'server',
       config: ssrProviders === null || ssrProviders === void 0 ? void 0 : ssrProviders.media.viewMediaClientConfig
     };
     return {

package/dist/es2019/ui/SyncedBlockNotFoundError.js

@@ -9,6 +9,7 @@ import { useSyncBlockActions } from '@atlaskit/editor-common/sync-block';
 import CrossIcon from '@atlaskit/icon/core/cross';
 import EyeOpenStrikethroughIcon from '@atlaskit/icon/core/eye-open-strikethrough';
 import LinkBrokenIcon from '@atlaskit/icon/core/link-broken';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Anchor, Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
@@ -36,6 +37,7 @@ const errorMap = {
   }
 };
 const useErrorInfo = (reason, url, title) => {
+  var _errorMap;
   const {
     formatMessage
   } = useIntl();
@@ -62,13 +64,14 @@ const useErrorInfo = (reason, url, title) => {
   const {
     icon,
     description
-  } = errorMap[reason || 'generic'];
+  } = fg('platform_synced_block_patch_4') ? (_errorMap = errorMap[reason || 'generic']) !== null && _errorMap !== void 0 ? _errorMap : errorMap['generic'] : errorMap[reason || 'generic'];
   return {
     description: formatMessage(description, {
       title,
       a: chunk => /*#__PURE__*/React.createElement(Anchor, {
         href: url,
         target: "_blank",
+        rel: fg('platform_synced_block_patch_4') ? 'noopener noreferrer' : undefined,
         xcss: styles.link
       }, chunk)
     }),

package/dist/es2019/ui/SyncedBlockPermissionDenied.js

@@ -10,6 +10,7 @@ import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages'
 import Heading from '@atlaskit/heading';
 import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
 import Image from '@atlaskit/image';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text, Flex, Stack, Box } from '@atlaskit/primitives/compiled';
 import PermissionDenied from './assets/PermissionDenied.svg';
 import { SyncedBlockGenericError } from './SyncedBlockGenericError';
@@ -71,7 +72,7 @@ const SyncedBlockPermissionDeniedConfluencePage = ({
   }, /*#__PURE__*/React.createElement(StatusSuccessIcon, {
     size: "small",
     color: "var(--ds-icon-subtle, #505258)",
-    label: ""
+    label: fg('platform_synced_block_patch_4') ? formatMessage(messages.accessRequested) : ''
   }), /*#__PURE__*/React.createElement(Text, {
     color: "color.text.subtlest",
     weight: "bold",

package/dist/es2019/ui/SyncedBlockRenderer.js

@@ -29,9 +29,10 @@ const SyncedBlockRendererComponent = ({
     ssrProviders,
     syncBlockInstance
   } = syncBlockFetchResult;
+  const isSSRMode = isSSR();
   const rendererOptions = useMemo(() => {
     var _syncBlockRendererOpt, _ssrProviders$media;
-    if (!isSSR() || syncBlockRendererOptions !== null && syncBlockRendererOptions !== void 0 && (_syncBlockRendererOpt = syncBlockRendererOptions.media) !== null && _syncBlockRendererOpt !== void 0 && _syncBlockRendererOpt.ssr ||
+    if (!isSSRMode || syncBlockRendererOptions !== null && syncBlockRendererOptions !== void 0 && (_syncBlockRendererOpt = syncBlockRendererOptions.media) !== null && _syncBlockRendererOpt !== void 0 && _syncBlockRendererOpt.ssr ||
     // already has ssr config
     !(ssrProviders !== null && ssrProviders !== void 0 && (_ssrProviders$media = ssrProviders.media) !== null && _ssrProviders$media !== void 0 && _ssrProviders$media.viewMediaClientConfig)) {
       return syncBlockRendererOptions;
@@ -47,7 +48,7 @@ const SyncedBlockRendererComponent = ({
         ssr: mediaSSR
       }
     };
-  }, [syncBlockRendererOptions, ssrProviders]);
+  }, [syncBlockRendererOptions, ssrProviders, isSSRMode]);
   const {
     isCollabOffline
   } = useSharedPluginStateWithSelector(api, ['connectivity'], ({
@@ -58,7 +59,7 @@ const SyncedBlockRendererComponent = ({
 
   // Show offline error only when collaboration is offline and not in SSR mode
   // In SSR, we should always attempt to render content
-  if (isCollabOffline && !isSSR()) {
+  if (isCollabOffline && !isSSRMode) {
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
       error: {
         type: SyncBlockError.Offline
@@ -71,7 +72,7 @@ const SyncedBlockRendererComponent = ({
 
   // 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.error) {
+  if (isSSRMode && syncBlockInstance.error) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
   if (syncBlockInstance.error || !syncBlockInstance.data || syncBlockInstance.data.status === 'deleted') {

package/dist/es2019/ui/SyncedBlockUnpublishedError.js

@@ -5,6 +5,7 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import EyeOpenStrikethroughIcon from '@atlaskit/icon/core/eye-open-strikethrough';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Anchor, Text } from '@atlaskit/primitives/compiled';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
 const styles = {
@@ -20,6 +21,7 @@ export const SyncedBlockUnpublishedError = ({
     link: chunks => sourceURL ? /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(Anchor, {
       href: sourceURL,
       target: "_blank",
+      rel: fg('platform_synced_block_patch_4') ? 'noopener noreferrer' : undefined,
       xcss: styles.link
     }, chunks)) : chunks
   });

package/dist/es2019/useSyncedBlockNodeComponent.js

@@ -3,6 +3,7 @@ import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { SyncBlockActionsProvider } from '@atlaskit/editor-common/sync-block';
 import { convertSyncBlockJSONNodeToSyncBlockNode, useMemoizedSyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SyncedBlockNodeComponentRenderer } from './ui/SyncedBlockNodeComponentRenderer';
 export const getSyncBlockNodesFromDoc = doc => {
   const {
@@ -23,10 +24,18 @@ export const useMemoizedSyncedBlockNodeComponent = ({
 
   // Process prefetched data early, if available
   useEffect(() => {
-    let prefetchedData;
     if (getPrefetchedData) {
-      prefetchedData = getPrefetchedData();
-      syncBlockStoreManager.referenceManager.processPrefetchedData(prefetchedData);
+      if (fg('platform_synced_block_patch_4')) {
+        try {
+          const prefetchedData = getPrefetchedData();
+          syncBlockStoreManager.referenceManager.processPrefetchedData(prefetchedData);
+        } catch {
+          // Silently ignore errors from getPrefetchedData so the fetch effect can still run
+        }
+      } else {
+        const prefetchedData = getPrefetchedData();
+        syncBlockStoreManager.referenceManager.processPrefetchedData(prefetchedData);
+      }
     }
   }, [getPrefetchedData, syncBlockStoreManager.referenceManager]);
 

package/dist/esm/ui/SyncedBlockLoadingState.js

@@ -2,13 +2,18 @@
 import "./SyncedBlockLoadingState.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 var styles = {
   wrapper: "_1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
 };
 export var SyncedBlockLoadingState = function SyncedBlockLoadingState() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides
@@ -18,7 +23,7 @@ export var SyncedBlockLoadingState = function SyncedBlockLoadingState() {
       xcss: styles.wrapper
     }, /*#__PURE__*/React.createElement(Spinner, {
       size: "small",
-      label: "Loading synced content"
+      label: fg('platform_synced_block_patch_4') ? formatMessage(messages.loadingSyncedContent) : 'Loading synced content'
     })))
   );
 };

package/dist/esm/ui/SyncedBlockNodeComponentRenderer.js

@@ -36,13 +36,15 @@ export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentR
     ssrProviders = _useFetchSyncBlockDat.ssrProviders;
   var finalRendererOptions = useMemo(function () {
     var _rendererOptions$medi, _ssrProviders$media;
-    if (!isSSR() || rendererOptions !== null && rendererOptions !== void 0 && (_rendererOptions$medi = rendererOptions.media) !== null && _rendererOptions$medi !== void 0 && _rendererOptions$medi.ssr ||
+    if (!isSSR() && !fg('platform_synced_block_patch_4') || rendererOptions !== null && rendererOptions !== void 0 && (_rendererOptions$medi = rendererOptions.media) !== null && _rendererOptions$medi !== void 0 && _rendererOptions$medi.ssr ||
     // already has ssr config
     !(ssrProviders !== null && ssrProviders !== void 0 && (_ssrProviders$media = ssrProviders.media) !== null && _ssrProviders$media !== void 0 && _ssrProviders$media.viewMediaClientConfig)) {
       return rendererOptions;
     }
     var mediaSSR = {
-      mode: 'server',
+      // Use synced block's media config so auth uses source contentId, not current page.
+      // Server: during SSR; client: after hydration (avoids using page's MediaClient).
+      mode: fg('platform_synced_block_patch_4') ? isSSR() ? 'server' : 'client' : 'server',
       config: ssrProviders === null || ssrProviders === void 0 ? void 0 : ssrProviders.media.viewMediaClientConfig
     };
     return _objectSpread(_objectSpread({}, rendererOptions), {}, {

package/dist/esm/ui/SyncedBlockNotFoundError.js

@@ -12,6 +12,7 @@ import { useSyncBlockActions } from '@atlaskit/editor-common/sync-block';
 import CrossIcon from '@atlaskit/icon/core/cross';
 import EyeOpenStrikethroughIcon from '@atlaskit/icon/core/eye-open-strikethrough';
 import LinkBrokenIcon from '@atlaskit/icon/core/link-broken';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Anchor, Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
@@ -39,6 +40,7 @@ var errorMap = {
   }
 };
 var useErrorInfo = function useErrorInfo(reason, url, title) {
+  var _errorMap;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   if (reason === 'source-document-deleted') {
@@ -59,9 +61,9 @@ var useErrorInfo = function useErrorInfo(reason, url, title) {
       icon: _icon2
     };
   }
-  var _errorMap = errorMap[reason || 'generic'],
-    icon = _errorMap.icon,
-    description = _errorMap.description;
+  var _ref = fg('platform_synced_block_patch_4') ? (_errorMap = errorMap[reason || 'generic']) !== null && _errorMap !== void 0 ? _errorMap : errorMap['generic'] : errorMap[reason || 'generic'],
+    icon = _ref.icon,
+    description = _ref.description;
   return {
     description: formatMessage(description, {
       title: title,
@@ -69,6 +71,7 @@ var useErrorInfo = function useErrorInfo(reason, url, title) {
         return /*#__PURE__*/React.createElement(Anchor, {
           href: url,
           target: "_blank",
+          rel: fg('platform_synced_block_patch_4') ? 'noopener noreferrer' : undefined,
           xcss: styles.link
         }, chunk);
       }
@@ -76,14 +79,14 @@ var useErrorInfo = function useErrorInfo(reason, url, title) {
     icon: icon
   };
 };
-export var SyncedBlockNotFoundError = function SyncedBlockNotFoundError(_ref) {
+export var SyncedBlockNotFoundError = function SyncedBlockNotFoundError(_ref2) {
   var _useSyncBlockActions;
-  var _ref$reason = _ref.reason,
-    reason = _ref$reason === void 0 ? 'source-block-deleted' : _ref$reason,
-    sourceAri = _ref.sourceAri;
-  var _ref2 = (_useSyncBlockActions = useSyncBlockActions()) !== null && _useSyncBlockActions !== void 0 ? _useSyncBlockActions : {},
-    deleteSyncBlock = _ref2.deleteSyncBlock,
-    fetchSourceInfo = _ref2.fetchSourceInfo;
+  var _ref2$reason = _ref2.reason,
+    reason = _ref2$reason === void 0 ? 'source-block-deleted' : _ref2$reason,
+    sourceAri = _ref2.sourceAri;
+  var _ref3 = (_useSyncBlockActions = useSyncBlockActions()) !== null && _useSyncBlockActions !== void 0 ? _useSyncBlockActions : {},
+    deleteSyncBlock = _ref3.deleteSyncBlock,
+    fetchSourceInfo = _ref3.fetchSourceInfo;
   var _useState = useState(undefined),
     _useState2 = _slicedToArray(_useState, 2),
     sourceInfo = _useState2[0],
@@ -98,7 +101,7 @@ export var SyncedBlockNotFoundError = function SyncedBlockNotFoundError(_ref) {
       return;
     }
     var getSourceInfo = /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
         var sourceInfo;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -118,7 +121,7 @@ export var SyncedBlockNotFoundError = function SyncedBlockNotFoundError(_ref) {
         }, _callee);
       }));
       return function getSourceInfo() {
-        return _ref3.apply(this, arguments);
+        return _ref4.apply(this, arguments);
       };
     }();
     getSourceInfo();

package/dist/esm/ui/SyncedBlockPermissionDenied.js

@@ -11,6 +11,7 @@ import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages'
 import Heading from '@atlaskit/heading';
 import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
 import Image from '@atlaskit/image';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text, Flex, Stack, Box } from '@atlaskit/primitives/compiled';
 import PermissionDenied from './assets/PermissionDenied.svg';
 import { SyncedBlockGenericError } from './SyncedBlockGenericError';
@@ -75,7 +76,7 @@ var SyncedBlockPermissionDeniedConfluencePage = function SyncedBlockPermissionDe
   }, /*#__PURE__*/React.createElement(StatusSuccessIcon, {
     size: "small",
     color: "var(--ds-icon-subtle, #505258)",
-    label: ""
+    label: fg('platform_synced_block_patch_4') ? formatMessage(messages.accessRequested) : ''
   }), /*#__PURE__*/React.createElement(Text, {
     color: "color.text.subtlest",
     weight: "bold",

package/dist/esm/ui/SyncedBlockRenderer.js

@@ -29,9 +29,10 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
     reloadData = syncBlockFetchResult.reloadData,
     ssrProviders = syncBlockFetchResult.ssrProviders,
     syncBlockInstance = syncBlockFetchResult.syncBlockInstance;
+  var isSSRMode = isSSR();
   var rendererOptions = useMemo(function () {
     var _syncBlockRendererOpt, _ssrProviders$media;
-    if (!isSSR() || syncBlockRendererOptions !== null && syncBlockRendererOptions !== void 0 && (_syncBlockRendererOpt = syncBlockRendererOptions.media) !== null && _syncBlockRendererOpt !== void 0 && _syncBlockRendererOpt.ssr ||
+    if (!isSSRMode || syncBlockRendererOptions !== null && syncBlockRendererOptions !== void 0 && (_syncBlockRendererOpt = syncBlockRendererOptions.media) !== null && _syncBlockRendererOpt !== void 0 && _syncBlockRendererOpt.ssr ||
     // already has ssr config
     !(ssrProviders !== null && ssrProviders !== void 0 && (_ssrProviders$media = ssrProviders.media) !== null && _ssrProviders$media !== void 0 && _ssrProviders$media.viewMediaClientConfig)) {
       return syncBlockRendererOptions;
@@ -45,7 +46,7 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
         ssr: mediaSSR
       })
     });
-  }, [syncBlockRendererOptions, ssrProviders]);
+  }, [syncBlockRendererOptions, ssrProviders, isSSRMode]);
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['connectivity'], function (_ref2) {
       var connectivityState = _ref2.connectivityState;
       return {
@@ -56,7 +57,7 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
 
   // Show offline error only when collaboration is offline and not in SSR mode
   // In SSR, we should always attempt to render content
-  if (isCollabOffline && !isSSR()) {
+  if (isCollabOffline && !isSSRMode) {
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
       error: {
         type: SyncBlockError.Offline
@@ -69,7 +70,7 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
 
   // 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.error) {
+  if (isSSRMode && syncBlockInstance.error) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
   if (syncBlockInstance.error || !syncBlockInstance.data || syncBlockInstance.data.status === 'deleted') {

package/dist/esm/ui/SyncedBlockUnpublishedError.js

@@ -5,6 +5,7 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import EyeOpenStrikethroughIcon from '@atlaskit/icon/core/eye-open-strikethrough';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Anchor, Text } from '@atlaskit/primitives/compiled';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
 var styles = {
@@ -19,6 +20,7 @@ export var SyncedBlockUnpublishedError = function SyncedBlockUnpublishedError(_r
       return sourceURL ? /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(Anchor, {
         href: sourceURL,
         target: "_blank",
+        rel: fg('platform_synced_block_patch_4') ? 'noopener noreferrer' : undefined,
         xcss: styles.link
       }, chunks)) : chunks;
     }

package/dist/esm/useSyncedBlockNodeComponent.js

@@ -3,6 +3,7 @@ import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { SyncBlockActionsProvider } from '@atlaskit/editor-common/sync-block';
 import { convertSyncBlockJSONNodeToSyncBlockNode, useMemoizedSyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SyncedBlockNodeComponentRenderer } from './ui/SyncedBlockNodeComponentRenderer';
 export var getSyncBlockNodesFromDoc = function getSyncBlockNodesFromDoc(doc) {
   var content = doc.content;
@@ -24,10 +25,18 @@ export var useMemoizedSyncedBlockNodeComponent = function useMemoizedSyncedBlock
 
   // Process prefetched data early, if available
   useEffect(function () {
-    var prefetchedData;
     if (getPrefetchedData) {
-      prefetchedData = getPrefetchedData();
-      syncBlockStoreManager.referenceManager.processPrefetchedData(prefetchedData);
+      if (fg('platform_synced_block_patch_4')) {
+        try {
+          var prefetchedData = getPrefetchedData();
+          syncBlockStoreManager.referenceManager.processPrefetchedData(prefetchedData);
+        } catch (_unused) {
+          // Silently ignore errors from getPrefetchedData so the fetch effect can still run
+        }
+      } else {
+        var _prefetchedData = getPrefetchedData();
+        syncBlockStoreManager.referenceManager.processPrefetchedData(_prefetchedData);
+      }
     }
   }, [getPrefetchedData, syncBlockStoreManager.referenceManager]);
 

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

@@ -1,8 +1,7 @@
 import React from 'react';
-interface SyncedBlockNotFoundProps {
-    contentId?: string;
+interface SyncedBlockLoadErrorProps {
     isLoading?: boolean;
     onRetry?: () => void;
 }
-export declare const SyncedBlockLoadError: ({ onRetry, isLoading, }: SyncedBlockNotFoundProps) => React.JSX.Element;
+export declare const SyncedBlockLoadError: ({ onRetry, isLoading, }: SyncedBlockLoadErrorProps) => React.JSX.Element;
 export {};

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

@@ -1,8 +1,7 @@
 import React from 'react';
-interface SyncedBlockNotFoundProps {
-    contentId?: string;
+interface SyncedBlockLoadErrorProps {
     isLoading?: boolean;
     onRetry?: () => void;
 }
-export declare const SyncedBlockLoadError: ({ onRetry, isLoading, }: SyncedBlockNotFoundProps) => React.JSX.Element;
+export declare const SyncedBlockLoadError: ({ onRetry, isLoading, }: SyncedBlockLoadErrorProps) => React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-synced-block-renderer",
-	"version": "5.9.0",
+	"version": "5.9.2",
 	"description": "SyncedBlockRenderer for @atlaskit/editor-plugin-synced-block",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,14 +31,14 @@
 		"@atlaskit/button": "^23.9.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/editor-plugin-synced-block": "^5.3.0",
-		"@atlaskit/editor-synced-block-provider": "^3.30.0",
+		"@atlaskit/editor-synced-block-provider": "^3.31.0",
 		"@atlaskit/heading": "^5.3.0",
 		"@atlaskit/icon": "^31.0.0",
 		"@atlaskit/icon-lab": "^5.16.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^18.0.0",
-		"@atlaskit/renderer": "^126.11.0",
+		"@atlaskit/renderer": "^126.12.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@atlaskit/tooltip": "^20.14.0",
@@ -48,7 +48,7 @@
 		"relay-runtime": "npm:atl-relay-runtime@0.0.0-main-39e79f66"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.18.0",
+		"@atlaskit/editor-common": "^111.20.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
@@ -91,6 +91,9 @@
 	"platform-feature-flags": {
 		"platform_synced_block_patch_3": {
 			"type": "boolean"
+		},
+		"platform_synced_block_patch_4": {
+			"type": "boolean"
 		}
 	}
 }