@atlaskit/renderer 91.0.0 → 93.0.0

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

@@ -1,20 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { useContext, useLayoutEffect, useRef } from 'react';
+
+/** @jsx jsx */
+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 { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking } from '@atlaskit/editor-common/utils';
+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 { Wrapper } 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';
@@ -32,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 {
@@ -80,6 +88,22 @@ export class Renderer extends PureComponent {
     this.editorRef = props.innerRef || /*#__PURE__*/React.createRef();
     this.id = uuid();
     startMeasure(`Renderer Render Time: ${this.id}`);
+    const _featureFlags = this.featureFlags(this.props.featureFlags).featureFlags;
+
+    if (_featureFlags !== null && _featureFlags !== void 0 && _featureFlags.rendererTtiTracking) {
+      measureTTI((tti, ttiFromInvocation, canceled) => {
+        this.fireAnalyticsEvent({
+          action: ACTION.RENDERER_TTI,
+          actionSubject: ACTION_SUBJECT.RENDERER,
+          attributes: {
+            tti,
+            ttiFromInvocation,
+            canceled
+          },
+          eventType: EVENT_TYPE.OPERATIONAL
+        });
+      });
+    }
   }
 
   anchorLinkAnalytics() {
@@ -257,6 +281,8 @@ export class Renderer extends PureComponent {
     };
 
     try {
+      var _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
+
       const schema = this.getSchema();
       const {
         result,
@@ -268,15 +294,15 @@ export class Renderer extends PureComponent {
         onComplete(stat);
       }
 
-      const rendererOutput = /*#__PURE__*/React.createElement(RendererContextProvider, {
+      const rendererOutput = jsx(RendererContextProvider, {
         value: this.featureFlags(this.props.featureFlags)
-      }, /*#__PURE__*/React.createElement(CopyTextProvider, null, /*#__PURE__*/React.createElement(ActiveHeaderIdProvider, {
+      }, jsx(CopyTextProvider, null, jsx(ActiveHeaderIdProvider, {
         value: getActiveHeadingId(allowHeadingAnchorLinks)
-      }, /*#__PURE__*/React.createElement(LegacyToNextIntlProvider, null, /*#__PURE__*/React.createElement(IntlLegacyFallbackProvider, null, /*#__PURE__*/React.createElement(AnalyticsContext.Provider, {
+      }, jsx(AnalyticsContext.Provider, {
         value: {
           fireAnalyticsEvent: event => this.fireAnalyticsEvent(event)
         }
-      }, /*#__PURE__*/React.createElement(SmartCardStorageProvider, null, /*#__PURE__*/React.createElement(RendererWrapper, {
+      }, jsx(SmartCardStorageProvider, null, jsx(RendererWrapper, {
         appearance: appearance,
         dynamicTextSizing: !!allowDynamicTextSizing,
         allowNestedHeaderLinks: allowNestedHeaderLinks,
@@ -287,23 +313,32 @@ export class Renderer extends PureComponent {
         innerRef: this.editorRef,
         onClick: handleWrapperOnClick,
         onMouseDown: this.onMouseDownEditView
-      }, enableSsrInlineScripts ? /*#__PURE__*/React.createElement(BreakoutSSRInlineScript, {
+      }, enableSsrInlineScripts ? jsx(BreakoutSSRInlineScript, {
         allowDynamicTextSizing: !!allowDynamicTextSizing
-      }) : null, /*#__PURE__*/React.createElement(RendererActionsInternalUpdater, {
+      }) : null, jsx(RendererActionsInternalUpdater, {
         doc: pmDoc,
         schema: schema,
         onAnalyticsEvent: this.fireAnalyticsEvent
-      }, result)))))))));
-      return truncated ? /*#__PURE__*/React.createElement(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);
       }
 
-      return /*#__PURE__*/React.createElement(RendererWrapper, {
+      return jsx(RendererWrapper, {
         appearance: appearance,
         dynamicTextSizing: !!allowDynamicTextSizing,
         allowCopyToClipboard: allowCopyToClipboard,
@@ -311,7 +346,7 @@ export class Renderer extends PureComponent {
         allowColumnSorting: allowColumnSorting,
         allowNestedHeaderLinks: allowNestedHeaderLinks,
         onClick: handleWrapperOnClick
-      }, /*#__PURE__*/React.createElement(UnsupportedBlock, null));
+      }, jsx(UnsupportedBlock, null));
     }
   }
 
@@ -332,7 +367,7 @@ export class Renderer extends PureComponent {
   }
 
 }
-const RendererWithAnalytics = /*#__PURE__*/React.memo(props => /*#__PURE__*/React.createElement(FabricEditorAnalyticsContext, {
+const RendererWithAnalytics = /*#__PURE__*/React.memo(props => jsx(FabricEditorAnalyticsContext, {
   data: {
     appearance: getAnalyticsAppearance(props.appearance),
     packageName: name,
@@ -340,20 +375,20 @@ const RendererWithAnalytics = /*#__PURE__*/React.memo(props => /*#__PURE__*/Reac
     componentName: 'renderer',
     editorSessionId: uuid()
   }
-}, /*#__PURE__*/React.createElement(WithCreateAnalyticsEvent, {
+}, jsx(WithCreateAnalyticsEvent, {
   render: createAnalyticsEvent => {
-    // `IntlNextErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
-    return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    // `IntlErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
+    return jsx(ErrorBoundary, {
       component: ACTION_SUBJECT.RENDERER,
       rethrowError: true,
       fallbackComponent: null,
       createAnalyticsEvent: createAnalyticsEvent
-    }, /*#__PURE__*/React.createElement(IntlNextErrorBoundary, null, /*#__PURE__*/React.createElement(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,
@@ -361,45 +396,25 @@ const RendererWithIframeFallbackWrapper = /*#__PURE__*/React.memo(props => {
     innerRef,
     appearance,
     children,
-    subscribe,
     onClick,
     onMouseDown
   } = props;
-  const renderer = /*#__PURE__*/React.createElement(WidthProvider, {
+  return jsx(WidthProvider, {
     className: "ak-renderer-wrapper"
-  }, /*#__PURE__*/React.createElement(BaseTheme, {
+  }, jsx(BaseTheme, {
     dynamicTextSizing: dynamicTextSizing,
     baseFontSize: !dynamicTextSizing && appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
-  }, /*#__PURE__*/React.createElement(Wrapper, {
-    innerRef: innerRef,
-    appearance: appearance,
-    allowNestedHeaderLinks: allowNestedHeaderLinks,
-    allowColumnSorting: !!allowColumnSorting,
+  }, jsx("div", {
+    ref: innerRef,
     onClick: onClick,
-    onMouseDown: onMouseDown
+    onMouseDown: onMouseDown,
+    css: rendererStyles({
+      appearance,
+      allowNestedHeaderLinks,
+      allowColumnSorting: !!allowColumnSorting
+    })
   }, children)));
-
-  if (!subscribe) {
-    return /*#__PURE__*/React.createElement(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 /*#__PURE__*/React.createElement(IframeWrapperConsumer, null, ({
-    subscribe
-  }) => /*#__PURE__*/React.createElement(RendererWithIframeFallbackWrapper, _extends({}, props, {
-    subscribe: subscribe
-  })));
-}
 
 function RendererActionsInternalUpdater({
   children,
@@ -430,16 +445,16 @@ const RendererWithAnnotationSelection = props => {
   const innerRef = props.innerRef || localRef;
 
   if (!allowAnnotations) {
-    return /*#__PURE__*/React.createElement(RendererWithAnalytics, _extends({
+    return jsx(RendererWithAnalytics, _extends({
       innerRef: innerRef
     }, props));
   }
 
-  return /*#__PURE__*/React.createElement(RendererActionsContext, null, /*#__PURE__*/React.createElement(AnnotationsWrapper, {
+  return jsx(RendererActionsContext, null, jsx(AnnotationsWrapper, {
     rendererRef: innerRef,
     adfDocument: adfDocument,
     annotationProvider: props.annotationProvider
-  }, /*#__PURE__*/React.createElement(RendererWithAnalytics, _extends({
+  }, jsx(RendererWithAnalytics, _extends({
     innerRef: innerRef
   }, props))));
 };