@atlaskit/renderer 114.11.1 → 114.12.0

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

@@ -8,7 +8,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { css, jsx } from '@emotion/react';
 import { B300, B400, B500, N20, N200, N30A, N40A, N60A, N800, R50, R500, Y300, Y75 } from '@atlaskit/theme/colors';
-import { FullPagePadding, rendererStyles } from './style';
+import { FullPagePadding } from './style';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { RendererCssClassName } from '../../consts';
 import { akEditorBlockquoteBorderColor, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
@@ -1735,59 +1735,36 @@ export const RendererStyleContainer = props => {
     appearance,
     allowNestedHeaderLinks,
     allowColumnSorting,
-    allowAnnotations,
-    allowTableResizing,
     useBlockRenderForCodeBlock,
     children,
     innerRef,
     testId
   } = props;
   const isAdvancedLayoutsOn = editorExperiment('advanced_layouts', true);
-  if (fg('platform_editor_emotion_refactor_renderer')) {
-    return (
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
-      jsx("div", {
-        ref: innerRef,
-        onClick: onClick,
-        onMouseDown: onMouseDown,
-        style: {
-          '--ak-renderer-base-font-size': `${getBaseFontSize(appearance)}px`,
-          '--ak-renderer-editor-font-heading-h1': `${editorUGCToken('editor.font.heading.h1')}`,
-          '--ak-renderer-editor-font-heading-h2': `${editorUGCToken('editor.font.heading.h2')}`,
-          '--ak-renderer-editor-font-heading-h3': `${editorUGCToken('editor.font.heading.h3')}`,
-          '--ak-renderer-editor-font-heading-h4': `${editorUGCToken('editor.font.heading.h4')}`,
-          '--ak-renderer-editor-font-heading-h5': `${editorUGCToken('editor.font.heading.h5')}`,
-          '--ak-renderer-editor-font-heading-h6': `${editorUGCToken('editor.font.heading.h6')}`,
-          '--ak-renderer-editor-font-normal-text': `${editorUGCToken('editor.font.body')}`
-        },
-        css: [baseStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, fg('platform-linking-visual-refresh-v1') && smartCardStylesAvatarFix,
-        // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-        fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
-        // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
-        fg('editor_inline_comments_on_inline_nodes') &&
-        // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-        fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles],
-        "data-testid": testId
-      }, children)
-    );
-  }
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
     jsx("div", {
       ref: innerRef,
       onClick: onClick,
-      onMouseDown: onMouseDown
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      ,
-      css: rendererStyles({
-        appearance,
-        allowNestedHeaderLinks,
-        allowColumnSorting: !!allowColumnSorting,
-        useBlockRenderForCodeBlock,
-        allowAnnotations: allowAnnotations,
-        allowTableResizing: allowTableResizing
-      }),
+      onMouseDown: onMouseDown,
+      style: {
+        '--ak-renderer-base-font-size': `${getBaseFontSize(appearance)}px`,
+        '--ak-renderer-editor-font-heading-h1': `${editorUGCToken('editor.font.heading.h1')}`,
+        '--ak-renderer-editor-font-heading-h2': `${editorUGCToken('editor.font.heading.h2')}`,
+        '--ak-renderer-editor-font-heading-h3': `${editorUGCToken('editor.font.heading.h3')}`,
+        '--ak-renderer-editor-font-heading-h4': `${editorUGCToken('editor.font.heading.h4')}`,
+        '--ak-renderer-editor-font-heading-h5': `${editorUGCToken('editor.font.heading.h5')}`,
+        '--ak-renderer-editor-font-heading-h6': `${editorUGCToken('editor.font.heading.h6')}`,
+        '--ak-renderer-editor-font-normal-text': `${editorUGCToken('editor.font.body')}`
+      },
+      css: [baseStyles, appearance === 'full-page' && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, fg('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, fg('platform-linking-visual-refresh-v1') && smartCardStylesAvatarFix,
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
+      // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
+      fg('editor_inline_comments_on_inline_nodes') &&
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles],
       "data-testid": testId
-    }, props.children)
+    }, children)
   );
 };

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

@@ -5,7 +5,6 @@ import { FullPagePadding } from './style';
 /**
  * Inline Script that updates breakout node width on client side,
  * before main JavaScript bundle is ready.
- *
  * More info: https://product-fabric.atlassian.net/wiki/spaces/E/pages/1216218119/Renderer+SSR+for+Breakout+Nodes
  */
 export function BreakoutSSRInlineScript({
@@ -26,26 +25,25 @@ export function BreakoutSSRInlineScript({
     }
   }
   const id = Math.floor(Math.random() * (9999999999 - 9999 + 1)) + 9999;
-  const context = createBreakoutInlineScript(id);
   return /*#__PURE__*/React.createElement("script", {
     "data-breakout-script-id": id
     // To investigate if we can replace this.
     // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
-      __html: context
+      __html: fg('platform-ssr-table-resize') ? createBreakoutInlineScript(id, true) : createBreakoutInlineScript(id)
     },
     "data-testid": "breakout-ssr-inline-script"
   });
 }
-export function createBreakoutInlineScript(id) {
+export function createBreakoutInlineScript(id, optionalFlagArg) {
   return `
 	 (function(window){
 		if(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) {
 			return;
 		}
     ${breakoutInlineScriptContext};
-    (${applyBreakoutAfterSSR.toString()})("${id}", breakoutConsts, ${Boolean(fg('platform-fix-table-ssr-resizing'))});
+    (${applyBreakoutAfterSSR.toString()})("${id}", breakoutConsts, ${optionalFlagArg !== null && optionalFlagArg !== void 0 ? optionalFlagArg : false});
   })(window);
 `;
 }
@@ -62,7 +60,7 @@ export const breakoutInlineScriptContext = `
 
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
+function applyBreakoutAfterSSR(id, breakoutConsts, isFeatureFlagEnabled) {
   const MEDIA_NODE_TYPE = 'mediaSingle';
   const WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
   function findUp(element, condition) {
@@ -76,7 +74,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
       element = element.parentElement;
     }
   }
-  const renderer = findUp(document.querySelector('[data-breakout-script-id="' + id + '"]'), elem => {
+  const renderer = findUp(document.querySelector(`[data-breakout-script-id="${id}"]`), elem => {
     var _elem$parentElement;
     return !!((_elem$parentElement = elem.parentElement) !== null && _elem$parentElement !== void 0 && _elem$parentElement.classList.contains('ak-renderer-wrapper'));
   });
@@ -88,7 +86,23 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
       if (item.target.nodeType !== Node.ELEMENT_NODE) {
         return;
       }
+      if (
+      /**
+       * The mutation observer is only called once per added node.
+       * The above condition only deals with direct children of <div class="ak-renderer-document" />
+       * When it is initially called on the direct children, not all the sub children have loaded.
+       * So nested media elements which are not immediately loaded as sub children are not available in the above conditional.
+       * Thus adding this conditional to deal with all media elements directly.
+       */
+      // Ignored via go/ees005
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
+        // Ignored via go/ees005
+        // eslint-disable-next-line @atlaskit/editor/no-as-casting
+        applyMediaBreakout(item.target);
+      }
 
+      // Remove with feature gate 'platform-ssr-table-resize'
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       if (item.target.classList.contains('ak-renderer-document')) {
@@ -108,7 +122,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
           }
 
           // When flag is on we are using CSS to calculate the table width thus don't need logic below to set the width and left.
-          if (!shouldFixTableResizing) {
+          if (!isFeatureFlagEnabled) {
             if (node.classList.contains('pm-table-container') && mode === 'custom') {
               // Ignored via go/ees005
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -147,20 +161,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldFixTableResizing) {
             }
           }
         });
-      } else if (
-      /**
-       * The mutation observer is only called once per added node.
-       * The above condition only deals with direct children of <div class="ak-renderer-document" />
-       * When it is initially called on the direct children, not all the sub children have loaded.
-       * So nested media elements which are not immediately loaded as sub children are not available in the above conditional.
-       * Thus adding this conditional to deal with all media elements directly.
-       */
-      // Ignored via go/ees005
-      // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
-        // Ignored via go/ees005
-        // eslint-disable-next-line @atlaskit/editor/no-as-casting
-        applyMediaBreakout(item.target);
       }
     });
   });

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

@@ -46,7 +46,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "114.11.1";
+const packageVersion = "114.12.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -433,6 +433,7 @@ export const RendererFunctionalComponent = props => {
     }, jsx(UnsupportedBlock, null));
   }
 };
+const RendererFunctionalComponentMemoized = /*#__PURE__*/React.memo(RendererFunctionalComponent);
 export function Renderer(props) {
   const {
     startPos
@@ -443,7 +444,8 @@ export function Renderer(props) {
   const {
     skipValidation
   } = useContext(ValidationContext) || {};
-  return jsx(RendererFunctionalComponent
+  const RendererComponent = fg('cc_perf_reduce_rerenders') ? RendererFunctionalComponentMemoized : RendererFunctionalComponent;
+  return jsx(RendererComponent
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
   , _extends({}, props, {