@atlaskit/editor-core 197.1.0 → 197.1.2

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

@@ -9,7 +9,7 @@ import React, { useImperativeHandle, useRef } from 'react';
 import { jsx, useTheme } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
-import { ContextPanelConsumer, WidthConsumer } from '@atlaskit/editor-common/ui';
+import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import { ClickAreaBlock } from '../../Addon';
 import ContextPanel from '../../ContextPanel';
 import PluginSlot from '../../PluginSlot';
@@ -32,73 +32,71 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
       return containerRef.current;
     }
   }), []);
-  return jsx(WidthConsumer, null, ({
-    width
-  }) =>
-  // Cleaned up with: platform_editor_context-panel_simplify_behaviour
-  jsx(ContextPanelConsumer, null, ({
-    positionedOverEditor
-  }) => {
-    var _contentAreaRef$curre;
-    return 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
-      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 && 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 && positionedOverEditorStyle],
-      "data-testid": CONTENT_AREA_TEST_ID,
-      ref: containerRef
-    }, jsx(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
-    }, jsx(ClickAreaBlock, {
-      editorView: props.editorView,
-      editorDisabled: props.disabled
-    }, 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: editorContentAreaStyle({
-        fullWidthMode,
-        layoutMaxWidth: theme.layoutMaxWidth,
-        containerWidth: width
-      }),
-      role: "region",
-      "aria-label": props.intl.formatMessage(messages.editableContentLabel),
-      ref: contentAreaRef
-    }, 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: editorContentGutterStyle()
+  return (
+    // Cleaned up with: platform_editor_context-panel_simplify_behaviour
+    jsx(ContextPanelConsumer, null, ({
+      positionedOverEditor
+    }) => {
+      var _contentAreaRef$curre;
+      return 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
+        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 && 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 && positionedOverEditorStyle],
+        "data-testid": CONTENT_AREA_TEST_ID,
+        ref: containerRef
+      }, jsx(ScrollContainer
       // 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, jsx(PluginSlot, {
-      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)))), jsx("div", {
-      css: sidebarArea
-    }, props.contextPanel || jsx(ContextPanel, {
-      editorAPI: props.editorAPI,
-      visible: false
-    })));
-  }));
+      , {
+        className: "fabric-editor-popup-scroll-parent",
+        featureFlags: props.featureFlags,
+        ref: scrollContainerRef
+      }, jsx(ClickAreaBlock, {
+        editorView: props.editorView,
+        editorDisabled: props.disabled
+      }, 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: editorContentAreaStyle({
+          fullWidthMode,
+          layoutMaxWidth: theme.layoutMaxWidth
+        }),
+        role: "region",
+        "aria-label": props.intl.formatMessage(messages.editableContentLabel),
+        ref: contentAreaRef
+      }, 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: 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, jsx(PluginSlot, {
+        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)))), jsx("div", {
+        css: sidebarArea
+      }, props.contextPanel || jsx(ContextPanel, {
+        editorAPI: props.editorAPI,
+        visible: false
+      })));
+    })
+  );
 });
 export const FullPageContentArea = injectIntl(Content, {
   forwardRef: true

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

@@ -99,13 +99,13 @@ export const editorContentAreaHideContainer = css({
 });
 
 /* Prevent horizontal scroll on page in full width mode */
-const editorContentAreaContainerStyle = containerWidth => css({
+const editorContentAreaContainerStyle = () => 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: `${containerWidth - getTotalPadding() - tableMarginFullWidthMode * 2}px`
+      maxWidth: `calc(100% - ${tableMarginFullWidthMode * 2}px)`
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '.extension-container.inline': {
@@ -116,22 +116,16 @@ const editorContentAreaContainerStyle = containerWidth => css({
       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: `${containerWidth - getTotalPadding() - 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: `${containerWidth - getTotalPadding() + akLayoutGutterOffset * 2}px`
+      maxWidth: `calc(100% + ${akLayoutGutterOffset * 2}px)`
     }
   }
 });
 export const editorContentAreaStyle = ({
   layoutMaxWidth,
-  fullWidthMode,
-  containerWidth
-}) => [editorContentArea, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), containerWidth ? editorContentAreaContainerStyle(containerWidth) : editorContentAreaHideContainer];
+  fullWidthMode
+}) => [editorContentArea, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), editorContentAreaContainerStyle()];
 const editorContentAreaWithLayoutWith = layoutMaxWidth => css({
   // this restricts max width
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { IntlProviderIfMissingWrapper } from '@atlaskit/editor-common/ui';
 import ChromeCollapsed from '../ChromeCollapsed';
+import { IntlProviderIfMissingWrapper } from '../IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper';
 export default class CollapsedEditor extends React.Component {
   constructor(...args) {
     super(...args);

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

@@ -249,6 +249,19 @@ const contentStyles = props => css`
 		text-align: center;
 	}
 
+	// For FullPage only when inside a table
+	// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts
+	// In the "editorContentAreaContainerStyle" function
+	.fabric-editor--full-width-mode {
+		.pm-table-container {
+			.code-block,
+			.extension-container,
+			.multiBodiedExtension--container {
+				max-width: 100%;
+			}
+		}
+	}
+
 	.pm-table-header-content-wrap :not(.fabric-editor-alignment),
 	.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,
 	.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {

package/dist/es2019/ui/IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper.js

@@ -0,0 +1,14 @@
+import React, { useContext } from 'react';
+import { IntlContext, IntlProvider } from 'react-intl-next';
+const useCheckIntlContext = () => useContext(IntlContext) === null;
+export function IntlProviderIfMissingWrapper({
+  children
+}) {
+  const missingIntlContext = useCheckIntlContext();
+  if (missingIntlContext) {
+    return /*#__PURE__*/React.createElement(IntlProvider, {
+      locale: "en"
+    }, children);
+  }
+  return children;
+}

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "197.1.0";
+export const version = "197.1.2";

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

@@ -0,0 +1,20 @@
+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';`
+var defaultFontSize = 14;
+export function BaseThemeWrapper(_ref) {
+  var baseFontSize = _ref.baseFontSize,
+    children = _ref.children;
+  var memoizedTheme = useMemo(function () {
+    return {
+      baseFontSize: baseFontSize || defaultFontSize,
+      layoutMaxWidth: akEditorDefaultLayoutWidth
+    };
+  }, [baseFontSize]);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: memoizedTheme
+  }, children);
+}

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

@@ -13,7 +13,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';
@@ -21,9 +20,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';
+var 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`.
@@ -78,10 +85,8 @@ export var EditorInternal = /*#__PURE__*/memo(function (_ref) {
     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, {
@@ -103,7 +108,7 @@ export var EditorInternal = /*#__PURE__*/memo(function (_ref) {
         dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
         editorRef = _ref2.editorRef,
         editorAPI = _ref2.editorAPI;
-      return jsx(BaseTheme, {
+      return jsx(BaseThemeWrapper, {
         baseFontSize: getBaseFontSize(props.appearance)
       }, jsx(AppearanceComponent, {
         innerRef: editorRef,

package/dist/esm/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/esm/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/esm/ui/Appearance/Comment/Comment.js

@@ -13,7 +13,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';
@@ -153,7 +153,7 @@ export var CommentEditorWithIntl = function 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({
@@ -242,6 +242,6 @@ export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
     style: {
       flexGrow: 1
     }
-  }), customSecondaryToolbarComponents));
+  }), customSecondaryToolbarComponents)));
 };
 CommentEditorWithIntl.displayName = 'CommentEditorAppearance';

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

@@ -9,7 +9,7 @@ import React, { useImperativeHandle, useRef } from 'react';
 import { jsx, useTheme } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
-import { ContextPanelConsumer, WidthConsumer } from '@atlaskit/editor-common/ui';
+import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import { ClickAreaBlock } from '../../Addon';
 import ContextPanel from '../../ContextPanel';
 import PluginSlot from '../../PluginSlot';
@@ -34,74 +34,70 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     };
   }, []);
-  return jsx(WidthConsumer, null, function (_ref) {
-    var width = _ref.width;
-    return (
-      // Cleaned up with: platform_editor_context-panel_simplify_behaviour
-      jsx(ContextPanelConsumer, null, function (_ref2) {
-        var _contentAreaRef$curre;
-        var positionedOverEditor = _ref2.positionedOverEditor;
-        return 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
-          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 && 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 && positionedOverEditorStyle],
-          "data-testid": CONTENT_AREA_TEST_ID,
-          ref: containerRef
-        }, jsx(ScrollContainer
+  return (
+    // Cleaned up with: platform_editor_context-panel_simplify_behaviour
+    jsx(ContextPanelConsumer, null, function (_ref) {
+      var _contentAreaRef$curre;
+      var positionedOverEditor = _ref.positionedOverEditor;
+      return 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
+        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 && 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 && positionedOverEditorStyle],
+        "data-testid": CONTENT_AREA_TEST_ID,
+        ref: containerRef
+      }, jsx(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
+      }, jsx(ClickAreaBlock, {
+        editorView: props.editorView,
+        editorDisabled: props.disabled
+      }, 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: editorContentAreaStyle({
+          fullWidthMode: fullWidthMode,
+          layoutMaxWidth: theme.layoutMaxWidth
+        }),
+        role: "region",
+        "aria-label": props.intl.formatMessage(messages.editableContentLabel),
+        ref: contentAreaRef
+      }, 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: 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
-        }, jsx(ClickAreaBlock, {
-          editorView: props.editorView,
-          editorDisabled: props.disabled
-        }, 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: editorContentAreaStyle({
-            fullWidthMode: fullWidthMode,
-            layoutMaxWidth: theme.layoutMaxWidth,
-            containerWidth: width
-          }),
-          role: "region",
-          "aria-label": props.intl.formatMessage(messages.editableContentLabel),
-          ref: contentAreaRef
-        }, 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: 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, jsx(PluginSlot, {
-          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)))), jsx("div", {
-          css: sidebarArea
-        }, props.contextPanel || jsx(ContextPanel, {
-          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, jsx(PluginSlot, {
+        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)))), jsx("div", {
+        css: sidebarArea
+      }, props.contextPanel || jsx(ContextPanel, {
+        editorAPI: props.editorAPI,
+        visible: false
+      })));
+    })
+  );
 });
 export var FullPageContentArea = injectIntl(Content, {
   forwardRef: true

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

@@ -103,14 +103,14 @@ export var editorContentAreaHideContainer = css({
 });
 
 /* Prevent horizontal scroll on page in full width mode */
-var editorContentAreaContainerStyle = function editorContentAreaContainerStyle(containerWidth) {
+var editorContentAreaContainerStyle = function editorContentAreaContainerStyle() {
   return 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() - tableMarginFullWidthMode * 2, "px")
+        maxWidth: "calc(100% - ".concat(tableMarginFullWidthMode * 2, "px)")
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
       '.extension-container.inline': {
@@ -121,23 +121,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() - 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() + akLayoutGutterOffset * 2, "px")
+        maxWidth: "calc(100% + ".concat(akLayoutGutterOffset * 2, "px)")
       }
     }
   });
 };
 export var 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 css({

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

@@ -8,8 +8,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
-import { IntlProviderIfMissingWrapper } from '@atlaskit/editor-common/ui';
 import ChromeCollapsed from '../ChromeCollapsed';
+import { IntlProviderIfMissingWrapper } from '../IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper';
 var CollapsedEditor = /*#__PURE__*/function (_React$Component) {
   _inherits(CollapsedEditor, _React$Component);
   var _super = _createSuper(CollapsedEditor);

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

@@ -68,7 +68,7 @@ export var placeholderStyles = css({
   }
 });
 var contentStyles = function contentStyles(props) {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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"])), editorFontSize({
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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"])), editorFontSize({
     theme: props.theme
   }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, codeBlockStyles(), blocktypeStyles(), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles, layoutStyles(props.viewMode), telepointerStyle, gapCursorStyles, tableStyles(props), panelStyles(), mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, statusStyles, annotationSharedStyles(), smartCardStyles(), smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, resizerStyles, aiPanelStyles(props.colorMode), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
 };

package/dist/esm/ui/IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper.js

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+import { IntlContext, IntlProvider } from 'react-intl-next';
+var useCheckIntlContext = function useCheckIntlContext() {
+  return useContext(IntlContext) === null;
+};
+export function IntlProviderIfMissingWrapper(_ref) {
+  var children = _ref.children;
+  var missingIntlContext = useCheckIntlContext();
+  if (missingIntlContext) {
+    return /*#__PURE__*/React.createElement(IntlProvider, {
+      locale: "en"
+    }, children);
+  }
+  return children;
+}