@atlaskit/editor-core 215.20.0 → 215.20.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/afm-cc/tsconfig.json +2 -1
  3. package/afm-jira/tsconfig.json +2 -1
  4. package/afm-products/tsconfig.json +2 -1
  5. package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js +6 -7
  6. package/dist/cjs/ui/Appearance/FullPage/FullPageToolbarNext.compiled.css +2 -0
  7. package/dist/cjs/ui/Appearance/FullPage/FullPageToolbarNext.js +2 -1
  8. package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +3 -1
  9. package/dist/cjs/ui/EditorContentContainer/styles/resizerStyles.js +33 -1
  10. package/dist/cjs/ui/EditorContentContainer/styles/syncBlockStyles.js +16 -10
  11. package/dist/cjs/version-wrapper.js +1 -1
  12. package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js +6 -7
  13. package/dist/es2019/ui/Appearance/FullPage/FullPageToolbarNext.compiled.css +2 -0
  14. package/dist/es2019/ui/Appearance/FullPage/FullPageToolbarNext.js +2 -1
  15. package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +4 -2
  16. package/dist/es2019/ui/EditorContentContainer/styles/resizerStyles.js +32 -0
  17. package/dist/es2019/ui/EditorContentContainer/styles/syncBlockStyles.js +20 -10
  18. package/dist/es2019/version-wrapper.js +1 -1
  19. package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js +6 -7
  20. package/dist/esm/ui/Appearance/FullPage/FullPageToolbarNext.compiled.css +2 -0
  21. package/dist/esm/ui/Appearance/FullPage/FullPageToolbarNext.js +2 -1
  22. package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +4 -2
  23. package/dist/esm/ui/EditorContentContainer/styles/resizerStyles.js +32 -0
  24. package/dist/esm/ui/EditorContentContainer/styles/syncBlockStyles.js +16 -10
  25. package/dist/esm/version-wrapper.js +1 -1
  26. package/dist/types/ui/Appearance/FullPage/FullPageContentArea.d.ts +2 -1
  27. package/dist/types/ui/EditorContentContainer/styles/resizerStyles.d.ts +1 -0
  28. package/dist/types-ts4.5/ui/Appearance/FullPage/FullPageContentArea.d.ts +3 -1
  29. package/dist/types-ts4.5/ui/EditorContentContainer/styles/resizerStyles.d.ts +1 -0
  30. package/package.json +8 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 215.20.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`dcc6a3e73f414`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dcc6a3e73f414) -
8
+ [ux] EDITOR-3304 add offline error state for sync blocks and update other error UI to match new
9
+ designs
10
+ - [`0c0f8207e7294`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0c0f8207e7294) -
11
+ Added sync block resizing
12
+ - Updated dependencies
13
+
14
+ ## 215.20.1
15
+
16
+ ### Patch Changes
17
+
18
+ - [`63c5e344d169c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/63c5e344d169c) -
19
+ Reduce the VC impact of the editor toolbar
20
+ - Updated dependencies
21
+
3
22
  ## 215.20.0
4
23
 
5
24
  ### Minor Changes
@@ -5,7 +5,8 @@
5
5
  "target": "es5",
6
6
  "outDir": "../../../../../confluence/tsDist/@atlaskit__editor-core",
7
7
  "rootDir": "../",
8
- "composite": true
8
+ "composite": true,
9
+ "noCheck": true
9
10
  },
10
11
  "include": [
11
12
  "../src/**/*.ts",
@@ -5,7 +5,8 @@
5
5
  "target": "es5",
6
6
  "outDir": "../../../../../jira/tsDist/@atlaskit__editor-core/app",
7
7
  "rootDir": "../",
8
- "composite": true
8
+ "composite": true,
9
+ "noCheck": true
9
10
  },
10
11
  "include": [
11
12
  "../src/**/*.ts",
@@ -5,7 +5,8 @@
5
5
  "target": "es5",
6
6
  "outDir": "../../../../../tsDist/@atlaskit__editor-core/app",
7
7
  "rootDir": "../",
8
- "composite": true
8
+ "composite": true,
9
+ "noCheck": true
9
10
  },
10
11
  "include": [
11
12
  "../src/**/*.ts",
@@ -122,10 +122,6 @@ var tableFullPageEditorStylesNew = (0, _react2.css)({
122
122
  width: '100%'
123
123
  }
124
124
  });
125
- var scrollGutter = (0, _react2.css)({
126
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
127
- display: 'none'
128
- });
129
125
  var editorContentAreaContainerNestedDndStyle = (0, _react2.css)({
130
126
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
131
127
  '.fabric-editor--full-width-mode': {
@@ -217,13 +213,14 @@ var contentAreaHeightNoToolbar = (0, _react2.css)({
217
213
  var CONTENT_AREA_TEST_ID = exports.CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
218
214
  var EDITOR_CONTAINER = exports.EDITOR_CONTAINER = 'ak-editor-container';
219
215
  var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
220
- var _contentAreaRef$curre;
216
+ var _props$editorAPI, _contentAreaRef$curre, _allowScrollGutter$gu;
221
217
  var theme = (0, _react2.useTheme)();
222
218
  var fullWidthMode = props.appearance === 'full-width';
223
219
  var maxWidthMode = props.appearance === 'max';
224
220
  var scrollContainerRef = (0, _react.useRef)(null);
225
221
  var contentAreaRef = (0, _react.useRef)(null);
226
222
  var containerRef = (0, _react.useRef)(null);
223
+ var allowScrollGutter = (_props$editorAPI = props.editorAPI) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.base) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.sharedState.currentState()) === null || _props$editorAPI === void 0 ? void 0 : _props$editorAPI.allowScrollGutter;
227
224
  (0, _react.useImperativeHandle)(ref, function () {
228
225
  return {
229
226
  get scrollContainer() {
@@ -304,9 +301,11 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
304
301
  containerElement: scrollContainerRef.current,
305
302
  dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
306
303
  wrapperElement: props.wrapperElement
307
- }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents.after) : null, (0, _expVal.expVal)('platform_editor_hydratable_ui', 'isEnabled', false) && (0, _react2.jsx)("div", {
304
+ }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents.after) : null, (0, _expVal.expVal)('platform_editor_scroll_gutter_fix', 'isEnabled', false) && allowScrollGutter && (0, _react2.jsx)("div", {
308
305
  id: "editor-scroll-gutter",
309
- css: scrollGutter,
306
+ style: {
307
+ paddingBottom: "".concat((_allowScrollGutter$gu = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu !== void 0 ? _allowScrollGutter$gu : '120', "px")
308
+ },
310
309
  "data-vc": "scroll-gutter"
311
310
  })))))), (0, _react2.jsx)("div", {
312
311
  css: _StyledComponents.sidebarArea
@@ -6,10 +6,12 @@
6
6
  ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
7
7
  ._1bahesu3{justify-content:flex-end}
8
8
  ._1e0c1txw{display:flex}
9
+ ._1f38ptqj{container-name:toolbar-container}
9
10
  ._1pby16oo{z-index:510}
10
11
  ._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
11
12
  ._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
12
13
  ._4cvr1h6o{align-items:center}
13
14
  ._4t3izwfg{height:2pc}
15
+ ._7cca15wb{container-type:inline-size}
14
16
  ._kqswh2mm{position:relative}
15
17
  ._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
@@ -29,6 +29,7 @@ var styles = {
29
29
  mainToolbarWithKeyline: "_16qs1nax",
30
30
  customToolbarWrapperStyle: "_4cvr1h6o _1e0c1txw",
31
31
  firstChildWrapperOneLine: "_1e0c1txw _16jlkb7n",
32
+ firstChildWrapperContainerContext: "_7cca15wb _1f38ptqj",
32
33
  secondChildWrapperOneLine: "_1e0c1txw _1ul91ns9 _4cvr1h6o",
33
34
  beforePrimaryToolbarComponents: "_1e0c1txw _16jlkb7n _1bahesu3 _4cvr1h6o"
34
35
  };
@@ -45,7 +46,7 @@ var FirstChildWrapper = function FirstChildWrapper(_ref2) {
45
46
  var children = _ref2.children;
46
47
  return /*#__PURE__*/_react.default.createElement("div", {
47
48
  "data-testid": "main-toolbar-first-child-wrapper",
48
- className: (0, _runtime.ax)([styles.firstChildWrapperOneLine])
49
+ className: (0, _runtime.ax)([styles.firstChildWrapperOneLine, (0, _expValEquals.expValEquals)('platform_editor_reduce_toolbar_vc_impact', 'isEnabled', true) && styles.firstChildWrapperContainerContext])
49
50
  }, children);
50
51
  };
51
52
  var SecondChildWrapper = function SecondChildWrapper(_ref3) {
@@ -388,7 +388,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
388
388
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
389
389
  _resizerStyles.pragmaticResizerStylesNew :
390
390
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
391
- _resizerStyles.pragmaticResizerStyles : undefined, (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) &&
391
+ _resizerStyles.pragmaticResizerStyles : undefined, (0, _experiments.editorExperiment)('platform_synced_block', true) &&
392
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
393
+ _resizerStyles.pragmaticResizerStylesSyncedBlock, (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) &&
392
394
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
393
395
  _resizerStyles.pragmaticStylesLayoutFirstNodeResizeHandleFix, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) &&
394
396
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- 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;
7
+ 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;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = require("@emotion/react");
10
10
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -446,6 +446,38 @@ var pragmaticResizerStylesNew = exports.pragmaticResizerStylesNew = (0, _react.c
446
446
  }
447
447
  });
448
448
 
449
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
450
+ var pragmaticResizerStylesSyncedBlock = exports.pragmaticResizerStylesSyncedBlock = (0, _react.css)({
451
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
452
+ '.fabric-editor-breakout-mark': {
453
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
454
+ '&:has([data-prosemirror-node-name="syncBlock"]), &:has([data-prosemirror-node-name="bodiedSyncBlock"])': {
455
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
456
+ '> .pm-breakout-resize-handle-container--left': {
457
+ left: '-20px'
458
+ },
459
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
460
+ '> .pm-breakout-resize-handle-container--right': {
461
+ right: '-20px'
462
+ }
463
+ },
464
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
465
+ '&:has([data-prosemirror-node-name="syncBlock"])': {
466
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
467
+ '> .pm-breakout-resize-handle-container': {
468
+ height: 'calc(100% - 12px)'
469
+ }
470
+ },
471
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
472
+ '&:has([data-prosemirror-node-name="bodiedSyncBlock"])': {
473
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
474
+ '> .pm-breakout-resize-handle-container': {
475
+ height: 'calc(100% - 2px)'
476
+ }
477
+ }
478
+ }
479
+ });
480
+
449
481
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
450
482
  var pragmaticResizerStylesWithReducedEditorGutter = exports.pragmaticResizerStylesWithReducedEditorGutter = (0, _react.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
451
483
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
@@ -8,21 +8,20 @@ exports.syncBlockStyles = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = require("@emotion/react");
10
10
  var _syncBlock = require("@atlaskit/editor-common/sync-block");
11
- var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
12
11
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
13
12
 
14
13
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
15
14
  var syncBlockStyles = exports.syncBlockStyles = (0, _react.css)((0, _defineProperty2.default)({
16
15
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
17
- '.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)({
16
+ '.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)({
18
17
  position: 'relative',
19
18
  cursor: 'pointer',
20
19
  borderRadius: "var(--ds-radius-small, 3px)",
21
20
  marginTop: "var(--ds-space-150, 12px)",
22
21
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
23
- marginRight: "-".concat(_editorSharedStyles.akEditorGutterPadding, "px"),
22
+ marginRight: "-18px",
24
23
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
25
- marginLeft: "-".concat(_editorSharedStyles.akEditorGutterPadding, "px"),
24
+ marginLeft: "-18px",
26
25
  marginBottom: 0,
27
26
  paddingTop: "var(--ds-space-050, 4px)",
28
27
  paddingBottom: "var(--ds-space-050, 4px)",
@@ -95,11 +94,18 @@ var syncBlockStyles = exports.syncBlockStyles = (0, _react.css)((0, _definePrope
95
94
  '&::before': {
96
95
  border: 'none'
97
96
  }
98
- })), "&has(.".concat(_syncBlock.SyncBlockSharedCssClassName.error, ")"), (0, _defineProperty2.default)({
99
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
100
- '&:hover:not(.ak-editor-selected-node)': {
101
- boxShadow: 'none'
97
+ })), ":has(.".concat(_syncBlock.SyncBlockSharedCssClassName.error, ")"), (0, _defineProperty2.default)({
98
+ backgroundColor: "var(--ds-background-disabled, #17171708)",
99
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
100
+ }, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
101
+ opacity: 1,
102
+ visibility: 'visible',
103
+ backgroundColor: "var(--ds-surface, #FFFFFF)",
104
+ '&::before': {
105
+ border: 'none'
102
106
  }
107
+ })), ":has(.".concat(_syncBlock.SyncBlockSharedCssClassName.loading, ")"), (0, _defineProperty2.default)({
108
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
103
109
  }, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
104
110
  opacity: 0,
105
111
  visibility: 'hidden'
@@ -110,10 +116,10 @@ var syncBlockStyles = exports.syncBlockStyles = (0, _react.css)((0, _definePrope
110
116
  opacity: 0,
111
117
  visibility: 'hidden'
112
118
  })), ".".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.content), {
113
- padding: '0 32px',
119
+ padding: '0 18px',
114
120
  cursor: 'text'
115
121
  }), ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer), {
116
- padding: '0 32px'
122
+ padding: '0 18px'
117
123
  }))
118
124
  }, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
119
125
  color: "var(--ds-text-subtle, #505258)",
@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.version = exports.name = void 0;
7
7
  var name = exports.name = "@atlaskit/editor-core";
8
- var version = exports.version = "215.19.1";
8
+ var version = exports.version = "215.20.1";
@@ -113,10 +113,6 @@ const tableFullPageEditorStylesNew = css({
113
113
  width: '100%'
114
114
  }
115
115
  });
116
- const scrollGutter = css({
117
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
118
- display: 'none'
119
- });
120
116
  const editorContentAreaContainerNestedDndStyle = css({
121
117
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
122
118
  '.fabric-editor--full-width-mode': {
@@ -211,13 +207,14 @@ const contentAreaHeightNoToolbar = css({
211
207
  export const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
212
208
  export const EDITOR_CONTAINER = 'ak-editor-container';
213
209
  const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
214
- var _contentAreaRef$curre;
210
+ var _props$editorAPI, _props$editorAPI$base, _props$editorAPI$base2, _contentAreaRef$curre, _allowScrollGutter$gu;
215
211
  const theme = useTheme();
216
212
  const fullWidthMode = props.appearance === 'full-width';
217
213
  const maxWidthMode = props.appearance === 'max';
218
214
  const scrollContainerRef = useRef(null);
219
215
  const contentAreaRef = useRef(null);
220
216
  const containerRef = useRef(null);
217
+ const allowScrollGutter = (_props$editorAPI = props.editorAPI) === null || _props$editorAPI === void 0 ? void 0 : (_props$editorAPI$base = _props$editorAPI.base) === null || _props$editorAPI$base === void 0 ? void 0 : (_props$editorAPI$base2 = _props$editorAPI$base.sharedState.currentState()) === null || _props$editorAPI$base2 === void 0 ? void 0 : _props$editorAPI$base2.allowScrollGutter;
221
218
  useImperativeHandle(ref, () => ({
222
219
  get scrollContainer() {
223
220
  return scrollContainerRef.current;
@@ -298,9 +295,11 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
298
295
  containerElement: scrollContainerRef.current,
299
296
  dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
300
297
  wrapperElement: props.wrapperElement
301
- }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.after) : null, expVal('platform_editor_hydratable_ui', 'isEnabled', false) && jsx("div", {
298
+ }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.after) : null, expVal('platform_editor_scroll_gutter_fix', 'isEnabled', false) && allowScrollGutter && jsx("div", {
302
299
  id: "editor-scroll-gutter",
303
- css: scrollGutter,
300
+ style: {
301
+ paddingBottom: `${(_allowScrollGutter$gu = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu !== void 0 ? _allowScrollGutter$gu : '120'}px`
302
+ },
304
303
  "data-vc": "scroll-gutter"
305
304
  })))))), jsx("div", {
306
305
  css: sidebarArea
@@ -6,10 +6,12 @@
6
6
  ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
7
7
  ._1bahesu3{justify-content:flex-end}
8
8
  ._1e0c1txw{display:flex}
9
+ ._1f38ptqj{container-name:toolbar-container}
9
10
  ._1pby16oo{z-index:510}
10
11
  ._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
11
12
  ._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
12
13
  ._4cvr1h6o{align-items:center}
13
14
  ._4t3izwfg{height:2pc}
15
+ ._7cca15wb{container-type:inline-size}
14
16
  ._kqswh2mm{position:relative}
15
17
  ._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
@@ -21,6 +21,7 @@ const styles = {
21
21
  mainToolbarWithKeyline: "_16qs1nax",
22
22
  customToolbarWrapperStyle: "_4cvr1h6o _1e0c1txw",
23
23
  firstChildWrapperOneLine: "_1e0c1txw _16jlkb7n",
24
+ firstChildWrapperContainerContext: "_7cca15wb _1f38ptqj",
24
25
  secondChildWrapperOneLine: "_1e0c1txw _1ul91ns9 _4cvr1h6o",
25
26
  beforePrimaryToolbarComponents: "_1e0c1txw _16jlkb7n _1bahesu3 _4cvr1h6o"
26
27
  };
@@ -39,7 +40,7 @@ const FirstChildWrapper = ({
39
40
  }) => {
40
41
  return /*#__PURE__*/React.createElement("div", {
41
42
  "data-testid": "main-toolbar-first-child-wrapper",
42
- className: ax([styles.firstChildWrapperOneLine])
43
+ className: ax([styles.firstChildWrapperOneLine, expValEquals('platform_editor_reduce_toolbar_vc_impact', 'isEnabled', true) && styles.firstChildWrapperContainerContext])
43
44
  }, children);
44
45
  };
45
46
  const SecondChildWrapper = ({
@@ -50,7 +50,7 @@ import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles, mentionsSel
50
50
  import { panelStyles, panelStylesMixin, nestedPanelBorderStylesMixin, panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, panelViewStyles, nestedPanelDangerStyles } from './styles/panelStyles';
51
51
  import { paragraphStylesOld, paragraphStylesOldWithScaledMargin, paragraphStylesUGCRefreshed, paragraphStylesWithScaledMargin } from './styles/paragraphStyles';
52
52
  import { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderWrapStyles } from './styles/placeholderStyles';
53
- import { pragmaticResizerStyles, pragmaticResizerStylesNew, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, pragmaticResizerStylesWithReducedEditorGutter, resizerStyles } from './styles/resizerStyles';
53
+ import { pragmaticResizerStyles, pragmaticResizerStylesNew, pragmaticResizerStylesSyncedBlock, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, pragmaticResizerStylesWithReducedEditorGutter, resizerStyles } from './styles/resizerStyles';
54
54
  import { dangerRuleStyles, ruleStyles } from './styles/rule';
55
55
  import { scrollbarStyles } from './styles/scrollbarStyles';
56
56
  import { hideCursorWhenHideSelectionStyles, hideSelectionStyles, selectedNodeStyles } from './styles/selectionStyles';
@@ -384,7 +384,9 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
384
384
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
385
385
  pragmaticResizerStylesNew :
386
386
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
387
- pragmaticResizerStyles : undefined, editorExperiment('advanced_layouts', true) && expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) &&
387
+ pragmaticResizerStyles : undefined, editorExperiment('platform_synced_block', true) &&
388
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
389
+ pragmaticResizerStylesSyncedBlock, editorExperiment('advanced_layouts', true) && expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) &&
388
390
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
389
391
  pragmaticStylesLayoutFirstNodeResizeHandleFix, expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) &&
390
392
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -493,6 +493,38 @@ export const pragmaticResizerStylesNew = css({
493
493
  }
494
494
  });
495
495
 
496
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
497
+ export const pragmaticResizerStylesSyncedBlock = css({
498
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
499
+ '.fabric-editor-breakout-mark': {
500
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
501
+ '&:has([data-prosemirror-node-name="syncBlock"]), &:has([data-prosemirror-node-name="bodiedSyncBlock"])': {
502
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
503
+ '> .pm-breakout-resize-handle-container--left': {
504
+ left: '-20px'
505
+ },
506
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
507
+ '> .pm-breakout-resize-handle-container--right': {
508
+ right: '-20px'
509
+ }
510
+ },
511
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
512
+ '&:has([data-prosemirror-node-name="syncBlock"])': {
513
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
514
+ '> .pm-breakout-resize-handle-container': {
515
+ height: 'calc(100% - 12px)'
516
+ }
517
+ },
518
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
519
+ '&:has([data-prosemirror-node-name="bodiedSyncBlock"])': {
520
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
521
+ '> .pm-breakout-resize-handle-container': {
522
+ height: 'calc(100% - 2px)'
523
+ }
524
+ }
525
+ }
526
+ });
527
+
496
528
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
497
529
  export const pragmaticResizerStylesWithReducedEditorGutter = css({
498
530
  /* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */
@@ -1,7 +1,6 @@
1
1
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
2
2
  import { css } from '@emotion/react';
3
3
  import { BodiedSyncBlockSharedCssClassName, SyncBlockSharedCssClassName, SyncBlockLabelSharedCssClassName, SyncBlockStateCssClassName } from '@atlaskit/editor-common/sync-block';
4
- import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
5
4
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
6
5
  export const syncBlockStyles = css({
7
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
@@ -13,9 +12,9 @@ export const syncBlockStyles = css({
13
12
  borderRadius: "var(--ds-radius-small, 3px)",
14
13
  marginTop: "var(--ds-space-150, 12px)",
15
14
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
16
- marginRight: `-${akEditorGutterPadding}px`,
15
+ marginRight: `-18px`,
17
16
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
18
- marginLeft: `-${akEditorGutterPadding}px`,
17
+ marginLeft: `-18px`,
19
18
  marginBottom: 0,
20
19
  paddingTop: "var(--ds-space-050, 4px)",
21
20
  paddingBottom: "var(--ds-space-050, 4px)",
@@ -113,11 +112,22 @@ export const syncBlockStyles = css({
113
112
  /* Error state */
114
113
  /* In error state sync block should not have hover styles or show the label */
115
114
  // 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
116
- [`&has(.${SyncBlockSharedCssClassName.error})`]: {
117
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
118
- '&:hover:not(.ak-editor-selected-node)': {
119
- boxShadow: 'none'
120
- },
115
+ [`:has(.${SyncBlockSharedCssClassName.error})`]: {
116
+ backgroundColor: "var(--ds-background-disabled, #17171708)",
117
+ boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`,
118
+ // 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
119
+ [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
120
+ opacity: 1,
121
+ visibility: 'visible',
122
+ backgroundColor: "var(--ds-surface, #FFFFFF)",
123
+ '&::before': {
124
+ border: 'none'
125
+ }
126
+ }
127
+ },
128
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
129
+ [`:has(.${SyncBlockSharedCssClassName.loading})`]: {
130
+ boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`,
121
131
  // 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
122
132
  [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
123
133
  opacity: 0,
@@ -137,12 +147,12 @@ export const syncBlockStyles = css({
137
147
  },
138
148
  // 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
139
149
  [`.${BodiedSyncBlockSharedCssClassName.content}`]: {
140
- padding: '0 32px',
150
+ padding: '0 18px',
141
151
  cursor: 'text'
142
152
  },
143
153
  // 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
144
154
  [`.${SyncBlockSharedCssClassName.renderer}`]: {
145
- padding: '0 32px'
155
+ padding: '0 18px'
146
156
  }
147
157
  }
148
158
  },
@@ -1,2 +1,2 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "215.19.1";
2
+ export const version = "215.20.1";
@@ -112,10 +112,6 @@ var tableFullPageEditorStylesNew = css({
112
112
  width: '100%'
113
113
  }
114
114
  });
115
- var scrollGutter = css({
116
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
117
- display: 'none'
118
- });
119
115
  var editorContentAreaContainerNestedDndStyle = css({
120
116
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
121
117
  '.fabric-editor--full-width-mode': {
@@ -207,13 +203,14 @@ var contentAreaHeightNoToolbar = css({
207
203
  export var CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
208
204
  export var EDITOR_CONTAINER = 'ak-editor-container';
209
205
  var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
210
- var _contentAreaRef$curre;
206
+ var _props$editorAPI, _contentAreaRef$curre, _allowScrollGutter$gu;
211
207
  var theme = useTheme();
212
208
  var fullWidthMode = props.appearance === 'full-width';
213
209
  var maxWidthMode = props.appearance === 'max';
214
210
  var scrollContainerRef = useRef(null);
215
211
  var contentAreaRef = useRef(null);
216
212
  var containerRef = useRef(null);
213
+ var allowScrollGutter = (_props$editorAPI = props.editorAPI) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.base) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.sharedState.currentState()) === null || _props$editorAPI === void 0 ? void 0 : _props$editorAPI.allowScrollGutter;
217
214
  useImperativeHandle(ref, function () {
218
215
  return {
219
216
  get scrollContainer() {
@@ -294,9 +291,11 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
294
291
  containerElement: scrollContainerRef.current,
295
292
  dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
296
293
  wrapperElement: props.wrapperElement
297
- }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.after) : null, expVal('platform_editor_hydratable_ui', 'isEnabled', false) && jsx("div", {
294
+ }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.after) : null, expVal('platform_editor_scroll_gutter_fix', 'isEnabled', false) && allowScrollGutter && jsx("div", {
298
295
  id: "editor-scroll-gutter",
299
- css: scrollGutter,
296
+ style: {
297
+ paddingBottom: "".concat((_allowScrollGutter$gu = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu !== void 0 ? _allowScrollGutter$gu : '120', "px")
298
+ },
300
299
  "data-vc": "scroll-gutter"
301
300
  })))))), jsx("div", {
302
301
  css: sidebarArea
@@ -6,10 +6,12 @@
6
6
  ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
7
7
  ._1bahesu3{justify-content:flex-end}
8
8
  ._1e0c1txw{display:flex}
9
+ ._1f38ptqj{container-name:toolbar-container}
9
10
  ._1pby16oo{z-index:510}
10
11
  ._1ul91ns9{min-width:-moz-fit-content;min-width:fit-content}
11
12
  ._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
12
13
  ._4cvr1h6o{align-items:center}
13
14
  ._4t3izwfg{height:2pc}
15
+ ._7cca15wb{container-type:inline-size}
14
16
  ._kqswh2mm{position:relative}
15
17
  ._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
@@ -21,6 +21,7 @@ var styles = {
21
21
  mainToolbarWithKeyline: "_16qs1nax",
22
22
  customToolbarWrapperStyle: "_4cvr1h6o _1e0c1txw",
23
23
  firstChildWrapperOneLine: "_1e0c1txw _16jlkb7n",
24
+ firstChildWrapperContainerContext: "_7cca15wb _1f38ptqj",
24
25
  secondChildWrapperOneLine: "_1e0c1txw _1ul91ns9 _4cvr1h6o",
25
26
  beforePrimaryToolbarComponents: "_1e0c1txw _16jlkb7n _1bahesu3 _4cvr1h6o"
26
27
  };
@@ -37,7 +38,7 @@ var FirstChildWrapper = function FirstChildWrapper(_ref2) {
37
38
  var children = _ref2.children;
38
39
  return /*#__PURE__*/React.createElement("div", {
39
40
  "data-testid": "main-toolbar-first-child-wrapper",
40
- className: ax([styles.firstChildWrapperOneLine])
41
+ className: ax([styles.firstChildWrapperOneLine, expValEquals('platform_editor_reduce_toolbar_vc_impact', 'isEnabled', true) && styles.firstChildWrapperContainerContext])
41
42
  }, children);
42
43
  };
43
44
  var SecondChildWrapper = function SecondChildWrapper(_ref3) {
@@ -51,7 +51,7 @@ import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles, mentionsSel
51
51
  import { panelStyles, panelStylesMixin, nestedPanelBorderStylesMixin, panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, panelViewStyles, nestedPanelDangerStyles } from './styles/panelStyles';
52
52
  import { paragraphStylesOld, paragraphStylesOldWithScaledMargin, paragraphStylesUGCRefreshed, paragraphStylesWithScaledMargin } from './styles/paragraphStyles';
53
53
  import { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderWrapStyles } from './styles/placeholderStyles';
54
- import { pragmaticResizerStyles, pragmaticResizerStylesNew, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, pragmaticResizerStylesWithReducedEditorGutter, resizerStyles } from './styles/resizerStyles';
54
+ import { pragmaticResizerStyles, pragmaticResizerStylesNew, pragmaticResizerStylesSyncedBlock, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, pragmaticResizerStylesWithReducedEditorGutter, resizerStyles } from './styles/resizerStyles';
55
55
  import { dangerRuleStyles, ruleStyles } from './styles/rule';
56
56
  import { scrollbarStyles } from './styles/scrollbarStyles';
57
57
  import { hideCursorWhenHideSelectionStyles, hideSelectionStyles, selectedNodeStyles } from './styles/selectionStyles';
@@ -380,7 +380,9 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
380
380
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
381
381
  pragmaticResizerStylesNew :
382
382
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
383
- pragmaticResizerStyles : undefined, editorExperiment('advanced_layouts', true) && expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) &&
383
+ pragmaticResizerStyles : undefined, editorExperiment('platform_synced_block', true) &&
384
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
385
+ pragmaticResizerStylesSyncedBlock, editorExperiment('advanced_layouts', true) && expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) &&
384
386
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
385
387
  pragmaticStylesLayoutFirstNodeResizeHandleFix, expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) &&
386
388
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -438,6 +438,38 @@ export var pragmaticResizerStylesNew = css({
438
438
  }
439
439
  });
440
440
 
441
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
442
+ export var pragmaticResizerStylesSyncedBlock = css({
443
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
444
+ '.fabric-editor-breakout-mark': {
445
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
446
+ '&:has([data-prosemirror-node-name="syncBlock"]), &:has([data-prosemirror-node-name="bodiedSyncBlock"])': {
447
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
448
+ '> .pm-breakout-resize-handle-container--left': {
449
+ left: '-20px'
450
+ },
451
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
452
+ '> .pm-breakout-resize-handle-container--right': {
453
+ right: '-20px'
454
+ }
455
+ },
456
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
457
+ '&:has([data-prosemirror-node-name="syncBlock"])': {
458
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
459
+ '> .pm-breakout-resize-handle-container': {
460
+ height: 'calc(100% - 12px)'
461
+ }
462
+ },
463
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
464
+ '&:has([data-prosemirror-node-name="bodiedSyncBlock"])': {
465
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
466
+ '> .pm-breakout-resize-handle-container': {
467
+ height: 'calc(100% - 2px)'
468
+ }
469
+ }
470
+ }
471
+ });
472
+
441
473
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
442
474
  export var pragmaticResizerStylesWithReducedEditorGutter = css(_defineProperty({}, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
443
475
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
@@ -2,19 +2,18 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
3
3
  import { css } from '@emotion/react';
4
4
  import { BodiedSyncBlockSharedCssClassName, SyncBlockSharedCssClassName, SyncBlockLabelSharedCssClassName, SyncBlockStateCssClassName } from '@atlaskit/editor-common/sync-block';
5
- import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
6
5
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
7
6
  export var syncBlockStyles = css(_defineProperty({
8
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
9
- '.ProseMirror': _defineProperty({}, ".".concat(SyncBlockSharedCssClassName.prefix, ", .").concat(BodiedSyncBlockSharedCssClassName.prefix), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
8
+ '.ProseMirror': _defineProperty({}, ".".concat(SyncBlockSharedCssClassName.prefix, ", .").concat(BodiedSyncBlockSharedCssClassName.prefix), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
10
9
  position: 'relative',
11
10
  cursor: 'pointer',
12
11
  borderRadius: "var(--ds-radius-small, 3px)",
13
12
  marginTop: "var(--ds-space-150, 12px)",
14
13
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
15
- marginRight: "-".concat(akEditorGutterPadding, "px"),
14
+ marginRight: "-18px",
16
15
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
17
- marginLeft: "-".concat(akEditorGutterPadding, "px"),
16
+ marginLeft: "-18px",
18
17
  marginBottom: 0,
19
18
  paddingTop: "var(--ds-space-050, 4px)",
20
19
  paddingBottom: "var(--ds-space-050, 4px)",
@@ -87,11 +86,18 @@ export var syncBlockStyles = css(_defineProperty({
87
86
  '&::before': {
88
87
  border: 'none'
89
88
  }
90
- })), "&has(.".concat(SyncBlockSharedCssClassName.error, ")"), _defineProperty({
91
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
92
- '&:hover:not(.ak-editor-selected-node)': {
93
- boxShadow: 'none'
89
+ })), ":has(.".concat(SyncBlockSharedCssClassName.error, ")"), _defineProperty({
90
+ backgroundColor: "var(--ds-background-disabled, #17171708)",
91
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
92
+ }, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
93
+ opacity: 1,
94
+ visibility: 'visible',
95
+ backgroundColor: "var(--ds-surface, #FFFFFF)",
96
+ '&::before': {
97
+ border: 'none'
94
98
  }
99
+ })), ":has(.".concat(SyncBlockSharedCssClassName.loading, ")"), _defineProperty({
100
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
95
101
  }, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
96
102
  opacity: 0,
97
103
  visibility: 'hidden'
@@ -102,10 +108,10 @@ export var syncBlockStyles = css(_defineProperty({
102
108
  opacity: 0,
103
109
  visibility: 'hidden'
104
110
  })), ".".concat(BodiedSyncBlockSharedCssClassName.content), {
105
- padding: '0 32px',
111
+ padding: '0 18px',
106
112
  cursor: 'text'
107
113
  }), ".".concat(SyncBlockSharedCssClassName.renderer), {
108
- padding: '0 32px'
114
+ padding: '0 18px'
109
115
  }))
110
116
  }, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
111
117
  color: "var(--ds-text-subtle, #505258)",
@@ -1,2 +1,2 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "215.19.1";
2
+ export var version = "215.20.1";
@@ -9,6 +9,7 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
9
9
  import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
10
10
  import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
11
11
  import type { EditorAppearance, EditorContentMode, FeatureFlags, OptionalPlugin, PublicPluginAPI, ReactHookFactory, UIComponentFactory } from '@atlaskit/editor-common/types';
12
+ import { type BasePlugin } from '@atlaskit/editor-plugins/base';
12
13
  import { type ContextPanelPlugin } from '@atlaskit/editor-plugins/context-panel';
13
14
  import { type ViewMode } from '@atlaskit/editor-plugins/editor-viewmode';
14
15
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -24,7 +25,7 @@ interface FullPageEditorContentAreaProps {
24
25
  disabled: boolean | undefined;
25
26
  dispatchAnalyticsEvent: DispatchAnalyticsEvent | undefined;
26
27
  editorActions: EditorActions | undefined;
27
- editorAPI: PublicPluginAPI<[OptionalPlugin<ContextPanelPlugin>]> | undefined;
28
+ editorAPI: PublicPluginAPI<[OptionalPlugin<ContextPanelPlugin>, BasePlugin]> | undefined;
28
29
  editorDOMElement: ReactElement;
29
30
  editorView: EditorView;
30
31
  eventDispatcher: EventDispatcher | undefined;
@@ -13,4 +13,5 @@ export declare const pragmaticResizerStylesForTooltip: SerializedStyles;
13
13
  export declare const pragmaticStylesLayoutFirstNodeResizeHandleFix: SerializedStyles;
14
14
  export declare const pragmaticResizerStyles: SerializedStyles;
15
15
  export declare const pragmaticResizerStylesNew: SerializedStyles;
16
+ export declare const pragmaticResizerStylesSyncedBlock: SerializedStyles;
16
17
  export declare const pragmaticResizerStylesWithReducedEditorGutter: SerializedStyles;
@@ -9,6 +9,7 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
9
9
  import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
10
10
  import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
11
11
  import type { EditorAppearance, EditorContentMode, FeatureFlags, OptionalPlugin, PublicPluginAPI, ReactHookFactory, UIComponentFactory } from '@atlaskit/editor-common/types';
12
+ import { type BasePlugin } from '@atlaskit/editor-plugins/base';
12
13
  import { type ContextPanelPlugin } from '@atlaskit/editor-plugins/context-panel';
13
14
  import { type ViewMode } from '@atlaskit/editor-plugins/editor-viewmode';
14
15
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -25,7 +26,8 @@ interface FullPageEditorContentAreaProps {
25
26
  dispatchAnalyticsEvent: DispatchAnalyticsEvent | undefined;
26
27
  editorActions: EditorActions | undefined;
27
28
  editorAPI: PublicPluginAPI<[
28
- OptionalPlugin<ContextPanelPlugin>
29
+ OptionalPlugin<ContextPanelPlugin>,
30
+ BasePlugin
29
31
  ]> | undefined;
30
32
  editorDOMElement: ReactElement;
31
33
  editorView: EditorView;
@@ -13,4 +13,5 @@ export declare const pragmaticResizerStylesForTooltip: SerializedStyles;
13
13
  export declare const pragmaticStylesLayoutFirstNodeResizeHandleFix: SerializedStyles;
14
14
  export declare const pragmaticResizerStyles: SerializedStyles;
15
15
  export declare const pragmaticResizerStylesNew: SerializedStyles;
16
+ export declare const pragmaticResizerStylesSyncedBlock: SerializedStyles;
16
17
  export declare const pragmaticResizerStylesWithReducedEditorGutter: SerializedStyles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "215.20.0",
3
+ "version": "215.20.2",
4
4
  "description": "A package contains Atlassian editor core functionality",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -44,7 +44,7 @@
44
44
  "@atlaskit/analytics-namespaced-context": "^7.2.0",
45
45
  "@atlaskit/analytics-next": "^11.1.0",
46
46
  "@atlaskit/analytics-next-stable-react-context": "1.0.1",
47
- "@atlaskit/button": "^23.6.0",
47
+ "@atlaskit/button": "^23.7.0",
48
48
  "@atlaskit/css": "^0.17.0",
49
49
  "@atlaskit/editor-json-transformer": "^8.31.0",
50
50
  "@atlaskit/editor-performance-metrics": "^2.1.0",
@@ -65,7 +65,7 @@
65
65
  "@atlaskit/platform-feature-flags-react": "^0.4.0",
66
66
  "@atlaskit/react-ufo": "^4.15.0",
67
67
  "@atlaskit/task-decision": "^19.2.0",
68
- "@atlaskit/tmp-editor-statsig": "^15.2.0",
68
+ "@atlaskit/tmp-editor-statsig": "^15.7.0",
69
69
  "@atlaskit/tokens": "^8.4.0",
70
70
  "@atlaskit/tooltip": "^20.11.0",
71
71
  "@atlaskit/width-detector": "^5.0.0",
@@ -94,7 +94,7 @@
94
94
  "@af/visual-regression": "workspace:^",
95
95
  "@atlaskit/adf-utils": "^19.26.0",
96
96
  "@atlaskit/analytics-listeners": "^9.1.0",
97
- "@atlaskit/collab-provider": "^14.1.0",
97
+ "@atlaskit/collab-provider": "^14.2.0",
98
98
  "@atlaskit/editor-plugin-annotation": "^6.3.0",
99
99
  "@atlaskit/editor-plugin-card": "^11.5.0",
100
100
  "@atlaskit/editor-plugin-list": "^8.2.0",
@@ -104,19 +104,18 @@
104
104
  "@atlaskit/media-core": "^37.0.0",
105
105
  "@atlaskit/media-integration-test-helpers": "workspace:^",
106
106
  "@atlaskit/media-test-helpers": "^39.0.0",
107
- "@atlaskit/modal-dialog": "^14.7.0",
107
+ "@atlaskit/modal-dialog": "^14.8.0",
108
108
  "@atlaskit/renderer": "^124.17.0",
109
- "@atlaskit/section-message": "^8.9.0",
109
+ "@atlaskit/section-message": "^8.10.0",
110
110
  "@atlaskit/synchrony-test-helpers": "workspace:^",
111
- "@atlaskit/toggle": "^15.1.0",
111
+ "@atlaskit/toggle": "^15.2.0",
112
112
  "@atlaskit/util-data-test": "^18.3.0",
113
113
  "@atlassian/adf-schema-json": "^1.31.0",
114
114
  "@atlassian/feature-flags-test-utils": "^1.0.0",
115
115
  "@atlassian/search-provider": "^7.0.0",
116
116
  "@emotion/jest": "^11.8.0",
117
117
  "@storybook/addon-knobs": "^6.4.0",
118
- "@testing-library/react": "^13.4.0",
119
- "@testing-library/react-hooks": "^8.0.1",
118
+ "@testing-library/react": "^16.3.0",
120
119
  "@types/diff": "^5.0.2",
121
120
  "@types/is-number": "^7.0.0",
122
121
  "@types/react-transition-group": "^2.0.6",