@atlaskit/editor-core 197.1.0 → 197.1.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-core
 
+## 197.1.2
+
+### Patch Changes
+
+- [#135500](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/135500)
+  [`a571f59156bc1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a571f59156bc1) -
+  Build internal version of Chromeless and Comment Editor. No API changes.
+
+## 197.1.1
+
+### Patch Changes
+
+- [#135207](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/135207)
+  [`84391e4360fbd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/84391e4360fbd) -
+  Refactor editor internals to minimise bundle size and javascript run by removing width observer
+  from main editor.
+
 ## 197.1.0
 
 ### Minor Changes

package/dist/cjs/composable-editor/BaseThemeWrapper.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BaseThemeWrapper = BaseThemeWrapper;
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+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); }
+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; }
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// Default value from: `import { fontSize } from '@atlaskit/theme/constants';`
+var defaultFontSize = 14;
+function BaseThemeWrapper(_ref) {
+  var baseFontSize = _ref.baseFontSize,
+    children = _ref.children;
+  var memoizedTheme = (0, _react.useMemo)(function () {
+    return {
+      baseFontSize: baseFontSize || defaultFontSize,
+      layoutMaxWidth: _editorSharedStyles.akEditorDefaultLayoutWidth
+    };
+  }, [baseFontSize]);
+  return /*#__PURE__*/_react.default.createElement(_react2.ThemeProvider, {
+    theme: memoizedTheme
+  }, children);
+}

package/dist/cjs/composable-editor/editor-internal.js

@@ -12,7 +12,6 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _portal = require("@atlaskit/editor-common/portal");
-var _ui = require("@atlaskit/editor-common/ui");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _ErrorBoundary = _interopRequireDefault(require("../create-editor/ErrorBoundary"));
 var _featureFlagsFromProps = require("../create-editor/feature-flags-from-props");
@@ -20,7 +19,9 @@ var _ReactEditorView = _interopRequireDefault(require("../create-editor/ReactEdi
 var _contextAdapter = require("../nodeviews/context-adapter");
 var _context = require("../presets/context");
 var _EditorContext = _interopRequireDefault(require("../ui/EditorContext"));
+var _IntlProviderIfMissingWrapper = require("../ui/IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper");
 var _RenderTracking = require("../utils/performance/components/RenderTracking");
+var _BaseThemeWrapper = require("./BaseThemeWrapper");
 var _useProviders = require("./hooks/useProviders");
 var _getBaseFontSize = require("./utils/getBaseFontSize");
 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 =
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var editorContainerStyles = (0, _react2.css)({
+  position: 'relative',
+  width: '100%',
+  height: '100%'
+});
+
 /**
  * EditorInternalComponent is used to capture the common component
  * from the `render` method of `Editor` and share it with `EditorNext`.
@@ -82,13 +89,11 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
     createAnalyticsEvent: createAnalyticsEvent,
     contextIdentifierProvider: props.contextIdentifierProvider,
     featureFlags: featureFlags
-  }, (0, _react2.jsx)(_ui.WidthProvider, {
-    css: (0, _react2.css)({
-      height: '100%'
-    })
+  }, (0, _react2.jsx)("div", {
+    css: editorContainerStyles
   }, (0, _react2.jsx)(_EditorContext.default, {
     editorActions: editorActions
-  }, (0, _react2.jsx)(_contextAdapter.ContextAdapter, null, (0, _react2.jsx)(_ui.IntlProviderIfMissingWrapper, null, (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(ReactEditorViewContextWrapper, {
+  }, (0, _react2.jsx)(_contextAdapter.ContextAdapter, null, (0, _react2.jsx)(_IntlProviderIfMissingWrapper.IntlProviderIfMissingWrapper, null, (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(ReactEditorViewContextWrapper, {
     editorProps: overriddenEditorProps,
     createAnalyticsEvent: createAnalyticsEvent,
     portalProviderAPI: portalProviderAPI,
@@ -107,7 +112,7 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
         dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
         editorRef = _ref2.editorRef,
         editorAPI = _ref2.editorAPI;
-      return (0, _react2.jsx)(_ui.BaseTheme, {
+      return (0, _react2.jsx)(_BaseThemeWrapper.BaseThemeWrapper, {
         baseFontSize: (0, _getBaseFontSize.getBaseFontSize)(props.appearance)
       }, (0, _react2.jsx)(AppearanceComponent, {
         innerRef: editorRef,

package/dist/cjs/editor-appearances/ChromelessEditor.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChromelessEditor = ChromelessEditor;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _coreEditor = require("../composable-editor/core-editor");
+var _Chromeless = _interopRequireDefault(require("../ui/Appearance/Chromeless"));
+/**
+ * Editor component based on `ComposableEditor` which sets the `appearance` to "chromeless".
+ *
+ * This has a performance benefit compared with `ComposableEditor` as it doesn't bundle unnecessary appearance code.
+ *
+ * Docs for `ComposableEditor` are also relevant: https://atlaskit.atlassian.com/packages/editor/editor-core
+ *
+ * @param props ChromelessEditorProps
+ * @returns Editor component
+ */
+function ChromelessEditor(props) {
+  return /*#__PURE__*/_react.default.createElement(_coreEditor.CoreEditor, (0, _extends2.default)({}, props, {
+    appearance: "chromeless",
+    AppearanceComponent: _Chromeless.default
+  }));
+}

package/dist/cjs/editor-appearances/CommentEditor.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CommentEditor = CommentEditor;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _coreEditor = require("../composable-editor/core-editor");
+var _Comment = _interopRequireDefault(require("../ui/Appearance/Comment"));
+/**
+ * Editor component based on `ComposableEditor` which sets the `appearance` to "comment".
+ *
+ * This has a performance benefit compared with `ComposableEditor` as it doesn't bundle unnecessary appearance code.
+ *
+ * Docs for `ComposableEditor` are also relevant: https://atlaskit.atlassian.com/packages/editor/editor-core
+ *
+ * @param props CommentEditorProps
+ * @returns Editor component
+ */
+function CommentEditor(props) {
+  return /*#__PURE__*/_react.default.createElement(_coreEditor.CoreEditor, (0, _extends2.default)({}, props, {
+    appearance: "comment",
+    AppearanceComponent: _Comment.default
+  }));
+}

package/dist/cjs/ui/Appearance/Comment/Comment.js

@@ -164,7 +164,7 @@ var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEdit
   }
   return (0, _react2.jsx)(_WithFlash.default, {
     animate: maxContentSizeReached
-  }, (0, _react2.jsx)("div", {
+  }, (0, _react2.jsx)(_ui.WidthProvider, null, (0, _react2.jsx)("div", {
     css: [commentEditorStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     (0, _react2.css)({
@@ -253,6 +253,6 @@ var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEdit
     style: {
       flexGrow: 1
     }
-  }), customSecondaryToolbarComponents));
+  }), customSecondaryToolbarComponents)));
 };
 CommentEditorWithIntl.displayName = 'CommentEditorAppearance';

package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js

@@ -44,74 +44,70 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       }
     };
   }, []);
-  return (0, _react2.jsx)(_ui.WidthConsumer, null, function (_ref) {
-    var width = _ref.width;
-    return (
-      // Cleaned up with: platform_editor_context-panel_simplify_behaviour
-      (0, _react2.jsx)(_ui.ContextPanelConsumer, null, function (_ref2) {
-        var _contentAreaRef$curre;
-        var positionedOverEditor = _ref2.positionedOverEditor;
-        return (0, _react2.jsx)("div", {
-          css: [
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-          _StyledComponents.contentArea,
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-          props.isEditorToolbarHidden && _StyledComponents.contentAreaHeightNoToolbar,
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-          positionedOverEditor && _StyledComponents.positionedOverEditorStyle],
-          "data-testid": CONTENT_AREA_TEST_ID,
-          ref: containerRef
-        }, (0, _react2.jsx)(_StyledComponents.ScrollContainer
+  return (
+    // Cleaned up with: platform_editor_context-panel_simplify_behaviour
+    (0, _react2.jsx)(_ui.ContextPanelConsumer, null, function (_ref) {
+      var _contentAreaRef$curre;
+      var positionedOverEditor = _ref.positionedOverEditor;
+      return (0, _react2.jsx)("div", {
+        css: [
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        _StyledComponents.contentArea,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        props.isEditorToolbarHidden && _StyledComponents.contentAreaHeightNoToolbar,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        positionedOverEditor && _StyledComponents.positionedOverEditorStyle],
+        "data-testid": CONTENT_AREA_TEST_ID,
+        ref: containerRef
+      }, (0, _react2.jsx)(_StyledComponents.ScrollContainer
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      , {
+        className: "fabric-editor-popup-scroll-parent",
+        featureFlags: props.featureFlags,
+        ref: scrollContainerRef
+      }, (0, _react2.jsx)(_Addon.ClickAreaBlock, {
+        editorView: props.editorView,
+        editorDisabled: props.disabled
+      }, (0, _react2.jsx)("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        css: (0, _StyledComponents.editorContentAreaStyle)({
+          fullWidthMode: fullWidthMode,
+          layoutMaxWidth: theme.layoutMaxWidth
+        }),
+        role: "region",
+        "aria-label": props.intl.formatMessage(_messages.fullPageMessages.editableContentLabel),
+        ref: contentAreaRef
+      }, (0, _react2.jsx)("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        css: (0, _StyledComponents.editorContentGutterStyle)()
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        , {
-          className: "fabric-editor-popup-scroll-parent",
-          featureFlags: props.featureFlags,
-          ref: scrollContainerRef
-        }, (0, _react2.jsx)(_Addon.ClickAreaBlock, {
-          editorView: props.editorView,
-          editorDisabled: props.disabled
-        }, (0, _react2.jsx)("div", {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-          css: (0, _StyledComponents.editorContentAreaStyle)({
-            fullWidthMode: fullWidthMode,
-            layoutMaxWidth: theme.layoutMaxWidth,
-            containerWidth: width
-          }),
-          role: "region",
-          "aria-label": props.intl.formatMessage(_messages.fullPageMessages.editableContentLabel),
-          ref: contentAreaRef
-        }, (0, _react2.jsx)("div", {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-          css: (0, _StyledComponents.editorContentGutterStyle)()
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-          ,
-          className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
-          ref: contentAreaRef
-        }, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, (0, _react2.jsx)(_PluginSlot.default, {
-          editorView: props.editorView,
-          editorActions: props.editorActions,
-          eventDispatcher: props.eventDispatcher,
-          providerFactory: props.providerFactory,
-          appearance: props.appearance,
-          items: props.contentComponents,
-          pluginHooks: props.pluginHooks,
-          contentArea: (_contentAreaRef$curre = contentAreaRef.current) !== null && _contentAreaRef$curre !== void 0 ? _contentAreaRef$curre : undefined,
-          popupsMountPoint: props.popupsMountPoint,
-          popupsBoundariesElement: props.popupsBoundariesElement,
-          popupsScrollableElement: props.popupsScrollableElement,
-          disabled: !!props.disabled,
-          containerElement: scrollContainerRef.current,
-          dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-          wrapperElement: props.wrapperElement
-        }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))), (0, _react2.jsx)("div", {
-          css: _StyledComponents.sidebarArea
-        }, props.contextPanel || (0, _react2.jsx)(_ContextPanel.default, {
-          editorAPI: props.editorAPI,
-          visible: false
-        })));
-      })
-    );
-  });
+        ,
+        className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
+        ref: contentAreaRef
+      }, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, (0, _react2.jsx)(_PluginSlot.default, {
+        editorView: props.editorView,
+        editorActions: props.editorActions,
+        eventDispatcher: props.eventDispatcher,
+        providerFactory: props.providerFactory,
+        appearance: props.appearance,
+        items: props.contentComponents,
+        pluginHooks: props.pluginHooks,
+        contentArea: (_contentAreaRef$curre = contentAreaRef.current) !== null && _contentAreaRef$curre !== void 0 ? _contentAreaRef$curre : undefined,
+        popupsMountPoint: props.popupsMountPoint,
+        popupsBoundariesElement: props.popupsBoundariesElement,
+        popupsScrollableElement: props.popupsScrollableElement,
+        disabled: !!props.disabled,
+        containerElement: scrollContainerRef.current,
+        dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+        wrapperElement: props.wrapperElement
+      }), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? props.customContentComponents.after : null)))), (0, _react2.jsx)("div", {
+        css: _StyledComponents.sidebarArea
+      }, props.contextPanel || (0, _react2.jsx)(_ContextPanel.default, {
+        editorAPI: props.editorAPI,
+        visible: false
+      })));
+    })
+  );
 });
 var FullPageContentArea = exports.FullPageContentArea = (0, _reactIntlNext.injectIntl)(Content, {
   forwardRef: true

package/dist/cjs/ui/Appearance/FullPage/StyledComponents.js

@@ -108,14 +108,14 @@ var editorContentAreaHideContainer = exports.editorContentAreaHideContainer = (0
 });
 
 /* Prevent horizontal scroll on page in full width mode */
-var editorContentAreaContainerStyle = function editorContentAreaContainerStyle(containerWidth) {
+var editorContentAreaContainerStyle = function editorContentAreaContainerStyle() {
   return (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '.fabric-editor--full-width-mode': {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-      '.code-block, .extension-container': {
+      '.code-block, .extension-container, .multiBodiedExtension--container': {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        maxWidth: "".concat(containerWidth - getTotalPadding() - _consts.tableMarginFullWidthMode * 2, "px")
+        maxWidth: "calc(100% - ".concat(_consts.tableMarginFullWidthMode * 2, "px)")
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
       '.extension-container.inline': {
@@ -126,23 +126,17 @@ var editorContentAreaContainerStyle = function editorContentAreaContainerStyle(c
         maxWidth: 'inherit'
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-      '.multiBodiedExtension--container': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        maxWidth: "".concat(containerWidth - getTotalPadding() - _consts.tableMarginFullWidthMode * 2, "px")
-      },
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
       '[data-layout-section]': {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        maxWidth: "".concat(containerWidth - getTotalPadding() + _editorSharedStyles.akLayoutGutterOffset * 2, "px")
+        maxWidth: "calc(100% + ".concat(_editorSharedStyles.akLayoutGutterOffset * 2, "px)")
       }
     }
   });
 };
 var editorContentAreaStyle = exports.editorContentAreaStyle = function editorContentAreaStyle(_ref) {
   var layoutMaxWidth = _ref.layoutMaxWidth,
-    fullWidthMode = _ref.fullWidthMode,
-    containerWidth = _ref.containerWidth;
-  return [editorContentArea, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), containerWidth ? editorContentAreaContainerStyle(containerWidth) : editorContentAreaHideContainer];
+    fullWidthMode = _ref.fullWidthMode;
+  return [editorContentArea, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), editorContentAreaContainerStyle()];
 };
 var editorContentAreaWithLayoutWith = function editorContentAreaWithLayoutWith(layoutMaxWidth) {
   return (0, _react.css)({

package/dist/cjs/ui/CollapsedEditor/index.js

@@ -13,8 +13,8 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _ui = require("@atlaskit/editor-common/ui");
 var _ChromeCollapsed = _interopRequireDefault(require("../ChromeCollapsed"));
+var _IntlProviderIfMissingWrapper = require("../IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper");
 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); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var CollapsedEditor = exports.default = /*#__PURE__*/function (_React$Component) {
@@ -51,7 +51,7 @@ var CollapsedEditor = exports.default = /*#__PURE__*/function (_React$Component)
       var child = _react.default.Children.only(this.props.children);
       this.functionalEditor = typeof child.type === 'function';
       if (!this.props.isExpanded) {
-        return /*#__PURE__*/_react.default.createElement(_ui.IntlProviderIfMissingWrapper, null, /*#__PURE__*/_react.default.createElement(_ChromeCollapsed.default, {
+        return /*#__PURE__*/_react.default.createElement(_IntlProviderIfMissingWrapper.IntlProviderIfMissingWrapper, null, /*#__PURE__*/_react.default.createElement(_ChromeCollapsed.default, {
           onFocus: this.props.onFocus,
           text: this.props.placeholder
         }));

package/dist/cjs/ui/ContentStyles/index.js

@@ -75,7 +75,7 @@ var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
   }
 });
 var contentStyles = function contentStyles(props) {
-  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)({
+  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)({
     theme: props.theme
   }), _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);
 };

package/dist/cjs/ui/IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IntlProviderIfMissingWrapper = IntlProviderIfMissingWrapper;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+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); }
+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; }
+var useCheckIntlContext = function useCheckIntlContext() {
+  return (0, _react.useContext)(_reactIntlNext.IntlContext) === null;
+};
+function IntlProviderIfMissingWrapper(_ref) {
+  var children = _ref.children;
+  var missingIntlContext = useCheckIntlContext();
+  if (missingIntlContext) {
+    return /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
+      locale: "en"
+    }, children);
+  }
+  return children;
+}

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "197.1.0";
+var version = exports.version = "197.1.2";

package/dist/es2019/composable-editor/BaseThemeWrapper.js

@@ -0,0 +1,19 @@
+import React, { useMemo } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { ThemeProvider } from '@emotion/react';
+import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+// Default value from: `import { fontSize } from '@atlaskit/theme/constants';`
+const defaultFontSize = 14;
+export function BaseThemeWrapper({
+  baseFontSize,
+  children
+}) {
+  const memoizedTheme = useMemo(() => ({
+    baseFontSize: baseFontSize || defaultFontSize,
+    layoutMaxWidth: akEditorDefaultLayoutWidth
+  }), [baseFontSize]);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: memoizedTheme
+  }, children);
+}

package/dist/es2019/composable-editor/editor-internal.js

@@ -9,7 +9,6 @@ import { Fragment, memo, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { ACTION, ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { usePortalProvider } from '@atlaskit/editor-common/portal';
-import { BaseTheme, IntlProviderIfMissingWrapper, WidthProvider } from '@atlaskit/editor-common/ui';
 import { fg } from '@atlaskit/platform-feature-flags';
 import ErrorBoundary from '../create-editor/ErrorBoundary';
 import { createFeatureFlagsFromProps } from '../create-editor/feature-flags-from-props';
@@ -17,9 +16,17 @@ import ReactEditorView from '../create-editor/ReactEditorView';
 import { ContextAdapter } from '../nodeviews/context-adapter';
 import { useSetPresetContext } from '../presets/context';
 import EditorContext from '../ui/EditorContext';
+import { IntlProviderIfMissingWrapper } from '../ui/IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper';
 import { RenderTracking } from '../utils/performance/components/RenderTracking';
+import { BaseThemeWrapper } from './BaseThemeWrapper';
 import { useProviders } from './hooks/useProviders';
 import { getBaseFontSize } from './utils/getBaseFontSize';
+const editorContainerStyles = css({
+  position: 'relative',
+  width: '100%',
+  height: '100%'
+});
+
 /**
  * EditorInternalComponent is used to capture the common component
  * from the `render` method of `Editor` and share it with `EditorNext`.
@@ -73,10 +80,8 @@ export const EditorInternal = /*#__PURE__*/memo(({
     createAnalyticsEvent: createAnalyticsEvent,
     contextIdentifierProvider: props.contextIdentifierProvider,
     featureFlags: featureFlags
-  }, jsx(WidthProvider, {
-    css: css({
-      height: '100%'
-    })
+  }, jsx("div", {
+    css: editorContainerStyles
   }, jsx(EditorContext, {
     editorActions: editorActions
   }, jsx(ContextAdapter, null, jsx(IntlProviderIfMissingWrapper, null, jsx(Fragment, null, jsx(ReactEditorViewContextWrapper, {
@@ -99,7 +104,7 @@ export const EditorInternal = /*#__PURE__*/memo(({
       editorAPI
     }) => {
       var _props$featureFlags, _props$featureFlags2;
-      return jsx(BaseTheme, {
+      return jsx(BaseThemeWrapper, {
         baseFontSize: getBaseFontSize(props.appearance)
       }, jsx(AppearanceComponent, {
         innerRef: editorRef,

package/dist/es2019/editor-appearances/ChromelessEditor.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { CoreEditor } from '../composable-editor/core-editor';
+import Chromeless from '../ui/Appearance/Chromeless';
+/**
+ * Editor component based on `ComposableEditor` which sets the `appearance` to "chromeless".
+ *
+ * This has a performance benefit compared with `ComposableEditor` as it doesn't bundle unnecessary appearance code.
+ *
+ * Docs for `ComposableEditor` are also relevant: https://atlaskit.atlassian.com/packages/editor/editor-core
+ *
+ * @param props ChromelessEditorProps
+ * @returns Editor component
+ */
+export function ChromelessEditor(props) {
+  return /*#__PURE__*/React.createElement(CoreEditor, _extends({}, props, {
+    appearance: "chromeless",
+    AppearanceComponent: Chromeless
+  }));
+}

package/dist/es2019/editor-appearances/CommentEditor.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { CoreEditor } from '../composable-editor/core-editor';
+import Comment from '../ui/Appearance/Comment';
+/**
+ * Editor component based on `ComposableEditor` which sets the `appearance` to "comment".
+ *
+ * This has a performance benefit compared with `ComposableEditor` as it doesn't bundle unnecessary appearance code.
+ *
+ * Docs for `ComposableEditor` are also relevant: https://atlaskit.atlassian.com/packages/editor/editor-core
+ *
+ * @param props CommentEditorProps
+ * @returns Editor component
+ */
+export function CommentEditor(props) {
+  return /*#__PURE__*/React.createElement(CoreEditor, _extends({}, props, {
+    appearance: "comment",
+    AppearanceComponent: Comment
+  }));
+}

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -12,7 +12,7 @@ import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/new';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
-import { WidthConsumer } from '@atlaskit/editor-common/ui';
+import { WidthConsumer, WidthProvider } from '@atlaskit/editor-common/ui';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
 import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
@@ -149,7 +149,7 @@ export const CommentEditorWithIntl = props => {
   }
   return jsx(WithFlash, {
     animate: maxContentSizeReached
-  }, jsx("div", {
+  }, jsx(WidthProvider, null, jsx("div", {
     css: [commentEditorStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     css({
@@ -239,6 +239,6 @@ export const CommentEditorWithIntl = props => {
     style: {
       flexGrow: 1
     }
-  }), customSecondaryToolbarComponents));
+  }), customSecondaryToolbarComponents)));
 };
 CommentEditorWithIntl.displayName = 'CommentEditorAppearance';