@atlaskit/editor-core 209.1.10 → 209.2.0

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 (35) hide show
  1. package/CHANGELOG.md +60 -0
  2. package/afm-townsquare/tsconfig.json +103 -0
  3. package/dist/cjs/presets/universal.js +2 -3
  4. package/dist/cjs/ui/Appearance/Comment/Comment.js +3 -1
  5. package/dist/cjs/ui/ContentStyles/index.js +6 -2
  6. package/dist/cjs/ui/ContentStyles/layout.js +1 -2
  7. package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +7 -1
  8. package/dist/cjs/ui/EditorContentContainer/styles/baseStyles.js +1 -1
  9. package/dist/cjs/ui/EditorContentContainer/styles/resizerStyles.js +27 -2
  10. package/dist/cjs/version-wrapper.js +1 -1
  11. package/dist/es2019/presets/universal.js +2 -3
  12. package/dist/es2019/ui/Appearance/Comment/Comment.js +3 -1
  13. package/dist/es2019/ui/ContentStyles/index.js +6 -1
  14. package/dist/es2019/ui/ContentStyles/layout.js +1 -2
  15. package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +8 -2
  16. package/dist/es2019/ui/EditorContentContainer/styles/baseStyles.js +1 -1
  17. package/dist/es2019/ui/EditorContentContainer/styles/resizerStyles.js +35 -0
  18. package/dist/es2019/version-wrapper.js +1 -1
  19. package/dist/esm/presets/universal.js +2 -3
  20. package/dist/esm/ui/Appearance/Comment/Comment.js +3 -1
  21. package/dist/esm/ui/ContentStyles/index.js +7 -3
  22. package/dist/esm/ui/ContentStyles/layout.js +1 -2
  23. package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +8 -2
  24. package/dist/esm/ui/EditorContentContainer/styles/baseStyles.js +1 -1
  25. package/dist/esm/ui/EditorContentContainer/styles/resizerStyles.js +26 -1
  26. package/dist/esm/version-wrapper.js +1 -1
  27. package/dist/types/create-editor/create-universal-preset.d.ts +121 -121
  28. package/dist/types/presets/universal.d.ts +124 -133
  29. package/dist/types/presets/useUniversalPreset.d.ts +121 -121
  30. package/dist/types/ui/EditorContentContainer/styles/resizerStyles.d.ts +1 -0
  31. package/dist/types-ts4.5/create-editor/create-universal-preset.d.ts +121 -121
  32. package/dist/types-ts4.5/presets/universal.d.ts +124 -133
  33. package/dist/types-ts4.5/presets/useUniversalPreset.d.ts +121 -121
  34. package/dist/types-ts4.5/ui/EditorContentContainer/styles/resizerStyles.d.ts +1 -0
  35. package/package.json +17 -14
package/CHANGELOG.md CHANGED
@@ -1,5 +1,65 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 209.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#188356](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/188356)
8
+ [`5a2110350abd3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5a2110350abd3) -
9
+ [https://product-fabric.atlassian.net/browse/ED-28554](ED-28554) - clean up EmojiNodeDataProvider
10
+ spike
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
16
+ ## 209.1.11
17
+
18
+ ### Patch Changes
19
+
20
+ - [#188277](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/188277)
21
+ [`9e6d67b625ac9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e6d67b625ac9) -
22
+ [ux] Hides drag controls for all nodes and resize handles on expands and layouts on narrow
23
+ screens.
24
+ - [#187022](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/187022)
25
+ [`667172449febe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/667172449febe) -
26
+ [ux] ENGHEALTH-27831 made editor scroll container focusable by keyboard for accessibility
27
+ - [#188604](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/188604)
28
+ [`2447351dcf766`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2447351dcf766) - ##
29
+ What? Remove entry-points to table plugin:
30
+
31
+ - `@atlaskit/editor-plugin-table/commands`
32
+ - `@atlaskit/editor-plugin-table/plugin-key`
33
+ - `@atlaskit/editor-plugin-table/ui/consts`
34
+ - `@atlaskit/editor-plugins/table/ui/consts`
35
+ - `@atlaskit/editor-plugins/table/plugin-key`
36
+ - `@atlaskit/editor-plugins/table/commands`
37
+
38
+ ## Why?
39
+
40
+ These entry-points allow for dangerous practices by directly manipulating internal prosemirror
41
+ state.
42
+
43
+ This change should not affect most consumers as these should not be used.
44
+
45
+ ## How to update
46
+
47
+ Table state can be read and changed via the public plugin interface which is safe and well tested.
48
+
49
+ Example:
50
+
51
+ ```ts
52
+ // Table actions
53
+ editorApi?.table.actions.insertTable(...);
54
+
55
+ // Read the table state
56
+ const tableState = useSharedPluginStateWithSelector(editorApi, ['table'], ({ tableState }) => {
57
+ return { ... };
58
+ })
59
+ ```
60
+
61
+ - Updated dependencies
62
+
3
63
  ## 209.1.10
4
64
 
5
65
  ### Patch Changes
@@ -0,0 +1,103 @@
1
+ {
2
+ "extends": "../../../../tsconfig.entry-points.townsquare.json",
3
+ "compilerOptions": {
4
+ "declaration": true,
5
+ "target": "es5",
6
+ "outDir": "../../../../../townsquare/tsDist/@atlaskit__editor-core/app",
7
+ "rootDir": "../",
8
+ "composite": true
9
+ },
10
+ "include": [
11
+ "../src/**/*.ts",
12
+ "../src/**/*.tsx"
13
+ ],
14
+ "exclude": [
15
+ "../src/**/__tests__/*",
16
+ "../src/**/*.test.*",
17
+ "../src/**/test.*",
18
+ "../src/stories/*"
19
+ ],
20
+ "references": [
21
+ {
22
+ "path": "../../activity-provider/afm-townsquare/tsconfig.json"
23
+ },
24
+ {
25
+ "path": "../../../analytics/analytics-namespaced-context/afm-townsquare/tsconfig.json"
26
+ },
27
+ {
28
+ "path": "../../../analytics/analytics-next/afm-townsquare/tsconfig.json"
29
+ },
30
+ {
31
+ "path": "../../../design-system/button/afm-townsquare/tsconfig.json"
32
+ },
33
+ {
34
+ "path": "../../../design-system/css/afm-townsquare/tsconfig.json"
35
+ },
36
+ {
37
+ "path": "../../editor-json-transformer/afm-townsquare/tsconfig.json"
38
+ },
39
+ {
40
+ "path": "../../editor-performance-metrics/afm-townsquare/tsconfig.json"
41
+ },
42
+ {
43
+ "path": "../../editor-plugin-quick-insert/afm-townsquare/tsconfig.json"
44
+ },
45
+ {
46
+ "path": "../../editor-plugin-user-preferences/afm-townsquare/tsconfig.json"
47
+ },
48
+ {
49
+ "path": "../../editor-plugins/afm-townsquare/tsconfig.json"
50
+ },
51
+ {
52
+ "path": "../../editor-shared-styles/afm-townsquare/tsconfig.json"
53
+ },
54
+ {
55
+ "path": "../../../elements/emoji/afm-townsquare/tsconfig.json"
56
+ },
57
+ {
58
+ "path": "../../../design-system/icon/afm-townsquare/tsconfig.json"
59
+ },
60
+ {
61
+ "path": "../../../design-system/link/afm-townsquare/tsconfig.json"
62
+ },
63
+ {
64
+ "path": "../../../media/media-card/afm-townsquare/tsconfig.json"
65
+ },
66
+ {
67
+ "path": "../../../elements/mention/afm-townsquare/tsconfig.json"
68
+ },
69
+ {
70
+ "path": "../../../platform/feature-flags/afm-townsquare/tsconfig.json"
71
+ },
72
+ {
73
+ "path": "../../../platform/feature-flags-react/afm-townsquare/tsconfig.json"
74
+ },
75
+ {
76
+ "path": "../../../react-ufo/atlaskit/afm-townsquare/tsconfig.json"
77
+ },
78
+ {
79
+ "path": "../../../elements/task-decision/afm-townsquare/tsconfig.json"
80
+ },
81
+ {
82
+ "path": "../../tmp-editor-statsig/afm-townsquare/tsconfig.json"
83
+ },
84
+ {
85
+ "path": "../../../design-system/tokens/afm-townsquare/tsconfig.json"
86
+ },
87
+ {
88
+ "path": "../../../design-system/tooltip/afm-townsquare/tsconfig.json"
89
+ },
90
+ {
91
+ "path": "../../../design-system/width-detector/afm-townsquare/tsconfig.json"
92
+ },
93
+ {
94
+ "path": "../../editor-common/afm-townsquare/tsconfig.json"
95
+ },
96
+ {
97
+ "path": "../../../linking-platform/link-provider/afm-townsquare/tsconfig.json"
98
+ },
99
+ {
100
+ "path": "../../../media/media-core/afm-townsquare/tsconfig.json"
101
+ }
102
+ ]
103
+ }
@@ -82,7 +82,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
82
82
  * @returns a full featured preset configured according to the provided props - basis for create-plugins-list
83
83
  */
84
84
  function createUniversalPresetInternal(_ref) {
85
- var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$media6, _props$media7, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _initialPluginConfigu, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
85
+ var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$media6, _props$media7, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
86
86
  var appearance = _ref.appearance,
87
87
  props = _ref.props,
88
88
  featureFlags = _ref.featureFlags,
@@ -148,8 +148,7 @@ function createUniversalPresetInternal(_ref) {
148
148
  profilecardProvider: (_props$mention3 = props.mention) === null || _props$mention3 === void 0 ? void 0 : _props$mention3.profilecardProvider,
149
149
  mentionProvider: props.mentionProvider
150
150
  }, initialPluginConfiguration === null || initialPluginConfiguration === void 0 ? void 0 : initialPluginConfiguration.mentionsPlugin)], Boolean(props.mentionProvider)).maybeAdd([_emoji.emojiPlugin, {
151
- emojiProvider: props.emojiProvider,
152
- emojiNodeDataProvider: initialPluginConfiguration === null || initialPluginConfiguration === void 0 || (_initialPluginConfigu = initialPluginConfiguration.emoji) === null || _initialPluginConfigu === void 0 ? void 0 : _initialPluginConfigu.emojiNodeDataProvider
151
+ emojiProvider: props.emojiProvider
153
152
  }], Boolean(props.emojiProvider)).maybeAdd([_table.tablesPlugin, {
154
153
  tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : props.allowTables,
155
154
  dragAndDropEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tableDragAndDrop) && (isFullPage || (isComment || isChromeless) && (0, _experiments.editorExperiment)('support_table_in_comment', true, {
@@ -23,6 +23,7 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
23
23
  var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
24
24
  var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
25
25
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
26
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
26
27
  var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
27
28
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
28
29
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -285,7 +286,8 @@ var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEdit
285
286
  // This will cause the content area to have content overflowing the container
286
287
  // so need to set overflow-y as auto to make sure the content area is scrollable
287
288
  overflowY: 'auto'
288
- }) : null
289
+ }) : null,
290
+ isScrollable: maxHeight && (0, _platformFeatureFlags.fg)('platform_editor_editor_container_a11y_focus') ? true : undefined
289
291
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
290
292
  ,
291
293
  className: (0, _classnames.default)('ak-editor-content-area', {
@@ -168,9 +168,9 @@ var akEditorBreakpointForSmallDevice = "1266px";
168
168
  // Under editor experiment platform_editor_core_static_emotion
169
169
  // If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
170
170
  var legacyContentStyles = function legacyContentStyles(props) {
171
- return (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t", "\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n /* Switch between the two icons based on the visual refresh feature gate */\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? (0, _react2.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t\t\t\t@container editor-area (max-width: ", "px) {\n\t\t\t\t\t--ak-editor--large-gutter-padding: ", "px;\n\t\t\t\t}\n\t\t\t"])), _editorSharedStyles.akEditorFullPageNarrowBreakout, _editorSharedStyles.akEditorGutterPaddingReduced) : null, (0, _editorSharedStyles.editorFontSize)({
171
+ return (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t", "\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n /* Switch between the two icons based on the visual refresh feature gate */\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? (0, _react2.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t\t\t\t@container editor-area (max-width: ", "px) {\n\t\t\t\t\t--ak-editor--large-gutter-padding: ", "px;\n\t\t\t\t}\n\t\t\t"])), _editorSharedStyles.akEditorFullPageNarrowBreakout, _editorSharedStyles.akEditorGutterPaddingReduced) : null, (0, _editorSharedStyles.editorFontSize)({
172
172
  theme: props.theme
173
- }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", firstFloatingToolbarButtonStyles, _styles5.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') && _styles5.placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, mentionNodeStyles, (0, _platformFeatureFlags.fg)('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_improvements_1') ? mentionsSelectionStylesWithSearchMatch : mentionSelectionStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_improvements_1') ? _styles3.findReplaceStylesNewNoImportant : _styles3.findReplaceStylesNew : _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _tasksAndDecisions.taskItemStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithVisualRefresh, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithoutVisualRefresh, (0, _status.statusStyles)(), (0, _status.statusNodeStyles)(), (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _styles.getSmartCardSharedStyles)(), _date.dateStyles, _date.dateNodeStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), (0, _styles.pragmaticStylesLayoutFirstNodeResizeHandleFix)(), (0, _styles.pragmaticResizerStylesForTooltip)(), (0, _aiPanels.aiPanelStyles)(props.colorMode), firstBlockNodeStylesNew, (0, _platformFeatureFlags.fg)('platform_editor_vanilla_codebidi_warning') && _codeBidiWarning.codeBidiWarningStyles, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
173
+ }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", firstFloatingToolbarButtonStyles, _styles5.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') && _styles5.placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, mentionNodeStyles, (0, _platformFeatureFlags.fg)('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_improvements_1') ? mentionsSelectionStylesWithSearchMatch : mentionSelectionStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_improvements_1') ? _styles3.findReplaceStylesNewNoImportant : _styles3.findReplaceStylesNew : _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _tasksAndDecisions.taskItemStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithVisualRefresh, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithoutVisualRefresh, (0, _status.statusStyles)(), (0, _status.statusNodeStyles)(), (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _styles.getSmartCardSharedStyles)(), _date.dateStyles, _date.dateNodeStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), (0, _styles.pragmaticStylesLayoutFirstNodeResizeHandleFix)(), (0, _styles.pragmaticResizerStylesForTooltip)(), (0, _styles.pragmaticResizerStylesWithReducedEditorGutter)(), (0, _aiPanels.aiPanelStyles)(props.colorMode), firstBlockNodeStylesNew, (0, _platformFeatureFlags.fg)('platform_editor_vanilla_codebidi_warning') && _codeBidiWarning.codeBidiWarningStyles, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
174
174
  };
175
175
  var createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
176
176
  return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
@@ -198,6 +198,10 @@ var createEditorContentStyle = exports.createEditorContentStyle = function creat
198
198
  css: [memoizedStyle, styles],
199
199
  "data-editor-scroll-container": "true",
200
200
  "data-testid": "editor-content-container"
201
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
202
+ ,
203
+ tabIndex: (0, _platformFeatureFlags.fg)('platform_editor_editor_container_a11y_focus') ? 0 : undefined,
204
+ role: (0, _platformFeatureFlags.fg)('platform_editor_editor_container_a11y_focus') ? 'region' : undefined
201
205
  }, children);
202
206
  }
203
207
  return (0, _react2.jsx)("div", {
@@ -9,7 +9,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
9
9
  var _react = require("@emotion/react");
10
10
  var _styles = require("@atlaskit/editor-common/styles");
11
11
  var _types = require("@atlaskit/editor-plugins/table/types");
12
- var _consts = require("@atlaskit/editor-plugins/table/ui/consts");
13
12
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
14
13
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
14
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -77,5 +76,5 @@ var layoutResponsiveStyles = function layoutResponsiveStyles(viewMode) {
77
76
 
78
77
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
79
78
  var layoutStyles = exports.layoutStyles = function layoutStyles(viewMode) {
80
- return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t/* Ignored via go/ees007\n\t\t\tTODO: Migrate away from gridSize\n\t\t\tRecommendation: Replace directly with 7px */\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tposition: relative;\n\n\t\t\t\tmin-width: 0;\n\t\t\t\t/* disable 4 borders when in view mode and advanced layouts is on */\n\t\t\t\tborder: ", "px\n\t\t\t\t\tsolid ", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\n\t\t/* styles to support borders for layout */\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", "\n\n\t/* hide separator when element is dragging on top of a layout column */\n\t[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before {\n\t\tdisplay: none;\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n"])), layoutSectionStyles(), "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0), _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' || (0, _experiments.editorExperiment)('advanced_layouts', true) ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), (0, _experiments.editorExperiment)('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode), (0, _experiments.editorExperiment)('advanced_layouts', true) && layoutResponsiveStyles(viewMode), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode, (0, _experiments.editorExperiment)('advanced_layouts', false) && (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", _editorSharedStyles.akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
79
+ return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t/* Ignored via go/ees007\n\t\t\tTODO: Migrate away from gridSize\n\t\t\tRecommendation: Replace directly with 7px */\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tposition: relative;\n\n\t\t\t\tmin-width: 0;\n\t\t\t\t/* disable 4 borders when in view mode and advanced layouts is on */\n\t\t\t\tborder: ", "px\n\t\t\t\t\tsolid ", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\n\t\t/* styles to support borders for layout */\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", "\n\n\t/* hide separator when element is dragging on top of a layout column */\n\t[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before {\n\t\tdisplay: none;\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n"])), layoutSectionStyles(), "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0), _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' || (0, _experiments.editorExperiment)('advanced_layouts', true) ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), (0, _experiments.editorExperiment)('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode), (0, _experiments.editorExperiment)('advanced_layouts', true) && layoutResponsiveStyles(viewMode), _types.TableCssClassName.TABLE_CONTAINER, "var(--ds-space-025, 2px)", (0, _experiments.editorExperiment)('advanced_layouts', false) && (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", _editorSharedStyles.akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
81
80
  };
@@ -303,7 +303,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
303
303
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
304
304
  _resizerStyles.pragmaticStylesLayoutFirstNodeResizeHandleFix, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release') &&
305
305
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
306
- _resizerStyles.pragmaticResizerStylesForTooltip,
306
+ _resizerStyles.pragmaticResizerStylesForTooltip, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && ((0, _experiments.editorExperiment)('advanced_layouts', true) || (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true)) &&
307
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
308
+ _resizerStyles.pragmaticResizerStylesWithReducedEditorGutter,
307
309
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
308
310
  _aiPanel.aiPanelBaseStyles,
309
311
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -367,6 +369,10 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
367
369
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
368
370
  ,
369
371
  style: style
372
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
373
+ ,
374
+ tabIndex: isScrollable && (0, _platformFeatureFlags.fg)('platform_editor_editor_container_a11y_focus') ? 0 : undefined,
375
+ role: isScrollable && (0, _platformFeatureFlags.fg)('platform_editor_editor_container_a11y_focus') ? 'region' : undefined
370
376
  }, children);
371
377
  });
372
378
  var _default = exports.default = EditorContentContainer;
@@ -19,7 +19,7 @@ var akEditorFullWidthLayoutWidth = 1800;
19
19
  // The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
20
20
  var akEditorBreakpointForSmallDevice = "1266px";
21
21
  var akEditorGutterPaddingReduced = 24;
22
- var akEditorFullPageNarrowBreakout = 768;
22
+ var akEditorFullPageNarrowBreakout = 600;
23
23
 
24
24
  // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
25
25
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
@@ -4,9 +4,10 @@ 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.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.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
+ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
10
11
  // eslint-disable-line
11
12
 
12
13
  var resizerItemClassName = exports.resizerItemClassName = 'resizer-item';
@@ -443,4 +444,28 @@ var pragmaticResizerStylesNew = exports.pragmaticResizerStylesNew = (0, _react.c
443
444
  top: "var(--ds-space-150, 12px)",
444
445
  bottom: "var(--ds-space-150, 12px)"
445
446
  }
446
- });
447
+ });
448
+
449
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
450
+ var pragmaticResizerStylesWithReducedEditorGutter = exports.pragmaticResizerStylesWithReducedEditorGutter = (0, _react.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
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="expand"]), &:has([data-prosemirror-node-name="layoutSection"])': {
455
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
456
+ '> .pm-breakout-resize-handle-container': {
457
+ opacity: 0,
458
+ visibility: 'hidden'
459
+ }
460
+ },
461
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
462
+ '&:has([data-prosemirror-node-name="layoutSection"])': (0, _defineProperty2.default)({}, ".".concat(resizerItemClassName), {
463
+ willChange: 'width',
464
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
465
+ '&:hover, &.display-handle': (0, _defineProperty2.default)({}, "& > .".concat(handleWrapperClass, " > .").concat(resizerHandleClassName), {
466
+ visibility: 'hidden',
467
+ opacity: 0
468
+ })
469
+ })
470
+ }
471
+ }));
@@ -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 = "209.1.10";
8
+ var version = exports.version = "209.1.11";
@@ -78,7 +78,7 @@ export default function createUniversalPresetInternal({
78
78
  prevAppearance,
79
79
  createAnalyticsEvent
80
80
  }) {
81
- var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$media6, _props$media7, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _initialPluginConfigu, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
81
+ var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$media6, _props$media7, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
82
82
  const isComment = appearance === 'comment';
83
83
  const isChromeless = appearance === 'chromeless';
84
84
  const isFullPage = fullPageCheck(appearance);
@@ -140,8 +140,7 @@ export default function createUniversalPresetInternal({
140
140
  mentionProvider: props.mentionProvider,
141
141
  ...(initialPluginConfiguration === null || initialPluginConfiguration === void 0 ? void 0 : initialPluginConfiguration.mentionsPlugin)
142
142
  }], Boolean(props.mentionProvider)).maybeAdd([emojiPlugin, {
143
- emojiProvider: props.emojiProvider,
144
- emojiNodeDataProvider: initialPluginConfiguration === null || initialPluginConfiguration === void 0 ? void 0 : (_initialPluginConfigu = initialPluginConfiguration.emoji) === null || _initialPluginConfigu === void 0 ? void 0 : _initialPluginConfigu.emojiNodeDataProvider
143
+ emojiProvider: props.emojiProvider
145
144
  }], Boolean(props.emojiProvider)).maybeAdd([tablesPlugin, {
146
145
  tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : props.allowTables,
147
146
  dragAndDropEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tableDragAndDrop) && (isFullPage || (isComment || isChromeless) && editorExperiment('support_table_in_comment', true, {
@@ -18,6 +18,7 @@ import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-me
18
18
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
19
19
  import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
20
20
  import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
21
+ import { fg } from '@atlaskit/platform-feature-flags';
21
22
  import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
22
23
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
23
24
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -287,7 +288,8 @@ export const CommentEditorWithIntl = props => {
287
288
  // This will cause the content area to have content overflowing the container
288
289
  // so need to set overflow-y as auto to make sure the content area is scrollable
289
290
  overflowY: 'auto'
290
- }) : null
291
+ }) : null,
292
+ isScrollable: maxHeight && fg('platform_editor_editor_container_a11y_focus') ? true : undefined
291
293
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
292
294
  ,
293
295
  className: classnames('ak-editor-content-area', {
@@ -17,7 +17,7 @@ import { EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-co
17
17
  import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
18
18
  import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
19
19
  import { gapCursorStyles } from '@atlaskit/editor-common/selection';
20
- import { CodeBlockSharedCssClassName, MediaSharedClassNames, SmartCardSharedCssClassName, annotationSharedStyles, backgroundColorStyles, blockMarksSharedStyles, codeBlockInListSafariFix, codeMarkSharedStyles, dateSharedStyle, embedCardStyles, expandClassNames, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, linkSharedStyle, listsSharedStyles, paragraphSharedStyles, resizerStyles, pragmaticResizerStyles, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, ruleSharedStyles, shadowSharedStyle, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
20
+ import { CodeBlockSharedCssClassName, MediaSharedClassNames, SmartCardSharedCssClassName, annotationSharedStyles, backgroundColorStyles, blockMarksSharedStyles, codeBlockInListSafariFix, codeMarkSharedStyles, dateSharedStyle, embedCardStyles, expandClassNames, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, linkSharedStyle, listsSharedStyles, paragraphSharedStyles, resizerStyles, pragmaticResizerStyles, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, pragmaticResizerStylesWithReducedEditorGutter, ruleSharedStyles, shadowSharedStyle, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
21
21
  import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
22
22
  import { findReplaceStyles, findReplaceStylesNew, findReplaceStylesNewNoImportant } from '@atlaskit/editor-plugins/find-replace/styles';
23
23
  import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
@@ -468,6 +468,7 @@ const legacyContentStyles = props => css`
468
468
  ${pragmaticResizerStyles()}
469
469
  ${pragmaticStylesLayoutFirstNodeResizeHandleFix()}
470
470
  ${pragmaticResizerStylesForTooltip()}
471
+ ${pragmaticResizerStylesWithReducedEditorGutter()}
471
472
  ${aiPanelStyles(props.colorMode)}
472
473
  ${firstBlockNodeStylesNew}
473
474
  ${fg('platform_editor_vanilla_codebidi_warning') && codeBidiWarningStyles}
@@ -566,6 +567,10 @@ export const createEditorContentStyle = styles => {
566
567
  css: [memoizedStyle, styles],
567
568
  "data-editor-scroll-container": "true",
568
569
  "data-testid": "editor-content-container"
570
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
571
+ ,
572
+ tabIndex: fg('platform_editor_editor_container_a11y_focus') ? 0 : undefined,
573
+ role: fg('platform_editor_editor_container_a11y_focus') ? 'region' : undefined
569
574
  }, children);
570
575
  }
571
576
  return jsx("div", {
@@ -9,7 +9,6 @@
9
9
  import { css } from '@emotion/react';
10
10
  import { columnLayoutResponsiveSharedStyle, columnLayoutSharedStyle, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '@atlaskit/editor-common/styles';
11
11
  import { TableCssClassName } from '@atlaskit/editor-plugins/table/types';
12
- import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
13
12
  import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
14
13
  import { fg } from '@atlaskit/platform-feature-flags';
15
14
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -377,7 +376,7 @@ export const layoutStyles = viewMode => css`
377
376
  .fabric-editor--full-width-mode .ProseMirror {
378
377
  [data-layout-section] {
379
378
  .${TableCssClassName.TABLE_CONTAINER} {
380
- margin: 0 ${tableMarginFullWidthMode}px;
379
+ margin: 0 ${"var(--ds-space-025, 2px)"}px;
381
380
  }
382
381
  }
383
382
  }
@@ -48,7 +48,7 @@ import { mentionsStyles, mentionsSelectionStyles, mentionNodeStyles, mentionsSty
48
48
  import { panelStyles, panelStylesMixin, panelStylesMixin_fg_platform_editor_add_border_for_nested_panel, panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes, panelViewStyles } from './styles/panelStyles';
49
49
  import { paragraphStylesOld, paragraphStylesUGCRefreshed } from './styles/paragraphStyles';
50
50
  import { placeholderOverflowStyles, placeholderStyles, placeholderTextStyles, placeholderTextStylesMixin_fg_platform_editor_system_fake_text_highlight_colour, placeholderWrapStyles } from './styles/placeholderStyles';
51
- import { pragmaticResizerStyles, pragmaticResizerStylesNew, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, resizerStyles } from './styles/resizerStyles';
51
+ import { pragmaticResizerStyles, pragmaticResizerStylesNew, pragmaticStylesLayoutFirstNodeResizeHandleFix, pragmaticResizerStylesForTooltip, pragmaticResizerStylesWithReducedEditorGutter, resizerStyles } from './styles/resizerStyles';
52
52
  import { ruleStyles } from './styles/rule';
53
53
  import { scrollbarStyles } from './styles/scrollbarStyles';
54
54
  import { hideCursorWhenHideSelectionStyles, hideSelectionStyles, selectedNodeStyles } from './styles/selectionStyles';
@@ -298,7 +298,9 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
298
298
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
299
299
  pragmaticStylesLayoutFirstNodeResizeHandleFix, expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) && fg('platform_editor_breakout_resizing_hello_release') &&
300
300
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
301
- pragmaticResizerStylesForTooltip,
301
+ pragmaticResizerStylesForTooltip, expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && (editorExperiment('advanced_layouts', true) || expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true)) &&
302
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
303
+ pragmaticResizerStylesWithReducedEditorGutter,
302
304
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
303
305
  aiPanelBaseStyles,
304
306
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
@@ -362,6 +364,10 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
362
364
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
363
365
  ,
364
366
  style: style
367
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
368
+ ,
369
+ tabIndex: isScrollable && fg('platform_editor_editor_container_a11y_focus') ? 0 : undefined,
370
+ role: isScrollable && fg('platform_editor_editor_container_a11y_focus') ? 'region' : undefined
365
371
  }, children);
366
372
  });
367
373
  export default EditorContentContainer;
@@ -11,7 +11,7 @@ const akEditorFullWidthLayoutWidth = 1800;
11
11
  // The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
12
12
  const akEditorBreakpointForSmallDevice = `1266px`;
13
13
  const akEditorGutterPaddingReduced = 24;
14
- const akEditorFullPageNarrowBreakout = 768;
14
+ const akEditorFullPageNarrowBreakout = 600;
15
15
 
16
16
  // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
17
17
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
@@ -1,5 +1,6 @@
1
1
  import { css } from '@emotion/react'; // eslint-disable-line
2
2
 
3
+ import { akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
3
4
  export const resizerItemClassName = 'resizer-item';
4
5
  export const resizerHoverZoneClassName = 'resizer-hover-zone';
5
6
  export const resizerExtendedZone = 'resizer-is-extended';
@@ -488,4 +489,38 @@ export const pragmaticResizerStylesNew = css({
488
489
  top: "var(--ds-space-150, 12px)",
489
490
  bottom: "var(--ds-space-150, 12px)"
490
491
  }
492
+ });
493
+
494
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
495
+ export const pragmaticResizerStylesWithReducedEditorGutter = css({
496
+ /* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */
497
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
498
+ [`@container editor-area (max-width: ${akEditorFullPageNarrowBreakout}px)`]: {
499
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
500
+ '.fabric-editor-breakout-mark': {
501
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
502
+ '&:has([data-prosemirror-node-name="expand"]), &:has([data-prosemirror-node-name="layoutSection"])': {
503
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
504
+ '> .pm-breakout-resize-handle-container': {
505
+ opacity: 0,
506
+ visibility: 'hidden'
507
+ }
508
+ },
509
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
510
+ '&:has([data-prosemirror-node-name="layoutSection"])': {
511
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
512
+ [`.${resizerItemClassName}`]: {
513
+ willChange: 'width',
514
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
515
+ '&:hover, &.display-handle': {
516
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
517
+ [`& > .${handleWrapperClass} > .${resizerHandleClassName}`]: {
518
+ visibility: 'hidden',
519
+ opacity: 0
520
+ }
521
+ }
522
+ }
523
+ }
524
+ }
525
+ }
491
526
  });
@@ -1,2 +1,2 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "209.1.10";
2
+ export const version = "209.1.11";
@@ -75,7 +75,7 @@ import { createDefaultPreset } from './default';
75
75
  * @returns a full featured preset configured according to the provided props - basis for create-plugins-list
76
76
  */
77
77
  export default function createUniversalPresetInternal(_ref) {
78
- var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$media6, _props$media7, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _initialPluginConfigu, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
78
+ var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$media6, _props$media7, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
79
79
  var appearance = _ref.appearance,
80
80
  props = _ref.props,
81
81
  featureFlags = _ref.featureFlags,
@@ -141,8 +141,7 @@ export default function createUniversalPresetInternal(_ref) {
141
141
  profilecardProvider: (_props$mention3 = props.mention) === null || _props$mention3 === void 0 ? void 0 : _props$mention3.profilecardProvider,
142
142
  mentionProvider: props.mentionProvider
143
143
  }, initialPluginConfiguration === null || initialPluginConfiguration === void 0 ? void 0 : initialPluginConfiguration.mentionsPlugin)], Boolean(props.mentionProvider)).maybeAdd([emojiPlugin, {
144
- emojiProvider: props.emojiProvider,
145
- emojiNodeDataProvider: initialPluginConfiguration === null || initialPluginConfiguration === void 0 || (_initialPluginConfigu = initialPluginConfiguration.emoji) === null || _initialPluginConfigu === void 0 ? void 0 : _initialPluginConfigu.emojiNodeDataProvider
144
+ emojiProvider: props.emojiProvider
146
145
  }], Boolean(props.emojiProvider)).maybeAdd([tablesPlugin, {
147
146
  tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : props.allowTables,
148
147
  dragAndDropEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tableDragAndDrop) && (isFullPage || (isComment || isChromeless) && editorExperiment('support_table_in_comment', true, {