@atlaskit/editor-synced-block-renderer 3.1.0 → 3.1.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-synced-block-renderer
 
+## 3.1.2
+
+### Patch Changes
+
+- [`9e1ddcc85a330`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e1ddcc85a330) -
+  EDITOR-2673 Enable nested tables in reference synced blocks
+
+## 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

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/afm-products/tsconfig.json

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

package/dist/cjs/getSyncedBlockNodeComponent.js

@@ -1,37 +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 isSyncBlockDataProvider = function isSyncBlockDataProvider(dataProvider) {
-  return dataProvider.name === 'syncBlockProvider';
+var getSyncBlockNodesFromContent = function getSyncBlockNodesFromContent(content) {
+  return content.map(function (node) {
+    return (0, _editorSyncedBlockProvider.convertSyncBlockJSONNodeToSyncBlockNode)(node);
+  }).filter(function (node) {
+    return node !== undefined;
+  });
 };
 
-// For rendering synced block nodes in Renderer
-var getSyncedBlockNodeComponent = exports.getSyncedBlockNodeComponent = function getSyncedBlockNodeComponent(dataProvider, doc) {
+// 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 syncBlockStoreManager = isSyncBlockDataProvider(dataProvider) ? new _editorSyncedBlockProvider.SyncBlockStoreManager(dataProvider) : undefined;
-  if (!syncBlockStoreManager) {
-    // TODO: EDITOR-2533 - returns a function that always renders error state
-    throw new Error('Data provider is not a SyncBlockDataProvider');
-  }
+  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), {}, {
-      syncBlockStoreManager: syncBlockStoreManager
-    }));
+    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/AKRendererWrapper.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AKRendererWrapper = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _renderer = require("@atlaskit/renderer");
+var _actions = require("@atlaskit/renderer/actions");
+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 ValidationContextWrapper = function ValidationContextWrapper(_ref) {
+  var children = _ref.children;
+  var validationContextValue = (0, _react.useMemo)(function () {
+    return {
+      allowNestedTables: true
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_renderer.ValidationContextProvider, {
+    value: validationContextValue
+  }, children);
+};
+var AKRendererWrapper = exports.AKRendererWrapper = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
+  var doc = _ref2.doc,
+    dataProviders = _ref2.dataProviders,
+    options = _ref2.options;
+  var _ref3 = options !== null && options !== void 0 ? options : {},
+    allowAltTextOnImages = _ref3.allowAltTextOnImages,
+    allowAnnotations = _ref3.allowAnnotations,
+    allowColumnSorting = _ref3.allowColumnSorting,
+    allowCopyToClipboard = _ref3.allowCopyToClipboard,
+    allowCustomPanels = _ref3.allowCustomPanels,
+    allowHeadingAnchorLinks = _ref3.allowHeadingAnchorLinks,
+    allowPlaceholderText = _ref3.allowPlaceholderText,
+    allowRendererContainerStyles = _ref3.allowRendererContainerStyles,
+    allowSelectAllTrap = _ref3.allowSelectAllTrap,
+    allowUgcScrubber = _ref3.allowUgcScrubber,
+    allowWrapCodeBlock = _ref3.allowWrapCodeBlock,
+    emojiResourceConfig = _ref3.emojiResourceConfig,
+    media = _ref3.media,
+    smartLinks = _ref3.smartLinks,
+    stickyHeaders = _ref3.stickyHeaders;
+  return /*#__PURE__*/_react.default.createElement(_actions.RendererActionsContext, null, /*#__PURE__*/_react.default.createElement(ValidationContextWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "sync-block-renderer-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_renderer.ReactRenderer, {
+    appearance: "full-width",
+    adfStage: "stage0",
+    document: doc,
+    disableHeadingIDs: true,
+    dataProviders: dataProviders,
+    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/SyncedBlockNodeComponentRenderer.js

@@ -7,14 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.SyncedBlockNodeComponentRenderer = void 0;
 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 _AKRendererWrapper = require("./AKRendererWrapper");
 var _SyncedBlockErrorComponent = require("./SyncedBlockErrorComponent");
 var _SyncedBlockLoadingState = require("./SyncedBlockLoadingState");
-var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentRenderer(props) {
-  var resourceId = props.resourceId,
-    localId = props.localId,
-    syncBlockStoreManager = props.syncBlockStoreManager;
+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 _useFetchSyncBlockDat = (0, _editorSyncedBlockProvider.useFetchSyncBlockData)(syncBlockStoreManager, resourceId, localId),
     syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance,
     isLoading = _useFetchSyncBlockDat.isLoading;
@@ -25,7 +27,7 @@ var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer
     var _syncBlockInstance$er;
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
       error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : _editorSyncedBlockProvider.SyncBlockError.Errored,
-      resourceId: props.resourceId
+      resourceId: resourceId
     });
   }
   var syncBlockDoc = {
@@ -33,16 +35,9 @@ var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer
     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
-  }, /*#__PURE__*/_react.default.createElement(_renderer.ReactRenderer, {
-    appearance: "full-width",
-    adfStage: "stage0",
-    document: syncBlockDoc,
-    disableHeadingIDs: true,
-    dataProviders: props.providers
-  })));
+  return /*#__PURE__*/_react.default.createElement(_AKRendererWrapper.AKRendererWrapper, {
+    doc: syncBlockDoc,
+    dataProviders: providers,
+    options: rendererOptions
+  });
 };

package/dist/cjs/ui/SyncedBlockRenderer.js

@@ -8,8 +8,7 @@ exports.convertSyncBlockRendererDataProvidersToProviderFactory = exports.SyncedB
 var _react = _interopRequireWildcard(require("react"));
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
-var _renderer = require("@atlaskit/renderer");
-var _actions = require("@atlaskit/renderer/actions");
+var _AKRendererWrapper = require("./AKRendererWrapper");
 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); }
@@ -23,33 +22,13 @@ var convertSyncBlockRendererDataProvidersToProviderFactory = exports.convertSync
     taskDecisionProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.taskDecisionProvider
   });
 };
-var SyncedBlockRendererWrapper = function SyncedBlockRendererWrapper(_ref) {
-  var fetchedData = _ref.fetchedData,
-    providerFactory = _ref.providerFactory;
-  var syncBlockDoc = (0, _react.useMemo)(function () {
-    var _fetchedData$content;
-    return {
-      content: (_fetchedData$content = fetchedData.content) !== null && _fetchedData$content !== void 0 ? _fetchedData$content : [],
-      version: 1,
-      type: 'doc'
-    };
-  }, [fetchedData]);
-  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, {
-    appearance: "full-width",
-    adfStage: "stage0",
-    document: syncBlockDoc,
-    disableHeadingIDs: true,
-    dataProviders: providerFactory
-  })));
-};
-var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref2) {
-  var useFetchSyncBlockData = _ref2.useFetchSyncBlockData,
-    syncBlockRendererDataProviders = _ref2.syncBlockRendererDataProviders;
+var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
+  var useFetchSyncBlockData = _ref.useFetchSyncBlockData,
+    syncBlockRendererDataProviders = _ref.syncBlockRendererDataProviders,
+    syncBlockRendererOptions = _ref.syncBlockRendererOptions;
   var _useFetchSyncBlockDat = useFetchSyncBlockData(),
     syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance;
-  var providerFactory = (0, _react.useMemo)(function () {
+  var dataProviders = (0, _react.useMemo)(function () {
     return convertSyncBlockRendererDataProvidersToProviderFactory(syncBlockRendererDataProviders);
   }, [syncBlockRendererDataProviders]);
   if (!syncBlockInstance) {
@@ -62,9 +41,15 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref2)
       resourceId: syncBlockInstance.resourceId
     });
   }
-  return /*#__PURE__*/_react.default.createElement(SyncedBlockRendererWrapper, {
-    fetchedData: syncBlockInstance.data,
-    providerFactory: providerFactory
+  var syncBlockDoc = {
+    content: syncBlockInstance.data.content,
+    version: 1,
+    type: 'doc'
+  };
+  return /*#__PURE__*/_react.default.createElement(_AKRendererWrapper.AKRendererWrapper, {
+    doc: syncBlockDoc,
+    dataProviders: dataProviders,
+    options: syncBlockRendererOptions
   });
 };
 var SyncedBlockRenderer = exports.SyncedBlockRenderer = /*#__PURE__*/(0, _react.memo)(SyncedBlockRendererComponent);

package/dist/es2019/getSyncedBlockNodeComponent.js

@@ -1,26 +1,27 @@
-import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
+import { convertSyncBlockJSONNodeToSyncBlockNode, SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import { SyncedBlockNodeComponentRenderer } from './ui/SyncedBlockNodeComponentRenderer';
-const isSyncBlockDataProvider = dataProvider => {
-  return dataProvider.name === 'syncBlockProvider';
+const getSyncBlockNodesFromContent = content => {
+  return content.map(node => convertSyncBlockJSONNodeToSyncBlockNode(node)).filter(node => node !== undefined);
 };
 
-// For rendering synced block nodes in Renderer
-export const getSyncedBlockNodeComponent = (dataProvider, doc) => {
+// 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 syncBlockStoreManager = isSyncBlockDataProvider(dataProvider) ? new SyncBlockStoreManager(dataProvider) : undefined;
-  if (!syncBlockStoreManager) {
-    // TODO: EDITOR-2533 - returns a function that always renders error state
-    throw new Error('Data provider is not a SyncBlockDataProvider');
-  }
+  const syncBlockNodes = isEmpty ? [] : getSyncBlockNodesFromContent(content);
+  const syncBlockStoreManager = new SyncBlockStoreManager(syncBlockProvider);
 
   // Pre-fetch sync block data
   syncBlockStoreManager.getReferenceSyncBlockStoreManager().fetchSyncBlocksData(syncBlockNodes);
   return props => SyncedBlockNodeComponentRenderer({
-    ...props,
-    syncBlockStoreManager
+    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/AKRendererWrapper.js

@@ -0,0 +1,60 @@
+import React, { memo, useMemo } from 'react';
+import { ReactRenderer, ValidationContextProvider } from '@atlaskit/renderer';
+import { RendererActionsContext } from '@atlaskit/renderer/actions';
+const ValidationContextWrapper = ({
+  children
+}) => {
+  const validationContextValue = useMemo(() => ({
+    allowNestedTables: true
+  }), []);
+  return /*#__PURE__*/React.createElement(ValidationContextProvider, {
+    value: validationContextValue
+  }, children);
+};
+export const AKRendererWrapper = /*#__PURE__*/memo(({
+  doc,
+  dataProviders,
+  options
+}) => {
+  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(ValidationContextWrapper, null, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "sync-block-renderer-wrapper"
+  }, /*#__PURE__*/React.createElement(ReactRenderer, {
+    appearance: "full-width",
+    adfStage: "stage0",
+    document: doc,
+    disableHeadingIDs: true,
+    dataProviders: dataProviders,
+    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/SyncedBlockNodeComponentRenderer.js

@@ -1,15 +1,18 @@
 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 { AKRendererWrapper } from './AKRendererWrapper';
 import { SyncedBlockErrorComponent } from './SyncedBlockErrorComponent';
 import { SyncedBlockLoadingState } from './SyncedBlockLoadingState';
-export const SyncedBlockNodeComponentRenderer = props => {
+export const SyncedBlockNodeComponentRenderer = ({
+  nodeProps,
+  syncBlockStoreManager,
+  rendererOptions
+}) => {
   const {
     resourceId,
     localId,
-    syncBlockStoreManager
-  } = props;
+    providers
+  } = nodeProps;
   const {
     syncBlockInstance,
     isLoading
@@ -21,7 +24,7 @@ export const SyncedBlockNodeComponentRenderer = props => {
     var _syncBlockInstance$er;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
       error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : SyncBlockError.Errored,
-      resourceId: props.resourceId
+      resourceId: resourceId
     });
   }
   const syncBlockDoc = {
@@ -29,16 +32,9 @@ export const SyncedBlockNodeComponentRenderer = props => {
     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
-  }, /*#__PURE__*/React.createElement(ReactRenderer, {
-    appearance: "full-width",
-    adfStage: "stage0",
-    document: syncBlockDoc,
-    disableHeadingIDs: true,
-    dataProviders: props.providers
-  })));
+  return /*#__PURE__*/React.createElement(AKRendererWrapper, {
+    doc: syncBlockDoc,
+    dataProviders: providers,
+    options: rendererOptions
+  });
 };

package/dist/es2019/ui/SyncedBlockRenderer.js

@@ -1,8 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
-import { ReactRenderer } from '@atlaskit/renderer';
-import { RendererActionsContext } from '@atlaskit/renderer/actions';
+import { AKRendererWrapper } from './AKRendererWrapper';
 import { SyncedBlockErrorComponent } from './SyncedBlockErrorComponent';
 import { SyncedBlockLoadingState } from './SyncedBlockLoadingState';
 export const convertSyncBlockRendererDataProvidersToProviderFactory = dataProviders => {
@@ -15,36 +14,15 @@ export const convertSyncBlockRendererDataProvidersToProviderFactory = dataProvid
     taskDecisionProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.taskDecisionProvider
   });
 };
-const SyncedBlockRendererWrapper = ({
-  fetchedData,
-  providerFactory
-}) => {
-  const syncBlockDoc = useMemo(() => {
-    var _fetchedData$content;
-    return {
-      content: (_fetchedData$content = fetchedData.content) !== null && _fetchedData$content !== void 0 ? _fetchedData$content : [],
-      version: 1,
-      type: 'doc'
-    };
-  }, [fetchedData]);
-  return /*#__PURE__*/React.createElement(RendererActionsContext, null, /*#__PURE__*/React.createElement("div", {
-    "data-testid": "sync-block-renderer-wrapper"
-  }, /*#__PURE__*/React.createElement(ReactRenderer, {
-    appearance: "full-width",
-    adfStage: "stage0",
-    document: syncBlockDoc,
-    disableHeadingIDs: true,
-    dataProviders: providerFactory
-  })));
-};
 const SyncedBlockRendererComponent = ({
   useFetchSyncBlockData,
-  syncBlockRendererDataProviders
+  syncBlockRendererDataProviders,
+  syncBlockRendererOptions
 }) => {
   const {
     syncBlockInstance
   } = useFetchSyncBlockData();
-  const providerFactory = useMemo(() => {
+  const dataProviders = useMemo(() => {
     return convertSyncBlockRendererDataProvidersToProviderFactory(syncBlockRendererDataProviders);
   }, [syncBlockRendererDataProviders]);
   if (!syncBlockInstance) {
@@ -57,9 +35,15 @@ const SyncedBlockRendererComponent = ({
       resourceId: syncBlockInstance.resourceId
     });
   }
-  return /*#__PURE__*/React.createElement(SyncedBlockRendererWrapper, {
-    fetchedData: syncBlockInstance.data,
-    providerFactory: providerFactory
+  const syncBlockDoc = {
+    content: syncBlockInstance.data.content,
+    version: 1,
+    type: 'doc'
+  };
+  return /*#__PURE__*/React.createElement(AKRendererWrapper, {
+    doc: syncBlockDoc,
+    dataProviders: dataProviders,
+    options: syncBlockRendererOptions
   });
 };
 export const SyncedBlockRenderer = /*#__PURE__*/memo(SyncedBlockRendererComponent);

package/dist/esm/getSyncedBlockNodeComponent.js

@@ -1,30 +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 { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
+import { convertSyncBlockJSONNodeToSyncBlockNode, SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import { SyncedBlockNodeComponentRenderer } from './ui/SyncedBlockNodeComponentRenderer';
-var isSyncBlockDataProvider = function isSyncBlockDataProvider(dataProvider) {
-  return dataProvider.name === 'syncBlockProvider';
+var getSyncBlockNodesFromContent = function getSyncBlockNodesFromContent(content) {
+  return content.map(function (node) {
+    return convertSyncBlockJSONNodeToSyncBlockNode(node);
+  }).filter(function (node) {
+    return node !== undefined;
+  });
 };
 
-// For rendering synced block nodes in Renderer
-export var getSyncedBlockNodeComponent = function getSyncedBlockNodeComponent(dataProvider, doc) {
+// 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 syncBlockStoreManager = isSyncBlockDataProvider(dataProvider) ? new SyncBlockStoreManager(dataProvider) : undefined;
-  if (!syncBlockStoreManager) {
-    // TODO: EDITOR-2533 - returns a function that always renders error state
-    throw new Error('Data provider is not a SyncBlockDataProvider');
-  }
+  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), {}, {
-      syncBlockStoreManager: syncBlockStoreManager
-    }));
+    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/AKRendererWrapper.js

@@ -0,0 +1,59 @@
+import React, { memo, useMemo } from 'react';
+import { ReactRenderer, ValidationContextProvider } from '@atlaskit/renderer';
+import { RendererActionsContext } from '@atlaskit/renderer/actions';
+var ValidationContextWrapper = function ValidationContextWrapper(_ref) {
+  var children = _ref.children;
+  var validationContextValue = useMemo(function () {
+    return {
+      allowNestedTables: true
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(ValidationContextProvider, {
+    value: validationContextValue
+  }, children);
+};
+export var AKRendererWrapper = /*#__PURE__*/memo(function (_ref2) {
+  var doc = _ref2.doc,
+    dataProviders = _ref2.dataProviders,
+    options = _ref2.options;
+  var _ref3 = options !== null && options !== void 0 ? options : {},
+    allowAltTextOnImages = _ref3.allowAltTextOnImages,
+    allowAnnotations = _ref3.allowAnnotations,
+    allowColumnSorting = _ref3.allowColumnSorting,
+    allowCopyToClipboard = _ref3.allowCopyToClipboard,
+    allowCustomPanels = _ref3.allowCustomPanels,
+    allowHeadingAnchorLinks = _ref3.allowHeadingAnchorLinks,
+    allowPlaceholderText = _ref3.allowPlaceholderText,
+    allowRendererContainerStyles = _ref3.allowRendererContainerStyles,
+    allowSelectAllTrap = _ref3.allowSelectAllTrap,
+    allowUgcScrubber = _ref3.allowUgcScrubber,
+    allowWrapCodeBlock = _ref3.allowWrapCodeBlock,
+    emojiResourceConfig = _ref3.emojiResourceConfig,
+    media = _ref3.media,
+    smartLinks = _ref3.smartLinks,
+    stickyHeaders = _ref3.stickyHeaders;
+  return /*#__PURE__*/React.createElement(RendererActionsContext, null, /*#__PURE__*/React.createElement(ValidationContextWrapper, null, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "sync-block-renderer-wrapper"
+  }, /*#__PURE__*/React.createElement(ReactRenderer, {
+    appearance: "full-width",
+    adfStage: "stage0",
+    document: doc,
+    disableHeadingIDs: true,
+    dataProviders: dataProviders,
+    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/SyncedBlockNodeComponentRenderer.js

@@ -1,13 +1,15 @@
 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 { AKRendererWrapper } from './AKRendererWrapper';
 import { SyncedBlockErrorComponent } from './SyncedBlockErrorComponent';
 import { SyncedBlockLoadingState } from './SyncedBlockLoadingState';
-export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentRenderer(props) {
-  var resourceId = props.resourceId,
-    localId = props.localId,
-    syncBlockStoreManager = props.syncBlockStoreManager;
+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 _useFetchSyncBlockDat = useFetchSyncBlockData(syncBlockStoreManager, resourceId, localId),
     syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance,
     isLoading = _useFetchSyncBlockDat.isLoading;
@@ -18,7 +20,7 @@ export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentR
     var _syncBlockInstance$er;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
       error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : SyncBlockError.Errored,
-      resourceId: props.resourceId
+      resourceId: resourceId
     });
   }
   var syncBlockDoc = {
@@ -26,16 +28,9 @@ export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentR
     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
-  }, /*#__PURE__*/React.createElement(ReactRenderer, {
-    appearance: "full-width",
-    adfStage: "stage0",
-    document: syncBlockDoc,
-    disableHeadingIDs: true,
-    dataProviders: props.providers
-  })));
+  return /*#__PURE__*/React.createElement(AKRendererWrapper, {
+    doc: syncBlockDoc,
+    dataProviders: providers,
+    options: rendererOptions
+  });
 };

package/dist/esm/ui/SyncedBlockRenderer.js

@@ -1,8 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
-import { ReactRenderer } from '@atlaskit/renderer';
-import { RendererActionsContext } from '@atlaskit/renderer/actions';
+import { AKRendererWrapper } from './AKRendererWrapper';
 import { SyncedBlockErrorComponent } from './SyncedBlockErrorComponent';
 import { SyncedBlockLoadingState } from './SyncedBlockLoadingState';
 export var convertSyncBlockRendererDataProvidersToProviderFactory = function convertSyncBlockRendererDataProvidersToProviderFactory(dataProviders) {
@@ -15,33 +14,13 @@ export var convertSyncBlockRendererDataProvidersToProviderFactory = function con
     taskDecisionProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.taskDecisionProvider
   });
 };
-var SyncedBlockRendererWrapper = function SyncedBlockRendererWrapper(_ref) {
-  var fetchedData = _ref.fetchedData,
-    providerFactory = _ref.providerFactory;
-  var syncBlockDoc = useMemo(function () {
-    var _fetchedData$content;
-    return {
-      content: (_fetchedData$content = fetchedData.content) !== null && _fetchedData$content !== void 0 ? _fetchedData$content : [],
-      version: 1,
-      type: 'doc'
-    };
-  }, [fetchedData]);
-  return /*#__PURE__*/React.createElement(RendererActionsContext, null, /*#__PURE__*/React.createElement("div", {
-    "data-testid": "sync-block-renderer-wrapper"
-  }, /*#__PURE__*/React.createElement(ReactRenderer, {
-    appearance: "full-width",
-    adfStage: "stage0",
-    document: syncBlockDoc,
-    disableHeadingIDs: true,
-    dataProviders: providerFactory
-  })));
-};
-var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref2) {
-  var useFetchSyncBlockData = _ref2.useFetchSyncBlockData,
-    syncBlockRendererDataProviders = _ref2.syncBlockRendererDataProviders;
+var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
+  var useFetchSyncBlockData = _ref.useFetchSyncBlockData,
+    syncBlockRendererDataProviders = _ref.syncBlockRendererDataProviders,
+    syncBlockRendererOptions = _ref.syncBlockRendererOptions;
   var _useFetchSyncBlockDat = useFetchSyncBlockData(),
     syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance;
-  var providerFactory = useMemo(function () {
+  var dataProviders = useMemo(function () {
     return convertSyncBlockRendererDataProvidersToProviderFactory(syncBlockRendererDataProviders);
   }, [syncBlockRendererDataProviders]);
   if (!syncBlockInstance) {
@@ -54,9 +33,15 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref2)
       resourceId: syncBlockInstance.resourceId
     });
   }
-  return /*#__PURE__*/React.createElement(SyncedBlockRendererWrapper, {
-    fetchedData: syncBlockInstance.data,
-    providerFactory: providerFactory
+  var syncBlockDoc = {
+    content: syncBlockInstance.data.content,
+    version: 1,
+    type: 'doc'
+  };
+  return /*#__PURE__*/React.createElement(AKRendererWrapper, {
+    doc: syncBlockDoc,
+    dataProviders: dataProviders,
+    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 SyncBlockInstance, type SyncBlockNode } 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/AKRendererWrapper.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { DocNode } from '@atlaskit/adf-schema';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { SyncedBlockRendererOptions } from '../types';
+export declare const AKRendererWrapper: React.MemoExoticComponent<({ doc, dataProviders, options, }: {
+    dataProviders: ProviderFactory | undefined;
+    doc: DocNode;
+    options: SyncedBlockRendererOptions | undefined;
+}) => React.JSX.Element>;

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

@@ -1,11 +1,15 @@
 import React from 'react';
 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 & {
+export type SyncedBlockNodeComponentRendererProps = {
+    nodeProps: SyncedBlockNodeProps;
+    rendererOptions: SyncedBlockRendererOptions | undefined;
     syncBlockStoreManager: SyncBlockStoreManager;
-}) => React.JSX.Element;
+};
+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 UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
+import type { SyncedBlockRendererOptions } from '../types';
 export type SyncedBlockRendererProps = {
     syncBlockRendererDataProviders: SyncedBlockRendererDataProviders;
+    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 SyncBlockInstance, type SyncBlockNode } 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/AKRendererWrapper.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { DocNode } from '@atlaskit/adf-schema';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { SyncedBlockRendererOptions } from '../types';
+export declare const AKRendererWrapper: React.MemoExoticComponent<({ doc, dataProviders, options, }: {
+    dataProviders: ProviderFactory | undefined;
+    doc: DocNode;
+    options: SyncedBlockRendererOptions | undefined;
+}) => React.JSX.Element>;

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

@@ -1,11 +1,15 @@
 import React from 'react';
 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 & {
+export type SyncedBlockNodeComponentRendererProps = {
+    nodeProps: SyncedBlockNodeProps;
+    rendererOptions: SyncedBlockRendererOptions | undefined;
     syncBlockStoreManager: SyncBlockStoreManager;
-}) => React.JSX.Element;
+};
+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 UseFetchSyncBlockDataResult } from '@atlaskit/editor-synced-block-provider';
+import type { SyncedBlockRendererOptions } from '../types';
 export type SyncedBlockRendererProps = {
     syncBlockRendererDataProviders: SyncedBlockRendererDataProviders;
+    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.1.0",
+	"version": "3.1.2",
 	"description": "SyncedBlockRenderer for @atlaskit/editor-plugin-synced-block",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,6 +30,7 @@
 	"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.6.0",
 		"@atlaskit/heading": "^5.2.0",