@atlaskit/editor-synced-block-renderer 3.0.1 → 3.1.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-synced-block-renderer
 
+## 3.1.1
+
+### Patch Changes
+
+- [`aa14795cecd60`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/aa14795cecd60) -
+  EDITOR-2350 Pass media options to sync block nested renderer.
+- Updated dependencies
+
+## 3.1.0
+
+### Minor Changes
+
+- [`261fa27c56fd0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/261fa27c56fd0) -
+  EDITOR-2533 implement retry function for sync-block renderer
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.0.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -24,6 +24,9 @@
 		{
 			"path": "../../../design-system/css/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-synced-block/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-synced-block-provider/afm-cc/tsconfig.json"
 		},

package/dist/cjs/getSyncedBlockNodeComponent.js

@@ -1,24 +1,36 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSyncedBlockNodeComponent = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _SyncedBlockNodeComponentRenderer = require("./ui/SyncedBlockNodeComponentRenderer");
-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 getSyncedBlockNodeComponent = exports.getSyncedBlockNodeComponent = function getSyncedBlockNodeComponent(dataProvider, doc) {
+var getSyncBlockNodesFromContent = function getSyncBlockNodesFromContent(content) {
+  return content.map(function (node) {
+    return (0, _editorSyncedBlockProvider.convertSyncBlockJSONNodeToSyncBlockNode)(node);
+  }).filter(function (node) {
+    return node !== undefined;
+  });
+};
+
+// For rendering reference synced block nodes in Renderer
+var getSyncedBlockNodeComponent = exports.getSyncedBlockNodeComponent = function getSyncedBlockNodeComponent(_ref) {
+  var doc = _ref.doc,
+    syncBlockProvider = _ref.syncBlockProvider,
+    syncBlockRendererOptions = _ref.syncBlockRendererOptions;
   var content = doc.content;
   var isEmpty = !content || !Array.isArray(content) || content.length === 0;
-  var syncBlockNodes = isEmpty ? [] : content.filter(function (node) {
-    return node.type === 'syncBlock';
-  });
-  var dataPromise = dataProvider.fetchNodesData(syncBlockNodes);
+  var syncBlockNodes = isEmpty ? [] : getSyncBlockNodesFromContent(content);
+  var syncBlockStoreManager = new _editorSyncedBlockProvider.SyncBlockStoreManager(syncBlockProvider);
+
+  // Pre-fetch sync block data
+  syncBlockStoreManager.getReferenceSyncBlockStoreManager().fetchSyncBlocksData(syncBlockNodes);
   return function (props) {
-    return (0, _SyncedBlockNodeComponentRenderer.SyncedBlockNodeComponentRenderer)(_objectSpread(_objectSpread({}, props), {}, {
-      dataPromise: dataPromise
-    }));
+    return (0, _SyncedBlockNodeComponentRenderer.SyncedBlockNodeComponentRenderer)({
+      nodeProps: props,
+      syncBlockStoreManager: syncBlockStoreManager,
+      rendererOptions: syncBlockRendererOptions
+    });
   };
 };

package/dist/cjs/getSyncedBlockRenderer.js

@@ -7,11 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.getSyncedBlockRenderer = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _SyncedBlockRenderer = require("./ui/SyncedBlockRenderer");
+// For rendering reference synced block nodes in Editor
 var getSyncedBlockRenderer = exports.getSyncedBlockRenderer = function getSyncedBlockRenderer(_ref) {
   var syncBlockRendererDataProviders = _ref.syncBlockRendererDataProviders,
-    useFetchSyncBlockData = _ref.useFetchSyncBlockData;
-  return /*#__PURE__*/_react.default.createElement(_SyncedBlockRenderer.SyncedBlockRenderer, {
-    syncBlockRendererDataProviders: syncBlockRendererDataProviders,
-    useFetchSyncBlockData: useFetchSyncBlockData
-  });
+    syncBlockRendererOptions = _ref.syncBlockRendererOptions;
+  return function (_ref2) {
+    var useFetchSyncBlockData = _ref2.useFetchSyncBlockData;
+    return /*#__PURE__*/_react.default.createElement(_SyncedBlockRenderer.SyncedBlockRenderer, {
+      syncBlockRendererOptions: syncBlockRendererOptions,
+      syncBlockRendererDataProviders: syncBlockRendererDataProviders,
+      useFetchSyncBlockData: useFetchSyncBlockData
+    });
+  };
 };

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/SyncedBlockNodeComponentRenderer.js

@@ -1,63 +1,82 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SyncedBlockNodeComponentRenderer = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _renderer = require("@atlaskit/renderer");
 var _actions = require("@atlaskit/renderer/actions");
 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); }
-var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentRenderer(props) {
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    data = _useState2[0],
-    setData = _useState2[1];
-  (0, _react.useEffect)(function () {
-    if (!props.dataPromise) {
-      return;
-    }
-    if (data) {
-      return;
-    }
-    props.dataPromise.then(function (data) {
-      setData(data);
-    });
-  }, [props.dataPromise, data]);
-  if (!data) {
+var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentRenderer(_ref) {
+  var nodeProps = _ref.nodeProps,
+    syncBlockStoreManager = _ref.syncBlockStoreManager,
+    rendererOptions = _ref.rendererOptions;
+  var resourceId = nodeProps.resourceId,
+    localId = nodeProps.localId,
+    providers = nodeProps.providers;
+  var _ref2 = rendererOptions !== null && rendererOptions !== void 0 ? rendererOptions : {},
+    allowAltTextOnImages = _ref2.allowAltTextOnImages,
+    allowAnnotations = _ref2.allowAnnotations,
+    allowColumnSorting = _ref2.allowColumnSorting,
+    allowCopyToClipboard = _ref2.allowCopyToClipboard,
+    allowCustomPanels = _ref2.allowCustomPanels,
+    allowHeadingAnchorLinks = _ref2.allowHeadingAnchorLinks,
+    allowPlaceholderText = _ref2.allowPlaceholderText,
+    allowRendererContainerStyles = _ref2.allowRendererContainerStyles,
+    allowSelectAllTrap = _ref2.allowSelectAllTrap,
+    allowUgcScrubber = _ref2.allowUgcScrubber,
+    allowWrapCodeBlock = _ref2.allowWrapCodeBlock,
+    emojiResourceConfig = _ref2.emojiResourceConfig,
+    media = _ref2.media,
+    smartLinks = _ref2.smartLinks,
+    stickyHeaders = _ref2.stickyHeaders;
+  var _useFetchSyncBlockDat = (0, _editorSyncedBlockProvider.useFetchSyncBlockData)(syncBlockStoreManager, resourceId, localId),
+    syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance,
+    isLoading = _useFetchSyncBlockDat.isLoading;
+  if (isLoading && !syncBlockInstance) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
   }
-  var fetchResult = data.find(function (item) {
-    return item.resourceId === props.resourceId;
-  });
-  if (fetchResult !== null && fetchResult !== void 0 && fetchResult.error || !(fetchResult !== null && fetchResult !== void 0 && fetchResult.data)) {
-    var _fetchResult$error;
+  if (syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data)) {
+    var _syncBlockInstance$er;
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
-      error: (_fetchResult$error = fetchResult === null || fetchResult === void 0 ? void 0 : fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : _editorSyncedBlockProvider.SyncBlockError.Errored,
-      resourceId: props.resourceId
+      error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : _editorSyncedBlockProvider.SyncBlockError.Errored,
+      resourceId: resourceId
     });
   }
   var syncBlockDoc = {
-    content: fetchResult.data.content,
+    content: syncBlockInstance.data.content,
     version: 1,
     type: 'doc'
   };
   return /*#__PURE__*/_react.default.createElement(_actions.RendererActionsContext, null, /*#__PURE__*/_react.default.createElement("div", {
     "data-sync-block": true,
     "data-testid": "sync-block-renderer-wrapper",
-    "data-resource-id": props.resourceId,
-    "data-local-id": props.localId
+    "data-resource-id": resourceId,
+    "data-local-id": localId
   }, /*#__PURE__*/_react.default.createElement(_renderer.ReactRenderer, {
     appearance: "full-width",
     adfStage: "stage0",
     document: syncBlockDoc,
     disableHeadingIDs: true,
-    dataProviders: props.providers
+    dataProviders: providers,
+    allowAltTextOnImages: allowAltTextOnImages,
+    allowAnnotations: allowAnnotations,
+    allowColumnSorting: allowColumnSorting,
+    allowCopyToClipboard: allowCopyToClipboard,
+    allowCustomPanels: allowCustomPanels,
+    allowHeadingAnchorLinks: allowHeadingAnchorLinks,
+    allowPlaceholderText: allowPlaceholderText,
+    allowRendererContainerStyles: allowRendererContainerStyles,
+    allowSelectAllTrap: allowSelectAllTrap,
+    allowUgcScrubber: allowUgcScrubber,
+    allowWrapCodeBlock: allowWrapCodeBlock,
+    emojiResourceConfig: emojiResourceConfig,
+    media: media,
+    smartLinks: smartLinks,
+    stickyHeaders: stickyHeaders
   })));
 };

package/dist/cjs/ui/SyncedBlockRenderer.js

@@ -25,7 +25,8 @@ var convertSyncBlockRendererDataProvidersToProviderFactory = exports.convertSync
 };
 var SyncedBlockRendererWrapper = function SyncedBlockRendererWrapper(_ref) {
   var fetchedData = _ref.fetchedData,
-    providerFactory = _ref.providerFactory;
+    providerFactory = _ref.providerFactory,
+    options = _ref.options;
   var syncBlockDoc = (0, _react.useMemo)(function () {
     var _fetchedData$content;
     return {
@@ -34,6 +35,22 @@ var SyncedBlockRendererWrapper = function SyncedBlockRendererWrapper(_ref) {
       type: 'doc'
     };
   }, [fetchedData]);
+  var _ref2 = options !== null && options !== void 0 ? options : {},
+    allowAltTextOnImages = _ref2.allowAltTextOnImages,
+    allowAnnotations = _ref2.allowAnnotations,
+    allowColumnSorting = _ref2.allowColumnSorting,
+    allowCopyToClipboard = _ref2.allowCopyToClipboard,
+    allowCustomPanels = _ref2.allowCustomPanels,
+    allowHeadingAnchorLinks = _ref2.allowHeadingAnchorLinks,
+    allowPlaceholderText = _ref2.allowPlaceholderText,
+    allowRendererContainerStyles = _ref2.allowRendererContainerStyles,
+    allowSelectAllTrap = _ref2.allowSelectAllTrap,
+    allowUgcScrubber = _ref2.allowUgcScrubber,
+    allowWrapCodeBlock = _ref2.allowWrapCodeBlock,
+    emojiResourceConfig = _ref2.emojiResourceConfig,
+    media = _ref2.media,
+    smartLinks = _ref2.smartLinks,
+    stickyHeaders = _ref2.stickyHeaders;
   return /*#__PURE__*/_react.default.createElement(_actions.RendererActionsContext, null, /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "sync-block-renderer-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_renderer.ReactRenderer, {
@@ -41,29 +58,47 @@ var SyncedBlockRendererWrapper = function SyncedBlockRendererWrapper(_ref) {
     adfStage: "stage0",
     document: syncBlockDoc,
     disableHeadingIDs: true,
-    dataProviders: providerFactory
+    dataProviders: providerFactory,
+    allowAltTextOnImages: allowAltTextOnImages,
+    allowAnnotations: allowAnnotations,
+    allowColumnSorting: allowColumnSorting,
+    allowCopyToClipboard: allowCopyToClipboard,
+    allowCustomPanels: allowCustomPanels,
+    allowHeadingAnchorLinks: allowHeadingAnchorLinks,
+    allowPlaceholderText: allowPlaceholderText,
+    allowRendererContainerStyles: allowRendererContainerStyles,
+    allowSelectAllTrap: allowSelectAllTrap,
+    allowUgcScrubber: allowUgcScrubber,
+    allowWrapCodeBlock: allowWrapCodeBlock,
+    emojiResourceConfig: emojiResourceConfig,
+    media: media,
+    smartLinks: smartLinks,
+    stickyHeaders: stickyHeaders
   })));
 };
-var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref2) {
-  var useFetchSyncBlockData = _ref2.useFetchSyncBlockData,
-    syncBlockRendererDataProviders = _ref2.syncBlockRendererDataProviders;
-  var fetchResult = useFetchSyncBlockData();
+var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref3) {
+  var useFetchSyncBlockData = _ref3.useFetchSyncBlockData,
+    syncBlockRendererDataProviders = _ref3.syncBlockRendererDataProviders,
+    syncBlockRendererOptions = _ref3.syncBlockRendererOptions;
+  var _useFetchSyncBlockDat = useFetchSyncBlockData(),
+    syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance;
   var providerFactory = (0, _react.useMemo)(function () {
     return convertSyncBlockRendererDataProvidersToProviderFactory(syncBlockRendererDataProviders);
   }, [syncBlockRendererDataProviders]);
-  if (!fetchResult) {
+  if (!syncBlockInstance) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
   }
-  if (fetchResult.error || !fetchResult.data) {
-    var _fetchResult$error;
+  if (syncBlockInstance.error || !syncBlockInstance.data) {
+    var _syncBlockInstance$er;
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
-      error: (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : _editorSyncedBlockProvider.SyncBlockError.Errored,
-      resourceId: fetchResult.resourceId
+      error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : _editorSyncedBlockProvider.SyncBlockError.Errored,
+      resourceId: syncBlockInstance.resourceId
     });
   }
   return /*#__PURE__*/_react.default.createElement(SyncedBlockRendererWrapper, {
-    fetchedData: fetchResult.data,
-    providerFactory: providerFactory
+    fetchedData: syncBlockInstance.data,
+    providerFactory: providerFactory,
+    options: syncBlockRendererOptions
   });
 };
 var SyncedBlockRenderer = exports.SyncedBlockRenderer = /*#__PURE__*/(0, _react.memo)(SyncedBlockRendererComponent);

package/dist/es2019/getSyncedBlockNodeComponent.js

@@ -1,13 +1,27 @@
+import { convertSyncBlockJSONNodeToSyncBlockNode, SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import { SyncedBlockNodeComponentRenderer } from './ui/SyncedBlockNodeComponentRenderer';
-export const getSyncedBlockNodeComponent = (dataProvider, doc) => {
+const getSyncBlockNodesFromContent = content => {
+  return content.map(node => convertSyncBlockJSONNodeToSyncBlockNode(node)).filter(node => node !== undefined);
+};
+
+// For rendering reference synced block nodes in Renderer
+export const getSyncedBlockNodeComponent = ({
+  doc,
+  syncBlockProvider,
+  syncBlockRendererOptions
+}) => {
   const {
     content
   } = doc;
   const isEmpty = !content || !Array.isArray(content) || content.length === 0;
-  const syncBlockNodes = isEmpty ? [] : content.filter(node => node.type === 'syncBlock');
-  const dataPromise = dataProvider.fetchNodesData(syncBlockNodes);
+  const syncBlockNodes = isEmpty ? [] : getSyncBlockNodesFromContent(content);
+  const syncBlockStoreManager = new SyncBlockStoreManager(syncBlockProvider);
+
+  // Pre-fetch sync block data
+  syncBlockStoreManager.getReferenceSyncBlockStoreManager().fetchSyncBlocksData(syncBlockNodes);
   return props => SyncedBlockNodeComponentRenderer({
-    ...props,
-    dataPromise
+    nodeProps: props,
+    syncBlockStoreManager,
+    rendererOptions: syncBlockRendererOptions
   });
 };

package/dist/es2019/getSyncedBlockRenderer.js

@@ -1,10 +1,14 @@
 import React from 'react';
 import { SyncedBlockRenderer } from './ui/SyncedBlockRenderer';
+// For rendering reference synced block nodes in Editor
 export const getSyncedBlockRenderer = ({
   syncBlockRendererDataProviders,
+  syncBlockRendererOptions
+}) => ({
   useFetchSyncBlockData
 }) => {
   return /*#__PURE__*/React.createElement(SyncedBlockRenderer, {
+    syncBlockRendererOptions: syncBlockRendererOptions,
     syncBlockRendererDataProviders: syncBlockRendererDataProviders,
     useFetchSyncBlockData: useFetchSyncBlockData
   });

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/SyncedBlockNodeComponentRenderer.js

@@ -1,48 +1,80 @@
-import React, { useEffect, useState } from 'react';
-import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
+import React from 'react';
+import { SyncBlockError, useFetchSyncBlockData } from '@atlaskit/editor-synced-block-provider';
 import { ReactRenderer } from '@atlaskit/renderer';
 import { RendererActionsContext } from '@atlaskit/renderer/actions';
 import { SyncedBlockErrorComponent } from './SyncedBlockErrorComponent';
 import { SyncedBlockLoadingState } from './SyncedBlockLoadingState';
-export const SyncedBlockNodeComponentRenderer = props => {
-  const [data, setData] = useState(null);
-  useEffect(() => {
-    if (!props.dataPromise) {
-      return;
-    }
-    if (data) {
-      return;
-    }
-    props.dataPromise.then(data => {
-      setData(data);
-    });
-  }, [props.dataPromise, data]);
-  if (!data) {
+export const SyncedBlockNodeComponentRenderer = ({
+  nodeProps,
+  syncBlockStoreManager,
+  rendererOptions
+}) => {
+  const {
+    resourceId,
+    localId,
+    providers
+  } = nodeProps;
+  const {
+    allowAltTextOnImages,
+    allowAnnotations,
+    allowColumnSorting,
+    allowCopyToClipboard,
+    allowCustomPanels,
+    allowHeadingAnchorLinks,
+    allowPlaceholderText,
+    allowRendererContainerStyles,
+    allowSelectAllTrap,
+    allowUgcScrubber,
+    allowWrapCodeBlock,
+    emojiResourceConfig,
+    media,
+    smartLinks,
+    stickyHeaders
+  } = rendererOptions !== null && rendererOptions !== void 0 ? rendererOptions : {};
+  const {
+    syncBlockInstance,
+    isLoading
+  } = useFetchSyncBlockData(syncBlockStoreManager, resourceId, localId);
+  if (isLoading && !syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
-  const fetchResult = data.find(item => item.resourceId === props.resourceId);
-  if (fetchResult !== null && fetchResult !== void 0 && fetchResult.error || !(fetchResult !== null && fetchResult !== void 0 && fetchResult.data)) {
-    var _fetchResult$error;
+  if (syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data)) {
+    var _syncBlockInstance$er;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: (_fetchResult$error = fetchResult === null || fetchResult === void 0 ? void 0 : fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored,
-      resourceId: props.resourceId
+      error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : SyncBlockError.Errored,
+      resourceId: resourceId
     });
   }
   const syncBlockDoc = {
-    content: fetchResult.data.content,
+    content: syncBlockInstance.data.content,
     version: 1,
     type: 'doc'
   };
   return /*#__PURE__*/React.createElement(RendererActionsContext, null, /*#__PURE__*/React.createElement("div", {
     "data-sync-block": true,
     "data-testid": "sync-block-renderer-wrapper",
-    "data-resource-id": props.resourceId,
-    "data-local-id": props.localId
+    "data-resource-id": resourceId,
+    "data-local-id": localId
   }, /*#__PURE__*/React.createElement(ReactRenderer, {
     appearance: "full-width",
     adfStage: "stage0",
     document: syncBlockDoc,
     disableHeadingIDs: true,
-    dataProviders: props.providers
+    dataProviders: providers,
+    allowAltTextOnImages: allowAltTextOnImages,
+    allowAnnotations: allowAnnotations,
+    allowColumnSorting: allowColumnSorting,
+    allowCopyToClipboard: allowCopyToClipboard,
+    allowCustomPanels: allowCustomPanels,
+    allowHeadingAnchorLinks: allowHeadingAnchorLinks,
+    allowPlaceholderText: allowPlaceholderText,
+    allowRendererContainerStyles: allowRendererContainerStyles,
+    allowSelectAllTrap: allowSelectAllTrap,
+    allowUgcScrubber: allowUgcScrubber,
+    allowWrapCodeBlock: allowWrapCodeBlock,
+    emojiResourceConfig: emojiResourceConfig,
+    media: media,
+    smartLinks: smartLinks,
+    stickyHeaders: stickyHeaders
   })));
 };

package/dist/es2019/ui/SyncedBlockRenderer.js

@@ -17,7 +17,8 @@ export const convertSyncBlockRendererDataProvidersToProviderFactory = dataProvid
 };
 const SyncedBlockRendererWrapper = ({
   fetchedData,
-  providerFactory
+  providerFactory,
+  options
 }) => {
   const syncBlockDoc = useMemo(() => {
     var _fetchedData$content;
@@ -27,6 +28,23 @@ const SyncedBlockRendererWrapper = ({
       type: 'doc'
     };
   }, [fetchedData]);
+  const {
+    allowAltTextOnImages,
+    allowAnnotations,
+    allowColumnSorting,
+    allowCopyToClipboard,
+    allowCustomPanels,
+    allowHeadingAnchorLinks,
+    allowPlaceholderText,
+    allowRendererContainerStyles,
+    allowSelectAllTrap,
+    allowUgcScrubber,
+    allowWrapCodeBlock,
+    emojiResourceConfig,
+    media,
+    smartLinks,
+    stickyHeaders
+  } = options !== null && options !== void 0 ? options : {};
   return /*#__PURE__*/React.createElement(RendererActionsContext, null, /*#__PURE__*/React.createElement("div", {
     "data-testid": "sync-block-renderer-wrapper"
   }, /*#__PURE__*/React.createElement(ReactRenderer, {
@@ -34,30 +52,49 @@ const SyncedBlockRendererWrapper = ({
     adfStage: "stage0",
     document: syncBlockDoc,
     disableHeadingIDs: true,
-    dataProviders: providerFactory
+    dataProviders: providerFactory,
+    allowAltTextOnImages: allowAltTextOnImages,
+    allowAnnotations: allowAnnotations,
+    allowColumnSorting: allowColumnSorting,
+    allowCopyToClipboard: allowCopyToClipboard,
+    allowCustomPanels: allowCustomPanels,
+    allowHeadingAnchorLinks: allowHeadingAnchorLinks,
+    allowPlaceholderText: allowPlaceholderText,
+    allowRendererContainerStyles: allowRendererContainerStyles,
+    allowSelectAllTrap: allowSelectAllTrap,
+    allowUgcScrubber: allowUgcScrubber,
+    allowWrapCodeBlock: allowWrapCodeBlock,
+    emojiResourceConfig: emojiResourceConfig,
+    media: media,
+    smartLinks: smartLinks,
+    stickyHeaders: stickyHeaders
   })));
 };
 const SyncedBlockRendererComponent = ({
   useFetchSyncBlockData,
-  syncBlockRendererDataProviders
+  syncBlockRendererDataProviders,
+  syncBlockRendererOptions
 }) => {
-  const fetchResult = useFetchSyncBlockData();
+  const {
+    syncBlockInstance
+  } = useFetchSyncBlockData();
   const providerFactory = useMemo(() => {
     return convertSyncBlockRendererDataProvidersToProviderFactory(syncBlockRendererDataProviders);
   }, [syncBlockRendererDataProviders]);
-  if (!fetchResult) {
+  if (!syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
-  if (fetchResult.error || !fetchResult.data) {
-    var _fetchResult$error;
+  if (syncBlockInstance.error || !syncBlockInstance.data) {
+    var _syncBlockInstance$er;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored,
-      resourceId: fetchResult.resourceId
+      error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : SyncBlockError.Errored,
+      resourceId: syncBlockInstance.resourceId
     });
   }
   return /*#__PURE__*/React.createElement(SyncedBlockRendererWrapper, {
-    fetchedData: fetchResult.data,
-    providerFactory: providerFactory
+    fetchedData: syncBlockInstance.data,
+    providerFactory: providerFactory,
+    options: syncBlockRendererOptions
   });
 };
 export const SyncedBlockRenderer = /*#__PURE__*/memo(SyncedBlockRendererComponent);

package/dist/esm/getSyncedBlockNodeComponent.js

@@ -1,17 +1,30 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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) { _defineProperty(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; }
+import { convertSyncBlockJSONNodeToSyncBlockNode, SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import { SyncedBlockNodeComponentRenderer } from './ui/SyncedBlockNodeComponentRenderer';
-export var getSyncedBlockNodeComponent = function getSyncedBlockNodeComponent(dataProvider, doc) {
+var getSyncBlockNodesFromContent = function getSyncBlockNodesFromContent(content) {
+  return content.map(function (node) {
+    return convertSyncBlockJSONNodeToSyncBlockNode(node);
+  }).filter(function (node) {
+    return node !== undefined;
+  });
+};
+
+// For rendering reference synced block nodes in Renderer
+export var getSyncedBlockNodeComponent = function getSyncedBlockNodeComponent(_ref) {
+  var doc = _ref.doc,
+    syncBlockProvider = _ref.syncBlockProvider,
+    syncBlockRendererOptions = _ref.syncBlockRendererOptions;
   var content = doc.content;
   var isEmpty = !content || !Array.isArray(content) || content.length === 0;
-  var syncBlockNodes = isEmpty ? [] : content.filter(function (node) {
-    return node.type === 'syncBlock';
-  });
-  var dataPromise = dataProvider.fetchNodesData(syncBlockNodes);
+  var syncBlockNodes = isEmpty ? [] : getSyncBlockNodesFromContent(content);
+  var syncBlockStoreManager = new SyncBlockStoreManager(syncBlockProvider);
+
+  // Pre-fetch sync block data
+  syncBlockStoreManager.getReferenceSyncBlockStoreManager().fetchSyncBlocksData(syncBlockNodes);
   return function (props) {
-    return SyncedBlockNodeComponentRenderer(_objectSpread(_objectSpread({}, props), {}, {
-      dataPromise: dataPromise
-    }));
+    return SyncedBlockNodeComponentRenderer({
+      nodeProps: props,
+      syncBlockStoreManager: syncBlockStoreManager,
+      rendererOptions: syncBlockRendererOptions
+    });
   };
 };

package/dist/esm/getSyncedBlockRenderer.js

@@ -1,10 +1,15 @@
 import React from 'react';
 import { SyncedBlockRenderer } from './ui/SyncedBlockRenderer';
+// For rendering reference synced block nodes in Editor
 export var getSyncedBlockRenderer = function getSyncedBlockRenderer(_ref) {
   var syncBlockRendererDataProviders = _ref.syncBlockRendererDataProviders,
-    useFetchSyncBlockData = _ref.useFetchSyncBlockData;
-  return /*#__PURE__*/React.createElement(SyncedBlockRenderer, {
-    syncBlockRendererDataProviders: syncBlockRendererDataProviders,
-    useFetchSyncBlockData: useFetchSyncBlockData
-  });
+    syncBlockRendererOptions = _ref.syncBlockRendererOptions;
+  return function (_ref2) {
+    var useFetchSyncBlockData = _ref2.useFetchSyncBlockData;
+    return /*#__PURE__*/React.createElement(SyncedBlockRenderer, {
+      syncBlockRendererOptions: syncBlockRendererOptions,
+      syncBlockRendererDataProviders: syncBlockRendererDataProviders,
+      useFetchSyncBlockData: useFetchSyncBlockData
+    });
+  };
 };

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/SyncedBlockNodeComponentRenderer.js

@@ -1,54 +1,75 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useEffect, useState } from 'react';
-import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
+import React from 'react';
+import { SyncBlockError, useFetchSyncBlockData } from '@atlaskit/editor-synced-block-provider';
 import { ReactRenderer } from '@atlaskit/renderer';
 import { RendererActionsContext } from '@atlaskit/renderer/actions';
 import { SyncedBlockErrorComponent } from './SyncedBlockErrorComponent';
 import { SyncedBlockLoadingState } from './SyncedBlockLoadingState';
-export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentRenderer(props) {
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    data = _useState2[0],
-    setData = _useState2[1];
-  useEffect(function () {
-    if (!props.dataPromise) {
-      return;
-    }
-    if (data) {
-      return;
-    }
-    props.dataPromise.then(function (data) {
-      setData(data);
-    });
-  }, [props.dataPromise, data]);
-  if (!data) {
+export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentRenderer(_ref) {
+  var nodeProps = _ref.nodeProps,
+    syncBlockStoreManager = _ref.syncBlockStoreManager,
+    rendererOptions = _ref.rendererOptions;
+  var resourceId = nodeProps.resourceId,
+    localId = nodeProps.localId,
+    providers = nodeProps.providers;
+  var _ref2 = rendererOptions !== null && rendererOptions !== void 0 ? rendererOptions : {},
+    allowAltTextOnImages = _ref2.allowAltTextOnImages,
+    allowAnnotations = _ref2.allowAnnotations,
+    allowColumnSorting = _ref2.allowColumnSorting,
+    allowCopyToClipboard = _ref2.allowCopyToClipboard,
+    allowCustomPanels = _ref2.allowCustomPanels,
+    allowHeadingAnchorLinks = _ref2.allowHeadingAnchorLinks,
+    allowPlaceholderText = _ref2.allowPlaceholderText,
+    allowRendererContainerStyles = _ref2.allowRendererContainerStyles,
+    allowSelectAllTrap = _ref2.allowSelectAllTrap,
+    allowUgcScrubber = _ref2.allowUgcScrubber,
+    allowWrapCodeBlock = _ref2.allowWrapCodeBlock,
+    emojiResourceConfig = _ref2.emojiResourceConfig,
+    media = _ref2.media,
+    smartLinks = _ref2.smartLinks,
+    stickyHeaders = _ref2.stickyHeaders;
+  var _useFetchSyncBlockDat = useFetchSyncBlockData(syncBlockStoreManager, resourceId, localId),
+    syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance,
+    isLoading = _useFetchSyncBlockDat.isLoading;
+  if (isLoading && !syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
-  var fetchResult = data.find(function (item) {
-    return item.resourceId === props.resourceId;
-  });
-  if (fetchResult !== null && fetchResult !== void 0 && fetchResult.error || !(fetchResult !== null && fetchResult !== void 0 && fetchResult.data)) {
-    var _fetchResult$error;
+  if (syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data)) {
+    var _syncBlockInstance$er;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: (_fetchResult$error = fetchResult === null || fetchResult === void 0 ? void 0 : fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored,
-      resourceId: props.resourceId
+      error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : SyncBlockError.Errored,
+      resourceId: resourceId
     });
   }
   var syncBlockDoc = {
-    content: fetchResult.data.content,
+    content: syncBlockInstance.data.content,
     version: 1,
     type: 'doc'
   };
   return /*#__PURE__*/React.createElement(RendererActionsContext, null, /*#__PURE__*/React.createElement("div", {
     "data-sync-block": true,
     "data-testid": "sync-block-renderer-wrapper",
-    "data-resource-id": props.resourceId,
-    "data-local-id": props.localId
+    "data-resource-id": resourceId,
+    "data-local-id": localId
   }, /*#__PURE__*/React.createElement(ReactRenderer, {
     appearance: "full-width",
     adfStage: "stage0",
     document: syncBlockDoc,
     disableHeadingIDs: true,
-    dataProviders: props.providers
+    dataProviders: providers,
+    allowAltTextOnImages: allowAltTextOnImages,
+    allowAnnotations: allowAnnotations,
+    allowColumnSorting: allowColumnSorting,
+    allowCopyToClipboard: allowCopyToClipboard,
+    allowCustomPanels: allowCustomPanels,
+    allowHeadingAnchorLinks: allowHeadingAnchorLinks,
+    allowPlaceholderText: allowPlaceholderText,
+    allowRendererContainerStyles: allowRendererContainerStyles,
+    allowSelectAllTrap: allowSelectAllTrap,
+    allowUgcScrubber: allowUgcScrubber,
+    allowWrapCodeBlock: allowWrapCodeBlock,
+    emojiResourceConfig: emojiResourceConfig,
+    media: media,
+    smartLinks: smartLinks,
+    stickyHeaders: stickyHeaders
   })));
 };

package/dist/esm/ui/SyncedBlockRenderer.js

@@ -17,7 +17,8 @@ export var convertSyncBlockRendererDataProvidersToProviderFactory = function con
 };
 var SyncedBlockRendererWrapper = function SyncedBlockRendererWrapper(_ref) {
   var fetchedData = _ref.fetchedData,
-    providerFactory = _ref.providerFactory;
+    providerFactory = _ref.providerFactory,
+    options = _ref.options;
   var syncBlockDoc = useMemo(function () {
     var _fetchedData$content;
     return {
@@ -26,6 +27,22 @@ var SyncedBlockRendererWrapper = function SyncedBlockRendererWrapper(_ref) {
       type: 'doc'
     };
   }, [fetchedData]);
+  var _ref2 = options !== null && options !== void 0 ? options : {},
+    allowAltTextOnImages = _ref2.allowAltTextOnImages,
+    allowAnnotations = _ref2.allowAnnotations,
+    allowColumnSorting = _ref2.allowColumnSorting,
+    allowCopyToClipboard = _ref2.allowCopyToClipboard,
+    allowCustomPanels = _ref2.allowCustomPanels,
+    allowHeadingAnchorLinks = _ref2.allowHeadingAnchorLinks,
+    allowPlaceholderText = _ref2.allowPlaceholderText,
+    allowRendererContainerStyles = _ref2.allowRendererContainerStyles,
+    allowSelectAllTrap = _ref2.allowSelectAllTrap,
+    allowUgcScrubber = _ref2.allowUgcScrubber,
+    allowWrapCodeBlock = _ref2.allowWrapCodeBlock,
+    emojiResourceConfig = _ref2.emojiResourceConfig,
+    media = _ref2.media,
+    smartLinks = _ref2.smartLinks,
+    stickyHeaders = _ref2.stickyHeaders;
   return /*#__PURE__*/React.createElement(RendererActionsContext, null, /*#__PURE__*/React.createElement("div", {
     "data-testid": "sync-block-renderer-wrapper"
   }, /*#__PURE__*/React.createElement(ReactRenderer, {
@@ -33,29 +50,47 @@ var SyncedBlockRendererWrapper = function SyncedBlockRendererWrapper(_ref) {
     adfStage: "stage0",
     document: syncBlockDoc,
     disableHeadingIDs: true,
-    dataProviders: providerFactory
+    dataProviders: providerFactory,
+    allowAltTextOnImages: allowAltTextOnImages,
+    allowAnnotations: allowAnnotations,
+    allowColumnSorting: allowColumnSorting,
+    allowCopyToClipboard: allowCopyToClipboard,
+    allowCustomPanels: allowCustomPanels,
+    allowHeadingAnchorLinks: allowHeadingAnchorLinks,
+    allowPlaceholderText: allowPlaceholderText,
+    allowRendererContainerStyles: allowRendererContainerStyles,
+    allowSelectAllTrap: allowSelectAllTrap,
+    allowUgcScrubber: allowUgcScrubber,
+    allowWrapCodeBlock: allowWrapCodeBlock,
+    emojiResourceConfig: emojiResourceConfig,
+    media: media,
+    smartLinks: smartLinks,
+    stickyHeaders: stickyHeaders
   })));
 };
-var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref2) {
-  var useFetchSyncBlockData = _ref2.useFetchSyncBlockData,
-    syncBlockRendererDataProviders = _ref2.syncBlockRendererDataProviders;
-  var fetchResult = useFetchSyncBlockData();
+var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref3) {
+  var useFetchSyncBlockData = _ref3.useFetchSyncBlockData,
+    syncBlockRendererDataProviders = _ref3.syncBlockRendererDataProviders,
+    syncBlockRendererOptions = _ref3.syncBlockRendererOptions;
+  var _useFetchSyncBlockDat = useFetchSyncBlockData(),
+    syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance;
   var providerFactory = useMemo(function () {
     return convertSyncBlockRendererDataProvidersToProviderFactory(syncBlockRendererDataProviders);
   }, [syncBlockRendererDataProviders]);
-  if (!fetchResult) {
+  if (!syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
-  if (fetchResult.error || !fetchResult.data) {
-    var _fetchResult$error;
+  if (syncBlockInstance.error || !syncBlockInstance.data) {
+    var _syncBlockInstance$er;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored,
-      resourceId: fetchResult.resourceId
+      error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : SyncBlockError.Errored,
+      resourceId: syncBlockInstance.resourceId
     });
   }
   return /*#__PURE__*/React.createElement(SyncedBlockRendererWrapper, {
-    fetchedData: fetchResult.data,
-    providerFactory: providerFactory
+    fetchedData: syncBlockInstance.data,
+    providerFactory: providerFactory,
+    options: syncBlockRendererOptions
   });
 };
 export var SyncedBlockRenderer = /*#__PURE__*/memo(SyncedBlockRendererComponent);

package/dist/types/getSyncedBlockNodeComponent.d.ts

@@ -1,5 +1,11 @@
 import type { DocNode } from '@atlaskit/adf-schema';
-import { type SyncBlockNode, type SyncBlockInstance } from '@atlaskit/editor-synced-block-provider';
-import type { NodeDataProvider } from '@atlaskit/node-data-provider';
+import type { SyncedBlockProvider } from '@atlaskit/editor-synced-block-provider';
+import type { SyncedBlockRendererOptions } from './types';
 import { type SyncedBlockNodeProps } from './ui/SyncedBlockNodeComponentRenderer';
-export declare const getSyncedBlockNodeComponent: (dataProvider: NodeDataProvider<SyncBlockNode, SyncBlockInstance>, doc: DocNode) => (props: SyncedBlockNodeProps) => import("react").JSX.Element;
+type GetSyncedBlockNodeComponentProps = {
+    doc: DocNode;
+    syncBlockProvider: SyncedBlockProvider;
+    syncBlockRendererOptions: SyncedBlockRendererOptions | undefined;
+};
+export declare const getSyncedBlockNodeComponent: ({ doc, syncBlockProvider, syncBlockRendererOptions, }: GetSyncedBlockNodeComponentProps) => ((props: SyncedBlockNodeProps) => React.JSX.Element);
+export {};

package/dist/types/getSyncedBlockRenderer.d.ts

@@ -1,3 +1,10 @@
 import React from 'react';
-import { type SyncedBlockRendererProps } from './ui/SyncedBlockRenderer';
-export declare const getSyncedBlockRenderer: ({ syncBlockRendererDataProviders, useFetchSyncBlockData, }: SyncedBlockRendererProps) => React.JSX.Element;
+import type { SyncedBlockRendererDataProviders } from '@atlaskit/editor-common/provider-factory';
+import type { SyncedBlockRendererProps } from '@atlaskit/editor-plugin-synced-block';
+import type { SyncedBlockRendererOptions } from './types';
+type GetSyncedBlockRendererProps = {
+    syncBlockRendererDataProviders: SyncedBlockRendererDataProviders;
+    syncBlockRendererOptions: SyncedBlockRendererOptions | undefined;
+};
+export declare const getSyncedBlockRenderer: ({ syncBlockRendererDataProviders, syncBlockRendererOptions }: GetSyncedBlockRendererProps) => ({ useFetchSyncBlockData }: SyncedBlockRendererProps) => React.JSX.Element;
+export {};

package/dist/types/types.d.ts

@@ -0,0 +1,2 @@
+import { type RendererProps } from '@atlaskit/renderer';
+export type SyncedBlockRendererOptions = Pick<RendererProps, 'allowAltTextOnImages' | 'allowAnnotations' | 'allowColumnSorting' | 'allowCopyToClipboard' | 'allowCustomPanels' | 'allowHeadingAnchorLinks' | 'allowPlaceholderText' | 'allowRendererContainerStyles' | 'allowSelectAllTrap' | 'allowUgcScrubber' | 'allowWrapCodeBlock' | 'emojiResourceConfig' | 'media' | 'smartLinks' | 'stickyHeaders'>;

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

@@ -1,11 +1,15 @@
 import React from 'react';
-import { type SyncBlockInstance } from '@atlaskit/editor-synced-block-provider';
+import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import { type NodeProps } from '@atlaskit/renderer';
+import type { SyncedBlockRendererOptions } from '../types';
 export interface SyncedBlockProps {
     localId?: string;
     resourceId?: string;
 }
 export type SyncedBlockNodeProps = NodeProps<SyncedBlockProps>;
-export declare const SyncedBlockNodeComponentRenderer: (props: SyncedBlockNodeProps & {
-    dataPromise: Promise<SyncBlockInstance[]> | null;
-}) => React.JSX.Element;
+export type SyncedBlockNodeComponentRendererProps = {
+    nodeProps: SyncedBlockNodeProps;
+    rendererOptions: SyncedBlockRendererOptions | undefined;
+    syncBlockStoreManager: SyncBlockStoreManager;
+};
+export declare const SyncedBlockNodeComponentRenderer: ({ nodeProps, syncBlockStoreManager, rendererOptions, }: SyncedBlockNodeComponentRendererProps) => React.JSX.Element;

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import { ProviderFactory, type SyncedBlockRendererDataProviders } from '@atlaskit/editor-common/provider-factory';
-import { type SyncBlockInstance } from '@atlaskit/editor-synced-block-provider';
+import { type UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
+import type { SyncedBlockRendererOptions } from '../types';
 export type SyncedBlockRendererProps = {
     syncBlockRendererDataProviders: SyncedBlockRendererDataProviders;
-    useFetchSyncBlockData: () => SyncBlockInstance | null;
+    syncBlockRendererOptions: SyncedBlockRendererOptions | undefined;
+    useFetchSyncBlockData: () => UseFetchSyncBlockDataResult;
 };
 export declare const convertSyncBlockRendererDataProvidersToProviderFactory: (dataProviders: SyncedBlockRendererDataProviders) => ProviderFactory;
-export declare const SyncedBlockRenderer: React.MemoExoticComponent<({ useFetchSyncBlockData, syncBlockRendererDataProviders, }: SyncedBlockRendererProps) => React.JSX.Element>;
+export declare const SyncedBlockRenderer: React.MemoExoticComponent<({ useFetchSyncBlockData, syncBlockRendererDataProviders, syncBlockRendererOptions, }: SyncedBlockRendererProps) => React.JSX.Element>;

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

@@ -1,5 +1,11 @@
 import type { DocNode } from '@atlaskit/adf-schema';
-import { type SyncBlockNode, type SyncBlockInstance } from '@atlaskit/editor-synced-block-provider';
-import type { NodeDataProvider } from '@atlaskit/node-data-provider';
+import type { SyncedBlockProvider } from '@atlaskit/editor-synced-block-provider';
+import type { SyncedBlockRendererOptions } from './types';
 import { type SyncedBlockNodeProps } from './ui/SyncedBlockNodeComponentRenderer';
-export declare const getSyncedBlockNodeComponent: (dataProvider: NodeDataProvider<SyncBlockNode, SyncBlockInstance>, doc: DocNode) => (props: SyncedBlockNodeProps) => import("react").JSX.Element;
+type GetSyncedBlockNodeComponentProps = {
+    doc: DocNode;
+    syncBlockProvider: SyncedBlockProvider;
+    syncBlockRendererOptions: SyncedBlockRendererOptions | undefined;
+};
+export declare const getSyncedBlockNodeComponent: ({ doc, syncBlockProvider, syncBlockRendererOptions, }: GetSyncedBlockNodeComponentProps) => ((props: SyncedBlockNodeProps) => React.JSX.Element);
+export {};

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

@@ -1,3 +1,10 @@
 import React from 'react';
-import { type SyncedBlockRendererProps } from './ui/SyncedBlockRenderer';
-export declare const getSyncedBlockRenderer: ({ syncBlockRendererDataProviders, useFetchSyncBlockData, }: SyncedBlockRendererProps) => React.JSX.Element;
+import type { SyncedBlockRendererDataProviders } from '@atlaskit/editor-common/provider-factory';
+import type { SyncedBlockRendererProps } from '@atlaskit/editor-plugin-synced-block';
+import type { SyncedBlockRendererOptions } from './types';
+type GetSyncedBlockRendererProps = {
+    syncBlockRendererDataProviders: SyncedBlockRendererDataProviders;
+    syncBlockRendererOptions: SyncedBlockRendererOptions | undefined;
+};
+export declare const getSyncedBlockRenderer: ({ syncBlockRendererDataProviders, syncBlockRendererOptions }: GetSyncedBlockRendererProps) => ({ useFetchSyncBlockData }: SyncedBlockRendererProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+import { type RendererProps } from '@atlaskit/renderer';
+export type SyncedBlockRendererOptions = Pick<RendererProps, 'allowAltTextOnImages' | 'allowAnnotations' | 'allowColumnSorting' | 'allowCopyToClipboard' | 'allowCustomPanels' | 'allowHeadingAnchorLinks' | 'allowPlaceholderText' | 'allowRendererContainerStyles' | 'allowSelectAllTrap' | 'allowUgcScrubber' | 'allowWrapCodeBlock' | 'emojiResourceConfig' | 'media' | 'smartLinks' | 'stickyHeaders'>;

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

@@ -1,11 +1,15 @@
 import React from 'react';
-import { type SyncBlockInstance } from '@atlaskit/editor-synced-block-provider';
+import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import { type NodeProps } from '@atlaskit/renderer';
+import type { SyncedBlockRendererOptions } from '../types';
 export interface SyncedBlockProps {
     localId?: string;
     resourceId?: string;
 }
 export type SyncedBlockNodeProps = NodeProps<SyncedBlockProps>;
-export declare const SyncedBlockNodeComponentRenderer: (props: SyncedBlockNodeProps & {
-    dataPromise: Promise<SyncBlockInstance[]> | null;
-}) => React.JSX.Element;
+export type SyncedBlockNodeComponentRendererProps = {
+    nodeProps: SyncedBlockNodeProps;
+    rendererOptions: SyncedBlockRendererOptions | undefined;
+    syncBlockStoreManager: SyncBlockStoreManager;
+};
+export declare const SyncedBlockNodeComponentRenderer: ({ nodeProps, syncBlockStoreManager, rendererOptions, }: SyncedBlockNodeComponentRendererProps) => React.JSX.Element;

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import { ProviderFactory, type SyncedBlockRendererDataProviders } from '@atlaskit/editor-common/provider-factory';
-import { type SyncBlockInstance } from '@atlaskit/editor-synced-block-provider';
+import { type UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
+import type { SyncedBlockRendererOptions } from '../types';
 export type SyncedBlockRendererProps = {
     syncBlockRendererDataProviders: SyncedBlockRendererDataProviders;
-    useFetchSyncBlockData: () => SyncBlockInstance | null;
+    syncBlockRendererOptions: SyncedBlockRendererOptions | undefined;
+    useFetchSyncBlockData: () => UseFetchSyncBlockDataResult;
 };
 export declare const convertSyncBlockRendererDataProvidersToProviderFactory: (dataProviders: SyncedBlockRendererDataProviders) => ProviderFactory;
-export declare const SyncedBlockRenderer: React.MemoExoticComponent<({ useFetchSyncBlockData, syncBlockRendererDataProviders, }: SyncedBlockRendererProps) => React.JSX.Element>;
+export declare const SyncedBlockRenderer: React.MemoExoticComponent<({ useFetchSyncBlockData, syncBlockRendererDataProviders, syncBlockRendererOptions, }: SyncedBlockRendererProps) => React.JSX.Element>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-synced-block-renderer",
-	"version": "3.0.1",
+	"version": "3.1.1",
 	"description": "SyncedBlockRenderer for @atlaskit/editor-plugin-synced-block",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,8 +30,9 @@
 	"dependencies": {
 		"@atlaskit/button": "^23.5.0",
 		"@atlaskit/css": "^0.15.0",
+		"@atlaskit/editor-plugin-synced-block": "^4.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-synced-block-provider": "^2.5.0",
+		"@atlaskit/editor-synced-block-provider": "^2.6.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/image": "^3.0.0",
@@ -43,7 +44,7 @@
 		"relay-runtime": "npm:atl-relay-compiler@0.0.0-main-5980a913"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.21.0",
+		"@atlaskit/editor-common": "^110.22.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},