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

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @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

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,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,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,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,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,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,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.2",
 	"description": "SyncedBlockRenderer for @atlaskit/editor-plugin-synced-block",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",