@atlaskit/renderer 92.0.1 → 93.0.0

package/dist/es2019/ui/Renderer/index.js

@@ -2,22 +2,21 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
-import React, { useContext, useLayoutEffect, useRef } from 'react';
+import React, { Fragment, useContext, useLayoutEffect, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import { getSchemaBasedOnStage } from '@atlaskit/adf-schema';
 import { reduce } from '@atlaskit/adf-utils';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, LegacyToNextIntlProvider, IntlLegacyFallbackProvider, IntlNextErrorBoundary } from '@atlaskit/editor-common/ui';
+import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, IntlErrorBoundary } from '@atlaskit/editor-common/ui';
 import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI } from '@atlaskit/editor-common/utils';
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
 import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
-import { IframeWidthObserverFallbackWrapper, IframeWrapperConsumer } from '@atlaskit/width-detector';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
 import { FabricEditorAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
 import uuid from 'uuid/v4';
 import { ReactSerializer, renderDocument } from '../../';
-import { DeprecatedWrapper, rendererStyles } from './style';
+import { rendererStyles } from './style';
 import { TruncatedWrapper } from './truncated-wrapper';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics/enums';
 import { PLATFORM, MODE } from '../../analytics/events';
@@ -35,15 +34,21 @@ import { isInteractiveElement } from './click-to-edit';
 import { RendererContextProvider } from '../../renderer-context';
 import memoizeOne from 'memoize-one';
 import { ErrorBoundary } from './ErrorBoundary';
+import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);
 
-    _defineProperty(this, "featureFlags", memoizeOne(featureFlags => ({
-      featureFlags: normalizeFeatureFlags(featureFlags)
-    })));
+    _defineProperty(this, "featureFlags", memoizeOne(featureFlags => {
+      const normalizedFeatureFlags = normalizeFeatureFlags(featureFlags, {
+        objectFlagKeys: ['rendererRenderTracking']
+      });
+      return {
+        featureFlags: normalizedFeatureFlags
+      };
+    }));
 
     _defineProperty(this, "fireAnalyticsEvent", event => {
       const {
@@ -276,6 +281,8 @@ export class Renderer extends PureComponent {
     };
 
     try {
+      var _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
+
       const schema = this.getSchema();
       const {
         result,
@@ -291,7 +298,7 @@ export class Renderer extends PureComponent {
         value: this.featureFlags(this.props.featureFlags)
       }, jsx(CopyTextProvider, null, jsx(ActiveHeaderIdProvider, {
         value: getActiveHeadingId(allowHeadingAnchorLinks)
-      }, jsx(LegacyToNextIntlProvider, null, jsx(IntlLegacyFallbackProvider, null, jsx(AnalyticsContext.Provider, {
+      }, jsx(AnalyticsContext.Provider, {
         value: {
           fireAnalyticsEvent: event => this.fireAnalyticsEvent(event)
         }
@@ -312,11 +319,20 @@ export class Renderer extends PureComponent {
         doc: pmDoc,
         schema: schema,
         onAnalyticsEvent: this.fireAnalyticsEvent
-      }, result)))))))));
-      return truncated ? jsx(TruncatedWrapper, {
+      }, result)))))));
+      let rendererResult = truncated ? jsx(TruncatedWrapper, {
         height: maxHeight,
         fadeHeight: fadeOutHeight
       }, rendererOutput) : rendererOutput;
+      const rendererRenderTracking = (_this$featureFlags = this.featureFlags(this.props.featureFlags)) === null || _this$featureFlags === void 0 ? void 0 : (_this$featureFlags$fe = _this$featureFlags.featureFlags) === null || _this$featureFlags$fe === void 0 ? void 0 : (_this$featureFlags$fe2 = _this$featureFlags$fe.rendererRenderTracking) === null || _this$featureFlags$fe2 === void 0 ? void 0 : _this$featureFlags$fe2[ACTION_SUBJECT.RENDERER];
+      const reRenderTracking = (rendererRenderTracking === null || rendererRenderTracking === void 0 ? void 0 : rendererRenderTracking.enabled) && jsx(RenderTracking, {
+        componentProps: this.props,
+        action: ACTION.RE_RENDERED,
+        actionSubject: ACTION_SUBJECT.RENDERER,
+        handleAnalyticsEvent: this.fireAnalyticsEvent,
+        useShallow: rendererRenderTracking.useShallow
+      });
+      return jsx(Fragment, null, reRenderTracking, rendererResult);
     } catch (e) {
       if (onError) {
         onError(e);
@@ -361,18 +377,18 @@ const RendererWithAnalytics = /*#__PURE__*/React.memo(props => jsx(FabricEditorA
   }
 }, jsx(WithCreateAnalyticsEvent, {
   render: createAnalyticsEvent => {
-    // `IntlNextErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
+    // `IntlErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
     return jsx(ErrorBoundary, {
       component: ACTION_SUBJECT.RENDERER,
       rethrowError: true,
       fallbackComponent: null,
       createAnalyticsEvent: createAnalyticsEvent
-    }, jsx(IntlNextErrorBoundary, null, jsx(Renderer, _extends({}, props, {
+    }, jsx(IntlErrorBoundary, null, jsx(Renderer, _extends({}, props, {
       createAnalyticsEvent: createAnalyticsEvent
     }))));
   }
 })));
-const RendererWithIframeFallbackWrapper = /*#__PURE__*/React.memo(props => {
+const RendererWrapper = /*#__PURE__*/React.memo(props => {
   const {
     allowColumnSorting,
     dynamicTextSizing,
@@ -380,46 +396,25 @@ const RendererWithIframeFallbackWrapper = /*#__PURE__*/React.memo(props => {
     innerRef,
     appearance,
     children,
-    subscribe,
     onClick,
     onMouseDown
   } = props;
-  const renderer = jsx(WidthProvider, {
+  return jsx(WidthProvider, {
     className: "ak-renderer-wrapper"
   }, jsx(BaseTheme, {
     dynamicTextSizing: dynamicTextSizing,
     baseFontSize: !dynamicTextSizing && appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
-  }, jsx(DeprecatedWrapper, {
-    innerRef: innerRef,
-    appearance: appearance,
-    allowNestedHeaderLinks: allowNestedHeaderLinks,
-    allowColumnSorting: !!allowColumnSorting,
+  }, jsx("div", {
+    ref: innerRef,
     onClick: onClick,
     onMouseDown: onMouseDown,
-    css: rendererStyles
+    css: rendererStyles({
+      appearance,
+      allowNestedHeaderLinks,
+      allowColumnSorting: !!allowColumnSorting
+    })
   }, children)));
-
-  if (!subscribe) {
-    return jsx(IframeWidthObserverFallbackWrapper, null, renderer);
-  }
-
-  return renderer;
 });
-/**
- * When the product doesn't provide a IframeWidthObserverFallbackWrapper,
- * we will give one to the renderer,
- *
- * so if we have more than one `WidthProvider` on the content,
- * only one iframe will be created on the older browsers.
- */
-
-export function RendererWrapper(props) {
-  return jsx(IframeWrapperConsumer, null, ({
-    subscribe
-  }) => jsx(RendererWithIframeFallbackWrapper, _extends({}, props, {
-    subscribe: subscribe
-  })));
-}
 
 function RendererActionsInternalUpdater({
   children,