@atlaskit/editor-core 162.0.2 → 164.0.1

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

@@ -2,15 +2,17 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
+/** @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';
-var TypeAheadContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px ", ", 0 4px 8px -2px ", ";\n  padding: ", "px 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), N0, borderRadius(), N60A, N50A, gridSize() / 2);
+var typeAheadContent = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px ", ", 0 4px 8px -2px ", ";\n  padding: ", "px 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), N0, borderRadius(), N60A, N50A, gridSize() / 2);
 
 var Highlight = function Highlight(_ref) {
   var state = _ref.state,
@@ -89,7 +91,7 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (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,
@@ -98,12 +100,14 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (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/esm/plugins/undo-redo/ui/ToolbarUndoRedo/index.js

@@ -8,12 +8,14 @@ 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; } }
 
-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';
@@ -81,37 +83,39 @@ export var ToolbarUndoRedo = /*#__PURE__*/function (_PureComponent) {
       var labelRedo = formatMessage(messages.redo);
       var canUndo = historyState.canUndo,
           canRedo = historyState.canRedo;
-      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/esm/plugins/unsupported-content/styles.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export var UnsupportedSharedCssClassName = {
   BLOCK_CONTAINER: 'unsupportedBlockView-content-wrap',

package/dist/esm/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 var ProfiledComponentIds;
 

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

@@ -13,11 +13,11 @@ 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 { clickAreaClickHandler } from '../click-area-helper';
-var ClickWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  height: 100%;\n"])));
-ClickWrapper.displayName = 'ClickWrapper';
+var clickWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  height: 100%;\n"])));
 
 var ClickAreaBlock = /*#__PURE__*/function (_React$Component) {
   _inherits(ClickAreaBlock, _React$Component);
@@ -51,7 +51,9 @@ var ClickAreaBlock = /*#__PURE__*/function (_React$Component) {
   _createClass(ClickAreaBlock, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(ClickWrapper, {
+      return jsx("div", {
+        "data-testid": "click-wrapper",
+        css: clickWrapper,
         onClick: this.handleClick
       }, this.props.children);
     }

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

@@ -13,11 +13,11 @@ 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 { createParagraphAtEnd } from '../../../commands';
-var ClickArea = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex-grow: 1;\n"])));
-ClickArea.displayName = 'ClickArea';
+var clickArea = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex-grow: 1;\n"])));
 
 var ClickAreaInline = /*#__PURE__*/function (_React$Component) {
   _inherits(ClickAreaInline, _React$Component);
@@ -52,7 +52,8 @@ var ClickAreaInline = /*#__PURE__*/function (_React$Component) {
   _createClass(ClickAreaInline, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(ClickArea, {
+      return jsx("div", {
+        css: clickArea,
         onClick: this.handleClick
       });
     }

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

@@ -13,8 +13,9 @@ 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 { clickAreaClickHandler } from '../click-area-helper';
 /**
  * Fills the visible viewport height so that it can filter
@@ -22,10 +23,11 @@ import { clickAreaClickHandler } from '../click-area-helper';
  * doesn't exceed the viewport, or whether it overflows it).
  */
 
-var ClickWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n  ", "\n"])), function (props) {
-  return props.isExpanded && props.minHeight && "min-height: ".concat(props.minHeight, "px");
-});
-ClickWrapper.displayName = 'ClickWrapper';
+var clickWrapper = function clickWrapper(_ref) {
+  var isExpanded = _ref.isExpanded,
+      minHeight = _ref.minHeight;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n  ", ";\n"])), isExpanded && minHeight ? "min-height: ".concat(minHeight, "px") : '');
+};
 
 /**
  * Click Area is responsible for improving UX by ensuring the user
@@ -85,13 +87,14 @@ var ClickAreaMobile = /*#__PURE__*/function (_React$Component) {
   _createClass(ClickAreaMobile, [{
     key: "render",
     value: function 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/esm/ui/Addon/Dropdown/index.js

@@ -10,8 +10,10 @@ 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 { Dropdown } from './styles';
+import { jsx } from '@emotion/react';
+import { dropdown } from './styles';
 
 var DropdownWrapper = /*#__PURE__*/function (_React$Component) {
   _inherits(DropdownWrapper, _React$Component);
@@ -57,7 +59,9 @@ var DropdownWrapper = /*#__PURE__*/function (_React$Component) {
           onClick: _this2.handleClick
         });
       });
-      return /*#__PURE__*/React.createElement(Dropdown, null, children);
+      return jsx("div", {
+        css: dropdown
+      }, children);
     }
   }]);
 

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

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N60A } from '@atlaskit/theme/colors';
-export var Dropdown = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border-radius: ", "px;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  box-sizing: border-box;\n  padding: 4px 0;\n"])), borderRadius(), N60A, N60A);
+export var dropdown = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border-radius: ", "px;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  box-sizing: border-box;\n  padding: 4px 0;\n"])), borderRadius(), N60A, N60A);

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

@@ -1,15 +1,17 @@
-import React from 'react';
-import { DropdownItem } from './styles';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { dropdownItem } from './styles';
 
 var DropdownItemWrapper = function DropdownItemWrapper(props) {
-  return /*#__PURE__*/React.createElement(DropdownItem, {
+  return jsx("div", {
+    css: dropdownItem,
     onClick: function onClick() {
       return 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/esm/ui/Addon/DropdownItem/styles.js

@@ -2,6 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { N800, N20 } from '@atlaskit/theme/colors';
-export var DropdownItem = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  padding: 8px 32px 8px 12px;\n  color: ", ";\n  > span {\n    display: flex;\n    margin-right: 8px;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"])), N800, N20);
+export var dropdownItem = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  padding: 8px 32px 8px 12px;\n  color: ", ";\n  > span {\n    display: flex;\n    margin-right: 8px;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"])), N800, N20);

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

@@ -8,13 +8,14 @@ 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; } }
 
-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';
 var alignmentOptions = [{
   title: alignmentMessages.alignLeft,
@@ -48,18 +49,16 @@ var Alignment = /*#__PURE__*/function (_PureComponent) {
           selectedAlignment = _this$props.selectedAlignment,
           className = _this$props.className,
           intl = _this$props.intl;
-      return /*#__PURE__*/React.createElement(AlignmentWrapper, {
-        className: className,
-        style: {
-          maxWidth: 3 * 32
-        }
+      return jsx("div", {
+        css: alignmentWrapper,
+        className: className
       }, alignmentOptions.map(function (alignment) {
         var value = alignment.value,
             title = alignment.title,
             shortcut = alignment.shortcut;
         var 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/esm/ui/Alignment/styles.js

@@ -2,6 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-export var AlignmentWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 ", "px;\n  display: flex;\n  flex-wrap: wrap;\n"])), gridSize());
+export var alignmentWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 ", "px;\n  display: flex;\n  flex-wrap: wrap;\n  max-width: ", "px;\n"])), gridSize(), 3 * 32);

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  position: relative;\n  position: sticky;\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);