@atlaskit/editor-core 201.5.0 → 202.0.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 (22) hide show
  1. package/CHANGELOG.md +84 -0
  2. package/dist/cjs/presets/universal.js +7 -6
  3. package/dist/cjs/ui/ContentStyles/extension.js +1 -1
  4. package/dist/cjs/ui/ContentStyles/layout.js +18 -8
  5. package/dist/cjs/version-wrapper.js +1 -1
  6. package/dist/es2019/presets/universal.js +7 -5
  7. package/dist/es2019/ui/ContentStyles/extension.js +33 -0
  8. package/dist/es2019/ui/ContentStyles/layout.js +92 -12
  9. package/dist/es2019/version-wrapper.js +1 -1
  10. package/dist/esm/presets/universal.js +7 -6
  11. package/dist/esm/ui/ContentStyles/extension.js +1 -1
  12. package/dist/esm/ui/ContentStyles/layout.js +19 -9
  13. package/dist/esm/version-wrapper.js +1 -1
  14. package/dist/types/create-editor/create-universal-preset.d.ts +2 -2
  15. package/dist/types/presets/default.d.ts +4 -4
  16. package/dist/types/presets/universal.d.ts +2 -6
  17. package/dist/types/presets/useUniversalPreset.d.ts +2 -2
  18. package/dist/types-ts4.5/create-editor/create-universal-preset.d.ts +2 -2
  19. package/dist/types-ts4.5/presets/default.d.ts +4 -4
  20. package/dist/types-ts4.5/presets/universal.d.ts +2 -6
  21. package/dist/types-ts4.5/presets/useUniversalPreset.d.ts +2 -2
  22. package/package.json +11 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,89 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 202.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#162935](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162935)
8
+ [`48011dc10467a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/48011dc10467a) -
9
+ Removed `tablesPlugin` property and its child properties of `tableResizingEnabled` and
10
+ `isTableAlignmentEnabled` from `InitialPluginConfiguration`, and added these options as part of
11
+ tablePlugin.tableOptions configuration instead. The new options for each are allowTableResizing
12
+ and allowTableAlignment respectively and can be configured on the Editor component via
13
+ `allowTables` or via preset configurations.
14
+
15
+ **Warning**: Both these features require ADF storage to persist these changes.
16
+
17
+ ### WHY?
18
+
19
+ To make these table features available for consumers who have no adopted composable editor and
20
+ want to enable table resizing and table alignment features
21
+
22
+ ### WHAT changed?
23
+
24
+ **Removed** `InitialPluginConfiguration` type: Removed `tablePlugin` and child properties -
25
+ `isTableAlignmentEnabled`, `tableResizingEnabled`
26
+
27
+ **Added** `TableOptions` type: Added `allowTableResizing` and `allowTableAlignment`
28
+
29
+ ### HOW to resolve?
30
+
31
+ Move the options from `initialPluginConfiguration` to `tableOptions`
32
+
33
+ Example:
34
+
35
+ Before
36
+
37
+ ```ts
38
+ const universalPreset = useUniversalPreset([
39
+ tablePlugin,
40
+ { tableResizingEnabled: true, isTableAlignmentEnabled: true, tableOptions: {} },
41
+ ]);
42
+ ```
43
+
44
+ After
45
+
46
+ ```ts
47
+ const universalPreset = useUniversalPreset([
48
+ tablePlugin,
49
+ { tableOptions: { allowTableResizing: true, allowTableAlignment: true } },
50
+ ]);
51
+ ```
52
+
53
+ Before
54
+
55
+ ```ts
56
+ return (
57
+ <Editor
58
+ allowTables={{advanced: true}}
59
+ initialPluginConfiguration={{
60
+ tablesPlugin: {
61
+ tableResizingEnabled: true, isTableAlignmentEnabled: true,
62
+ }
63
+ }}
64
+ />
65
+ )
66
+ ```
67
+
68
+ After
69
+
70
+ ```ts
71
+ return (
72
+ <Editor
73
+ allowTables={{advanced: true, allowTableResizing: enabled, allowTableAlignment: true}}
74
+
75
+ />
76
+ )
77
+ ```
78
+
79
+ ## 201.5.1
80
+
81
+ ### Patch Changes
82
+
83
+ - [#163126](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163126)
84
+ [`bae044582a28f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bae044582a28f) -
85
+ [ux] ED-25055: Updated layout to use separator
86
+
3
87
  ## 201.5.0
4
88
 
5
89
  ### Minor Changes
package/dist/cjs/presets/universal.js CHANGED
@@ -149,8 +149,11 @@ function createUniversalPresetInternal(_ref) {
149
149
  }, initialPluginConfiguration === null || initialPluginConfiguration === void 0 ? void 0 : initialPluginConfiguration.mentionsPlugin)], Boolean(props.mentionProvider)).maybeAdd([_emoji.emojiPlugin, {
150
150
  emojiProvider: props.emojiProvider,
151
151
  emojiNodeDataProvider: initialPluginConfiguration === null || initialPluginConfiguration === void 0 || (_initialPluginConfigu = initialPluginConfiguration.emoji) === null || _initialPluginConfigu === void 0 ? void 0 : _initialPluginConfigu.emojiNodeDataProvider
152
- }], Boolean(props.emojiProvider)).maybeAdd([_table.tablesPlugin, _objectSpread({
153
- tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : props.allowTables,
152
+ }], Boolean(props.emojiProvider)).maybeAdd([_table.tablesPlugin, {
153
+ tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : _objectSpread({
154
+ allowTableResizing: extendedTableFeaturesForComment,
155
+ allowTableAlignment: extendedTableFeaturesForComment
156
+ }, props.allowTables),
154
157
  dragAndDropEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tableDragAndDrop) && (isFullPage || (isComment || isChromeless) && (0, _experiments.editorExperiment)('support_table_in_comment', true, {
155
158
  exposure: true
156
159
  })) || extendedTableFeaturesForComment,
@@ -163,10 +166,8 @@ function createUniversalPresetInternal(_ref) {
163
166
  getEditorFeatureFlags: getEditorFeatureFlags,
164
167
  isNewColumnResizingEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tableNewColumnResizing) && isFullPage,
165
168
  isCommentEditor: isComment,
166
- isChromelessEditor: isChromeless,
167
- tableResizingEnabled: extendedTableFeaturesForComment,
168
- isTableAlignmentEnabled: extendedTableFeaturesForComment
169
- }, initialPluginConfiguration === null || initialPluginConfiguration === void 0 ? void 0 : initialPluginConfiguration.tablesPlugin)], Boolean(props.allowTables)).maybeAdd([_tasksAndDecisions.tasksAndDecisionsPlugin, _objectSpread({
169
+ isChromelessEditor: isChromeless
170
+ }], Boolean(props.allowTables)).maybeAdd([_tasksAndDecisions.tasksAndDecisionsPlugin, _objectSpread({
170
171
  allowNestedTasks: props.allowNestedTasks,
171
172
  consumeTabs: isFullPage,
172
173
  useLongPressSelection: false,
package/dist/cjs/ui/ContentStyles/extension.js CHANGED
@@ -10,7 +10,7 @@ var _react = require("@emotion/react");
10
10
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
11
11
  var _templateObject, _templateObject2; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
12
12
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
13
- var extensionLabelStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t&.danger > span > div > .extension-label {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\topacity: 1;\n\t\tbox-shadow: none;\n\t}\n\n\t&:not(.danger).", " > span > div > .extension-label {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\topacity: 1;\n\t\tbox-shadow: none;\n\t}\n\n\t// Targets the icon for bodied macro styling in button label\n\t&.danger > span > div > .extension-label > span {\n\t\tdisplay: inline;\n\t}\n\n\t&:not(.danger).", " > span > div .extension-label > span {\n\t\tdisplay: inline;\n\t}\n"])), "var(--ds-background-accent-red-subtler, #FFD5D2)", "var(--ds-text-danger, #AE2E24)", _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-background-selected, #E9F2FF)", "var(--ds-text-selected, #0C66E4)", _editorSharedStyles.akEditorSelectedNodeClassName);
13
+ var extensionLabelStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t&.danger > span > div > .extension-label {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\topacity: 1;\n\t\tbox-shadow: none;\n\t}\n\n\t&:not(.danger).", " > span > div > .extension-label {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\topacity: 1;\n\t\tbox-shadow: none;\n\t}\n\n\t// Targets the icon for bodied macro styling in button label\n\t&.danger > span > div > .extension-label > span {\n\t\tdisplay: inline;\n\t}\n\n\t&:not(.danger).", " > span > div .extension-label > span {\n\t\tdisplay: inline;\n\t}\n\n\t// Bodied extension edit toggle styles\n\t&.danger.", " > span > .extension-edit-toggle-container {\n\t\topacity: 1;\n\t}\n\n\t&:not(.danger).", " > span > .extension-edit-toggle-container {\n\t\topacity: 1;\n\t}\n\n\t// .with-bodied-macro-live-page-styles class will only be added to bodied macros with the renderer mode gate enabled\n\t&:not(.danger).", "\n\t\t> span\n\t\t> div\n\t\t> .extension-label.with-bodied-macro-live-page-styles {\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t}\n\n\t&.danger.", "\n\t\t> span\n\t\t> div\n\t\t> .extension-label.with-bodied-macro-live-page-styles {\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t}\n\n\t&.danger.", "\n\t\t> span\n\t\t> .extension-edit-toggle-container\n\t\t> .extension-edit-toggle {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tbox-shadow: none;\n\t}\n"])), "var(--ds-background-accent-red-subtler, #FFD5D2)", "var(--ds-text-danger, #AE2E24)", _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-background-selected, #E9F2FF)", "var(--ds-text-selected, #0C66E4)", _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-selected, #0C66E4)", _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, #E2483D)", _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-background-accent-red-subtler, #FFD5D2)", "var(--ds-text-danger, #AE2E24)");
14
14
  var dangerOverlayStyles = (0, _react.css)({
15
15
  opacity: 0.3,
16
16
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
package/dist/cjs/ui/ContentStyles/layout.js CHANGED
@@ -25,7 +25,7 @@ var _consts = require("@atlaskit/editor-plugins/table/ui/consts");
25
25
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
26
26
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
27
27
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
28
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
28
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
29
29
  var isPreRelease2 = function isPreRelease2() {
30
30
  return (0, _experiments.editorExperiment)('advanced_layouts', true) || (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_pre_release_2');
31
31
  };
@@ -38,7 +38,7 @@ var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
38
38
  // TODO handle responsive
39
39
  var layoutColumnStyles = function layoutColumnStyles() {
40
40
  return isPreRelease2() ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
41
- (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> [data-layout-column] {\n\t\t\t\t\tmargin: 0 ", "px;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:first-of-type {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:last-of-type {\n\t\t\t\t\tmargin-right: 0;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column].", ":not(.danger) {\n\t\t\t\t\t", ";\n\t\t\t\t\tborder: ", ";\n\t\t\t\t}\n\t\t\t"])), _styles.LAYOUT_SECTION_MARGIN / 2, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorder) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
41
+ (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> [data-layout-column] {\n\t\t\t\t\tmargin: 0 ", "px;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:first-of-type {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:last-of-type {\n\t\t\t\t\tmargin-right: 0;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column].", ":not(.danger) {\n\t\t\t\t\t", ";\n\t\t\t\t\t/* layout column selection shorter after layout border has been removed */\n\t\t\t\t\t::before {\n\t\t\t\t\t\ttop: 12px;\n\t\t\t\t\t\theight: calc(100% - 24px);\n\t\t\t\t\t\twidth: calc(100% - 8px);\n\t\t\t\t\t\tleft: 4px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _styles.LAYOUT_SECTION_MARGIN / 2, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket])) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
42
42
  (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: ", "px;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth);
43
43
  };
44
44
  var layoutSectionStyles = function layoutSectionStyles() {
@@ -49,14 +49,24 @@ var layoutSectionStyles = function layoutSectionStyles() {
49
49
 
50
50
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
51
51
  var layoutBorderStyles = function layoutBorderStyles(viewMode) {
52
- return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t/* Shows the border when cursor is inside a layout */\n\t&.selected [data-layout-column],\n\t&:hover [data-layout-column] {\n\t\tborder: ", "px solid ", ";\n\t}\n\n\t&.selected.danger [data-layout-column] {\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t}\n\n\t&.", ":not(.danger) {\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t}\n\t}\n"])), viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, isPreRelease2() ?
53
- /* SelectionStyle.Border adds extra ::after content which clashes with hover zone for layout columns and is not needed for layout anyway
54
- see platform/packages/editor/editor-shared-styles/src/selection/utils.ts(~L43)
55
- */
56
- "border: ".concat(_editorSharedStyles.akEditorSelectedBorder, ";\n\t\t\t").concat((0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket])) : "\n\t\t\t\t".concat((0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket])));
52
+ return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t/* Shows the border when cursor is inside a layout */\n\t&.selected [data-layout-column],\n\t&:hover [data-layout-column] {\n\t\tborder: ", "px solid ", ";\n\t}\n\n\t&.selected.danger [data-layout-column] {\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t}\n\n\t&.", ":not(.danger) {\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t\t::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n"])), viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]));
53
+ };
54
+
55
+ // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
56
+ var columnSeparatorStyles = function columnSeparatorStyles(viewMode) {
57
+ return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-left: ", "px solid\n\t\t\t", ";\n\t\tposition: absolute;\n\t\theight: calc(100% - 24px);\n\t\tmargin-left: -25px;\n\t}\n"])), viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
58
+ };
59
+ // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
60
+ var rowSeparatorStyles = function rowSeparatorStyles(viewMode) {
61
+ return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t\tposition: absolute;\n\t\twidth: calc(100% - 32px);\n\t\tmargin-top: -13px;\n\t}\n"])), viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
62
+ };
63
+
64
+ // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
65
+ var layoutWithSeparatorBorderStyles = function layoutWithSeparatorBorderStyles(viewMode) {
66
+ return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t&.selected [data-layout-column]:not(:first-of-type),\n\t&:hover [data-layout-column]:not(:first-of-type) {\n\t\t", " {\n\t\t\t", "\n\t\t}\n\t\t", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&.selected.danger\n\t\t", " {\n\t\tbackground-color: ", ";\n\n\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t", ";\n\t\tborder-radius: 4px;\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", " {\n\t\t\t\t", "\n\t\t\t}\n\t\t\t", " {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t&.", ":not(.danger)\n\t\t", " {\n\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t", ";\n\t\tborder-radius: 4px;\n\t\tbackground-color: ", ";\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t\tborder: 0px;\n\t\t\t::before {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t}\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", " {\n\t\t\t\t", "\n\t\t\t}\n\t\t\t", " {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (min-width:".concat(_editorSharedStyles.layoutBreakpointWidth.MEDIUM, "px)") : "\t@media screen and (min-width: ".concat(_editorSharedStyles.gridMediumMaxWidth, "px)"), columnSeparatorStyles(viewMode), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (max-width:".concat(_editorSharedStyles.layoutBreakpointWidth.MEDIUM - 1, "px)") : "@media screen and (max-width: ".concat(_editorSharedStyles.gridMediumMaxWidth - 1, "px)"), rowSeparatorStyles(viewMode), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? "[data-layout-section]" : "", "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (min-width:".concat(_editorSharedStyles.layoutBreakpointWidth.MEDIUM, "px)") : "\t@media screen and (min-width: ".concat(_editorSharedStyles.gridMediumMaxWidth, "px)"), columnSeparatorStyles(viewMode), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (max-width:".concat(_editorSharedStyles.layoutBreakpointWidth.MEDIUM - 1, "px)") : "@media screen and (max-width: ".concat(_editorSharedStyles.gridMediumMaxWidth - 1, "px)"), rowSeparatorStyles(viewMode), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? "[data-layout-section]" : "", viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-selected, #0C66E4)", "var(--ds-background-selected, #E9F2FF)", (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket]), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (min-width:".concat(_editorSharedStyles.layoutBreakpointWidth.MEDIUM, "px)") : "\t@media screen and (min-width: ".concat(_editorSharedStyles.gridMediumMaxWidth, "px)"), columnSeparatorStyles(viewMode), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (max-width:".concat(_editorSharedStyles.layoutBreakpointWidth.MEDIUM - 1, "px)") : "@media screen and (max-width: ".concat(_editorSharedStyles.gridMediumMaxWidth - 1, "px)"), rowSeparatorStyles(viewMode));
57
67
  };
58
68
 
59
69
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
60
70
  var layoutStyles = exports.layoutStyles = function layoutStyles(viewMode) {
61
- return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: 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\t", "\n\n\t\t\t\tmin-width: 0;\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\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.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, _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2') ? 'position: relative;' : '', viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), layoutBorderStyles(viewMode), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode, (0, _experiments.editorExperiment)('nested-dnd', true) && !(0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') && ".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}"));
71
+ 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// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: 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\t", "\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.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, _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2') ? 'position: relative;' : '', viewMode === 'view' || (0, _experiments.editorExperiment)('advanced_layouts', true) ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), (0, _experiments.editorExperiment)('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode, (0, _experiments.editorExperiment)('nested-dnd', true) && !(0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') && ".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}"));
62
72
  };
package/dist/cjs/version-wrapper.js CHANGED
@@ -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 = "201.5.0";
8
+ var version = exports.version = "202.0.0";
package/dist/es2019/presets/universal.js CHANGED
@@ -142,7 +142,12 @@ export default function createUniversalPresetInternal({
142
142
  emojiProvider: props.emojiProvider,
143
143
  emojiNodeDataProvider: initialPluginConfiguration === null || initialPluginConfiguration === void 0 ? void 0 : (_initialPluginConfigu = initialPluginConfiguration.emoji) === null || _initialPluginConfigu === void 0 ? void 0 : _initialPluginConfigu.emojiNodeDataProvider
144
144
  }], Boolean(props.emojiProvider)).maybeAdd([tablesPlugin, {
145
- tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : props.allowTables,
145
+ tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : {
146
+ allowTableResizing: extendedTableFeaturesForComment,
147
+ allowTableAlignment: extendedTableFeaturesForComment,
148
+ // allow for consumers to pass through overrides for allowTableResizing and allowTableAlignment
149
+ ...props.allowTables
150
+ },
146
151
  dragAndDropEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tableDragAndDrop) && (isFullPage || (isComment || isChromeless) && editorExperiment('support_table_in_comment', true, {
147
152
  exposure: true
148
153
  })) || extendedTableFeaturesForComment,
@@ -155,10 +160,7 @@ export default function createUniversalPresetInternal({
155
160
  getEditorFeatureFlags,
156
161
  isNewColumnResizingEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tableNewColumnResizing) && isFullPage,
157
162
  isCommentEditor: isComment,
158
- isChromelessEditor: isChromeless,
159
- tableResizingEnabled: extendedTableFeaturesForComment,
160
- isTableAlignmentEnabled: extendedTableFeaturesForComment,
161
- ...(initialPluginConfiguration === null || initialPluginConfiguration === void 0 ? void 0 : initialPluginConfiguration.tablesPlugin)
163
+ isChromelessEditor: isChromeless
162
164
  }], Boolean(props.allowTables)).maybeAdd([tasksAndDecisionsPlugin, {
163
165
  allowNestedTasks: props.allowNestedTasks,
164
166
  consumeTabs: isFullPage,
package/dist/es2019/ui/ContentStyles/extension.js CHANGED
@@ -25,6 +25,39 @@ const extensionLabelStyles = css`
25
25
  &:not(.danger).${akEditorSelectedNodeClassName} > span > div .extension-label > span {
26
26
  display: inline;
27
27
  }
28
+
29
+ // Bodied extension edit toggle styles
30
+ &.danger.${akEditorSelectedNodeClassName} > span > .extension-edit-toggle-container {
31
+ opacity: 1;
32
+ }
33
+
34
+ &:not(.danger).${akEditorSelectedNodeClassName} > span > .extension-edit-toggle-container {
35
+ opacity: 1;
36
+ }
37
+
38
+ // .with-bodied-macro-live-page-styles class will only be added to bodied macros with the renderer mode gate enabled
39
+ &:not(.danger).${akEditorSelectedNodeClassName}
40
+ > span
41
+ > div
42
+ > .extension-label.with-bodied-macro-live-page-styles {
43
+ box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${"var(--ds-border-selected, #0C66E4)"};
44
+ }
45
+
46
+ &.danger.${akEditorSelectedNodeClassName}
47
+ > span
48
+ > div
49
+ > .extension-label.with-bodied-macro-live-page-styles {
50
+ box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${"var(--ds-border-danger, #E2483D)"};
51
+ }
52
+
53
+ &.danger.${akEditorSelectedNodeClassName}
54
+ > span
55
+ > .extension-edit-toggle-container
56
+ > .extension-edit-toggle {
57
+ background-color: ${"var(--ds-background-accent-red-subtler, #FFD5D2)"};
58
+ color: ${"var(--ds-text-danger, #AE2E24)"};
59
+ box-shadow: none;
60
+ }
28
61
  `;
29
62
  const dangerOverlayStyles = css({
30
63
  opacity: 0.3,
package/dist/es2019/ui/ContentStyles/layout.js CHANGED
@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
3
3
  import { columnLayoutResponsiveSharedStyle, columnLayoutSharedStyle, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '@atlaskit/editor-common/styles';
4
4
  import { TableCssClassName } from '@atlaskit/editor-plugins/table/types';
5
5
  import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
6
- import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
6
+ import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, layoutBreakpointWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
7
7
  import { fg } from '@atlaskit/platform-feature-flags';
8
8
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
9
9
  export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
@@ -58,7 +58,13 @@ css`
58
58
 
59
59
  > [data-layout-column].${akEditorSelectedNodeClassName}:not(.danger) {
60
60
  ${getSelectionStyles([SelectionStyle.Blanket])};
61
- border: ${akEditorSelectedBorder};
61
+ /* layout column selection shorter after layout border has been removed */
62
+ ::before {
63
+ top: 12px;
64
+ height: calc(100% - 24px);
65
+ width: calc(100% - 8px);
66
+ left: 4px;
67
+ }
62
68
  }
63
69
  ` :
64
70
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
@@ -128,13 +134,86 @@ const layoutBorderStyles = viewMode => css`
128
134
 
129
135
  &.${akEditorSelectedNodeClassName}:not(.danger) {
130
136
  [data-layout-column] {
131
- ${isPreRelease2() ?
132
- /* SelectionStyle.Border adds extra ::after content which clashes with hover zone for layout columns and is not needed for layout anyway
133
- see platform/packages/editor/editor-shared-styles/src/selection/utils.ts(~L43)
134
- */
135
- `border: ${akEditorSelectedBorder};
136
- ${getSelectionStyles([SelectionStyle.Blanket])}` : `
137
- ${getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket])}`}
137
+ ${getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket])}
138
+ ::after {
139
+ background-color: transparent;
140
+ }
141
+ }
142
+ }
143
+ `;
144
+
145
+ // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
146
+ const columnSeparatorStyles = viewMode => css`
147
+ [data-layout-content]::before {
148
+ content: '';
149
+ border-left: ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px solid
150
+ ${"var(--ds-border, #091E4224)"};
151
+ position: absolute;
152
+ height: calc(100% - 24px);
153
+ margin-left: -25px;
154
+ }
155
+ `;
156
+ // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
157
+ const rowSeparatorStyles = viewMode => css`
158
+ [data-layout-content]::before {
159
+ content: '';
160
+ border-top: ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px solid
161
+ ${"var(--ds-border, #091E4224)"};
162
+ position: absolute;
163
+ width: calc(100% - 32px);
164
+ margin-top: -13px;
165
+ }
166
+ `;
167
+
168
+ // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
169
+ const layoutWithSeparatorBorderStyles = viewMode => css`
170
+ &.selected [data-layout-column]:not(:first-of-type),
171
+ &:hover [data-layout-column]:not(:first-of-type) {
172
+ ${fg('platform_editor_advanced_layouts_breakout_resizing') ? `@container layout-area (min-width:${layoutBreakpointWidth.MEDIUM}px)` : ` @media screen and (min-width: ${gridMediumMaxWidth}px)`} {
173
+ ${columnSeparatorStyles(viewMode)}
174
+ }
175
+ ${fg('platform_editor_advanced_layouts_breakout_resizing') ? `@container layout-area (max-width:${layoutBreakpointWidth.MEDIUM - 1}px)` : `@media screen and (max-width: ${gridMediumMaxWidth - 1}px)`} {
176
+ ${rowSeparatorStyles(viewMode)}
177
+ }
178
+ }
179
+
180
+ &.selected.danger
181
+ ${fg('platform_editor_advanced_layouts_breakout_resizing') ? `[data-layout-section]` : ``} {
182
+ background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
183
+
184
+ box-shadow: 0 0 0 ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px
185
+ ${akEditorDeleteBorder};
186
+ border-radius: 4px;
187
+ [data-layout-column]:not(:first-of-type) {
188
+ ${fg('platform_editor_advanced_layouts_breakout_resizing') ? `@container layout-area (min-width:${layoutBreakpointWidth.MEDIUM}px)` : ` @media screen and (min-width: ${gridMediumMaxWidth}px)`} {
189
+ ${columnSeparatorStyles(viewMode)}
190
+ }
191
+ ${fg('platform_editor_advanced_layouts_breakout_resizing') ? `@container layout-area (max-width:${layoutBreakpointWidth.MEDIUM - 1}px)` : `@media screen and (max-width: ${gridMediumMaxWidth - 1}px)`} {
192
+ ${rowSeparatorStyles(viewMode)}
193
+ }
194
+ }
195
+ }
196
+
197
+ &.${akEditorSelectedNodeClassName}:not(.danger)
198
+ ${fg('platform_editor_advanced_layouts_breakout_resizing') ? `[data-layout-section]` : ``} {
199
+ box-shadow: 0 0 0 ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px
200
+ ${"var(--ds-border-selected, #0C66E4)"};
201
+ border-radius: 4px;
202
+ background-color: ${"var(--ds-background-selected, #E9F2FF)"};
203
+ [data-layout-column] {
204
+ ${getSelectionStyles([SelectionStyle.Blanket])}
205
+ border: 0px;
206
+ ::before {
207
+ background-color: transparent;
208
+ }
209
+ }
210
+ [data-layout-column]:not(:first-of-type) {
211
+ ${fg('platform_editor_advanced_layouts_breakout_resizing') ? `@container layout-area (min-width:${layoutBreakpointWidth.MEDIUM}px)` : ` @media screen and (min-width: ${gridMediumMaxWidth}px)`} {
212
+ ${columnSeparatorStyles(viewMode)}
213
+ }
214
+ ${fg('platform_editor_advanced_layouts_breakout_resizing') ? `@container layout-area (max-width:${layoutBreakpointWidth.MEDIUM - 1}px)` : `@media screen and (max-width: ${gridMediumMaxWidth - 1}px)`} {
215
+ ${rowSeparatorStyles(viewMode)}
216
+ }
138
217
  }
139
218
  }
140
219
  `;
@@ -156,8 +235,9 @@ export const layoutStyles = viewMode => css`
156
235
  ${fg('platform_editor_drag_and_drop_target_v2') ? 'position: relative;' : ''}
157
236
 
158
237
  min-width: 0;
159
- border: ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px solid
160
- ${"var(--ds-border, #091E4224)"};
238
+ /* disable 4 borders when in view mode and advanced layouts is on */
239
+ border: ${viewMode === 'view' || editorExperiment('advanced_layouts', true) ? 0 : akEditorSelectedBorderSize}px
240
+ solid ${"var(--ds-border, #091E4224)"};
161
241
  border-radius: 4px;
162
242
  padding: ${LAYOUT_COLUMN_PADDING}px
163
243
  ${LAYOUT_COLUMN_PADDING + (editorExperiment('nested-dnd', true) ? 8 : 0)}px;
@@ -225,7 +305,7 @@ export const layoutStyles = viewMode => css`
225
305
  // styles to support borders for layout
226
306
  [data-layout-section],
227
307
  .layoutSectionView-content-wrap {
228
- ${layoutBorderStyles(viewMode)}
308
+ ${editorExperiment('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode)}
229
309
  }
230
310
  }
231
311
 
package/dist/es2019/version-wrapper.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "201.5.0";
2
+ export const version = "202.0.0";
package/dist/esm/presets/universal.js CHANGED
@@ -142,8 +142,11 @@ export default function createUniversalPresetInternal(_ref) {
142
142
  }, initialPluginConfiguration === null || initialPluginConfiguration === void 0 ? void 0 : initialPluginConfiguration.mentionsPlugin)], Boolean(props.mentionProvider)).maybeAdd([emojiPlugin, {
143
143
  emojiProvider: props.emojiProvider,
144
144
  emojiNodeDataProvider: initialPluginConfiguration === null || initialPluginConfiguration === void 0 || (_initialPluginConfigu = initialPluginConfiguration.emoji) === null || _initialPluginConfigu === void 0 ? void 0 : _initialPluginConfigu.emojiNodeDataProvider
145
- }], Boolean(props.emojiProvider)).maybeAdd([tablesPlugin, _objectSpread({
146
- tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : props.allowTables,
145
+ }], Boolean(props.emojiProvider)).maybeAdd([tablesPlugin, {
146
+ tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : _objectSpread({
147
+ allowTableResizing: extendedTableFeaturesForComment,
148
+ allowTableAlignment: extendedTableFeaturesForComment
149
+ }, props.allowTables),
147
150
  dragAndDropEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tableDragAndDrop) && (isFullPage || (isComment || isChromeless) && editorExperiment('support_table_in_comment', true, {
148
151
  exposure: true
149
152
  })) || extendedTableFeaturesForComment,
@@ -156,10 +159,8 @@ export default function createUniversalPresetInternal(_ref) {
156
159
  getEditorFeatureFlags: getEditorFeatureFlags,
157
160
  isNewColumnResizingEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tableNewColumnResizing) && isFullPage,
158
161
  isCommentEditor: isComment,
159
- isChromelessEditor: isChromeless,
160
- tableResizingEnabled: extendedTableFeaturesForComment,
161
- isTableAlignmentEnabled: extendedTableFeaturesForComment
162
- }, initialPluginConfiguration === null || initialPluginConfiguration === void 0 ? void 0 : initialPluginConfiguration.tablesPlugin)], Boolean(props.allowTables)).maybeAdd([tasksAndDecisionsPlugin, _objectSpread({
162
+ isChromelessEditor: isChromeless
163
+ }], Boolean(props.allowTables)).maybeAdd([tasksAndDecisionsPlugin, _objectSpread({
163
164
  allowNestedTasks: props.allowNestedTasks,
164
165
  consumeTabs: isFullPage,
165
166
  useLongPressSelection: false,
package/dist/esm/ui/ContentStyles/extension.js CHANGED
@@ -4,7 +4,7 @@ var _templateObject, _templateObject2;
4
4
  import { css } from '@emotion/react';
5
5
  import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
6
6
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
7
- var extensionLabelStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t&.danger > span > div > .extension-label {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\topacity: 1;\n\t\tbox-shadow: none;\n\t}\n\n\t&:not(.danger).", " > span > div > .extension-label {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\topacity: 1;\n\t\tbox-shadow: none;\n\t}\n\n\t// Targets the icon for bodied macro styling in button label\n\t&.danger > span > div > .extension-label > span {\n\t\tdisplay: inline;\n\t}\n\n\t&:not(.danger).", " > span > div .extension-label > span {\n\t\tdisplay: inline;\n\t}\n"])), "var(--ds-background-accent-red-subtler, #FFD5D2)", "var(--ds-text-danger, #AE2E24)", akEditorSelectedNodeClassName, "var(--ds-background-selected, #E9F2FF)", "var(--ds-text-selected, #0C66E4)", akEditorSelectedNodeClassName);
7
+ var extensionLabelStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t&.danger > span > div > .extension-label {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\topacity: 1;\n\t\tbox-shadow: none;\n\t}\n\n\t&:not(.danger).", " > span > div > .extension-label {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\topacity: 1;\n\t\tbox-shadow: none;\n\t}\n\n\t// Targets the icon for bodied macro styling in button label\n\t&.danger > span > div > .extension-label > span {\n\t\tdisplay: inline;\n\t}\n\n\t&:not(.danger).", " > span > div .extension-label > span {\n\t\tdisplay: inline;\n\t}\n\n\t// Bodied extension edit toggle styles\n\t&.danger.", " > span > .extension-edit-toggle-container {\n\t\topacity: 1;\n\t}\n\n\t&:not(.danger).", " > span > .extension-edit-toggle-container {\n\t\topacity: 1;\n\t}\n\n\t// .with-bodied-macro-live-page-styles class will only be added to bodied macros with the renderer mode gate enabled\n\t&:not(.danger).", "\n\t\t> span\n\t\t> div\n\t\t> .extension-label.with-bodied-macro-live-page-styles {\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t}\n\n\t&.danger.", "\n\t\t> span\n\t\t> div\n\t\t> .extension-label.with-bodied-macro-live-page-styles {\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t}\n\n\t&.danger.", "\n\t\t> span\n\t\t> .extension-edit-toggle-container\n\t\t> .extension-edit-toggle {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tbox-shadow: none;\n\t}\n"])), "var(--ds-background-accent-red-subtler, #FFD5D2)", "var(--ds-text-danger, #AE2E24)", akEditorSelectedNodeClassName, "var(--ds-background-selected, #E9F2FF)", "var(--ds-text-selected, #0C66E4)", akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, "var(--ds-border-selected, #0C66E4)", akEditorSelectedNodeClassName, akEditorSelectedBorderSize, "var(--ds-border-danger, #E2483D)", akEditorSelectedNodeClassName, "var(--ds-background-accent-red-subtler, #FFD5D2)", "var(--ds-text-danger, #AE2E24)");
8
8
  var dangerOverlayStyles = css({
9
9
  opacity: 0.3,
10
10
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
package/dist/esm/ui/ContentStyles/layout.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
3
3
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
4
4
  import { css } from '@emotion/react';
5
5
  import { columnLayoutResponsiveSharedStyle, columnLayoutSharedStyle, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '@atlaskit/editor-common/styles';
6
6
  import { TableCssClassName } from '@atlaskit/editor-plugins/table/types';
7
7
  import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
8
- import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
8
+ import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, layoutBreakpointWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
9
9
  import { fg } from '@atlaskit/platform-feature-flags';
10
10
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
11
11
  export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
@@ -21,7 +21,7 @@ var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
21
21
  // TODO handle responsive
22
22
  var layoutColumnStyles = function layoutColumnStyles() {
23
23
  return isPreRelease2() ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
24
- css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t> [data-layout-column] {\n\t\t\t\t\tmargin: 0 ", "px;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:first-of-type {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:last-of-type {\n\t\t\t\t\tmargin-right: 0;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column].", ":not(.danger) {\n\t\t\t\t\t", ";\n\t\t\t\t\tborder: ", ";\n\t\t\t\t}\n\t\t\t"])), LAYOUT_SECTION_MARGIN / 2, gridMediumMaxWidth, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Blanket]), akEditorSelectedBorder) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
24
+ css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t> [data-layout-column] {\n\t\t\t\t\tmargin: 0 ", "px;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:first-of-type {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:last-of-type {\n\t\t\t\t\tmargin-right: 0;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column].", ":not(.danger) {\n\t\t\t\t\t", ";\n\t\t\t\t\t/* layout column selection shorter after layout border has been removed */\n\t\t\t\t\t::before {\n\t\t\t\t\t\ttop: 12px;\n\t\t\t\t\t\theight: calc(100% - 24px);\n\t\t\t\t\t\twidth: calc(100% - 8px);\n\t\t\t\t\t\tleft: 4px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), LAYOUT_SECTION_MARGIN / 2, gridMediumMaxWidth, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Blanket])) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
25
25
  css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: ", "px;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), LAYOUT_SECTION_MARGIN, gridMediumMaxWidth);
26
26
  };
27
27
  var layoutSectionStyles = function layoutSectionStyles() {
@@ -32,14 +32,24 @@ var layoutSectionStyles = function layoutSectionStyles() {
32
32
 
33
33
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
34
34
  var layoutBorderStyles = function layoutBorderStyles(viewMode) {
35
- return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t/* Shows the border when cursor is inside a layout */\n\t&.selected [data-layout-column],\n\t&:hover [data-layout-column] {\n\t\tborder: ", "px solid ", ";\n\t}\n\n\t&.selected.danger [data-layout-column] {\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t}\n\n\t&.", ":not(.danger) {\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t}\n\t}\n"])), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), akEditorSelectedNodeClassName, isPreRelease2() ?
36
- /* SelectionStyle.Border adds extra ::after content which clashes with hover zone for layout columns and is not needed for layout anyway
37
- see platform/packages/editor/editor-shared-styles/src/selection/utils.ts(~L43)
38
- */
39
- "border: ".concat(akEditorSelectedBorder, ";\n\t\t\t").concat(getSelectionStyles([SelectionStyle.Blanket])) : "\n\t\t\t\t".concat(getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket])));
35
+ return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t/* Shows the border when cursor is inside a layout */\n\t&.selected [data-layout-column],\n\t&:hover [data-layout-column] {\n\t\tborder: ", "px solid ", ";\n\t}\n\n\t&.selected.danger [data-layout-column] {\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t}\n\n\t&.", ":not(.danger) {\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t\t::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n"])), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]));
36
+ };
37
+
38
+ // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
39
+ var columnSeparatorStyles = function columnSeparatorStyles(viewMode) {
40
+ return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-left: ", "px solid\n\t\t\t", ";\n\t\tposition: absolute;\n\t\theight: calc(100% - 24px);\n\t\tmargin-left: -25px;\n\t}\n"])), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
41
+ };
42
+ // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
43
+ var rowSeparatorStyles = function rowSeparatorStyles(viewMode) {
44
+ return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t\tposition: absolute;\n\t\twidth: calc(100% - 32px);\n\t\tmargin-top: -13px;\n\t}\n"])), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
45
+ };
46
+
47
+ // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
48
+ var layoutWithSeparatorBorderStyles = function layoutWithSeparatorBorderStyles(viewMode) {
49
+ return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t&.selected [data-layout-column]:not(:first-of-type),\n\t&:hover [data-layout-column]:not(:first-of-type) {\n\t\t", " {\n\t\t\t", "\n\t\t}\n\t\t", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&.selected.danger\n\t\t", " {\n\t\tbackground-color: ", ";\n\n\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t", ";\n\t\tborder-radius: 4px;\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", " {\n\t\t\t\t", "\n\t\t\t}\n\t\t\t", " {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t&.", ":not(.danger)\n\t\t", " {\n\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t", ";\n\t\tborder-radius: 4px;\n\t\tbackground-color: ", ";\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t\tborder: 0px;\n\t\t\t::before {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t}\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", " {\n\t\t\t\t", "\n\t\t\t}\n\t\t\t", " {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), fg('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (min-width:".concat(layoutBreakpointWidth.MEDIUM, "px)") : "\t@media screen and (min-width: ".concat(gridMediumMaxWidth, "px)"), columnSeparatorStyles(viewMode), fg('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (max-width:".concat(layoutBreakpointWidth.MEDIUM - 1, "px)") : "@media screen and (max-width: ".concat(gridMediumMaxWidth - 1, "px)"), rowSeparatorStyles(viewMode), fg('platform_editor_advanced_layouts_breakout_resizing') ? "[data-layout-section]" : "", "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, akEditorDeleteBorder, fg('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (min-width:".concat(layoutBreakpointWidth.MEDIUM, "px)") : "\t@media screen and (min-width: ".concat(gridMediumMaxWidth, "px)"), columnSeparatorStyles(viewMode), fg('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (max-width:".concat(layoutBreakpointWidth.MEDIUM - 1, "px)") : "@media screen and (max-width: ".concat(gridMediumMaxWidth - 1, "px)"), rowSeparatorStyles(viewMode), akEditorSelectedNodeClassName, fg('platform_editor_advanced_layouts_breakout_resizing') ? "[data-layout-section]" : "", viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border-selected, #0C66E4)", "var(--ds-background-selected, #E9F2FF)", getSelectionStyles([SelectionStyle.Blanket]), fg('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (min-width:".concat(layoutBreakpointWidth.MEDIUM, "px)") : "\t@media screen and (min-width: ".concat(gridMediumMaxWidth, "px)"), columnSeparatorStyles(viewMode), fg('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (max-width:".concat(layoutBreakpointWidth.MEDIUM - 1, "px)") : "@media screen and (max-width: ".concat(gridMediumMaxWidth - 1, "px)"), rowSeparatorStyles(viewMode));
40
50
  };
41
51
 
42
52
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
43
53
  export var layoutStyles = function layoutStyles(viewMode) {
44
- return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: 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\t", "\n\n\t\t\t\tmin-width: 0;\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\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.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)", akLayoutGutterOffset, akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', fg('platform_editor_drag_and_drop_target_v2') ? 'position: relative;' : '', viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", LAYOUT_COLUMN_PADDING, LAYOUT_COLUMN_PADDING + (editorExperiment('nested-dnd', true) ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), layoutBorderStyles(viewMode), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode, editorExperiment('nested-dnd', true) && !fg('platform_editor_advanced_layouts_breakout_resizing') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
54
+ return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: 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\t", "\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.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)", akLayoutGutterOffset, akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', fg('platform_editor_drag_and_drop_target_v2') ? 'position: relative;' : '', viewMode === 'view' || editorExperiment('advanced_layouts', true) ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", LAYOUT_COLUMN_PADDING, LAYOUT_COLUMN_PADDING + (editorExperiment('nested-dnd', true) ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), editorExperiment('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode, editorExperiment('nested-dnd', true) && !fg('platform_editor_advanced_layouts_breakout_resizing') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
45
55
  };
package/dist/esm/version-wrapper.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "201.5.0";
2
+ export var version = "202.0.0";
package/dist/types/create-editor/create-universal-preset.d.ts CHANGED
@@ -5796,8 +5796,8 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
5796
5796
  mode?: import("@atlaskit/editor-plugin-editor-viewmode").ViewMode | undefined;
5797
5797
  } | undefined>>];
5798
5798
  actions?: {
5799
- suppressToolbar: () => boolean;
5800
- unsuppressToolbar: () => boolean;
5799
+ suppressToolbar?: (() => boolean) | undefined;
5800
+ unsuppressToolbar?: (() => boolean) | undefined;
5801
5801
  } | undefined;
5802
5802
  }, {
5803
5803
  preferenceToolbarAboveSelection?: boolean | undefined;
package/dist/types/presets/default.d.ts CHANGED
@@ -1375,8 +1375,8 @@ export declare function createDefaultPreset(options: DefaultPresetPluginOptions)
1375
1375
  mode?: import("@atlaskit/editor-plugin-editor-viewmode").ViewMode | undefined;
1376
1376
  } | undefined>>];
1377
1377
  actions?: {
1378
- suppressToolbar: () => boolean;
1379
- unsuppressToolbar: () => boolean;
1378
+ suppressToolbar?: (() => boolean) | undefined;
1379
+ unsuppressToolbar?: (() => boolean) | undefined;
1380
1380
  } | undefined;
1381
1381
  }, {
1382
1382
  preferenceToolbarAboveSelection?: boolean | undefined;
@@ -3990,8 +3990,8 @@ export declare function useDefaultPreset(props: DefaultPresetPluginOptions): Edi
3990
3990
  mode?: import("@atlaskit/editor-plugin-editor-viewmode").ViewMode | undefined;
3991
3991
  } | undefined>>];
3992
3992
  actions?: {
3993
- suppressToolbar: () => boolean;
3994
- unsuppressToolbar: () => boolean;
3993
+ suppressToolbar?: (() => boolean) | undefined;
3994
+ unsuppressToolbar?: (() => boolean) | undefined;
3995
3995
  } | undefined;
3996
3996
  }, {
3997
3997
  preferenceToolbarAboveSelection?: boolean | undefined;
package/dist/types/presets/universal.d.ts CHANGED
@@ -22,10 +22,6 @@ export type InitialPluginConfiguration = {
22
22
  taskLocalId?: string;
23
23
  }[]) => void;
24
24
  };
25
- tablesPlugin?: {
26
- tableResizingEnabled?: boolean;
27
- isTableAlignmentEnabled?: boolean;
28
- };
29
25
  emoji?: {
30
26
  emojiNodeDataProvider?: EmojiPluginOptions['emojiNodeDataProvider'];
31
27
  };
@@ -5849,8 +5845,8 @@ export default function createUniversalPresetInternal({ appearance, props, featu
5849
5845
  mode?: import("@atlaskit/editor-plugin-editor-viewmode").ViewMode | undefined;
5850
5846
  } | undefined>>];
5851
5847
  actions?: {
5852
- suppressToolbar: () => boolean;
5853
- unsuppressToolbar: () => boolean;
5848
+ suppressToolbar?: (() => boolean) | undefined;
5849
+ unsuppressToolbar?: (() => boolean) | undefined;
5854
5850
  } | undefined;
5855
5851
  }, {
5856
5852
  preferenceToolbarAboveSelection?: boolean | undefined;
package/dist/types/presets/useUniversalPreset.d.ts CHANGED
@@ -5796,8 +5796,8 @@ export default function useUniversalPreset({ props, initialPluginConfiguration }
5796
5796
  mode?: import("@atlaskit/editor-plugin-editor-viewmode").ViewMode | undefined;
5797
5797
  } | undefined>>];
5798
5798
  actions?: {
5799
- suppressToolbar: () => boolean;
5800
- unsuppressToolbar: () => boolean;
5799
+ suppressToolbar?: (() => boolean) | undefined;
5800
+ unsuppressToolbar?: (() => boolean) | undefined;
5801
5801
  } | undefined;
5802
5802
  }, {
5803
5803
  preferenceToolbarAboveSelection?: boolean | undefined;
package/dist/types-ts4.5/create-editor/create-universal-preset.d.ts CHANGED
@@ -7051,8 +7051,8 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
7051
7051
  } | undefined>>
7052
7052
  ];
7053
7053
  actions?: {
7054
- suppressToolbar: () => boolean;
7055
- unsuppressToolbar: () => boolean;
7054
+ suppressToolbar?: (() => boolean) | undefined;
7055
+ unsuppressToolbar?: (() => boolean) | undefined;
7056
7056
  } | undefined;
7057
7057
  }, {
7058
7058
  preferenceToolbarAboveSelection?: boolean | undefined;
package/dist/types-ts4.5/presets/default.d.ts CHANGED
@@ -1674,8 +1674,8 @@ export declare function createDefaultPreset(options: DefaultPresetPluginOptions)
1674
1674
  } | undefined>>
1675
1675
  ];
1676
1676
  actions?: {
1677
- suppressToolbar: () => boolean;
1678
- unsuppressToolbar: () => boolean;
1677
+ suppressToolbar?: (() => boolean) | undefined;
1678
+ unsuppressToolbar?: (() => boolean) | undefined;
1679
1679
  } | undefined;
1680
1680
  }, {
1681
1681
  preferenceToolbarAboveSelection?: boolean | undefined;
@@ -4848,8 +4848,8 @@ export declare function useDefaultPreset(props: DefaultPresetPluginOptions): Edi
4848
4848
  } | undefined>>
4849
4849
  ];
4850
4850
  actions?: {
4851
- suppressToolbar: () => boolean;
4852
- unsuppressToolbar: () => boolean;
4851
+ suppressToolbar?: (() => boolean) | undefined;
4852
+ unsuppressToolbar?: (() => boolean) | undefined;
4853
4853
  } | undefined;
4854
4854
  }, {
4855
4855
  preferenceToolbarAboveSelection?: boolean | undefined;
package/dist/types-ts4.5/presets/universal.d.ts CHANGED
@@ -22,10 +22,6 @@ export type InitialPluginConfiguration = {
22
22
  taskLocalId?: string;
23
23
  }[]) => void;
24
24
  };
25
- tablesPlugin?: {
26
- tableResizingEnabled?: boolean;
27
- isTableAlignmentEnabled?: boolean;
28
- };
29
25
  emoji?: {
30
26
  emojiNodeDataProvider?: EmojiPluginOptions['emojiNodeDataProvider'];
31
27
  };
@@ -7104,8 +7100,8 @@ export default function createUniversalPresetInternal({ appearance, props, featu
7104
7100
  } | undefined>>
7105
7101
  ];
7106
7102
  actions?: {
7107
- suppressToolbar: () => boolean;
7108
- unsuppressToolbar: () => boolean;
7103
+ suppressToolbar?: (() => boolean) | undefined;
7104
+ unsuppressToolbar?: (() => boolean) | undefined;
7109
7105
  } | undefined;
7110
7106
  }, {
7111
7107
  preferenceToolbarAboveSelection?: boolean | undefined;
package/dist/types-ts4.5/presets/useUniversalPreset.d.ts CHANGED
@@ -7051,8 +7051,8 @@ export default function useUniversalPreset({ props, initialPluginConfiguration }
7051
7051
  } | undefined>>
7052
7052
  ];
7053
7053
  actions?: {
7054
- suppressToolbar: () => boolean;
7055
- unsuppressToolbar: () => boolean;
7054
+ suppressToolbar?: (() => boolean) | undefined;
7055
+ unsuppressToolbar?: (() => boolean) | undefined;
7056
7056
  } | undefined;
7057
7057
  }, {
7058
7058
  preferenceToolbarAboveSelection?: boolean | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "201.5.0",
3
+ "version": "202.0.0",
4
4
  "description": "A package contains Atlassian editor core functionality",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -43,19 +43,19 @@
43
43
  "@atlaskit/analytics-next": "^10.1.0",
44
44
  "@atlaskit/analytics-next-stable-react-context": "1.0.1",
45
45
  "@atlaskit/button": "^20.3.0",
46
- "@atlaskit/editor-common": "^94.22.0",
46
+ "@atlaskit/editor-common": "^94.24.0",
47
47
  "@atlaskit/editor-json-transformer": "^8.21.0",
48
48
  "@atlaskit/editor-plugin-quick-insert": "1.7.0",
49
49
  "@atlaskit/editor-plugins": "^5.6.0",
50
50
  "@atlaskit/editor-prosemirror": "6.0.0",
51
51
  "@atlaskit/editor-shared-styles": "^3.2.0",
52
- "@atlaskit/emoji": "^67.10.0",
52
+ "@atlaskit/emoji": "^67.11.0",
53
53
  "@atlaskit/icon": "^22.24.0",
54
54
  "@atlaskit/media-card": "^78.14.0",
55
55
  "@atlaskit/mention": "^23.4.0",
56
56
  "@atlaskit/platform-feature-flags": "^0.3.0",
57
57
  "@atlaskit/task-decision": "^17.11.0",
58
- "@atlaskit/tmp-editor-statsig": "^2.17.0",
58
+ "@atlaskit/tmp-editor-statsig": "^2.19.0",
59
59
  "@atlaskit/tokens": "^2.2.0",
60
60
  "@atlaskit/tooltip": "^18.9.0",
61
61
  "@atlaskit/width-detector": "^4.3.0",
@@ -83,7 +83,7 @@
83
83
  "@af/visual-regression": "*",
84
84
  "@atlaskit/adf-utils": "^19.12.0",
85
85
  "@atlaskit/analytics-listeners": "^8.11.0",
86
- "@atlaskit/collab-provider": "9.45.0",
86
+ "@atlaskit/collab-provider": "9.46.0",
87
87
  "@atlaskit/editor-plugin-annotation": "1.24.0",
88
88
  "@atlaskit/editor-plugin-card": "^4.4.0",
89
89
  "@atlaskit/editor-plugin-list": "^3.9.0",
@@ -96,14 +96,14 @@
96
96
  "@atlaskit/modal-dialog": "^12.17.0",
97
97
  "@atlaskit/primitives": "^13.2.0",
98
98
  "@atlaskit/renderer": "^112.5.0",
99
- "@atlaskit/smart-card": "^30.2.0",
99
+ "@atlaskit/smart-card": "^30.3.0",
100
100
  "@atlaskit/synchrony-test-helpers": "^2.5.0",
101
101
  "@atlaskit/toggle": "^13.4.0",
102
102
  "@atlaskit/util-data-test": "^17.13.0",
103
103
  "@atlaskit/visual-regression": "*",
104
104
  "@atlassian/adf-schema-json": "^1.22.0",
105
105
  "@atlassian/feature-flags-test-utils": "*",
106
- "@atlassian/search-provider": "2.4.167",
106
+ "@atlassian/search-provider": "2.4.168",
107
107
  "@emotion/jest": "^11.8.0",
108
108
  "@storybook/addon-knobs": "^6.4.0",
109
109
  "@testing-library/react": "^12.1.5",
@@ -345,6 +345,10 @@
345
345
  "platform_editor_react18_phase2__media_single": {
346
346
  "type": "boolean",
347
347
  "referenceOnly": true
348
+ },
349
+ "platform_editor_elements_dnd_ed_23674": {
350
+ "type": "boolean",
351
+ "referenceOnly": true
348
352
  }
349
353
  },
350
354
  "stricter": {