@atlaskit/editor-core 215.9.7 → 215.9.9

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 (15) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +43 -2
  3. package/compass.yml +3 -0
  4. package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +3 -1
  5. package/dist/cjs/ui/EditorContentContainer/styles/codeBlockStyles.js +22 -1
  6. package/dist/cjs/ui/EditorContentContainer/styles/syncBlockStyles.js +61 -15
  7. package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +4 -2
  8. package/dist/es2019/ui/EditorContentContainer/styles/codeBlockStyles.js +26 -0
  9. package/dist/es2019/ui/EditorContentContainer/styles/syncBlockStyles.js +65 -12
  10. package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +4 -2
  11. package/dist/esm/ui/EditorContentContainer/styles/codeBlockStyles.js +21 -0
  12. package/dist/esm/ui/EditorContentContainer/styles/syncBlockStyles.js +61 -15
  13. package/dist/types/ui/EditorContentContainer/styles/codeBlockStyles.d.ts +1 -0
  14. package/dist/types-ts4.5/ui/EditorContentContainer/styles/codeBlockStyles.d.ts +1 -0
  15. package/package.json +3 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 215.9.9
4
+
5
+ ### Patch Changes
6
+
7
+ - [`3649625800804`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3649625800804) -
8
+ Fix the codeblock shift on initial load
9
+ - Updated dependencies
10
+
11
+ ## 215.9.8
12
+
13
+ ### Patch Changes
14
+
15
+ - [`7e3353721fa66`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7e3353721fa66) -
16
+ [ux] EDITOR-1822 update sync blocks ui to new design
17
+ - Updated dependencies
18
+
3
19
  ## 215.9.7
4
20
 
5
21
  ### Patch Changes
package/README.md CHANGED
@@ -1,6 +1,43 @@
1
- # editor-core
1
+ # @atlaskit/editor-core
2
2
 
3
- Main package for the Atlassian Editor.
3
+ A package contains Atlassian editor core functionality.
4
+
5
+ ## Description
6
+
7
+ This is the main package for the Atlassian Editor, providing the core functionality and components needed to build rich text editing experiences. It includes composable editor components, presets for different use cases (full-page, comment, chromeless), and the foundational infrastructure for the editor ecosystem.
8
+
9
+ ## Key Features
10
+
11
+ ### Editor Components
12
+ - **Composable Editor**: Modern composable editor architecture
13
+ - **Full Page Editor**: Complete editing experience for documents
14
+ - **Comment Editor**: Lightweight editor for comments and short content
15
+ - **Chromeless Editor**: Minimal editor without surrounding UI
16
+
17
+ ### Presets and Configuration
18
+ - **Default Preset**: Standard editor configuration with common features
19
+ - **Universal Preset**: Flexible preset supporting multiple use cases
20
+ - **Custom Presets**: Extensible preset system for tailored configurations
21
+
22
+ ### Core Infrastructure
23
+ - **Plugin System**: Extensible plugin architecture
24
+ - **Editor View**: ProseMirror-based editing foundation
25
+ - **Performance Tracking**: Built-in performance monitoring and analytics
26
+ - **Error Boundaries**: Robust error handling and recovery
27
+
28
+ ### UI Components
29
+ - **Toolbar Systems**: Primary, floating, and contextual toolbars
30
+ - **Context Panels**: Side panels for additional editor controls
31
+ - **Element Browser**: Quick insert interface for content elements
32
+
33
+ ## Examples
34
+
35
+ The package includes comprehensive examples in the `examples/` directory covering:
36
+ - Kitchen sink demonstration
37
+ - Different editor appearances and configurations
38
+ - Collaborative editing setups
39
+ - Media handling and integrations
40
+ - Performance testing scenarios
4
41
 
5
42
  ## Quick Start
6
43
 
@@ -18,3 +55,7 @@ Running visual regression tests will also use the webpack build, due to the slig
18
55
  `VISUAL_REGRESSION=true yarn start editor-core`
19
56
 
20
57
  If you need to override the default port and run multiple builds side by side, use the `PORT` env variable: `PORT=9005 yarn start editor-core`
58
+
59
+ ## Team
60
+
61
+ **Editor**
package/compass.yml CHANGED
@@ -7,6 +7,9 @@ ownerId: 'ari:cloud:teams::team/cf6a670b-5252-4c68-a769-9207de366beb'
7
7
  fields:
8
8
  tier: 2
9
9
  links:
10
+ - name: Root Repository
11
+ type: REPOSITORY
12
+ url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master
10
13
  - name: ''
11
14
  type: REPOSITORY
12
15
  url: 'https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/editor/editor-core/'
package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js CHANGED
@@ -188,7 +188,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
188
188
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
189
189
  _placeholderStyles.placeholderWrapStyles,
190
190
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
191
- _codeBlockStyles.codeBlockStyles,
191
+ _codeBlockStyles.codeBlockStyles, (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') &&
192
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
193
+ _codeBlockStyles.codeBlockStylesWithEmUnits,
192
194
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
193
195
  !(0, _platformFeatureFlags.fg)('platform_editor_fix_code_block_bg_color_in_macro_2') && _codeBlockStyles.codeBgColorStyles,
194
196
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
package/dist/cjs/ui/EditorContentContainer/styles/codeBlockStyles.js CHANGED
@@ -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.firstCodeBlockWithNoMarginOld = exports.firstCodeBlockWithNoMargin = exports.codeBlockStyles = exports.codeBgColorStyles = exports.CodeBlockSharedCssClassName = void 0;
7
+ exports.firstCodeBlockWithNoMarginOld = exports.firstCodeBlockWithNoMargin = exports.codeBlockStylesWithEmUnits = exports.codeBlockStyles = exports.codeBgColorStyles = exports.CodeBlockSharedCssClassName = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = require("@emotion/react");
10
10
  var _overflowShadowStyles = require("./overflowShadowStyles");
@@ -184,6 +184,27 @@ var codeBlockStyles = exports.codeBlockStyles = (0, _react.css)({
184
184
  }))
185
185
  });
186
186
 
187
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
188
+ var codeBlockStylesWithEmUnits = exports.codeBlockStylesWithEmUnits = (0, _react.css)({
189
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
190
+ '.ProseMirror': (0, _defineProperty2.default)({}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER), (0, _defineProperty2.default)({
191
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
192
+ '.code-block-gutter-pseudo-element::before': {
193
+ display: 'flow',
194
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
195
+ lineHeight: '1.5em'
196
+ }
197
+ }, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
198
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
199
+ code: {
200
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
201
+ fontSize: '0.875em',
202
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
203
+ lineHeight: '1.5em'
204
+ }
205
+ }))
206
+ });
207
+
187
208
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
188
209
  var codeBgColorStyles = exports.codeBgColorStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER), {
189
210
  '--ds--code--bg-color': 'transparent'
package/dist/cjs/ui/EditorContentContainer/styles/syncBlockStyles.js CHANGED
@@ -12,7 +12,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
12
12
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
13
13
 
14
14
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
15
- var syncBlockStyles = exports.syncBlockStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
15
+ var syncBlockStyles = exports.syncBlockStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
16
16
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
17
17
  '.ProseMirror': (0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockSharedCssClassName.prefix, ", .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix), (0, _defineProperty2.default)((0, _defineProperty2.default)({
18
18
  position: 'relative',
@@ -29,8 +29,21 @@ var syncBlockStyles = exports.syncBlockStyles = (0, _react.css)((0, _definePrope
29
29
  color: "var(--ds-icon-danger, #C9372C)".concat(" !important")
30
30
  }
31
31
  }, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
32
- color: "var(--ds-icon-danger, #C9372C)",
33
- backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
32
+ backgroundColor: "var(--ds-background-danger, #FFECEB)",
33
+ '&::before': {
34
+ content: '""',
35
+ position: 'absolute',
36
+ top: '-1px',
37
+ left: '-1px',
38
+ right: '-1px',
39
+ bottom: '-1px',
40
+ border: "1px solid ".concat("var(--ds-border-danger, #E2483D)"),
41
+ borderRadius: "var(--ds-radius-small, 3px)",
42
+ mask: 'linear-gradient(to bottom, black 55%, transparent 55%)',
43
+ WebkitMask: 'linear-gradient(to bottom, black 55%, transparent 55%)',
44
+ pointerEvents: 'none',
45
+ zIndex: -1
46
+ }
34
47
  }),
35
48
  borderRadius: "var(--ds-radius-small, 3px)",
36
49
  marginTop: "var(--ds-space-150, 12px)",
@@ -44,7 +57,7 @@ var syncBlockStyles = exports.syncBlockStyles = (0, _react.css)((0, _definePrope
44
57
  color: 'inherit',
45
58
  '&:hover': {
46
59
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
47
- boxShadow: "0px 0px 0px 1px ".concat("var(--ds-border-accent-purple, #8270DB)")
60
+ boxShadow: "0px 0px 0px 1px ".concat("var(--ds-border, #091E4224)")
48
61
  }
49
62
  }, ".".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.content), {
50
63
  padding: '0 32px',
@@ -52,21 +65,54 @@ var syncBlockStyles = exports.syncBlockStyles = (0, _react.css)((0, _definePrope
52
65
  }), ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer), {
53
66
  padding: '0 32px'
54
67
  }))
55
- }, ".".concat(_syncBlock.SyncBlockSharedCssClassName.prefix, ".ak-editor-selected-node:not(.danger), .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix, ".ak-editor-selected-node:not(.danger)"), {
56
- boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-purple, #8270DB)")
57
- }), ".".concat(_syncBlock.SyncBlockSharedCssClassName.prefix, ".ak-editor-selected-node, .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix, ".ak-editor-selected-node"), (0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
58
- display: 'unset'
59
- })), ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
60
- color: "var(--ds-text-accent-purple, #5E4DB2)",
68
+ }, ".".concat(_syncBlock.SyncBlockSharedCssClassName.prefix, ".ak-editor-selected-node:not(.danger), .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix, ".ak-editor-selected-node:not(.danger)"), (0, _defineProperty2.default)({
69
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border-focused, #388BFF)"),
70
+ backgroundColor: "var(--ds-background-selected, #E9F2FF)"
71
+ }, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
72
+ backgroundColor: "var(--ds-background-selected, #E9F2FF)",
73
+ '&::before': {
74
+ content: '""',
75
+ position: 'absolute',
76
+ top: '-1px',
77
+ left: '-1px',
78
+ right: '-1px',
79
+ bottom: '-1px',
80
+ border: "1px solid ".concat("var(--ds-border-focused, #388BFF)"),
81
+ borderRadius: "var(--ds-radius-small, 3px)",
82
+ mask: 'linear-gradient(to bottom, black 55%, transparent 55%)',
83
+ WebkitMask: 'linear-gradient(to bottom, black 55%, transparent 55%)',
84
+ pointerEvents: 'none',
85
+ zIndex: -1
86
+ }
87
+ })), ".".concat(_syncBlock.SyncBlockSharedCssClassName.prefix, ".ak-editor-selected-node, .").concat(_syncBlock.SyncBlockSharedCssClassName.prefix, ":hover, .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix, ".ak-editor-selected-node, .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix, ":hover, .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix, ".danger, ").concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName, ":hover"), (0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
88
+ opacity: 1,
89
+ visibility: 'visible'
90
+ })), ".".concat(_syncBlock.SyncBlockSharedCssClassName.prefix, ":has(.").concat(_syncBlock.SyncBlockSharedCssClassName.error, "), .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix, ":has(.").concat(_syncBlock.SyncBlockSharedCssClassName.error, ")"), {
91
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
92
+ '&:hover:not(.ak-editor-selected-node)': {
93
+ boxShadow: 'none'
94
+ },
95
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
96
+ '&.ak-editor-selected-node, &:hover': (0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
97
+ opacity: 0,
98
+ visibility: 'hidden'
99
+ })
100
+ }), ".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName), {
101
+ color: "var(--ds-text-subtle, #44546F)",
61
102
  borderRadius: "var(--ds-radius-small, 3px)",
62
103
  position: 'absolute',
63
- display: 'none',
104
+ gap: "var(--ds-space-050, 4px)",
105
+ justifyContent: 'center',
106
+ alignItems: 'center',
107
+ display: 'flex',
108
+ opacity: 0,
109
+ visibility: 'hidden',
64
110
  paddingLeft: "var(--ds-space-100, 8px)",
65
111
  paddingRight: "var(--ds-space-100, 8px)",
66
112
  paddingBottom: "var(--ds-space-050, 4px)",
67
113
  paddingTop: "var(--ds-space-050, 4px)",
68
- // height of label (32px) + space between sync block and label (4px) = 36px
69
- top: '-36px',
70
- right: '0px',
71
- backgroundColor: "var(--ds-background-accent-purple-subtlest, #F3F0FF)"
114
+ top: "var(--ds-space-negative-200, -16px)",
115
+ right: "var(--ds-space-150, 12px)",
116
+ backgroundColor: "var(--ds-surface, #FFFFFF)",
117
+ maxWidth: '140px'
72
118
  }));
package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js CHANGED
@@ -24,7 +24,7 @@ import { baseStyles, editorLargeGutterPuddingBaseStyles, editorLargeGutterPuddin
24
24
  import { blockMarksStyles } from './styles/blockMarksStyles';
25
25
  import { blocktypeStyles, blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes, blocktypeStyles_fg_platform_editor_typography_ugc, blocktypeStyles_without_fg_platform_editor_typography_ugc } from './styles/blockTypeStyles';
26
26
  import { codeBidiWarningStyles } from './styles/codeBidiWarningStyles';
27
- import { codeBlockStyles, codeBgColorStyles, firstCodeBlockWithNoMargin, firstCodeBlockWithNoMarginOld } from './styles/codeBlockStyles';
27
+ import { codeBlockStyles, codeBlockStylesWithEmUnits, codeBgColorStyles, firstCodeBlockWithNoMargin, firstCodeBlockWithNoMarginOld } from './styles/codeBlockStyles';
28
28
  import { codeMarkStyles } from './styles/codeMarkStyles';
29
29
  import { commentEditorStyles } from './styles/commentEditorStyles';
30
30
  import { cursorStyles } from './styles/cursorStyles';
@@ -184,7 +184,9 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
184
184
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
185
185
  placeholderWrapStyles,
186
186
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
187
- codeBlockStyles,
187
+ codeBlockStyles, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') &&
188
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
189
+ codeBlockStylesWithEmUnits,
188
190
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
189
191
  !fg('platform_editor_fix_code_block_bg_color_in_macro_2') && codeBgColorStyles,
190
192
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
package/dist/es2019/ui/EditorContentContainer/styles/codeBlockStyles.js CHANGED
@@ -234,6 +234,32 @@ export const codeBlockStyles = css({
234
234
  }
235
235
  });
236
236
 
237
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
238
+ export const codeBlockStylesWithEmUnits = css({
239
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
240
+ '.ProseMirror': {
241
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
242
+ [`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER}`]: {
243
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
244
+ '.code-block-gutter-pseudo-element::before': {
245
+ display: 'flow',
246
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
247
+ lineHeight: '1.5em'
248
+ },
249
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
250
+ [`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT}`]: {
251
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
252
+ code: {
253
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
254
+ fontSize: '0.875em',
255
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
256
+ lineHeight: '1.5em'
257
+ }
258
+ }
259
+ }
260
+ }
261
+ });
262
+
237
263
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
238
264
  export const codeBgColorStyles = css({
239
265
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
package/dist/es2019/ui/EditorContentContainer/styles/syncBlockStyles.js CHANGED
@@ -23,8 +23,21 @@ export const syncBlockStyles = css({
23
23
  },
24
24
  // 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
25
25
  [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
26
- color: "var(--ds-icon-danger, #C9372C)",
27
- backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
26
+ backgroundColor: "var(--ds-background-danger, #FFECEB)",
27
+ '&::before': {
28
+ content: '""',
29
+ position: 'absolute',
30
+ top: '-1px',
31
+ left: '-1px',
32
+ right: '-1px',
33
+ bottom: '-1px',
34
+ border: `1px solid ${"var(--ds-border-danger, #E2483D)"}`,
35
+ borderRadius: "var(--ds-radius-small, 3px)",
36
+ mask: 'linear-gradient(to bottom, black 55%, transparent 55%)',
37
+ WebkitMask: 'linear-gradient(to bottom, black 55%, transparent 55%)',
38
+ pointerEvents: 'none',
39
+ zIndex: -1
40
+ }
28
41
  }
29
42
  },
30
43
  borderRadius: "var(--ds-radius-small, 3px)",
@@ -39,7 +52,7 @@ export const syncBlockStyles = css({
39
52
  color: 'inherit',
40
53
  '&:hover': {
41
54
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
42
- boxShadow: `0px 0px 0px 1px ${"var(--ds-border-accent-purple, #8270DB)"}`
55
+ boxShadow: `0px 0px 0px 1px ${"var(--ds-border, #091E4224)"}`
43
56
  },
44
57
  // 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
45
58
  [`.${BodiedSyncBlockSharedCssClassName.content}`]: {
@@ -54,28 +67,68 @@ export const syncBlockStyles = css({
54
67
  },
55
68
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
56
69
  [`.${SyncBlockSharedCssClassName.prefix}.ak-editor-selected-node:not(.danger), .${BodiedSyncBlockSharedCssClassName.prefix}.ak-editor-selected-node:not(.danger)`]: {
57
- boxShadow: `0 0 0 1px ${"var(--ds-border-accent-purple, #8270DB)"}`
70
+ boxShadow: `0 0 0 1px ${"var(--ds-border-focused, #388BFF)"}`,
71
+ backgroundColor: "var(--ds-background-selected, #E9F2FF)",
72
+ // 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
73
+ [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
74
+ backgroundColor: "var(--ds-background-selected, #E9F2FF)",
75
+ '&::before': {
76
+ content: '""',
77
+ position: 'absolute',
78
+ top: '-1px',
79
+ left: '-1px',
80
+ right: '-1px',
81
+ bottom: '-1px',
82
+ border: `1px solid ${"var(--ds-border-focused, #388BFF)"}`,
83
+ borderRadius: "var(--ds-radius-small, 3px)",
84
+ mask: 'linear-gradient(to bottom, black 55%, transparent 55%)',
85
+ WebkitMask: 'linear-gradient(to bottom, black 55%, transparent 55%)',
86
+ pointerEvents: 'none',
87
+ zIndex: -1
88
+ }
89
+ }
58
90
  },
59
91
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
60
- [`.${SyncBlockSharedCssClassName.prefix}.ak-editor-selected-node, .${BodiedSyncBlockSharedCssClassName.prefix}.ak-editor-selected-node`]: {
92
+ [`.${SyncBlockSharedCssClassName.prefix}.ak-editor-selected-node, .${SyncBlockSharedCssClassName.prefix}:hover, .${BodiedSyncBlockSharedCssClassName.prefix}.ak-editor-selected-node, .${BodiedSyncBlockSharedCssClassName.prefix}:hover, .${BodiedSyncBlockSharedCssClassName.prefix}.danger, ${SyncBlockLabelSharedCssClassName.labelClassName}:hover`]: {
61
93
  // 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
62
94
  [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
63
- display: 'unset'
95
+ opacity: 1,
96
+ visibility: 'visible'
97
+ }
98
+ },
99
+ // 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
100
+ [`.${SyncBlockSharedCssClassName.prefix}:has(.${SyncBlockSharedCssClassName.error}), .${BodiedSyncBlockSharedCssClassName.prefix}:has(.${SyncBlockSharedCssClassName.error})`]: {
101
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
102
+ '&:hover:not(.ak-editor-selected-node)': {
103
+ boxShadow: 'none'
104
+ },
105
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
106
+ '&.ak-editor-selected-node, &:hover': {
107
+ // 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
108
+ [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
109
+ opacity: 0,
110
+ visibility: 'hidden'
111
+ }
64
112
  }
65
113
  },
66
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
67
115
  [`.${SyncBlockLabelSharedCssClassName.labelClassName}`]: {
68
- color: "var(--ds-text-accent-purple, #5E4DB2)",
116
+ color: "var(--ds-text-subtle, #44546F)",
69
117
  borderRadius: "var(--ds-radius-small, 3px)",
70
118
  position: 'absolute',
71
- display: 'none',
119
+ gap: "var(--ds-space-050, 4px)",
120
+ justifyContent: 'center',
121
+ alignItems: 'center',
122
+ display: 'flex',
123
+ opacity: 0,
124
+ visibility: 'hidden',
72
125
  paddingLeft: "var(--ds-space-100, 8px)",
73
126
  paddingRight: "var(--ds-space-100, 8px)",
74
127
  paddingBottom: "var(--ds-space-050, 4px)",
75
128
  paddingTop: "var(--ds-space-050, 4px)",
76
- // height of label (32px) + space between sync block and label (4px) = 36px
77
- top: '-36px',
78
- right: '0px',
79
- backgroundColor: "var(--ds-background-accent-purple-subtlest, #F3F0FF)"
129
+ top: "var(--ds-space-negative-200, -16px)",
130
+ right: "var(--ds-space-150, 12px)",
131
+ backgroundColor: "var(--ds-surface, #FFFFFF)",
132
+ maxWidth: '140px'
80
133
  }
81
134
  });
package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js CHANGED
@@ -25,7 +25,7 @@ import { baseStyles, editorLargeGutterPuddingBaseStyles, editorLargeGutterPuddin
25
25
  import { blockMarksStyles } from './styles/blockMarksStyles';
26
26
  import { blocktypeStyles, blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes, blocktypeStyles_fg_platform_editor_typography_ugc, blocktypeStyles_without_fg_platform_editor_typography_ugc } from './styles/blockTypeStyles';
27
27
  import { codeBidiWarningStyles } from './styles/codeBidiWarningStyles';
28
- import { codeBlockStyles, codeBgColorStyles, firstCodeBlockWithNoMargin, firstCodeBlockWithNoMarginOld } from './styles/codeBlockStyles';
28
+ import { codeBlockStyles, codeBlockStylesWithEmUnits, codeBgColorStyles, firstCodeBlockWithNoMargin, firstCodeBlockWithNoMarginOld } from './styles/codeBlockStyles';
29
29
  import { codeMarkStyles } from './styles/codeMarkStyles';
30
30
  import { commentEditorStyles } from './styles/commentEditorStyles';
31
31
  import { cursorStyles } from './styles/cursorStyles';
@@ -180,7 +180,9 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
180
180
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
181
181
  placeholderWrapStyles,
182
182
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
183
- codeBlockStyles,
183
+ codeBlockStyles, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') &&
184
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
185
+ codeBlockStylesWithEmUnits,
184
186
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
185
187
  !fg('platform_editor_fix_code_block_bg_color_in_macro_2') && codeBgColorStyles,
186
188
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
package/dist/esm/ui/EditorContentContainer/styles/codeBlockStyles.js CHANGED
@@ -176,6 +176,27 @@ export var codeBlockStyles = css({
176
176
  }))
177
177
  });
178
178
 
179
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
180
+ export var codeBlockStylesWithEmUnits = css({
181
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
182
+ '.ProseMirror': _defineProperty({}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER), _defineProperty({
183
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
184
+ '.code-block-gutter-pseudo-element::before': {
185
+ display: 'flow',
186
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
187
+ lineHeight: '1.5em'
188
+ }
189
+ }, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
190
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
191
+ code: {
192
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
193
+ fontSize: '0.875em',
194
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
195
+ lineHeight: '1.5em'
196
+ }
197
+ }))
198
+ });
199
+
179
200
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
180
201
  export var codeBgColorStyles = css(_defineProperty({}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER), {
181
202
  '--ds--code--bg-color': 'transparent'
package/dist/esm/ui/EditorContentContainer/styles/syncBlockStyles.js CHANGED
@@ -4,7 +4,7 @@ import { css } from '@emotion/react';
4
4
  import { BodiedSyncBlockSharedCssClassName, SyncBlockSharedCssClassName, SyncBlockLabelSharedCssClassName } from '@atlaskit/editor-common/sync-block';
5
5
  import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
6
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
7
- export var syncBlockStyles = css(_defineProperty(_defineProperty(_defineProperty({
7
+ export var syncBlockStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
8
8
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
9
9
  '.ProseMirror': _defineProperty({}, ".".concat(SyncBlockSharedCssClassName.prefix, ", .").concat(BodiedSyncBlockSharedCssClassName.prefix), _defineProperty(_defineProperty({
10
10
  position: 'relative',
@@ -21,8 +21,21 @@ export var syncBlockStyles = css(_defineProperty(_defineProperty(_defineProperty
21
21
  color: "var(--ds-icon-danger, #C9372C)".concat(" !important")
22
22
  }
23
23
  }, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
24
- color: "var(--ds-icon-danger, #C9372C)",
25
- backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)"
24
+ backgroundColor: "var(--ds-background-danger, #FFECEB)",
25
+ '&::before': {
26
+ content: '""',
27
+ position: 'absolute',
28
+ top: '-1px',
29
+ left: '-1px',
30
+ right: '-1px',
31
+ bottom: '-1px',
32
+ border: "1px solid ".concat("var(--ds-border-danger, #E2483D)"),
33
+ borderRadius: "var(--ds-radius-small, 3px)",
34
+ mask: 'linear-gradient(to bottom, black 55%, transparent 55%)',
35
+ WebkitMask: 'linear-gradient(to bottom, black 55%, transparent 55%)',
36
+ pointerEvents: 'none',
37
+ zIndex: -1
38
+ }
26
39
  }),
27
40
  borderRadius: "var(--ds-radius-small, 3px)",
28
41
  marginTop: "var(--ds-space-150, 12px)",
@@ -36,7 +49,7 @@ export var syncBlockStyles = css(_defineProperty(_defineProperty(_defineProperty
36
49
  color: 'inherit',
37
50
  '&:hover': {
38
51
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
39
- boxShadow: "0px 0px 0px 1px ".concat("var(--ds-border-accent-purple, #8270DB)")
52
+ boxShadow: "0px 0px 0px 1px ".concat("var(--ds-border, #091E4224)")
40
53
  }
41
54
  }, ".".concat(BodiedSyncBlockSharedCssClassName.content), {
42
55
  padding: '0 32px',
@@ -44,21 +57,54 @@ export var syncBlockStyles = css(_defineProperty(_defineProperty(_defineProperty
44
57
  }), ".".concat(SyncBlockSharedCssClassName.renderer), {
45
58
  padding: '0 32px'
46
59
  }))
47
- }, ".".concat(SyncBlockSharedCssClassName.prefix, ".ak-editor-selected-node:not(.danger), .").concat(BodiedSyncBlockSharedCssClassName.prefix, ".ak-editor-selected-node:not(.danger)"), {
48
- boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-purple, #8270DB)")
49
- }), ".".concat(SyncBlockSharedCssClassName.prefix, ".ak-editor-selected-node, .").concat(BodiedSyncBlockSharedCssClassName.prefix, ".ak-editor-selected-node"), _defineProperty({}, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
50
- display: 'unset'
51
- })), ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
52
- color: "var(--ds-text-accent-purple, #5E4DB2)",
60
+ }, ".".concat(SyncBlockSharedCssClassName.prefix, ".ak-editor-selected-node:not(.danger), .").concat(BodiedSyncBlockSharedCssClassName.prefix, ".ak-editor-selected-node:not(.danger)"), _defineProperty({
61
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border-focused, #388BFF)"),
62
+ backgroundColor: "var(--ds-background-selected, #E9F2FF)"
63
+ }, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
64
+ backgroundColor: "var(--ds-background-selected, #E9F2FF)",
65
+ '&::before': {
66
+ content: '""',
67
+ position: 'absolute',
68
+ top: '-1px',
69
+ left: '-1px',
70
+ right: '-1px',
71
+ bottom: '-1px',
72
+ border: "1px solid ".concat("var(--ds-border-focused, #388BFF)"),
73
+ borderRadius: "var(--ds-radius-small, 3px)",
74
+ mask: 'linear-gradient(to bottom, black 55%, transparent 55%)',
75
+ WebkitMask: 'linear-gradient(to bottom, black 55%, transparent 55%)',
76
+ pointerEvents: 'none',
77
+ zIndex: -1
78
+ }
79
+ })), ".".concat(SyncBlockSharedCssClassName.prefix, ".ak-editor-selected-node, .").concat(SyncBlockSharedCssClassName.prefix, ":hover, .").concat(BodiedSyncBlockSharedCssClassName.prefix, ".ak-editor-selected-node, .").concat(BodiedSyncBlockSharedCssClassName.prefix, ":hover, .").concat(BodiedSyncBlockSharedCssClassName.prefix, ".danger, ").concat(SyncBlockLabelSharedCssClassName.labelClassName, ":hover"), _defineProperty({}, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
80
+ opacity: 1,
81
+ visibility: 'visible'
82
+ })), ".".concat(SyncBlockSharedCssClassName.prefix, ":has(.").concat(SyncBlockSharedCssClassName.error, "), .").concat(BodiedSyncBlockSharedCssClassName.prefix, ":has(.").concat(SyncBlockSharedCssClassName.error, ")"), {
83
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
84
+ '&:hover:not(.ak-editor-selected-node)': {
85
+ boxShadow: 'none'
86
+ },
87
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
88
+ '&.ak-editor-selected-node, &:hover': _defineProperty({}, ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
89
+ opacity: 0,
90
+ visibility: 'hidden'
91
+ })
92
+ }), ".".concat(SyncBlockLabelSharedCssClassName.labelClassName), {
93
+ color: "var(--ds-text-subtle, #44546F)",
53
94
  borderRadius: "var(--ds-radius-small, 3px)",
54
95
  position: 'absolute',
55
- display: 'none',
96
+ gap: "var(--ds-space-050, 4px)",
97
+ justifyContent: 'center',
98
+ alignItems: 'center',
99
+ display: 'flex',
100
+ opacity: 0,
101
+ visibility: 'hidden',
56
102
  paddingLeft: "var(--ds-space-100, 8px)",
57
103
  paddingRight: "var(--ds-space-100, 8px)",
58
104
  paddingBottom: "var(--ds-space-050, 4px)",
59
105
  paddingTop: "var(--ds-space-050, 4px)",
60
- // height of label (32px) + space between sync block and label (4px) = 36px
61
- top: '-36px',
62
- right: '0px',
63
- backgroundColor: "var(--ds-background-accent-purple-subtlest, #F3F0FF)"
106
+ top: "var(--ds-space-negative-200, -16px)",
107
+ right: "var(--ds-space-150, 12px)",
108
+ backgroundColor: "var(--ds-surface, #FFFFFF)",
109
+ maxWidth: '140px'
64
110
  }));
package/dist/types/ui/EditorContentContainer/styles/codeBlockStyles.d.ts CHANGED
@@ -11,6 +11,7 @@ export declare const CodeBlockSharedCssClassName: {
11
11
  CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET: string;
12
12
  };
13
13
  export declare const codeBlockStyles: SerializedStyles;
14
+ export declare const codeBlockStylesWithEmUnits: SerializedStyles;
14
15
  export declare const codeBgColorStyles: SerializedStyles;
15
16
  export declare const firstCodeBlockWithNoMargin: SerializedStyles;
16
17
  export declare const firstCodeBlockWithNoMarginOld: SerializedStyles;
package/dist/types-ts4.5/ui/EditorContentContainer/styles/codeBlockStyles.d.ts CHANGED
@@ -11,6 +11,7 @@ export declare const CodeBlockSharedCssClassName: {
11
11
  CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET: string;
12
12
  };
13
13
  export declare const codeBlockStyles: SerializedStyles;
14
+ export declare const codeBlockStylesWithEmUnits: SerializedStyles;
14
15
  export declare const codeBgColorStyles: SerializedStyles;
15
16
  export declare const firstCodeBlockWithNoMargin: SerializedStyles;
16
17
  export declare const firstCodeBlockWithNoMarginOld: SerializedStyles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "215.9.7",
3
+ "version": "215.9.9",
4
4
  "description": "A package contains Atlassian editor core functionality",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -64,7 +64,7 @@
64
64
  "@atlaskit/platform-feature-flags-react": "^0.4.0",
65
65
  "@atlaskit/react-ufo": "^4.14.0",
66
66
  "@atlaskit/task-decision": "^19.2.0",
67
- "@atlaskit/tmp-editor-statsig": "^13.26.0",
67
+ "@atlaskit/tmp-editor-statsig": "^13.27.0",
68
68
  "@atlaskit/tokens": "^7.1.0",
69
69
  "@atlaskit/tooltip": "^20.7.0",
70
70
  "@atlaskit/width-detector": "^5.0.0",
@@ -81,7 +81,7 @@
81
81
  "uuid": "^3.1.0"
82
82
  },
83
83
  "peerDependencies": {
84
- "@atlaskit/editor-common": "^110.21.0",
84
+ "@atlaskit/editor-common": "^110.22.0",
85
85
  "@atlaskit/link-provider": "^4.0.0",
86
86
  "@atlaskit/media-core": "^37.0.0",
87
87
  "react": "^18.2.0",
@@ -285,10 +285,6 @@
285
285
  "platform_editor_quick_insert_placeholder": {
286
286
  "type": "boolean"
287
287
  },
288
- "platform_editor_nested_tables_cellselection_paste": {
289
- "type": "boolean",
290
- "referenceOnly": true
291
- },
292
288
  "editor_a11y_remove_unwrap_button": {
293
289
  "type": "boolean",
294
290
  "referenceOnly": true
@@ -297,10 +293,6 @@
297
293
  "type": "boolean",
298
294
  "referenceOnly": true
299
295
  },
300
- "platform_editor_elements_dnd_multi_select_patch_3": {
301
- "type": "boolean",
302
- "referenceOnly": true
303
- },
304
296
  "platform_editor_nested_tables_sticky_header_bug": {
305
297
  "type": "boolean",
306
298
  "referenceOnly": true