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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-synced-block-renderer
 
+## 3.1.3
+
+### Patch Changes
+
+- [`6b6e2a88065e3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6b6e2a88065e3) -
+  EDITOR-2350 Enable all options in synced block renderer by default unless product/consumer
+  overrides them.
+- Updated dependencies
+
+## 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

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/ui/AKRendererWrapper.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AKRendererWrapper = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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); }
+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 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 defaultOptions = {
+  allowAltTextOnImages: true,
+  allowAnnotations: true,
+  allowColumnSorting: true,
+  allowCopyToClipboard: true,
+  allowCustomPanels: true,
+  allowPlaceholderText: true,
+  allowRendererContainerStyles: true,
+  allowSelectAllTrap: true,
+  allowUgcScrubber: true,
+  allowWrapCodeBlock: true,
+  emojiResourceConfig: undefined,
+  media: {
+    allowLinking: true,
+    allowCaptions: true,
+    featureFlags: {
+      mediaInline: true
+    }
+  },
+  smartLinks: undefined,
+  stickyHeaders: true
+};
+var AKRendererWrapper = exports.AKRendererWrapper = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
+  var doc = _ref2.doc,
+    dataProviders = _ref2.dataProviders,
+    options = _ref2.options;
+  var mergedOptions = _objectSpread(_objectSpread({}, defaultOptions), options);
+  var _ref3 = mergedOptions !== null && mergedOptions !== void 0 ? mergedOptions : {},
+    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,8 +7,7 @@ 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(_ref) {
@@ -18,22 +17,6 @@ var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer
   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;
@@ -52,31 +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": resourceId,
-    "data-local-id": localId
-  }, /*#__PURE__*/_react.default.createElement(_renderer.ReactRenderer, {
-    appearance: "full-width",
-    adfStage: "stage0",
-    document: syncBlockDoc,
-    disableHeadingIDs: true,
+  return /*#__PURE__*/_react.default.createElement(_AKRendererWrapper.AKRendererWrapper, {
+    doc: syncBlockDoc,
     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
-  })));
+    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,66 +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,
-    options = _ref.options;
-  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]);
-  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, {
-    appearance: "full-width",
-    adfStage: "stage0",
-    document: syncBlockDoc,
-    disableHeadingIDs: true,
-    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(_ref3) {
-  var useFetchSyncBlockData = _ref3.useFetchSyncBlockData,
-    syncBlockRendererDataProviders = _ref3.syncBlockRendererDataProviders,
-    syncBlockRendererOptions = _ref3.syncBlockRendererOptions;
+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) {
@@ -95,9 +41,14 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref3)
       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
   });
 };

package/dist/es2019/ui/AKRendererWrapper.js

@@ -0,0 +1,86 @@
+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);
+};
+const defaultOptions = {
+  allowAltTextOnImages: true,
+  allowAnnotations: true,
+  allowColumnSorting: true,
+  allowCopyToClipboard: true,
+  allowCustomPanels: true,
+  allowPlaceholderText: true,
+  allowRendererContainerStyles: true,
+  allowSelectAllTrap: true,
+  allowUgcScrubber: true,
+  allowWrapCodeBlock: true,
+  emojiResourceConfig: undefined,
+  media: {
+    allowLinking: true,
+    allowCaptions: true,
+    featureFlags: {
+      mediaInline: true
+    }
+  },
+  smartLinks: undefined,
+  stickyHeaders: true
+};
+export const AKRendererWrapper = /*#__PURE__*/memo(({
+  doc,
+  dataProviders,
+  options
+}) => {
+  const mergedOptions = {
+    ...defaultOptions,
+    ...options
+  };
+  const {
+    allowAltTextOnImages,
+    allowAnnotations,
+    allowColumnSorting,
+    allowCopyToClipboard,
+    allowCustomPanels,
+    allowHeadingAnchorLinks,
+    allowPlaceholderText,
+    allowRendererContainerStyles,
+    allowSelectAllTrap,
+    allowUgcScrubber,
+    allowWrapCodeBlock,
+    emojiResourceConfig,
+    media,
+    smartLinks,
+    stickyHeaders
+  } = mergedOptions !== null && mergedOptions !== void 0 ? mergedOptions : {};
+  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,7 +1,6 @@
 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 = ({
@@ -14,23 +13,6 @@ export const SyncedBlockNodeComponentRenderer = ({
     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
@@ -50,31 +32,9 @@ export const SyncedBlockNodeComponentRenderer = ({
     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": resourceId,
-    "data-local-id": localId
-  }, /*#__PURE__*/React.createElement(ReactRenderer, {
-    appearance: "full-width",
-    adfStage: "stage0",
-    document: syncBlockDoc,
-    disableHeadingIDs: true,
+  return /*#__PURE__*/React.createElement(AKRendererWrapper, {
+    doc: syncBlockDoc,
     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
-  })));
+    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,61 +14,6 @@ export const convertSyncBlockRendererDataProvidersToProviderFactory = dataProvid
     taskDecisionProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.taskDecisionProvider
   });
 };
-const SyncedBlockRendererWrapper = ({
-  fetchedData,
-  providerFactory,
-  options
-}) => {
-  const syncBlockDoc = useMemo(() => {
-    var _fetchedData$content;
-    return {
-      content: (_fetchedData$content = fetchedData.content) !== null && _fetchedData$content !== void 0 ? _fetchedData$content : [],
-      version: 1,
-      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, {
-    appearance: "full-width",
-    adfStage: "stage0",
-    document: syncBlockDoc,
-    disableHeadingIDs: true,
-    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,
@@ -78,7 +22,7 @@ const SyncedBlockRendererComponent = ({
   const {
     syncBlockInstance
   } = useFetchSyncBlockData();
-  const providerFactory = useMemo(() => {
+  const dataProviders = useMemo(() => {
     return convertSyncBlockRendererDataProvidersToProviderFactory(syncBlockRendererDataProviders);
   }, [syncBlockRendererDataProviders]);
   if (!syncBlockInstance) {
@@ -91,9 +35,14 @@ 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
   });
 };

package/dist/esm/ui/AKRendererWrapper.js

@@ -0,0 +1,85 @@
+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 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);
+};
+var defaultOptions = {
+  allowAltTextOnImages: true,
+  allowAnnotations: true,
+  allowColumnSorting: true,
+  allowCopyToClipboard: true,
+  allowCustomPanels: true,
+  allowPlaceholderText: true,
+  allowRendererContainerStyles: true,
+  allowSelectAllTrap: true,
+  allowUgcScrubber: true,
+  allowWrapCodeBlock: true,
+  emojiResourceConfig: undefined,
+  media: {
+    allowLinking: true,
+    allowCaptions: true,
+    featureFlags: {
+      mediaInline: true
+    }
+  },
+  smartLinks: undefined,
+  stickyHeaders: true
+};
+export var AKRendererWrapper = /*#__PURE__*/memo(function (_ref2) {
+  var doc = _ref2.doc,
+    dataProviders = _ref2.dataProviders,
+    options = _ref2.options;
+  var mergedOptions = _objectSpread(_objectSpread({}, defaultOptions), options);
+  var _ref3 = mergedOptions !== null && mergedOptions !== void 0 ? mergedOptions : {},
+    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,7 +1,6 @@
 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(_ref) {
@@ -11,22 +10,6 @@ export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentR
   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;
@@ -45,31 +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": resourceId,
-    "data-local-id": localId
-  }, /*#__PURE__*/React.createElement(ReactRenderer, {
-    appearance: "full-width",
-    adfStage: "stage0",
-    document: syncBlockDoc,
-    disableHeadingIDs: true,
+  return /*#__PURE__*/React.createElement(AKRendererWrapper, {
+    doc: syncBlockDoc,
     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
-  })));
+    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,66 +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,
-    options = _ref.options;
-  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]);
-  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, {
-    appearance: "full-width",
-    adfStage: "stage0",
-    document: syncBlockDoc,
-    disableHeadingIDs: true,
-    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(_ref3) {
-  var useFetchSyncBlockData = _ref3.useFetchSyncBlockData,
-    syncBlockRendererDataProviders = _ref3.syncBlockRendererDataProviders,
-    syncBlockRendererOptions = _ref3.syncBlockRendererOptions;
+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) {
@@ -87,9 +33,14 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref3)
       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
   });
 };

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-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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-synced-block-renderer",
-	"version": "3.1.1",
+	"version": "3.1.3",
 	"description": "SyncedBlockRenderer for @atlaskit/editor-plugin-synced-block",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,12 +32,12 @@
 		"@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/editor-synced-block-provider": "^2.7.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/primitives": "^16.1.0",
-		"@atlaskit/renderer": "^124.9.0",
+		"@atlaskit/renderer": "^124.10.0",
 		"@atlaskit/tokens": "^7.1.0",
 		"@babel/runtime": "^7.0.0",
 		"react-relay": "npm:atl-react-relay@0.0.0-main-5980a913",