@atlaskit/editor-core 215.20.1 → 215.21.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-core
 
+## 215.21.0
+
+### Minor Changes
+
+- [`8677e7b660127`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8677e7b660127) -
+  EDITOR-3792 Rollup max width changes previously gated with editor_tinymce_full_width_mode into
+  combined frontend/backend flag confluence_max_width_content_appearance
+
+### Patch Changes
+
+- Updated dependencies
+
+## 215.20.2
+
+### Patch Changes
+
+- [`dcc6a3e73f414`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dcc6a3e73f414) -
+  [ux] EDITOR-3304 add offline error state for sync blocks and update other error UI to match new
+  designs
+- [`0c0f8207e7294`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0c0f8207e7294) -
+  Added sync block resizing
+- Updated dependencies
+
 ## 215.20.1
 
 ### Patch Changes

package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js

@@ -262,7 +262,7 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
     (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlockNew : editorContentAreaContainerStyleNew, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && editorContentAreaContainerNestedDndStyle, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && contentAreaReducedHeaderSpace, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && contentAreaReservedPrimaryToolbarSpace],
     style: {
-      '--ak-editor-content-area-max-width': !fullWidthMode ? Boolean(maxWidthMode) && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? // @ts-ignore
+      '--ak-editor-content-area-max-width': !fullWidthMode ? Boolean(maxWidthMode) && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) ? // @ts-ignore
       "".concat(akEditorUltraWideLayoutWidth + getTotalPadding(), "px") : // @ts-ignore
       "".concat(theme.layoutMaxWidth + getTotalPadding(), "px") : "".concat(akEditorFullWidthLayoutWidth + getTotalPadding(), "px")
     }

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

@@ -121,7 +121,7 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
   var theme = (0, _react2.useTheme)();
   var _useThemeObserver = (0, _tokens.useThemeObserver)(),
     colorMode = _useThemeObserver.colorMode;
-  var isFullPage = appearance === 'full-page' || appearance === 'full-width' || (0, _expValEqualsNoExposure.expValEqualsNoExposure)('editor_tinymce_full_width_mode', 'isEnabled', true) && appearance === 'max';
+  var isFullPage = appearance === 'full-page' || appearance === 'full-width' || ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEqualsNoExposure.expValEqualsNoExposure)('confluence_max_width_content_appearance', 'isEnabled', true)) && appearance === 'max';
   var isComment = appearance === 'comment';
   var baseFontSize = (0, _getBaseFontSize.getBaseFontSize)(appearance, contentMode);
   var style = (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
@@ -388,7 +388,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _resizerStyles.pragmaticResizerStylesNew :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _resizerStyles.pragmaticResizerStyles : undefined, (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) &&
+    _resizerStyles.pragmaticResizerStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _resizerStyles.pragmaticResizerStylesSyncedBlock, (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _resizerStyles.pragmaticStylesLayoutFirstNodeResizeHandleFix, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resizerStyles = exports.resizerItemClassName = exports.resizerHoverZoneClassName = exports.resizerHandleTrackClassName = exports.resizerHandleThumbWidth = exports.resizerHandleThumbClassName = exports.resizerHandleClassName = exports.resizerExtendedZone = exports.resizerDangerClassName = exports.pragmaticStylesLayoutFirstNodeResizeHandleFix = exports.pragmaticResizerStylesWithReducedEditorGutter = exports.pragmaticResizerStylesNew = exports.pragmaticResizerStylesForTooltip = exports.pragmaticResizerStyles = exports.handleWrapperClass = void 0;
+exports.resizerStyles = exports.resizerItemClassName = exports.resizerHoverZoneClassName = exports.resizerHandleTrackClassName = exports.resizerHandleThumbWidth = exports.resizerHandleThumbClassName = exports.resizerHandleClassName = exports.resizerExtendedZone = exports.resizerDangerClassName = exports.pragmaticStylesLayoutFirstNodeResizeHandleFix = exports.pragmaticResizerStylesWithReducedEditorGutter = exports.pragmaticResizerStylesSyncedBlock = exports.pragmaticResizerStylesNew = exports.pragmaticResizerStylesForTooltip = exports.pragmaticResizerStyles = exports.handleWrapperClass = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -446,6 +446,38 @@ var pragmaticResizerStylesNew = exports.pragmaticResizerStylesNew = (0, _react.c
   }
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var pragmaticResizerStylesSyncedBlock = exports.pragmaticResizerStylesSyncedBlock = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.fabric-editor-breakout-mark': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="syncBlock"]), &:has([data-prosemirror-node-name="bodiedSyncBlock"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-container--left': {
+        left: '-20px'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-container--right': {
+        right: '-20px'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="syncBlock"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-container': {
+        height: 'calc(100% - 12px)'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="bodiedSyncBlock"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-container': {
+        height: 'calc(100% - 2px)'
+      }
+    }
+  }
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 var pragmaticResizerStylesWithReducedEditorGutter = exports.pragmaticResizerStylesWithReducedEditorGutter = (0, _react.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors

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

@@ -8,21 +8,20 @@ exports.syncBlockStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 var syncBlockStyles = exports.syncBlockStyles = (0, _react.css)((0, _defineProperty2.default)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': (0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockSharedCssClassName.prefix, ", .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+  '.ProseMirror': (0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockSharedCssClassName.prefix, ", .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix), (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)({
     position: 'relative',
     cursor: 'pointer',
     borderRadius: "var(--ds-radius-small, 3px)",
     marginTop: "var(--ds-space-150, 12px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    marginRight: "-".concat(_editorSharedStyles.akEditorGutterPadding, "px"),
+    marginRight: "-18px",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    marginLeft: "-".concat(_editorSharedStyles.akEditorGutterPadding, "px"),
+    marginLeft: "-18px",
     marginBottom: 0,
     paddingTop: "var(--ds-space-050, 4px)",
     paddingBottom: "var(--ds-space-050, 4px)",
@@ -95,11 +94,18 @@ var syncBlockStyles = exports.syncBlockStyles = (0, _react.css)((0, _definePrope
     '&::before': {
       border: 'none'
     }
-  })), "&has(.".concat(_syncBlock.SyncBlockSharedCssClassName.error, ")"), (0, _defineProperty2.default)({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '&:hover:not(.ak-editor-selected-node)': {
-      boxShadow: 'none'
+  })), ":has(.".concat(_syncBlock.SyncBlockSharedCssClassName.error, ")"), (0, _defineProperty2.default)({
+    backgroundColor: "var(--ds-background-disabled, #17171708)",
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
+  }, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
+    opacity: 1,
+    visibility: 'visible',
+    backgroundColor: "var(--ds-surface, #FFFFFF)",
+    '&::before': {
+      border: 'none'
     }
+  })), ":has(.".concat(_syncBlock.SyncBlockSharedCssClassName.loading, ")"), (0, _defineProperty2.default)({
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
   }, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
     opacity: 0,
     visibility: 'hidden'
@@ -110,10 +116,10 @@ var syncBlockStyles = exports.syncBlockStyles = (0, _react.css)((0, _definePrope
     opacity: 0,
     visibility: 'hidden'
   })), ".".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.content), {
-    padding: '0 32px',
+    padding: '0 18px',
     cursor: 'text'
   }), ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer), {
-    padding: '0 32px'
+    padding: '0 18px'
   }))
 }, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
   color: "var(--ds-text-subtle, #505258)",

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 = "215.20.0";
+var version = exports.version = "215.20.2";

package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js

@@ -254,7 +254,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
     expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlockNew : editorContentAreaContainerStyleNew, fg('platform_editor_nested_dnd_styles_changes') && editorContentAreaContainerNestedDndStyle, !fg('platform_editor_controls_no_toolbar_space') && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReducedHeaderSpace, !fg('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReservedPrimaryToolbarSpace],
     style: {
-      '--ak-editor-content-area-max-width': !fullWidthMode ? Boolean(maxWidthMode) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ?
+      '--ak-editor-content-area-max-width': !fullWidthMode ? Boolean(maxWidthMode) && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) ?
       // @ts-ignore
       `${akEditorUltraWideLayoutWidth + getTotalPadding()}px` :
       // @ts-ignore

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

@@ -50,7 +50,7 @@ import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles, mentionsSel
 import { panelStyles, panelStylesMixin, nestedPanelBorderStylesMixin, panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, panelViewStyles, nestedPanelDangerStyles } from './styles/panelStyles';
 import { paragraphStylesOld, paragraphStylesOldWithScaledMargin, paragraphStylesUGCRefreshed, paragraphStylesWithScaledMargin } from './styles/paragraphStyles';
 import { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderWrapStyles } from './styles/placeholderStyles';
-import { pragmaticResizerStyles, pragmaticResizerStylesNew, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, pragmaticResizerStylesWithReducedEditorGutter, resizerStyles } from './styles/resizerStyles';
+import { pragmaticResizerStyles, pragmaticResizerStylesNew, pragmaticResizerStylesSyncedBlock, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, pragmaticResizerStylesWithReducedEditorGutter, resizerStyles } from './styles/resizerStyles';
 import { dangerRuleStyles, ruleStyles } from './styles/rule';
 import { scrollbarStyles } from './styles/scrollbarStyles';
 import { hideCursorWhenHideSelectionStyles, hideSelectionStyles, selectedNodeStyles } from './styles/selectionStyles';
@@ -117,7 +117,7 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     colorMode
   } = useThemeObserver();
-  const isFullPage = appearance === 'full-page' || appearance === 'full-width' || expValEqualsNoExposure('editor_tinymce_full_width_mode', 'isEnabled', true) && appearance === 'max';
+  const isFullPage = appearance === 'full-page' || appearance === 'full-width' || (expValEqualsNoExposure('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEqualsNoExposure('confluence_max_width_content_appearance', 'isEnabled', true)) && appearance === 'max';
   const isComment = appearance === 'comment';
   const baseFontSize = getBaseFontSize(appearance, contentMode);
   const style = editorExperiment('platform_editor_preview_panel_responsiveness', true, {
@@ -384,7 +384,9 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     pragmaticResizerStylesNew :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    pragmaticResizerStyles : undefined, editorExperiment('advanced_layouts', true) && expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) &&
+    pragmaticResizerStyles : undefined, editorExperiment('platform_synced_block', true) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    pragmaticResizerStylesSyncedBlock, editorExperiment('advanced_layouts', true) && expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     pragmaticStylesLayoutFirstNodeResizeHandleFix, expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

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

@@ -493,6 +493,38 @@ export const pragmaticResizerStylesNew = css({
   }
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const pragmaticResizerStylesSyncedBlock = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.fabric-editor-breakout-mark': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="syncBlock"]), &:has([data-prosemirror-node-name="bodiedSyncBlock"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-container--left': {
+        left: '-20px'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-container--right': {
+        right: '-20px'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="syncBlock"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-container': {
+        height: 'calc(100% - 12px)'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="bodiedSyncBlock"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-container': {
+        height: 'calc(100% - 2px)'
+      }
+    }
+  }
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export const pragmaticResizerStylesWithReducedEditorGutter = css({
   /* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */

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

@@ -1,7 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { css } from '@emotion/react';
 import { BodiedSyncBlockSharedCssClassName, SyncBlockSharedCssClassName, SyncBlockLabelSharedCssClassName, SyncBlockStateCssClassName } from '@atlaskit/editor-common/sync-block';
-import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export const syncBlockStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
@@ -13,9 +12,9 @@ export const syncBlockStyles = css({
       borderRadius: "var(--ds-radius-small, 3px)",
       marginTop: "var(--ds-space-150, 12px)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-      marginRight: `-${akEditorGutterPadding}px`,
+      marginRight: `-18px`,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-      marginLeft: `-${akEditorGutterPadding}px`,
+      marginLeft: `-18px`,
       marginBottom: 0,
       paddingTop: "var(--ds-space-050, 4px)",
       paddingBottom: "var(--ds-space-050, 4px)",
@@ -113,11 +112,22 @@ export const syncBlockStyles = css({
       /* Error state */
       /* In error state sync block should not have hover styles or show the label */
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      [`&has(.${SyncBlockSharedCssClassName.error})`]: {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-        '&:hover:not(.ak-editor-selected-node)': {
-          boxShadow: 'none'
-        },
+      [`:has(.${SyncBlockSharedCssClassName.error})`]: {
+        backgroundColor: "var(--ds-background-disabled, #17171708)",
+        boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
+          opacity: 1,
+          visibility: 'visible',
+          backgroundColor: "var(--ds-surface, #FFFFFF)",
+          '&::before': {
+            border: 'none'
+          }
+        }
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      [`:has(.${SyncBlockSharedCssClassName.loading})`]: {
+        boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`,
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
         [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
           opacity: 0,
@@ -137,12 +147,12 @@ export const syncBlockStyles = css({
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
       [`.${BodiedSyncBlockSharedCssClassName.content}`]: {
-        padding: '0 32px',
+        padding: '0 18px',
         cursor: 'text'
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
       [`.${SyncBlockSharedCssClassName.renderer}`]: {
-        padding: '0 32px'
+        padding: '0 18px'
       }
     }
   },

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "215.20.0";
+export const version = "215.20.2";

package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js

@@ -252,7 +252,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
     // for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
     expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlockNew : editorContentAreaContainerStyleNew, fg('platform_editor_nested_dnd_styles_changes') && editorContentAreaContainerNestedDndStyle, !fg('platform_editor_controls_no_toolbar_space') && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReducedHeaderSpace, !fg('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && editorExperiment('platform_editor_controls', 'variant1') && contentAreaReservedPrimaryToolbarSpace],
     style: {
-      '--ak-editor-content-area-max-width': !fullWidthMode ? Boolean(maxWidthMode) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? // @ts-ignore
+      '--ak-editor-content-area-max-width': !fullWidthMode ? Boolean(maxWidthMode) && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) ? // @ts-ignore
       "".concat(akEditorUltraWideLayoutWidth + getTotalPadding(), "px") : // @ts-ignore
       "".concat(theme.layoutMaxWidth + getTotalPadding(), "px") : "".concat(akEditorFullWidthLayoutWidth + getTotalPadding(), "px")
     }

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

@@ -51,7 +51,7 @@ import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles, mentionsSel
 import { panelStyles, panelStylesMixin, nestedPanelBorderStylesMixin, panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, panelViewStyles, nestedPanelDangerStyles } from './styles/panelStyles';
 import { paragraphStylesOld, paragraphStylesOldWithScaledMargin, paragraphStylesUGCRefreshed, paragraphStylesWithScaledMargin } from './styles/paragraphStyles';
 import { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderWrapStyles } from './styles/placeholderStyles';
-import { pragmaticResizerStyles, pragmaticResizerStylesNew, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, pragmaticResizerStylesWithReducedEditorGutter, resizerStyles } from './styles/resizerStyles';
+import { pragmaticResizerStyles, pragmaticResizerStylesNew, pragmaticResizerStylesSyncedBlock, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, pragmaticResizerStylesWithReducedEditorGutter, resizerStyles } from './styles/resizerStyles';
 import { dangerRuleStyles, ruleStyles } from './styles/rule';
 import { scrollbarStyles } from './styles/scrollbarStyles';
 import { hideCursorWhenHideSelectionStyles, hideSelectionStyles, selectedNodeStyles } from './styles/selectionStyles';
@@ -113,7 +113,7 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
   var theme = useTheme();
   var _useThemeObserver = useThemeObserver(),
     colorMode = _useThemeObserver.colorMode;
-  var isFullPage = appearance === 'full-page' || appearance === 'full-width' || expValEqualsNoExposure('editor_tinymce_full_width_mode', 'isEnabled', true) && appearance === 'max';
+  var isFullPage = appearance === 'full-page' || appearance === 'full-width' || (expValEqualsNoExposure('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEqualsNoExposure('confluence_max_width_content_appearance', 'isEnabled', true)) && appearance === 'max';
   var isComment = appearance === 'comment';
   var baseFontSize = getBaseFontSize(appearance, contentMode);
   var style = editorExperiment('platform_editor_preview_panel_responsiveness', true, {
@@ -380,7 +380,9 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     pragmaticResizerStylesNew :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    pragmaticResizerStyles : undefined, editorExperiment('advanced_layouts', true) && expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) &&
+    pragmaticResizerStyles : undefined, editorExperiment('platform_synced_block', true) &&
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    pragmaticResizerStylesSyncedBlock, editorExperiment('advanced_layouts', true) && expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     pragmaticStylesLayoutFirstNodeResizeHandleFix, expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

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

@@ -438,6 +438,38 @@ export var pragmaticResizerStylesNew = css({
   }
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var pragmaticResizerStylesSyncedBlock = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.fabric-editor-breakout-mark': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="syncBlock"]), &:has([data-prosemirror-node-name="bodiedSyncBlock"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-container--left': {
+        left: '-20px'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-container--right': {
+        right: '-20px'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="syncBlock"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-container': {
+        height: 'calc(100% - 12px)'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="bodiedSyncBlock"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-container': {
+        height: 'calc(100% - 2px)'
+      }
+    }
+  }
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export var pragmaticResizerStylesWithReducedEditorGutter = css(_defineProperty({}, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors

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

@@ -2,19 +2,18 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { css } from '@emotion/react';
 import { BodiedSyncBlockSharedCssClassName, SyncBlockSharedCssClassName, SyncBlockLabelSharedCssClassName, SyncBlockStateCssClassName } from '@atlaskit/editor-common/sync-block';
-import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export var syncBlockStyles = css(_defineProperty({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror': _defineProperty({}, ".".concat(SyncBlockSharedCssClassName.prefix, ", .").concat(BodiedSyncBlockSharedCssClassName.prefix), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  '.ProseMirror': _defineProperty({}, ".".concat(SyncBlockSharedCssClassName.prefix, ", .").concat(BodiedSyncBlockSharedCssClassName.prefix), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     position: 'relative',
     cursor: 'pointer',
     borderRadius: "var(--ds-radius-small, 3px)",
     marginTop: "var(--ds-space-150, 12px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    marginRight: "-".concat(akEditorGutterPadding, "px"),
+    marginRight: "-18px",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-    marginLeft: "-".concat(akEditorGutterPadding, "px"),
+    marginLeft: "-18px",
     marginBottom: 0,
     paddingTop: "var(--ds-space-050, 4px)",
     paddingBottom: "var(--ds-space-050, 4px)",
@@ -87,11 +86,18 @@ export var syncBlockStyles = css(_defineProperty({
     '&::before': {
       border: 'none'
     }
-  })), "&has(.".concat(SyncBlockSharedCssClassName.error, ")"), _defineProperty({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '&:hover:not(.ak-editor-selected-node)': {
-      boxShadow: 'none'
+  })), ":has(.".concat(SyncBlockSharedCssClassName.error, ")"), _defineProperty({
+    backgroundColor: "var(--ds-background-disabled, #17171708)",
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
+  }, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
+    opacity: 1,
+    visibility: 'visible',
+    backgroundColor: "var(--ds-surface, #FFFFFF)",
+    '&::before': {
+      border: 'none'
     }
+  })), ":has(.".concat(SyncBlockSharedCssClassName.loading, ")"), _defineProperty({
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
   }, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
     opacity: 0,
     visibility: 'hidden'
@@ -102,10 +108,10 @@ export var syncBlockStyles = css(_defineProperty({
     opacity: 0,
     visibility: 'hidden'
   })), ".".concat(BodiedSyncBlockSharedCssClassName.content), {
-    padding: '0 32px',
+    padding: '0 18px',
     cursor: 'text'
   }), ".".concat(SyncBlockSharedCssClassName.renderer), {
-    padding: '0 32px'
+    padding: '0 18px'
   }))
 }, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
   color: "var(--ds-text-subtle, #505258)",

package/dist/esm/version-wrapper.js

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

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

@@ -13,4 +13,5 @@ export declare const pragmaticResizerStylesForTooltip: SerializedStyles;
 export declare const pragmaticStylesLayoutFirstNodeResizeHandleFix: SerializedStyles;
 export declare const pragmaticResizerStyles: SerializedStyles;
 export declare const pragmaticResizerStylesNew: SerializedStyles;
+export declare const pragmaticResizerStylesSyncedBlock: SerializedStyles;
 export declare const pragmaticResizerStylesWithReducedEditorGutter: SerializedStyles;

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

@@ -13,4 +13,5 @@ export declare const pragmaticResizerStylesForTooltip: SerializedStyles;
 export declare const pragmaticStylesLayoutFirstNodeResizeHandleFix: SerializedStyles;
 export declare const pragmaticResizerStyles: SerializedStyles;
 export declare const pragmaticResizerStylesNew: SerializedStyles;
+export declare const pragmaticResizerStylesSyncedBlock: SerializedStyles;
 export declare const pragmaticResizerStylesWithReducedEditorGutter: SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "215.20.1",
+	"version": "215.21.0",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,7 +44,7 @@
 		"@atlaskit/analytics-namespaced-context": "^7.2.0",
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/analytics-next-stable-react-context": "1.0.1",
-		"@atlaskit/button": "^23.6.0",
+		"@atlaskit/button": "^23.7.0",
 		"@atlaskit/css": "^0.17.0",
 		"@atlaskit/editor-json-transformer": "^8.31.0",
 		"@atlaskit/editor-performance-metrics": "^2.1.0",
@@ -59,13 +59,13 @@
 		"@atlaskit/emoji": "^69.9.0",
 		"@atlaskit/icon": "^29.0.0",
 		"@atlaskit/link": "^3.2.0",
-		"@atlaskit/media-card": "^79.9.0",
+		"@atlaskit/media-card": "^79.10.0",
 		"@atlaskit/mention": "^24.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/react-ufo": "^4.15.0",
 		"@atlaskit/task-decision": "^19.2.0",
-		"@atlaskit/tmp-editor-statsig": "^15.6.0",
+		"@atlaskit/tmp-editor-statsig": "^15.8.0",
 		"@atlaskit/tokens": "^8.4.0",
 		"@atlaskit/tooltip": "^20.11.0",
 		"@atlaskit/width-detector": "^5.0.0",
@@ -104,19 +104,18 @@
 		"@atlaskit/media-core": "^37.0.0",
 		"@atlaskit/media-integration-test-helpers": "workspace:^",
 		"@atlaskit/media-test-helpers": "^39.0.0",
-		"@atlaskit/modal-dialog": "^14.7.0",
-		"@atlaskit/renderer": "^124.17.0",
-		"@atlaskit/section-message": "^8.9.0",
+		"@atlaskit/modal-dialog": "^14.8.0",
+		"@atlaskit/renderer": "^124.18.0",
+		"@atlaskit/section-message": "^8.10.0",
 		"@atlaskit/synchrony-test-helpers": "workspace:^",
-		"@atlaskit/toggle": "^15.1.0",
+		"@atlaskit/toggle": "^15.2.0",
 		"@atlaskit/util-data-test": "^18.3.0",
 		"@atlassian/adf-schema-json": "^1.31.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/search-provider": "^7.0.0",
 		"@emotion/jest": "^11.8.0",
 		"@storybook/addon-knobs": "^6.4.0",
-		"@testing-library/react": "^13.4.0",
-		"@testing-library/react-hooks": "^8.0.1",
+		"@testing-library/react": "^16.3.0",
 		"@types/diff": "^5.0.2",
 		"@types/is-number": "^7.0.0",
 		"@types/react-transition-group": "^2.0.6",
@@ -389,10 +388,6 @@
 		"platform_editor_nov_a11y_fixes": {
 			"type": "boolean"
 		},
-		"platform_editor_table_width_refactor": {
-			"type": "boolean",
-			"referenceOnly": true
-		},
 		"platform_editor_toolbar_aifc_responsive_improve": {
 			"type": "boolean"
 		},