@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.
- package/CHANGELOG.md +60 -0
- package/afm-townsquare/tsconfig.json +103 -0
- package/dist/cjs/presets/universal.js +2 -3
- package/dist/cjs/ui/Appearance/Comment/Comment.js +3 -1
- package/dist/cjs/ui/ContentStyles/index.js +6 -2
- package/dist/cjs/ui/ContentStyles/layout.js +1 -2
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +7 -1
- package/dist/cjs/ui/EditorContentContainer/styles/baseStyles.js +1 -1
- package/dist/cjs/ui/EditorContentContainer/styles/resizerStyles.js +27 -2
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/presets/universal.js +2 -3
- package/dist/es2019/ui/Appearance/Comment/Comment.js +3 -1
- package/dist/es2019/ui/ContentStyles/index.js +6 -1
- package/dist/es2019/ui/ContentStyles/layout.js +1 -2
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +8 -2
- package/dist/es2019/ui/EditorContentContainer/styles/baseStyles.js +1 -1
- package/dist/es2019/ui/EditorContentContainer/styles/resizerStyles.js +35 -0
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/presets/universal.js +2 -3
- package/dist/esm/ui/Appearance/Comment/Comment.js +3 -1
- package/dist/esm/ui/ContentStyles/index.js +7 -3
- package/dist/esm/ui/ContentStyles/layout.js +1 -2
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +8 -2
- package/dist/esm/ui/EditorContentContainer/styles/baseStyles.js +1 -1
- package/dist/esm/ui/EditorContentContainer/styles/resizerStyles.js +26 -1
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/create-editor/create-universal-preset.d.ts +121 -121
- package/dist/types/presets/universal.d.ts +124 -133
- package/dist/types/presets/useUniversalPreset.d.ts +121 -121
- package/dist/types/ui/EditorContentContainer/styles/resizerStyles.d.ts +1 -0
- package/dist/types-ts4.5/create-editor/create-universal-preset.d.ts +121 -121
- package/dist/types-ts4.5/presets/universal.d.ts +124 -133
- package/dist/types-ts4.5/presets/useUniversalPreset.d.ts +121 -121
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/resizerStyles.d.ts +1 -0
- 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,
|
|
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,
|
|
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 =
|
|
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
|
+
}));
|
|
@@ -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,
|
|
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 ${
|
|
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 =
|
|
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.
|
|
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,
|
|
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, {
|