@atlaskit/editor-core 197.0.0 → 197.1.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 (40) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/composable-editor/BaseThemeWrapper.js +29 -0
  3. package/dist/cjs/composable-editor/editor-internal.js +12 -7
  4. package/dist/cjs/presets/universal.js +6 -2
  5. package/dist/cjs/ui/Appearance/Comment/Comment.js +2 -2
  6. package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js +63 -67
  7. package/dist/cjs/ui/Appearance/FullPage/StyledComponents.js +6 -12
  8. package/dist/cjs/ui/CollapsedEditor/index.js +2 -2
  9. package/dist/cjs/ui/ContentStyles/index.js +1 -1
  10. package/dist/cjs/ui/IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper.js +24 -0
  11. package/dist/cjs/version-wrapper.js +1 -1
  12. package/dist/es2019/composable-editor/BaseThemeWrapper.js +19 -0
  13. package/dist/es2019/composable-editor/editor-internal.js +11 -6
  14. package/dist/es2019/presets/universal.js +6 -2
  15. package/dist/es2019/ui/Appearance/Comment/Comment.js +3 -3
  16. package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js +65 -67
  17. package/dist/es2019/ui/Appearance/FullPage/StyledComponents.js +6 -12
  18. package/dist/es2019/ui/CollapsedEditor/index.js +1 -1
  19. package/dist/es2019/ui/ContentStyles/index.js +13 -0
  20. package/dist/es2019/ui/IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper.js +14 -0
  21. package/dist/es2019/version-wrapper.js +1 -1
  22. package/dist/esm/composable-editor/BaseThemeWrapper.js +20 -0
  23. package/dist/esm/composable-editor/editor-internal.js +11 -6
  24. package/dist/esm/presets/universal.js +6 -2
  25. package/dist/esm/ui/Appearance/Comment/Comment.js +3 -3
  26. package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js +64 -68
  27. package/dist/esm/ui/Appearance/FullPage/StyledComponents.js +6 -12
  28. package/dist/esm/ui/CollapsedEditor/index.js +1 -1
  29. package/dist/esm/ui/ContentStyles/index.js +1 -1
  30. package/dist/esm/ui/IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper.js +15 -0
  31. package/dist/esm/version-wrapper.js +1 -1
  32. package/dist/types/composable-editor/BaseThemeWrapper.d.ts +7 -0
  33. package/dist/types/presets/universal.d.ts +86 -2
  34. package/dist/types/ui/Appearance/FullPage/StyledComponents.d.ts +1 -2
  35. package/dist/types/ui/IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper.d.ts +6 -0
  36. package/dist/types-ts4.5/composable-editor/BaseThemeWrapper.d.ts +7 -0
  37. package/dist/types-ts4.5/presets/universal.d.ts +86 -2
  38. package/dist/types-ts4.5/ui/Appearance/FullPage/StyledComponents.d.ts +1 -2
  39. package/dist/types-ts4.5/ui/IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper.d.ts +6 -0
  40. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 197.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#135207](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/135207)
8
+ [`84391e4360fbd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/84391e4360fbd) -
9
+ Refactor editor internals to minimise bundle size and javascript run by removing width observer
10
+ from main editor.
11
+
12
+ ## 197.1.0
13
+
14
+ ### Minor Changes
15
+
16
+ - [#135270](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/135270)
17
+ [`4a75557335357`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4a75557335357) -
18
+ [ux] [ED-23237] feat(node data provider): wire up to emoji provider
19
+
3
20
  ## 197.0.0
4
21
 
5
22
  ### Major Changes
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+
3
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.BaseThemeWrapper = BaseThemeWrapper;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _react2 = require("@emotion/react");
10
+ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
11
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
12
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
13
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
14
+
15
+ // Default value from: `import { fontSize } from '@atlaskit/theme/constants';`
16
+ var defaultFontSize = 14;
17
+ function BaseThemeWrapper(_ref) {
18
+ var baseFontSize = _ref.baseFontSize,
19
+ children = _ref.children;
20
+ var memoizedTheme = (0, _react.useMemo)(function () {
21
+ return {
22
+ baseFontSize: baseFontSize || defaultFontSize,
23
+ layoutMaxWidth: _editorSharedStyles.akEditorDefaultLayoutWidth
24
+ };
25
+ }, [baseFontSize]);
26
+ return /*#__PURE__*/_react.default.createElement(_react2.ThemeProvider, {
27
+ theme: memoizedTheme
28
+ }, children);
29
+ }
@@ -12,7 +12,6 @@ var _react = require("react");
12
12
  var _react2 = require("@emotion/react");
13
13
  var _analytics = require("@atlaskit/editor-common/analytics");
14
14
  var _portal = require("@atlaskit/editor-common/portal");
15
- var _ui = require("@atlaskit/editor-common/ui");
16
15
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
17
16
  var _ErrorBoundary = _interopRequireDefault(require("../create-editor/ErrorBoundary"));
18
17
  var _featureFlagsFromProps = require("../create-editor/feature-flags-from-props");
@@ -20,7 +19,9 @@ var _ReactEditorView = _interopRequireDefault(require("../create-editor/ReactEdi
20
19
  var _contextAdapter = require("../nodeviews/context-adapter");
21
20
  var _context = require("../presets/context");
22
21
  var _EditorContext = _interopRequireDefault(require("../ui/EditorContext"));
22
+ var _IntlProviderIfMissingWrapper = require("../ui/IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper");
23
23
  var _RenderTracking = require("../utils/performance/components/RenderTracking");
24
+ var _BaseThemeWrapper = require("./BaseThemeWrapper");
24
25
  var _useProviders = require("./hooks/useProviders");
25
26
  var _getBaseFontSize = require("./utils/getBaseFontSize");
26
27
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -28,6 +29,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
28
29
  * @jsxRuntime classic
29
30
  * @jsx jsx
30
31
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
32
+ var editorContainerStyles = (0, _react2.css)({
33
+ position: 'relative',
34
+ width: '100%',
35
+ height: '100%'
36
+ });
37
+
31
38
  /**
32
39
  * EditorInternalComponent is used to capture the common component
33
40
  * from the `render` method of `Editor` and share it with `EditorNext`.
@@ -82,13 +89,11 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
82
89
  createAnalyticsEvent: createAnalyticsEvent,
83
90
  contextIdentifierProvider: props.contextIdentifierProvider,
84
91
  featureFlags: featureFlags
85
- }, (0, _react2.jsx)(_ui.WidthProvider, {
86
- css: (0, _react2.css)({
87
- height: '100%'
88
- })
92
+ }, (0, _react2.jsx)("div", {
93
+ css: editorContainerStyles
89
94
  }, (0, _react2.jsx)(_EditorContext.default, {
90
95
  editorActions: editorActions
91
- }, (0, _react2.jsx)(_contextAdapter.ContextAdapter, null, (0, _react2.jsx)(_ui.IntlProviderIfMissingWrapper, null, (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(ReactEditorViewContextWrapper, {
96
+ }, (0, _react2.jsx)(_contextAdapter.ContextAdapter, null, (0, _react2.jsx)(_IntlProviderIfMissingWrapper.IntlProviderIfMissingWrapper, null, (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(ReactEditorViewContextWrapper, {
92
97
  editorProps: overriddenEditorProps,
93
98
  createAnalyticsEvent: createAnalyticsEvent,
94
99
  portalProviderAPI: portalProviderAPI,
@@ -107,7 +112,7 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
107
112
  dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
108
113
  editorRef = _ref2.editorRef,
109
114
  editorAPI = _ref2.editorAPI;
110
- return (0, _react2.jsx)(_ui.BaseTheme, {
115
+ return (0, _react2.jsx)(_BaseThemeWrapper.BaseThemeWrapper, {
111
116
  baseFontSize: (0, _getBaseFontSize.getBaseFontSize)(props.appearance)
112
117
  }, (0, _react2.jsx)(AppearanceComponent, {
113
118
  innerRef: editorRef,
@@ -63,6 +63,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
63
63
  /**
64
64
  * Mechanism to configuring plugins as the universal preset blocks direct access
65
65
  * to configuring plugins.
66
+ *
67
+ * Note: not all plugins are configurable via this mechanism, and for plugins configured -- it is only doing a subset of the configuration.
66
68
  */
67
69
 
68
70
  /**
@@ -77,7 +79,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
77
79
  * @returns a full featured preset configured according to the provided props - basis for create-plugins-list
78
80
  */
79
81
  function createUniversalPresetInternal(_ref) {
80
- var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
82
+ var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _initialPluginConfigu, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
81
83
  var appearance = _ref.appearance,
82
84
  props = _ref.props,
83
85
  featureFlags = _ref.featureFlags,
@@ -139,7 +141,9 @@ function createUniversalPresetInternal(_ref) {
139
141
  allowZeroWidthSpaceAfter: !isMobile,
140
142
  HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent,
141
143
  profilecardProvider: (_props$mention3 = props.mention) === null || _props$mention3 === void 0 ? void 0 : _props$mention3.profilecardProvider
142
- }, initialPluginConfiguration === null || initialPluginConfiguration === void 0 ? void 0 : initialPluginConfiguration.mentionsPlugin)], Boolean(props.mentionProvider)).maybeAdd(_emoji.emojiPlugin, Boolean(props.emojiProvider)).maybeAdd([_table.tablesPlugin, _objectSpread({
144
+ }, initialPluginConfiguration === null || initialPluginConfiguration === void 0 ? void 0 : initialPluginConfiguration.mentionsPlugin)], Boolean(props.mentionProvider)).maybeAdd([_emoji.emojiPlugin, {
145
+ emojiNodeDataProvider: initialPluginConfiguration === null || initialPluginConfiguration === void 0 || (_initialPluginConfigu = initialPluginConfiguration.emoji) === null || _initialPluginConfigu === void 0 ? void 0 : _initialPluginConfigu.emojiNodeDataProvider
146
+ }], Boolean(props.emojiProvider)).maybeAdd([_table.tablesPlugin, _objectSpread({
143
147
  tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : props.allowTables,
144
148
  dragAndDropEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tableDragAndDrop) && (isFullPage || (isComment || isChromeless) && (0, _platformFeatureFlags.fg)('platform_editor_table_support_in_comment')),
145
149
  isTableScalingEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tablePreserveWidth) && (isFullPage || isComment && (0, _platformFeatureFlags.fg)('platform_editor_table_support_in_comment')),
@@ -164,7 +164,7 @@ var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEdit
164
164
  }
165
165
  return (0, _react2.jsx)(_WithFlash.default, {
166
166
  animate: maxContentSizeReached
167
- }, (0, _react2.jsx)("div", {
167
+ }, (0, _react2.jsx)(_ui.WidthProvider, null, (0, _react2.jsx)("div", {
168
168
  css: [commentEditorStyles,
169
169
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
170
170
  (0, _react2.css)({
@@ -253,6 +253,6 @@ var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEdit
253
253
  style: {
254
254
  flexGrow: 1
255
255
  }
256
- }), customSecondaryToolbarComponents));
256
+ }), customSecondaryToolbarComponents)));
257
257
  };
258
258
  CommentEditorWithIntl.displayName = 'CommentEditorAppearance';
@@ -44,74 +44,70 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
44
44
  }
45
45
  };
46
46
  }, []);
47
- return (0, _react2.jsx)(_ui.WidthConsumer, null, function (_ref) {
48
- var width = _ref.width;
49
- return (
50
- // Cleaned up with: platform_editor_context-panel_simplify_behaviour
51
- (0, _react2.jsx)(_ui.ContextPanelConsumer, null, function (_ref2) {
52
- var _contentAreaRef$curre;
53
- var positionedOverEditor = _ref2.positionedOverEditor;
54
- return (0, _react2.jsx)("div", {
55
- css: [
56
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
57
- _StyledComponents.contentArea,
58
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
59
- props.isEditorToolbarHidden && _StyledComponents.contentAreaHeightNoToolbar,
60
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
61
- positionedOverEditor && _StyledComponents.positionedOverEditorStyle],
62
- "data-testid": CONTENT_AREA_TEST_ID,
63
- ref: containerRef
64
- }, (0, _react2.jsx)(_StyledComponents.ScrollContainer
47
+ return (
48
+ // Cleaned up with: platform_editor_context-panel_simplify_behaviour
49
+ (0, _react2.jsx)(_ui.ContextPanelConsumer, null, function (_ref) {
50
+ var _contentAreaRef$curre;
51
+ var positionedOverEditor = _ref.positionedOverEditor;
52
+ return (0, _react2.jsx)("div", {
53
+ css: [
54
+ // 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
+ _StyledComponents.contentArea,
56
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
57
+ props.isEditorToolbarHidden && _StyledComponents.contentAreaHeightNoToolbar,
58
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
59
+ positionedOverEditor && _StyledComponents.positionedOverEditorStyle],
60
+ "data-testid": CONTENT_AREA_TEST_ID,
61
+ ref: containerRef
62
+ }, (0, _react2.jsx)(_StyledComponents.ScrollContainer
63
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
64
+ , {
65
+ className: "fabric-editor-popup-scroll-parent",
66
+ featureFlags: props.featureFlags,
67
+ ref: scrollContainerRef
68
+ }, (0, _react2.jsx)(_Addon.ClickAreaBlock, {
69
+ editorView: props.editorView,
70
+ editorDisabled: props.disabled
71
+ }, (0, _react2.jsx)("div", {
72
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
73
+ css: (0, _StyledComponents.editorContentAreaStyle)({
74
+ fullWidthMode: fullWidthMode,
75
+ layoutMaxWidth: theme.layoutMaxWidth
76
+ }),
77
+ role: "region",
78
+ "aria-label": props.intl.formatMessage(_messages.fullPageMessages.editableContentLabel),
79
+ ref: contentAreaRef
80
+ }, (0, _react2.jsx)("div", {
81
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
82
+ css: (0, _StyledComponents.editorContentGutterStyle)()
65
83
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
66
- , {
67
- className: "fabric-editor-popup-scroll-parent",
68
- featureFlags: props.featureFlags,
69
- ref: scrollContainerRef
70
- }, (0, _react2.jsx)(_Addon.ClickAreaBlock, {
71
- editorView: props.editorView,
72
- editorDisabled: props.disabled
73
- }, (0, _react2.jsx)("div", {
74
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
75
- css: (0, _StyledComponents.editorContentAreaStyle)({
76
- fullWidthMode: fullWidthMode,
77
- layoutMaxWidth: theme.layoutMaxWidth,
78
- containerWidth: width
79
- }),
80
- role: "region",
81
- "aria-label": props.intl.formatMessage(_messages.fullPageMessages.editableContentLabel),
82
- ref: contentAreaRef
83
- }, (0, _react2.jsx)("div", {
84
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
85
- css: (0, _StyledComponents.editorContentGutterStyle)()
86
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
87
- ,
88
- className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
89
- ref: contentAreaRef
90
- }, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, (0, _react2.jsx)(_PluginSlot.default, {
91
- editorView: props.editorView,
92
- editorActions: props.editorActions,
93
- eventDispatcher: props.eventDispatcher,
94
- providerFactory: props.providerFactory,
95
- appearance: props.appearance,
96
- items: props.contentComponents,
97
- pluginHooks: props.pluginHooks,
98
- contentArea: (_contentAreaRef$curre = contentAreaRef.current) !== null && _contentAreaRef$curre !== void 0 ? _contentAreaRef$curre : undefined,
99
- popupsMountPoint: props.popupsMountPoint,
100
- popupsBoundariesElement: props.popupsBoundariesElement,
101
- popupsScrollableElement: props.popupsScrollableElement,
102
- disabled: !!props.disabled,
103
- containerElement: scrollContainerRef.current,
104
- dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
105
- wrapperElement: props.wrapperElement
106
- }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))), (0, _react2.jsx)("div", {
107
- css: _StyledComponents.sidebarArea
108
- }, props.contextPanel || (0, _react2.jsx)(_ContextPanel.default, {
109
- editorAPI: props.editorAPI,
110
- visible: false
111
- })));
112
- })
113
- );
114
- });
84
+ ,
85
+ className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
86
+ ref: contentAreaRef
87
+ }, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, (0, _react2.jsx)(_PluginSlot.default, {
88
+ editorView: props.editorView,
89
+ editorActions: props.editorActions,
90
+ eventDispatcher: props.eventDispatcher,
91
+ providerFactory: props.providerFactory,
92
+ appearance: props.appearance,
93
+ items: props.contentComponents,
94
+ pluginHooks: props.pluginHooks,
95
+ contentArea: (_contentAreaRef$curre = contentAreaRef.current) !== null && _contentAreaRef$curre !== void 0 ? _contentAreaRef$curre : undefined,
96
+ popupsMountPoint: props.popupsMountPoint,
97
+ popupsBoundariesElement: props.popupsBoundariesElement,
98
+ popupsScrollableElement: props.popupsScrollableElement,
99
+ disabled: !!props.disabled,
100
+ containerElement: scrollContainerRef.current,
101
+ dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
102
+ wrapperElement: props.wrapperElement
103
+ }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))), (0, _react2.jsx)("div", {
104
+ css: _StyledComponents.sidebarArea
105
+ }, props.contextPanel || (0, _react2.jsx)(_ContextPanel.default, {
106
+ editorAPI: props.editorAPI,
107
+ visible: false
108
+ })));
109
+ })
110
+ );
115
111
  });
116
112
  var FullPageContentArea = exports.FullPageContentArea = (0, _reactIntlNext.injectIntl)(Content, {
117
113
  forwardRef: true
@@ -108,14 +108,14 @@ var editorContentAreaHideContainer = exports.editorContentAreaHideContainer = (0
108
108
  });
109
109
 
110
110
  /* Prevent horizontal scroll on page in full width mode */
111
- var editorContentAreaContainerStyle = function editorContentAreaContainerStyle(containerWidth) {
111
+ var editorContentAreaContainerStyle = function editorContentAreaContainerStyle() {
112
112
  return (0, _react.css)({
113
113
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
114
114
  '.fabric-editor--full-width-mode': {
115
115
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
116
- '.code-block, .extension-container': {
116
+ '.code-block, .extension-container, .multiBodiedExtension--container': {
117
117
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
118
- maxWidth: "".concat(containerWidth - getTotalPadding() - _consts.tableMarginFullWidthMode * 2, "px")
118
+ maxWidth: "calc(100% - ".concat(_consts.tableMarginFullWidthMode * 2, "px)")
119
119
  },
120
120
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
121
121
  '.extension-container.inline': {
@@ -126,23 +126,17 @@ var editorContentAreaContainerStyle = function editorContentAreaContainerStyle(c
126
126
  maxWidth: 'inherit'
127
127
  },
128
128
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
129
- '.multiBodiedExtension--container': {
130
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
131
- maxWidth: "".concat(containerWidth - getTotalPadding() - _consts.tableMarginFullWidthMode * 2, "px")
132
- },
133
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
134
129
  '[data-layout-section]': {
135
130
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
136
- maxWidth: "".concat(containerWidth - getTotalPadding() + _editorSharedStyles.akLayoutGutterOffset * 2, "px")
131
+ maxWidth: "calc(100% + ".concat(_editorSharedStyles.akLayoutGutterOffset * 2, "px)")
137
132
  }
138
133
  }
139
134
  });
140
135
  };
141
136
  var editorContentAreaStyle = exports.editorContentAreaStyle = function editorContentAreaStyle(_ref) {
142
137
  var layoutMaxWidth = _ref.layoutMaxWidth,
143
- fullWidthMode = _ref.fullWidthMode,
144
- containerWidth = _ref.containerWidth;
145
- return [editorContentArea, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), containerWidth ? editorContentAreaContainerStyle(containerWidth) : editorContentAreaHideContainer];
138
+ fullWidthMode = _ref.fullWidthMode;
139
+ return [editorContentArea, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), editorContentAreaContainerStyle()];
146
140
  };
147
141
  var editorContentAreaWithLayoutWith = function editorContentAreaWithLayoutWith(layoutMaxWidth) {
148
142
  return (0, _react.css)({
@@ -13,8 +13,8 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
13
13
  var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
14
14
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
15
15
  var _react = _interopRequireDefault(require("react"));
16
- var _ui = require("@atlaskit/editor-common/ui");
17
16
  var _ChromeCollapsed = _interopRequireDefault(require("../ChromeCollapsed"));
17
+ var _IntlProviderIfMissingWrapper = require("../IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper");
18
18
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
19
19
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
20
20
  var CollapsedEditor = exports.default = /*#__PURE__*/function (_React$Component) {
@@ -51,7 +51,7 @@ var CollapsedEditor = exports.default = /*#__PURE__*/function (_React$Component)
51
51
  var child = _react.default.Children.only(this.props.children);
52
52
  this.functionalEditor = typeof child.type === 'function';
53
53
  if (!this.props.isExpanded) {
54
- return /*#__PURE__*/_react.default.createElement(_ui.IntlProviderIfMissingWrapper, null, /*#__PURE__*/_react.default.createElement(_ChromeCollapsed.default, {
54
+ return /*#__PURE__*/_react.default.createElement(_IntlProviderIfMissingWrapper.IntlProviderIfMissingWrapper, null, /*#__PURE__*/_react.default.createElement(_ChromeCollapsed.default, {
55
55
  onFocus: this.props.onFocus,
56
56
  text: this.props.placeholder
57
57
  }));
@@ -75,7 +75,7 @@ var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
75
75
  }
76
76
  });
77
77
  var contentStyles = function contentStyles(props) {
78
- return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\tpointer-events: none;\n\t\topacity: 0.7;\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t", "\n\t", "\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Link icon in the Atlaskit package\n is bigger than the others\n */\n\t.hyperlink-open-link {\n\t\tsvg {\n\t\t\tmax-width: 18px;\n\t\t}\n\t\t&[href] {\n\t\t\tpadding: 0 4px;\n\t\t}\n\t}\n"])), (0, _editorSharedStyles.editorFontSize)({
78
+ return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\tpointer-events: none;\n\t\topacity: 0.7;\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t", "\n\t", "\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Link icon in the Atlaskit package\n is bigger than the others\n */\n\t.hyperlink-open-link {\n\t\tsvg {\n\t\t\tmax-width: 18px;\n\t\t}\n\t\t&[href] {\n\t\t\tpadding: 0 4px;\n\t\t}\n\t}\n"])), (0, _editorSharedStyles.editorFontSize)({
79
79
  theme: props.theme
80
80
  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), _media.mediaStyles, (0, _layout.layoutStyles)(props.viewMode), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _panel.panelStyles)(), mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), _styles.smartCardSharedStyles, _date.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, (0, _aiPanels.aiPanelStyles)(props.colorMode), _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
81
81
  };
@@ -0,0 +1,24 @@
1
+ "use strict";
2
+
3
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.IntlProviderIfMissingWrapper = IntlProviderIfMissingWrapper;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _reactIntlNext = require("react-intl-next");
10
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
11
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
12
+ var useCheckIntlContext = function useCheckIntlContext() {
13
+ return (0, _react.useContext)(_reactIntlNext.IntlContext) === null;
14
+ };
15
+ function IntlProviderIfMissingWrapper(_ref) {
16
+ var children = _ref.children;
17
+ var missingIntlContext = useCheckIntlContext();
18
+ if (missingIntlContext) {
19
+ return /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
20
+ locale: "en"
21
+ }, children);
22
+ }
23
+ return children;
24
+ }
@@ -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 = "197.0.0";
8
+ var version = exports.version = "197.1.1";
@@ -0,0 +1,19 @@
1
+ import React, { useMemo } from 'react';
2
+
3
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
4
+ import { ThemeProvider } from '@emotion/react';
5
+ import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
6
+ // Default value from: `import { fontSize } from '@atlaskit/theme/constants';`
7
+ const defaultFontSize = 14;
8
+ export function BaseThemeWrapper({
9
+ baseFontSize,
10
+ children
11
+ }) {
12
+ const memoizedTheme = useMemo(() => ({
13
+ baseFontSize: baseFontSize || defaultFontSize,
14
+ layoutMaxWidth: akEditorDefaultLayoutWidth
15
+ }), [baseFontSize]);
16
+ return /*#__PURE__*/React.createElement(ThemeProvider, {
17
+ theme: memoizedTheme
18
+ }, children);
19
+ }
@@ -9,7 +9,6 @@ import { Fragment, memo, useCallback } from 'react';
9
9
  import { css, jsx } from '@emotion/react';
10
10
  import { ACTION, ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
11
11
  import { usePortalProvider } from '@atlaskit/editor-common/portal';
12
- import { BaseTheme, IntlProviderIfMissingWrapper, WidthProvider } from '@atlaskit/editor-common/ui';
13
12
  import { fg } from '@atlaskit/platform-feature-flags';
14
13
  import ErrorBoundary from '../create-editor/ErrorBoundary';
15
14
  import { createFeatureFlagsFromProps } from '../create-editor/feature-flags-from-props';
@@ -17,9 +16,17 @@ import ReactEditorView from '../create-editor/ReactEditorView';
17
16
  import { ContextAdapter } from '../nodeviews/context-adapter';
18
17
  import { useSetPresetContext } from '../presets/context';
19
18
  import EditorContext from '../ui/EditorContext';
19
+ import { IntlProviderIfMissingWrapper } from '../ui/IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper';
20
20
  import { RenderTracking } from '../utils/performance/components/RenderTracking';
21
+ import { BaseThemeWrapper } from './BaseThemeWrapper';
21
22
  import { useProviders } from './hooks/useProviders';
22
23
  import { getBaseFontSize } from './utils/getBaseFontSize';
24
+ const editorContainerStyles = css({
25
+ position: 'relative',
26
+ width: '100%',
27
+ height: '100%'
28
+ });
29
+
23
30
  /**
24
31
  * EditorInternalComponent is used to capture the common component
25
32
  * from the `render` method of `Editor` and share it with `EditorNext`.
@@ -73,10 +80,8 @@ export const EditorInternal = /*#__PURE__*/memo(({
73
80
  createAnalyticsEvent: createAnalyticsEvent,
74
81
  contextIdentifierProvider: props.contextIdentifierProvider,
75
82
  featureFlags: featureFlags
76
- }, jsx(WidthProvider, {
77
- css: css({
78
- height: '100%'
79
- })
83
+ }, jsx("div", {
84
+ css: editorContainerStyles
80
85
  }, jsx(EditorContext, {
81
86
  editorActions: editorActions
82
87
  }, jsx(ContextAdapter, null, jsx(IntlProviderIfMissingWrapper, null, jsx(Fragment, null, jsx(ReactEditorViewContextWrapper, {
@@ -99,7 +104,7 @@ export const EditorInternal = /*#__PURE__*/memo(({
99
104
  editorAPI
100
105
  }) => {
101
106
  var _props$featureFlags, _props$featureFlags2;
102
- return jsx(BaseTheme, {
107
+ return jsx(BaseThemeWrapper, {
103
108
  baseFontSize: getBaseFontSize(props.appearance)
104
109
  }, jsx(AppearanceComponent, {
105
110
  innerRef: editorRef,
@@ -52,6 +52,8 @@ import { createDefaultPreset } from './default';
52
52
  /**
53
53
  * Mechanism to configuring plugins as the universal preset blocks direct access
54
54
  * to configuring plugins.
55
+ *
56
+ * Note: not all plugins are configurable via this mechanism, and for plugins configured -- it is only doing a subset of the configuration.
55
57
  */
56
58
 
57
59
  /**
@@ -73,7 +75,7 @@ export default function createUniversalPresetInternal({
73
75
  prevAppearance,
74
76
  createAnalyticsEvent
75
77
  }) {
76
- var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
78
+ var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _initialPluginConfigu, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
77
79
  const isMobile = appearance === 'mobile';
78
80
  const isComment = appearance === 'comment';
79
81
  const isChromeless = appearance === 'chromeless';
@@ -131,7 +133,9 @@ export default function createUniversalPresetInternal({
131
133
  HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent,
132
134
  profilecardProvider: (_props$mention3 = props.mention) === null || _props$mention3 === void 0 ? void 0 : _props$mention3.profilecardProvider,
133
135
  ...(initialPluginConfiguration === null || initialPluginConfiguration === void 0 ? void 0 : initialPluginConfiguration.mentionsPlugin)
134
- }], Boolean(props.mentionProvider)).maybeAdd(emojiPlugin, Boolean(props.emojiProvider)).maybeAdd([tablesPlugin, {
136
+ }], Boolean(props.mentionProvider)).maybeAdd([emojiPlugin, {
137
+ emojiNodeDataProvider: initialPluginConfiguration === null || initialPluginConfiguration === void 0 ? void 0 : (_initialPluginConfigu = initialPluginConfiguration.emoji) === null || _initialPluginConfigu === void 0 ? void 0 : _initialPluginConfigu.emojiNodeDataProvider
138
+ }], Boolean(props.emojiProvider)).maybeAdd([tablesPlugin, {
135
139
  tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : props.allowTables,
136
140
  dragAndDropEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tableDragAndDrop) && (isFullPage || (isComment || isChromeless) && fg('platform_editor_table_support_in_comment')),
137
141
  isTableScalingEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tablePreserveWidth) && (isFullPage || isComment && fg('platform_editor_table_support_in_comment')),
@@ -12,7 +12,7 @@ import ButtonGroup from '@atlaskit/button/button-group';
12
12
  import Button from '@atlaskit/button/new';
13
13
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
14
14
  import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
15
- import { WidthConsumer } from '@atlaskit/editor-common/ui';
15
+ import { WidthConsumer, WidthProvider } from '@atlaskit/editor-common/ui';
16
16
  import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
17
17
  import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
18
18
  import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
@@ -149,7 +149,7 @@ export const CommentEditorWithIntl = props => {
149
149
  }
150
150
  return jsx(WithFlash, {
151
151
  animate: maxContentSizeReached
152
- }, jsx("div", {
152
+ }, jsx(WidthProvider, null, jsx("div", {
153
153
  css: [commentEditorStyles,
154
154
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
155
155
  css({
@@ -239,6 +239,6 @@ export const CommentEditorWithIntl = props => {
239
239
  style: {
240
240
  flexGrow: 1
241
241
  }
242
- }), customSecondaryToolbarComponents));
242
+ }), customSecondaryToolbarComponents)));
243
243
  };
244
244
  CommentEditorWithIntl.displayName = 'CommentEditorAppearance';