@atlaskit/renderer 136.2.1 → 136.2.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/renderer
 
+## 136.2.2
+
+### Patch Changes
+
+- [`e2be8a7b1a21b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e2be8a7b1a21b) -
+  Under experiment `platform_editor_adf_validator_perf`, `validationOverrides` (including the
+  `allowTableInPanel` override) is built in a single `useMemo` instead of a fresh object literal per
+  render. The unstable reference made `renderDocument`'s validation memo miss, re-validating an
+  unchanged document on every render. Added a test asserting the reference stays stable across
+  re-renders.
+
+  `RendererFunctionalComponent` now takes an `allowNestedTables` boolean in place of the
+  `validationOverrides` object prop, and derives the overrides itself.
+
+- Updated dependencies
+
 ## 136.2.1
 
 ### Patch Changes

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

@@ -24,6 +24,7 @@ var _measureRender = require("@atlaskit/editor-common/performance/measure-render
 var _navigation = require("@atlaskit/editor-common/performance/navigation");
 var _useScrollToBlock = require("../hooks/useScrollToBlock");
 var _utils = require("@atlaskit/editor-common/utils");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("@atlaskit/analytics-listeners/types");
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
@@ -73,7 +74,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "136.2.0";
+var packageVersion = "136.2.1";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -473,13 +474,24 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
   }, [props.featureFlags, props.isTopLevelRenderer, createRendererContext, props.timeZone]);
   var isCollapsibleHeadingsEnabled = props.allowCollapsibleHeadings === true && ['full-page', 'full-width', 'max'].includes(props.appearance || '') && rendererContext.isTopLevelRenderer && (0, _expValEquals.expValEquals)('platform_renderer_collapsible_headings', 'isEnabled', true);
   (0, _useScrollToBlock.useScrollToBlock)(editorRef, props.document, props.scrollToBlock);
+  var allowNestedTables = props.allowNestedTables;
+  var stableValidationOverrides = (0, _react.useMemo)(function () {
+    var schema = getSchema(props.schema, props.adfStage);
+    return (0, _nesting.isPanelNestingTableSupported)(schema) ? {
+      allowNestedTables: allowNestedTables,
+      allowTableInPanel: true
+    } : {
+      allowNestedTables: allowNestedTables
+    };
+  }, [allowNestedTables, getSchema, props.schema, props.adfStage]);
+
+  // Gate read only on the table-in-panel path, the one that used to build a new object every
+  // render; elsewhere both arms are already identical. Control keeps the copy-per-render
+  // behaviour, which is what makes `renderDocument`'s validation memo miss.
+  var validationOverrides = stableValidationOverrides.allowTableInPanel && !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_adf_validator_perf') ? _objectSpread({}, stableValidationOverrides) : stableValidationOverrides;
   try {
     var _rendererContext$feat, _props$media;
     var schema = getSchema(props.schema, props.adfStage);
-    var allowTableInPanel = (0, _nesting.isPanelNestingTableSupported)(schema);
-    var validationOverrides = allowTableInPanel ? _objectSpread(_objectSpread({}, props.validationOverrides), {}, {
-      allowTableInPanel: true
-    }) : props.validationOverrides;
     var _renderDocument = (0, _.renderDocument)(props.shouldRemoveEmptySpaceAroundContent ? (0, _rendererHelper.removeEmptySpaceAroundContent)(props.document) : props.document, serializer, schema, props.adfStage, props.useSpecBasedValidator, id, _fireAnalyticsEvent, props.unsupportedContentLevelsTracking, props.appearance, props.includeNodesCountInStats, props.skipValidation, validationOverrides),
       result = _renderDocument.result,
       stat = _renderDocument.stat,
@@ -595,11 +607,6 @@ function Renderer(props) {
   var _ref = (0, _react.useContext)(_ValidationContext.ValidationContext) || {},
     skipValidation = _ref.skipValidation,
     allowNestedTables = _ref.allowNestedTables;
-  var validationOverrides = (0, _react.useMemo)(function () {
-    return {
-      allowNestedTables: allowNestedTables
-    };
-  }, [allowNestedTables]);
   return (0, _react2.jsx)(RendererFunctionalComponentWithPortalContext
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
@@ -607,7 +614,7 @@ function Renderer(props) {
     startPos: startPos,
     isTopLevelRenderer: (_props$isTopLevelRend = props.isTopLevelRenderer) !== null && _props$isTopLevelRend !== void 0 ? _props$isTopLevelRend : isTopLevelRenderer,
     skipValidation: skipValidation,
-    validationOverrides: validationOverrides
+    allowNestedTables: allowNestedTables
   }));
 }
 

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

@@ -18,6 +18,7 @@ import { getDistortedDurationMonitor } from '@atlaskit/editor-common/performance
 import { getResponseEndTime } from '@atlaskit/editor-common/performance/navigation';
 import { useScrollToBlock } from '../hooks/useScrollToBlock';
 import { getAnalyticsAppearance, getAnalyticsEventSeverity, shouldForceTracking } from '@atlaskit/editor-common/utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { FabricChannel } from '@atlaskit/analytics-listeners/types';
 import { FabricEditorAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
@@ -59,7 +60,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.1;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "136.2.0";
+const packageVersion = "136.2.1";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -462,14 +463,28 @@ export const RendererFunctionalComponent = props => {
   }), [props.featureFlags, props.isTopLevelRenderer, createRendererContext, props.timeZone]);
   const isCollapsibleHeadingsEnabled = props.allowCollapsibleHeadings === true && ['full-page', 'full-width', 'max'].includes(props.appearance || '') && rendererContext.isTopLevelRenderer && expValEquals('platform_renderer_collapsible_headings', 'isEnabled', true);
   useScrollToBlock(editorRef, props.document, props.scrollToBlock);
+  const {
+    allowNestedTables
+  } = props;
+  const stableValidationOverrides = useMemo(() => {
+    const schema = getSchema(props.schema, props.adfStage);
+    return isPanelNestingTableSupported(schema) ? {
+      allowNestedTables,
+      allowTableInPanel: true
+    } : {
+      allowNestedTables
+    };
+  }, [allowNestedTables, getSchema, props.schema, props.adfStage]);
+
+  // Gate read only on the table-in-panel path, the one that used to build a new object every
+  // render; elsewhere both arms are already identical. Control keeps the copy-per-render
+  // behaviour, which is what makes `renderDocument`'s validation memo miss.
+  const validationOverrides = stableValidationOverrides.allowTableInPanel && !isExperimentEnabled('platform_editor_adf_validator_perf') ? {
+    ...stableValidationOverrides
+  } : stableValidationOverrides;
   try {
     var _rendererContext$feat, _props$media;
     const schema = getSchema(props.schema, props.adfStage);
-    const allowTableInPanel = isPanelNestingTableSupported(schema);
-    const validationOverrides = allowTableInPanel ? {
-      ...props.validationOverrides,
-      allowTableInPanel: true
-    } : props.validationOverrides;
     const {
       result,
       stat,
@@ -585,9 +600,6 @@ export function Renderer(props) {
     skipValidation,
     allowNestedTables
   } = useContext(ValidationContext) || {};
-  const validationOverrides = useMemo(() => ({
-    allowNestedTables
-  }), [allowNestedTables]);
   return jsx(RendererFunctionalComponentWithPortalContext
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
@@ -595,7 +607,7 @@ export function Renderer(props) {
     startPos: startPos,
     isTopLevelRenderer: (_props$isTopLevelRend = props.isTopLevelRenderer) !== null && _props$isTopLevelRend !== void 0 ? _props$isTopLevelRend : isTopLevelRenderer,
     skipValidation: skipValidation,
-    validationOverrides: validationOverrides
+    allowNestedTables: allowNestedTables
   }));
 }
 

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

@@ -23,6 +23,7 @@ import { getDistortedDurationMonitor } from '@atlaskit/editor-common/performance
 import { getResponseEndTime } from '@atlaskit/editor-common/performance/navigation';
 import { useScrollToBlock } from '../hooks/useScrollToBlock';
 import { getAnalyticsAppearance, getAnalyticsEventSeverity, shouldForceTracking } from '@atlaskit/editor-common/utils';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { FabricChannel } from '@atlaskit/analytics-listeners/types';
 import { FabricEditorAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
@@ -64,7 +65,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "136.2.0";
+var packageVersion = "136.2.1";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -464,13 +465,24 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
   }, [props.featureFlags, props.isTopLevelRenderer, createRendererContext, props.timeZone]);
   var isCollapsibleHeadingsEnabled = props.allowCollapsibleHeadings === true && ['full-page', 'full-width', 'max'].includes(props.appearance || '') && rendererContext.isTopLevelRenderer && expValEquals('platform_renderer_collapsible_headings', 'isEnabled', true);
   useScrollToBlock(editorRef, props.document, props.scrollToBlock);
+  var allowNestedTables = props.allowNestedTables;
+  var stableValidationOverrides = useMemo(function () {
+    var schema = getSchema(props.schema, props.adfStage);
+    return isPanelNestingTableSupported(schema) ? {
+      allowNestedTables: allowNestedTables,
+      allowTableInPanel: true
+    } : {
+      allowNestedTables: allowNestedTables
+    };
+  }, [allowNestedTables, getSchema, props.schema, props.adfStage]);
+
+  // Gate read only on the table-in-panel path, the one that used to build a new object every
+  // render; elsewhere both arms are already identical. Control keeps the copy-per-render
+  // behaviour, which is what makes `renderDocument`'s validation memo miss.
+  var validationOverrides = stableValidationOverrides.allowTableInPanel && !isExperimentEnabled('platform_editor_adf_validator_perf') ? _objectSpread({}, stableValidationOverrides) : stableValidationOverrides;
   try {
     var _rendererContext$feat, _props$media;
     var schema = getSchema(props.schema, props.adfStage);
-    var allowTableInPanel = isPanelNestingTableSupported(schema);
-    var validationOverrides = allowTableInPanel ? _objectSpread(_objectSpread({}, props.validationOverrides), {}, {
-      allowTableInPanel: true
-    }) : props.validationOverrides;
     var _renderDocument = renderDocument(props.shouldRemoveEmptySpaceAroundContent ? removeEmptySpaceAroundContent(props.document) : props.document, serializer, schema, props.adfStage, props.useSpecBasedValidator, id, _fireAnalyticsEvent, props.unsupportedContentLevelsTracking, props.appearance, props.includeNodesCountInStats, props.skipValidation, validationOverrides),
       result = _renderDocument.result,
       stat = _renderDocument.stat,
@@ -586,11 +598,6 @@ export function Renderer(props) {
   var _ref = useContext(ValidationContext) || {},
     skipValidation = _ref.skipValidation,
     allowNestedTables = _ref.allowNestedTables;
-  var validationOverrides = useMemo(function () {
-    return {
-      allowNestedTables: allowNestedTables
-    };
-  }, [allowNestedTables]);
   return jsx(RendererFunctionalComponentWithPortalContext
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
@@ -598,7 +605,7 @@ export function Renderer(props) {
     startPos: startPos,
     isTopLevelRenderer: (_props$isTopLevelRend = props.isTopLevelRenderer) !== null && _props$isTopLevelRend !== void 0 ? _props$isTopLevelRend : isTopLevelRenderer,
     skipValidation: skipValidation,
-    validationOverrides: validationOverrides
+    allowNestedTables: allowNestedTables
   }));
 }
 

package/dist/types/ui/Renderer/index.d.ts

@@ -10,11 +10,9 @@ import type { RendererAppearance, RendererContentMode } from './types';
 export declare const NORMAL_SEVERITY_THRESHOLD = 2000;
 export declare const DEGRADED_SEVERITY_THRESHOLD = 3000;
 export declare const RendererFunctionalComponent: (props: RendererProps & {
+    allowNestedTables?: boolean;
     skipValidation?: boolean;
     startPos?: number;
-    validationOverrides?: {
-        allowNestedTables?: boolean;
-    };
 }) => jsx.JSX.Element;
 /**
  * Top-level ADF renderer: renders document content with analytics and validation context.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "136.2.1",
+	"version": "136.2.2",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -85,7 +85,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^119.14.0",
+		"@atlaskit/editor-common": "^119.15.0",
 		"@atlaskit/link-provider": "^5.4.0",
 		"@atlaskit/media-core": "^38.0.0",
 		"react": "^18.2.0",