@atlaskit/editor-core 163.0.0 → 164.0.2

package/dist/es2019/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 const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 const Content = /*#__PURE__*/React.memo(props => {
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
+  const theme = useTheme();
+  const fullWidthMode = props.appearance === 'full-width';
+  return jsx(WidthConsumer, null, ({
     width
-  }) => /*#__PURE__*/React.createElement(ContextPanelConsumer, null, ({
+  }) => jsx(ContextPanelConsumer, null, ({
     positionedOverEditor
-  }) => /*#__PURE__*/React.createElement(ContentArea, {
-    "data-testid": CONTENT_AREA_TEST_ID,
-    positionedOverEditor: positionedOverEditor
-  }, /*#__PURE__*/React.createElement(ScrollContainer, {
-    innerRef: props.scrollContainerRef,
+  }) => 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,
+      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 @@ const Content = /*#__PURE__*/React.memo(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/es2019/ui/Appearance/FullPage/FullPageToolbar.js

@@ -1,17 +1,23 @@
+/** @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 const EditorToolbar = /*#__PURE__*/React.memo(props => {
   var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$collabEdit, _props$collabEdit2, _props$collabEdit3, _props$featureFlags4, _props$featureFlags5;
 
   const [shouldSplitToolbar, setShouldSplitToolbar] = useState(false);
-  const nonCustomToolbar = /*#__PURE__*/React.createElement(NonCustomToolbarWrapper, null, props.beforeIcon && /*#__PURE__*/React.createElement(MainToolbarIconBefore, null, props.beforeIcon), /*#__PURE__*/React.createElement(Toolbar, {
+  const nonCustomToolbar = jsx("div", {
+    css: nonCustomToolbarWrapperStyle
+  }, props.beforeIcon && jsx("div", {
+    css: mainToolbarIconBeforeStyle
+  }, props.beforeIcon), jsx(Toolbar, {
     editorView: props.editorView,
     editorActions: props.editorActions,
     eventDispatcher: props.eventDispatcher,
@@ -26,15 +32,17 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
     containerElement: props.containerElement,
     hasMinWidth: props.hasMinWidth
   }));
-  const 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, {
+  const 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,
@@ -55,22 +63,21 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
       return () => window.removeEventListener('resize', updateOnResize);
     }
   });
-  return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, ({
+  return jsx(ContextPanelConsumer, null, ({
     width: contextPanelWidth
   }) => {
     var _props$featureFlags7, _props$featureFlags8, _props$featureFlags9;
 
-    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/es2019/ui/Appearance/FullPage/MainToolbar.js

@@ -1,13 +1,22 @@
-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 const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
 const toolbarLineHeight = 56;
-export const MainToolbar = styled.div`
+const mainToolbarWithKeyline = css`
+  box-shadow: 0 ${akEditorToolbarKeylineHeight}px 0 0 ${N30};
+`;
+const mainToolbarTwoLineStyle = css`
+  @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
+    flex-wrap: wrap;
+    height: calc(${toolbarLineHeight}px * 2);
+  }
+`;
+const mainToolbar = css`
   position: relative;
   align-items: center;
-  box-shadow: ${props => props.showKeyline ? `0 ${akEditorToolbarKeylineHeight}px 0 0 ${N30}` : 'none'};
+  box-shadow: none;
   transition: box-shadow 200ms ${akEditorSwoopCubicBezier};
   z-index: ${akEditorMenuZIndex};
   display: flex;
@@ -19,20 +28,13 @@ export const MainToolbar = styled.div`
     height: 0 !important;
   }
 
-  @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
-    ${props => props.twoLineEditorToolbar && `
-        flex-wrap: wrap;
-        height: calc(${toolbarLineHeight}px * 2);
-      `}
-  }
-
   @media (max-width: ${akEditorMobileMaxWidth}px) {
     display: grid;
     height: calc(${toolbarLineHeight}px * 2);
   }
 `;
-MainToolbar.displayName = 'MainToolbar';
-export const MainToolbarIconBefore = styled.div`
+export const mainToolbarStyle = (showKeyline, twoLineEditorToolbar) => [mainToolbar, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle];
+export const mainToolbarIconBeforeStyle = css`
   margin: ${gridSize() * 2}px;
   height: ${gridSize() * 4}px;
   width: ${gridSize() * 4}px;
@@ -41,64 +43,52 @@ export const MainToolbarIconBefore = styled.div`
     grid-row: 1;
   }
 `;
-MainToolbarIconBefore.displayName = 'MainToolbarIconBefore';
-export const MainToolbarFirstChild = styled.div`
+const mainToolbarFirstChild = css`
   display: flex;
   flex-grow: 1;
 
-  @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
-    ${props => props.twoLineEditorToolbar && `
-        flex: 1 1 100%;
-        height: ${toolbarLineHeight}px;
-        justify-content: flex-end;
-        // ED-10241: We add fit-content to ensure that MainToolbar does not
-        // shrink more than the size of its contents. This will prevent the
-        // find/replace icon from being overlapped during a confluence
-        // publish operation
-        min-width: fit-content;
-      `}
-  }
   @media (max-width: ${akEditorMobileMaxWidth}px) {
     grid-column: 1;
     grid-row: 1;
   }
 `;
-MainToolbarFirstChild.displayName = 'MainToolbarFirstChild';
-export const MainToolbarSecondChild = styled.div`
+const mainToolbarFirstChildTowLine = css`
+  @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
+    flex: 1 1 100%;
+    height: ${toolbarLineHeight}px;
+    justify-content: flex-end;
+    // ED-10241: We add fit-content to ensure that MainToolbar does not
+    // shrink more than the size of its contents. This will prevent the
+    // find/replace icon from being overlapped during a confluence
+    // publish operation
+    min-width: fit-content;
+  }
+`;
+export const mainToolbarFirstChildStyle = twoLineEditorToolbar => [mainToolbarFirstChild, twoLineEditorToolbar && mainToolbarFirstChildTowLine];
+const mainToolbarSecondChild = css`
   // ED-10241: We add fit-content to ensure that MainToolbar does not
   // shrink more than the size of its contents. This will prevent the
   // find/replace icon from being overlapped during a confluence
   // publish operation
   min-width: fit-content;
+`;
+const mainToolbarSecondChildTwoLine = css`
   @media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px) {
-    ${props => props.twoLineEditorToolbar && `
-        display: flex;
-        flex-grow: 1;
-        flex: 1 1 100%;
-        margin: auto;
-        height: ${toolbarLineHeight}px;
-        min-width: 0;
-      `}
+    display: flex;
+    flex-grow: 1;
+    flex: 1 1 100%;
+    margin: auto;
+    height: ${toolbarLineHeight}px;
+    min-width: 0;
   }
 `;
-MainToolbarSecondChild.displayName = 'MainToolbarSecondChild';
-export const SecondaryToolbar = styled.div`
-  box-sizing: border-box;
-  justify-content: flex-end;
-  align-items: center;
-  flex-shrink: 0;
-  display: flex;
-  padding: 24px 0;
-`;
-SecondaryToolbar.displayName = 'SecondaryToolbar';
-export const NonCustomToolbarWrapper = styled.div`
+export const mainToolbarSecondChildStyle = twoLineEditorToolbar => [mainToolbarSecondChild, twoLineEditorToolbar && mainToolbarSecondChildTwoLine];
+export const nonCustomToolbarWrapperStyle = css`
   align-items: center;
   display: flex;
   flex-grow: 1;
 `;
-NonCustomToolbarWrapper.displayName = 'NonCustomToolbar';
-export const CustomToolbarWrapper = styled.div`
+export const customToolbarWrapperStyle = css`
   align-items: center;
   display: flex;
-`;
-CustomToolbarWrapper.displayName = 'CustomToolbar';
+`;

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

@@ -1,21 +1,20 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorSwoopCubicBezier, akLayoutGutterOffset, ATLASSIAN_NAVIGATION_HEIGHT, akEditorContextPanelWidth } from '@atlaskit/editor-shared-styles';
 import { taskListSelector, decisionListSelector } from '@atlaskit/adf-schema';
-import ContentStyles from '../../ContentStyles';
-import { deprecatedTableFullPageEditorStyles } from '../../../plugins/table/ui/common-styles';
+import { createEditorContentStyle } from '../../ContentStyles';
+import { tableFullPageEditorStyles } from '../../../plugins/table/ui/common-styles';
 import { tableMarginFullWidthMode } from '../../../plugins/table/ui/consts';
 import { scrollbarStyles } from '../../styles';
 const SWOOP_ANIMATION = `0.5s ${akEditorSwoopCubicBezier}`;
 const TOTAL_PADDING = akEditorGutterPadding * 2;
-export const FullPageEditorWrapper = styled.div`
+export const fullPageEditorWrapper = css`
   min-width: 340px;
   height: 100%;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
 `;
-FullPageEditorWrapper.displayName = 'FullPageEditorWrapper';
-export const ScrollContainer = styled(ContentStyles)`
+const scrollStyles = css`
   flex-grow: 1;
   height: 100%;
   overflow-y: scroll;
@@ -25,29 +24,66 @@ export const ScrollContainer = styled(ContentStyles)`
   scroll-behavior: smooth;
   ${scrollbarStyles};
 `;
-ScrollContainer.displayName = 'ScrollContainer';
-export const ContentArea = styled.div`
+export const ScrollContainer = createEditorContentStyle(scrollStyles);
+ScrollContainer.displayName = 'ScrollContainer'; // transition used to match scrollbar with config panel opening animation
+// only use animation when opening as there is a bug with floating toolbars.
+
+export const positionedOverEditorStyle = css`
+  padding: 0 ${akEditorContextPanelWidth}px;
+  transition: padding 500ms ${akEditorSwoopCubicBezier};
+`;
+export const contentArea = css`
   display: flex;
   flex-direction: row;
   height: calc(100% - ${ATLASSIAN_NAVIGATION_HEIGHT});
   box-sizing: border-box;
   margin: 0;
-  padding: 0
-    ${p => p.positionedOverEditor ? akEditorContextPanelWidth : 0}px;
-
-  // transition used to match scrollbar with config panel opening animation
-  // only use animation when opening as there is a bug with floating toolbars.
-  transition: padding ${p => p.positionedOverEditor ? 500 : 0}ms
-    ${akEditorSwoopCubicBezier};
+  padding: 0;
+  transition: padding 0ms ${akEditorSwoopCubicBezier};
 `;
-ContentArea.displayName = 'ContentArea';
-export const SidebarArea = styled.div`
+export const sidebarArea = css`
   height: 100%;
   box-sizing: border-box;
   align-self: flex-end;
+`; // initially hide until we have a containerWidth and can properly size them,
+// otherwise they can cause the editor width to extend which is non-recoverable
+
+export const editorContentAreaHideContainer = css`
+  .fabric-editor--full-width-mode {
+    .pm-table-container,
+    .code-block,
+    .extension-container {
+      display: none;
+    }
+  }
+`;
+/* Prevent horizontal scroll on page in full width mode */
+
+const editorContentAreaContainerStyle = containerWidth => css`
+  .fabric-editor--full-width-mode {
+    .pm-table-container,
+    .code-block,
+    .extension-container {
+      max-width: ${containerWidth - TOTAL_PADDING - tableMarginFullWidthMode * 2}px;
+    }
+
+    [data-layout-section] {
+      max-width: ${containerWidth - TOTAL_PADDING + akLayoutGutterOffset * 2}px;
+    }
+  }
 `;
-SidebarArea.displayName = 'SidebarArea';
-export const EditorContentArea = styled.div`
+
+export const editorContentAreaStyle = ({
+  layoutMaxWidth,
+  fullWidthMode,
+  containerWidth
+}) => [editorContentArea, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), containerWidth ? editorContentAreaContainerStyle(containerWidth) : editorContentAreaHideContainer];
+
+const editorContentAreaWithLayoutWith = layoutMaxWidth => css`
+  max-width: ${layoutMaxWidth + TOTAL_PADDING}px;
+`;
+
+const editorContentArea = css`
   line-height: 24px;
   padding-top: 50px;
   padding-bottom: 55px;
@@ -59,12 +95,8 @@ export const EditorContentArea = styled.div`
   flex-direction: column;
   flex-grow: 1;
 
-  max-width: ${({
-  theme,
-  fullWidthMode
-}) => (fullWidthMode ? akEditorFullWidthLayoutWidth : theme.layoutMaxWidth) + TOTAL_PADDING}px;
+  max-width: ${akEditorFullWidthLayoutWidth + TOTAL_PADDING}px;
   transition: max-width ${SWOOP_ANIMATION};
-
   & .ProseMirror {
     flex-grow: 1;
     box-sizing: border-box;
@@ -93,7 +125,7 @@ export const EditorContentArea = styled.div`
     }
   }
 
-  ${deprecatedTableFullPageEditorStyles};
+  ${tableFullPageEditorStyles};
 
   .fabric-editor--full-width-mode {
     /* Full Width Mode styles for ignoring breakout sizes */
@@ -107,40 +139,9 @@ export const EditorContentArea = styled.div`
       margin-left: unset !important;
       transform: none !important;
     }
-
-    /* Prevent horizontal scroll on page in full width mode */
-    ${({
-  containerWidth
-}) => {
-  if (!containerWidth) {
-    // initially hide until we have a containerWidth and can properly size them,
-    // otherwise they can cause the editor width to extend which is non-recoverable
-    return `
-          .pm-table-container,
-          .code-block,
-          .extension-container {
-            display: none;
-          }
-        `;
-  }
-
-  return `
-        .pm-table-container,
-        .code-block,
-        .extension-container {
-          max-width: ${containerWidth - TOTAL_PADDING - tableMarginFullWidthMode * 2}px;
-        }
-
-        [data-layout-section] {
-          max-width: ${containerWidth - TOTAL_PADDING + akLayoutGutterOffset * 2}px;
-        }
-      `;
-}}
   }
 `;
-EditorContentArea.displayName = 'EditorContentArea';
-export const EditorContentGutter = styled.div`
+export const editorContentGutterStyle = css`
   box-sizing: border-box;
   padding: 0 ${akEditorGutterPadding}px;
-`;
-EditorContentGutter.displayName = 'EditorContentGutter';
+`;

package/dist/es2019/ui/AppearanceComponents/Mobile.js

@@ -1,12 +1,13 @@
+/** @jsx jsx */
 import React, { useCallback } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { pluginKey as maxContentSizePluginKey } from '../../plugins/max-content-size';
 import { mobileDimensionsPluginKey } from '../../plugins/mobile-dimensions/plugin-factory';
 import WithPluginState from '../WithPluginState';
 import WithFlash from '../WithFlash';
-import ContentStyles from '../ContentStyles';
+import { createEditorContentStyle } from '../ContentStyles';
 import { ClickAreaMobile as ClickArea } from '../Addon';
-const MobileEditor = styled.div`
+const mobileEditor = css`
   min-height: 30px;
   width: 100%;
   max-width: inherit;
@@ -20,8 +21,7 @@ const MobileEditor = styled.div`
     margin: 0;
   }
 `;
-MobileEditor.displayName = 'MobileEditor';
-const ContentArea = styled(ContentStyles)``;
+const ContentArea = createEditorContentStyle();
 ContentArea.displayName = 'ContentArea';
 export function MobileAppearance({
   editorView,
@@ -63,21 +63,20 @@ export function MobileAppearance({
       }
     }
 
-    return /*#__PURE__*/React.createElement(WithFlash, {
+    return jsx(WithFlash, {
       animate: maxContentSizeReached
-    }, /*#__PURE__*/React.createElement(MobileEditor, {
-      isMaxContentSizeReached: maxContentSizeReached,
-      maxHeight: maxHeight
-    }, /*#__PURE__*/React.createElement(ClickArea, {
+    }, jsx("div", {
+      css: mobileEditor
+    }, jsx(ClickArea, {
       editorView: editorView || undefined,
       minHeight: minHeight,
       persistScrollGutter: persistScrollGutter,
       isExpanded: currentIsExpanded
-    }, /*#__PURE__*/React.createElement(ContentArea, null, /*#__PURE__*/React.createElement("div", {
+    }, jsx(ContentArea, null, jsx("div", {
       className: "ak-editor-content-area"
     }, children)))));
-  }, [children, maxHeight, editorView, persistScrollGutter]);
-  return /*#__PURE__*/React.createElement(WithPluginState, {
+  }, [children, editorView, persistScrollGutter]);
+  return jsx(WithPluginState, {
     plugins: {
       maxContentSize: maxContentSizePluginKey,
       mobileDimensions: mobileDimensionsPluginKey

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

@@ -1,7 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
-import { Input } from './styles';
+import { inputStyle } from './styles';
 import { injectIntl } from 'react-intl-next';
 import { messages } from './messages';
 
@@ -32,8 +35,9 @@ class ChromeCollapsed extends PureComponent {
 
   render() {
     const placeholder = this.props.text || this.props.intl.formatMessage(messages.chromeCollapsedPlaceholder);
-    return /*#__PURE__*/React.createElement(Input, {
-      innerRef: this.handleInputRef,
+    return jsx("input", {
+      css: inputStyle,
+      ref: this.handleInputRef,
       onFocus: this.focusHandler,
       placeholder: placeholder
     });

package/dist/es2019/ui/ChromeCollapsed/styles.js

@@ -1,8 +1,8 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { akEditorSubtleAccent, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N300, N50 } from '@atlaskit/theme/colors';
-export const Input = styled.input`
+export const inputStyle = css`
   /* Normal .className gets overridden by input[type=text] hence this hack to produce input.className */
   input& {
     background-color: white;

package/dist/es2019/ui/ColorPalette/Color/index.js

@@ -1,9 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import { N0 } from '@atlaskit/theme/colors';
-import { Button, ButtonWrapper } from './styles';
+import { buttonStyle, buttonWrapperStyle } from './styles';
 import Tooltip from '@atlaskit/tooltip';
 
 class Color extends PureComponent {
@@ -35,9 +38,12 @@ class Color extends PureComponent {
       borderColor,
       checkMarkColor = N0
     } = this.props;
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return jsx(Tooltip, {
       content: label
-    }, /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+    }, jsx("span", {
+      css: buttonWrapperStyle
+    }, jsx("button", {
+      css: buttonStyle,
       "aria-label": label,
       role: "radio",
       "aria-checked": isSelected,
@@ -50,7 +56,7 @@ class Color extends PureComponent {
         border: `1px solid ${borderColor}`
       },
       autoFocus: autoFocus
-    }, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
+    }, isSelected && jsx(EditorDoneIcon, {
       primaryColor: checkMarkColor,
       label: ""
     }))));

package/dist/es2019/ui/ColorPalette/Color/styles.js

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { N900, N0, N50 } from '@atlaskit/theme/colors';
-export const Button = styled.button`
+export const buttonStyle = css`
   height: 26px;
   width: 26px;
   background: ${N900};
@@ -10,7 +10,7 @@ export const Button = styled.button`
   cursor: pointer;
   display: block;
 `;
-export const ButtonWrapper = styled.span`
+export const buttonWrapperStyle = css`
   border: 1px solid transparent;
   margin: 1px;
   font-size: 0;

package/dist/es2019/ui/ColorPalette/Palettes/panelBackgroundPalette.js

@@ -2,7 +2,7 @@
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { colors } from '@atlaskit/theme';
 import { DEFAULT_BORDER_COLOR } from './common';
-import { darkPanelColors } from '@atlaskit/editor-common/styles';
+import { darkPanelColors } from '@atlaskit/editor-common/panel';
 export const panelBackgroundPalette = [{
   label: 'White',
   value: colors.N0

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

@@ -1,7 +1,9 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import chromatism from 'chromatism';
 import Color from './Color';
-import { ColorPaletteWrapper } from './styles';
+import { colorPaletteWrapper } from './styles';
 import { injectIntl } from 'react-intl-next';
 import { N0, N500 } from '@atlaskit/theme/colors';
 
@@ -36,7 +38,8 @@ const ColorPalette = props => {
       return resultArray;
     }, []);
   }, [palette, cols]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, colorsPerRow.map((row, rowIdx) => /*#__PURE__*/React.createElement(ColorPaletteWrapper, {
+  return jsx(React.Fragment, null, colorsPerRow.map((row, rowIdx) => jsx("div", {
+    css: colorPaletteWrapper,
     className: className,
     key: `row-first-color-${row[0].value}`,
     role: "radiogroup"
@@ -45,7 +48,7 @@ const ColorPalette = props => {
     label,
     border,
     message
-  }, colorIdx) => /*#__PURE__*/React.createElement(Color, {
+  }, colorIdx) => jsx(Color, {
     key: value,
     value: value,
     borderColor: border,