@atlaskit/editor-core 207.2.0 → 207.2.1

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

@@ -0,0 +1,120 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from "@emotion/react";
+import { LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from "@atlaskit/editor-common/styles";
+import { TableCssClassName } from "@atlaskit/editor-plugins/table/types";
+import { tableMarginFullWidthMode } from "@atlaskit/editor-plugins/table/ui/consts";
+import { gridMediumMaxWidth, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle, akEditorSelectedBorderSize, akEditorDeleteBackground, akEditorDeleteBorder, akLayoutGutterOffset, akEditorSwoopCubicBezier } from "@atlaskit/editor-shared-styles";
+import { fg } from "@atlaskit/platform-feature-flags";
+import { editorExperiment } from "@atlaskit/tmp-editor-statsig/experiments";
+var columnLayoutSharedStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '[data-layout-section]': _defineProperty({
+    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'
+    }
+  }, "@media screen and (max-width: ".concat(gridMediumMaxWidth, "px)"), {
+    flexDirection: 'column'
+  })
+});
+var 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'
+  }
+});
+var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
+  return fg('platform_editor_nested_dnd_styles_changes') ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\t> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span)) {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t"]))) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\t> :not(style):first-child,\n\t\t\t\t> style:first-child + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t"])));
+};
+var layoutColumnStyles = function layoutColumnStyles() {
+  return editorExperiment('advanced_layouts', true) ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t> [data-layout-column] {\n\t\t\t\t\tmargin: 0 ", "px;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:first-of-type {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:last-of-type {\n\t\t\t\t\tmargin-right: 0;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column].", ":not(.danger) {\n\t\t\t\t\t", ";\n\t\t\t\t\t/* layout column selection shorter after layout border has been removed */\n\t\t\t\t\t::before {\n\t\t\t\t\t\twidth: calc(100% - 8px);\n\t\t\t\t\t\tleft: 4px;\n\t\t\t\t\t\tborder-radius: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), LAYOUT_SECTION_MARGIN / 2, gridMediumMaxWidth, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Blanket]), "var(--ds-border-radius, 3px)") : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: ", "px;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), LAYOUT_SECTION_MARGIN, gridMediumMaxWidth);
+};
+var layoutSectionStyles = function layoutSectionStyles() {
+  return editorExperiment('advanced_layouts', true) ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t\t\t", ";\n\t\t\t\t.layout-section-container [data-layout-section] {\n\t\t\t\t\t> .ProseMirror-widget {\n\t\t\t\t\t\tflex: none;\n\t\t\t\t\t\tdisplay: contents !important;\n\n\t\t\t\t\t\t&[data-blocks-drag-handle-container] div {\n\t\t\t\t\t\t\tdisplay: contents !important;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&[data-blocks-drop-target-container] {\n\t\t\t\t\t\t\tdisplay: block !important;\n\t\t\t\t\t\t\tmargin: ", ";\n\n\t\t\t\t\t\t\t[data-drop-target-for-element] {\n\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t& + [data-layout-column] {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t> [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), columnLayoutResponsiveSharedStyle, "var(--ds-space-negative-050, -4px)") : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t\t\t\t", "\n\t\t\t"])), columnLayoutSharedStyle);
+};
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var layoutBorderBaseStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t/* TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\tThis is because the default state already uses the same token and, as such, the hover style won't change anything.\n\thttps://product-fabric.atlassian.net/browse/DSP-4441 */\n\t/* Shows the border when cursor is inside a layout */\n\t&.selected [data-layout-column],\n\t&:hover [data-layout-column] {\n\t\tborder: ", "px solid ", ";\n\t}\n\n\t&.selected.danger [data-layout-column] {\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t}\n\n\t&.", ":not(.danger) {\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t\t::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n"])), akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]));
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var layoutBorderViewStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t&.selected [data-layout-column],\n\t&:hover [data-layout-column] {\n\t\tborder: 0;\n\t}\n"])));
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var columnSeparatorBaseStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-left: ", "px solid ", ";\n\t\tposition: absolute;\n\t\theight: calc(100% - 24px);\n\t\tmargin-left: -25px;\n\t}\n"])), akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var columnSeparatorViewStyles = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t[data-layout-content]::before {\n\t\tborder-left: 0;\n\t}\n"])));
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var rowSeparatorBaseStyles = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-top: ", "px solid ", ";\n\t\tposition: absolute;\n\t\twidth: calc(100% - 32px);\n\t\tmargin-top: -13px;\n\n\t\t/* clear styles for column separator */\n\t\tborder-left: unset;\n\t\tmargin-left: unset;\n\t\theight: unset;\n\t}\n"])), akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var rowSeparatorViewStyles = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n\t[data-layout-content]::before {\n\t\tborder-top: 0;\n\t}\n"])));
+
+// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
+var layoutWithSeparatorBorderResponsiveBaseStyles = function layoutWithSeparatorBorderResponsiveBaseStyles(breakpoint
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+) {
+  return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n\t&.selected,\n\t&:hover,\n\t&.selected.danger,\n\t&.", ":not(.danger) {\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t@container editor-area (max-width:", "px) {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), akEditorSelectedNodeClassName, breakpoint, rowSeparatorBaseStyles);
+};
+
+// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
+var layoutWithSeparatorBorderResponsiveViewStyles = function layoutWithSeparatorBorderResponsiveViewStyles(breakpoint
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+) {
+  return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n\t&.selected,\n\t&:hover,\n\t&.selected.danger,\n\t&.", ":not(.danger) {\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t@container editor-area (max-width:", "px) {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), akEditorSelectedNodeClassName, breakpoint, rowSeparatorViewStyles);
+};
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var layoutWithSeparatorBorderBaseStyles = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n\t&.selected [data-layout-column]:not(:first-of-type),\n\t[data-empty-layout='true'] [data-layout-column]:not(:first-of-type),\n\t&:hover [data-layout-column]:not(:first-of-type) {\n\t\t", "\n\t}\n\n\t&.selected.danger [data-layout-section] {\n\t\tbackground-color: ", ";\n\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\tborder-radius: 4px;\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&.", ":not(.danger) [data-layout-section] {\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\tborder-radius: 4px;\n\t\tbackground-color: ", ";\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t\tborder: 0px;\n\t\t\t::before {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t}\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", "\n\t\t}\n\t}\n"])), columnSeparatorBaseStyles, "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderSize, akEditorDeleteBorder, columnSeparatorBaseStyles, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, "var(--ds-border-selected, #0C66E4)", "var(--ds-background-selected, #E9F2FF)", getSelectionStyles([SelectionStyle.Blanket]), columnSeparatorBaseStyles);
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var layoutWithSeparatorBorderViewStyles = css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n\t&.selected [data-layout-column]:not(:first-of-type),\n\t[data-empty-layout='true'] [data-layout-column]:not(:first-of-type),\n\t&:hover [data-layout-column]:not(:first-of-type) {\n\t\t", "\n\t}\n\n\t&.selected.danger [data-layout-section] {\n\t\tbox-shadow: 0 0 0 0 ", ";\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&.", ":not(.danger) [data-layout-section] {\n\t\tbox-shadow: 0 0 0 0 ", ";\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", "\n\t\t}\n\t}\n"])), columnSeparatorViewStyles, akEditorDeleteBorder, columnSeparatorViewStyles, akEditorSelectedNodeClassName, "var(--ds-border-selected, #0C66E4)", 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
+var layoutResponsiveBaseStyles = css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n\t/* chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer */\n\t/* not resized layout in full-width editor */\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t> .layoutSectionView-content-wrap {\n\t\t\t[data-layout-section] {\n\t\t\t\t@container editor-area (max-width:724px) {\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t}\n\n\t/* not resized layout in fixed-width editor */\n\t.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror {\n\t\t> .layoutSectionView-content-wrap {\n\t\t\t[data-layout-section] {\n\t\t\t\t@container editor-area (max-width:788px) {\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t}\n\n\t/* resized layout in full/fixed-width editor */\n\t.ProseMirror .fabric-editor-breakout-mark {\n\t\t.layoutSectionView-content-wrap {\n\t\t\t[data-layout-section] {\n\t\t\t\t@container editor-area (max-width:820px) {\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t}\n"])), layoutWithSeparatorBorderResponsiveBaseStyles(724), layoutWithSeparatorBorderResponsiveBaseStyles(788), layoutWithSeparatorBorderResponsiveBaseStyles(820));
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var layoutResponsiveViewStyles = css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n\t/* chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer */\n\t/* not resized layout in full-width editor */\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t> .layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t/* not resized layout in fixed-width editor */\n\t.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror {\n\t\t> .layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t/* resized layout in full/fixed-width editor */\n\t.ProseMirror .fabric-editor-breakout-mark {\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n"])), layoutWithSeparatorBorderResponsiveViewStyles(724), layoutWithSeparatorBorderResponsiveViewStyles(788), layoutWithSeparatorBorderResponsiveViewStyles(820));
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
+export var layoutBaseStyles = function layoutBaseStyles() {
+  return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t/* Ignored via go/ees007\n\t\t\tTODO: Migrate away from gridSize\n\t\t\tRecommendation: Replace directly with 7px */\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: pointer;\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tposition: relative;\n\n\t\t\t\tmin-width: 0;\n\t\t\t\t/* disable 4 borders when in view mode and advanced layouts is on */\n\t\t\t\tborder: ", "px\n\t\t\t\t\tsolid ", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n\t\t\t and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n\t\t   handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\n\t\t/* styles to support borders for layout */\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", "\n\n\t/* hide separator when element is dragging on top of a layout column */\n\t[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before {\n\t\tdisplay: none;\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n"])), layoutSectionStyles(), "var(--ds-space-100, 8px)", akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? 8 : 0), akEditorSwoopCubicBezier, editorExperiment('advanced_layouts', true) ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", LAYOUT_COLUMN_PADDING, LAYOUT_COLUMN_PADDING + (fg('platform_editor_nested_dnd_styles_changes') ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), editorExperiment('advanced_layouts', true) ? layoutWithSeparatorBorderBaseStyles : layoutBorderBaseStyles, editorExperiment('advanced_layouts', true) && layoutResponsiveBaseStyles, TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode, editorExperiment('advanced_layouts', false) && fg('platform_editor_nested_dnd_styles_changes') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
+};
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Needs manual remediation
+export var layoutViewStyles = css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t[data-layout-section] {\n\t\t\tcursor: default;\n\t\t\t[data-layout-column] {\n\t\t\t\tborder: 0;\n\t\t\t}\n\t\t}\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", "\n"])), editorExperiment('advanced_layouts', true) ? layoutWithSeparatorBorderViewStyles : layoutBorderViewStyles, editorExperiment('advanced_layouts', true) && layoutResponsiveViewStyles);

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

@@ -0,0 +1,26 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from "@emotion/react";
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var linkStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror a.blockLink': {
+    display: 'block'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror a[data-prosemirror-mark-name="link"]': {
+    textDecoration: 'underline'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror a[data-prosemirror-mark-name="link"]:hover': {
+    textDecoration: 'none'
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var linkStylesOld = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror a.blockLink': {
+    display: 'block'
+  }
+});

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

@@ -0,0 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from "@emotion/react";
+import { akEditorSelectedNodeClassName } from "@atlaskit/editor-shared-styles";
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var ruleStyles = css(_defineProperty({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror hr': {
+    border: 'none',
+    backgroundColor: "var(--ds-border, #091E4224)",
+    height: '2px',
+    borderRadius: '1px',
+    cursor: 'pointer',
+    padding: "var(--ds-space-050, 4px)".concat(" 0"),
+    margin: "var(--ds-space-300, 24px)".concat(" 0"),
+    backgroundClip: 'content-box'
+  }
+}, ".ProseMirror hr.".concat(akEditorSelectedNodeClassName), {
+  outline: 'none',
+  backgroundColor: "var(--ds-border-selected, #0C66E4)"
+}));

package/dist/esm/version-wrapper.js

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

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

@@ -4,7 +4,6 @@
  */
 import React from 'react';
 import type { EditorAppearance, FeatureFlags } from '@atlaskit/editor-common/types';
-export declare const linkStyles: import("@emotion/react").SerializedStyles;
 export declare const placeholderStyles: import("@emotion/react").SerializedStyles;
 export declare const fixBlockControlStylesSSR: () => import("@emotion/react").SerializedStyles;
 export type EditorContentContainerProps = {
@@ -19,18 +18,8 @@ export type EditorContentContainerProps = {
  * 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.
  */
 declare const EditorContentContainer: React.ForwardRefExoticComponent<EditorContentContainerProps & React.RefAttributes<HTMLDivElement>>;
 export default EditorContentContainer;

package/dist/types/ui/EditorContentContainer/styles/ai-panel.d.ts

@@ -0,0 +1,2 @@
+export declare const aiPanelBaseStyles: import("@emotion/react").SerializedStyles;
+export declare const aiPanelDarkStyles: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,2 @@
+export declare const layoutBaseStyles: () => import("@emotion/react").SerializedStyles;
+export declare const layoutViewStyles: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,2 @@
+export declare const linkStyles: import("@emotion/react").SerializedStyles;
+export declare const linkStylesOld: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1 @@
+export declare const ruleStyles: import("@emotion/react").SerializedStyles;

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

@@ -4,7 +4,6 @@
  */
 import React from 'react';
 import type { EditorAppearance, FeatureFlags } from '@atlaskit/editor-common/types';
-export declare const linkStyles: import("@emotion/react").SerializedStyles;
 export declare const placeholderStyles: import("@emotion/react").SerializedStyles;
 export declare const fixBlockControlStylesSSR: () => import("@emotion/react").SerializedStyles;
 export type EditorContentContainerProps = {
@@ -19,18 +18,8 @@ export type EditorContentContainerProps = {
  * 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.
  */
 declare const EditorContentContainer: React.ForwardRefExoticComponent<EditorContentContainerProps & React.RefAttributes<HTMLDivElement>>;
 export default EditorContentContainer;

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

@@ -0,0 +1,2 @@
+export declare const aiPanelBaseStyles: import("@emotion/react").SerializedStyles;
+export declare const aiPanelDarkStyles: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,2 @@
+export declare const layoutBaseStyles: () => import("@emotion/react").SerializedStyles;
+export declare const layoutViewStyles: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,2 @@
+export declare const linkStyles: import("@emotion/react").SerializedStyles;
+export declare const linkStylesOld: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1 @@
+export declare const ruleStyles: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "207.2.0",
+	"version": "207.2.1",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -90,7 +90,7 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/adf-utils": "^19.19.0",
 		"@atlaskit/analytics-listeners": "^9.0.0",
-		"@atlaskit/collab-provider": "^10.14.0",
+		"@atlaskit/collab-provider": "^10.15.0",
 		"@atlaskit/editor-plugin-annotation": "^2.8.0",
 		"@atlaskit/editor-plugin-card": "^6.3.0",
 		"@atlaskit/editor-plugin-list": "^4.2.0",