@atlaskit/editor-core 215.8.2 → 215.8.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-core
 
+## 215.8.3
+
+### Patch Changes
+
+- [`76effece25ab5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/76effece25ab5) -
+  ED-29540: Fix layout shift caused by the top margin of lists changing post-hydration.
+
 ## 215.8.2
 
 ### Patch Changes

package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js

@@ -220,7 +220,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // Condense vertical spacing between list items when content mode dense is active
     (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    (0, _list.getDenseListStyles)(baseFontSize),
+    (0, _list.getDenseListStyles)(baseFontSize), (0, _expValEquals.expValEquals)('cc_editor_ttvc_release_bundle_one', 'listLayoutShiftFix', true) && isFullPage &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _list.listsStylesMarginLayoutShiftFix,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _rule.ruleStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

package/dist/cjs/ui/EditorContentContainer/styles/list.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.listsStylesSafariFix = exports.listsStyles = exports.getDenseListStyles = exports.diffListStyles = exports.EDITOR_LIST_DENSE_GAP = void 0;
+exports.listsStylesSafariFix = exports.listsStylesMarginLayoutShiftFix = exports.listsStyles = exports.getDenseListStyles = exports.diffListStyles = exports.EDITOR_LIST_DENSE_GAP = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -148,6 +148,29 @@ var diffListStyles = exports.diffListStyles = (0, _react.css)({
   }
 });
 
+// These styles are to fix a layout shift issue that occurs when aui-reset.less CSS is applied post-hydration.
+// It overrides the design system bundle.css list margins, which in turn causes the lists to shift vertically.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var listsStylesMarginLayoutShiftFix = exports.listsStylesMarginLayoutShiftFix = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // Root lists: 12px top margin (design system value), except first content child. Uses :not(:nth-child(1 of ...)) to exclude first content lists.
+    // A more complex selector is used here to ensure this style is not applied to block quotes and panels, as they do not have a margin-top property already, and this will incorrectly add a margin-top to them.
+    // This is unlike tables and expands, which do have a margin-top property already, and this style would not change their top margin, even without the :not(:nth-child(1 of ...)) selector.
+    // This targeted approach reduces the blast radius of the fix. Instead of modifying numerous existing styles, we add this single selector until the issue with bundle.css & aui-reset.less is fixed.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    'ul:not(li > ul):not(:nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span))), ol:not(li > ol):not(:nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span)))': {
+      marginTop: "var(--ds-space-150, 12px)"
+    },
+    // Nested lists: 4px top margin (design system value)
+    // Applies to both OL and UL nested inside list items
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'li > ol, li > ul': {
+      marginTop: "var(--ds-space-050, 4px)"
+    }
+  }
+});
+
 /* This prevents https://product-fabric.atlassian.net/browse/ED-20924 */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 var listsStylesSafariFix = exports.listsStylesSafariFix = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".ProseMirror:not(.".concat(BLOCK_CARD_CONTAINER, ") > li::before"), {

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "215.8.1";
+var version = exports.version = "215.8.2";

package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js

@@ -44,7 +44,7 @@ import { indentationStyles } from './styles/indentationStyles';
 import { InlineNodeViewSharedStyles } from './styles/inlineNodeViewSharedStyles';
 import { layoutBaseStyles, layoutBaseStylesAdvanced, layoutBaseStylesFixesUnderNestedDnDFG, layoutColumnMartinTopFixesNew, layoutColumnMartinTopFixesOld, layoutColumnResponsiveStyles, layoutColumnStylesAdvanced, layoutColumnStylesNotAdvanced, layoutResponsiveBaseStyles, layoutResponsiveStylesForView, layoutSectionStylesAdvanced, layoutSectionStylesNotAdvanced, layoutSelectedStylesAdvanced, layoutSelectedStylesForViewAdvanced, layoutSelectedStylesForViewNotAdvanced, layoutSelectedStylesNotAdvanced, layoutStylesForView } from './styles/layout';
 import { hyperLinkFloatingToolbarStyles, linkLegacyIconStylesFix, linkStyles } from './styles/link';
-import { getDenseListStyles, listsStyles, diffListStyles, listsStylesSafariFix } from './styles/list';
+import { getDenseListStyles, listsStyles, diffListStyles, listsStylesSafariFix, listsStylesMarginLayoutShiftFix } from './styles/list';
 import { mediaAlignmentStyles, mediaCaptionStyles, mediaDangerStyles, mediaGroupStyles, mediaStyles } from './styles/mediaStyles';
 import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles, mentionsStylesMixin_platform_editor_centre_mention_padding, mentionsSelectionStylesWithSearchMatch, mentionDangerStyles } from './styles/mentions';
 import { panelStyles, panelStylesMixin, nestedPanelBorderStylesMixin, panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, panelViewStyles, nestedPanelDangerStyles } from './styles/panelStyles';
@@ -216,7 +216,9 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // Condense vertical spacing between list items when content mode dense is active
     expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    getDenseListStyles(baseFontSize),
+    getDenseListStyles(baseFontSize), expValEquals('cc_editor_ttvc_release_bundle_one', 'listLayoutShiftFix', true) && isFullPage &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    listsStylesMarginLayoutShiftFix,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     ruleStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

package/dist/es2019/ui/EditorContentContainer/styles/list.js

@@ -139,6 +139,29 @@ export const diffListStyles = css({
   }
 });
 
+// These styles are to fix a layout shift issue that occurs when aui-reset.less CSS is applied post-hydration.
+// It overrides the design system bundle.css list margins, which in turn causes the lists to shift vertically.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const listsStylesMarginLayoutShiftFix = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // Root lists: 12px top margin (design system value), except first content child. Uses :not(:nth-child(1 of ...)) to exclude first content lists.
+    // A more complex selector is used here to ensure this style is not applied to block quotes and panels, as they do not have a margin-top property already, and this will incorrectly add a margin-top to them.
+    // This is unlike tables and expands, which do have a margin-top property already, and this style would not change their top margin, even without the :not(:nth-child(1 of ...)) selector.
+    // This targeted approach reduces the blast radius of the fix. Instead of modifying numerous existing styles, we add this single selector until the issue with bundle.css & aui-reset.less is fixed.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    'ul:not(li > ul):not(:nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span))), ol:not(li > ol):not(:nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span)))': {
+      marginTop: `var(--ds-space-150, 12px)`
+    },
+    // Nested lists: 4px top margin (design system value)
+    // Applies to both OL and UL nested inside list items
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'li > ol, li > ul': {
+      marginTop: `var(--ds-space-050, 4px)`
+    }
+  }
+});
+
 /* This prevents https://product-fabric.atlassian.net/browse/ED-20924 */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export const listsStylesSafariFix = css({

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "215.8.1";
+export const version = "215.8.2";

package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js

@@ -45,7 +45,7 @@ import { indentationStyles } from './styles/indentationStyles';
 import { InlineNodeViewSharedStyles } from './styles/inlineNodeViewSharedStyles';
 import { layoutBaseStyles, layoutBaseStylesAdvanced, layoutBaseStylesFixesUnderNestedDnDFG, layoutColumnMartinTopFixesNew, layoutColumnMartinTopFixesOld, layoutColumnResponsiveStyles, layoutColumnStylesAdvanced, layoutColumnStylesNotAdvanced, layoutResponsiveBaseStyles, layoutResponsiveStylesForView, layoutSectionStylesAdvanced, layoutSectionStylesNotAdvanced, layoutSelectedStylesAdvanced, layoutSelectedStylesForViewAdvanced, layoutSelectedStylesForViewNotAdvanced, layoutSelectedStylesNotAdvanced, layoutStylesForView } from './styles/layout';
 import { hyperLinkFloatingToolbarStyles, linkLegacyIconStylesFix, linkStyles } from './styles/link';
-import { getDenseListStyles, listsStyles, diffListStyles, listsStylesSafariFix } from './styles/list';
+import { getDenseListStyles, listsStyles, diffListStyles, listsStylesSafariFix, listsStylesMarginLayoutShiftFix } from './styles/list';
 import { mediaAlignmentStyles, mediaCaptionStyles, mediaDangerStyles, mediaGroupStyles, mediaStyles } from './styles/mediaStyles';
 import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles, mentionsStylesMixin_platform_editor_centre_mention_padding, mentionsSelectionStylesWithSearchMatch, mentionDangerStyles } from './styles/mentions';
 import { panelStyles, panelStylesMixin, nestedPanelBorderStylesMixin, panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, panelViewStyles, nestedPanelDangerStyles } from './styles/panelStyles';
@@ -212,7 +212,9 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
     // Condense vertical spacing between list items when content mode dense is active
     expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    getDenseListStyles(baseFontSize),
+    getDenseListStyles(baseFontSize), expValEquals('cc_editor_ttvc_release_bundle_one', 'listLayoutShiftFix', true) && isFullPage &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    listsStylesMarginLayoutShiftFix,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     ruleStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

package/dist/esm/ui/EditorContentContainer/styles/list.js

@@ -140,6 +140,29 @@ export var diffListStyles = css({
   }
 });
 
+// These styles are to fix a layout shift issue that occurs when aui-reset.less CSS is applied post-hydration.
+// It overrides the design system bundle.css list margins, which in turn causes the lists to shift vertically.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var listsStylesMarginLayoutShiftFix = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // Root lists: 12px top margin (design system value), except first content child. Uses :not(:nth-child(1 of ...)) to exclude first content lists.
+    // A more complex selector is used here to ensure this style is not applied to block quotes and panels, as they do not have a margin-top property already, and this will incorrectly add a margin-top to them.
+    // This is unlike tables and expands, which do have a margin-top property already, and this style would not change their top margin, even without the :not(:nth-child(1 of ...)) selector.
+    // This targeted approach reduces the blast radius of the fix. Instead of modifying numerous existing styles, we add this single selector until the issue with bundle.css & aui-reset.less is fixed.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    'ul:not(li > ul):not(:nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span))), ol:not(li > ol):not(:nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span)))': {
+      marginTop: "var(--ds-space-150, 12px)"
+    },
+    // Nested lists: 4px top margin (design system value)
+    // Applies to both OL and UL nested inside list items
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    'li > ol, li > ul': {
+      marginTop: "var(--ds-space-050, 4px)"
+    }
+  }
+});
+
 /* This prevents https://product-fabric.atlassian.net/browse/ED-20924 */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export var listsStylesSafariFix = css(_defineProperty(_defineProperty({}, ".ProseMirror:not(.".concat(BLOCK_CARD_CONTAINER, ") > li::before"), {

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "215.8.1";
+export var version = "215.8.2";

package/dist/types/ui/EditorContentContainer/styles/list.d.ts

@@ -1,6 +1,7 @@
 import { type SerializedStyles } from '@emotion/react';
 export declare const listsStyles: SerializedStyles;
 export declare const diffListStyles: SerializedStyles;
+export declare const listsStylesMarginLayoutShiftFix: SerializedStyles;
 export declare const listsStylesSafariFix: SerializedStyles;
 export declare const EDITOR_LIST_DENSE_GAP = "max(0px, calc((var(--ak-editor-base-font-size, 16px) - 13px) * (4 / 3)))";
 export declare const getDenseListStyles: (baseFontSize?: number) => SerializedStyles;

package/dist/types-ts4.5/ui/EditorContentContainer/styles/list.d.ts

@@ -1,6 +1,7 @@
 import { type SerializedStyles } from '@emotion/react';
 export declare const listsStyles: SerializedStyles;
 export declare const diffListStyles: SerializedStyles;
+export declare const listsStylesMarginLayoutShiftFix: SerializedStyles;
 export declare const listsStylesSafariFix: SerializedStyles;
 export declare const EDITOR_LIST_DENSE_GAP = "max(0px, calc((var(--ak-editor-base-font-size, 16px) - 13px) * (4 / 3)))";
 export declare const getDenseListStyles: (baseFontSize?: number) => SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "215.8.2",
+	"version": "215.8.3",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -103,7 +103,7 @@
 		"@atlaskit/media-core": "^37.0.0",
 		"@atlaskit/media-integration-test-helpers": "workspace:^",
 		"@atlaskit/media-test-helpers": "^39.0.0",
-		"@atlaskit/modal-dialog": "^14.5.0",
+		"@atlaskit/modal-dialog": "^14.6.0",
 		"@atlaskit/primitives": "^16.0.0",
 		"@atlaskit/renderer": "^124.8.0",
 		"@atlaskit/section-message": "^8.7.0",