@atlaskit/editor-core 163.0.0 → 164.0.0

package/dist/esm/ui/PanelTextInput/styles.js

@@ -1,11 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { N400, N800 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles'; // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
 
-export var Input = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  input& {\n    background: transparent;\n    border: 0;\n    border-radius: 0;\n    box-sizing: content-box;\n    color: ", ";\n    flex-grow: 1;\n    font-size: ", ";\n    line-height: 20px;\n    padding: 0;\n    ", ";\n    min-width: 145px;\n\n    /* Hides IE10+ built-in [x] clear input button */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: ", ";\n      opacity: 0.5;\n    }\n  }\n"])), N400, relativeFontSizeToBase16(13), function (props) {
-  return props.width ? "width: ".concat(props.width, "px") : '';
-}, N800);
+export var panelTextInput = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  input& {\n    background: transparent;\n    border: 0;\n    border-radius: 0;\n    box-sizing: content-box;\n    color: ", ";\n    flex-grow: 1;\n    font-size: ", ";\n    line-height: 20px;\n    padding: 0;\n    min-width: 145px;\n\n    /* Hides IE10+ built-in [x] clear input button */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: ", ";\n      opacity: 0.5;\n    }\n  }\n"])), N400, relativeFontSizeToBase16(13), N800);
+export var panelTextInputWithCustomWidth = function panelTextInputWithCustomWidth(width) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  input& {\n    width: ", "px;\n  }\n"])), width);
+};

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

@@ -13,12 +13,13 @@ 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 { ACTION_SUBJECT } from '../../plugins/analytics';
 import { whichTransitionEvent } from '../../utils';
 import { ErrorBoundary } from '../ErrorBoundary';
-var PluginsComponentsWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+var pluginsComponentsWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
 
 var PluginSlot = /*#__PURE__*/function (_React$Component) {
   _inherits(PluginSlot, _React$Component);
@@ -120,10 +121,12 @@ var PluginSlot = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(ErrorBoundary, {
+      return jsx(ErrorBoundary, {
         component: ACTION_SUBJECT.PLUGIN_SLOT,
         fallbackComponent: null
-      }, /*#__PURE__*/React.createElement(PluginsComponentsWrapper, null, items.map(function (component, key) {
+      }, jsx("div", {
+        css: pluginsComponentsWrapper
+      }, items.map(function (component, key) {
         var props = {
           key: key
         };

package/dist/esm/ui/Toolbar/ToolbarWithSizeDetector.js

@@ -4,18 +4,16 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import React, { useMemo } from 'react';
+import { css, jsx } from '@emotion/react';
 import { WidthObserver } from '@atlaskit/width-detector';
 import { akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
 import { useElementWidth } from './hooks';
 import { widthToToolbarSize, toolbarSizeToWidth } from './toolbar-size';
 import { Toolbar } from './Toolbar';
 import { ToolbarSize } from './types';
-var StyledToolBar = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  min-width: ", ";\n  position: relative;\n  @media (max-width: ", "px) {\n    grid-column: 1 / 2;\n    grid-row: 2;\n    width: calc(100% - 30px);\n    margin: 0 15px;\n  }\n"])), function (_ref) {
-  var minWidth = _ref.minWidth;
-  return minWidth;
-}, akEditorMobileMaxWidth);
+var toolbar = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n  @media (max-width: ", "px) {\n    grid-column: 1 / 2;\n    grid-row: 2;\n    width: calc(100% - 30px);\n    margin: 0 15px;\n  }\n"])), akEditorMobileMaxWidth);
 export var ToolbarWithSizeDetector = function ToolbarWithSizeDetector(props) {
   var ref = /*#__PURE__*/React.createRef();
 
@@ -28,14 +26,18 @@ export var ToolbarWithSizeDetector = function ToolbarWithSizeDetector(props) {
     skip: typeof width !== 'undefined'
   });
   var toolbarSize = typeof width === 'undefined' && typeof elementWidth === 'undefined' ? undefined : widthToToolbarSize(width || elementWidth, props.appearance);
-  var toolbarMinWidth = toolbarSizeToWidth(ToolbarSize.M, props.appearance);
-  return /*#__PURE__*/React.createElement(StyledToolBar, {
-    minWidth: props.hasMinWidth ? "".concat(toolbarMinWidth, "px") : '254px'
-  }, /*#__PURE__*/React.createElement(WidthObserver, {
+  var toolbarStyle = useMemo(function () {
+    var toolbarMinWidth = toolbarSizeToWidth(ToolbarSize.M, props.appearance);
+    var minWidth = "min-width: ".concat(props.hasMinWidth ? toolbarMinWidth : '254', "px");
+    return [toolbar, minWidth];
+  }, [props.appearance, props.hasMinWidth]);
+  return jsx("div", {
+    css: toolbarStyle
+  }, jsx(WidthObserver, {
     setWidth: setWidth
-  }), props.editorView && toolbarSize ? /*#__PURE__*/React.createElement(Toolbar, _extends({}, props, {
+  }), props.editorView && toolbarSize ? jsx(Toolbar, _extends({}, props, {
     toolbarSize: toolbarSize
-  })) : /*#__PURE__*/React.createElement("div", {
+  })) : jsx("div", {
     ref: ref
   }));
 };

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

@@ -7,15 +7,16 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+/** @jsx jsx */
 import React, { useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
-import styled from 'styled-components';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
 import Button from './styles';
 import { ACTION_SUBJECT, EVENT_TYPE, ACTION } from '../../plugins/analytics/types/enums';
 import { TOOLBAR_ACTION_SUBJECT_ID } from '../../plugins/analytics/types/toolbar-button';
 export var TOOLBAR_BUTTON = TOOLBAR_ACTION_SUBJECT_ID;
-var ButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 100%;\n"])));
+var buttonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 100%;\n"])));
 var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var buttonId = props.buttonId,
       testId = props.testId,
@@ -65,7 +66,7 @@ var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, [disabled, onClick, onItemClick, item, buttonId]);
   var id = buttonId ? "editor-toolbar__".concat(buttonId) : undefined;
-  var button = /*#__PURE__*/React.createElement(Button, {
+  var button = jsx(Button, {
     id: id,
     ref: ref,
     appearance: "subtle",
@@ -91,10 +92,12 @@ var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
 
   var tooltipContent = !hideTooltip ? title : null;
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx(Tooltip, {
     content: tooltipContent,
     hideTooltipOnClick: true,
     position: titlePosition
-  }, /*#__PURE__*/React.createElement(ButtonWrapper, null, button));
+  }, jsx("div", {
+    css: buttonWrapper
+  }, button));
 });
 export default ToolbarButton;

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

@@ -16,7 +16,8 @@ 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 ReactDOM from 'react-dom';
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -26,7 +27,7 @@ import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/custom-theme-button';
 import ToolbarButton from '../ToolbarButton';
 import withOuterListeners from '../with-outer-listeners';
-import { Wrapper, ButtonContent, ConfirmationPopup, ConfirmationText, ConfirmationHeader, ConfirmationImg } from './styles';
+import { wrapper, buttonContent, confirmationPopup, confirmationText, confirmationHeader, confirmationImg } from './styles';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '../../plugins/analytics';
 import { createDispatch } from '../../event-dispatcher';
 import { openFeedbackDialog } from '../../plugins/feedback-dialog';
@@ -181,15 +182,19 @@ var ToolbarFeedback = /*#__PURE__*/function (_PureComponent) {
           popupsMountPoint = _this$props.popupsMountPoint,
           popupsBoundariesElement = _this$props.popupsBoundariesElement,
           popupsScrollableElement = _this$props.popupsScrollableElement;
-      var iconBefore = this.state.jiraIssueCollectorScriptLoading ? /*#__PURE__*/React.createElement(Spinner, null) : undefined; // JIRA issue collector script is using jQuery internally
+      var iconBefore = this.state.jiraIssueCollectorScriptLoading ? jsx(Spinner, null) : undefined; // JIRA issue collector script is using jQuery internally
 
-      return this.hasJquery() ? /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ToolbarButton, {
+      return this.hasJquery() ? jsx("div", {
+        css: wrapper
+      }, jsx(ToolbarButton, {
         ref: this.handleRef,
         iconBefore: iconBefore,
         onClick: this.collectFeedback,
         selected: false,
         spacing: "compact"
-      }, /*#__PURE__*/React.createElement(ButtonContent, null, "Feedback")), this.state.showOptOutOption && /*#__PURE__*/React.createElement(PopupWithOutsideListeners, {
+      }, jsx("span", {
+        css: buttonContent
+      }, "Feedback")), this.state.showOptOutOption && jsx(PopupWithOutsideListeners, {
         target: this.state.target,
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
@@ -198,12 +203,19 @@ var ToolbarFeedback = /*#__PURE__*/function (_PureComponent) {
         fitWidth: POPUP_WIDTH,
         handleClickOutside: this.toggleShowOptOutOption,
         handleEscapeKeydown: this.toggleShowOptOutOption
-      }, /*#__PURE__*/React.createElement(ConfirmationPopup, null, /*#__PURE__*/React.createElement(ConfirmationHeader, null, /*#__PURE__*/React.createElement(ConfirmationImg, {
+      }, jsx("div", {
+        css: confirmationPopup
+      }, jsx("div", {
+        css: confirmationHeader
+      }, jsx("img", {
+        css: confirmationImg,
         src: EDITOR_IMAGE_URL
-      })), /*#__PURE__*/React.createElement(ConfirmationText, null, /*#__PURE__*/React.createElement("div", null, "We are rolling out a new editing experience across Atlassian products. Help us improve by providing feedback."), /*#__PURE__*/React.createElement("div", null, "You can opt-out for now by turning off the \"Atlassian Editor\" feature on the Labs page in Bitbucket settings."), /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+      })), jsx("div", {
+        css: confirmationText
+      }, jsx("div", null, "We are rolling out a new editing experience across Atlassian products. Help us improve by providing feedback."), jsx("div", null, "You can opt-out for now by turning off the \"Atlassian Editor\" feature on the Labs page in Bitbucket settings."), jsx(ButtonGroup, null, jsx(Button, {
         appearance: "primary",
         onClick: this.openFeedbackPopup
-      }, "Give feedback"), /*#__PURE__*/React.createElement(Button, {
+      }, "Give feedback"), jsx(Button, {
         appearance: "default",
         onClick: this.openLearnMorePage
       }, "Learn more")))))) : null;

package/dist/esm/ui/ToolbarFeedback/styles.js

@@ -2,16 +2,13 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-import styled from 'styled-components';
-import { gridSize, borderRadius } from '@atlaskit/theme/constants';
+import { css } from '@emotion/react';
+import { borderRadius } from '@atlaskit/theme/constants';
 import { N60A, N400, P400 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-export var ButtonContent = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 24px;\n  line-height: 24px;\n  min-width: 70px;\n"])));
-export var Wrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: ", "px;\n"])), function (_ref) {
-  var width = _ref.width;
-  return !width || width === 'large' ? 0 : gridSize();
-});
-export var ConfirmationPopup = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: #fff;\n  border-radius: ", "px;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow: auto;\n  max-height: none;\n  height: 410px;\n  width: 280px;\n"])), borderRadius(), N60A, N60A);
-export var ConfirmationText = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  word-spacing: 4px;\n  line-height: 22px;\n  color: ", ";\n  margin-top: 30px;\n  padding: 20px;\n  & > div {\n    width: 240px;\n  }\n  & > div:first-of-type {\n    margin-bottom: 12px;\n  }\n  & > div:nth-of-type(2) {\n    margin-bottom: 20px;\n  }\n"])), relativeFontSizeToBase16(14), N400);
-export var ConfirmationHeader = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  height: 100px;\n  width: 100%;\n  display: inline-block;\n"])), P400);
-export var ConfirmationImg = styled.img(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100px;\n  display: block;\n  margin: 25px auto 0 auto;\n"])));
+export var buttonContent = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 24px;\n  line-height: 24px;\n  min-width: 70px;\n"])));
+export var wrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: 0;\n"])));
+export var confirmationPopup = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: #fff;\n  border-radius: ", "px;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow: auto;\n  max-height: none;\n  height: 410px;\n  width: 280px;\n"])), borderRadius(), N60A, N60A);
+export var confirmationText = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  word-spacing: 4px;\n  line-height: 22px;\n  color: ", ";\n  margin-top: 30px;\n  padding: 20px;\n  & > div {\n    width: 240px;\n  }\n  & > div:first-of-type {\n    margin-bottom: 12px;\n  }\n  & > div:nth-of-type(2) {\n    margin-bottom: 20px;\n  }\n"])), relativeFontSizeToBase16(14), N400);
+export var confirmationHeader = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  height: 100px;\n  width: 100%;\n  display: inline-block;\n"])), P400);
+export var confirmationImg = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100px;\n  display: block;\n  margin: 25px auto 0 auto;\n"])));

package/dist/esm/ui/styles.js

@@ -1,32 +1,26 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { gridSize, borderRadius } from '@atlaskit/theme/constants';
 import { N30, N100 } from '@atlaskit/theme/colors';
 import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 var akGridSize = gridSize() + 'px';
-export var ButtonGroup = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n\n  & > div {\n    display: flex;\n  }\n"])));
-export var Separator = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), N30);
-export var Wrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  > div,\n  > span {\n    display: flex;\n  }\n\n  > div > div {\n    display: flex;\n  }\n  margin-left: ", "px;\n  min-width: ", ";\n"])), function (_ref) {
-  var isSmall = _ref.isSmall;
-  return isSmall ? 4 : 0;
-}, function (_ref2) {
-  var isSmall = _ref2.isSmall;
-  return isSmall ? '40px' : 'auto';
-});
-export var ExpandIconWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-left: -8px;\n"])));
-export var TriggerWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
-export var MenuWrapper = Wrapper;
-export var ButtonContent = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  min-width: 80px;\n  align-items: center;\n  overflow: hidden;\n  justify-content: center;\n  flex-direction: column;\n  padding: 0 ", ";\n"])), function (props) {
-  return props.spacing === 'none' ? '8px' : '6px';
-}); // Taken from the style of inline dialog components
+export var buttonGroupStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n\n  & > div {\n    display: flex;\n  }\n"])));
+export var separatorStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), N30);
+export var wrapperStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  > div,\n  > span {\n    display: flex;\n  }\n\n  > div > div {\n    display: flex;\n  }\n\n  margin-left: 0;\n  min-width: auto;\n"])));
+export var wrapperSmallStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-left: 4px;\n  min-width: 40px;\n"])));
+export var expandIconWrapperStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-left: -8px;\n"])));
+export var triggerWrapperStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+export var buttonContentStyle = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  min-width: 80px;\n  align-items: center;\n  overflow: hidden;\n  justify-content: center;\n  flex-direction: column;\n  padding: 6px;\n"])));
+export var buttonContentReducedSpacingStyle = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 8px;\n"]))); // Taken from the style of inline dialog components
+
+export var dropShadow = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  box-shadow: 0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25);\n"]))); // TODO change to use emotion css
 
-export var dropShadow = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  box-shadow: 0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25);\n"])));
 export var scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    height: ".concat(akGridSize, ";\n    width: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-corner {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: rgba(0, 0, 0, 0);\n  }\n\n  &:hover::-webkit-scrollbar-thumb {\n    background-color: rgba(0, 0, 0, 0.2);\n    border-radius: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n");
-export var Shortcut = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background-color: rgba(223, 225, 229, 0.5); /* N60 at 50% */\n  color: ", ";\n  border-radius: ", "px;\n  padding: 4px;\n  line-height: 12px;\n  font-size: ", ";\n  align-self: flex-end;\n  @media (max-width: ", "px) {\n    display: none;\n  }\n"])), N100, borderRadius(), relativeFontSizeToBase16(11.67), akEditorMobileMaxWidth);
-export var ClickSelectWrapper = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  user-select: all;\n"])));
-export var CellColourPreview = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  &::before {\n    background: ", ";\n  }\n"])), function (props) {
-  return props.selectedColor;
-});
+export var shortcutStyle = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  background-color: rgba(223, 225, 229, 0.5); /* N60 at 50% */\n  color: ", ";\n  border-radius: ", "px;\n  padding: 4px;\n  line-height: 12px;\n  font-size: ", ";\n  align-self: flex-end;\n  @media (max-width: ", "px) {\n    display: none;\n  }\n"])), N100, borderRadius(), relativeFontSizeToBase16(11.67), akEditorMobileMaxWidth);
+export var clickSelectWrapperStyle = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  user-select: all;\n"])));
+export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
+  return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
+};

package/dist/esm/utils/prosemirror/autojoin.js

@@ -0,0 +1,76 @@
+import { canJoin } from 'prosemirror-transform';
+/**
+ * Checks whether two adjacent nodes can be joined. If so, the document
+ * will be updated to join those nodes. If not, the original transaction
+ * remains untouched.
+ *
+ * Nodes are considered joinable if the `isJoinable` predicate returns true or,
+ * if an array of strings was passed, if their node type name is in that array.
+ *
+ * Adapted from https://github.com/ProseMirror/prosemirror-commands/blob/master/src/commands.js#L597-L610
+ */
+
+export function autoJoinTr(tr, isJoinable) {
+  if (Array.isArray(isJoinable)) {
+    var types = isJoinable;
+
+    isJoinable = function isJoinable(node) {
+      return types.indexOf(node.type.name) > -1;
+    };
+  }
+
+  var ranges = [];
+
+  for (var i = 0; i < tr.mapping.maps.length; i++) {
+    var map = tr.mapping.maps[i];
+
+    for (var j = 0; j < ranges.length; j++) {
+      ranges[j] = map.map(ranges[j]);
+    }
+
+    map.forEach(function (_s, _e, from, to) {
+      return ranges.push(from, to);
+    });
+  } // Figure out which joinable points exist inside those ranges,
+  // by checking all node boundaries in their parent nodes.
+
+
+  var joinable = [];
+
+  for (var _i = 0; _i < ranges.length; _i += 2) {
+    var from = ranges[_i];
+    var to = ranges[_i + 1];
+    var $from = tr.doc.resolve(from);
+    var depth = $from.sharedDepth(to);
+    var parent = $from.node(depth);
+
+    for (var index = $from.indexAfter(depth), pos = $from.after(depth + 1); pos <= to; ++index) {
+      var _after = parent.maybeChild(index);
+
+      if (!_after) {
+        break;
+      }
+
+      if (index && joinable.indexOf(pos) === -1) {
+        var _before = parent.child(index - 1);
+
+        if (_before.type === _after.type && isJoinable(_before, _after)) {
+          joinable.push(pos);
+        }
+      }
+
+      pos += _after.nodeSize;
+    }
+  } // Join the joinable points
+
+
+  joinable.sort(function (a, b) {
+    return a - b;
+  });
+
+  for (var _i2 = joinable.length - 1; _i2 >= 0; _i2--) {
+    if (canJoin(tr.doc, joinable[_i2])) {
+      tr.join(joinable[_i2]);
+    }
+  }
+}

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "163.0.0";
+export var version = "164.0.0";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "163.0.0",
+	"version": "164.0.0",
 	"sideEffects": false
 }

package/dist/types/editor.d.ts

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import PropTypes from 'prop-types';
 import { EditorView } from 'prosemirror-view';
 import type { IntlShape } from 'react-intl-next';
@@ -71,5 +73,5 @@ export default class Editor extends React.Component<EditorProps, State> {
     private getBaseFontSize;
     handleSave: (view: EditorView) => void;
     handleAnalyticsEvent: FireAnalyticsCallback;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }