@atlaskit/editor-core 163.0.0 → 164.0.2

package/dist/esm/ui/Appearance/Chromeless.js

@@ -13,19 +13,17 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import PluginSlot from '../PluginSlot';
 import WithPluginState from '../WithPluginState';
-import ContentStyles from '../ContentStyles';
+import { createEditorContentStyle } from '../ContentStyles';
 import { pluginKey as maxContentSizePluginKey } from '../../plugins/max-content-size';
 import { scrollbarStyles } from '../styles';
 import WithFlash from '../WithFlash';
-var ChromelessEditor = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 20px;\n  height: auto;\n  min-height: 30px;\n  ", " overflow-x: hidden;\n  overflow-y: auto;\n  ", " max-width: inherit;\n  box-sizing: border-box;\n  word-wrap: break-word;\n\n  div > .ProseMirror {\n    outline: none;\n    white-space: pre-wrap;\n    padding: 0;\n    margin: 0;\n  }\n"])), function (props) {
-  return props.maxHeight ? 'max-height: ' + props.maxHeight + 'px;' : '';
-}, scrollbarStyles);
-ChromelessEditor.displayName = 'ChromelessEditor';
-var ContentArea = styled(ContentStyles)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
+var chromelessEditor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 20px;\n  height: auto;\n  min-height: 30px;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  max-width: inherit;\n  box-sizing: border-box;\n  word-wrap: break-word;\n\n  div > .ProseMirror {\n    outline: none;\n    white-space: pre-wrap;\n    padding: 0;\n    margin: 0;\n  }\n"])), scrollbarStyles);
+var ContentArea = createEditorContentStyle();
 ContentArea.displayName = 'ContentArea';
 
 var Editor = /*#__PURE__*/function (_React$Component) {
@@ -65,14 +63,14 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           disabled = _this$props.disabled,
           dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent;
       var maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
-      return /*#__PURE__*/React.createElement(WithFlash, {
+      return jsx(WithFlash, {
         animate: maxContentSizeReached
-      }, /*#__PURE__*/React.createElement(ChromelessEditor, {
-        maxHeight: maxHeight,
-        innerRef: function innerRef(ref) {
-          return _this.containerElement = ref;
+      }, jsx("div", {
+        css: [chromelessEditor, maxHeight && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                max-height: ", "px;\n              "])), maxHeight)],
+        ref: function ref(_ref2) {
+          return _this.containerElement = _ref2;
         }
-      }, /*#__PURE__*/React.createElement(ContentArea, null, customContentComponents, /*#__PURE__*/React.createElement(PluginSlot, {
+      }, jsx(ContentArea, null, customContentComponents, jsx(PluginSlot, {
         editorView: editorView,
         editorActions: editorActions,
         eventDispatcher: eventDispatcher,
@@ -94,7 +92,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
   _createClass(Editor, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(WithPluginState, {
+      return jsx(WithPluginState, {
         plugins: {
           maxContentSize: maxContentSizePluginKey
         },

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

@@ -7,14 +7,15 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/custom-theme-button';
 import { borderRadius } from '@atlaskit/theme/constants';
@@ -22,11 +23,10 @@ import { N40 } from '@atlaskit/theme/colors';
 import Toolbar from '../../Toolbar';
 import PluginSlot from '../../PluginSlot';
 import WithPluginState from '../../WithPluginState';
-import ContentStyles from '../../ContentStyles';
 import { pluginKey as maxContentSizePluginKey } from '../../../plugins/max-content-size';
 import { stateKey as mediaPluginKey } from '../../../plugins/media/pm-plugins/plugin-key';
 import { ClickAreaBlock } from '../../Addon';
-import { deprecatedTableCommentEditorStyles } from '../../../plugins/table/ui/common-styles';
+import { tableCommentEditorStyles } from '../../../plugins/table/ui/common-styles';
 import WithFlash from '../../WithFlash';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
@@ -35,17 +35,14 @@ import { GRID_GUTTER } from '../../../plugins/grid';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
 import messages from '../../../messages';
-import { TableControlsPadding, MainToolbar, MainToolbarCustomComponentsSlot } from './Toolbar';
+import { TableControlsPadding, MainToolbar, mainToolbarCustomComponentsSlotStyle } from './Toolbar';
+import { createEditorContentStyle } from '../../ContentStyles';
 var CommentEditorMargin = 14;
 var CommentEditorSmallerMargin = 8;
-var CommentEditor = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Parahraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n  min-height: 150px;\n  height: auto;\n  background-color: white;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, N40, borderRadius());
-CommentEditor.displayName = 'CommentEditor';
-var ContentArea = styled(ContentStyles)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n  ", ";\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for tables controlls. Otherwise marging collapse and controlls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), function (props) {
-  return props.maxHeight ? 'max-height: ' + props.maxHeight + 'px;' : '';
-}, CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, TableControlsPadding, deprecatedTableCommentEditorStyles);
+var commentEditorStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Parahraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n  min-height: 150px;\n  height: auto;\n  background-color: white;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, N40, borderRadius());
+var ContentArea = createEditorContentStyle(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for tables controlls. Otherwise marging collapse and controlls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, TableControlsPadding, tableCommentEditorStyles));
 ContentArea.displayName = 'ContentArea';
-var SecondaryToolbar = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: 12px 1px;\n"])));
-SecondaryToolbar.displayName = 'SecondaryToolbar';
+var secondaryToolbarStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: 12px 1px;\n"])));
 
 var Editor = /*#__PURE__*/function (_React$Component) {
   _inherits(Editor, _React$Component);
@@ -105,14 +102,14 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           useStickyToolbar = _this$props.useStickyToolbar;
       var maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
       var showSecondaryToolbar = !!onSave || !!onCancel || !!customSecondaryToolbarComponents;
-      return /*#__PURE__*/React.createElement(WithFlash, {
+      return jsx(WithFlash, {
         animate: maxContentSizeReached
-      }, /*#__PURE__*/React.createElement(CommentEditor, {
-        maxHeight: maxHeight,
+      }, jsx("div", {
+        css: commentEditorStyle,
         className: "akEditor"
-      }, /*#__PURE__*/React.createElement(MainToolbar, {
+      }, jsx(MainToolbar, {
         useStickyToolbar: useStickyToolbar
-      }, /*#__PURE__*/React.createElement(Toolbar, {
+      }, jsx(Toolbar, {
         editorView: editorView,
         editorActions: editorActions,
         eventDispatcher: eventDispatcher,
@@ -125,19 +122,21 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         disabled: !!disabled,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         containerElement: _this.containerElement
-      }), /*#__PURE__*/React.createElement(MainToolbarCustomComponentsSlot, null, customPrimaryToolbarComponents)), /*#__PURE__*/React.createElement(ClickAreaBlock, {
+      }), jsx("div", {
+        css: mainToolbarCustomComponentsSlotStyle
+      }, customPrimaryToolbarComponents)), jsx(ClickAreaBlock, {
         editorView: editorView
-      }, /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
+      }, jsx(WidthConsumer, null, function (_ref2) {
         var width = _ref2.width;
-        return /*#__PURE__*/React.createElement(ContentArea, {
-          innerRef: function innerRef(ref) {
-            return _this.containerElement = ref;
+        return jsx(ContentArea, {
+          ref: function ref(_ref3) {
+            return _this.containerElement = _ref3;
           },
+          css: maxHeight ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                            max-height: ", "px;\n                          "])), maxHeight) : null,
           className: classnames('ak-editor-content-area', {
             'less-margin': width < akEditorMobileBreakoutPoint
-          }),
-          maxHeight: maxHeight
-        }, customContentComponents, /*#__PURE__*/React.createElement(PluginSlot, {
+          })
+        }, customContentComponents, jsx(PluginSlot, {
           editorView: editorView,
           editorActions: editorActions,
           eventDispatcher: eventDispatcher,
@@ -151,20 +150,21 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           containerElement: _this.containerElement,
           disabled: !!disabled
         }), editorDOMElement);
-      })), /*#__PURE__*/React.createElement(WidthEmitter, {
+      })), jsx(WidthEmitter, {
         editorView: editorView
-      })), showSecondaryToolbar && /*#__PURE__*/React.createElement(SecondaryToolbar, {
+      })), showSecondaryToolbar && jsx("div", {
+        css: secondaryToolbarStyle,
         "data-testid": "ak-editor-secondary-toolbar"
-      }, /*#__PURE__*/React.createElement(ButtonGroup, null, !!onSave && /*#__PURE__*/React.createElement(Button, {
+      }, jsx(ButtonGroup, null, !!onSave && jsx(Button, {
         appearance: "primary",
         onClick: _this.handleSave,
         testId: "comment-save-button",
         isDisabled: disabled || mediaState && !mediaState.allUploadsFinished
-      }, intl.formatMessage(messages.saveButton)), !!onCancel && /*#__PURE__*/React.createElement(Button, {
+      }, intl.formatMessage(messages.saveButton)), !!onCancel && jsx(Button, {
         appearance: "subtle",
         onClick: _this.handleCancel,
         isDisabled: disabled
-      }, intl.formatMessage(messages.cancelButton))), /*#__PURE__*/React.createElement("span", {
+      }, intl.formatMessage(messages.cancelButton))), jsx("span", {
         style: {
           flexGrow: 1
         }
@@ -177,7 +177,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
   _createClass(Editor, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(WithPluginState, {
+      return jsx(WithPluginState, {
         plugins: {
           maxContentSize: maxContentSizePluginKey,
           mediaState: mediaPluginKey

package/dist/esm/ui/Appearance/Comment/Toolbar.js

@@ -1,20 +1,17 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
+/** @jsx jsx */
 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N30 } from '@atlaskit/theme/colors';
 import { akEditorToolbarKeylineHeight, akEditorGridLineZIndex, akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 export var TableControlsPadding = 20;
-export var MainToolbarWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  padding: ", "px ", "px 0;\n  display: flex;\n  height: auto;\n  background-color: white;\n  box-shadow: none;\n  padding-left: ", "px;\n\n  & > div > *:first-child {\n    margin-left: 0;\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), gridSize(), gridSize(), TableControlsPadding);
-MainToolbarWrapper.displayName = 'MainToolbar';
-var StickyToolbarWrapper = styled(MainToolbarWrapper)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* stylelint-disable declaration-block-no-duplicate-properties */\n  position: relative;\n  position: sticky;\n  /* stylelint-enable declaration-block-no-duplicate-properties */\n  top: ", ";\n  padding-bottom: ", "px;\n  z-index: ", ";\n  transition: box-shadow ease-in-out 0.2s;\n  &.show-keyline {\n    box-shadow: 0 ", "px 0 0 ", ";\n  }\n"])), function (props) {
-  return "".concat(props.top, "px");
-}, gridSize(), akEditorGridLineZIndex + akEditorMenuZIndex, akEditorToolbarKeylineHeight, N30);
-StickyToolbarWrapper.displayName = 'MainToolbarSticky';
+var mainToolbarWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  padding: ", "px ", "px 0;\n  display: flex;\n  height: auto;\n  background-color: white;\n  box-shadow: none;\n  padding-left: ", "px;\n\n  & > div > *:first-child {\n    margin-left: 0;\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), gridSize(), gridSize(), TableControlsPadding);
+var stickyToolbarWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* stylelint-disable declaration-block-no-duplicate-properties */\n  position: relative;\n  position: sticky;\n  /* stylelint-enable declaration-block-no-duplicate-properties */\n  padding-bottom: ", "px;\n  z-index: ", ";\n  transition: box-shadow ease-in-out 0.2s;\n  &.show-keyline {\n    box-shadow: 0 ", "px 0 0 ", ";\n  }\n"])), gridSize(), akEditorGridLineZIndex + akEditorMenuZIndex, akEditorToolbarKeylineHeight, N30);
 
 var StickyToolbar = function StickyToolbar(props) {
   var _useState = useState(0),
@@ -27,15 +24,16 @@ var StickyToolbar = function StickyToolbar(props) {
 
     setTop(((_props$externalToolba = props.externalToolbarRef) === null || _props$externalToolba === void 0 ? void 0 : (_props$externalToolba2 = _props$externalToolba.current) === null || _props$externalToolba2 === void 0 ? void 0 : _props$externalToolba2.clientHeight) || 0);
   }, [setTop, props.externalToolbarRef]);
-  return /*#__PURE__*/React.createElement(StickyToolbarWrapper, {
+  return jsx("div", {
+    css: [mainToolbarWrapperStyle, stickyToolbarWrapperStyle, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          top: ", ";\n        "])), top)],
     "data-testid": "ak-editor-main-toolbar",
-    className: 'show-keyline',
-    top: top
+    className: 'show-keyline'
   }, props.children);
 };
 
 var FixedToolbar = function FixedToolbar(props) {
-  return /*#__PURE__*/React.createElement(MainToolbarWrapper, {
+  return jsx("div", {
+    css: mainToolbarWrapperStyle,
     "data-testid": "ak-editor-main-toolbar"
   }, props.children);
 };
@@ -45,12 +43,11 @@ export var MainToolbar = function MainToolbar(_ref) {
       children = _ref.children;
 
   if (!!useStickyToolbar) {
-    return /*#__PURE__*/React.createElement(StickyToolbar, {
+    return jsx(StickyToolbar, {
       externalToolbarRef: typeof useStickyToolbar === 'boolean' ? undefined : useStickyToolbar
     }, children);
   }
 
-  return /*#__PURE__*/React.createElement(FixedToolbar, null, children);
+  return jsx(FixedToolbar, null, children);
 };
-export var MainToolbarCustomComponentsSlot = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  flex-grow: 1;\n  padding-right: ", "px;\n  > div {\n    display: flex;\n    flex-shrink: 0;\n  }\n"])), TableControlsPadding);
-MainToolbarCustomComponentsSlot.displayName = 'MainToolbar';
+export var mainToolbarCustomComponentsSlotStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  flex-grow: 1;\n  padding-right: ", "px;\n  > div {\n    display: flex;\n    flex-shrink: 0;\n  }\n"])), TableControlsPadding);

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

@@ -10,10 +10,12 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
-import { FullPageEditorWrapper } from './StyledComponents';
+import { fullPageEditorWrapper } from './StyledComponents';
 import { ContextPanelWidthProvider } from '../../ContextPanel/context';
 import { FullPageContentArea } from './FullPageContentArea';
 import { FullPageToolbar } from './FullPageToolbar';
@@ -103,9 +105,10 @@ export var FullPageEditor = /*#__PURE__*/function (_React$Component) {
       var props = this.props;
       var showKeyline = this.state.showKeyline;
       var featureFlags = (_props$editorView = props.editorView) !== null && _props$editorView !== void 0 && _props$editorView.state ? getFeatureFlags(props.editorView.state) : undefined;
-      return /*#__PURE__*/React.createElement(ContextPanelWidthProvider, null, /*#__PURE__*/React.createElement(FullPageEditorWrapper, {
+      return jsx(ContextPanelWidthProvider, null, jsx("div", {
+        css: fullPageEditorWrapper,
         className: "akEditor"
-      }, /*#__PURE__*/React.createElement(FullPageToolbar, {
+      }, jsx(FullPageToolbar, {
         appearance: props.appearance,
         beforeIcon: props.primaryToolbarIconBefore,
         collabEdit: props.collabEdit,
@@ -125,7 +128,7 @@ export var FullPageEditor = /*#__PURE__*/function (_React$Component) {
         providerFactory: props.providerFactory,
         showKeyline: showKeyline,
         featureFlags: featureFlags
-      }), /*#__PURE__*/React.createElement(FullPageContentArea, {
+      }), jsx(FullPageContentArea, {
         appearance: props.appearance,
         contentArea: this.contentArea,
         contentAreaRef: this.contentAreaRef,

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

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx, useTheme } from '@emotion/react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { ContextPanelConsumer } from '../../ContextPanel/context';
 import React from 'react';
@@ -6,31 +8,37 @@ import { ClickAreaBlock } from '../../Addon';
 import ContextPanel from '../../ContextPanel';
 import PluginSlot from '../../PluginSlot';
 import WidthEmitter from '../../WidthEmitter';
-import { ContentArea, EditorContentArea, SidebarArea, ScrollContainer, EditorContentGutter } from './StyledComponents';
+import { contentArea, editorContentAreaStyle, sidebarArea, ScrollContainer, editorContentGutterStyle, positionedOverEditorStyle } from './StyledComponents';
 import messages from './messages';
 export var CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 var Content = /*#__PURE__*/React.memo(function (props) {
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref) {
+  var theme = useTheme();
+  var fullWidthMode = props.appearance === 'full-width';
+  return jsx(WidthConsumer, null, function (_ref) {
     var width = _ref.width;
-    return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, function (_ref2) {
+    return jsx(ContextPanelConsumer, null, function (_ref2) {
       var positionedOverEditor = _ref2.positionedOverEditor;
-      return /*#__PURE__*/React.createElement(ContentArea, {
-        "data-testid": CONTENT_AREA_TEST_ID,
-        positionedOverEditor: positionedOverEditor
-      }, /*#__PURE__*/React.createElement(ScrollContainer, {
-        innerRef: props.scrollContainerRef,
+      return jsx("div", {
+        css: [contentArea, positionedOverEditor && positionedOverEditorStyle],
+        "data-testid": CONTENT_AREA_TEST_ID
+      }, jsx(ScrollContainer, {
+        ref: props.scrollContainerRef,
         className: "fabric-editor-popup-scroll-parent"
-      }, /*#__PURE__*/React.createElement(ClickAreaBlock, {
+      }, jsx(ClickAreaBlock, {
         editorView: props.editorView
-      }, /*#__PURE__*/React.createElement(EditorContentArea, {
+      }, jsx("div", {
+        css: editorContentAreaStyle({
+          fullWidthMode: fullWidthMode,
+          layoutMaxWidth: theme.layoutMaxWidth,
+          containerWidth: width
+        }),
         role: "region",
         "aria-label": props.intl.formatMessage(messages.editableContentLabel),
-        fullWidthMode: props.appearance === 'full-width',
-        innerRef: props.contentAreaRef,
-        containerWidth: width
-      }, /*#__PURE__*/React.createElement(EditorContentGutter, {
-        className: ['ak-editor-content-area', props.appearance === 'full-width' ? 'fabric-editor--full-width-mode' : ''].join(' ')
-      }, props.customContentComponents, /*#__PURE__*/React.createElement(PluginSlot, {
+        ref: props.contentAreaRef
+      }, jsx("div", {
+        css: editorContentGutterStyle,
+        className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' ')
+      }, props.customContentComponents, jsx(PluginSlot, {
         editorView: props.editorView,
         editorActions: props.editorActions,
         eventDispatcher: props.eventDispatcher,
@@ -44,9 +52,11 @@ var Content = /*#__PURE__*/React.memo(function (props) {
         disabled: !!props.disabled,
         containerElement: props.scrollContainer,
         dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
-      }), props.editorDOMElement)))), /*#__PURE__*/React.createElement(SidebarArea, null, props.contextPanel || /*#__PURE__*/React.createElement(ContextPanel, {
+      }), props.editorDOMElement)))), jsx("div", {
+        css: sidebarArea
+      }, props.contextPanel || jsx(ContextPanel, {
         visible: false
-      })), /*#__PURE__*/React.createElement(WidthEmitter, {
+      })), jsx(WidthEmitter, {
         editorView: props.editorView
       }));
     });

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

@@ -1,11 +1,14 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
 import React, { useState, useEffect } from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import AvatarsWithPluginState from '../../../plugins/collab-edit/ui';
 import FindReplaceToolbarButtonWithState from '../../../plugins/find-replace/FindReplaceToolbarButtonWithState';
 import { BeforePrimaryToolbarWrapper } from '../../../plugins/before-primaryToolbar/ui/BeforePrimaryToolbarWrapper';
 import Toolbar from '../../Toolbar';
-import { MainToolbar, MainToolbarIconBefore, MainToolbarFirstChild, MainToolbarSecondChild, NonCustomToolbarWrapper, CustomToolbarWrapper, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
+import { mainToolbarStyle, mainToolbarIconBeforeStyle, mainToolbarFirstChildStyle, mainToolbarSecondChildStyle, nonCustomToolbarWrapperStyle, customToolbarWrapperStyle, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
 import { ContextPanelConsumer } from '../../ContextPanel/context';
 import messages from './messages';
 export var EditorToolbar = /*#__PURE__*/React.memo(function (props) {
@@ -16,7 +19,11 @@ export var EditorToolbar = /*#__PURE__*/React.memo(function (props) {
       shouldSplitToolbar = _useState2[0],
       setShouldSplitToolbar = _useState2[1];
 
-  var nonCustomToolbar = /*#__PURE__*/React.createElement(NonCustomToolbarWrapper, null, props.beforeIcon && /*#__PURE__*/React.createElement(MainToolbarIconBefore, null, props.beforeIcon), /*#__PURE__*/React.createElement(Toolbar, {
+  var nonCustomToolbar = jsx("div", {
+    css: nonCustomToolbarWrapperStyle
+  }, props.beforeIcon && jsx("div", {
+    css: mainToolbarIconBeforeStyle
+  }, props.beforeIcon), jsx(Toolbar, {
     editorView: props.editorView,
     editorActions: props.editorActions,
     eventDispatcher: props.eventDispatcher,
@@ -31,15 +38,17 @@ export var EditorToolbar = /*#__PURE__*/React.memo(function (props) {
     containerElement: props.containerElement,
     hasMinWidth: props.hasMinWidth
   }));
-  var customToolbar = /*#__PURE__*/React.createElement(CustomToolbarWrapper, null, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? /*#__PURE__*/React.createElement(BeforePrimaryToolbarWrapper, {
+  var customToolbar = jsx("div", {
+    css: customToolbarWrapperStyle
+  }, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? jsx(BeforePrimaryToolbarWrapper, {
     beforePrimaryToolbarComponents: props.customPrimaryToolbarComponents.before
-  }) : null, (props === null || props === void 0 ? void 0 : (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null : /*#__PURE__*/React.createElement(AvatarsWithPluginState, {
+  }) : null, (props === null || props === void 0 ? void 0 : (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null : jsx(AvatarsWithPluginState, {
     editorView: props.editorView,
     eventDispatcher: props.eventDispatcher,
     inviteToEditComponent: (_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.inviteToEditComponent,
     inviteToEditHandler: (_props$collabEdit2 = props.collabEdit) === null || _props$collabEdit2 === void 0 ? void 0 : _props$collabEdit2.inviteToEditHandler,
     isInviteToEditButtonSelected: (_props$collabEdit3 = props.collabEdit) === null || _props$collabEdit3 === void 0 ? void 0 : _props$collabEdit3.isInviteToEditButtonSelected
-  }), (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.findReplace && (_props$featureFlags5 = props.featureFlags) !== null && _props$featureFlags5 !== void 0 && _props$featureFlags5.twoLineEditorToolbar ? /*#__PURE__*/React.createElement(FindReplaceToolbarButtonWithState, {
+  }), (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.findReplace && (_props$featureFlags5 = props.featureFlags) !== null && _props$featureFlags5 !== void 0 && _props$featureFlags5.twoLineEditorToolbar ? jsx(FindReplaceToolbarButtonWithState, {
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: props.popupsMountPoint,
     popupsScrollableElement: props.popupsScrollableElement,
@@ -62,21 +71,20 @@ export var EditorToolbar = /*#__PURE__*/React.memo(function (props) {
       };
     }
   });
-  return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, function (_ref) {
+  return jsx(ContextPanelConsumer, null, function (_ref) {
     var _props$featureFlags7, _props$featureFlags8, _props$featureFlags9;
 
     var contextPanelWidth = _ref.width;
-    return /*#__PURE__*/React.createElement(MainToolbar, {
-      "data-testid": "ak-editor-main-toolbar",
-      showKeyline: props.showKeyline || contextPanelWidth > 0,
-      twoLineEditorToolbar: !!((_props$featureFlags7 = props.featureFlags) !== null && _props$featureFlags7 !== void 0 && _props$featureFlags7.twoLineEditorToolbar)
-    }, /*#__PURE__*/React.createElement(MainToolbarFirstChild, {
-      twoLineEditorToolbar: !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar),
+    return jsx("div", {
+      css: mainToolbarStyle(props.showKeyline || contextPanelWidth > 0, !!((_props$featureFlags7 = props.featureFlags) !== null && _props$featureFlags7 !== void 0 && _props$featureFlags7.twoLineEditorToolbar)),
+      "data-testid": "ak-editor-main-toolbar"
+    }, jsx("div", {
+      css: mainToolbarFirstChildStyle(!!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar)),
       role: "region",
       "aria-label": props.intl.formatMessage(messages.toolbarLabel)
-    }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), /*#__PURE__*/React.createElement(MainToolbarSecondChild, {
+    }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), jsx("div", {
+      css: mainToolbarSecondChildStyle(!!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.twoLineEditorToolbar)),
       "data-testid": 'avatar-group-outside-plugin',
-      twoLineEditorToolbar: !!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.twoLineEditorToolbar),
       role: "region",
       "aria-label": props.intl.formatMessage(messages.pageActionsLabel)
     }, shouldSplitToolbar ? nonCustomToolbar : customToolbar));

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

@@ -1,32 +1,29 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { akEditorMenuZIndex, akEditorSwoopCubicBezier, akEditorToolbarKeylineHeight, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
 export var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
 var toolbarLineHeight = 56;
-export var MainToolbar = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: ", ";\n  transition: box-shadow 200ms ", ";\n  z-index: ", ";\n  display: flex;\n  height: ", "px;\n  flex-shrink: 0;\n  background-color: white;\n\n  & object {\n    height: 0 !important;\n  }\n\n  @media (max-width: ", "px) {\n    ", "\n  }\n\n  @media (max-width: ", "px) {\n    display: grid;\n    height: calc(", "px * 2);\n  }\n"])), function (props) {
-  return props.showKeyline ? "0 ".concat(akEditorToolbarKeylineHeight, "px 0 0 ").concat(N30) : 'none';
-}, akEditorSwoopCubicBezier, akEditorMenuZIndex, toolbarLineHeight, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, function (props) {
-  return props.twoLineEditorToolbar && "\n        flex-wrap: wrap;\n        height: calc(".concat(toolbarLineHeight, "px * 2);\n      ");
-}, akEditorMobileMaxWidth, toolbarLineHeight);
-MainToolbar.displayName = 'MainToolbar';
-export var MainToolbarIconBefore = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: ", "px;\n  height: ", "px;\n  width: ", "px;\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), gridSize() * 2, gridSize() * 4, gridSize() * 4, akEditorMobileMaxWidth);
-MainToolbarIconBefore.displayName = 'MainToolbarIconBefore';
-export var MainToolbarFirstChild = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n\n  @media (max-width: ", "px) {\n    ", "\n  }\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, function (props) {
-  return props.twoLineEditorToolbar && "\n        flex: 1 1 100%;\n        height: ".concat(toolbarLineHeight, "px;\n        justify-content: flex-end;\n        // ED-10241: We add fit-content to ensure that MainToolbar does not\n        // shrink more than the size of its contents. This will prevent the\n        // find/replace icon from being overlapped during a confluence\n        // publish operation\n        min-width: fit-content;\n      ");
-}, akEditorMobileMaxWidth);
-MainToolbarFirstChild.displayName = 'MainToolbarFirstChild';
-export var MainToolbarSecondChild = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  // ED-10241: We add fit-content to ensure that MainToolbar does not\n  // shrink more than the size of its contents. This will prevent the\n  // find/replace icon from being overlapped during a confluence\n  // publish operation\n  min-width: fit-content;\n  @media (max-width: ", "px) {\n    ", "\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, function (props) {
-  return props.twoLineEditorToolbar && "\n        display: flex;\n        flex-grow: 1;\n        flex: 1 1 100%;\n        margin: auto;\n        height: ".concat(toolbarLineHeight, "px;\n        min-width: 0;\n      ");
-});
-MainToolbarSecondChild.displayName = 'MainToolbarSecondChild';
-export var SecondaryToolbar = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  flex-shrink: 0;\n  display: flex;\n  padding: 24px 0;\n"])));
-SecondaryToolbar.displayName = 'SecondaryToolbar';
-export var NonCustomToolbarWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  flex-grow: 1;\n"])));
-NonCustomToolbarWrapper.displayName = 'NonCustomToolbar';
-export var CustomToolbarWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n"])));
-CustomToolbarWrapper.displayName = 'CustomToolbar';
+var mainToolbarWithKeyline = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-shadow: 0 ", "px 0 0 ", ";\n"])), akEditorToolbarKeylineHeight, N30);
+var mainToolbarTwoLineStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  @media (max-width: ", "px) {\n    flex-wrap: wrap;\n    height: calc(", "px * 2);\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);
+var mainToolbar = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: none;\n  transition: box-shadow 200ms ", ";\n  z-index: ", ";\n  display: flex;\n  height: ", "px;\n  flex-shrink: 0;\n  background-color: white;\n\n  & object {\n    height: 0 !important;\n  }\n\n  @media (max-width: ", "px) {\n    display: grid;\n    height: calc(", "px * 2);\n  }\n"])), akEditorSwoopCubicBezier, akEditorMenuZIndex, toolbarLineHeight, akEditorMobileMaxWidth, toolbarLineHeight);
+export var mainToolbarStyle = function mainToolbarStyle(showKeyline, twoLineEditorToolbar) {
+  return [mainToolbar, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle];
+};
+export var mainToolbarIconBeforeStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: ", "px;\n  height: ", "px;\n  width: ", "px;\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), gridSize() * 2, gridSize() * 4, gridSize() * 4, akEditorMobileMaxWidth);
+var mainToolbarFirstChild = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), akEditorMobileMaxWidth);
+var mainToolbarFirstChildTowLine = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  @media (max-width: ", "px) {\n    flex: 1 1 100%;\n    height: ", "px;\n    justify-content: flex-end;\n    // ED-10241: We add fit-content to ensure that MainToolbar does not\n    // shrink more than the size of its contents. This will prevent the\n    // find/replace icon from being overlapped during a confluence\n    // publish operation\n    min-width: fit-content;\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);
+export var mainToolbarFirstChildStyle = function mainToolbarFirstChildStyle(twoLineEditorToolbar) {
+  return [mainToolbarFirstChild, twoLineEditorToolbar && mainToolbarFirstChildTowLine];
+};
+var mainToolbarSecondChild = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  // ED-10241: We add fit-content to ensure that MainToolbar does not\n  // shrink more than the size of its contents. This will prevent the\n  // find/replace icon from being overlapped during a confluence\n  // publish operation\n  min-width: fit-content;\n"])));
+var mainToolbarSecondChildTwoLine = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  @media (max-width: ", "px) {\n    display: flex;\n    flex-grow: 1;\n    flex: 1 1 100%;\n    margin: auto;\n    height: ", "px;\n    min-width: 0;\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);
+export var mainToolbarSecondChildStyle = function mainToolbarSecondChildStyle(twoLineEditorToolbar) {
+  return [mainToolbarSecondChild, twoLineEditorToolbar && mainToolbarSecondChildTwoLine];
+};
+export var nonCustomToolbarWrapperStyle = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  flex-grow: 1;\n"])));
+export var customToolbarWrapperStyle = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n"])));