@atlaskit/editor-core 201.3.0 → 201.3.1

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 (18) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js +10 -5
  3. package/dist/cjs/ui/Appearance/FullPage/StyledComponents.js +18 -24
  4. package/dist/cjs/ui/ContentStyles/layout.js +8 -3
  5. package/dist/cjs/version-wrapper.js +1 -1
  6. package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js +10 -5
  7. package/dist/es2019/ui/Appearance/FullPage/StyledComponents.js +17 -23
  8. package/dist/es2019/ui/ContentStyles/layout.js +39 -4
  9. package/dist/es2019/version-wrapper.js +1 -1
  10. package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js +10 -5
  11. package/dist/esm/ui/Appearance/FullPage/StyledComponents.js +17 -23
  12. package/dist/esm/ui/ContentStyles/layout.js +9 -4
  13. package/dist/esm/version-wrapper.js +1 -1
  14. package/dist/types/ui/Appearance/FullPage/FullPageContentArea.d.ts +1 -0
  15. package/dist/types/ui/Appearance/FullPage/StyledComponents.d.ts +2 -1
  16. package/dist/types-ts4.5/ui/Appearance/FullPage/FullPageContentArea.d.ts +1 -0
  17. package/dist/types-ts4.5/ui/Appearance/FullPage/StyledComponents.d.ts +2 -1
  18. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 201.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#162554](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162554)
8
+ [`bb0f938202ca0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bb0f938202ca0) -
9
+ [ux] Advanced layout responsiveness in Editor
10
+ - [#162782](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162782)
11
+ [`c0ff2fca39e86`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c0ff2fca39e86) -
12
+ fix context panel issue with editor container size
13
+ - Updated dependencies
14
+
3
15
  ## 201.3.0
4
16
 
5
17
  ### Minor Changes
package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js CHANGED
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.FullPageContentArea = exports.CONTENT_AREA_TEST_ID = void 0;
8
+ exports.FullPageContentArea = exports.EDITOR_CONTAINER = exports.CONTENT_AREA_TEST_ID = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _react2 = require("@emotion/react");
11
11
  var _reactIntlNext = require("react-intl-next");
@@ -25,6 +25,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
25
25
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
26
26
 
27
27
  var CONTENT_AREA_TEST_ID = exports.CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
28
+ var EDITOR_CONTAINER = exports.EDITOR_CONTAINER = 'ak-editor-container';
28
29
  var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
29
30
  var _contentAreaRef$curre;
30
31
  var theme = (0, _react2.useTheme)();
@@ -46,15 +47,19 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
46
47
  };
47
48
  }, []);
48
49
  return (0, _react2.jsx)("div", {
49
- css: [(0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ?
50
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
51
- _StyledComponents.contentAreaContainerTypeInlineSize :
50
+ css: [
52
51
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
53
52
  _StyledComponents.contentArea,
54
53
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
55
54
  props.isEditorToolbarHidden && _StyledComponents.contentAreaHeightNoToolbar],
56
55
  "data-testid": CONTENT_AREA_TEST_ID,
57
56
  ref: containerRef
57
+ }, (0, _react2.jsx)("div", {
58
+ css:
59
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
60
+ (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? _StyledComponents.contentAreaWrapper : _StyledComponents.contentAreaWrapperNoStyles,
61
+ "data-testid": EDITOR_CONTAINER,
62
+ "data-editor-container": (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? 'true' : 'false'
58
63
  }, (0, _react2.jsx)(_StyledComponents.ScrollContainer
59
64
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
60
65
  , {
@@ -97,7 +102,7 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
97
102
  containerElement: scrollContainerRef.current,
98
103
  dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
99
104
  wrapperElement: props.wrapperElement
100
- }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))), (0, _react2.jsx)("div", {
105
+ }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null))))), (0, _react2.jsx)("div", {
101
106
  css: _StyledComponents.sidebarArea
102
107
  }, props.contextPanel || (0, _react2.jsx)(_ContextPanel.ContextPanel, {
103
108
  editorAPI: props.editorAPI,
package/dist/cjs/ui/Appearance/FullPage/StyledComponents.js CHANGED
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.sidebarArea = exports.fullPageEditorWrapper = exports.editorContentGutterStyle = exports.editorContentAreaStyle = exports.editorContentAreaHideContainer = exports.contentAreaHeightNoToolbar = exports.contentAreaContainerTypeInlineSize = exports.contentArea = exports.ScrollContainer = void 0;
7
+ exports.sidebarArea = exports.fullPageEditorWrapper = exports.editorContentGutterStyle = exports.editorContentAreaStyle = exports.editorContentAreaHideContainer = exports.contentAreaWrapperNoStyles = exports.contentAreaWrapper = exports.contentAreaHeightNoToolbar = exports.contentArea = exports.ScrollContainer = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _react = require("@emotion/react");
10
10
  var _adfSchema = require("@atlaskit/adf-schema");
@@ -61,29 +61,23 @@ var contentArea = exports.contentArea = function contentArea() {
61
61
  });
62
62
  };
63
63
 
64
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
65
- var contentAreaContainerTypeInlineSize = exports.contentAreaContainerTypeInlineSize = function contentAreaContainerTypeInlineSize() {
66
- var editorToolbarHeight = (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)();
67
- return (0, _react.css)({
68
- display: 'flex',
69
- flexDirection: 'row',
70
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
71
- height: "calc(100% - ".concat(editorToolbarHeight, ")"),
72
- boxSizing: 'border-box',
73
- margin: 0,
74
- padding: 0,
75
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
76
- transition: "padding 0ms ".concat(_editorSharedStyles.akEditorSwoopCubicBezier),
77
- containerType: 'inline-size',
78
- containerName: 'editor-area',
79
- // Chrome 129 Regression!
80
- // By the spec, when the container-type: inline-size is used
81
- // The browser should apply the bewlo properties to the element.
82
- // However, for reasons that goes beyond my knowledge.
83
- // Chrome 129 broke that behavior, and now we need to make it explicity.
84
- contain: 'layout style inline-size'
85
- });
86
- };
64
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
65
+ var contentAreaWrapper = exports.contentAreaWrapper = (0, _react.css)({
66
+ width: '100%',
67
+ containerType: 'inline-size',
68
+ containerName: 'editor-area',
69
+ // Chrome 129 Regression!
70
+ // By the spec, when the container-type: inline-size is used
71
+ // The browser should apply the bewlo properties to the element.
72
+ // However, for reasons that goes beyond my knowledge.
73
+ // Chrome 129 broke that behavior, and now we need to make it explicity.
74
+ contain: 'layout style inline-size'
75
+ });
76
+
77
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
78
+ var contentAreaWrapperNoStyles = exports.contentAreaWrapperNoStyles = (0, _react.css)({
79
+ display: 'contents'
80
+ });
87
81
 
88
82
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
89
83
  var contentAreaHeightNoToolbar = exports.contentAreaHeightNoToolbar = (0, _react.css)({
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; // 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; // 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
  };
@@ -41,10 +41,15 @@ var layoutColumnStyles = function layoutColumnStyles() {
41
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
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
+ var layoutSectionStyles = function layoutSectionStyles() {
45
+ return (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
46
+ (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t", ";\n\t\t\t\t.layout-section-container [data-layout-section] {\n\t\t\t\t\t> .ProseMirror-widget {\n\t\t\t\t\t\tflex: none;\n\t\t\t\t\t\tdisplay: contents !important;\n\n\t\t\t\t\t\t&[data-blocks-drag-handle-container] div {\n\t\t\t\t\t\t\tdisplay: contents !important;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&[data-blocks-drop-target-container] {\n\t\t\t\t\t\t\tdisplay: block !important;\n\t\t\t\t\t\t\tmargin: ", ";\n\n\t\t\t\t\t\t\t[data-drop-target-for-element] {\n\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t& + [data-layout-column] {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t> [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _styles.columnLayoutResponsiveSharedStyle, "var(--ds-space-negative-050, -4px)") : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
47
+ (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t", "\n\t\t\t"])), _styles.columnLayoutSharedStyle);
48
+ };
44
49
 
45
50
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
46
51
  var layoutBorderStyles = function layoutBorderStyles(viewMode) {
47
- return (0, _react.css)(_templateObject5 || (_templateObject5 = (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() ?
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() ?
48
53
  /* SelectionStyle.Border adds extra ::after content which clashes with hover zone for layout columns and is not needed for layout anyway
49
54
  see platform/packages/editor/editor-shared-styles/src/selection/utils.ts(~L43)
50
55
  */
@@ -53,5 +58,5 @@ var layoutBorderStyles = function layoutBorderStyles(viewMode) {
53
58
 
54
59
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
55
60
  var layoutStyles = exports.layoutStyles = function layoutStyles(viewMode) {
56
- return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\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"])), _styles.columnLayoutSharedStyle, "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) && ".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}"));
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}"));
57
62
  };
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.3.0";
8
+ var version = exports.version = "201.3.1";
package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js CHANGED
@@ -13,8 +13,9 @@ import { fg } from '@atlaskit/platform-feature-flags';
13
13
  import { ClickAreaBlock } from '../../Addon';
14
14
  import { ContextPanel } from '../../ContextPanel';
15
15
  import PluginSlot from '../../PluginSlot';
16
- import { contentArea, contentAreaContainerTypeInlineSize, contentAreaHeightNoToolbar, editorContentAreaStyle, editorContentGutterStyle, ScrollContainer, sidebarArea } from './StyledComponents';
16
+ import { contentArea, contentAreaHeightNoToolbar, contentAreaWrapper, contentAreaWrapperNoStyles, editorContentAreaStyle, editorContentGutterStyle, ScrollContainer, sidebarArea } from './StyledComponents';
17
17
  export const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
18
+ export const EDITOR_CONTAINER = 'ak-editor-container';
18
19
  const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
19
20
  var _contentAreaRef$curre;
20
21
  const theme = useTheme();
@@ -34,15 +35,19 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
34
35
  }
35
36
  }), []);
36
37
  return jsx("div", {
37
- css: [fg('platform_editor_breakout_use_css') ?
38
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
39
- contentAreaContainerTypeInlineSize :
38
+ css: [
40
39
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
41
40
  contentArea,
42
41
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
43
42
  props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
44
43
  "data-testid": CONTENT_AREA_TEST_ID,
45
44
  ref: containerRef
45
+ }, jsx("div", {
46
+ css:
47
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
48
+ fg('platform_editor_breakout_use_css') ? contentAreaWrapper : contentAreaWrapperNoStyles,
49
+ "data-testid": EDITOR_CONTAINER,
50
+ "data-editor-container": fg('platform_editor_breakout_use_css') ? 'true' : 'false'
46
51
  }, jsx(ScrollContainer
47
52
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
48
53
  , {
@@ -85,7 +90,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
85
90
  containerElement: scrollContainerRef.current,
86
91
  dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
87
92
  wrapperElement: props.wrapperElement
88
- }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))), jsx("div", {
93
+ }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null))))), jsx("div", {
89
94
  css: sidebarArea
90
95
  }, props.contextPanel || jsx(ContextPanel, {
91
96
  editorAPI: props.editorAPI,
package/dist/es2019/ui/Appearance/FullPage/StyledComponents.js CHANGED
@@ -52,29 +52,23 @@ export const contentArea = () => {
52
52
  });
53
53
  };
54
54
 
55
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
56
- export const contentAreaContainerTypeInlineSize = () => {
57
- const editorToolbarHeight = FULL_PAGE_EDITOR_TOOLBAR_HEIGHT();
58
- return css({
59
- display: 'flex',
60
- flexDirection: 'row',
61
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
62
- height: `calc(100% - ${editorToolbarHeight})`,
63
- boxSizing: 'border-box',
64
- margin: 0,
65
- padding: 0,
66
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
67
- transition: `padding 0ms ${akEditorSwoopCubicBezier}`,
68
- containerType: 'inline-size',
69
- containerName: 'editor-area',
70
- // Chrome 129 Regression!
71
- // By the spec, when the container-type: inline-size is used
72
- // The browser should apply the bewlo properties to the element.
73
- // However, for reasons that goes beyond my knowledge.
74
- // Chrome 129 broke that behavior, and now we need to make it explicity.
75
- contain: 'layout style inline-size'
76
- });
77
- };
55
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
56
+ export const contentAreaWrapper = css({
57
+ width: '100%',
58
+ containerType: 'inline-size',
59
+ containerName: 'editor-area',
60
+ // Chrome 129 Regression!
61
+ // By the spec, when the container-type: inline-size is used
62
+ // The browser should apply the bewlo properties to the element.
63
+ // However, for reasons that goes beyond my knowledge.
64
+ // Chrome 129 broke that behavior, and now we need to make it explicity.
65
+ contain: 'layout style inline-size'
66
+ });
67
+
68
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
69
+ export const contentAreaWrapperNoStyles = css({
70
+ display: 'contents'
71
+ });
78
72
 
79
73
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
80
74
  export const contentAreaHeightNoToolbar = css({
package/dist/es2019/ui/ContentStyles/layout.js CHANGED
@@ -1,6 +1,6 @@
1
1
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
2
2
  import { css } from '@emotion/react';
3
- import { columnLayoutSharedStyle, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '@atlaskit/editor-common/styles';
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
6
  import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
@@ -73,6 +73,42 @@ css`
73
73
  }
74
74
  }
75
75
  `;
76
+ const layoutSectionStyles = () => fg('platform_editor_advanced_layouts_breakout_resizing') ?
77
+ // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
78
+ css`
79
+ ${columnLayoutResponsiveSharedStyle};
80
+ .layout-section-container [data-layout-section] {
81
+ > .ProseMirror-widget {
82
+ flex: none;
83
+ display: contents !important;
84
+
85
+ &[data-blocks-drag-handle-container] div {
86
+ display: contents !important;
87
+ }
88
+
89
+ &[data-blocks-drop-target-container] {
90
+ display: block !important;
91
+ margin: ${"var(--ds-space-negative-050, -4px)"};
92
+
93
+ [data-drop-target-for-element] {
94
+ position: absolute;
95
+ }
96
+ }
97
+
98
+ & + [data-layout-column] {
99
+ margin: 0;
100
+ }
101
+ }
102
+
103
+ > [data-layout-column] {
104
+ margin: 0;
105
+ }
106
+ }
107
+ ` :
108
+ // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
109
+ css`
110
+ ${columnLayoutSharedStyle}
111
+ `;
76
112
 
77
113
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
78
114
  const layoutBorderStyles = viewMode => css`
@@ -106,8 +142,7 @@ see platform/packages/editor/editor-shared-styles/src/selection/utils.ts(~L43)
106
142
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
107
143
  export const layoutStyles = viewMode => css`
108
144
  .ProseMirror {
109
- ${columnLayoutSharedStyle}
110
-
145
+ ${layoutSectionStyles()}
111
146
  [data-layout-section] {
112
147
  // TODO: Migrate away from gridSize
113
148
  // Recommendation: Replace directly with 7px
@@ -202,7 +237,7 @@ export const layoutStyles = viewMode => css`
202
237
  }
203
238
  }
204
239
 
205
- ${editorExperiment('nested-dnd', true) && `.ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {
240
+ ${editorExperiment('nested-dnd', true) && !fg('platform_editor_advanced_layouts_breakout_resizing') && `.ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {
206
241
  margin: ${"var(--ds-space-100, 8px)"} -${akLayoutGutterOffset + 8}px 0;
207
242
  }`}
208
243
  `;
package/dist/es2019/version-wrapper.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "201.3.0";
2
+ export const version = "201.3.1";
package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js CHANGED
@@ -13,8 +13,9 @@ import { fg } from '@atlaskit/platform-feature-flags';
13
13
  import { ClickAreaBlock } from '../../Addon';
14
14
  import { ContextPanel } from '../../ContextPanel';
15
15
  import PluginSlot from '../../PluginSlot';
16
- import { contentArea, contentAreaContainerTypeInlineSize, contentAreaHeightNoToolbar, editorContentAreaStyle, editorContentGutterStyle, ScrollContainer, sidebarArea } from './StyledComponents';
16
+ import { contentArea, contentAreaHeightNoToolbar, contentAreaWrapper, contentAreaWrapperNoStyles, editorContentAreaStyle, editorContentGutterStyle, ScrollContainer, sidebarArea } from './StyledComponents';
17
17
  export var CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
18
+ export var EDITOR_CONTAINER = 'ak-editor-container';
18
19
  var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
19
20
  var _contentAreaRef$curre;
20
21
  var theme = useTheme();
@@ -36,15 +37,19 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
36
37
  };
37
38
  }, []);
38
39
  return jsx("div", {
39
- css: [fg('platform_editor_breakout_use_css') ?
40
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
41
- contentAreaContainerTypeInlineSize :
40
+ css: [
42
41
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
43
42
  contentArea,
44
43
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
45
44
  props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
46
45
  "data-testid": CONTENT_AREA_TEST_ID,
47
46
  ref: containerRef
47
+ }, jsx("div", {
48
+ css:
49
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
50
+ fg('platform_editor_breakout_use_css') ? contentAreaWrapper : contentAreaWrapperNoStyles,
51
+ "data-testid": EDITOR_CONTAINER,
52
+ "data-editor-container": fg('platform_editor_breakout_use_css') ? 'true' : 'false'
48
53
  }, jsx(ScrollContainer
49
54
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
50
55
  , {
@@ -87,7 +92,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
87
92
  containerElement: scrollContainerRef.current,
88
93
  dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
89
94
  wrapperElement: props.wrapperElement
90
- }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))), jsx("div", {
95
+ }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null))))), jsx("div", {
91
96
  css: sidebarArea
92
97
  }, props.contextPanel || jsx(ContextPanel, {
93
98
  editorAPI: props.editorAPI,
package/dist/esm/ui/Appearance/FullPage/StyledComponents.js CHANGED
@@ -56,29 +56,23 @@ export var contentArea = function contentArea() {
56
56
  });
57
57
  };
58
58
 
59
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
60
- export var contentAreaContainerTypeInlineSize = function contentAreaContainerTypeInlineSize() {
61
- var editorToolbarHeight = FULL_PAGE_EDITOR_TOOLBAR_HEIGHT();
62
- return css({
63
- display: 'flex',
64
- flexDirection: 'row',
65
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
66
- height: "calc(100% - ".concat(editorToolbarHeight, ")"),
67
- boxSizing: 'border-box',
68
- margin: 0,
69
- padding: 0,
70
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
71
- transition: "padding 0ms ".concat(akEditorSwoopCubicBezier),
72
- containerType: 'inline-size',
73
- containerName: 'editor-area',
74
- // Chrome 129 Regression!
75
- // By the spec, when the container-type: inline-size is used
76
- // The browser should apply the bewlo properties to the element.
77
- // However, for reasons that goes beyond my knowledge.
78
- // Chrome 129 broke that behavior, and now we need to make it explicity.
79
- contain: 'layout style inline-size'
80
- });
81
- };
59
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
60
+ export var contentAreaWrapper = css({
61
+ width: '100%',
62
+ containerType: 'inline-size',
63
+ containerName: 'editor-area',
64
+ // Chrome 129 Regression!
65
+ // By the spec, when the container-type: inline-size is used
66
+ // The browser should apply the bewlo properties to the element.
67
+ // However, for reasons that goes beyond my knowledge.
68
+ // Chrome 129 broke that behavior, and now we need to make it explicity.
69
+ contain: 'layout style inline-size'
70
+ });
71
+
72
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
73
+ export var contentAreaWrapperNoStyles = css({
74
+ display: 'contents'
75
+ });
82
76
 
83
77
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
84
78
  export var contentAreaHeightNoToolbar = css({
package/dist/esm/ui/ContentStyles/layout.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
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
- import { columnLayoutSharedStyle, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '@atlaskit/editor-common/styles';
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
8
  import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
@@ -24,10 +24,15 @@ var layoutColumnStyles = function layoutColumnStyles() {
24
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
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
+ var layoutSectionStyles = function layoutSectionStyles() {
28
+ return fg('platform_editor_advanced_layouts_breakout_resizing') ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
29
+ css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\t\t\t", ";\n\t\t\t\t.layout-section-container [data-layout-section] {\n\t\t\t\t\t> .ProseMirror-widget {\n\t\t\t\t\t\tflex: none;\n\t\t\t\t\t\tdisplay: contents !important;\n\n\t\t\t\t\t\t&[data-blocks-drag-handle-container] div {\n\t\t\t\t\t\t\tdisplay: contents !important;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&[data-blocks-drop-target-container] {\n\t\t\t\t\t\t\tdisplay: block !important;\n\t\t\t\t\t\t\tmargin: ", ";\n\n\t\t\t\t\t\t\t[data-drop-target-for-element] {\n\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t& + [data-layout-column] {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t> [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), columnLayoutResponsiveSharedStyle, "var(--ds-space-negative-050, -4px)") : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
30
+ css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t\t\t\t", "\n\t\t\t"])), columnLayoutSharedStyle);
31
+ };
27
32
 
28
33
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
29
34
  var layoutBorderStyles = function layoutBorderStyles(viewMode) {
30
- return css(_templateObject5 || (_templateObject5 = _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() ?
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() ?
31
36
  /* SelectionStyle.Border adds extra ::after content which clashes with hover zone for layout columns and is not needed for layout anyway
32
37
  see platform/packages/editor/editor-shared-styles/src/selection/utils.ts(~L43)
33
38
  */
@@ -36,5 +41,5 @@ var layoutBorderStyles = function layoutBorderStyles(viewMode) {
36
41
 
37
42
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
38
43
  export var layoutStyles = function layoutStyles(viewMode) {
39
- return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\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"])), columnLayoutSharedStyle, "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) && ".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}"));
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}"));
40
45
  };
package/dist/esm/version-wrapper.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "201.3.0";
2
+ export var version = "201.3.1";
package/dist/types/ui/Appearance/FullPage/FullPageContentArea.d.ts CHANGED
@@ -39,6 +39,7 @@ interface FullPageEditorContentAreaProps {
39
39
  isEditorToolbarHidden?: boolean;
40
40
  }
41
41
  export declare const CONTENT_AREA_TEST_ID = "ak-editor-fp-content-area";
42
+ export declare const EDITOR_CONTAINER = "ak-editor-container";
42
43
  export declare const FullPageContentArea: React.ForwardRefExoticComponent<Pick<import("react-intl-next").WithIntlProps<React.PropsWithChildren<FullPageEditorContentAreaProps & WrappedComponentProps & React.RefAttributes<ScrollContainerRefs>>>, "key" | "children" | keyof FullPageEditorContentAreaProps | "forwardedRef"> & React.RefAttributes<any>> & {
43
44
  WrappedComponent: React.ComponentType<FullPageEditorContentAreaProps & WrappedComponentProps & React.RefAttributes<ScrollContainerRefs>>;
44
45
  };
package/dist/types/ui/Appearance/FullPage/StyledComponents.d.ts CHANGED
@@ -14,7 +14,8 @@ export declare const ScrollContainer: import("react").ForwardRefExoticComponent<
14
14
  typographyTheme?: "typography" | "typography-adg3" | "typography-modernized" | "typography-refreshed" | undefined;
15
15
  } | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "mediaGroup" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "useMap" | "wmode" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLDivElement>>;
16
16
  export declare const contentArea: () => import("@emotion/react").SerializedStyles;
17
- export declare const contentAreaContainerTypeInlineSize: () => import("@emotion/react").SerializedStyles;
17
+ export declare const contentAreaWrapper: import("@emotion/react").SerializedStyles;
18
+ export declare const contentAreaWrapperNoStyles: import("@emotion/react").SerializedStyles;
18
19
  export declare const contentAreaHeightNoToolbar: import("@emotion/react").SerializedStyles;
19
20
  export declare const sidebarArea: import("@emotion/react").SerializedStyles;
20
21
  export declare const editorContentAreaHideContainer: import("@emotion/react").SerializedStyles;
package/dist/types-ts4.5/ui/Appearance/FullPage/FullPageContentArea.d.ts CHANGED
@@ -41,6 +41,7 @@ interface FullPageEditorContentAreaProps {
41
41
  isEditorToolbarHidden?: boolean;
42
42
  }
43
43
  export declare const CONTENT_AREA_TEST_ID = "ak-editor-fp-content-area";
44
+ export declare const EDITOR_CONTAINER = "ak-editor-container";
44
45
  export declare const FullPageContentArea: React.ForwardRefExoticComponent<Pick<import("react-intl-next").WithIntlProps<React.PropsWithChildren<FullPageEditorContentAreaProps & WrappedComponentProps & React.RefAttributes<ScrollContainerRefs>>>, "key" | "children" | keyof FullPageEditorContentAreaProps | "forwardedRef"> & React.RefAttributes<any>> & {
45
46
  WrappedComponent: React.ComponentType<FullPageEditorContentAreaProps & WrappedComponentProps & React.RefAttributes<ScrollContainerRefs>>;
46
47
  };
package/dist/types-ts4.5/ui/Appearance/FullPage/StyledComponents.d.ts CHANGED
@@ -14,7 +14,8 @@ export declare const ScrollContainer: import("react").ForwardRefExoticComponent<
14
14
  typographyTheme?: "typography" | "typography-adg3" | "typography-modernized" | "typography-refreshed" | undefined;
15
15
  } | "accept" | "acceptCharset" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "mediaGroup" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "useMap" | "wmode" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLDivElement>>;
16
16
  export declare const contentArea: () => import("@emotion/react").SerializedStyles;
17
- export declare const contentAreaContainerTypeInlineSize: () => import("@emotion/react").SerializedStyles;
17
+ export declare const contentAreaWrapper: import("@emotion/react").SerializedStyles;
18
+ export declare const contentAreaWrapperNoStyles: import("@emotion/react").SerializedStyles;
18
19
  export declare const contentAreaHeightNoToolbar: import("@emotion/react").SerializedStyles;
19
20
  export declare const sidebarArea: import("@emotion/react").SerializedStyles;
20
21
  export declare const editorContentAreaHideContainer: import("@emotion/react").SerializedStyles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "201.3.0",
3
+ "version": "201.3.1",
4
4
  "description": "A package contains Atlassian editor core functionality",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -51,7 +51,7 @@
51
51
  "@atlaskit/editor-shared-styles": "^3.2.0",
52
52
  "@atlaskit/emoji": "^67.9.0",
53
53
  "@atlaskit/icon": "^22.24.0",
54
- "@atlaskit/media-card": "^78.12.0",
54
+ "@atlaskit/media-card": "^78.13.0",
55
55
  "@atlaskit/mention": "^23.3.0",
56
56
  "@atlaskit/platform-feature-flags": "^0.3.0",
57
57
  "@atlaskit/task-decision": "^17.11.0",
@@ -99,11 +99,11 @@
99
99
  "@atlaskit/smart-card": "^30.2.0",
100
100
  "@atlaskit/synchrony-test-helpers": "^2.5.0",
101
101
  "@atlaskit/toggle": "^13.4.0",
102
- "@atlaskit/util-data-test": "^17.12.0",
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.161",
106
+ "@atlassian/search-provider": "2.4.164",
107
107
  "@emotion/jest": "^11.8.0",
108
108
  "@storybook/addon-knobs": "^5.3.18",
109
109
  "@testing-library/react": "^12.1.5",