@atlaskit/editor-core 207.1.2 → 207.2.1

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

@@ -8,22 +8,20 @@
 import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx, keyframes, useTheme } from '@emotion/react';
+import { css, jsx, useTheme } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/browser';
 import { telepointerStyle, telepointerStyleWithInitialOnly } from '@atlaskit/editor-common/collab';
 import { EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
 import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
 import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { gapCursorStyles } from '@atlaskit/editor-common/selection';
-import { CodeBlockSharedCssClassName, GRID_GUTTER, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, MediaSharedClassNames, SmartCardSharedCssClassName, annotationSharedStyles, backgroundColorStyles, blockMarksSharedStyles, codeBlockInListSafariFix, codeMarkSharedStyles, dateSharedStyle, embedCardStyles, expandClassNames, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, linkSharedStyle, listsSharedStyles, paragraphSharedStyles, resizerStyles, pragmaticResizerStyles, ruleSharedStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
+import { CodeBlockSharedCssClassName, GRID_GUTTER, MediaSharedClassNames, SmartCardSharedCssClassName, annotationSharedStyles, blockMarksSharedStyles, codeBlockInListSafariFix, codeMarkSharedStyles, dateSharedStyle, embedCardStyles, expandClassNames, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, listsSharedStyles, paragraphSharedStyles, resizerStyles, pragmaticResizerStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
 import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
 import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
 import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
 import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text/styles';
-import { TableCssClassName } from '@atlaskit/editor-plugins/table/types';
 import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
-import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
-import { SelectionStyle, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorSelectedBorderColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
+import { SelectionStyle, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -37,30 +35,11 @@ import { mediaStyles } from '../ContentStyles/media';
 import { panelStyles } from '../ContentStyles/panel';
 import { statusStyles, vanillaStatusStyles } from '../ContentStyles/status';
 import { taskDecisionStyles, vanillaTaskDecisionIconWithoutVisualRefresh as vanillaDecisionIconWithoutVisualRefresh, vanillaTaskDecisionIconWithVisualRefresh as vanillaDecisionIconWithVisualRefresh, vanillaTaskDecisionStyles as vanillaDecisionStyles, vanillaTaskItemStyles } from '../ContentStyles/tasks-and-decisions';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const linkStyles = css`
-	.ProseMirror {
-		${linkSharedStyle()}
-	}
-`;
-const ruleStyles = () => css`
-	.ProseMirror {
-		${ruleSharedStyles()};
-
-		hr {
-			cursor: pointer;
-			padding: ${"var(--ds-space-050, 4px)"} 0;
-			margin: ${"var(--ds-space-300, 24px)"} 0;
-			background-clip: content-box;
-
-			&.${akEditorSelectedNodeClassName} {
-				outline: none;
-				background-color: ${`var(--ds-border-selected, ${akEditorSelectedBorderColor})`};
-			}
-		}
-	}
-`;
+import { aiPanelBaseStyles, aiPanelDarkStyles } from './styles/ai-panel';
+import { backgroundColorStyles } from './styles/backgroundColorStyles';
+import { layoutBaseStyles, layoutViewStyles } from './styles/layout';
+import { linkStyles, linkStylesOld } from './styles/link';
+import { ruleStyles } from './styles/rule';
 const vanillaMentionsStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.editor-mention-primitive': {
@@ -293,735 +272,6 @@ export const fixBlockControlStylesSSR = () => {
   }
   return firstBlockNodeStyles;
 };
-const columnLayoutSharedStyle = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '[data-layout-section]': {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'row',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& > *': {
-      flex: 1,
-      minWidth: 0
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& > .unsupportedBlockView-content-wrap': {
-      minWidth: 'initial'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    [`@media screen and (max-width: ${gridMediumMaxWidth}px)`]: {
-      flexDirection: 'column'
-    }
-  }
-});
-const columnLayoutResponsiveSharedStyle = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-layout-section]': {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: "var(--ds-space-100, 8px)",
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '& > *': {
-      flex: 1,
-      minWidth: 0
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '& > .unsupportedBlockView-content-wrap': {
-      minWidth: 'initial'
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.layout-section-container': {
-    containerType: 'inline-size',
-    containerName: 'layout-area'
-  }
-});
-
-/**
- * layout styles
- * was imported from packages/editor/editor-core/src/ui/ContentStyles/layout.ts
- * @example
- * @returns {string}
- */
-const firstNodeWithNotMarginTop = () => fg('platform_editor_nested_dnd_styles_changes') ?
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-css`
-				> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span)) {
-					margin-top: 0;
-				}
-			` :
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-css`
-				> :not(style):first-child,
-				> style:first-child + * {
-					margin-top: 0;
-				}
-
-				> .ProseMirror-gapcursor:first-child + *,
-				> style:first-child + .ProseMirror-gapcursor + * {
-					margin-top: 0;
-				}
-
-				> .ProseMirror-gapcursor:first-child + span + * {
-					margin-top: 0;
-				}
-			`;
-const layoutColumnStyles = () => editorExperiment('advanced_layouts', true) ?
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-css`
-				> [data-layout-column] {
-					margin: 0 ${LAYOUT_SECTION_MARGIN / 2}px;
-				}
-
-				> [data-layout-column]:first-of-type {
-					margin-left: 0;
-				}
-
-				> [data-layout-column]:last-of-type {
-					margin-right: 0;
-				}
-
-				@media screen and (max-width: ${gridMediumMaxWidth}px) {
-					[data-layout-column] + [data-layout-column] {
-						margin: 0;
-					}
-				}
-
-				> [data-layout-column].${akEditorSelectedNodeClassName}:not(.danger) {
-					${getSelectionStyles([SelectionStyle.Blanket])};
-					/* layout column selection shorter after layout border has been removed */
-					::before {
-						width: calc(100% - 8px);
-						left: 4px;
-						border-radius: ${"var(--ds-border-radius, 3px)"};
-					}
-				}
-			` :
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-css`
-				[data-layout-column] + [data-layout-column] {
-					margin-left: ${LAYOUT_SECTION_MARGIN}px;
-				}
-
-				@media screen and (max-width: ${gridMediumMaxWidth}px) {
-					[data-layout-column] + [data-layout-column] {
-						margin-left: 0;
-					}
-				}
-			`;
-const layoutSectionStyles = () => editorExperiment('advanced_layouts', true) ?
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-css`
-				${columnLayoutResponsiveSharedStyle};
-				.layout-section-container [data-layout-section] {
-					> .ProseMirror-widget {
-						flex: none;
-						display: contents !important;
-
-						&[data-blocks-drag-handle-container] div {
-							display: contents !important;
-						}
-
-						&[data-blocks-drop-target-container] {
-							display: block !important;
-							margin: ${"var(--ds-space-negative-050, -4px)"};
-
-							[data-drop-target-for-element] {
-								position: absolute;
-							}
-						}
-
-						& + [data-layout-column] {
-							margin: 0;
-						}
-					}
-
-					> [data-layout-column] {
-						margin: 0;
-					}
-				}
-			` :
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-css`
-				${columnLayoutSharedStyle}
-			`;
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-const layoutBorderBaseStyles = css`
-	/* TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.
-	This is because the default state already uses the same token and, as such, the hover style won't change anything.
-	https://product-fabric.atlassian.net/browse/DSP-4441 */
-	/* Shows the border when cursor is inside a layout */
-	&.selected [data-layout-column],
-	&:hover [data-layout-column] {
-		border: ${akEditorSelectedBorderSize}px solid ${"var(--ds-border, #091E4224)"};
-	}
-
-	&.selected.danger [data-layout-column] {
-		background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
-		border-color: ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
-	}
-
-	&.${akEditorSelectedNodeClassName}:not(.danger) {
-		[data-layout-column] {
-			${getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket])}
-			::after {
-				background-color: transparent;
-			}
-		}
-	}
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-const layoutBorderViewStyles = css`
-	&.selected [data-layout-column],
-	&:hover [data-layout-column] {
-		border: 0;
-	}
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-const columnSeparatorBaseStyles = css`
-	[data-layout-content]::before {
-		content: '';
-		border-left: ${akEditorSelectedBorderSize}px solid ${"var(--ds-border, #091E4224)"};
-		position: absolute;
-		height: calc(100% - 24px);
-		margin-left: -25px;
-	}
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-const columnSeparatorViewStyles = css`
-	[data-layout-content]::before {
-		border-left: 0;
-	}
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-const rowSeparatorBaseStyles = css`
-	[data-layout-content]::before {
-		content: '';
-		border-top: ${akEditorSelectedBorderSize}px solid ${"var(--ds-border, #091E4224)"};
-		position: absolute;
-		width: calc(100% - 32px);
-		margin-top: -13px;
-
-		/* clear styles for column separator */
-		border-left: unset;
-		margin-left: unset;
-		height: unset;
-	}
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-const rowSeparatorViewStyles = css`
-	[data-layout-content]::before {
-		border-top: 0;
-	}
-`;
-
-// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
-const layoutWithSeparatorBorderResponsiveBaseStyles = (breakpoint
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-) => css`
-	&.selected,
-	&:hover,
-	&.selected.danger,
-	&.${akEditorSelectedNodeClassName}:not(.danger) {
-		[data-layout-column]:not(:first-of-type) {
-			@container editor-area (max-width:${breakpoint}px) {
-				${rowSeparatorBaseStyles}
-			}
-		}
-	}
-`;
-
-// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
-const layoutWithSeparatorBorderResponsiveViewStyles = (breakpoint
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-) => css`
-	&.selected,
-	&:hover,
-	&.selected.danger,
-	&.${akEditorSelectedNodeClassName}:not(.danger) {
-		[data-layout-column]:not(:first-of-type) {
-			@container editor-area (max-width:${breakpoint}px) {
-				${rowSeparatorViewStyles}
-			}
-		}
-	}
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-const layoutWithSeparatorBorderBaseStyles = css`
-	&.selected [data-layout-column]:not(:first-of-type),
-	[data-empty-layout='true'] [data-layout-column]:not(:first-of-type),
-	&:hover [data-layout-column]:not(:first-of-type) {
-		${columnSeparatorBaseStyles}
-	}
-
-	&.selected.danger [data-layout-section] {
-		background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
-
-		box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
-		border-radius: 4px;
-		[data-layout-column]:not(:first-of-type) {
-			${columnSeparatorBaseStyles}
-		}
-	}
-
-	&.${akEditorSelectedNodeClassName}:not(.danger) [data-layout-section] {
-		box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${"var(--ds-border-selected, #0C66E4)"};
-		border-radius: 4px;
-		background-color: ${"var(--ds-background-selected, #E9F2FF)"};
-		[data-layout-column] {
-			${getSelectionStyles([SelectionStyle.Blanket])}
-			border: 0px;
-			::before {
-				background-color: transparent;
-			}
-		}
-		[data-layout-column]:not(:first-of-type) {
-			${columnSeparatorBaseStyles}
-		}
-	}
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-const layoutWithSeparatorBorderViewStyles = css`
-	&.selected [data-layout-column]:not(:first-of-type),
-	[data-empty-layout='true'] [data-layout-column]:not(:first-of-type),
-	&:hover [data-layout-column]:not(:first-of-type) {
-		${columnSeparatorViewStyles}
-	}
-
-	&.selected.danger [data-layout-section] {
-		box-shadow: 0 0 0 0 ${akEditorDeleteBorder};
-		[data-layout-column]:not(:first-of-type) {
-			${columnSeparatorViewStyles}
-		}
-	}
-
-	&.${akEditorSelectedNodeClassName}:not(.danger) [data-layout-section] {
-		box-shadow: 0 0 0 0 ${"var(--ds-border-selected, #0C66E4)"};
-		[data-layout-column]:not(:first-of-type) {
-			${columnSeparatorViewStyles}
-		}
-	}
-`;
-
-// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-const layoutResponsiveBaseStyles = css`
-	/* chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer */
-	/* not resized layout in full-width editor */
-	.fabric-editor--full-width-mode .ProseMirror {
-		> .layoutSectionView-content-wrap {
-			[data-layout-section] {
-				@container editor-area (max-width:724px) {
-					flex-direction: column;
-				}
-			}
-
-			${layoutWithSeparatorBorderResponsiveBaseStyles(724)}
-		}
-	}
-
-	/* not resized layout in fixed-width editor */
-	.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror {
-		> .layoutSectionView-content-wrap {
-			[data-layout-section] {
-				@container editor-area (max-width:788px) {
-					flex-direction: column;
-				}
-			}
-
-			${layoutWithSeparatorBorderResponsiveBaseStyles(788)}
-		}
-	}
-
-	/* resized layout in full/fixed-width editor */
-	.ProseMirror .fabric-editor-breakout-mark {
-		.layoutSectionView-content-wrap {
-			[data-layout-section] {
-				@container editor-area (max-width:820px) {
-					flex-direction: column;
-				}
-			}
-
-			${layoutWithSeparatorBorderResponsiveBaseStyles(820)}
-		}
-	}
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-const layoutResponsiveViewStyles = css`
-	/* chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer */
-	/* not resized layout in full-width editor */
-	.fabric-editor--full-width-mode .ProseMirror {
-		> .layoutSectionView-content-wrap {
-			${layoutWithSeparatorBorderResponsiveViewStyles(724)}
-		}
-	}
-
-	/* not resized layout in fixed-width editor */
-	.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror {
-		> .layoutSectionView-content-wrap {
-			${layoutWithSeparatorBorderResponsiveViewStyles(788)}
-		}
-	}
-
-	/* resized layout in full/fixed-width editor */
-	.ProseMirror .fabric-editor-breakout-mark {
-		.layoutSectionView-content-wrap {
-			${layoutWithSeparatorBorderResponsiveViewStyles(820)}
-		}
-	}
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
-const layoutBaseStyles = () => css`
-	.ProseMirror {
-		${layoutSectionStyles()}
-		[data-layout-section] {
-			/* Ignored via go/ees007
-			TODO: Migrate away from gridSize
-			Recommendation: Replace directly with 7px */
-			margin: ${"var(--ds-space-100, 8px)"} -${akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? 8 : 0)}px
-				0;
-			transition: border-color 0.3s ${akEditorSwoopCubicBezier};
-			cursor: pointer;
-
-			/* Inner cursor located 26px from left */
-			[data-layout-column] {
-				flex: 1;
-				position: relative;
-
-				min-width: 0;
-				/* disable 4 borders when in view mode and advanced layouts is on */
-				border: ${editorExperiment('advanced_layouts', true) ? 0 : akEditorSelectedBorderSize}px
-					solid ${"var(--ds-border, #091E4224)"};
-				border-radius: 4px;
-				padding: ${LAYOUT_COLUMN_PADDING}px
-					${LAYOUT_COLUMN_PADDING + (fg('platform_editor_nested_dnd_styles_changes') ? 8 : 0)}px;
-				box-sizing: border-box;
-
-				> div {
-					${firstNodeWithNotMarginTop()}
-
-					> .embedCardView-content-wrap:first-of-type .rich-media-item {
-						margin-top: 0;
-					}
-
-					> .mediaSingleView-content-wrap:first-of-type .rich-media-item {
-						margin-top: 0;
-					}
-
-					> .ProseMirror-gapcursor.-right:first-child
-						+ .mediaSingleView-content-wrap
-						.rich-media-item,
-					> style:first-child
-						+ .ProseMirror-gapcursor.-right
-						+ .mediaSingleView-content-wrap
-						.rich-media-item,
-					> .ProseMirror-gapcursor.-right:first-of-type
-						+ .embedCardView-content-wrap
-						.rich-media-item {
-						margin-top: 0;
-					}
-
-					> .ProseMirror-gapcursor:first-child
-						+ span
-						+ .mediaSingleView-content-wrap
-						.rich-media-item,
-					> style:first-child
-						+ .ProseMirror-gapcursor
-						+ span
-						+ .mediaSingleView-content-wrap
-						.rich-media-item {
-						margin-top: 0;
-					}
-
-					/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down
-			 and shrinking layout's node selectable area (leniency margin) */
-					> [data-node-type='decisionList'] {
-						li:first-of-type [data-decision-wrapper] {
-							margin-top: 0;
-						}
-					}
-				}
-
-				/* Make the 'content' fill the entire height of the layout column to allow click
-		   handler of layout section nodeview to target only data-layout-column */
-				[data-layout-content] {
-					height: 100%;
-					cursor: text;
-					.mediaGroupView-content-wrap {
-						clear: both;
-					}
-				}
-			}
-
-			${layoutColumnStyles()}
-		}
-
-		/* styles to support borders for layout */
-		[data-layout-section],
-		.layoutSectionView-content-wrap {
-			${editorExperiment('advanced_layouts', true) ? layoutWithSeparatorBorderBaseStyles : layoutBorderBaseStyles}
-		}
-	}
-
-	${editorExperiment('advanced_layouts', true) && layoutResponsiveBaseStyles}
-
-	/* hide separator when element is dragging on top of a layout column */
-	[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before {
-		display: none;
-	}
-
-	.fabric-editor--full-width-mode .ProseMirror {
-		[data-layout-section] {
-			.${TableCssClassName.TABLE_CONTAINER} {
-				margin: 0 ${tableMarginFullWidthMode}px;
-			}
-		}
-	}
-
-	${editorExperiment('advanced_layouts', false) && fg('platform_editor_nested_dnd_styles_changes') && `.ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {
-				margin: ${"var(--ds-space-100, 8px)"} -${akLayoutGutterOffset + 8}px 0;
-				}`}
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
-const layoutViewStyles = css`
-	.ProseMirror {
-		[data-layout-section] {
-			cursor: default;
-			[data-layout-column] {
-				border: 0;
-			}
-		}
-		[data-layout-section],
-		.layoutSectionView-content-wrap {
-			${editorExperiment('advanced_layouts', true) ? layoutWithSeparatorBorderViewStyles : layoutBorderViewStyles}
-		}
-	}
-
-	${editorExperiment('advanced_layouts', true) && layoutResponsiveViewStyles}
-`;
-
-/**
- * aiPanelStyles
- * was imported from packages/editor/editor-core/src/ui/ContentStyles/ai-panels.ts
- */
-const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-const rotationAnimation = keyframes({
-  '0%': {
-    '--panel-gradient-angle': '0deg',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    ...(isFirefox ? {
-      backgroundPosition: '100%'
-    } : {})
-  },
-  '100%': {
-    '--panel-gradient-angle': '360deg',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    ...(isFirefox ? {
-      backgroundPosition: '-100%'
-    } : {})
-  }
-});
-const aiPrismColor = {
-  ['prism.border.step.1']: {
-    light: '#0065FF',
-    dark: '#0065FF80'
-  },
-  ['prism.border.step.2']: {
-    light: '#0469FF',
-    dark: '#0469FF80'
-  },
-  ['prism.border.step.3']: {
-    light: '#BF63F3',
-    dark: '#BF63F380'
-  },
-  ['prism.border.step.4']: {
-    light: '#FFA900',
-    dark: '#FFA90080'
-  }
-};
-const prismBorderAnimationStyles = css({
-  '&::before, &::after': {
-    animationName: rotationAnimation,
-    animationDuration: '2s',
-    animationTimingFunction: 'linear',
-    animationIterationCount: 'infinite',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    ...(isFirefox ? {
-      animationDirection: 'normal',
-      animationDuration: '1s'
-    } : {}),
-    '@media (prefers-reduced-motion)': {
-      animation: 'none'
-    }
-  }
-});
-const prismBorderBaseStyles = css({
-  content: "''",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  position: 'absolute',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  zIndex: -1,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  width: `calc(100% + 2px)`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  height: `calc(100% + 2px)`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  top: `-1px`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  left: `-1px`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderRadius: `calc(${"var(--ds-border-radius-100, 3px)"} + 1px)`,
-  transform: 'translate3d(0, 0, 0)',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  ...(isFirefox ? {
-    background: `linear-gradient(90deg,
-								${aiPrismColor['prism.border.step.1']['light']} 0%,
-								${aiPrismColor['prism.border.step.2']['light']} 12%,
-								${aiPrismColor['prism.border.step.3']['light']} 24%,
-								${aiPrismColor['prism.border.step.4']['light']} 48%,
-								${aiPrismColor['prism.border.step.3']['light']} 64%,
-								${aiPrismColor['prism.border.step.2']['light']} 80%,
-								${aiPrismColor['prism.border.step.1']['light']} 100%
-							)`,
-    backgroundSize: '200%'
-  } : {
-    background: `conic-gradient(
-								from var(--panel-gradient-angle, 270deg),
-								${aiPrismColor['prism.border.step.1']['light']} 0%,
-								${aiPrismColor['prism.border.step.2']['light']} 20%,
-								${aiPrismColor['prism.border.step.3']['light']} 50%,
-								${aiPrismColor['prism.border.step.4']['light']} 56%,
-								${aiPrismColor['prism.border.step.1']['light']} 100%
-							)`
-  })
-});
-const prismBorderDarkStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  ...(isFirefox ? {
-    background: `linear-gradient(90deg,
-								${aiPrismColor['prism.border.step.1']['dark']} 0%,
-								${aiPrismColor['prism.border.step.2']['dark']} 12%,
-								${aiPrismColor['prism.border.step.3']['dark']} 24%,
-								${aiPrismColor['prism.border.step.4']['dark']} 48%,
-								${aiPrismColor['prism.border.step.3']['dark']} 64%,
-								${aiPrismColor['prism.border.step.2']['dark']} 80%,
-								${aiPrismColor['prism.border.step.1']['dark']} 100%
-							)`,
-    backgroundSize: '200%'
-  } : {
-    background: `conic-gradient(
-								from var(--panel-gradient-angle, 270deg),
-								${aiPrismColor['prism.border.step.1']['dark']} 0%,
-								${aiPrismColor['prism.border.step.2']['dark']} 20%,
-								${aiPrismColor['prism.border.step.3']['dark']} 50%,
-								${aiPrismColor['prism.border.step.4']['dark']} 56%,
-								${aiPrismColor['prism.border.step.1']['dark']} 100%
-							)`
-  })
-});
-const prismBorderHoverStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  background: "var(--ds-border-input, #8590A2)"
-});
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
-const aiPanelBaseStyles = css`
-	@property --panel-gradient-angle {
-		syntax: '<angle>';
-		initial-value: 270deg;
-		inherits: false;
-	}
-
-	div[extensionType='com.atlassian.ai-blocks'] {
-		/* This hides the label for the extension */
-		.extension-label {
-			display: none;
-		}
-
-		/* This styles the ai panel correctly when its just sitting on the page and there
-		is no user interaction */
-		.extension-container {
-			position: relative;
-			box-shadow: none;
-			overflow: unset;
-			background-color: ${"var(--ds-surface, #FFFFFF)"} !important;
-			&::before,
-			&::after {
-				${prismBorderBaseStyles}
-			}
-			&.with-hover-border {
-				&::before,
-				&::after {
-					${prismBorderHoverStyles}
-				}
-			}
-			& .with-margin-styles {
-				background-color: ${"var(--ds-surface, #FFFFFF)"} !important;
-				border-radius: ${"var(--ds-border-radius-100, 3px)"};
-			}
-		}
-	}
-
-	/* This styles the ai panel correctly when its streaming */
-	div[extensionType='com.atlassian.ai-blocks']:has(.streaming) {
-		.extension-container {
-			box-shadow: none;
-			overflow: unset;
-			${prismBorderAnimationStyles}
-			&::before,
-			&::after {
-				${prismBorderBaseStyles}
-			}
-		}
-	}
-
-	/* This styles the ai panel correctly when a user is hovering over the delete button in the floating panel */
-	div[extensionType='com.atlassian.ai-blocks'].danger {
-		.extension-container {
-			box-shadow: 0 0 0 1px ${"var(--ds-border-danger, #E2483D)"};
-		}
-	}
-
-	/* This removes the margin from the action list when inside an ai panel */
-	div[extensiontype='com.atlassian.ai-blocks'][extensionkey='ai-action-items-block:aiActionItemsBodiedExtension'] {
-		div[data-node-type='actionList'] {
-			margin: 0 !important;
-		}
-	}
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
-const aiPanelDarkStyles = css`
-	div[extensionType='com.atlassian.ai-blocks'] {
-		.extension-container {
-			&::before,
-			&::after {
-				${prismBorderDarkStyles}
-			}
-		}
-	}
-
-	/* This styles the ai panel correctly when its streaming */
-	div[extensionType='com.atlassian.ai-blocks']:has(.streaming) {
-		.extension-container {
-			&::before,
-			&::after {
-				${prismBorderDarkStyles}
-			}
-		}
-	}
-`;
 
 // The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
 const akEditorBreakpointForSmallDevice = `1266px`;
@@ -1149,11 +399,11 @@ const contentStyles = () => css`
 
   ${textColorStyles}
 
-  ${backgroundColorStyles()}
+  ${backgroundColorStyles}
 
   ${listsStyles}
 
-  ${ruleStyles()}
+  ${ruleStyles}
 
   ${mediaStyles()}
 
@@ -1182,8 +432,6 @@ const contentStyles = () => css`
 
   ${gridStyles}
 
-  ${linkStyles}
-
   ${blockMarksSharedStyles}
 
   ${dateSharedStyle}
@@ -1354,18 +602,8 @@ const listLayoutShiftFix = css({
  * EditorContentStyles is a wrapper component that applies styles to its children
  * based on the provided feature flags, view mode, and other props.
  * It uses Emotion for styling and supports scrollable content.
- * The component is memoized to optimize performance.
  *
  * This will be used in near future to replace the current editor content styles from index.tsx
- *
- * @param {EditorContentContainerProps} props - The props for the component.
- * @param {string} props.className - Additional class name for the component.
- * @param {React.ReactNode} props.children - The content to be rendered inside the component.
- * @param {FeatureFlags} props.featureFlags - Feature flags to control the styles.
- * @param {'view' | 'edit'} props.viewMode - The view mode of the editor.
- * @param {boolean} props.isScrollable - Whether the content is scrollable.
- * @param {'full-page' | 'full-width' | 'comment' | 'chromeless'} props.appearance - The appearance of the editor.
- * @returns {JSX.Element} The styled content component.
  */
 const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -1385,7 +623,17 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: className,
     ref: ref,
-    css: [contentStyles(), layoutBaseStyles(), aiPanelBaseStyles, colorMode === 'dark' && aiPanelDarkStyles, viewMode === 'view' && layoutViewStyles, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles, fg('platform_editor_ssr_fix_lists') && listLayoutShiftFix],
+    css: [contentStyles(),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    layoutBaseStyles(),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    fg('platform_editor_hyperlink_underline') ? linkStyles : linkStylesOld,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    aiPanelBaseStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    colorMode === 'dark' && aiPanelDarkStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    viewMode === 'view' && layoutViewStyles, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles, fg('platform_editor_ssr_fix_lists') && listLayoutShiftFix],
     "data-editor-scroll-container": isScrollable ? 'true' : undefined,
     "data-testid": "editor-content-container",
     style: {