@atlaskit/editor-core 217.10.1 → 217.12.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-core
 
+## 217.12.0
+
+### Minor Changes
+
+- [`a223340e9d81e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a223340e9d81e) -
+  Fix cross-package barrel imports from search packages
+
+### Patch Changes
+
+- Updated dependencies
+
+## 217.11.0
+
+### Minor Changes
+
+- [`fb96753c1753e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fb96753c1753e) -
+  [ux] Introduce adjustable layout column drag handle and update logic behind
+  platform_editor_layout_column_resize_handle experiment
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 217.10.1
 
 ### Patch Changes

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

@@ -393,11 +393,17 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _layout.layoutSectionStylesAdvanced :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _layout.layoutSectionStylesNotAdvanced, (0, _experiments.editorExperiment)('advanced_layouts', true) ?
+    _layout.layoutSectionStylesNotAdvanced, (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _experiments.editorExperiment)('platform_editor_layout_column_resize_handle', true) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _layout.layoutColumnDividerStyles, (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _experiments.editorExperiment)('platform_editor_layout_column_resize_handle', true) && (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _layout.layoutColumnDividerStylesNestedDnD, (0, _experiments.editorExperiment)('advanced_layouts', true) ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _layout.layoutColumnStylesAdvanced :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _layout.layoutColumnStylesNotAdvanced,
+    _layout.layoutColumnStylesNotAdvanced, (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _experiments.editorExperiment)('platform_editor_layout_column_resize_handle', true) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _layout.layoutColumnResizeStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     (0, _experiments.editorExperiment)('advanced_layouts', true) ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

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

@@ -431,6 +431,6 @@ var getExtensionStyles = exports.getExtensionStyles = function getExtensionStyle
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-var extensionDiffStyles = exports.extensionDiffStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".show-diff-changed-decoration-node > span > .extension-container", {
-  boxShadow: "0 0 0 1px var(--diff-decoration-marker-color)"
+var extensionDiffStyles = exports.extensionDiffStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".show-diff-changed-decoration-node > span .extension-container", {
+  boxShadow: "0 0 0 var(--diff-decoration-marker-ring-width, 1px) var(--diff-decoration-marker-color)"
 }));

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.layoutStylesForView = exports.layoutSelectedStylesNotAdvanced = exports.layoutSelectedStylesForViewNotAdvanced = exports.layoutSelectedStylesForViewAdvanced = exports.layoutSelectedStylesAdvancedFix = exports.layoutSelectedStylesAdvanced = exports.layoutSectionStylesNotAdvanced = exports.layoutSectionStylesAdvanced = exports.layoutResponsiveStylesForView = exports.layoutResponsiveBaseStyles = exports.layoutColumnStylesNotAdvanced = exports.layoutColumnStylesAdvanced = exports.layoutColumnResponsiveStyles = exports.layoutColumnMartinTopFixesOld = exports.layoutColumnMartinTopFixesNew = exports.layoutBaseStylesWithTableExcerptsFix = exports.layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync = exports.layoutBaseStylesFixesUnderNestedDnDFG = exports.layoutBaseStylesAdvanced = exports.layoutBaseStyles = void 0;
+exports.layoutStylesForView = exports.layoutSelectedStylesNotAdvanced = exports.layoutSelectedStylesForViewNotAdvanced = exports.layoutSelectedStylesForViewAdvanced = exports.layoutSelectedStylesAdvancedFix = exports.layoutSelectedStylesAdvanced = exports.layoutSectionStylesNotAdvanced = exports.layoutSectionStylesAdvanced = exports.layoutResponsiveStylesForView = exports.layoutResponsiveBaseStyles = exports.layoutColumnStylesNotAdvanced = exports.layoutColumnStylesAdvanced = exports.layoutColumnResponsiveStyles = exports.layoutColumnResizeStyles = exports.layoutColumnMartinTopFixesOld = exports.layoutColumnMartinTopFixesNew = exports.layoutColumnDividerStylesNestedDnD = exports.layoutColumnDividerStyles = exports.layoutBaseStylesWithTableExcerptsFix = exports.layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync = exports.layoutBaseStylesFixesUnderNestedDnDFG = exports.layoutBaseStylesAdvanced = exports.layoutBaseStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _selectionStyles = require("./selectionStyles");
@@ -12,6 +12,63 @@ var _selectionStyles = require("./selectionStyles");
 
 var gridMediumMaxWidth = 1024;
 var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
+
+// Class names for the column resize divider widget — must stay in sync with main.ts in editor-plugin-layout
+var layoutColumnDividerClassName = 'layout-column-divider';
+var layoutColumnDividerRailClassName = 'layout-column-divider-rail';
+var layoutColumnDividerThumbClassName = 'layout-column-divider-thumb';
+
+/**
+ * Styles for the column resize divider widget DOM elements.
+ * Mirrors the pm-breakout-resize-handle-* pattern from resizerStyles.ts.
+ * Applied only when advanced_layouts experiment is on.
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var layoutColumnDividerStyles = exports.layoutColumnDividerStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(layoutColumnDividerClassName), (0, _defineProperty2.default)((0, _defineProperty2.default)({
+  // Negative margin removes the applied 'gap' from the parent's flex box
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginInline: '-15px 0px',
+  flexShrink: 0,
+  boxSizing: 'content-box',
+  cursor: 'col-resize',
+  position: 'relative',
+  zIndex: 2,
+  alignSelf: 'stretch',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+}, "&:hover .".concat(layoutColumnDividerRailClassName), {
+  background: "var(--ds-background-selected, #E9F2FE)"
+}), "&:hover .".concat(layoutColumnDividerThumbClassName), {
+  background: "var(--ds-border-focused, #4688EC)"
+})), ".".concat(layoutColumnDividerRailClassName), {
+  width: 7,
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: "var(--ds-radius-small, 4px)",
+  transition: 'background-color 0.2s',
+  pointerEvents: 'none'
+}), ".".concat(layoutColumnDividerThumbClassName), {
+  minWidth: 3,
+  height: 'clamp(27px, calc(100% - 32px), 96px)',
+  background: "var(--ds-border, #0B120E24)",
+  borderRadius: "var(--ds-radius-medium, 6px)",
+  pointerEvents: 'none',
+  position: 'sticky',
+  top: "var(--ds-space-150, 12px)",
+  bottom: "var(--ds-space-150, 12px)"
+}));
+/**
+ * Override divider marginInline when platform_editor_nested_dnd_styles_changes is on,
+ * since the layout section/column spacing changes.
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var layoutColumnDividerStylesNestedDnD = exports.layoutColumnDividerStylesNestedDnD = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(layoutColumnDividerClassName), {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginInline: '0 -7px'
+}));
 var selectorForNotResizedLayoutInFulllWidthEditor = '.fabric-editor--full-width-mode .ProseMirror > .layoutSectionView-content-wrap';
 var selectorForNotResizedLayoutInFixedWidthEditor = '.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror > .layoutSectionView-content-wrap';
 var selectorForResizedLayoutInFullOrFixedWidthEditor = '.ProseMirror .fabric-editor-breakout-mark .layoutSectionView-content-wrap';
@@ -56,6 +113,25 @@ var layoutColumnStylesAdvanced = exports.layoutColumnStylesAdvanced = (0, _react
   }])
 });
 
+/**
+ * Layout column resize styles for the platform_editor_layout_column_resize_handle experiment
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var layoutColumnResizeStyles = exports.layoutColumnResizeStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror [data-layout-section]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '> [data-layout-column][style*="--column-width"]': {
+      // Support CSS custom property for smooth resizing during drag
+      // When --column-resize-width is set, use it; otherwise fall back to the original flex-basis
+      // Using attribute selector for higher specificity than inline styles
+      flexBasis: 'var(--column-resize-width, var(--column-width))',
+      // Also ensure flex-grow and flex-shrink are reset when using custom width
+      flex: 'var(--column-resize-flex, 1)'
+    }
+  }
+});
+
 /**
  * Layout columns styles when advanced layouts experiment is off
  */
@@ -107,11 +183,11 @@ var layoutColumnResponsiveStyles = exports.layoutColumnResponsiveStyles = (0, _r
  * Layout section styles when advanced layouts experiment is on
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-exported-styles
-var layoutSectionStylesAdvanced = exports.layoutSectionStylesAdvanced = (0, _react.css)({
+var layoutSectionStylesAdvanced = exports.layoutSectionStylesAdvanced = (0, _react.css)((0, _defineProperty2.default)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror .layout-section-container [data-layout-section]': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '> .ProseMirror-widget': {
+    '> .ProseMirror-widget': (0, _defineProperty2.default)((0, _defineProperty2.default)({
       flex: 'none',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
       display: 'contents !important',
@@ -129,18 +205,27 @@ var layoutSectionStylesAdvanced = exports.layoutSectionStylesAdvanced = (0, _rea
         '[data-drop-target-for-element]': {
           position: 'absolute'
         }
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '& + [data-layout-column]': {
-        margin: 0
       }
-    },
+    }, "&.".concat(layoutColumnDividerClassName), {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      display: 'block !important',
+      flex: 'none',
+      opacity: 0,
+      transition: 'opacity 0.2s'
+    }), '& + [data-layout-column]', {
+      margin: 0
+    }),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '> [data-layout-column]': {
       margin: 0
     }
   }
-});
+}, ".ProseMirror .layoutSectionView-content-wrap:hover .layout-section-container [data-layout-section]", (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "> .ProseMirror-widget.".concat(layoutColumnDividerClassName), {
+  opacity: 1
+}), "> .ProseMirror-widget.".concat(layoutColumnDividerClassName, " ~ [data-layout-column] [data-layout-content]::before"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  display: 'none !important'
+})));
 
 /**
  * Layout section styles when advanced layouts experiment is off
@@ -148,7 +233,7 @@ var layoutSectionStylesAdvanced = exports.layoutSectionStylesAdvanced = (0, _rea
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 var layoutSectionStylesNotAdvanced = exports.layoutSectionStylesNotAdvanced = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.ProseMirror [data-layout-section]': (0, _defineProperty2.default)({
+  '.ProseMirror [data-layout-section]': (0, _defineProperty2.default)((0, _defineProperty2.default)({
     position: 'relative',
     display: 'flex',
     flexDirection: 'row',
@@ -161,7 +246,9 @@ var layoutSectionStylesNotAdvanced = exports.layoutSectionStylesNotAdvanced = (0
     '& > .unsupportedBlockView-content-wrap': {
       minWidth: 'initial'
     }
-  }, "@media screen and (max-width: ".concat(gridMediumMaxWidth, "px)"), {
+  }, "& > .".concat(layoutColumnDividerClassName), {
+    flex: 'none'
+  }), "@media screen and (max-width: ".concat(gridMediumMaxWidth, "px)"), {
     flexDirection: 'column'
   })
 });

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

@@ -322,6 +322,9 @@ var pragmaticResizerStyles = exports.pragmaticResizerStyles = (0, _react.css)({
   '.pm-breakout-resize-handle-container--right': {
     justifySelf: 'end'
   },
+  // Rail and thumb styles intentionally mirror the layout column divider
+  // (see layoutColumnDividerRailClassName and layoutColumnDividerThumbClassName in layout.ts).
+  // If updating these styles, consider keeping both in sync.
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.pm-breakout-resize-handle-rail': {
     position: 'relative',

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

@@ -34,12 +34,12 @@ var editorControlsSmartCardStyles = exports.editorControlsSmartCardStyles = (0,
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var smartCardDiffStyles = exports.smartCardDiffStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), (0, _defineProperty2.default)({}, "&[data-testid=\"show-diff-changed-decoration-node\"] .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
-  boxShadow: "0 0 0 1px var(--diff-decoration-marker-color)",
+  boxShadow: "0 0 0 var(--diff-decoration-marker-ring-width, 1px) var(--diff-decoration-marker-color)",
   borderColor: 'transparent'
 })));
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var showDiffDeletedNodeStyles = exports.showDiffDeletedNodeStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "&.show-diff-deleted-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
+var showDiffDeletedNodeStyles = exports.showDiffDeletedNodeStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "&.show-diff-deleted-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
   borderColor: 'transparent'
@@ -47,13 +47,17 @@ var showDiffDeletedNodeStyles = exports.showDiffDeletedNodeStyles = (0, _react.c
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
   borderColor: 'transparent'
+}), "&.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+  boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
+  borderColor: 'transparent'
 }), "&.show-diff-deleted-node-traditional.show-diff-deleted-active .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
-  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
   borderColor: 'transparent'
 }), "&.show-diff-deleted-node.show-diff-deleted-active .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
-  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
   borderColor: 'transparent'
 }), "&.show-diff-deleted-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER), {
   opacity: 0.6
@@ -72,18 +76,25 @@ var showDiffDeletedNodeStyles = exports.showDiffDeletedNodeStyles = (0, _react.c
     boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
     borderRadius: "var(--ds-radius-small, 4px)"
   }
+}), '.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .media-card-wrapper', {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& > div': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+    boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
+    borderRadius: "var(--ds-radius-small, 4px)"
+  }
 }), '.show-diff-deleted-node-traditional.show-diff-deleted-active .media-card-wrapper', {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '& > div': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
-    boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+    boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
     borderRadius: "var(--ds-radius-small, 4px)"
   }
 }), '.show-diff-deleted-node.show-diff-deleted-active .media-card-wrapper', {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '& > div': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
-    boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+    boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
     borderRadius: "var(--ds-radius-small, 4px)",
     opacity: 0.6
   }
@@ -98,21 +109,25 @@ var showDiffDeletedNodeStyles = exports.showDiffDeletedNodeStyles = (0, _react.c
 }));
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var showDiffDeletedNodeStylesNew = exports.showDiffDeletedNodeStylesNew = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "&.show-diff-deleted-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
+var showDiffDeletedNodeStylesNew = exports.showDiffDeletedNodeStylesNew = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "&.show-diff-deleted-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
   borderColor: 'transparent'
 }), "&.show-diff-deleted-node-traditional .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
   boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
   borderColor: 'transparent'
+}), "&.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+  boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
+  borderColor: 'transparent'
 }), "&.show-diff-deleted-node-traditional.show-diff-deleted-active .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
-  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
   borderColor: 'transparent'
 }), "&.show-diff-deleted-node.show-diff-deleted-active .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
-  boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+  boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
   borderColor: 'transparent'
 }), "&.show-diff-deleted-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER), {
   opacity: 0.8
@@ -120,7 +135,7 @@ var showDiffDeletedNodeStylesNew = exports.showDiffDeletedNodeStylesNew = (0, _r
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '& > div': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
-    boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
     borderRadius: "var(--ds-radius-small, 4px)",
     opacity: 0.8
   }
@@ -128,21 +143,28 @@ var showDiffDeletedNodeStylesNew = exports.showDiffDeletedNodeStylesNew = (0, _r
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '& > div': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
-    boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
+    boxShadow: "0 0 0 var(--diff-decoration-marker-ring-width, 1px) ".concat("var(--ds-border-accent-red, #E2483D)"),
+    borderRadius: "var(--ds-radius-small, 4px)"
+  }
+}), '.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .media-card-wrapper', {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& > div': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
+    boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
     borderRadius: "var(--ds-radius-small, 4px)"
   }
 }), '.show-diff-deleted-node-traditional.show-diff-deleted-active .media-card-wrapper', {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '& > div': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
-    boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+    boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
     borderRadius: "var(--ds-radius-small, 4px)"
   }
 }), '.show-diff-deleted-node.show-diff-deleted-active .media-card-wrapper', {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '& > div': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
-    boxShadow: "0 0 0 2px ".concat("var(--ds-border-accent-red, #E2483D)"),
+    boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
     borderRadius: "var(--ds-radius-small, 4px)",
     opacity: 0.8
   }

package/dist/cjs/version-wrapper.js

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

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

@@ -42,7 +42,7 @@ import { gapCursorStyles, gapCursorStylesVisibilityFix } from './styles/gapCurso
 import { gridStyles } from './styles/gridStyles';
 import { indentationStyles } from './styles/indentationStyles';
 import { InlineNodeViewSharedStyles } from './styles/inlineNodeViewSharedStyles';
-import { layoutBaseStyles, layoutBaseStylesAdvanced, layoutBaseStylesWithTableExcerptsFix, layoutBaseStylesFixesUnderNestedDnDFG, layoutColumnMartinTopFixesNew, layoutColumnMartinTopFixesOld, layoutColumnResponsiveStyles, layoutColumnStylesAdvanced, layoutColumnStylesNotAdvanced, layoutResponsiveBaseStyles, layoutResponsiveStylesForView, layoutSectionStylesAdvanced, layoutSectionStylesNotAdvanced, layoutSelectedStylesAdvanced, layoutSelectedStylesForViewAdvanced, layoutSelectedStylesForViewNotAdvanced, layoutSelectedStylesNotAdvanced, layoutStylesForView, layoutSelectedStylesAdvancedFix, layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync } from './styles/layout';
+import { layoutBaseStyles, layoutBaseStylesAdvanced, layoutBaseStylesWithTableExcerptsFix, layoutBaseStylesFixesUnderNestedDnDFG, layoutColumnMartinTopFixesNew, layoutColumnMartinTopFixesOld, layoutColumnDividerStyles, layoutColumnDividerStylesNestedDnD, layoutColumnResizeStyles, layoutColumnResponsiveStyles, layoutColumnStylesAdvanced, layoutColumnStylesNotAdvanced, layoutResponsiveBaseStyles, layoutResponsiveStylesForView, layoutSectionStylesAdvanced, layoutSectionStylesNotAdvanced, layoutSelectedStylesAdvanced, layoutSelectedStylesForViewAdvanced, layoutSelectedStylesForViewNotAdvanced, layoutSelectedStylesNotAdvanced, layoutStylesForView, layoutSelectedStylesAdvancedFix, layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync } from './styles/layout';
 import { hyperLinkFloatingToolbarStyles, linkStyles } from './styles/link';
 import { diffListStyles, getDenseListStyles, listItemHiddenMarkerStyles, listsStyles, listsStylesMarginLayoutShiftFix, listsStylesSafariFix } from './styles/list';
 import { mediaAlignmentStyles, mediaCaptionStyles, mediaDangerStyles, mediaGroupStyles, mediaStyles } from './styles/mediaStyles';
@@ -389,11 +389,17 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     layoutSectionStylesAdvanced :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    layoutSectionStylesNotAdvanced, editorExperiment('advanced_layouts', true) ?
+    layoutSectionStylesNotAdvanced, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    layoutColumnDividerStyles, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && fg('platform_editor_nested_dnd_styles_changes') &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    layoutColumnDividerStylesNestedDnD, editorExperiment('advanced_layouts', true) ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     layoutColumnStylesAdvanced :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    layoutColumnStylesNotAdvanced,
+    layoutColumnStylesNotAdvanced, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    layoutColumnResizeStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     editorExperiment('advanced_layouts', true) ?
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

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

@@ -425,7 +425,7 @@ export const getExtensionStyles = contentMode => {
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export const extensionDiffStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
-  [`.show-diff-changed-decoration-node > span > .extension-container`]: {
-    boxShadow: `0 0 0 1px var(--diff-decoration-marker-color)`
+  [`.show-diff-changed-decoration-node > span .extension-container`]: {
+    boxShadow: `0 0 0 var(--diff-decoration-marker-ring-width, 1px) var(--diff-decoration-marker-color)`
   }
 });

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

@@ -3,6 +3,80 @@ import { css } from '@emotion/react';
 import { blanketSelectionStyles, borderSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
 const gridMediumMaxWidth = 1024;
 const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
+
+// Class names for the column resize divider widget — must stay in sync with main.ts in editor-plugin-layout
+const layoutColumnDividerClassName = 'layout-column-divider';
+const layoutColumnDividerRailClassName = 'layout-column-divider-rail';
+const layoutColumnDividerThumbClassName = 'layout-column-divider-thumb';
+
+/**
+ * Styles for the column resize divider widget DOM elements.
+ * Mirrors the pm-breakout-resize-handle-* pattern from resizerStyles.ts.
+ * Applied only when advanced_layouts experiment is on.
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const layoutColumnDividerStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+  [`.${layoutColumnDividerClassName}`]: {
+    // Negative margin removes the applied 'gap' from the parent's flex box
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginInline: '-15px 0px',
+    flexShrink: 0,
+    boxSizing: 'content-box',
+    cursor: 'col-resize',
+    position: 'relative',
+    zIndex: 2,
+    alignSelf: 'stretch',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+    [`&:hover .${layoutColumnDividerRailClassName}`]: {
+      background: "var(--ds-background-selected, #E9F2FE)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+    [`&:hover .${layoutColumnDividerThumbClassName}`]: {
+      background: "var(--ds-border-focused, #4688EC)"
+    }
+  },
+  // Rail and thumb styles intentionally mirror the breakout resize handle
+  // (see .pm-breakout-resize-handle-rail and .pm-breakout-resize-handle-thumb in resizerStyles.ts).
+  // If updating these styles, consider keeping both in sync.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+  [`.${layoutColumnDividerRailClassName}`]: {
+    width: 7,
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: "var(--ds-radius-small, 4px)",
+    transition: 'background-color 0.2s',
+    pointerEvents: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+  [`.${layoutColumnDividerThumbClassName}`]: {
+    minWidth: 3,
+    height: 'clamp(27px, calc(100% - 32px), 96px)',
+    background: "var(--ds-border, #0B120E24)",
+    borderRadius: "var(--ds-radius-medium, 6px)",
+    pointerEvents: 'none',
+    position: 'sticky',
+    top: "var(--ds-space-150, 12px)",
+    bottom: "var(--ds-space-150, 12px)"
+  }
+});
+/**
+ * Override divider marginInline when platform_editor_nested_dnd_styles_changes is on,
+ * since the layout section/column spacing changes.
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const layoutColumnDividerStylesNestedDnD = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+  [`.${layoutColumnDividerClassName}`]: {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    marginInline: '0 -7px'
+  }
+});
 const selectorForNotResizedLayoutInFulllWidthEditor = '.fabric-editor--full-width-mode .ProseMirror > .layoutSectionView-content-wrap';
 const selectorForNotResizedLayoutInFixedWidthEditor = '.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror > .layoutSectionView-content-wrap';
 const selectorForResizedLayoutInFullOrFixedWidthEditor = '.ProseMirror .fabric-editor-breakout-mark .layoutSectionView-content-wrap';
@@ -51,6 +125,25 @@ export const layoutColumnStylesAdvanced = css({
   }
 });
 
+/**
+ * Layout column resize styles for the platform_editor_layout_column_resize_handle experiment
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const layoutColumnResizeStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror [data-layout-section]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '> [data-layout-column][style*="--column-width"]': {
+      // Support CSS custom property for smooth resizing during drag
+      // When --column-resize-width is set, use it; otherwise fall back to the original flex-basis
+      // Using attribute selector for higher specificity than inline styles
+      flexBasis: 'var(--column-resize-width, var(--column-width))',
+      // Also ensure flex-grow and flex-shrink are reset when using custom width
+      flex: 'var(--column-resize-flex, 1)'
+    }
+  }
+});
+
 /**
  * Layout columns styles when advanced layouts experiment is off
  */
@@ -127,6 +220,15 @@ export const layoutSectionStylesAdvanced = css({
           position: 'absolute'
         }
       },
+      // Column resize divider: always in DOM, hidden via opacity by default
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+      [`&.${layoutColumnDividerClassName}`]: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+        display: 'block !important',
+        flex: 'none',
+        opacity: 0,
+        transition: 'opacity 0.2s'
+      },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
       '& + [data-layout-column]': {
         margin: 0
@@ -136,6 +238,19 @@ export const layoutSectionStylesAdvanced = css({
     '> [data-layout-column]': {
       margin: 0
     }
+  },
+  // On hover: fade in drag divider and hide the 1px separator
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+  [`.ProseMirror .layoutSectionView-content-wrap:hover .layout-section-container [data-layout-section]`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+    [`> .ProseMirror-widget.${layoutColumnDividerClassName}`]: {
+      opacity: 1
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+    [`> .ProseMirror-widget.${layoutColumnDividerClassName} ~ [data-layout-column] [data-layout-content]::before`]: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      display: 'none !important'
+    }
   }
 });
 
@@ -158,6 +273,10 @@ export const layoutSectionStylesNotAdvanced = css({
     '& > .unsupportedBlockView-content-wrap': {
       minWidth: 'initial'
     },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+    [`& > .${layoutColumnDividerClassName}`]: {
+      flex: 'none'
+    },
     // 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'

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

@@ -369,6 +369,9 @@ export const pragmaticResizerStyles = css({
   '.pm-breakout-resize-handle-container--right': {
     justifySelf: 'end'
   },
+  // Rail and thumb styles intentionally mirror the layout column divider
+  // (see layoutColumnDividerRailClassName and layoutColumnDividerThumbClassName in layout.ts).
+  // If updating these styles, consider keeping both in sync.
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.pm-breakout-resize-handle-rail': {
     position: 'relative',