@atlaskit/editor-core 162.0.0 → 164.0.0

package/dist/es2019/plugins/type-ahead/ui/TypeAheadList.js

@@ -1,55 +1,18 @@
+/** @jsx jsx */
 import React, { useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
-import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+import { jsx, css } from '@emotion/react'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
-import { ItemGroup, itemThemeNamespace } from '@atlaskit/item';
-import { themed } from '@atlaskit/theme/components';
-import { ThemeProvider } from 'styled-components';
-import { ICON_HEIGHT } from './TypeAheadListItem';
+import { ItemGroup } from '@atlaskit/item';
+import { ICON_HEIGHT, itemTheme, ITEM_PADDING } from './TypeAheadListItem';
 import { VariableSizeList as List } from 'react-window';
 import { ResizeObserverProvider } from './hooks/use-resize-observer';
 import { useDynamicListHeightCalculation } from './hooks/use-dynamic-list-height-calculation';
 import { DynamicHeightListItem, SelectedIndexContext, ListItemActionsContext, UpdateListItemHeightContext } from './DynamicHeightListItem';
 import { injectIntl } from 'react-intl-next';
 import { typeAheadListMessages } from '../messages';
-const ITEM_PADDING = 12;
 const LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
 const LIST_MAX_HEIGHT = 380;
 const LIST_WIDTH = 320;
-const itemTheme = {
-  [itemThemeNamespace]: {
-    padding: {
-      default: {
-        bottom: ITEM_PADDING,
-        left: ITEM_PADDING,
-        right: ITEM_PADDING,
-        top: ITEM_PADDING
-      }
-    },
-    beforeItemSpacing: {
-      default: () => ITEM_PADDING
-    },
-    borderRadius: () => 0,
-    hover: {
-      // background: colors.transparent, transparent is not a thing
-      text: colorsText,
-      secondaryText: N200
-    },
-    selected: {
-      background: themed({
-        light: N20,
-        dark: DN70
-      }),
-      text: themed({
-        light: N800,
-        dark: DN600
-      }),
-      secondaryText: themed({
-        light: N200,
-        dark: DN300
-      })
-    }
-  }
-};
 const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   items,
   selectedIndex,
@@ -137,20 +100,19 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
 
   const estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
   const height = Math.min(typeof renderedListHeight === 'number' ? renderedListHeight : estimatedHeight, LIST_MAX_HEIGHT);
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: itemTheme
-  }, /*#__PURE__*/React.createElement(ItemGroup, {
+  return jsx(ItemGroup, {
     role: "listbox",
     "aria-live": "polite",
     "aria-label": intl.formatMessage(typeAheadListMessages.typeAheadResultLabel),
-    "aria-relevant": "additions removals"
-  }, /*#__PURE__*/React.createElement(ResizeObserverProvider, null, /*#__PURE__*/React.createElement(UpdateListItemHeightContext.Provider, {
+    "aria-relevant": "additions removals",
+    theme: itemTheme
+  }, jsx(ResizeObserverProvider, null, jsx(UpdateListItemHeightContext.Provider, {
     value: setListItemHeight
-  }, /*#__PURE__*/React.createElement(ListItemActionsContext.Provider, {
+  }, jsx(ListItemActionsContext.Provider, {
     value: actions
-  }, /*#__PURE__*/React.createElement(SelectedIndexContext.Provider, {
+  }, jsx(SelectedIndexContext.Provider, {
     value: selectedIndex
-  }, /*#__PURE__*/React.createElement(List, {
+  }, jsx(List, {
     useIsScrolling: true,
     ref: listRef,
     itemData: items,
@@ -161,8 +123,14 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     itemSize: getListItemHeight,
     width: LIST_WIDTH,
     height: height,
-    overscanCount: 3
-  }, DynamicHeightListItem)))))));
+    overscanCount: 3,
+    css: css`
+                    // temporary solution before we migrated off dst/item
+                    & span[class^='ItemParts__Before'] {
+                      margin-right: 12px;
+                    }
+                  `
+  }, DynamicHeightListItem))))));
 });
 export const TypeAheadList = injectIntl(TypeAheadListComponent);
 TypeAheadList.displayName = 'TypeAheadList';

package/dist/es2019/plugins/type-ahead/ui/TypeAheadListItem.js

@@ -1,16 +1,54 @@
+/** @jsx jsx */
 import React, { useCallback, useMemo, useRef, useLayoutEffect } from 'react';
-import { N200 } from '@atlaskit/theme/colors';
+import { css, jsx } from '@emotion/react';
+import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
-import Item from '@atlaskit/item';
+import Item, { itemThemeNamespace } from '@atlaskit/item';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import styled from 'styled-components';
 import IconFallback from '../../quick-insert/assets/fallback';
-import { Shortcut } from '../../../ui/styles';
+import { shortcutStyle } from '../../../ui/styles';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 export const ICON_HEIGHT = 40;
 export const ICON_WIDTH = 40;
-export const ItemIcon = styled.div`
+export const ITEM_PADDING = 12;
+export const itemTheme = {
+  [itemThemeNamespace]: {
+    padding: {
+      default: {
+        bottom: ITEM_PADDING,
+        left: ITEM_PADDING,
+        right: ITEM_PADDING,
+        top: ITEM_PADDING
+      }
+    },
+    beforeItemSpacing: {
+      default: () => ITEM_PADDING
+    },
+    borderRadius: () => 0,
+    hover: {
+      // background: colors.transparent, transparent is not a thing
+      text: colorsText,
+      secondaryText: N200
+    },
+    selected: {
+      background: themed({
+        light: N20,
+        dark: DN70
+      }),
+      text: themed({
+        light: N800,
+        dark: DN600
+      }),
+      secondaryText: themed({
+        light: N200,
+        dark: DN300
+      })
+    }
+  }
+};
+export const itemIcon = css`
   width: ${ICON_WIDTH}px;
   height: ${ICON_HEIGHT}px;
   overflow: hidden;
@@ -27,14 +65,14 @@ export const ItemIcon = styled.div`
     height: ${ICON_HEIGHT}px;
   }
 `;
-const ItemBody = styled.div`
+const itemBody = css`
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
   line-height: 1.4;
 `;
-const ItemText = styled.div`
+const itemText = css`
   white-space: initial;
   .item-description {
     font-size: ${relativeFontSizeToBase16(11.67)};
@@ -42,7 +80,7 @@ const ItemText = styled.div`
     margin-top: 4px;
   }
 `;
-const ItemAfter = styled.div`
+const itemAfter = css`
   flex: 0 0 auto;
 `;
 const hidden = {
@@ -51,7 +89,7 @@ const hidden = {
 const FallbackIcon = /*#__PURE__*/React.memo(({
   label
 }) => {
-  return /*#__PURE__*/React.createElement(IconFallback, null);
+  return jsx(IconFallback, null);
 });
 
 const noop = () => {};
@@ -90,7 +128,9 @@ export const TypeAheadListItem = ({
     render: customRenderItem
   } = item;
   const elementIcon = useMemo(() => {
-    return /*#__PURE__*/React.createElement(ItemIcon, null, icon ? icon() : /*#__PURE__*/React.createElement(FallbackIcon, {
+    return jsx("div", {
+      css: itemIcon
+    }, icon ? icon() : jsx(FallbackIcon, {
       label: title
     }));
   }, [icon, title]);
@@ -103,14 +143,14 @@ export const TypeAheadListItem = ({
     }
 
     const Comp = customRenderItem;
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       "aria-selected": isSelected,
       "aria-label": title,
       role: "option",
       tabIndex: 0,
       style: hidden,
       onMouseMove: onMouseMove
-    }, /*#__PURE__*/React.createElement(Comp, {
+    }, jsx(Comp, {
       onClick: insertSelectedItem,
       isSelected: isSelected,
       onHover: noop
@@ -121,17 +161,26 @@ export const TypeAheadListItem = ({
     return customItem;
   }
 
-  return /*#__PURE__*/React.createElement(Item, {
+  return jsx(Item, {
     onClick: insertSelectedItem,
     onMouseMove: onMouseMove,
     elemBefore: elementIcon,
     isSelected: isSelected,
     "aria-selected": isSelected,
     "aria-label": item.title,
-    role: "option"
-  }, /*#__PURE__*/React.createElement(ItemBody, null, /*#__PURE__*/React.createElement(ItemText, null, /*#__PURE__*/React.createElement("div", {
+    role: "option",
+    theme: itemTheme
+  }, jsx("div", {
+    css: itemBody
+  }, jsx("div", {
+    css: itemText
+  }, jsx("div", {
     className: "item-title"
-  }, item.title), item.description && /*#__PURE__*/React.createElement("div", {
+  }, item.title), item.description && jsx("div", {
     className: "item-description"
-  }, item.description)), /*#__PURE__*/React.createElement(ItemAfter, null, item.keyshortcut && /*#__PURE__*/React.createElement(Shortcut, null, item.keyshortcut))));
+  }, item.description)), jsx("div", {
+    css: itemAfter
+  }, item.keyshortcut && jsx("div", {
+    css: shortcutStyle
+  }, item.keyshortcut))));
 };

package/dist/es2019/plugins/type-ahead/ui/TypeAheadPopup.js

@@ -1,12 +1,14 @@
+/** @jsx jsx */
 import React, { useEffect, useMemo } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { N0, N60A, N50A } from '@atlaskit/theme/colors';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';
+import { TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
 import { TypeAheadList } from './TypeAheadList';
-const TypeAheadContent = styled.div`
+const typeAheadContent = css`
   background: ${N0};
   border-radius: ${borderRadius()}px;
   box-shadow: 0 0 1px ${N60A}, 0 4px 8px -2px ${N50A};
@@ -95,7 +97,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
   // we need to send the event again
   // eslint-disable-next-line react-hooks/exhaustive-deps
   triggerHandler]);
-  return /*#__PURE__*/React.createElement(Popup, {
+  return jsx(Popup, {
     zIndex: akEditorFloatingDialogZIndex,
     target: anchorElement,
     mountTo: popupsMountPoint,
@@ -104,12 +106,14 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     fitHeight: 300,
     fitWidth: 340,
     offset: OFFSET
-  }, /*#__PURE__*/React.createElement(TypeAheadContent, {
-    className: "fabric-editor-typeahead"
-  }, /*#__PURE__*/React.createElement(Highlight, {
+  }, jsx("div", {
+    css: typeAheadContent,
+    tabIndex: 0,
+    className: TYPE_AHEAD_POPUP_CONTENT_CLASS
+  }, jsx(Highlight, {
     state: editorView.state,
     triggerHandler: triggerHandler
-  }), /*#__PURE__*/React.createElement(TypeAheadList, {
+  }), jsx(TypeAheadList, {
     items: items,
     selectedIndex: selectedIndex,
     onItemHover: setSelectedItem,

package/dist/es2019/plugins/undo-redo/ui/ToolbarUndoRedo/index.js

@@ -1,9 +1,11 @@
-import React, { PureComponent } from 'react';
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import UndoIcon from '@atlaskit/icon/glyph/undo';
 import RedoIcon from '@atlaskit/icon/glyph/redo';
 import { undo as undoKeymap, redo as redoKeymap, ToolTipContent } from '../../../../keymaps';
-import { ButtonGroup, Separator } from '../../../../ui/styles';
+import { buttonGroupStyle, separatorStyles } from '../../../../ui/styles';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { messages } from '../../messages';
 import { createTypeAheadTools } from '../../../type-ahead/api';
@@ -60,37 +62,39 @@ export class ToolbarUndoRedo extends PureComponent {
       canUndo,
       canRedo
     } = historyState;
-    return /*#__PURE__*/React.createElement(ButtonGroup, {
-      width: isReducedSpacing ? 'small' : 'large'
-    }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    return jsx("span", {
+      css: buttonGroupStyle
+    }, jsx(ToolbarButton, {
       buttonId: TOOLBAR_BUTTON.UNDO,
       spacing: isReducedSpacing ? 'none' : 'default',
       onClick: handleUndo,
       disabled: !canUndo || disabled,
       "aria-label": labelUndo,
-      title: /*#__PURE__*/React.createElement(ToolTipContent, {
+      title: jsx(ToolTipContent, {
         description: labelUndo,
         keymap: undoKeymap
       }),
-      iconBefore: /*#__PURE__*/React.createElement(UndoIcon, {
+      iconBefore: jsx(UndoIcon, {
         label: ""
       }),
       testId: "ak-editor-toolbar-button-undo"
-    }), /*#__PURE__*/React.createElement(ToolbarButton, {
+    }), jsx(ToolbarButton, {
       spacing: isReducedSpacing ? 'none' : 'default',
       buttonId: TOOLBAR_BUTTON.REDO,
       onClick: handleRedo,
       disabled: !canRedo || disabled,
-      title: /*#__PURE__*/React.createElement(ToolTipContent, {
+      title: jsx(ToolTipContent, {
         description: labelRedo,
         keymap: redoKeymap
       }),
-      iconBefore: /*#__PURE__*/React.createElement(RedoIcon, {
+      iconBefore: jsx(RedoIcon, {
         label: ""
       }),
       testId: "ak-editor-toolbar-button-redo",
       "aria-label": labelRedo
-    }), /*#__PURE__*/React.createElement(Separator, null));
+    }), jsx("span", {
+      css: separatorStyles
+    }));
   }
 
 }

package/dist/es2019/plugins/unsupported-content/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const UnsupportedSharedCssClassName = {
   BLOCK_CONTAINER: 'unsupportedBlockView-content-wrap',

package/dist/es2019/profiler/render-count.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import uuid from 'uuid';
-import { useComponentRenderTracking } from '../utils/react-hooks/use-component-renderer-tracking';
+import { useComponentRenderTracking } from '@atlaskit/editor-common/utils';
 import { RenderCountProfiler as RenderCountProfilerClass } from '@atlaskit/editor-common/utils';
 export let ProfiledComponentIds;
 

package/dist/es2019/ui/Addon/ClickAreaBlock/index.js

@@ -1,12 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { clickAreaClickHandler } from '../click-area-helper';
-const ClickWrapper = styled.div`
+const clickWrapper = css`
   flex-grow: 1;
   height: 100%;
 `;
-ClickWrapper.displayName = 'ClickWrapper';
 export default class ClickAreaBlock extends React.Component {
   constructor(...args) {
     super(...args);
@@ -25,7 +26,9 @@ export default class ClickAreaBlock extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(ClickWrapper, {
+    return jsx("div", {
+      "data-testid": "click-wrapper",
+      css: clickWrapper,
       onClick: this.handleClick
     }, this.props.children);
   }

package/dist/es2019/ui/Addon/ClickAreaInline/index.js

@@ -1,11 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { createParagraphAtEnd } from '../../../commands';
-const ClickArea = styled.div`
+const clickArea = css`
   flex-grow: 1;
 `;
-ClickArea.displayName = 'ClickArea';
 export default class ClickAreaInline extends React.Component {
   constructor(...args) {
     super(...args);
@@ -25,7 +26,8 @@ export default class ClickAreaInline extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(ClickArea, {
+    return jsx("div", {
+      css: clickArea,
       onClick: this.handleClick
     });
   }

package/dist/es2019/ui/Addon/ClickAreaMobile/index.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { clickAreaClickHandler } from '../click-area-helper';
 /**
  * Fills the visible viewport height so that it can filter
@@ -8,11 +10,13 @@ import { clickAreaClickHandler } from '../click-area-helper';
  * doesn't exceed the viewport, or whether it overflows it).
  */
 
-const ClickWrapper = styled.div`
+const clickWrapper = ({
+  isExpanded,
+  minHeight
+}) => css`
   height: 100%;
-  ${props => props.isExpanded && props.minHeight && `min-height: ${props.minHeight}px`}
+  ${isExpanded && minHeight ? `min-height: ${minHeight}px` : ''};
 `;
-ClickWrapper.displayName = 'ClickWrapper';
 
 /**
  * Click Area is responsible for improving UX by ensuring the user
@@ -58,13 +62,14 @@ export default class ClickAreaMobile extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(ClickWrapper, {
+    return jsx("div", {
+      css: clickWrapper({
+        isExpanded: this.props.isExpanded,
+        minHeight: this.props.minHeight
+      }),
       className: "editor-click-wrapper",
-      minHeight: this.props.minHeight,
-      persistScrollGutter: this.props.persistScrollGutter,
       onClick: this.handleClick,
-      innerRef: this.clickElementRef,
-      isExpanded: this.props.isExpanded
+      ref: this.clickElementRef
     }, this.props.children);
   }
 

package/dist/es2019/ui/Addon/Dropdown/index.js

@@ -1,6 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
-import { Dropdown } from './styles';
+import { jsx } from '@emotion/react';
+import { dropdown } from './styles';
 export default class DropdownWrapper extends React.Component {
   constructor(...args) {
     super(...args);
@@ -28,7 +31,9 @@ export default class DropdownWrapper extends React.Component {
     const children = React.Children.map(this.props.children, child => /*#__PURE__*/React.cloneElement(child, {
       onClick: this.handleClick
     }));
-    return /*#__PURE__*/React.createElement(Dropdown, null, children);
+    return jsx("div", {
+      css: dropdown
+    }, children);
   }
 
 }

package/dist/es2019/ui/Addon/Dropdown/styles.js

@@ -1,7 +1,7 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N60A } from '@atlaskit/theme/colors';
-export const Dropdown = styled.div`
+export const dropdown = css`
   display: flex;
   flex-direction: column;
   background: white;

package/dist/es2019/ui/Addon/DropdownItem/index.js

@@ -1,11 +1,13 @@
-import React from 'react';
-import { DropdownItem } from './styles';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { dropdownItem } from './styles';
 
-const DropdownItemWrapper = props => /*#__PURE__*/React.createElement(DropdownItem, {
+const DropdownItemWrapper = props => jsx("div", {
+  css: dropdownItem,
   onClick: () => props.onClick && props.onClick({
     actionOnClick: props.actionOnClick,
     renderOnClick: props.renderOnClick
   })
-}, /*#__PURE__*/React.createElement("span", null, props.icon), props.children);
+}, jsx("span", null, props.icon), props.children);
 
 export default DropdownItemWrapper;

package/dist/es2019/ui/Addon/DropdownItem/styles.js

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { N800, N20 } from '@atlaskit/theme/colors';
-export const DropdownItem = styled.div`
+export const dropdownItem = css`
   display: flex;
   align-items: center;
   cursor: pointer;

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

@@ -1,10 +1,11 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { IconMap } from '../../plugins/alignment/ui/ToolbarAlignment/icon-map';
 import AlignmentButton from './AlignmentButton';
 import { alignmentMessages } from './messages';
-import { AlignmentWrapper } from './styles';
+import { alignmentWrapper } from './styles';
 import { alignLeft, alignRight } from '../../keymaps';
 const alignmentOptions = [{
   title: alignmentMessages.alignLeft,
@@ -27,11 +28,9 @@ class Alignment extends PureComponent {
       className,
       intl
     } = this.props;
-    return /*#__PURE__*/React.createElement(AlignmentWrapper, {
-      className: className,
-      style: {
-        maxWidth: 3 * 32
-      }
+    return jsx("div", {
+      css: alignmentWrapper,
+      className: className
     }, alignmentOptions.map(alignment => {
       const {
         value,
@@ -39,8 +38,8 @@ class Alignment extends PureComponent {
         shortcut
       } = alignment;
       const message = intl.formatMessage(title);
-      return /*#__PURE__*/React.createElement(AlignmentButton, {
-        content: /*#__PURE__*/React.createElement(IconMap, {
+      return jsx(AlignmentButton, {
+        content: jsx(IconMap, {
           alignment: value
         }),
         key: value,

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

@@ -1,7 +1,8 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-export const AlignmentWrapper = styled.div`
+export const alignmentWrapper = css`
   padding: 0 ${gridSize()}px;
   display: flex;
   flex-wrap: wrap;
+  max-width: ${3 * 32}px;
 `;

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

@@ -1,19 +1,23 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @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';
-const ChromelessEditor = styled.div`
+const chromelessEditor = css`
   line-height: 20px;
   height: auto;
   min-height: 30px;
-  ${props => props.maxHeight ? 'max-height: ' + props.maxHeight + 'px;' : ''} overflow-x: hidden;
+
+  overflow-x: hidden;
   overflow-y: auto;
-  ${scrollbarStyles} max-width: inherit;
+  ${scrollbarStyles};
+  max-width: inherit;
   box-sizing: border-box;
   word-wrap: break-word;
 
@@ -24,8 +28,7 @@ const ChromelessEditor = styled.div`
     margin: 0;
   }
 `;
-ChromelessEditor.displayName = 'ChromelessEditor';
-const ContentArea = styled(ContentStyles)``;
+const ContentArea = createEditorContentStyle();
 ContentArea.displayName = 'ContentArea';
 export default class Editor extends React.Component {
   constructor(...args) {
@@ -54,12 +57,14 @@ export default class Editor extends React.Component {
         dispatchAnalyticsEvent
       } = this.props;
       const 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: ref => this.containerElement = ref
-      }, /*#__PURE__*/React.createElement(ContentArea, null, customContentComponents, /*#__PURE__*/React.createElement(PluginSlot, {
+      }, jsx("div", {
+        css: [chromelessEditor, maxHeight && css`
+                max-height: ${maxHeight}px;
+              `],
+        ref: ref => this.containerElement = ref
+      }, jsx(ContentArea, null, customContentComponents, jsx(PluginSlot, {
         editorView: editorView,
         editorActions: editorActions,
         eventDispatcher: eventDispatcher,
@@ -77,7 +82,7 @@ export default class Editor extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(WithPluginState, {
+    return jsx(WithPluginState, {
       plugins: {
         maxContentSize: maxContentSizePluginKey
       },