@atlaskit/editor-core 163.0.0 → 164.0.2

package/dist/cjs/ui/PanelTextInput/index.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof3 = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -25,16 +23,14 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
+
+var _react2 = require("react");
 
 var _styles = require("./styles");
 
 var _utils = require("@atlaskit/editor-common/utils");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
@@ -154,7 +150,8 @@ var PanelTextInput = /*#__PURE__*/function (_PureComponent) {
           ariaAutoComplete = _this$props2.ariaAutoComplete,
           role = _this$props2.role;
       var value = this.state.value;
-      return /*#__PURE__*/_react.default.createElement(_styles.Input, {
+      return (0, _react.jsx)("input", {
+        css: [_styles.panelTextInput, width !== undefined && (0, _styles.panelTextInputWithCustomWidth)(width)],
         role: role,
         "aria-autocomplete": ariaAutoComplete ? 'list' : undefined,
         "aria-expanded": ariaExpanded,
@@ -169,8 +166,7 @@ var PanelTextInput = /*#__PURE__*/function (_PureComponent) {
         onKeyDown: this.handleKeydown,
         onMouseDown: this.onMouseDown,
         onBlur: this.onBlur,
-        innerRef: this.handleRef,
-        width: width,
+        ref: this.handleRef,
         maxLength: maxLength,
         "aria-label": ariaLabel
       });
@@ -201,6 +197,6 @@ var PanelTextInput = /*#__PURE__*/function (_PureComponent) {
     }
   }]);
   return PanelTextInput;
-}(_react.PureComponent);
+}(_react2.PureComponent);
 
 exports.default = PanelTextInput;

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

@@ -5,21 +5,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Input = void 0;
+exports.panelTextInputWithCustomWidth = exports.panelTextInput = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
-var Input = _styledComponents.default.input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N400, (0, _editorSharedStyles.relativeFontSizeToBase16)(13), function (props) {
-  return props.width ? "width: ".concat(props.width, "px") : '';
-}, _colors.N800);
+var panelTextInput = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N400, (0, _editorSharedStyles.relativeFontSizeToBase16)(13), _colors.N800);
+exports.panelTextInput = panelTextInput;
 
-exports.Input = Input;
+var panelTextInputWithCustomWidth = function panelTextInputWithCustomWidth(width) {
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  input& {\n    width: ", "px;\n  }\n"])), width);
+};
+
+exports.panelTextInputWithCustomWidth = panelTextInputWithCustomWidth;

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

@@ -25,7 +25,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _analytics = require("../../plugins/analytics");
 
@@ -39,7 +39,7 @@ 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; } }
 
-var PluginsComponentsWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
+var pluginsComponentsWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
 
 var PluginSlot = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(PluginSlot, _React$Component);
@@ -136,10 +136,12 @@ var PluginSlot = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_ErrorBoundary.ErrorBoundary, {
+      return (0, _react2.jsx)(_ErrorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.PLUGIN_SLOT,
         fallbackComponent: null
-      }, /*#__PURE__*/_react.default.createElement(PluginsComponentsWrapper, null, items.map(function (component, key) {
+      }, (0, _react2.jsx)("div", {
+        css: pluginsComponentsWrapper
+      }, items.map(function (component, key) {
         var props = {
           key: key
         };

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,9 +15,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _widthDetector = require("@atlaskit/width-detector");
 
@@ -31,10 +33,11 @@ var _types = require("./types");
 
 var _templateObject;
 
-var StyledToolBar = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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;
-}, _editorSharedStyles.akEditorMobileMaxWidth);
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var toolbar = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _editorSharedStyles.akEditorMobileMaxWidth);
 
 var ToolbarWithSizeDetector = function ToolbarWithSizeDetector(props) {
   var ref = /*#__PURE__*/_react.default.createRef();
@@ -48,14 +51,18 @@ var ToolbarWithSizeDetector = function ToolbarWithSizeDetector(props) {
     skip: typeof width !== 'undefined'
   });
   var toolbarSize = typeof width === 'undefined' && typeof elementWidth === 'undefined' ? undefined : (0, _toolbarSize.widthToToolbarSize)(width || elementWidth, props.appearance);
-  var toolbarMinWidth = (0, _toolbarSize.toolbarSizeToWidth)(_types.ToolbarSize.M, props.appearance);
-  return /*#__PURE__*/_react.default.createElement(StyledToolBar, {
-    minWidth: props.hasMinWidth ? "".concat(toolbarMinWidth, "px") : '254px'
-  }, /*#__PURE__*/_react.default.createElement(_widthDetector.WidthObserver, {
+  var toolbarStyle = (0, _react.useMemo)(function () {
+    var toolbarMinWidth = (0, _toolbarSize.toolbarSizeToWidth)(_types.ToolbarSize.M, props.appearance);
+    var minWidth = "min-width: ".concat(props.hasMinWidth ? toolbarMinWidth : '254', "px");
+    return [toolbar, minWidth];
+  }, [props.appearance, props.hasMinWidth]);
+  return (0, _react2.jsx)("div", {
+    css: toolbarStyle
+  }, (0, _react2.jsx)(_widthDetector.WidthObserver, {
     setWidth: setWidth
-  }), props.editorView && toolbarSize ? /*#__PURE__*/_react.default.createElement(_Toolbar.Toolbar, (0, _extends2.default)({}, props, {
+  }), props.editorView && toolbarSize ? (0, _react2.jsx)(_Toolbar.Toolbar, (0, _extends2.default)({}, props, {
     toolbarSize: toolbarSize
-  })) : /*#__PURE__*/_react.default.createElement("div", {
+  })) : (0, _react2.jsx)("div", {
     ref: ref
   }));
 };

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

@@ -15,9 +15,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _analyticsListeners = require("@atlaskit/analytics-listeners");
 
@@ -39,8 +39,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var TOOLBAR_BUTTON = _toolbarButton.TOOLBAR_ACTION_SUBJECT_ID;
 exports.TOOLBAR_BUTTON = TOOLBAR_BUTTON;
-
-var ButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 100%;\n"])));
+var buttonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 100%;\n"])));
 
 var ToolbarButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var buttonId = props.buttonId,
@@ -91,8 +90,7 @@ var ToolbarButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }
   }, [disabled, onClick, onItemClick, item, buttonId]);
   var id = buttonId ? "editor-toolbar__".concat(buttonId) : undefined;
-
-  var button = /*#__PURE__*/_react.default.createElement(_styles.default, {
+  var button = (0, _react2.jsx)(_styles.default, {
     id: id,
     ref: ref,
     appearance: "subtle",
@@ -118,11 +116,13 @@ var ToolbarButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }
 
   var tooltipContent = !hideTooltip ? title : null;
-  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return (0, _react2.jsx)(_tooltip.default, {
     content: tooltipContent,
     hideTooltipOnClick: true,
     position: titlePosition
-  }, /*#__PURE__*/_react.default.createElement(ButtonWrapper, null, button));
+  }, (0, _react2.jsx)("div", {
+    css: buttonWrapper
+  }, button));
 });
 
 var _default = ToolbarButton;

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -27,10 +25,12 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
+var _react2 = require("react");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
@@ -61,10 +61,6 @@ var _consts = require("../../plugins/analytics/consts");
 
 var _contextIdentifier = require("../../plugins/base/pm-plugins/context-identifier");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 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) { (0, _defineProperty2.default)(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; }
@@ -209,15 +205,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.default.createElement(_spinner.default, null) : undefined; // JIRA issue collector script is using jQuery internally
+      var iconBefore = this.state.jiraIssueCollectorScriptLoading ? (0, _react.jsx)(_spinner.default, null) : undefined; // JIRA issue collector script is using jQuery internally
 
-      return this.hasJquery() ? /*#__PURE__*/_react.default.createElement(_styles.Wrapper, null, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+      return this.hasJquery() ? (0, _react.jsx)("div", {
+        css: _styles.wrapper
+      }, (0, _react.jsx)(_ToolbarButton.default, {
         ref: this.handleRef,
         iconBefore: iconBefore,
         onClick: this.collectFeedback,
         selected: false,
         spacing: "compact"
-      }, /*#__PURE__*/_react.default.createElement(_styles.ButtonContent, null, "Feedback")), this.state.showOptOutOption && /*#__PURE__*/_react.default.createElement(PopupWithOutsideListeners, {
+      }, (0, _react.jsx)("span", {
+        css: _styles.buttonContent
+      }, "Feedback")), this.state.showOptOutOption && (0, _react.jsx)(PopupWithOutsideListeners, {
         target: this.state.target,
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
@@ -226,19 +226,26 @@ var ToolbarFeedback = /*#__PURE__*/function (_PureComponent) {
         fitWidth: POPUP_WIDTH,
         handleClickOutside: this.toggleShowOptOutOption,
         handleEscapeKeydown: this.toggleShowOptOutOption
-      }, /*#__PURE__*/_react.default.createElement(_styles.ConfirmationPopup, null, /*#__PURE__*/_react.default.createElement(_styles.ConfirmationHeader, null, /*#__PURE__*/_react.default.createElement(_styles.ConfirmationImg, {
+      }, (0, _react.jsx)("div", {
+        css: _styles.confirmationPopup
+      }, (0, _react.jsx)("div", {
+        css: _styles.confirmationHeader
+      }, (0, _react.jsx)("img", {
+        css: _styles.confirmationImg,
         src: EDITOR_IMAGE_URL
-      })), /*#__PURE__*/_react.default.createElement(_styles.ConfirmationText, null, /*#__PURE__*/_react.default.createElement("div", null, "We are rolling out a new editing experience across Atlassian products. Help us improve by providing feedback."), /*#__PURE__*/_react.default.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.default.createElement(_buttonGroup.default, null, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+      })), (0, _react.jsx)("div", {
+        css: _styles.confirmationText
+      }, (0, _react.jsx)("div", null, "We are rolling out a new editing experience across Atlassian products. Help us improve by providing feedback."), (0, _react.jsx)("div", null, "You can opt-out for now by turning off the \"Atlassian Editor\" feature on the Labs page in Bitbucket settings."), (0, _react.jsx)(_buttonGroup.default, null, (0, _react.jsx)(_customThemeButton.default, {
         appearance: "primary",
         onClick: this.openFeedbackPopup
-      }, "Give feedback"), /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+      }, "Give feedback"), (0, _react.jsx)(_customThemeButton.default, {
         appearance: "default",
         onClick: this.openLearnMorePage
       }, "Learn more")))))) : null;
     }
   }]);
   return ToolbarFeedback;
-}(_react.PureComponent);
+}(_react2.PureComponent);
 
 exports.default = ToolbarFeedback;
 (0, _defineProperty2.default)(ToolbarFeedback, "contextTypes", {

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

@@ -5,11 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.ConfirmationText = exports.ConfirmationPopup = exports.ConfirmationImg = exports.ConfirmationHeader = exports.ButtonContent = void 0;
+exports.wrapper = exports.confirmationText = exports.confirmationPopup = exports.confirmationImg = exports.confirmationHeader = exports.buttonContent = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -19,29 +19,15 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-var ButtonContent = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 24px;\n  line-height: 24px;\n  min-width: 70px;\n"])));
-
-exports.ButtonContent = ButtonContent;
-
-var Wrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: ", "px;\n"])), function (_ref) {
-  var width = _ref.width;
-  return !width || width === 'large' ? 0 : (0, _constants.gridSize)();
-});
-
-exports.Wrapper = Wrapper;
-
-var ConfirmationPopup = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)(), _colors.N60A, _colors.N60A);
-
-exports.ConfirmationPopup = ConfirmationPopup;
-
-var ConfirmationText = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _colors.N400);
-
-exports.ConfirmationText = ConfirmationText;
-
-var ConfirmationHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  height: 100px;\n  width: 100%;\n  display: inline-block;\n"])), _colors.P400);
-
-exports.ConfirmationHeader = ConfirmationHeader;
-
-var ConfirmationImg = _styledComponents.default.img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100px;\n  display: block;\n  margin: 25px auto 0 auto;\n"])));
-
-exports.ConfirmationImg = ConfirmationImg;
+var buttonContent = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 24px;\n  line-height: 24px;\n  min-width: 70px;\n"])));
+exports.buttonContent = buttonContent;
+var wrapper = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: 0;\n"])));
+exports.wrapper = wrapper;
+var confirmationPopup = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)(), _colors.N60A, _colors.N60A);
+exports.confirmationPopup = confirmationPopup;
+var confirmationText = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _colors.N400);
+exports.confirmationText = confirmationText;
+var confirmationHeader = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  height: 100px;\n  width: 100%;\n  display: inline-block;\n"])), _colors.P400);
+exports.confirmationHeader = confirmationHeader;
+var confirmationImg = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100px;\n  display: block;\n  margin: 25px auto 0 auto;\n"])));
+exports.confirmationImg = confirmationImg;

package/dist/cjs/ui/styles.js

@@ -2,16 +2,14 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.scrollbarStyles = exports.dropShadow = exports.Wrapper = exports.TriggerWrapper = exports.Shortcut = exports.Separator = exports.MenuWrapper = exports.ExpandIconWrapper = exports.ClickSelectWrapper = exports.CellColourPreview = exports.ButtonGroup = exports.ButtonContent = void 0;
+exports.wrapperStyle = exports.wrapperSmallStyle = exports.triggerWrapperStyles = exports.shortcutStyle = exports.separatorStyles = exports.scrollbarStyles = exports.expandIconWrapperStyle = exports.dropShadow = exports.clickSelectWrapperStyle = exports.cellColourPreviewStyles = exports.buttonGroupStyle = exports.buttonContentStyle = exports.buttonContentReducedSpacingStyle = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -19,63 +17,38 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
 var akGridSize = (0, _constants.gridSize)() + 'px';
+var buttonGroupStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: center;\n\n  & > div {\n    display: flex;\n  }\n"])));
+exports.buttonGroupStyle = buttonGroupStyle;
+var separatorStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), _colors.N30);
+exports.separatorStyles = separatorStyles;
+var wrapperStyle = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])));
+exports.wrapperStyle = wrapperStyle;
+var wrapperSmallStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 4px;\n  min-width: 40px;\n"])));
+exports.wrapperSmallStyle = wrapperSmallStyle;
+var expandIconWrapperStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: -8px;\n"])));
+exports.expandIconWrapperStyle = expandIconWrapperStyle;
+var triggerWrapperStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
+exports.triggerWrapperStyles = triggerWrapperStyles;
+var buttonContentStyle = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\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"])));
+exports.buttonContentStyle = buttonContentStyle;
+var buttonContentReducedSpacingStyle = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px;\n"]))); // Taken from the style of inline dialog components
+
+exports.buttonContentReducedSpacingStyle = buttonContentReducedSpacingStyle;
+var dropShadow = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\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
 
-var ButtonGroup = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: center;\n\n  & > div {\n    display: flex;\n  }\n"])));
-
-exports.ButtonGroup = ButtonGroup;
-
-var Separator = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), _colors.N30);
-
-exports.Separator = Separator;
-
-var Wrapper = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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';
-});
-
-exports.Wrapper = Wrapper;
-
-var ExpandIconWrapper = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: -8px;\n"])));
-
-exports.ExpandIconWrapper = ExpandIconWrapper;
-
-var TriggerWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
-
-exports.TriggerWrapper = TriggerWrapper;
-var MenuWrapper = Wrapper;
-exports.MenuWrapper = MenuWrapper;
-
-var ButtonContent = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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
-
-
-exports.ButtonContent = ButtonContent;
-var dropShadow = (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25);\n"])));
 exports.dropShadow = dropShadow;
 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");
 exports.scrollbarStyles = scrollbarStyles;
+var shortcutStyle = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N100, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), _editorSharedStyles.akEditorMobileMaxWidth);
+exports.shortcutStyle = shortcutStyle;
+var clickSelectWrapperStyle = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  user-select: all;\n"])));
+exports.clickSelectWrapperStyle = clickSelectWrapperStyle;
 
-var Shortcut = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N100, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), _editorSharedStyles.akEditorMobileMaxWidth);
-
-exports.Shortcut = Shortcut;
-
-var ClickSelectWrapper = _styledComponents.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  user-select: all;\n"])));
-
-exports.ClickSelectWrapper = ClickSelectWrapper;
-
-var CellColourPreview = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  &::before {\n    background: ", ";\n  }\n"])), function (props) {
-  return props.selectedColor;
-});
+var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
+  return (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
+};
 
-exports.CellColourPreview = CellColourPreview;
+exports.cellColourPreviewStyles = cellColourPreviewStyles;

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

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.autoJoinTr = autoJoinTr;
+
+var _prosemirrorTransform = require("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
+ */
+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 ((0, _prosemirrorTransform.canJoin)(tr.doc, joinable[_i2])) {
+      tr.join(joinable[_i2]);
+    }
+  }
+}

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "163.0.0";
+var version = "164.0.2";
 exports.version = version;
 
 var nextMajorVersion = function nextMajorVersion() {

package/dist/cjs/version.json

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