@atlaskit/editor-core 162.0.2 → 164.0.1

package/dist/cjs/plugins/status/nodeviews/status.js

@@ -5,154 +5,68 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledStatus = exports.StatusNodeView = exports.IntlStatusContainerView = void 0;
-exports.default = statusNodeView;
-
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.StatusNodeView = exports.IntlStatusContainerView = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _utils = require("@atlaskit/editor-common/utils");
+var _reactIntlNext = require("react-intl-next");
 
 var _element = require("@atlaskit/status/element");
 
-var _nodeviews = require("../../../nodeviews");
-
 var _messages = require("./messages");
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
-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); }; }
+var styledStatus = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  opacity: 1;\n"])));
+var styledStatusPlaceholder = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  opacity: 0.5;\n"])));
 
-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 StatusContainerView = function StatusContainerView(props) {
+  var text = props.text,
+      color = props.color,
+      localId = props.localId,
+      style = props.style,
+      formatMessage = props.intl.formatMessage;
+  var statusText = text ? text : formatMessage(_messages.messages.placeholder);
 
-var StyledStatus = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  opacity: ", ";\n"])), function (props) {
-  return props.placeholderStyle ? 0.5 : 1;
-});
+  var handleClick = function handleClick(event) {
+    if (event.nativeEvent.stopImmediatePropagation) {
+      event.nativeEvent.stopImmediatePropagation();
+    } // handling of popup is done in plugin.apply on selection change.
+
+  };
+
+  return (0, _react2.jsx)("span", {
+    css: text ? styledStatus : styledStatusPlaceholder
+  }, (0, _react2.jsx)(_element.Status, {
+    text: statusText,
+    color: color,
+    localId: localId,
+    style: style,
+    onClick: handleClick
+  }));
+};
 
-exports.StyledStatus = StyledStatus;
-
-var StatusContainerView = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(StatusContainerView, _React$Component);
-
-  var _super = _createSuper(StatusContainerView);
-
-  function StatusContainerView(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, StatusContainerView);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function (event) {
-      if (event.nativeEvent.stopImmediatePropagation) {
-        event.nativeEvent.stopImmediatePropagation();
-      } // handling of popup is done in plugin.apply on selection change.
-
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(StatusContainerView, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          text = _this$props.text,
-          color = _this$props.color,
-          localId = _this$props.localId,
-          style = _this$props.style,
-          formatMessage = _this$props.intl.formatMessage;
-      var statusText = text ? text : formatMessage(_messages.messages.placeholder);
-      return /*#__PURE__*/_react.default.createElement(StyledStatus, {
-        placeholderStyle: !text
-      }, /*#__PURE__*/_react.default.createElement(_element.Status, {
-        text: statusText,
-        color: color,
-        localId: localId,
-        style: style,
-        onClick: this.handleClick
-      }));
-    }
-  }]);
-  return StatusContainerView;
-}(_react.default.Component);
-
-(0, _defineProperty2.default)(StatusContainerView, "displayName", 'StatusContainerView');
 var IntlStatusContainerView = (0, _reactIntlNext.injectIntl)(StatusContainerView);
 exports.IntlStatusContainerView = IntlStatusContainerView;
 
-var StatusNodeView = /*#__PURE__*/function (_ReactNodeView) {
-  (0, _inherits2.default)(StatusNodeView, _ReactNodeView);
-
-  var _super2 = _createSuper(StatusNodeView);
-
-  function StatusNodeView() {
-    (0, _classCallCheck2.default)(this, StatusNodeView);
-    return _super2.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(StatusNodeView, [{
-    key: "createDomRef",
-    value: function createDomRef() {
-      return (0, _get2.default)((0, _getPrototypeOf2.default)(StatusNodeView.prototype), "createDomRef", this).call(this);
-    }
-  }, {
-    key: "setDomAttrs",
-    value: function setDomAttrs(node, element) {
-      var _node$attrs = node.attrs,
-          color = _node$attrs.color,
-          localId = _node$attrs.localId,
-          style = _node$attrs.style;
-      element.dataset.color = color;
-      element.dataset.localId = localId;
-      element.dataset.style = style;
-    }
-  }, {
-    key: "render",
-    value: function render(props) {
-      var options = props.options;
-      var _this$node$attrs = this.node.attrs,
-          text = _this$node$attrs.text,
-          color = _this$node$attrs.color,
-          localId = _this$node$attrs.localId,
-          style = _this$node$attrs.style;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, options && options.allowZeroWidthSpaceAfter && _utils.ZERO_WIDTH_SPACE, /*#__PURE__*/_react.default.createElement(IntlStatusContainerView, {
-        view: this.view,
-        text: text,
-        color: color,
-        style: style,
-        localId: localId
-      }), options && options.allowZeroWidthSpaceAfter && _utils.ZERO_WIDTH_SPACE);
-    }
-  }]);
-  return StatusNodeView;
-}(_nodeviews.ReactNodeView);
-
-exports.StatusNodeView = StatusNodeView;
-
-function statusNodeView(portalProviderAPI, eventDispatcher, options) {
-  return function (node, view, getPos) {
-    var hasIntlContext = true;
-    return new StatusNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
-      options: options
-    }, undefined, undefined, undefined, hasIntlContext).init();
-  };
-}
+var StatusNodeView = function StatusNodeView(props) {
+  var view = props.view;
+  var _props$node$attrs = props.node.attrs,
+      text = _props$node$attrs.text,
+      color = _props$node$attrs.color,
+      localId = _props$node$attrs.localId,
+      style = _props$node$attrs.style;
+  return (0, _react2.jsx)(IntlStatusContainerView, {
+    view: view,
+    text: text,
+    color: color,
+    style: style,
+    localId: localId
+  });
+};
+
+exports.StatusNodeView = StatusNodeView;

package/dist/cjs/plugins/status/plugin.js

@@ -25,7 +25,9 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var _prosemirrorState = require("prosemirror-state");
 
-var _status = _interopRequireDefault(require("./nodeviews/status"));
+var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer");
+
+var _status = require("./nodeviews/status");
 
 var _pluginKey = require("./plugin-key");
 
@@ -35,7 +37,7 @@ 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) { (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; }
 
-var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispatcher, options) {
+var createPlugin = function createPlugin(pmPluginFactoryParams, options) {
   return new _safePlugin.SafePlugin({
     state: {
       init: function init() {
@@ -50,7 +52,7 @@ var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispa
         if (meta) {
           var newState = _objectSpread(_objectSpread({}, state), meta);
 
-          dispatch(_pluginKey.pluginKey, newState);
+          pmPluginFactoryParams.dispatch(_pluginKey.pluginKey, newState);
           return newState;
         }
 
@@ -66,7 +68,7 @@ var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispa
           });
 
           if (_newState.showStatusPickerAt !== state.showStatusPickerAt) {
-            dispatch(_pluginKey.pluginKey, _newState);
+            pmPluginFactoryParams.dispatch(_pluginKey.pluginKey, _newState);
             return _newState;
           }
         }
@@ -87,7 +89,7 @@ var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispa
               showStatusPickerAt: _showStatusPickerAt
             });
 
-            dispatch(_pluginKey.pluginKey, _newState2);
+            pmPluginFactoryParams.dispatch(_pluginKey.pluginKey, _newState2);
             return _newState2;
           }
         }
@@ -136,7 +138,13 @@ var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispa
     key: _pluginKey.pluginKey,
     props: {
       nodeViews: {
-        status: (0, _status.default)(portalProviderAPI, eventDispatcher, options)
+        status: (0, _getInlineNodeViewProducer.getInlineNodeViewProducer)({
+          pmPluginFactoryParams: pmPluginFactoryParams,
+          Component: _status.StatusNodeView,
+          extraComponentProps: {
+            options: options
+          }
+        })
       }
     }
   });

package/dist/cjs/plugins/status/styles.js

@@ -9,7 +9,7 @@ exports.statusStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _styles = require("@atlaskit/editor-common/styles");
 
@@ -17,5 +17,5 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject;
 
-var statusStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", ",\n    .", ",\n    [data-layout-section] {\n    .", " {\n      max-width: 100%;\n      line-height: 0;\n\n      > span {\n        width: 100%;\n      }\n    }\n  }\n  .", " {\n    // these two styles can be removed when displayInlineBlockForInlineNodes is enabled by default\n    // as it will make all inline nodes inline-block by default\n    display: inline-block;\n    user-select: all;\n\n    > span {\n      display: inline-block;\n      cursor: pointer;\n      line-height: 0; /* Prevent responsive layouts increasing height of container. */\n    }\n\n    &.", "\n      .", "\n      > span {\n      ", "\n    }\n  }\n\n  .danger {\n    .", " > span {\n      background-color: ", ";\n    }\n\n    .", ".", "\n      .", "\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n    }\n  }\n"])), _styles.TableSharedCssClassName.TABLE_CELL_WRAPPER, _styles.TableSharedCssClassName.TABLE_HEADER_CELL_WRAPPER, _styles.StatusSharedCssClassName.STATUS_CONTAINER, _styles.StatusSharedCssClassName.STATUS_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.StatusSharedCssClassName.STATUS_LOZENGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.StatusSharedCssClassName.STATUS_LOZENGE, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _styles.StatusSharedCssClassName.STATUS_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.StatusSharedCssClassName.STATUS_LOZENGE, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder);
+var statusStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", ",\n    .", ",\n    [data-layout-section] {\n    .", " {\n      max-width: 100%;\n      line-height: 0;\n\n      > span {\n        width: 100%;\n      }\n    }\n  }\n  .", " {\n    > span {\n      cursor: pointer;\n      line-height: 0; /* Prevent responsive layouts increasing height of container. */\n    }\n\n    &.", "\n      .", "\n      > span {\n      ", "\n    }\n  }\n\n  .danger {\n    .", " > span {\n      background-color: ", ";\n    }\n\n    .", ".", "\n      .", "\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n    }\n  }\n"])), _styles.TableSharedCssClassName.TABLE_CELL_WRAPPER, _styles.TableSharedCssClassName.TABLE_HEADER_CELL_WRAPPER, _styles.StatusSharedCssClassName.STATUS_CONTAINER, _styles.StatusSharedCssClassName.STATUS_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.StatusSharedCssClassName.STATUS_LOZENGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.StatusSharedCssClassName.STATUS_LOZENGE, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _styles.StatusSharedCssClassName.STATUS_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.StatusSharedCssClassName.STATUS_LOZENGE, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder);
 exports.statusStyles = statusStyles;

package/dist/cjs/plugins/status/ui/statusPicker.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 _analyticsNext = require("@atlaskit/analytics-next");
 
@@ -63,7 +63,7 @@ exports.InputMethod = InputMethod;
   InputMethod["enterKey"] = "enterKey";
 })(InputMethod || (exports.InputMethod = InputMethod = {}));
 
-var PickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  padding: ", "px 0;\n  border-radius: ", "px;\n  ", ";\n  input {\n    text-transform: uppercase;\n  }\n"])), _colors.N0, (0, _constants.gridSize)(), (0, _constants.borderRadius)(), _styles.dropShadow);
+var pickerContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  padding: ", "px 0;\n  border-radius: ", "px;\n  ", ";\n  input {\n    text-transform: uppercase;\n  }\n"])), _colors.N0, (0, _constants.gridSize)(), (0, _constants.borderRadius)(), _styles.dropShadow);
 
 var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(StatusPickerWithoutAnalytcs, _React$Component);
@@ -249,16 +249,17 @@ var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component) {
       var _this$state3 = this.state,
           color = _this$state3.color,
           text = _this$state3.text;
-      return target && /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
+      return target && (0, _react2.jsx)(PopupWithListeners, {
         target: target,
         offset: [0, 8],
         handleClickOutside: this.handleClickOutside,
         handleEscapeKeydown: this.handleEscapeKeydown,
         zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
         fitHeight: 40
-      }, /*#__PURE__*/_react.default.createElement(PickerContainer, {
+      }, (0, _react2.jsx)("div", {
+        css: pickerContainer,
         onClick: this.handlePopupClick
-      }, /*#__PURE__*/_react.default.createElement(_picker.StatusPicker, {
+      }, (0, _react2.jsx)(_picker.StatusPicker, {
         autoFocus: isNew,
         selectedColor: color,
         text: text,

package/dist/cjs/plugins/table/commands/insert.js

@@ -17,8 +17,6 @@ var _prosemirrorUtils = require("prosemirror-utils");
 
 var _steps = require("@atlaskit/adf-schema/steps");
 
-var _pluginFactory = require("../pm-plugins/plugin-factory");
-
 var _utils2 = require("../utils");
 
 var _getAllowAddColumnCustomStep = require("../utils/get-allow-add-column-custom-step");
@@ -164,10 +162,6 @@ exports.insertRow = insertRow;
 
 var createTable = function createTable() {
   return function (state, dispatch) {
-    if (!(0, _pluginFactory.getPluginState)(state)) {
-      return false;
-    }
-
     var table = (0, _utils.createTable)({
       schema: state.schema
     });

package/dist/cjs/plugins/table/index.js

@@ -266,7 +266,7 @@ var tablesPlugin = function tablesPlugin(options) {
           id: 'table',
           title: formatMessage(_messages.messages.table),
           description: formatMessage(_messages.messages.tableDescription),
-          keywords: ['cell'],
+          keywords: ['cell', 'table'],
           priority: 600,
           keyshortcut: (0, _keymaps.tooltip)(_keymaps.toggleTable),
           icon: function icon() {

package/dist/cjs/plugins/table/pm-plugins/main.js

@@ -43,6 +43,18 @@ var _pluginKey = require("./plugin-key");
 
 var _tableCell = _interopRequireDefault(require("../nodeviews/tableCell"));
 
+var _misc = require("../commands/misc");
+
+var _utils4 = require("../../layout/utils");
+
+var _utils5 = require("../../expand/utils");
+
+var _actions = require("../../extension/actions");
+
+var _utils6 = require("../../../utils");
+
+var _paste = require("../utils/paste");
+
 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; }
@@ -87,6 +99,18 @@ var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, porta
   } : {}; // Used to prevent invalid table cell spans being reported more than once per editor/document
 
   var invalidTableIds = [];
+  var editorViewRef = null;
+
+  var getCurrentEditorState = function getCurrentEditorState() {
+    var editorView = editorViewRef;
+
+    if (!editorView) {
+      return null;
+    }
+
+    return editorView.state;
+  };
+
   return new _safePlugin.SafePlugin({
     state: state,
     key: _pluginKey.pluginKey,
@@ -130,6 +154,7 @@ var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, porta
     },
     view: function view(editorView) {
       var domAtPos = editorView.domAtPos.bind(editorView);
+      editorViewRef = editorView;
       return {
         update: function update(view) {
           var state = view.state,
@@ -179,6 +204,48 @@ var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, porta
       };
     },
     props: {
+      transformPasted: function transformPasted(slice) {
+        var editorState = getCurrentEditorState();
+
+        if (!editorState) {
+          return slice;
+        }
+
+        var schema = editorState.schema; // if we're pasting to outside a table or outside a table
+        // header, ensure that we apply any table headers to the first
+        // row of content we see, if required
+
+        if (!(0, _utils6.insideTable)(editorState) && (0, _paste.isHeaderRowRequired)(editorState)) {
+          slice = (0, _misc.transformSliceToAddTableHeaders)(slice, schema);
+        }
+
+        slice = (0, _utils3.transformSliceToFixHardBreakProblemOnCopyFromCell)(slice, schema); // We do this separately, so it also applies to drag/drop events
+        // This needs to go before `transformSliceToRemoveOpenExpand`
+
+        slice = (0, _utils4.transformSliceToRemoveOpenLayoutNodes)(slice, schema); // If a partial paste of expand, paste only the content
+        // This needs to go before `transformSliceToRemoveOpenTable`
+
+        slice = (0, _utils5.transformSliceToRemoveOpenExpand)(slice, schema);
+        /** If a partial paste of table, paste only table's content */
+
+        slice = (0, _utils3.transformSliceToRemoveOpenTable)(slice, schema);
+        /** If a partial paste of bodied extension, paste only text */
+
+        slice = (0, _actions.transformSliceToRemoveOpenBodiedExtension)(slice, schema);
+        slice = (0, _utils3.transformSliceToCorrectEmptyTableCells)(slice, schema);
+
+        if (!pluginConfig.allowColumnResizing) {
+          slice = (0, _misc.transformSliceToRemoveColumnsWidths)(slice, schema);
+        } // If we don't allow background on cells, we need to remove it
+        // from the paste slice
+
+
+        if (!pluginConfig.allowBackgroundColor) {
+          slice = (0, _misc.transformSliceRemoveCellBackgroundColor)(slice, schema);
+        }
+
+        return slice;
+      },
       handleClick: function handleClick(_ref2, _pos, event) {
         var state = _ref2.state,
             dispatch = _ref2.dispatch;

package/dist/cjs/plugins/table/ui/FloatingContextualButton/index.js

@@ -22,16 +22,14 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _prosemirrorUtils = require("prosemirror-utils");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -56,14 +54,10 @@ var _styles = require("./styles");
 
 var _ErrorBoundary = require("../../../../ui/ErrorBoundary");
 
-var _templateObject;
-
 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; } }
 
-var ButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), _styles.tableFloatingCellButtonStyles);
-
 var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(FloatingContextualButtonInner, _React$Component);
 
@@ -140,23 +134,23 @@ var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Component) {
 
       var tableWrapper = (0, _dom.closestElement)(targetCellRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER));
       var labelCellOptions = formatMessage(_messages.default.cellOptions);
-
-      var button = /*#__PURE__*/_react.default.createElement(ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+      var button = (0, _react2.jsx)("div", {
+        css: _styles.tableFloatingCellButtonStyles
+      }, (0, _react2.jsx)(_ToolbarButton.default, {
         className: _types.TableCssClassName.CONTEXTUAL_MENU_BUTTON,
         selected: isContextualMenuOpen,
         title: labelCellOptions,
         onClick: this.handleClick,
-        iconBefore: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+        iconBefore: (0, _react2.jsx)(_chevronDown.default, {
           label: ""
         }),
         "aria-label": labelCellOptions
       }));
-
       var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
 
       if (this.props.stickyHeader && parentSticky) {
         var pos = targetCellRef.getBoundingClientRect();
-        return /*#__PURE__*/_react.default.createElement("div", {
+        return (0, _react2.jsx)("div", {
           style: {
             position: 'fixed',
             top: this.props.stickyHeader.top + this.props.stickyHeader.padding + 3 + 3,
@@ -166,7 +160,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Component) {
         }, button);
       }
 
-      return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+      return (0, _react2.jsx)(_ui.Popup, {
         alignX: "right",
         alignY: "start",
         target: targetCellRef,
@@ -193,9 +187,9 @@ exports.FloatingContextualButtonInner = FloatingContextualButtonInner;
 var FloatingContextualButton = (0, _reactIntlNext.injectIntl)(FloatingContextualButtonInner);
 
 function _default(props) {
-  return /*#__PURE__*/_react.default.createElement(_ErrorBoundary.ErrorBoundary, {
+  return (0, _react2.jsx)(_ErrorBoundary.ErrorBoundary, {
     component: _analytics.ACTION_SUBJECT.FLOATING_CONTEXTUAL_BUTTON,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
     fallbackComponent: null
-  }, /*#__PURE__*/_react.default.createElement(FloatingContextualButton, props));
+  }, (0, _react2.jsx)(FloatingContextualButton, props));
 }

package/dist/cjs/plugins/table/ui/FloatingContextualButton/styles.js

@@ -9,7 +9,7 @@ exports.tableFloatingCellButtonStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -19,5 +19,5 @@ var _consts = require("../consts");
 
 var _templateObject;
 
-var tableFloatingCellButtonStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  > div {\n    background: ", ";\n    border-radius: ", "px;\n    border: 2px solid ", ";\n    display: flex;\n    height: ", "px;\n    flex-direction: column;\n  }\n  && button {\n    flex-direction: column;\n    padding: 0;\n    height: 100%;\n    display: flex;\n  }\n  && button > span {\n    margin: 0px -4px;\n  }\n  && span {\n    pointer-events: none;\n  }\n"])), _colors.N20, (0, _constants.borderRadius)(), _colors.N0, _consts.contextualMenuTriggerSize - 2);
+var tableFloatingCellButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  > div {\n    background: ", ";\n    border-radius: ", "px;\n    border: 2px solid ", ";\n    display: flex;\n    height: ", "px;\n    flex-direction: column;\n  }\n  && button {\n    flex-direction: column;\n    padding: 0;\n    height: 100%;\n    display: flex;\n  }\n  && button > span {\n    margin: 0px -4px;\n  }\n  && span {\n    pointer-events: none;\n  }\n"])), _colors.N20, (0, _constants.borderRadius)(), _colors.N0, _consts.contextualMenuTriggerSize - 2);
 exports.tableFloatingCellButtonStyles = tableFloatingCellButtonStyles;

package/dist/cjs/plugins/table/ui/FloatingContextualMenu/ContextualMenu.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
 });
@@ -23,7 +21,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
 
 var _utils = require("@atlaskit/editor-tables/utils");
 
@@ -63,10 +63,6 @@ var _consts = require("../consts");
 
 var _resizeState = require("../../pm-plugins/table-resizing/utils/resize-state");
 
-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; }
@@ -178,13 +174,13 @@ var ContextualMenu = /*#__PURE__*/function (_Component) {
           value: {
             name: 'background'
           },
-          elemAfter: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles.CellColourPreview, {
-            selectedColor: background,
+          elemAfter: (0, _react2.jsx)("div", null, (0, _react2.jsx)("div", {
+            css: (0, _styles.cellColourPreviewStyles)(background),
             className: _types.TableCssClassName.CONTEXTUAL_MENU_ICON
-          }), isSubmenuOpen && /*#__PURE__*/_react.default.createElement("div", {
+          }), isSubmenuOpen && (0, _react2.jsx)("div", {
             className: _types.TableCssClassName.CONTEXTUAL_SUBMENU,
             ref: _this.handleSubMenuRef
-          }, /*#__PURE__*/_react.default.createElement(_ColorPalette.default, {
+          }, (0, _react2.jsx)(_ColorPalette.default, {
             cols: 7,
             palette: _cellBackgroundColorPalette.default,
             onClick: _this.setColor,
@@ -198,14 +194,18 @@ var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'insert_column'
         },
-        elemAfter: /*#__PURE__*/_react.default.createElement(_styles.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.addColumnAfter))
+        elemAfter: (0, _react2.jsx)("div", {
+          css: _styles.shortcutStyle
+        }, (0, _keymaps.tooltip)(_keymaps.addColumnAfter))
       });
       items.push({
         content: formatMessage(_messages.default.insertRow),
         value: {
           name: 'insert_row'
         },
-        elemAfter: /*#__PURE__*/_react.default.createElement(_styles.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.addRowAfter))
+        elemAfter: (0, _react2.jsx)("div", {
+          css: _styles.shortcutStyle
+        }, (0, _keymaps.tooltip)(_keymaps.addRowAfter))
       });
       var top = selectionRect.top,
           bottom = selectionRect.bottom,
@@ -288,7 +288,9 @@ var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'clear'
         },
-        elemAfter: /*#__PURE__*/_react.default.createElement(_styles.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.backspace))
+        elemAfter: (0, _react2.jsx)("div", {
+          css: _styles.shortcutStyle
+        }, (0, _keymaps.tooltip)(_keymaps.backspace))
       });
       return items.length ? [{
         items: items
@@ -490,10 +492,10 @@ var ContextualMenu = /*#__PURE__*/function (_Component) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react2.jsx)("div", {
         "data-testid": "table-cell-contextual-menu",
         onMouseLeave: this.closeSubmenu
-      }, /*#__PURE__*/_react.default.createElement(_DropdownMenu.default, {
+      }, (0, _react2.jsx)(_DropdownMenu.default, {
         mountTo: mountPoint,
         items: items,
         isOpen: isOpen,