@atlaskit/editor-synced-block-renderer 2.3.1 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-synced-block-renderer
 
+## 3.0.0
+
+### Major Changes
+
+- [`181018115c031`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/181018115c031) -
+  EDITOR-2438 Pass data providers to Synced Block nested renderer
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.3.1
 
 ### Patch Changes

package/afm-products/tsconfig.json

@@ -22,12 +22,33 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/button/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/css/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../editor-synced-block-provider/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/heading/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/image/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/primitives/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../renderer/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/tokens/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-products/tsconfig.json"
 		}

package/dist/cjs/getSyncedBlockRenderer.js

@@ -7,8 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.getSyncedBlockRenderer = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _SyncedBlockRenderer = require("./ui/SyncedBlockRenderer");
-var getSyncedBlockRenderer = exports.getSyncedBlockRenderer = function getSyncedBlockRenderer(props) {
+var getSyncedBlockRenderer = exports.getSyncedBlockRenderer = function getSyncedBlockRenderer(_ref) {
+  var syncBlockRendererDataProviders = _ref.syncBlockRendererDataProviders,
+    useFetchSyncBlockData = _ref.useFetchSyncBlockData;
   return /*#__PURE__*/_react.default.createElement(_SyncedBlockRenderer.SyncedBlockRenderer, {
-    useFetchSyncBlockData: props.useFetchSyncBlockData
+    syncBlockRendererDataProviders: syncBlockRendererDataProviders,
+    useFetchSyncBlockData: useFetchSyncBlockData
   });
 };

package/dist/cjs/ui/SyncedBlockRenderer.js

@@ -1,20 +1,56 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SyncedBlockRenderer = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.convertSyncBlockRendererDataProvidersToProviderFactory = exports.SyncedBlockRenderer = void 0;
+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 _SyncedBlockErrorComponent = require("./SyncedBlockErrorComponent");
 var _SyncedBlockLoadingState = require("./SyncedBlockLoadingState");
-var SyncedBlockRenderer = exports.SyncedBlockRenderer = function SyncedBlockRenderer(_ref) {
-  var useFetchSyncBlockData = _ref.useFetchSyncBlockData,
-    dataProviders = _ref.dataProviders;
+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 convertSyncBlockRendererDataProvidersToProviderFactory = exports.convertSyncBlockRendererDataProvidersToProviderFactory = function convertSyncBlockRendererDataProvidersToProviderFactory(dataProviders) {
+  return _providerFactory.ProviderFactory.create({
+    cardProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.cardProvider,
+    emojiProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.emojiProvider,
+    mediaProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.mediaProvider,
+    mentionProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.mentionProvider,
+    profilecardProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.profilecardProvider,
+    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 fetchResult = useFetchSyncBlockData();
+  var providerFactory = (0, _react.useMemo)(function () {
+    return convertSyncBlockRendererDataProvidersToProviderFactory(syncBlockRendererDataProviders);
+  }, [syncBlockRendererDataProviders]);
   if (!fetchResult) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
   }
@@ -25,18 +61,9 @@ var SyncedBlockRenderer = exports.SyncedBlockRenderer = function SyncedBlockRend
       resourceId: fetchResult.resourceId
     });
   }
-  var syncBlockDoc = {
-    content: fetchResult.data.content,
-    version: 1,
-    type: 'doc'
-  };
-  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: dataProviders
-  })));
-};
+  return /*#__PURE__*/_react.default.createElement(SyncedBlockRendererWrapper, {
+    fetchedData: fetchResult.data,
+    providerFactory: providerFactory
+  });
+};
+var SyncedBlockRenderer = exports.SyncedBlockRenderer = /*#__PURE__*/(0, _react.memo)(SyncedBlockRendererComponent);

package/dist/es2019/getSyncedBlockRenderer.js

@@ -1,7 +1,11 @@
 import React from 'react';
 import { SyncedBlockRenderer } from './ui/SyncedBlockRenderer';
-export const getSyncedBlockRenderer = props => {
+export const getSyncedBlockRenderer = ({
+  syncBlockRendererDataProviders,
+  useFetchSyncBlockData
+}) => {
   return /*#__PURE__*/React.createElement(SyncedBlockRenderer, {
-    useFetchSyncBlockData: props.useFetchSyncBlockData
+    syncBlockRendererDataProviders: syncBlockRendererDataProviders,
+    useFetchSyncBlockData: useFetchSyncBlockData
   });
 };

package/dist/es2019/ui/SyncedBlockRenderer.js

@@ -1,14 +1,50 @@
-import React from 'react';
+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 { SyncedBlockErrorComponent } from './SyncedBlockErrorComponent';
 import { SyncedBlockLoadingState } from './SyncedBlockLoadingState';
-export const SyncedBlockRenderer = ({
+export const convertSyncBlockRendererDataProvidersToProviderFactory = dataProviders => {
+  return ProviderFactory.create({
+    cardProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.cardProvider,
+    emojiProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.emojiProvider,
+    mediaProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.mediaProvider,
+    mentionProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.mentionProvider,
+    profilecardProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.profilecardProvider,
+    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,
-  dataProviders
+  syncBlockRendererDataProviders
 }) => {
   const fetchResult = useFetchSyncBlockData();
+  const providerFactory = useMemo(() => {
+    return convertSyncBlockRendererDataProvidersToProviderFactory(syncBlockRendererDataProviders);
+  }, [syncBlockRendererDataProviders]);
   if (!fetchResult) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
@@ -19,18 +55,9 @@ export const SyncedBlockRenderer = ({
       resourceId: fetchResult.resourceId
     });
   }
-  const syncBlockDoc = {
-    content: fetchResult.data.content,
-    version: 1,
-    type: 'doc'
-  };
-  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: dataProviders
-  })));
-};
+  return /*#__PURE__*/React.createElement(SyncedBlockRendererWrapper, {
+    fetchedData: fetchResult.data,
+    providerFactory: providerFactory
+  });
+};
+export const SyncedBlockRenderer = /*#__PURE__*/memo(SyncedBlockRendererComponent);

package/dist/esm/getSyncedBlockRenderer.js

@@ -1,7 +1,10 @@
 import React from 'react';
 import { SyncedBlockRenderer } from './ui/SyncedBlockRenderer';
-export var getSyncedBlockRenderer = function getSyncedBlockRenderer(props) {
+export var getSyncedBlockRenderer = function getSyncedBlockRenderer(_ref) {
+  var syncBlockRendererDataProviders = _ref.syncBlockRendererDataProviders,
+    useFetchSyncBlockData = _ref.useFetchSyncBlockData;
   return /*#__PURE__*/React.createElement(SyncedBlockRenderer, {
-    useFetchSyncBlockData: props.useFetchSyncBlockData
+    syncBlockRendererDataProviders: syncBlockRendererDataProviders,
+    useFetchSyncBlockData: useFetchSyncBlockData
   });
 };

package/dist/esm/ui/SyncedBlockRenderer.js

@@ -1,13 +1,48 @@
-import React from 'react';
+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 { SyncedBlockErrorComponent } from './SyncedBlockErrorComponent';
 import { SyncedBlockLoadingState } from './SyncedBlockLoadingState';
-export var SyncedBlockRenderer = function SyncedBlockRenderer(_ref) {
-  var useFetchSyncBlockData = _ref.useFetchSyncBlockData,
-    dataProviders = _ref.dataProviders;
+export var convertSyncBlockRendererDataProvidersToProviderFactory = function convertSyncBlockRendererDataProvidersToProviderFactory(dataProviders) {
+  return ProviderFactory.create({
+    cardProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.cardProvider,
+    emojiProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.emojiProvider,
+    mediaProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.mediaProvider,
+    mentionProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.mentionProvider,
+    profilecardProvider: dataProviders === null || dataProviders === void 0 ? void 0 : dataProviders.profilecardProvider,
+    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 fetchResult = useFetchSyncBlockData();
+  var providerFactory = useMemo(function () {
+    return convertSyncBlockRendererDataProvidersToProviderFactory(syncBlockRendererDataProviders);
+  }, [syncBlockRendererDataProviders]);
   if (!fetchResult) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
@@ -18,18 +53,9 @@ export var SyncedBlockRenderer = function SyncedBlockRenderer(_ref) {
       resourceId: fetchResult.resourceId
     });
   }
-  var syncBlockDoc = {
-    content: fetchResult.data.content,
-    version: 1,
-    type: 'doc'
-  };
-  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: dataProviders
-  })));
-};
+  return /*#__PURE__*/React.createElement(SyncedBlockRendererWrapper, {
+    fetchedData: fetchResult.data,
+    providerFactory: providerFactory
+  });
+};
+export var SyncedBlockRenderer = /*#__PURE__*/memo(SyncedBlockRendererComponent);

package/dist/types/getSyncedBlockRenderer.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type SyncedBlockRendererProps } from './ui/SyncedBlockRenderer';
-export declare const getSyncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
+export declare const getSyncedBlockRenderer: ({ syncBlockRendererDataProviders, useFetchSyncBlockData, }: SyncedBlockRendererProps) => React.JSX.Element;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
-export declare const SyncedBlockErrorComponent: ({ error, resourceId }: {
+export declare const SyncedBlockErrorComponent: ({ error, resourceId, }: {
     error: SyncBlockError;
     resourceId?: string;
 }) => React.JSX.Element;

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

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

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type SyncedBlockRendererProps } from './ui/SyncedBlockRenderer';
-export declare const getSyncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
+export declare const getSyncedBlockRenderer: ({ syncBlockRendererDataProviders, useFetchSyncBlockData, }: SyncedBlockRendererProps) => React.JSX.Element;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
-export declare const SyncedBlockErrorComponent: ({ error, resourceId }: {
+export declare const SyncedBlockErrorComponent: ({ error, resourceId, }: {
     error: SyncBlockError;
     resourceId?: string;
 }) => React.JSX.Element;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-synced-block-renderer",
-	"version": "2.3.1",
+	"version": "3.0.0",
 	"description": "SyncedBlockRenderer for @atlaskit/editor-plugin-synced-block",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",