@atlaskit/editor-core 207.0.2 → 207.0.3

package/dist/es2019/ui/EditorContentContainer.js

@@ -5,38 +5,39 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { useMemo } from 'react';
+import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx, useTheme } from '@emotion/react';
+import { css, jsx, keyframes, 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, MediaSharedClassNames, SmartCardSharedCssClassName, annotationSharedStyles, backgroundColorStyles, blockMarksSharedStyles, codeBlockInListSafariFix, codeMarkSharedStyles, dateSharedStyle, embedCardStyles, expandClassNames, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, linkSharedStyle, listsSharedStyles, paragraphSharedStyles, resizerStyles, ruleSharedStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
+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, ruleSharedStyles, 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 { SelectionStyle, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, akEditorSelectedBorderColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles } from '@atlaskit/editor-shared-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 { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { InlineNodeViewSharedStyles } from '../nodeviews/getInlineNodeViewProducer.styles';
-import { aiPanelStyles } from './ContentStyles/ai-panels';
 import { codeBlockStyles } from './ContentStyles/code-block';
 import { dateStyles, dateVanillaStyles } from './ContentStyles/date';
 import { expandStyles } from './ContentStyles/expand';
 import { extensionStyles } from './ContentStyles/extension';
-import { layoutStyles } from './ContentStyles/layout';
 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 {
@@ -286,22 +287,747 @@ const firstBlockNodeStylesNew = css`
 		}
 	}
 `;
-
-/**
- * fix layout issue of first block node
- */
 export const fixBlockControlStylesSSR = () => {
   if (fg('platform_editor_element_dnd_nested_fix_patch_6')) {
     return firstBlockNodeStylesNew;
   }
   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`;
 
 // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
-const contentStyles = props => css`
+const contentStyles = () => css`
 	--ak-editor--default-gutter-padding: ${akEditorGutterPadding}px;
 	/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */
 	--ak-editor--large-gutter-padding: ${akEditorGutterPaddingDynamic()}px;
@@ -342,11 +1068,9 @@ const contentStyles = props => css`
 
 	.ProseMirror {
 		outline: none;
-		font-size: ${editorFontSize({
-  theme: props.theme
-})}px;
+		font-size: var(--ak-editor-base-font-size);
 		${whitespaceSharedStyles};
-		${paragraphSharedStyles(props.typographyTheme)};
+		${paragraphSharedStyles()};
 		${listsSharedStyles};
 		${indentationSharedStyles};
 		${shadowSharedStyle};
@@ -358,7 +1082,7 @@ const contentStyles = props => css`
 					pointer-events: none;
 					opacity: 0.7;
 				}
-		  `}
+			`}
 
 	.ProseMirror-hideselection *::selection {
 		background: transparent;
@@ -379,14 +1103,14 @@ const contentStyles = props => css`
 				.ProseMirror-hideselection {
 					caret-color: transparent;
 				}
-		  ` : null}
+			` : null}
 
 	/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */
 	${editorExperiment('platform_editor_advanced_code_blocks', true) ? css`
 				.ProseMirror-hideselection {
 					caret-color: transparent;
 				}
-		  ` : null}
+			` : null}
 
 	.ProseMirror-selectednode {
 		outline: none;
@@ -410,14 +1134,13 @@ const contentStyles = props => css`
 
   ${codeBlockStyles()}
 
-  ${blocktypeStyles(props.typographyTheme)}
+  ${blocktypeStyles()}
   ${codeMarkSharedStyles()}
   ${textColorStyles}
   ${backgroundColorStyles()}
   ${listsStyles}
   ${ruleStyles()}
   ${mediaStyles()}
-  ${layoutStyles(props.viewMode)}
   ${fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly}
   ${gapCursorStyles};
 	${panelStyles()}
@@ -465,7 +1188,6 @@ const contentStyles = props => css`
   ${embedCardStyles()}
   ${unsupportedStyles}
   ${resizerStyles}
-  ${aiPanelStyles(props.colorMode)}
   ${fixBlockControlStylesSSR()}
 
   .panelView-content-wrap {
@@ -533,7 +1255,7 @@ const contentStyles = props => css`
 						max-width: 18px;
 					}
 				}
-		  ` : null}
+			` : null}
 `;
 const CommentEditorMargin = 14;
 
@@ -593,32 +1315,29 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     className,
     children,
-    featureFlags,
     viewMode,
     isScrollable,
     appearance
   } = props;
   const theme = useTheme();
   const {
-    colorMode,
-    typography
+    colorMode
   } = useThemeObserver();
-  const memoizedStyle = useMemo(() => contentStyles({
-    theme,
-    colorMode,
-    featureFlags,
-    viewMode,
-    typographyTheme: typography
-  }), [theme, colorMode, featureFlags, viewMode, typography]);
   const isFullPage = appearance === 'full-page' || appearance === 'full-width';
   const isComment = appearance === 'comment';
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: className,
     ref: ref,
-    css: [memoizedStyle, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles],
+    css: [contentStyles(), layoutBaseStyles(), aiPanelBaseStyles, colorMode === 'dark' && aiPanelDarkStyles, viewMode === 'view' && layoutViewStyles, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles],
     "data-editor-scroll-container": isScrollable ? 'true' : undefined,
-    "data-testid": "editor-content-container"
+    "data-testid": "editor-content-container",
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      '--ak-editor-base-font-size': `${editorFontSize({
+        theme
+      })}px`
+    }
   }, children);
 });
 export default EditorContentContainer;