@atlaskit/renderer 124.14.1 → 124.16.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 (19) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/dist/cjs/react/marks/breakout.js +5 -0
  3. package/dist/cjs/react/nodes/extension.js +21 -0
  4. package/dist/cjs/react/nodes/multiBodiedExtension.js +43 -5
  5. package/dist/cjs/react/utils/breakout.js +15 -0
  6. package/dist/cjs/ui/Renderer/RendererStyleContainer.js +13 -3
  7. package/dist/es2019/react/marks/breakout.js +6 -1
  8. package/dist/es2019/react/nodes/extension.js +21 -0
  9. package/dist/es2019/react/nodes/multiBodiedExtension.js +42 -3
  10. package/dist/es2019/react/utils/breakout.js +9 -0
  11. package/dist/es2019/ui/Renderer/RendererStyleContainer.js +13 -3
  12. package/dist/esm/react/marks/breakout.js +6 -1
  13. package/dist/esm/react/nodes/extension.js +21 -0
  14. package/dist/esm/react/nodes/multiBodiedExtension.js +43 -5
  15. package/dist/esm/react/utils/breakout.js +9 -0
  16. package/dist/esm/ui/Renderer/RendererStyleContainer.js +14 -4
  17. package/dist/types/react/utils/breakout.d.ts +1 -0
  18. package/dist/types-ts4.5/react/utils/breakout.d.ts +1 -0
  19. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,37 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 124.16.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`d2da08dd6c682`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d2da08dd6c682) -
8
+ use css driven width for extension styles in renderer
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies
13
+
14
+ ## 124.15.1
15
+
16
+ ### Patch Changes
17
+
18
+ - [`d155989f1f294`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d155989f1f294) -
19
+ [ux] EDITOR-2885 Add max-width styles for "max" width appearance in renderer
20
+ - [`a05464ea42678`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a05464ea42678) -
21
+ EDITOR-2791 bump adf-schema
22
+ - Updated dependencies
23
+
24
+ ## 124.15.0
25
+
26
+ ### Minor Changes
27
+
28
+ - [`81ac927e830b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/81ac927e830b5) -
29
+ [ux] EDITOR-2866: Add max-width support and guideline wiring for node custom resizers
30
+
31
+ ### Patch Changes
32
+
33
+ - Updated dependencies
34
+
3
35
  ## 124.14.1
4
36
 
5
37
  ### Patch Changes
package/dist/cjs/react/marks/breakout.js CHANGED
@@ -27,6 +27,11 @@ var getWidth = function getWidth(width, mode) {
27
27
  if ((0, _experiments.editorExperiment)('advanced_layouts', true) && width) {
28
28
  return "min(".concat(width, "px, var(--ak-editor--breakout-container-without-gutter-width))");
29
29
  } else {
30
+ if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) {
31
+ if (mode === 'max' || typeof width === 'number' && width >= _editorSharedStyles.akEditorFullWidthLayoutWidth) {
32
+ return "min(".concat(_editorSharedStyles.akEditorMaxLayoutWidth, "px, var(--ak-editor--breakout-container-without-gutter-width))");
33
+ }
34
+ }
30
35
  if (mode === 'full-width') {
31
36
  if ((0, _expValEquals.expValEquals)('platform_editor_renderer_breakout_fix', 'isEnabled', true)) {
32
37
  return "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, var(--ak-editor--breakout-container-without-gutter-width))");
package/dist/cjs/react/nodes/extension.js CHANGED
@@ -11,6 +11,8 @@ var _ExtensionRenderer = _interopRequireDefault(require("../../ui/ExtensionRende
11
11
  var _ui = require("@atlaskit/editor-common/ui");
12
12
  var _utils = require("@atlaskit/editor-common/utils");
13
13
  var _consts = require("../../consts");
14
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
15
+ var _breakout = require("../utils/breakout");
14
16
  var viewportSizes = ['small', 'medium', 'default', 'large', 'xlarge'];
15
17
  // Mirrors sizes from https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/forge/xen-editor-provider/src/render/renderers/ForgeUIExtension.tsx
16
18
  var macroHeights = {
@@ -54,6 +56,25 @@ var renderExtension = exports.renderExtension = function renderExtension(content
54
56
  */
55
57
  var viewportSize = getViewportSize(extensionId, extensionViewportSizes);
56
58
  var extensionHeight = nodeHeight || viewportSize;
59
+ if ((0, _expValEquals.expValEquals)('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
60
+ return /*#__PURE__*/_react.default.createElement("div", {
61
+ ref: options.handleRef
62
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
63
+ ,
64
+ className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
65
+ style: {
66
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
67
+ width: isTopLevel ? (0, _breakout.calcBreakoutWidthCss)(layout) : '100%',
68
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
69
+ minHeight: extensionHeight && "".concat(extensionHeight, "px")
70
+ },
71
+ "data-layout": layout,
72
+ "data-local-id": localId,
73
+ "data-testid": "extension--wrapper"
74
+ }, /*#__PURE__*/_react.default.createElement("div", {
75
+ className: overflowContainerClass
76
+ }, content));
77
+ }
57
78
  return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
58
79
  var width = _ref2.width;
59
80
  return /*#__PURE__*/_react.default.createElement("div", {
package/dist/cjs/react/nodes/multiBodiedExtension.js CHANGED
@@ -15,6 +15,8 @@ var _consts = require("../../consts");
15
15
  var _utils = require("@atlaskit/editor-common/utils");
16
16
  var _actions = require("./multiBodiedExtension/actions");
17
17
  var _context = require("./multiBodiedExtension/context");
18
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
19
+ var _breakout = require("../utils/breakout");
18
20
  var _templateObject;
19
21
  /* eslint-disable @atlaskit/design-system/prefer-primitives, @atlaskit/design-system/consistent-css-prop-usage */
20
22
  /**
@@ -43,7 +45,7 @@ var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_re
43
45
  "data-testid": "multiBodiedExtension-navigation"
44
46
  }, children);
45
47
  };
46
- var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
48
+ var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLegacy(_ref3) {
47
49
  var width = _ref3.width,
48
50
  path = _ref3.path,
49
51
  layout = _ref3.layout,
@@ -56,7 +58,7 @@ var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
56
58
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
57
59
  className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
58
60
  style: {
59
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
61
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
60
62
  width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%'
61
63
  },
62
64
  "data-layout": layout,
@@ -66,6 +68,29 @@ var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
66
68
  className: "".concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
67
69
  }, children));
68
70
  };
71
+ var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_ref4) {
72
+ var path = _ref4.path,
73
+ layout = _ref4.layout,
74
+ children = _ref4.children;
75
+ var isTopLevel = path.length < 1;
76
+ var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
77
+
78
+ // This hierarchy is copied from regular extension (see extension.tsx)
79
+ return (0, _react.jsx)("div", {
80
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
81
+ className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
82
+ style: {
83
+ width: isTopLevel ?
84
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
85
+ (0, _breakout.calcBreakoutWidthCss)(layout) : '100%'
86
+ },
87
+ "data-layout": layout,
88
+ "data-testid": "multiBodiedExtension--wrapper"
89
+ }, (0, _react.jsx)("div", {
90
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
91
+ className: "".concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
92
+ }, children));
93
+ };
69
94
  var MultiBodiedExtension = function MultiBodiedExtension(props) {
70
95
  var _extensionContext$pri;
71
96
  var children = props.children,
@@ -130,6 +155,19 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
130
155
  // make the frame visible
131
156
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
132
157
  var containerActiveFrameStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
158
+ if ((0, _expValEquals.expValEquals)('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
159
+ return (0, _react.jsx)("section", {
160
+ css: [containerStyles, containerActiveFrameStyles],
161
+ "data-testid": "multiBodiedExtension--container",
162
+ "data-multiBodiedExtension-container": true,
163
+ "data-active-child-index": activeChildIndex,
164
+ "data-layout": layout,
165
+ "data-local-id": localId
166
+ }, (0, _react.jsx)(MultiBodiedExtensionWrapperNext, {
167
+ layout: layout,
168
+ path: path
169
+ }, renderContent()));
170
+ }
133
171
  return (0, _react.jsx)("section", {
134
172
  css: [containerStyles, containerActiveFrameStyles],
135
173
  "data-testid": "multiBodiedExtension--container",
@@ -137,9 +175,9 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
137
175
  "data-active-child-index": activeChildIndex,
138
176
  "data-layout": layout,
139
177
  "data-local-id": localId
140
- }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref4) {
141
- var width = _ref4.width;
142
- return (0, _react.jsx)(MultiBodiedExtensionWrapper, {
178
+ }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref5) {
179
+ var width = _ref5.width;
180
+ return (0, _react.jsx)(MultiBodiedExtensionWrapperLegacy, {
143
181
  layout: layout,
144
182
  width: width,
145
183
  path: path
package/dist/cjs/react/utils/breakout.js ADDED
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.calcBreakoutWidthCss = void 0;
7
+ var calcBreakoutWidthCss = exports.calcBreakoutWidthCss = function calcBreakoutWidthCss(layout) {
8
+ if (layout === 'full-width') {
9
+ return 'min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--full-width-layout-width))';
10
+ }
11
+ if (layout === 'wide') {
12
+ return 'min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--breakout-wide-layout-width))';
13
+ }
14
+ return '100%';
15
+ };
package/dist/cjs/ui/Renderer/RendererStyleContainer.js CHANGED
@@ -58,7 +58,8 @@ var baseStyles = (0, _react.css)((_css = {
58
58
  fontSize: 'var(--ak-renderer-base-font-size)',
59
59
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
60
60
  lineHeight: '1.5rem',
61
- color: "var(--ds-text, ".concat(_colors.N800, ")")
61
+ color: "var(--ds-text, ".concat(_colors.N800, ")"),
62
+ '--ak-editor--full-width-layout-width': "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px")
62
63
  }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css, ".".concat(_consts.RendererCssClassName.DOCUMENT, "::after"), {
63
64
  // we add a clearfix after ak-renderer-document in order to
64
65
  // contain internal floats (such as media images that are "wrap-left")
@@ -206,6 +207,15 @@ var rendererFullWidthStyles = (0, _react.css)({
206
207
  width: '100% !important'
207
208
  }
208
209
  });
210
+ var rendererMaxWidthStyles = (0, _react.css)({
211
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
212
+ maxWidth: "".concat(_editorSharedStyles.akEditorMaxWidthLayoutWidth, "px"),
213
+ margin: "0 auto",
214
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
215
+ '.fabric-editor-breakout-mark:not([data-has-width="true"]), .ak-renderer-extension': {
216
+ width: '100% !important'
217
+ }
218
+ });
209
219
  var rendererFullWidthStylesForTableResizing = (0, _react.css)({
210
220
  '.pm-table-container': {
211
221
  width: '100% !important'
@@ -1645,13 +1655,13 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
1645
1655
  '--ak-renderer-editor-font-heading-h6': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h6')),
1646
1656
  '--ak-renderer-editor-font-normal-text': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.body'))
1647
1657
  },
1648
- css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, !(0, _platformFeatureFlags.fg)('aifc_create_enabled') && telepointerStyles, (0, _platformFeatureFlags.fg)('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (contentMode === 'compact' || contentMode === 'dense') && isCompactModeSupported && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, (0, _expValEquals.expValEquals)('platform_editor_text_highlight_padding', 'isEnabled', true) &&
1658
+ css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, (appearance === 'full-width' || appearance === 'max' && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) && rendererMaxWidthStyles, !(0, _platformFeatureFlags.fg)('aifc_create_enabled') && telepointerStyles, (0, _platformFeatureFlags.fg)('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (contentMode === 'compact' || contentMode === 'dense') && isCompactModeSupported && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, (0, _expValEquals.expValEquals)('platform_editor_text_highlight_padding', 'isEnabled', true) &&
1649
1659
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
1650
1660
  textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
1651
1661
  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
1652
1662
  (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && (0, _platformFeatureFlags.fg)('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
1653
1663
  // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
1654
- (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, appearance === 'full-width' && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined],
1664
+ (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined],
1655
1665
  "data-testid": testId
1656
1666
  }, children)
1657
1667
  );
package/dist/es2019/react/marks/breakout.js CHANGED
@@ -5,7 +5,7 @@ import _extends from "@babel/runtime/helpers/extends";
5
5
  */
6
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
7
  import { css, jsx } from '@emotion/react';
8
- import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
8
+ import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxLayoutWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
9
9
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
10
10
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
11
11
  const wrapperStyles = css({
@@ -19,6 +19,11 @@ const getWidth = (width, mode) => {
19
19
  if (editorExperiment('advanced_layouts', true) && width) {
20
20
  return `min(${width}px, var(--ak-editor--breakout-container-without-gutter-width))`;
21
21
  } else {
22
+ if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
23
+ if (mode === 'max' || typeof width === 'number' && width >= akEditorFullWidthLayoutWidth) {
24
+ return `min(${akEditorMaxLayoutWidth}px, var(--ak-editor--breakout-container-without-gutter-width))`;
25
+ }
26
+ }
22
27
  if (mode === 'full-width') {
23
28
  if (expValEquals('platform_editor_renderer_breakout_fix', 'isEnabled', true)) {
24
29
  return `min(${akEditorFullWidthLayoutWidth}px, var(--ak-editor--breakout-container-without-gutter-width))`;
package/dist/es2019/react/nodes/extension.js CHANGED
@@ -4,6 +4,8 @@ import ExtensionRenderer from '../../ui/ExtensionRenderer';
4
4
  import { overflowShadow, WidthConsumer } from '@atlaskit/editor-common/ui';
5
5
  import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
6
6
  import { RendererCssClassName } from '../../consts';
7
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
8
+ import { calcBreakoutWidthCss } from '../utils/breakout';
7
9
  const viewportSizes = ['small', 'medium', 'default', 'large', 'xlarge'];
8
10
  // Mirrors sizes from https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/forge/xen-editor-provider/src/render/renderers/ForgeUIExtension.tsx
9
11
  const macroHeights = {
@@ -39,6 +41,25 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
39
41
  */
40
42
  const viewportSize = getViewportSize(extensionId, extensionViewportSizes);
41
43
  const extensionHeight = nodeHeight || viewportSize;
44
+ if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
45
+ return /*#__PURE__*/React.createElement("div", {
46
+ ref: options.handleRef
47
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
48
+ ,
49
+ className: `${RendererCssClassName.EXTENSION} ${options.shadowClassNames} ${centerAlignClass}`,
50
+ style: {
51
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
52
+ width: isTopLevel ? calcBreakoutWidthCss(layout) : '100%',
53
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
54
+ minHeight: extensionHeight && `${extensionHeight}px`
55
+ },
56
+ "data-layout": layout,
57
+ "data-local-id": localId,
58
+ "data-testid": "extension--wrapper"
59
+ }, /*#__PURE__*/React.createElement("div", {
60
+ className: overflowContainerClass
61
+ }, content));
62
+ }
42
63
  return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
43
64
  width
44
65
  }) => /*#__PURE__*/React.createElement("div", {
package/dist/es2019/react/nodes/multiBodiedExtension.js CHANGED
@@ -13,6 +13,8 @@ import { RendererCssClassName } from '../../consts';
13
13
  import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
14
14
  import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
15
15
  import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
16
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
17
+ import { calcBreakoutWidthCss } from '../utils/breakout';
16
18
  const containerStyles = css({
17
19
  // Remove top margin if MBE is the first on the doc/page (MBE can only be on the first level)
18
20
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
@@ -34,7 +36,7 @@ const MultiBodiedExtensionNavigation = ({
34
36
  "data-testid": "multiBodiedExtension-navigation"
35
37
  }, children);
36
38
  };
37
- const MultiBodiedExtensionWrapper = ({
39
+ const MultiBodiedExtensionWrapperLegacy = ({
38
40
  width,
39
41
  path,
40
42
  layout,
@@ -48,7 +50,7 @@ const MultiBodiedExtensionWrapper = ({
48
50
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
49
51
  className: `${RendererCssClassName.EXTENSION} ${centerAlignClass}`,
50
52
  style: {
51
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
53
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
52
54
  width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
53
55
  },
54
56
  "data-layout": layout,
@@ -58,6 +60,30 @@ const MultiBodiedExtensionWrapper = ({
58
60
  className: `${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`
59
61
  }, children));
60
62
  };
63
+ const MultiBodiedExtensionWrapperNext = ({
64
+ path,
65
+ layout,
66
+ children
67
+ }) => {
68
+ const isTopLevel = path.length < 1;
69
+ const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
70
+
71
+ // This hierarchy is copied from regular extension (see extension.tsx)
72
+ return jsx("div", {
73
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
74
+ className: `${RendererCssClassName.EXTENSION} ${centerAlignClass}`,
75
+ style: {
76
+ width: isTopLevel ?
77
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
78
+ calcBreakoutWidthCss(layout) : '100%'
79
+ },
80
+ "data-layout": layout,
81
+ "data-testid": "multiBodiedExtension--wrapper"
82
+ }, jsx("div", {
83
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
84
+ className: `${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`
85
+ }, children));
86
+ };
61
87
  const MultiBodiedExtension = props => {
62
88
  var _extensionContext$pri;
63
89
  const {
@@ -124,6 +150,19 @@ const MultiBodiedExtension = props => {
124
150
  display: block;
125
151
  }
126
152
  `;
153
+ if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
154
+ return jsx("section", {
155
+ css: [containerStyles, containerActiveFrameStyles],
156
+ "data-testid": "multiBodiedExtension--container",
157
+ "data-multiBodiedExtension-container": true,
158
+ "data-active-child-index": activeChildIndex,
159
+ "data-layout": layout,
160
+ "data-local-id": localId
161
+ }, jsx(MultiBodiedExtensionWrapperNext, {
162
+ layout: layout,
163
+ path: path
164
+ }, renderContent()));
165
+ }
127
166
  return jsx("section", {
128
167
  css: [containerStyles, containerActiveFrameStyles],
129
168
  "data-testid": "multiBodiedExtension--container",
@@ -133,7 +172,7 @@ const MultiBodiedExtension = props => {
133
172
  "data-local-id": localId
134
173
  }, jsx(WidthConsumer, null, ({
135
174
  width
136
- }) => jsx(MultiBodiedExtensionWrapper, {
175
+ }) => jsx(MultiBodiedExtensionWrapperLegacy, {
137
176
  layout: layout,
138
177
  width: width,
139
178
  path: path
package/dist/es2019/react/utils/breakout.js ADDED
@@ -0,0 +1,9 @@
1
+ export const calcBreakoutWidthCss = layout => {
2
+ if (layout === 'full-width') {
3
+ return 'min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--full-width-layout-width))';
4
+ }
5
+ if (layout === 'wide') {
6
+ return 'min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--breakout-wide-layout-width))';
7
+ }
8
+ return '100%';
9
+ };
package/dist/es2019/ui/Renderer/RendererStyleContainer.js CHANGED
@@ -13,7 +13,7 @@ import { FullPagePadding } from './style';
13
13
  import { fg } from '@atlaskit/platform-feature-flags';
14
14
  import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
15
15
  import { RendererCssClassName } from '../../consts';
16
- import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, scaledBlockNodesVerticalMargin, gridMediumMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullPageDenseFontSize } from '@atlaskit/editor-shared-styles';
16
+ import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, scaledBlockNodesVerticalMargin, gridMediumMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullPageDenseFontSize } from '@atlaskit/editor-shared-styles';
17
17
  import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
18
18
  import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
19
19
  import { CodeBlockSharedCssClassName, DateSharedCssClassName, listItemCounterPadding, richMediaClassName, SmartCardSharedCssClassName, tableCellBorderWidth, tableCellMinWidth, tableCellPadding, tableMarginTop, TableSharedCssClassName, TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -50,6 +50,7 @@ const baseStyles = css({
50
50
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
51
51
  lineHeight: '1.5rem',
52
52
  color: `var(--ds-text, ${N800})`,
53
+ '--ak-editor--full-width-layout-width': `${akEditorFullWidthLayoutWidth}px`,
53
54
  [`.${RendererCssClassName.DOCUMENT}::after`]: {
54
55
  // we add a clearfix after ak-renderer-document in order to
55
56
  // contain internal floats (such as media images that are "wrap-left")
@@ -280,6 +281,15 @@ const rendererFullWidthStyles = css({
280
281
  width: '100% !important'
281
282
  }
282
283
  });
284
+ const rendererMaxWidthStyles = css({
285
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
286
+ maxWidth: `${akEditorMaxWidthLayoutWidth}px`,
287
+ margin: `0 auto`,
288
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
289
+ '.fabric-editor-breakout-mark:not([data-has-width="true"]), .ak-renderer-extension': {
290
+ width: '100% !important'
291
+ }
292
+ });
283
293
  const rendererFullWidthStylesForTableResizing = css({
284
294
  '.pm-table-container': {
285
295
  width: '100% !important'
@@ -2068,13 +2078,13 @@ export const RendererStyleContainer = props => {
2068
2078
  '--ak-renderer-editor-font-heading-h6': `${editorUGCToken('editor.font.heading.h6')}`,
2069
2079
  '--ak-renderer-editor-font-normal-text': `${editorUGCToken('editor.font.body')}`
2070
2080
  },
2071
- css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, !fg('aifc_create_enabled') && telepointerStyles, fg('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (contentMode === 'compact' || contentMode === 'dense') && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
2081
+ css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, (appearance === 'full-width' || appearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) && rendererMaxWidthStyles, !fg('aifc_create_enabled') && telepointerStyles, fg('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (contentMode === 'compact' || contentMode === 'dense') && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
2072
2082
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
2073
2083
  textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
2074
2084
  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
2075
2085
  fg('editor_inline_comments_on_inline_nodes') && fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
2076
2086
  // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
2077
- fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, appearance === 'full-width' && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined],
2087
+ fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined],
2078
2088
  "data-testid": testId
2079
2089
  }, children)
2080
2090
  );
package/dist/esm/react/marks/breakout.js CHANGED
@@ -5,7 +5,7 @@ import _extends from "@babel/runtime/helpers/extends";
5
5
  */
6
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
7
  import { css, jsx } from '@emotion/react';
8
- import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
8
+ import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxLayoutWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
9
9
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
10
10
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
11
11
  var wrapperStyles = css({
@@ -19,6 +19,11 @@ var getWidth = function getWidth(width, mode) {
19
19
  if (editorExperiment('advanced_layouts', true) && width) {
20
20
  return "min(".concat(width, "px, var(--ak-editor--breakout-container-without-gutter-width))");
21
21
  } else {
22
+ if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
23
+ if (mode === 'max' || typeof width === 'number' && width >= akEditorFullWidthLayoutWidth) {
24
+ return "min(".concat(akEditorMaxLayoutWidth, "px, var(--ak-editor--breakout-container-without-gutter-width))");
25
+ }
26
+ }
22
27
  if (mode === 'full-width') {
23
28
  if (expValEquals('platform_editor_renderer_breakout_fix', 'isEnabled', true)) {
24
29
  return "min(".concat(akEditorFullWidthLayoutWidth, "px, var(--ak-editor--breakout-container-without-gutter-width))");
package/dist/esm/react/nodes/extension.js CHANGED
@@ -4,6 +4,8 @@ import ExtensionRenderer from '../../ui/ExtensionRenderer';
4
4
  import { overflowShadow, WidthConsumer } from '@atlaskit/editor-common/ui';
5
5
  import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
6
6
  import { RendererCssClassName } from '../../consts';
7
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
8
+ import { calcBreakoutWidthCss } from '../utils/breakout';
7
9
  var viewportSizes = ['small', 'medium', 'default', 'large', 'xlarge'];
8
10
  // Mirrors sizes from https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/browse/platform/packages/forge/xen-editor-provider/src/render/renderers/ForgeUIExtension.tsx
9
11
  var macroHeights = {
@@ -47,6 +49,25 @@ export var renderExtension = function renderExtension(content, layout) {
47
49
  */
48
50
  var viewportSize = getViewportSize(extensionId, extensionViewportSizes);
49
51
  var extensionHeight = nodeHeight || viewportSize;
52
+ if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
53
+ return /*#__PURE__*/React.createElement("div", {
54
+ ref: options.handleRef
55
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
56
+ ,
57
+ className: "".concat(RendererCssClassName.EXTENSION, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
58
+ style: {
59
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
60
+ width: isTopLevel ? calcBreakoutWidthCss(layout) : '100%',
61
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
62
+ minHeight: extensionHeight && "".concat(extensionHeight, "px")
63
+ },
64
+ "data-layout": layout,
65
+ "data-local-id": localId,
66
+ "data-testid": "extension--wrapper"
67
+ }, /*#__PURE__*/React.createElement("div", {
68
+ className: overflowContainerClass
69
+ }, content));
70
+ }
50
71
  return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
51
72
  var width = _ref2.width;
52
73
  return /*#__PURE__*/React.createElement("div", {
package/dist/esm/react/nodes/multiBodiedExtension.js CHANGED
@@ -16,6 +16,8 @@ import { RendererCssClassName } from '../../consts';
16
16
  import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
17
17
  import { useMultiBodiedExtensionActions } from './multiBodiedExtension/actions';
18
18
  import { useMultiBodiedExtensionContext } from './multiBodiedExtension/context';
19
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
20
+ import { calcBreakoutWidthCss } from '../utils/breakout';
19
21
  var containerStyles = css({
20
22
  // Remove top margin if MBE is the first on the doc/page (MBE can only be on the first level)
21
23
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
@@ -35,7 +37,7 @@ var MultiBodiedExtensionNavigation = function MultiBodiedExtensionNavigation(_re
35
37
  "data-testid": "multiBodiedExtension-navigation"
36
38
  }, children);
37
39
  };
38
- var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
40
+ var MultiBodiedExtensionWrapperLegacy = function MultiBodiedExtensionWrapperLegacy(_ref3) {
39
41
  var width = _ref3.width,
40
42
  path = _ref3.path,
41
43
  layout = _ref3.layout,
@@ -48,7 +50,7 @@ var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
48
50
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
49
51
  className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
50
52
  style: {
51
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
53
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
52
54
  width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
53
55
  },
54
56
  "data-layout": layout,
@@ -58,6 +60,29 @@ var MultiBodiedExtensionWrapper = function MultiBodiedExtensionWrapper(_ref3) {
58
60
  className: "".concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
59
61
  }, children));
60
62
  };
63
+ var MultiBodiedExtensionWrapperNext = function MultiBodiedExtensionWrapperNext(_ref4) {
64
+ var path = _ref4.path,
65
+ layout = _ref4.layout,
66
+ children = _ref4.children;
67
+ var isTopLevel = path.length < 1;
68
+ var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
69
+
70
+ // This hierarchy is copied from regular extension (see extension.tsx)
71
+ return jsx("div", {
72
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
73
+ className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
74
+ style: {
75
+ width: isTopLevel ?
76
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
77
+ calcBreakoutWidthCss(layout) : '100%'
78
+ },
79
+ "data-layout": layout,
80
+ "data-testid": "multiBodiedExtension--wrapper"
81
+ }, jsx("div", {
82
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
83
+ className: "".concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
84
+ }, children));
85
+ };
61
86
  var MultiBodiedExtension = function MultiBodiedExtension(props) {
62
87
  var _extensionContext$pri;
63
88
  var children = props.children,
@@ -122,6 +147,19 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
122
147
  // make the frame visible
123
148
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
124
149
  var containerActiveFrameStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
150
+ if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
151
+ return jsx("section", {
152
+ css: [containerStyles, containerActiveFrameStyles],
153
+ "data-testid": "multiBodiedExtension--container",
154
+ "data-multiBodiedExtension-container": true,
155
+ "data-active-child-index": activeChildIndex,
156
+ "data-layout": layout,
157
+ "data-local-id": localId
158
+ }, jsx(MultiBodiedExtensionWrapperNext, {
159
+ layout: layout,
160
+ path: path
161
+ }, renderContent()));
162
+ }
125
163
  return jsx("section", {
126
164
  css: [containerStyles, containerActiveFrameStyles],
127
165
  "data-testid": "multiBodiedExtension--container",
@@ -129,9 +167,9 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
129
167
  "data-active-child-index": activeChildIndex,
130
168
  "data-layout": layout,
131
169
  "data-local-id": localId
132
- }, jsx(WidthConsumer, null, function (_ref4) {
133
- var width = _ref4.width;
134
- return jsx(MultiBodiedExtensionWrapper, {
170
+ }, jsx(WidthConsumer, null, function (_ref5) {
171
+ var width = _ref5.width;
172
+ return jsx(MultiBodiedExtensionWrapperLegacy, {
135
173
  layout: layout,
136
174
  width: width,
137
175
  path: path
package/dist/esm/react/utils/breakout.js ADDED
@@ -0,0 +1,9 @@
1
+ export var calcBreakoutWidthCss = function calcBreakoutWidthCss(layout) {
2
+ if (layout === 'full-width') {
3
+ return 'min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--full-width-layout-width))';
4
+ }
5
+ if (layout === 'wide') {
6
+ return 'min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--breakout-wide-layout-width))';
7
+ }
8
+ return '100%';
9
+ };
package/dist/esm/ui/Renderer/RendererStyleContainer.js CHANGED
@@ -15,7 +15,7 @@ import { FullPagePadding } from './style';
15
15
  import { fg } from '@atlaskit/platform-feature-flags';
16
16
  import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
17
17
  import { RendererCssClassName } from '../../consts';
18
- import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, scaledBlockNodesVerticalMargin, gridMediumMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullPageDenseFontSize } from '@atlaskit/editor-shared-styles';
18
+ import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, scaledBlockNodesVerticalMargin, gridMediumMaxWidth, akEditorFullPageDefaultFontSize, akEditorFullPageDenseFontSize } from '@atlaskit/editor-shared-styles';
19
19
  import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
20
20
  import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
21
21
  import { CodeBlockSharedCssClassName, DateSharedCssClassName, listItemCounterPadding, richMediaClassName, SmartCardSharedCssClassName, tableCellBorderWidth, tableCellMinWidth, tableCellPadding, tableMarginTop, TableSharedCssClassName, TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -51,7 +51,8 @@ var baseStyles = css((_css = {
51
51
  fontSize: 'var(--ak-renderer-base-font-size)',
52
52
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
53
53
  lineHeight: '1.5rem',
54
- color: "var(--ds-text, ".concat(N800, ")")
54
+ color: "var(--ds-text, ".concat(N800, ")"),
55
+ '--ak-editor--full-width-layout-width': "".concat(akEditorFullWidthLayoutWidth, "px")
55
56
  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css, ".".concat(RendererCssClassName.DOCUMENT, "::after"), {
56
57
  // we add a clearfix after ak-renderer-document in order to
57
58
  // contain internal floats (such as media images that are "wrap-left")
@@ -199,6 +200,15 @@ var rendererFullWidthStyles = css({
199
200
  width: '100% !important'
200
201
  }
201
202
  });
203
+ var rendererMaxWidthStyles = css({
204
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
205
+ maxWidth: "".concat(akEditorMaxWidthLayoutWidth, "px"),
206
+ margin: "0 auto",
207
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
208
+ '.fabric-editor-breakout-mark:not([data-has-width="true"]), .ak-renderer-extension': {
209
+ width: '100% !important'
210
+ }
211
+ });
202
212
  var rendererFullWidthStylesForTableResizing = css({
203
213
  '.pm-table-container': {
204
214
  width: '100% !important'
@@ -1638,13 +1648,13 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
1638
1648
  '--ak-renderer-editor-font-heading-h6': "".concat(editorUGCToken('editor.font.heading.h6')),
1639
1649
  '--ak-renderer-editor-font-normal-text': "".concat(editorUGCToken('editor.font.body'))
1640
1650
  },
1641
- css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, !fg('aifc_create_enabled') && telepointerStyles, fg('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (contentMode === 'compact' || contentMode === 'dense') && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
1651
+ css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, (appearance === 'full-width' || appearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) && rendererMaxWidthStyles, !fg('aifc_create_enabled') && telepointerStyles, fg('aifc_create_enabled') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (contentMode === 'compact' || contentMode === 'dense') && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
1642
1652
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
1643
1653
  textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
1644
1654
  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
1645
1655
  fg('editor_inline_comments_on_inline_nodes') && fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
1646
1656
  // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
1647
- fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, appearance === 'full-width' && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined],
1657
+ fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined],
1648
1658
  "data-testid": testId
1649
1659
  }, children)
1650
1660
  );
package/dist/types/react/utils/breakout.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const calcBreakoutWidthCss: (layout: "full-width" | "wide" | "default") => "100%" | "min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--full-width-layout-width))" | "min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--breakout-wide-layout-width))";
package/dist/types-ts4.5/react/utils/breakout.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const calcBreakoutWidthCss: (layout: "full-width" | "wide" | "default") => "100%" | "min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--full-width-layout-width))" | "min(var(--ak-editor--breakout-container-without-gutter-width), var(--ak-editor--breakout-wide-layout-width))";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/renderer",
3
- "version": "124.14.1",
3
+ "version": "124.16.0",
4
4
  "description": "Renderer component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
23
23
  }
24
24
  },
25
25
  "dependencies": {
26
- "@atlaskit/adf-schema": "^51.3.2",
26
+ "@atlaskit/adf-schema": "^51.4.0",
27
27
  "@atlaskit/adf-utils": "^19.26.0",
28
28
  "@atlaskit/afm-i18n-platform-editor-renderer": "2.10.0",
29
29
  "@atlaskit/analytics-listeners": "^9.1.0",
@@ -35,7 +35,7 @@
35
35
  "@atlaskit/editor-json-transformer": "^8.31.0",
36
36
  "@atlaskit/editor-palette": "^2.1.0",
37
37
  "@atlaskit/editor-prosemirror": "7.0.0",
38
- "@atlaskit/editor-shared-styles": "^3.9.0",
38
+ "@atlaskit/editor-shared-styles": "^3.10.0",
39
39
  "@atlaskit/editor-tables": "^2.9.0",
40
40
  "@atlaskit/emoji": "^69.8.0",
41
41
  "@atlaskit/feature-gate-js-client": "^5.5.0",
@@ -44,7 +44,7 @@
44
44
  "@atlaskit/link-datasource": "^4.30.0",
45
45
  "@atlaskit/link-extractors": "^2.4.0",
46
46
  "@atlaskit/linking-common": "^9.8.0",
47
- "@atlaskit/media-card": "^79.7.0",
47
+ "@atlaskit/media-card": "^79.8.0",
48
48
  "@atlaskit/media-client": "^35.6.0",
49
49
  "@atlaskit/media-client-react": "^4.1.0",
50
50
  "@atlaskit/media-common": "^12.3.0",
@@ -53,14 +53,14 @@
53
53
  "@atlaskit/media-viewer": "^52.4.0",
54
54
  "@atlaskit/platform-feature-flags": "^1.1.0",
55
55
  "@atlaskit/platform-feature-flags-react": "^0.4.0",
56
- "@atlaskit/react-ufo": "^4.14.0",
57
- "@atlaskit/smart-card": "^43.7.0",
56
+ "@atlaskit/react-ufo": "^4.15.0",
57
+ "@atlaskit/smart-card": "^43.8.0",
58
58
  "@atlaskit/status": "^3.0.0",
59
59
  "@atlaskit/task-decision": "^19.2.0",
60
60
  "@atlaskit/theme": "^21.0.0",
61
- "@atlaskit/tmp-editor-statsig": "^13.38.0",
61
+ "@atlaskit/tmp-editor-statsig": "^13.39.0",
62
62
  "@atlaskit/tokens": "^8.0.0",
63
- "@atlaskit/tooltip": "^20.9.0",
63
+ "@atlaskit/tooltip": "^20.10.0",
64
64
  "@atlaskit/visually-hidden": "^3.0.0",
65
65
  "@babel/runtime": "^7.0.0",
66
66
  "@emotion/react": "^11.7.1",
@@ -72,7 +72,7 @@
72
72
  "uuid": "^3.1.0"
73
73
  },
74
74
  "peerDependencies": {
75
- "@atlaskit/editor-common": "^110.31.0",
75
+ "@atlaskit/editor-common": "^110.32.0",
76
76
  "@atlaskit/link-provider": "^4.0.0",
77
77
  "@atlaskit/media-core": "^37.0.0",
78
78
  "react": "^18.2.0",