@atlaskit/editor-core 214.2.3 → 215.0.0

package/dist/es2019/ui/ContentStyles/layout.js

@@ -1,388 +0,0 @@
-/**
- * TODO ED-26957 - remove legacy styles when static emotion refactor is complete
- * We are moving this to new location under FF: platform_editor_core_static_emotion
- * New location: packages/editor/editor-core/src/ui/EditorContentContainer.tsx
- * If you are making updates to this file, please updates in new location as well.
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-import { columnLayoutResponsiveSharedStyle, columnLayoutSharedStyle, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '@atlaskit/editor-common/styles';
-import { TableCssClassName } from '@atlaskit/editor-plugins/table/types';
-import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-const AK_NESTED_DND_GUTTER_OFFSET = 8;
-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;
-				}
-			`;
-// Ignored via go/ees007
-// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
-// TODO handle responsive
-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-radius-small, 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 layoutBorderStyles = viewMode => 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: ${viewMode === 'view' ? 0 : 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 columnSeparatorStyles = viewMode => css`
-	[data-layout-content]::before {
-		content: '';
-		border-left: ${viewMode === 'view' ? 0 : 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 rowSeparatorStyles = viewMode => css`
-	[data-layout-content]::before {
-		content: '';
-		border-top: ${viewMode === 'view' ? 0 : 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;
-	}
-`;
-
-// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
-const layoutWithSeparatorBorderResponsiveStyles = (breakpoint, viewMode
-// 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) {
-				${rowSeparatorStyles(viewMode)}
-			}
-		}
-	}
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-const layoutWithSeparatorBorderStyles = viewMode => {
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  return 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) {
-			${columnSeparatorStyles(viewMode)}
-		}
-
-		&.selected.danger [data-layout-section] {
-			background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
-
-			box-shadow: 0 0 0 ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px
-				${akEditorDeleteBorder};
-			border-radius: 4px;
-			[data-layout-column]:not(:first-of-type) {
-				${columnSeparatorStyles(viewMode)}
-			}
-		}
-
-		&.${akEditorSelectedNodeClassName}:not(.danger) [data-layout-section] {
-			box-shadow: 0 0 0 ${viewMode === 'view' ? 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) {
-				${columnSeparatorStyles(viewMode)}
-			}
-		}
-	`;
-};
-
-// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
-const layoutResponsiveStyles = viewMode =>
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-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;
-					}
-				}
-
-				${layoutWithSeparatorBorderResponsiveStyles(724, viewMode)}
-			}
-		}
-
-		/* 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;
-					}
-				}
-
-				${layoutWithSeparatorBorderResponsiveStyles(788, viewMode)}
-			}
-		}
-
-		/* 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;
-					}
-				}
-
-				${layoutWithSeparatorBorderResponsiveStyles(820, viewMode)}
-			}
-		}
-	`;
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
-export const layoutStyles = viewMode => 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') ? AK_NESTED_DND_GUTTER_OFFSET : 0)}px
-				0;
-			transition: border-color 0.3s ${akEditorSwoopCubicBezier};
-			cursor: ${viewMode === 'view' ? 'default' : '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: ${viewMode === 'view' || 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) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode)}
-		}
-	}
-
-	${editorExperiment('advanced_layouts', true) && layoutResponsiveStyles(viewMode)}
-
-	/* 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 ${"var(--ds-space-025, 2px)"}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;
-				}`}
-`;

package/dist/es2019/ui/ContentStyles/media.js

@@ -1,207 +0,0 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-import { mediaInlineImageStyles } from '@atlaskit/editor-common/media-inline';
-import { mediaSingleSharedStyleNew, richMediaClassName } from '@atlaskit/editor-common/styles';
-import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorSelectedBorderBoldSize, akEditorSelectedBoxShadow, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { fileCardImageViewSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const mediaStyles = () => css`
-	.ProseMirror {
-		${mediaSingleSharedStyleNew} & [layout='full-width'] .${richMediaClassName},
-    & [layout='wide'] .${richMediaClassName} {
-			margin-left: 50%;
-			transform: translateX(-50%);
-		}
-
-		.media-extended-resize-experience[layout^='wrap-'] {
-			/* override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle
-			to prevent scroll bar */
-			overflow: visible !important;
-		}
-
-		& [layout^='wrap-'] + [layout^='wrap-'] {
-			clear: none;
-			& + p,
-			& + div[class^='fabric-editor-align'],
-			& + ul,
-			& + ol,
-			& + h1,
-			& + h2,
-			& + h3,
-			& + h4,
-			& + h5,
-			& + h6 {
-				clear: both !important;
-			}
-			& .${richMediaClassName} {
-				margin-left: 0;
-				margin-right: 0;
-			}
-		}
-
-		${mediaInlineImageStyles}
-
-		.mediaSingleView-content-wrap[layout^='wrap-'] {
-			max-width: 100%;
-			/* overwrite default Prosemirror setting making it clear: both */
-			clear: inherit;
-		}
-
-		.mediaSingleView-content-wrap[layout='wrap-left'] {
-			float: left;
-		}
-
-		.mediaSingleView-content-wrap[layout='wrap-right'] {
-			float: right;
-		}
-
-		.mediaSingleView-content-wrap[layout='wrap-right']
-			+ .mediaSingleView-content-wrap[layout='wrap-left'] {
-			clear: both;
-		}
-
-		/* Larger margins for resize handlers when at depth 0 of the document */
-		& > .mediaSingleView-content-wrap {
-			.richMedia-resize-handle-right {
-				margin-right: -${akEditorMediaResizeHandlerPaddingWide}px;
-			}
-			.richMedia-resize-handle-left {
-				margin-left: -${akEditorMediaResizeHandlerPaddingWide}px;
-			}
-		}
-	}
-
-	.richMedia-resize-handle-right,
-	.richMedia-resize-handle-left {
-		display: flex;
-		flex-direction: column;
-
-		/* vertical align */
-		justify-content: center;
-	}
-
-	.richMedia-resize-handle-right {
-		align-items: flex-end;
-		padding-right: ${"var(--ds-space-150, 12px)"};
-		margin-right: -${akEditorMediaResizeHandlerPadding}px;
-	}
-
-	.richMedia-resize-handle-left {
-		align-items: flex-start;
-		padding-left: ${"var(--ds-space-150, 12px)"};
-		margin-left: -${akEditorMediaResizeHandlerPadding}px;
-	}
-
-	.richMedia-resize-handle-right::after,
-	.richMedia-resize-handle-left::after {
-		content: ' ';
-		display: flex;
-		width: 3px;
-		height: 64px;
-
-		border-radius: 6px;
-	}
-
-	.${richMediaClassName}:hover .richMedia-resize-handle-left::after,
-	.${richMediaClassName}:hover .richMedia-resize-handle-right::after {
-		background: ${"var(--ds-border, #091E4224)"};
-	}
-
-	.${akEditorSelectedNodeClassName} .richMedia-resize-handle-right::after,
-	.${akEditorSelectedNodeClassName} .richMedia-resize-handle-left::after,
-	.${richMediaClassName} .richMedia-resize-handle-right:hover::after,
-	.${richMediaClassName} .richMedia-resize-handle-left:hover::after,
-	.${richMediaClassName}.is-resizing .richMedia-resize-handle-right::after,
-	.${richMediaClassName}.is-resizing .richMedia-resize-handle-left::after {
-		background: ${"var(--ds-border-focused, #388BFF)"};
-	}
-
-	.__resizable_base__ {
-		left: unset !important;
-		width: auto !important;
-		height: auto !important;
-	}
-
-	/* Danger when top level node for smart cards / inline links */
-	.danger > div > div > .media-card-frame,
-	.danger > span > a {
-		background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
-		box-shadow: 0px 0px 0px ${akEditorSelectedBorderBoldSize}px
-			${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
-		transition:
-			background-color 0s,
-			box-shadow 0s;
-	}
-	/* Danger when nested node or common */
-	.danger {
-		/* Media single */
-		.${richMediaClassName} .${fileCardImageViewSelector}::after {
-			border: 1px solid ${`var(--ds-border-danger, ${akEditorDeleteIconColor})`};
-		}
-		/* Media single video player */
-		.${richMediaClassName} .${inlinePlayerClassName}::after {
-			border: 1px solid ${`var(--ds-border-danger, ${akEditorDeleteIconColor})`};
-		}
-		/* New file experience */
-		.${richMediaClassName} .${newFileExperienceClassName} {
-			box-shadow: 0 0 0 1px ${`var(--ds-border-danger, ${akEditorDeleteIconColor})`} !important;
-		}
-		/* Media resize legacy handlers */
-		.richMedia-resize-handle-right::after,
-		.richMedia-resize-handle-left::after {
-			background: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`} !important;
-		}
-		/* Media resize new handlers */
-		.resizer-handle-thumb {
-			background: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`} !important;
-		}
-
-		/* Smart cards */
-		div div .media-card-frame,
-		.inlineCardView-content-wrap > span > a {
-			background-color: ${"var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))"}; /* R75 with 50% opactiy */
-			transition: background-color 0s;
-		}
-
-		div div .media-card-frame::after {
-			box-shadow: none;
-		}
-	}
-
-	.warning {
-		/* Media single */
-		.${richMediaClassName} .${fileCardImageViewSelector}::after {
-			border: 1px solid ${"var(--ds-border-warning, #E56910)"};
-		}
-
-		.${richMediaClassName} .${inlinePlayerClassName}::after {
-			border: 1px solid ${"var(--ds-border-warning, #E56910)"};
-		}
-
-		.${richMediaClassName} .${newFileExperienceClassName} {
-			box-shadow: 0 0 0 1px ${"var(--ds-border-warning, #E56910)"} !important;
-		}
-
-		.resizer-handle-thumb {
-			background: ${"var(--ds-icon-warning, #E56910)"} !important;
-		}
-	}
-
-	.media-filmstrip-list-item {
-		cursor: pointer;
-	}
-
-	/* When clicking drag handle, mediaGroup node will be selected. Hence we need to apply selected style to each media node */
-	.mediaGroupView-content-wrap.${akEditorSelectedNodeClassName} #newFileExperienceWrapper {
-		box-shadow: ${akEditorSelectedBoxShadow};
-	}
-`;
-
-/* `left: unset` above is to work around Chrome bug where rendering a div with
- * that style applied inside a container that has a scroll, causes any svgs on
- * the page, without a border, that are inside a flexbox, to no longer align to
- * the center of their viewbox.
- *
- * for us, this means that all the toolbar icons start jumping around if
- * you make the viewport small
- */

package/dist/es2019/ui/ContentStyles/panel.js

@@ -1,66 +0,0 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-import { PanelSharedCssClassName, panelSharedStyles } from '@atlaskit/editor-common/panel';
-import { akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags';
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation due to mixin usage
-export const panelStyles = () => css`
-	.ProseMirror {
-		.${PanelSharedCssClassName.prefix} {
-			cursor: pointer;
-
-			/* Danger when top level node */
-			&.danger {
-				box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
-				background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`} !important;
-
-				.${PanelSharedCssClassName.icon} {
-					color: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`} !important;
-				}
-			}
-		}
-
-		.${PanelSharedCssClassName.content} {
-			cursor: text;
-		}
-
-		/* Danger when nested node */
-		.danger .${PanelSharedCssClassName.prefix} {
-			&[data-panel-type] {
-				background-color: ${`var(--ds-blanket-danger, ${akEditorDeleteBackgroundWithOpacity})`};
-
-				.${PanelSharedCssClassName.icon} {
-					color: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`};
-				}
-			}
-		}
-
-		${panelSharedStyles()};
-	}
-
-	.${PanelSharedCssClassName.prefix}.${akEditorSelectedNodeClassName}:not(.danger) {
-		${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket])}
-	}
-
-	${fg('platform_editor_nested_dnd_styles_changes') && `.ak-editor-content-area.appearance-full-page .ProseMirror {
-		.ak-editor-panel .${PanelSharedCssClassName.icon} {
-			padding-right: ${"var(--ds-space-150, 12px)"};
-		}
-
-		.ak-editor-panel.${PanelSharedCssClassName.noIcon} {
-			padding-left: ${"var(--ds-space-250, 20px)"};
-			padding-right: ${"var(--ds-space-250, 20px)"};
-		}
-	}`};
-
-	/* Don't want extra padding for inline editor (nested) */
-	${fg('platform_editor_nested_dnd_styles_changes') && `.ak-editor-content-area .ak-editor-content-area .ProseMirror {
-		.ak-editor-panel .${PanelSharedCssClassName.icon} {
-			padding-right: ${"var(--ds-space-100, 8px)"};
-		}
-		.ak-editor-panel.${PanelSharedCssClassName.noIcon} {
-			padding-right: ${"var(--ds-space-150, 12px)"};
-			padding-left: ${"var(--ds-space-150, 12px)"};
-		}
-	}`};
-`;