@atlaskit/renderer 126.8.10 → 126.9.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/renderer
 
+## 126.9.0
+
+### Minor Changes
+
+- [`aac76ca1cde5b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/aac76ca1cde5b) -
+  Fix hydration error with dates in task lists
+
+### Patch Changes
+
+- Updated dependencies
+
+## 126.8.11
+
+### Patch Changes
+
+- [`4ba962abdce44`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4ba962abdce44) -
+  EDITOR-4667 - Inline Bodied Extension: Remove important from existing extension width style
+- Updated dependencies
+
 ## 126.8.10
 
 ### Patch Changes

package/dist/cjs/messages.js

@@ -37,7 +37,7 @@ var headingAnchorLinkMessages = exports.headingAnchorLinkMessages = (0, _reactIn
   copyAriaLabel: {
     id: 'fabric.editor.headingLink.copyAriaLabel',
     defaultMessage: 'Copy',
-    description: 'copy aria label for link icon'
+    description: 'Aria label for the copy link button displayed next to a heading. Used by screen readers to describe the button that copies the heading anchor link to the clipboard.'
   }
 });
 var tableCellMessages = exports.tableCellMessages = (0, _reactIntlNext.defineMessages)({

package/dist/cjs/react/nodes/bodiedExtension.js

@@ -65,7 +65,8 @@ var BodiedExtension = function BodiedExtension(props) {
       if (result && /*#__PURE__*/_react.default.isValidElement(result)) {
         // Return the content directly if it's a valid JSX.Element
         return (0, _extension.renderExtension)(result, layout, {
-          isTopLevel: path.length < 1
+          isTopLevel: path.length < 1,
+          rendererAppearance: props.rendererAppearance
         }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
       }
     } catch (_unused) {
@@ -75,7 +76,8 @@ var BodiedExtension = function BodiedExtension(props) {
 
     // Always return default content if anything goes wrong
     return (0, _extension.renderExtension)(children, layout, {
-      isTopLevel: path.length < 1
+      isTopLevel: path.length < 1,
+      rendererAppearance: props.rendererAppearance
     }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
   }))));
 };

package/dist/cjs/react/nodes/date.js

@@ -11,7 +11,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _reactIntlNext = require("react-intl-next");
+var _rendererContext = require("../../renderer-context");
 var _TaskItemsFormatContext = require("../../ui/TaskItemsFormatContext/TaskItemsFormatContext");
 var _useInlineAnnotationProps = require("../../ui/annotations/element/useInlineAnnotationProps");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -20,7 +22,10 @@ var Date = /*#__PURE__*/(0, _react.memo)(function Date(props) {
   var timestamp = props.timestamp,
     parentIsIncompleteTask = props.parentIsIncompleteTask,
     intl = props.intl;
-  var className = !!parentIsIncompleteTask && (0, _utils.isPastDate)(timestamp) ? 'date-node date-node-highlighted' : 'date-node';
+  var _useRendererContext = (0, _rendererContext.useRendererContext)(),
+    contextTimeZone = _useRendererContext.timeZone;
+  var timeZone = (0, _expValEquals.expValEquals)('confluence_frontend_fix_date_hydration_error', 'isEnabled', true) ? contextTimeZone : undefined;
+  var className = !!parentIsIncompleteTask && (0, _utils.isPastDate)(timestamp, timeZone) ? 'date-node date-node-highlighted' : 'date-node';
   return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: _styles.DateSharedCssClassName.DATE_WRAPPER
@@ -31,7 +36,7 @@ var Date = /*#__PURE__*/(0, _react.memo)(function Date(props) {
     className: className,
     "data-node-type": "date",
     "data-timestamp": timestamp
-  }, parentIsIncompleteTask ? (0, _utils.timestampToTaskContext)(timestamp, intl) : (0, _utils.timestampToString)(timestamp, intl)));
+  }, parentIsIncompleteTask ? (0, _utils.timestampToTaskContext)(timestamp, intl, timeZone) : (0, _utils.timestampToString)(timestamp, intl)));
 });
 var DateComponent = exports.DateComponent = (0, _reactIntlNext.injectIntl)(Date);
 function DateWithFormatContext(props) {

package/dist/cjs/react/nodes/extension.js

@@ -61,8 +61,12 @@ var renderExtension = exports.renderExtension = function renderExtension(content
   // by default, we assume the extension is at top level, (direct child of doc node)
   var _ref = options || {},
     _ref$isTopLevel = _ref.isTopLevel,
-    isTopLevel = _ref$isTopLevel === void 0 ? true : _ref$isTopLevel;
-  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+    isTopLevel = _ref$isTopLevel === void 0 ? true : _ref$isTopLevel,
+    rendererAppearance = _ref.rendererAppearance;
+  // we should only use custom layout for full-page appearance
+  var canUseCustomLayout = (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
+  var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
+  var centerAlignClass = isCustomLayout ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
   /**
    * To reduce cumulative layout shift, we check installed manifest values (viewportSize) for Forge and extension node parameters
    * for Connect (legacy). As Connect is being phased out, we want Forge to also start to store its expected height
@@ -80,9 +84,9 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       ,
       className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
       style: {
-        width: isInline ? undefined : isTopLevel ?
+        width: isInline ? undefined : ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-        (0, _breakout.calcBreakoutWidthCss)(layout) : '100%',
+        (0, _breakout.calcBreakoutWidthCss)(layout) : (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         minHeight: isInline ? undefined : extensionHeight && "".concat(extensionHeight, "px")
       },
@@ -106,8 +110,9 @@ var renderExtension = exports.renderExtension = function renderExtension(content
       ,
       className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
       style: {
+        width: isInline ? undefined : ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        width: isInline ? undefined : isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%',
+        (0, _utils.calcBreakoutWidth)(layout, width) : (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         minHeight: isInline ? undefined : "".concat(extensionHeight, "px")
       },
@@ -149,7 +154,8 @@ var Extension = function Extension(props) {
           isTopLevel: path.length < 1,
           handleRef: handleRef,
           shadowClassNames: shadowClassNames,
-          tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
+          tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined,
+          rendererAppearance: props.rendererAppearance
         }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
       }
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -162,7 +168,8 @@ var Extension = function Extension(props) {
       isTopLevel: path.length < 1,
       handleRef: handleRef,
       shadowClassNames: shadowClassNames,
-      tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
+      tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined,
+      rendererAppearance: props.rendererAppearance
     }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
   });
 };

package/dist/cjs/react/nodes/multiBodiedExtension.js

@@ -49,17 +49,22 @@ var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLega
   var width = _ref3.width,
     path = _ref3.path,
     layout = _ref3.layout,
+    rendererAppearance = _ref3.rendererAppearance,
     children = _ref3.children;
   var isTopLevel = path.length < 1;
-  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  // we should only use custom layout for full-page appearance
+  var canUseCustomLayout = (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
+  var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
+  var centerAlignClass = isCustomLayout ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
 
   // This hierarchy is copied from regular extension (see extension.tsx)
   return (0, _react.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
     style: {
+      width: ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-      width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%'
+      (0, _utils.calcBreakoutWidth)(layout, width) : (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
     },
     "data-layout": layout,
     "data-testid": "multiBodiedExtension--wrapper-renderer"
@@ -71,18 +76,22 @@ var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLega
 var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_ref4) {
   var path = _ref4.path,
     layout = _ref4.layout,
+    rendererAppearance = _ref4.rendererAppearance,
     children = _ref4.children;
   var isTopLevel = path.length < 1;
-  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  // we should only use custom layout for full-page appearance
+  var canUseCustomLayout = (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
+  var isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
+  var centerAlignClass = isCustomLayout ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
 
   // This hierarchy is copied from regular extension (see extension.tsx)
   return (0, _react.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
     style: {
-      width: isTopLevel ?
+      width: ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-      (0, _breakout.calcBreakoutWidthCss)(layout) : '100%'
+      (0, _breakout.calcBreakoutWidthCss)(layout) : (0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
     },
     "data-layout": layout,
     "data-testid": "multiBodiedExtension--wrapper-renderer"
@@ -103,7 +112,8 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     extensionKey = props.extensionKey,
     content = props.content,
     marks = props.marks,
-    localId = props.localId;
+    localId = props.localId,
+    rendererAppearance = props.rendererAppearance;
   var _useState = (0, _react2.useState)(0),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     activeChildIndex = _useState2[0],
@@ -166,7 +176,8 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
       "data-node-type": "multiBodiedExtension"
     }, (0, _react.jsx)(MultiBodiedExtensionWrapperNext, {
       layout: layout,
-      path: path
+      path: path,
+      rendererAppearance: rendererAppearance
     }, renderContent()));
   }
   return (0, _react.jsx)("section", {
@@ -181,7 +192,8 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     return (0, _react.jsx)(MultiBodiedExtensionWrapperLegacy, {
       layout: layout,
       width: width,
-      path: path
+      path: path,
+      rendererAppearance: rendererAppearance
     }, renderContent());
   }));
 };

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

@@ -275,11 +275,29 @@ var rendererFullPageStylesWithReducedPadding = (0, _react.css)((0, _defineProper
 }, "@media (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
   '--ak-renderer--full-page-gutter': "".concat(_editorSharedStyles.akEditorGutterPaddingReduced, "px")
 }));
+var oldRendererFullWidthStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  maxWidth: "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px"),
+  margin: "0 auto",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.fabric-editor-breakout-mark:not([data-has-width="true"]), .ak-renderer-extension': {
+    width: '100% !important'
+  }
+});
 var rendererFullWidthStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
   maxWidth: "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px"),
   margin: "0 auto",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.fabric-editor-breakout-mark:not([data-has-width="true"])': {
+    width: '100% !important'
+  }
+});
+var oldRendererMaxWidthStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  maxWidth: "".concat(_editorSharedStyles.akEditorMaxWidthLayoutWidth, "px"),
+  margin: "0 auto",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   '.fabric-editor-breakout-mark:not([data-has-width="true"]), .ak-renderer-extension': {
     width: '100% !important'
   }
@@ -289,7 +307,7 @@ var rendererMaxWidthStyles = (0, _react.css)({
   maxWidth: "".concat(_editorSharedStyles.akEditorMaxWidthLayoutWidth, "px"),
   margin: "0 auto",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.fabric-editor-breakout-mark:not([data-has-width="true"]), .ak-renderer-extension': {
+  '.fabric-editor-breakout-mark:not([data-has-width="true"])': {
     width: '100% !important'
   }
 });
@@ -777,7 +795,7 @@ var extensionStyle = (0, _react.css)({
     fontSize: 'var(--ak-renderer-base-font-size)'
   }
 });
-var extensionAsInlineStyle = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]"), {
+var oldExtensionAsInlineStyle = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]"), {
   display: 'inline-block'
 }), ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE), {
   display: 'inline-block',
@@ -792,6 +810,19 @@ var extensionAsInlineStyle = (0, _react.css)((0, _defineProperty2.default)((0, _
 }), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " div, .").concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " p"), {
   display: 'inline-block'
 }));
+var extensionAsInlineStyle = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]"), {
+  display: 'inline-block'
+}), ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE), {
+  display: 'inline-block',
+  width: 'auto',
+  marginTop: 0
+}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER), {
+  display: 'inline-block',
+  overflowX: 'visible',
+  containerType: 'normal'
+}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " div, .").concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " p"), {
+  display: 'inline-block'
+}));
 
 // Removes the blockNodesVerticalMargin styling for inline extensions, i.e. borderless excerpt-include
 var inlineExtensionRendererMarginFix = (0, _react.css)({
@@ -1901,13 +1932,13 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
         '--ak-renderer-editor-font-heading-h6': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h6')),
         '--ak-renderer-editor-font-normal-text': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.body'))
       },
-      css: [(0, _expValEquals.expValEquals)('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) && rendererMaxWidthStyles, rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles,
+      css: [(0, _expValEquals.expValEquals)('confluence_ttvc_inline_extensions', 'isEnabled', true) ? baseFontStyle : originalBaseFontLineHeight, baseStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingAnchorStyles : headingAnchorStylesDuplicateAnchor, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? hideHeadingCopyLinkWrapperStyles : hideHeadingCopyLinkWrapperStylesDuplicateAnchor, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererFullWidthStyles : oldRendererFullWidthStyles), (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererMaxWidthStyles : oldRendererMaxWidthStyles), rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingWrapperInlineFlowStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? headingWithAlignmentStyles : headingWithAlignmentStylesDuplicateAnchor, ruleSharedStyles, contentMode === 'compact' && isCompactModeSupported && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? blockMarksSharedStyles : blockMarksSharedStylesDuplicateAnchor, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning
       (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
       // this should be placed after baseOtherStyles
-      (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && extensionAsInlineStyle, (0, _expValEquals.expValEquals)('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
+      (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), (0, _expValEquals.expValEquals)('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
       // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
       (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && syncBlockOverflowStyles, (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_2') && syncBlockPatch2Styles],
       "data-testid": testId

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

@@ -71,7 +71,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "126.8.9";
+var packageVersion = "126.8.11";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -438,8 +438,10 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var rendererContext = (0, _react.useMemo)(function () {
-    return createRendererContext(props.featureFlags, props.isTopLevelRenderer, props.contentMode);
-  }, [props.featureFlags, props.isTopLevelRenderer, createRendererContext, props.contentMode]);
+    return _objectSpread(_objectSpread({}, createRendererContext(props.featureFlags, props.isTopLevelRenderer, props.contentMode)), {}, {
+      timeZone: props.timeZone
+    });
+  }, [props.featureFlags, props.isTopLevelRenderer, createRendererContext, props.contentMode, props.timeZone]);
   (0, _useScrollToBlock.useScrollToBlock)(editorRef, props.document);
   try {
     var _rendererContext$feat, _props$media;

package/dist/es2019/messages.js

@@ -31,7 +31,7 @@ export const headingAnchorLinkMessages = defineMessages({
   copyAriaLabel: {
     id: 'fabric.editor.headingLink.copyAriaLabel',
     defaultMessage: 'Copy',
-    description: 'copy aria label for link icon'
+    description: 'Aria label for the copy link button displayed next to a heading. Used by screen readers to describe the button that copies the heading anchor link to the clipboard.'
   }
 });
 export const tableCellMessages = defineMessages({

package/dist/es2019/react/nodes/bodiedExtension.js

@@ -54,7 +54,8 @@ const BodiedExtension = props => {
       if (result && /*#__PURE__*/React.isValidElement(result)) {
         // Return the content directly if it's a valid JSX.Element
         return renderExtension(result, layout, {
-          isTopLevel: path.length < 1
+          isTopLevel: path.length < 1,
+          rendererAppearance: props.rendererAppearance
         }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
       }
     } catch {
@@ -64,7 +65,8 @@ const BodiedExtension = props => {
 
     // Always return default content if anything goes wrong
     return renderExtension(children, layout, {
-      isTopLevel: path.length < 1
+      isTopLevel: path.length < 1,
+      rendererAppearance: props.rendererAppearance
     }, removeOverflow, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, undefined, localId, shouldDisplayExtensionAsInline, node);
   }))));
 };

package/dist/es2019/react/nodes/date.js

@@ -2,7 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { memo } from 'react';
 import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { isPastDate, timestampToString, timestampToTaskContext } from '@atlaskit/editor-common/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { injectIntl } from 'react-intl-next';
+import { useRendererContext } from '../../renderer-context';
 import { useTaskItemsFormatContext } from '../../ui/TaskItemsFormatContext/TaskItemsFormatContext';
 import { useInlineAnnotationProps } from '../../ui/annotations/element/useInlineAnnotationProps';
 const Date = /*#__PURE__*/memo(function Date(props) {
@@ -12,7 +14,11 @@ const Date = /*#__PURE__*/memo(function Date(props) {
     parentIsIncompleteTask,
     intl
   } = props;
-  const className = !!parentIsIncompleteTask && isPastDate(timestamp) ? 'date-node date-node-highlighted' : 'date-node';
+  const {
+    timeZone: contextTimeZone
+  } = useRendererContext();
+  const timeZone = expValEquals('confluence_frontend_fix_date_hydration_error', 'isEnabled', true) ? contextTimeZone : undefined;
+  const className = !!parentIsIncompleteTask && isPastDate(timestamp, timeZone) ? 'date-node date-node-highlighted' : 'date-node';
   return /*#__PURE__*/React.createElement("span", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: DateSharedCssClassName.DATE_WRAPPER
@@ -23,7 +29,7 @@ const Date = /*#__PURE__*/memo(function Date(props) {
     className: className,
     "data-node-type": "date",
     "data-timestamp": timestamp
-  }, parentIsIncompleteTask ? timestampToTaskContext(timestamp, intl) : timestampToString(timestamp, intl)));
+  }, parentIsIncompleteTask ? timestampToTaskContext(timestamp, intl, timeZone) : timestampToString(timestamp, intl)));
 });
 export const DateComponent = injectIntl(Date);
 function DateWithFormatContext(props) {

package/dist/es2019/react/nodes/extension.js

@@ -41,9 +41,13 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
 
   // by default, we assume the extension is at top level, (direct child of doc node)
   const {
-    isTopLevel = true
+    isTopLevel = true,
+    rendererAppearance
   } = options || {};
-  const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  // we should only use custom layout for full-page appearance
+  const canUseCustomLayout = expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
+  const isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
+  const centerAlignClass = isCustomLayout ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
   /**
    * To reduce cumulative layout shift, we check installed manifest values (viewportSize) for Forge and extension node parameters
    * for Connect (legacy). As Connect is being phased out, we want Forge to also start to store its expected height
@@ -61,9 +65,9 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
       ,
       className: `${RendererCssClassName.EXTENSION} ${inlineClassName} ${options.shadowClassNames} ${centerAlignClass}`,
       style: {
-        width: isInline ? undefined : isTopLevel ?
+        width: isInline ? undefined : (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-        calcBreakoutWidthCss(layout) : '100%',
+        calcBreakoutWidthCss(layout) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         minHeight: isInline ? undefined : extensionHeight && `${extensionHeight}px`
       },
@@ -87,8 +91,9 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
     ,
     className: `${RendererCssClassName.EXTENSION} ${inlineClassName} ${options.shadowClassNames} ${centerAlignClass}`,
     style: {
+      width: isInline ? undefined : (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      width: isInline ? undefined : isTopLevel ? calcBreakoutWidth(layout, width) : '100%',
+      calcBreakoutWidth(layout, width) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       minHeight: isInline ? undefined : `${extensionHeight}px`
     },
@@ -130,7 +135,8 @@ const Extension = props => {
           isTopLevel: path.length < 1,
           handleRef,
           shadowClassNames,
-          tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
+          tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined,
+          rendererAppearance: props.rendererAppearance
         }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
       }
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -143,7 +149,8 @@ const Extension = props => {
       isTopLevel: path.length < 1,
       handleRef,
       shadowClassNames,
-      tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined
+      tabIndex: fg('platform_editor_dec_a11y_fixes') ? props.tabIndex : undefined,
+      rendererAppearance: props.rendererAppearance
     }, undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
   });
 };

package/dist/es2019/react/nodes/multiBodiedExtension.js

@@ -40,18 +40,23 @@ const MultiBodiedExtensionWrapperLegacy = ({
   width,
   path,
   layout,
+  rendererAppearance,
   children
 }) => {
   const isTopLevel = path.length < 1;
-  const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  // we should only use custom layout for full-page appearance
+  const canUseCustomLayout = expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
+  const isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
+  const centerAlignClass = isCustomLayout ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
 
   // This hierarchy is copied from regular extension (see extension.tsx)
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: `${RendererCssClassName.EXTENSION} ${centerAlignClass}`,
     style: {
+      width: (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-      width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
+      calcBreakoutWidth(layout, width) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
     },
     "data-layout": layout,
     "data-testid": "multiBodiedExtension--wrapper-renderer"
@@ -63,19 +68,23 @@ const MultiBodiedExtensionWrapperLegacy = ({
 const MultiBodiedExtensionWrapperNext = ({
   path,
   layout,
+  rendererAppearance,
   children
 }) => {
   const isTopLevel = path.length < 1;
-  const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
+  // we should only use custom layout for full-page appearance
+  const canUseCustomLayout = expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? rendererAppearance === 'full-page' : true;
+  const isCustomLayout = isTopLevel && ['wide', 'full-width'].includes(layout) && canUseCustomLayout;
+  const centerAlignClass = isCustomLayout ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
 
   // This hierarchy is copied from regular extension (see extension.tsx)
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: `${RendererCssClassName.EXTENSION} ${centerAlignClass}`,
     style: {
-      width: isTopLevel ?
+      width: (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-      calcBreakoutWidthCss(layout) : '100%'
+      calcBreakoutWidthCss(layout) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%'
     },
     "data-layout": layout,
     "data-testid": "multiBodiedExtension--wrapper-renderer"
@@ -95,7 +104,8 @@ const MultiBodiedExtension = props => {
     extensionKey,
     content,
     marks,
-    localId
+    localId,
+    rendererAppearance
   } = props;
   const [activeChildIndex, setActiveChildIndex] = useState(0);
   const {
@@ -161,7 +171,8 @@ const MultiBodiedExtension = props => {
       "data-node-type": "multiBodiedExtension"
     }, jsx(MultiBodiedExtensionWrapperNext, {
       layout: layout,
-      path: path
+      path: path,
+      rendererAppearance: rendererAppearance
     }, renderContent()));
   }
   return jsx("section", {
@@ -176,7 +187,8 @@ const MultiBodiedExtension = props => {
   }) => jsx(MultiBodiedExtensionWrapperLegacy, {
     layout: layout,
     width: width,
-    path: path
+    path: path,
+    rendererAppearance: rendererAppearance
   }, renderContent())));
 };
 export default MultiBodiedExtension;