@atlaskit/renderer 95.0.1 → 96.0.0

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

@@ -9,6 +9,7 @@ import { shadowClassNames } from '@atlaskit/editor-common/ui';
 import { editorFontSize, blockNodesVerticalMargin, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, gridMediumMaxWidth, akEditorFullWidthLayoutWidth, akEditorStickyHeaderZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { RendererCssClassName } from '../../consts';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
+import { shadowObserverClassNames } from '@atlaskit/editor-common/ui';
 export const FullPagePadding = 32;
 
 const getLineHeight = fontCode => headingSizesImport[fontCode].lineHeight / headingSizesImport[fontCode].size;
@@ -201,11 +202,11 @@ const tableSortableColumnStyle = ({
           margin-top: 0;
         }
 
-        > .ProseMirror-gapcursor.-right:first-child + * {
+        > .ProseMirror-gapcursor.-right:first-of-type + * {
           margin-top: 0;
         }
 
-        > .ProseMirror-gapcursor:first-child + span + * {
+        > .ProseMirror-gapcursor:first-of-type + span + * {
           margin-top: 0;
         }
 
@@ -469,6 +470,11 @@ export const rendererStyles = wrapperProps => theme => {
       .${TableSharedCssClassName.TABLE_NODE_WRAPPER} {
         overflow-x: auto;
       }
+
+      .${shadowObserverClassNames.SHADOW_CONTAINER}
+        .${TableSharedCssClassName.TABLE_NODE_WRAPPER} {
+        display: flex;
+      }
     }
 
     ${tableSharedStyle(themeProps)}
@@ -486,6 +492,13 @@ export const rendererStyles = wrapperProps => theme => {
         z-index: ${akEditorStickyHeaderZIndex};
       }
 
+      &
+        .${shadowObserverClassNames.SENTINEL_LEFT},
+        &
+        .${shadowObserverClassNames.SENTINEL_RIGHT} {
+        height: calc(100% - ${tableMarginTop}px);
+      }
+
       /**
      * A hack for making all the <th /> heights equal in case some have shorter
      * content than others.
@@ -499,7 +512,7 @@ export const rendererStyles = wrapperProps => theme => {
         margin-right: 0;
       }
 
-      table tr:first-child {
+      table tr:first-of-type {
         height: 100%;
 
         td,

package/dist/es2019/ui/annotations/hooks/use-events.js

@@ -19,7 +19,7 @@ export const useAnnotationStateByTypeEvent = ({
       }
 
       const nextStates = Object.values(payload).reduce((acc, curr) => {
-        if (curr.annotationType === type) {
+        if (curr.id && curr.annotationType === type) {
           // Check for empty state to prevent additional renders
           const isEmpty = curr.state === null || curr.state === undefined;
           return { ...acc,
@@ -83,7 +83,7 @@ export const useAnnotationClickEvent = props => {
       annotationIds,
       eventTarget
     }) => {
-      const annotationsByType = annotationIds.map(id => ({
+      const annotationsByType = annotationIds.filter(id => !!id).map(id => ({
         id,
         type: AnnotationTypes.INLINE_COMMENT
       }));

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "95.0.1",
+	"version": "96.0.0",
 	"sideEffects": false
 }

package/dist/esm/react/index.js

@@ -179,7 +179,6 @@ var ReactSerializer = /*#__PURE__*/function () {
     this.appearance = init.appearance;
     this.disableHeadingIDs = init.disableHeadingIDs;
     this.disableActions = init.disableActions;
-    this.allowDynamicTextSizing = init.allowDynamicTextSizing;
     this.allowHeadingAnchorLinks = init.allowHeadingAnchorLinks;
     this.allowCopyToClipboard = init.allowCopyToClipboard;
     this.allowPlaceholderText = init.allowPlaceholderText;
@@ -550,7 +549,6 @@ var ReactSerializer = /*#__PURE__*/function () {
         rendererContext: this.rendererContext,
         serializer: this,
         content: node.content ? node.content.toJSON() : undefined,
-        allowDynamicTextSizing: this.allowDynamicTextSizing,
         allowHeadingAnchorLinks: this.allowHeadingAnchorLinks,
         allowCopyToClipboard: this.allowCopyToClipboard,
         allowPlaceholderText: this.allowPlaceholderText,

package/dist/esm/react/nodes/embedCard.js

@@ -8,8 +8,8 @@ var _templateObject, _templateObject2;
 import { css, jsx } from '@emotion/react';
 import { useMemo, useContext, useState, useRef } from 'react';
 import { Card, Context as CardContext, EmbedResizeMessageListener } from '@atlaskit/smart-card';
-import { WidthConsumer, mapBreakpointToLayoutMaxWidth, UnsupportedBlock, MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
-import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH, getAkEditorFullPageMaxWidth } from '@atlaskit/editor-shared-styles';
+import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { getPlatform } from '../../utils';
 import { CardErrorBoundary } from './fallback';
 import { FullPagePadding } from '../../ui/Renderer/style';
@@ -24,7 +24,6 @@ export default function EmbedCard(props) {
       layout = props.layout,
       width = props.width,
       isInsideOfBlockNode = props.isInsideOfBlockNode,
-      allowDynamicTextSizing = props.allowDynamicTextSizing,
       rendererAppearance = props.rendererAppearance;
   var embedIframeRef = useRef(null);
   var onClick = getCardClickHandler(eventHandlers, url);
@@ -103,10 +102,8 @@ export default function EmbedCard(props) {
     if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
       var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= akEditorDefaultLayoutWidth;
 
-      if (isContainerSizeGreaterThanMaxFullPageWidth && allowDynamicTextSizing) {
-        nonFullWidthSize = mapBreakpointToLayoutMaxWidth(breakpoint);
-      } else if (isContainerSizeGreaterThanMaxFullPageWidth) {
-        nonFullWidthSize = getAkEditorFullPageMaxWidth(allowDynamicTextSizing);
+      if (isContainerSizeGreaterThanMaxFullPageWidth) {
+        nonFullWidthSize = akEditorDefaultLayoutWidth;
       } else {
         nonFullWidthSize = containerWidth - padding;
       }

package/dist/esm/react/nodes/inlineCard.js

@@ -6,6 +6,7 @@ import { UnsupportedInline } from '@atlaskit/editor-common/ui';
 import { CardErrorBoundary } from './fallback';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
+import { useFeatureFlags } from '../../use-feature-flags';
 
 var InlineCard = function InlineCard(props) {
   var url = props.url,
@@ -20,6 +21,7 @@ var InlineCard = function InlineCard(props) {
     onClick: onClick,
     container: portal
   };
+  var featureFlags = useFeatureFlags();
 
   if (smartLinks !== null && smartLinks !== void 0 && smartLinks.ssr && url) {
     return /*#__PURE__*/React.createElement(CardSSR, {
@@ -35,7 +37,8 @@ var InlineCard = function InlineCard(props) {
   }, /*#__PURE__*/React.createElement(CardErrorBoundary, _extends({
     unsupportedComponent: UnsupportedInline
   }, cardProps), /*#__PURE__*/React.createElement(Card, _extends({
-    appearance: "inline"
+    appearance: "inline",
+    showHoverPreview: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.showHoverPreview
   }, cardProps, {
     onResolve: function onResolve(data) {
       if (!data.url || !data.title) {

package/dist/esm/react/nodes/mediaInline.js

@@ -1,13 +1,17 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useState } from 'react';
 import { MediaInlineCard } from '@atlaskit/media-card';
+import { MediaInlineCardErroredView, MediaInlineCardLoadingView, messages } from '@atlaskit/media-ui';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { getClipboardAttrs } from '../../ui/MediaCard';
+import { createIntl, injectIntl } from 'react-intl-next';
 export var RenderMediaInline = function RenderMediaInline(props) {
   var mediaProvider = props.mediaProvider;
 
-  var _useState = useState({}),
+  var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
       viewMediaClientConfigState = _useState2[0],
       setViewMediaClientConfigState = _useState2[1];
@@ -47,6 +51,18 @@ export var RenderMediaInline = function RenderMediaInline(props) {
       return _ref.apply(this, arguments);
     };
   }();
+  /*
+   * Only show the loading view if the media provider is not ready
+   * prevents calling the media API before the provider is ready
+   */
+
+
+  if (!viewMediaClientConfigState) {
+    return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
+      message: "",
+      isSelected: false
+    });
+  }
 
   return /*#__PURE__*/React.createElement(MediaInlineCard, {
     identifier: props.identifier,
@@ -58,17 +74,33 @@ export var RenderMediaInline = function RenderMediaInline(props) {
 var MediaInline = function MediaInline(props) {
   var collection = props.collection,
       id = props.id,
-      providers = props.providers;
+      providers = props.providers,
+      intl = props.intl;
   var identifier = {
     id: id,
     mediaItemType: 'file',
     collectionName: collection
   };
-  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(WithProviders, {
+  var defaultIntl = createIntl({
+    locale: 'en'
+  });
+  return /*#__PURE__*/React.createElement("span", _extends({}, getClipboardAttrs({
+    id: id,
+    collection: collection
+  }), {
+    "data-node-type": "mediaInline"
+  }), /*#__PURE__*/React.createElement(WithProviders, {
     providers: ['mediaProvider'],
     providerFactory: providers,
     renderNode: function renderNode(providers) {
       var mediaProvider = providers.mediaProvider;
+
+      if (!mediaProvider) {
+        return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
+          message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file)
+        });
+      }
+
       return /*#__PURE__*/React.createElement(RenderMediaInline, {
         identifier: identifier,
         mediaProvider: mediaProvider
@@ -77,4 +109,4 @@ var MediaInline = function MediaInline(props) {
   }));
 };
 
-export default MediaInline;
+export default injectIntl(MediaInline);

package/dist/esm/react/nodes/mediaSingle/index.js

@@ -5,8 +5,8 @@ import { default as React, Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
-import { mapBreakpointToLayoutMaxWidth, getBreakpoint, MediaSingle as UIMediaSingle, WidthConsumer } from '@atlaskit/editor-common/ui';
-import { akEditorFullWidthLayoutWidth, getAkEditorFullPageMaxWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { MediaSingle as UIMediaSingle, WidthConsumer } from '@atlaskit/editor-common/ui';
+import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { FullPagePadding } from '../../../ui/Renderer/style';
 import { useObservedWidth } from '../../hooks/use-observed-width';
 import { uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles } from './styles';
@@ -51,7 +51,6 @@ var MediaSingle = function MediaSingle(props) {
   var rendererAppearance = props.rendererAppearance,
       featureFlags = props.featureFlags,
       isInsideOfBlockNode = props.isInsideOfBlockNode,
-      allowDynamicTextSizing = props.allowDynamicTextSizing,
       layout = props.layout,
       children = props.children,
       pctWidth = props.width;
@@ -129,7 +128,6 @@ var MediaSingle = function MediaSingle(props) {
 
   var calcDimensions = function calcDimensions(mediaContainerWidth, mediaBreakpoint) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
-    var breakpoint = mediaBreakpoint || getBreakpoint(containerWidth);
     var maxWidth = containerWidth;
     var maxHeight = height / width * maxWidth;
     var cardDimensions = {
@@ -139,12 +137,10 @@ var MediaSingle = function MediaSingle(props) {
     var nonFullWidthSize = containerWidth;
 
     if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
-      var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= getAkEditorFullPageMaxWidth(allowDynamicTextSizing);
+      var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= akEditorDefaultLayoutWidth;
 
-      if (isContainerSizeGreaterThanMaxFullPageWidth && allowDynamicTextSizing) {
-        nonFullWidthSize = mapBreakpointToLayoutMaxWidth(breakpoint);
-      } else if (isContainerSizeGreaterThanMaxFullPageWidth) {
-        nonFullWidthSize = getAkEditorFullPageMaxWidth(allowDynamicTextSizing);
+      if (isContainerSizeGreaterThanMaxFullPageWidth) {
+        nonFullWidthSize = akEditorDefaultLayoutWidth;
       } else {
         nonFullWidthSize = containerWidth - padding;
       }

package/dist/esm/react/nodes/table/colgroup.js

@@ -14,11 +14,7 @@ var getTableLayoutWidth = function getTableLayoutWidth(layout, opts) {
       return akEditorWideLayoutWidth;
 
     default:
-      var _ref = opts || {},
-          containerWidth = _ref.containerWidth,
-          isDynamicTextSizingEnabled = _ref.isDynamicTextSizingEnabled;
-
-      return calcLineLength(containerWidth, isDynamicTextSizingEnabled);
+      return calcLineLength();
   }
 };
 
@@ -44,10 +40,10 @@ var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWi
   columnWidth - tableCellBorderWidth, zeroWidthColumnsCount ? akEditorTableLegacyCellMinWidth : tableCellMinWidth);
 };
 
-export var calcScalePercent = function calcScalePercent(_ref2) {
-  var renderWidth = _ref2.renderWidth,
-      tableWidth = _ref2.tableWidth,
-      maxScale = _ref2.maxScale;
+export var calcScalePercent = function calcScalePercent(_ref) {
+  var renderWidth = _ref.renderWidth,
+      tableWidth = _ref.tableWidth,
+      maxScale = _ref.maxScale;
   var diffPercent = 1 - renderWidth / tableWidth;
   return diffPercent < maxScale ? diffPercent : maxScale;
 };
@@ -55,8 +51,7 @@ export var Colgroup = function Colgroup(props) {
   var columnWidths = props.columnWidths,
       layout = props.layout,
       isNumberColumnEnabled = props.isNumberColumnEnabled,
-      renderWidth = props.renderWidth,
-      allowDynamicTextSizing = props.allowDynamicTextSizing;
+      renderWidth = props.renderWidth;
 
   if (!columnWidths || !isTableResized(columnWidths)) {
     return null;
@@ -64,7 +59,6 @@ export var Colgroup = function Colgroup(props) {
 
 
   var layoutWidth = getTableLayoutWidth(layout, {
-    isDynamicTextSizingEnabled: allowDynamicTextSizing,
     containerWidth: renderWidth
   });
   var maxTableWidth = renderWidth < layoutWidth ? renderWidth : layoutWidth; // If table has a layout of default, it is confined by the defined column width.

package/dist/esm/react/nodes/table/sticky.js

@@ -54,7 +54,6 @@ export var StickyTable = function StickyTable(_ref) {
       children = _ref.children,
       columnWidths = _ref.columnWidths,
       renderWidth = _ref.renderWidth,
-      allowDynamicTextSizing = _ref.allowDynamicTextSizing,
       rowHeight = _ref.rowHeight;
   return jsx("div", {
     css: {
@@ -67,7 +66,7 @@ export var StickyTable = function StickyTable(_ref) {
     mode: rowHeight > 300 ? 'none' : mode,
     wrapperWidth: wrapperWidth
   }, jsx("div", {
-    className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(shadowClassNames),
+    className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(shadowClassNames || ''),
     "data-layout": layout,
     style: {
       width: tableWidth
@@ -82,8 +81,7 @@ export var StickyTable = function StickyTable(_ref) {
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
-    renderWidth: renderWidth,
-    allowDynamicTextSizing: allowDynamicTextSizing
+    renderWidth: renderWidth
   },
   /**
    * @see https://product-fabric.atlassian.net/browse/ED-10235

package/dist/esm/react/nodes/table/table.js

@@ -6,7 +6,6 @@ export var Table = /*#__PURE__*/React.memo(function (_ref) {
       columnWidths = _ref.columnWidths,
       layout = _ref.layout,
       renderWidth = _ref.renderWidth,
-      allowDynamicTextSizing = _ref.allowDynamicTextSizing,
       children = _ref.children;
   return /*#__PURE__*/React.createElement("table", {
     "data-number-column": isNumberColumnEnabled,
@@ -15,7 +14,6 @@ export var Table = /*#__PURE__*/React.memo(function (_ref) {
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
-    renderWidth: renderWidth,
-    allowDynamicTextSizing: allowDynamicTextSizing
+    renderWidth: renderWidth
   }), /*#__PURE__*/React.createElement("tbody", null, children));
 });

package/dist/esm/react/nodes/table.js

@@ -293,13 +293,12 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
           isNumberColumnEnabled = _this$props.isNumberColumnEnabled,
           layout = _this$props.layout,
           renderWidth = _this$props.renderWidth,
-          allowDynamicTextSizing = _this$props.allowDynamicTextSizing,
           columnWidths = _this$props.columnWidths,
           stickyHeaders = _this$props.stickyHeaders,
           tableNode = _this$props.tableNode;
       var stickyMode = this.state.stickyMode;
       var tableWidth = calcTableWidth(layout, renderWidth, false);
-      var lineLength = calcLineLength(renderWidth, allowDynamicTextSizing);
+      var lineLength = calcLineLength();
       var left;
 
       if (canUseLinelength(this.props.rendererAppearance) && tableWidth !== 'inherit') {
@@ -322,10 +321,9 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         innerRef: this.stickyWrapperRef,
         wrapperWidth: wrapperWidth,
         columnWidths: columnWidths,
-        rowHeight: this.headerRowHeight,
-        allowDynamicTextSizing: allowDynamicTextSizing
+        rowHeight: this.headerRowHeight
       }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
-        className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames),
+        className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
         "data-layout": layout,
         ref: this.props.handleRef,
         style: {
@@ -341,8 +339,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         columnWidths: columnWidths,
         layout: layout,
         isNumberColumnEnabled: isNumberColumnEnabled,
-        renderWidth: renderWidth,
-        allowDynamicTextSizing: allowDynamicTextSizing
+        renderWidth: renderWidth
       }, this.grabFirstRowRef(children)))));
     }
   }]);
@@ -425,14 +422,28 @@ export var TableProcessor = /*#__PURE__*/function (_React$Component2) {
   return TableProcessor;
 }(React.Component);
 var TableWithShadows = overflowShadow(TableProcessor, {
-  overflowSelector: ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER)
+  overflowSelector: ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER),
+  useShadowObserver: true
 });
 
 var TableWithWidth = function TableWithWidth(props) {
   return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
+    var _props$columnWidths;
+
     var width = _ref2.width;
     var renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
-    return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
+    var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
+      return total + val;
+    }, 0)) || 0;
+
+    if (colWidthsSum) {
+      return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
+        renderWidth: renderWidth
+      }, props));
+    } // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
+
+
+    return /*#__PURE__*/React.createElement(TableProcessor, _extends({
       renderWidth: renderWidth
     }, props));
   });

package/dist/esm/react/nodes/tableCell.js

@@ -146,8 +146,10 @@ export var withSortableColumn = function withSortableColumn(WrapperComponent) {
 
       _defineProperty(_assertThisInitialized(_this), "onKeyPress", function (event) {
         var keys = [' ', 'Enter', 'Spacebar'];
+        var _ref = event.target,
+            tagName = _ref.tagName; // trigger sorting if space or enter are clicked but not when in an input field (template variables)
 
-        if (keys.includes(event.key)) {
+        if (keys.includes(event.key) && !IgnoreSorting.includes(tagName)) {
           event.preventDefault();
 
           _this.onClick(event);
@@ -156,8 +158,8 @@ export var withSortableColumn = function withSortableColumn(WrapperComponent) {
 
       _defineProperty(_assertThisInitialized(_this), "onClick", function (event) {
         // ignore sorting when specific elements are clicked
-        var _ref = event.target,
-            tagName = _ref.tagName;
+        var _ref2 = event.target,
+            tagName = _ref2.tagName;
 
         if (IgnoreSorting.includes(tagName)) {
           return;

package/dist/esm/render-document.js

@@ -6,7 +6,7 @@ import { validateADFEntity, findAndTrackUnsupportedContentNodes } from '@atlaski
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from './analytics/enums';
 import { PLATFORM } from './analytics/events';
 import { trackUnsupportedContentLevels } from './analytics/unsupported-content';
-import { transformMediaLinkMarks } from '@atlaskit/adf-utils';
+import { transformMediaLinkMarks } from '@atlaskit/adf-utils/transforms';
 var SUPPORTS_HIRES_TIMER_API = !!(window.performance && performance.now);
 
 var withStopwatch = function withStopwatch(cb) {

package/dist/esm/ui/MediaCard.js

@@ -17,7 +17,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React, { Component } from 'react';
-import { filter } from '@atlaskit/adf-utils';
+import { filter } from '@atlaskit/adf-utils/traverse';
 import { Card, CardLoading, CardError } from '@atlaskit/media-card';
 import { getMediaClient } from '@atlaskit/media-client';
 import { withImageLoader } from '@atlaskit/editor-common/utils';

package/dist/esm/ui/Renderer/breakout-ssr.js

@@ -7,9 +7,7 @@ import { breakoutConsts } from '@atlaskit/editor-common/utils';
  * More info: https://product-fabric.atlassian.net/wiki/spaces/E/pages/1216218119/Renderer+SSR+for+Breakout+Nodes
  */
 
-export function BreakoutSSRInlineScript(_ref) {
-  var allowDynamicTextSizing = _ref.allowDynamicTextSizing;
-
+export function BreakoutSSRInlineScript() {
   /**
    * Should only inline this script while SSR,
    * not needed on the client side.
@@ -19,7 +17,7 @@ export function BreakoutSSRInlineScript(_ref) {
   }
 
   var id = Math.floor(Math.random() * (9999999999 - 9999 + 1)) + 9999;
-  var context = createBreakoutInlineScript(id, allowDynamicTextSizing);
+  var context = createBreakoutInlineScript(id);
   return /*#__PURE__*/React.createElement("script", {
     "data-breakout-script-id": id,
     dangerouslySetInnerHTML: {
@@ -27,12 +25,12 @@ export function BreakoutSSRInlineScript(_ref) {
     }
   });
 }
-export function createBreakoutInlineScript(id, allowDynamicTextSizing) {
-  return "\n  (function(window){\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", ").concat(allowDynamicTextSizing, ", breakoutConsts);\n  })(window);\n");
+export function createBreakoutInlineScript(id) {
+  return "\n  (function(window){\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts);\n  })(window);\n");
 }
 export var breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.stringify(breakoutConsts), ";\n  breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n  breakoutConsts.getBreakpoint = ").concat(breakoutConsts.getBreakpoint.toString(), ";\n  breakoutConsts.calcBreakoutWidth = ").concat(breakoutConsts.calcBreakoutWidth.toString(), ";\n  breakoutConsts.calcLineLength = ").concat(breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(breakoutConsts.calcWideWidth.toString(), ";\n");
 
-function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
+function applyBreakoutAfterSSR(id, breakoutConsts) {
   var MEDIA_NODE_TYPE = 'mediaSingle';
   var WIDE_LAYOUT_MODES = ['full-width', 'wide'];
 
@@ -86,7 +84,7 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
           // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
 
           if (node.classList.contains('pm-table-container')) {
-            var lineLength = breakoutConsts.calcLineLength(renderer.offsetWidth, allowDynamicTextSizing);
+            var lineLength = breakoutConsts.calcLineLength();
             var left = lineLength / 2 - parseInt(width) / 2;
 
             if (left < 0) {

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

@@ -20,7 +20,7 @@ import React, { Fragment, useContext, useLayoutEffect, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
-import { reduce } from '@atlaskit/adf-utils';
+import { reduce } from '@atlaskit/adf-utils/traverse';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, IntlErrorBoundary } from '@atlaskit/editor-common/ui';
 import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI } from '@atlaskit/editor-common/utils';
@@ -217,7 +217,6 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         appearance: props.appearance,
         disableHeadingIDs: props.disableHeadingIDs,
         disableActions: props.disableActions,
-        allowDynamicTextSizing: props.allowDynamicTextSizing,
         allowHeadingAnchorLinks: props.allowHeadingAnchorLinks,
         allowColumnSorting: props.allowColumnSorting,
         fireAnalyticsEvent: this.fireAnalyticsEvent,
@@ -246,7 +245,6 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           onError = _this$props.onError,
           appearance = _this$props.appearance,
           adfStage = _this$props.adfStage,
-          allowDynamicTextSizing = _this$props.allowDynamicTextSizing,
           truncated = _this$props.truncated,
           maxHeight = _this$props.maxHeight,
           fadeOutHeight = _this$props.fadeOutHeight,
@@ -328,7 +326,6 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           }
         }, jsx(SmartCardStorageProvider, null, jsx(RendererWrapper, {
           appearance: appearance,
-          dynamicTextSizing: !!allowDynamicTextSizing,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
           allowColumnSorting: allowColumnSorting,
           allowCopyToClipboard: allowCopyToClipboard,
@@ -337,9 +334,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           innerRef: this.editorRef,
           onClick: handleWrapperOnClick,
           onMouseDown: this.onMouseDownEditView
-        }, enableSsrInlineScripts ? jsx(BreakoutSSRInlineScript, {
-          allowDynamicTextSizing: !!allowDynamicTextSizing
-        }) : null, jsx(RendererActionsInternalUpdater, {
+        }, enableSsrInlineScripts ? jsx(BreakoutSSRInlineScript, null) : null, jsx(RendererActionsInternalUpdater, {
           doc: pmDoc,
           schema: schema,
           onAnalyticsEvent: this.fireAnalyticsEvent
@@ -364,7 +359,6 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
 
         return jsx(RendererWrapper, {
           appearance: appearance,
-          dynamicTextSizing: !!allowDynamicTextSizing,
           allowCopyToClipboard: allowCopyToClipboard,
           allowPlaceholderText: allowPlaceholderText,
           allowColumnSorting: allowColumnSorting,
@@ -417,7 +411,6 @@ var RendererWithAnalytics = /*#__PURE__*/React.memo(function (props) {
 });
 var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
   var allowColumnSorting = props.allowColumnSorting,
-      dynamicTextSizing = props.dynamicTextSizing,
       allowNestedHeaderLinks = props.allowNestedHeaderLinks,
       innerRef = props.innerRef,
       appearance = props.appearance,
@@ -427,8 +420,7 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
   return jsx(WidthProvider, {
     className: "ak-renderer-wrapper"
   }, jsx(BaseTheme, {
-    dynamicTextSizing: dynamicTextSizing,
-    baseFontSize: !dynamicTextSizing && appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
+    baseFontSize: appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
   }, jsx("div", {
     ref: innerRef,
     onClick: onClick,