@atlaskit/editor-core 161.0.0 → 163.0.0

package/dist/cjs/plugins/help-dialog/ui/styles.js

@@ -7,11 +7,11 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Title = exports.Row = exports.Line = exports.Header = exports.Footer = exports.ContentWrapper = exports.Content = exports.ColumnRight = exports.ColumnLeft = exports.CodeSm = exports.CodeMd = exports.CodeLg = void 0;
+exports.title = exports.row = exports.line = exports.header = exports.footer = exports.contentWrapper = exports.content = exports.columnRight = exports.columnLeft = exports.codeSm = exports.codeMd = exports.codeLg = 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");
 
@@ -25,50 +25,27 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 Header = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  z-index: ", ";\n  min-height: 24px;\n  padding: 20px 40px;\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 'none';\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n"])), _editorSharedStyles.akEditorUnitZIndex, (0, _editorSharedStyles.relativeFontSizeToBase16)(24), colors.N400, colors.N0, (0, _constants.borderRadius)());
-
-exports.Header = Header;
-
-var Footer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: 24px;\n  text-align: right;\n  box-shadow: 'none';\n"])), _editorSharedStyles.akEditorUnitZIndex, (0, _editorSharedStyles.relativeFontSizeToBase16)(14), colors.N300);
-
-exports.Footer = Footer;
-
-var ContentWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 18px 20px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), (0, _constants.borderRadius)(), colors.N400, colors.N0);
-
-exports.ContentWrapper = ContentWrapper;
-
-var Line = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background: #fff;\n  content: '';\n  display: block;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  min-width: 604px;\n"])));
-
-exports.Line = Line;
-
-var Content = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 524px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n"])));
-
-exports.Content = Content;
-
-var ColumnLeft = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 44%;\n"])));
-
-exports.ColumnLeft = ColumnLeft;
-
-var ColumnRight = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: 44%;\n"])));
-
-exports.ColumnRight = ColumnRight;
-
-var Row = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 20px 0;\n  display: flex;\n  justify-content: space-between;\n"])));
-
-exports.Row = Row;
-
-var Title = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", ";\n  font-weight: 400;\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(18));
-
-exports.Title = Title;
-
-var CodeSm = _styledComponents.default.span(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n"])), colors.N20, (0, _constants.borderRadius)());
-
-exports.CodeSm = CodeSm;
-
-var CodeMd = _styledComponents.default.span(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), colors.N20, (0, _constants.borderRadius)());
-
-exports.CodeMd = CodeMd;
-
-var CodeLg = _styledComponents.default.span(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 10px;\n  text-align: center;\n"])), colors.N20, (0, _constants.borderRadius)());
-
-exports.CodeLg = CodeLg;
+var header = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  z-index: ", ";\n  min-height: 24px;\n  padding: 20px 40px;\n  font-size: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: 'none';\n  color: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n"])), _editorSharedStyles.akEditorUnitZIndex, (0, _editorSharedStyles.relativeFontSizeToBase16)(24), colors.N400, colors.N0, (0, _constants.borderRadius)());
+exports.header = header;
+var footer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: 24px;\n  text-align: right;\n  box-shadow: 'none';\n"])), _editorSharedStyles.akEditorUnitZIndex, (0, _editorSharedStyles.relativeFontSizeToBase16)(14), colors.N300);
+exports.footer = footer;
+var contentWrapper = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 18px 20px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), (0, _constants.borderRadius)(), colors.N400, colors.N0);
+exports.contentWrapper = contentWrapper;
+var line = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background: #fff;\n  content: '';\n  display: block;\n  height: 2px;\n  left: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  min-width: 604px;\n"])));
+exports.line = line;
+var content = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 524px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n"])));
+exports.content = content;
+var columnLeft = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 44%;\n"])));
+exports.columnLeft = columnLeft;
+var columnRight = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: 44%;\n"])));
+exports.columnRight = columnRight;
+var row = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 20px 0;\n  display: flex;\n  justify-content: space-between;\n"])));
+exports.row = row;
+var title = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", ";\n  font-weight: 400;\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(18));
+exports.title = title;
+var codeSm = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  text-align: center;\n"])), colors.N20, (0, _constants.borderRadius)());
+exports.codeSm = codeSm;
+var codeMd = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  width: 50px;\n  text-align: center;\n"])), colors.N20, (0, _constants.borderRadius)());
+exports.codeMd = codeMd;
+var codeLg = (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  display: inline-block;\n  height: 24px;\n  line-height: 24px;\n  padding: 0 10px;\n  text-align: center;\n"])), colors.N20, (0, _constants.borderRadius)());
+exports.codeLg = codeLg;

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

@@ -2,35 +2,25 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.visuallyHiddenStyles = exports.linkStyles = exports.ScreenReaderText = void 0;
+exports.visuallyHiddenStyles = exports.linkStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _styles = require("@atlaskit/editor-common/styles");
 
-var _templateObject, _templateObject2, _templateObject3;
-
-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;
 
-var linkStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", "\n  }\n"])), _styles.linkSharedStyle);
+var linkStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", "\n  }\n"])), _styles.linkSharedStyle);
 /**
  * Visible only to screenreaders. Use when there is a need
  * to provide more context to a non-sighted user.
  */
 
 exports.linkStyles = linkStyles;
-var visuallyHiddenStyles = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n"])));
-exports.visuallyHiddenStyles = visuallyHiddenStyles;
-
-var ScreenReaderText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), visuallyHiddenStyles);
-
-exports.ScreenReaderText = ScreenReaderText;
+var visuallyHiddenStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n"])));
+exports.visuallyHiddenStyles = visuallyHiddenStyles;

package/dist/cjs/plugins/hyperlink/ui/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -35,6 +35,8 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _adfSchema = require("@atlaskit/adf-schema");
 
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
@@ -137,8 +139,7 @@ var messages = (0, _reactIntlNext.defineMessages)({
   }
 });
 exports.messages = messages;
-
-var defaultIcon = /*#__PURE__*/_react.default.createElement(_.default, {
+var defaultIcon = (0, _react2.jsx)(_.default, {
   label: 'page'
 });
 
@@ -965,24 +966,25 @@ var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
       // for details: https://a11y-internal.atlassian.net/browse/AK-740
 
       var screenReaderText = _utils3.browser.safari && this.getScreenReaderText();
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react2.jsx)("div", {
         className: "recent-list"
-      }, /*#__PURE__*/_react.default.createElement(_ToolbarComponents.Container, {
+      }, (0, _react2.jsx)(_ToolbarComponents.Container, {
         provider: !!activityProvider,
         innerRef: this.wrapperRef
-      }, /*#__PURE__*/_react.default.createElement(_ToolbarComponents.UrlInputWrapper, null, /*#__PURE__*/_react.default.createElement(IconWrapper, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      }, (0, _react2.jsx)(_ToolbarComponents.UrlInputWrapper, null, (0, _react2.jsx)(IconWrapper, null, (0, _react2.jsx)(_tooltip.default, {
         content: formatLinkAddressText
-      }, /*#__PURE__*/_react.default.createElement(_link.default, {
+      }, (0, _react2.jsx)(_link.default, {
         label: formatLinkAddressText
-      }))), screenReaderText && /*#__PURE__*/_react.default.createElement(_announcer.default, {
+      }))), screenReaderText && (0, _react2.jsx)(_announcer.default, {
         ariaLive: "assertive",
         text: screenReaderText,
         ariaRelevant: "additions",
         delay: 250
-      }), /*#__PURE__*/_react.default.createElement(_styles.ScreenReaderText, {
+      }), (0, _react2.jsx)("div", {
+        css: _styles.visuallyHiddenStyles,
         "aria-hidden": "true",
         id: screenReaderDescriptionId
-      }, formatMessage(messages.searchLinkAriaDescription)), /*#__PURE__*/_react.default.createElement(_PanelTextInput.default, {
+      }, formatMessage(messages.searchLinkAriaDescription)), (0, _react2.jsx)(_PanelTextInput.default, {
         role: "combobox",
         ariaExpanded: true,
         ariaActiveDescendant: ariaActiveDescendant,
@@ -1002,17 +1004,17 @@ var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         onCancel: this.handleCancel,
         defaultValue: displayUrl,
         onKeyDown: this.handleKeyDown
-      }), displayUrl && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      }), displayUrl && (0, _react2.jsx)(_tooltip.default, {
         content: formatClearLinkText
-      }, /*#__PURE__*/_react.default.createElement(ClearText, {
+      }, (0, _react2.jsx)(ClearText, {
         onClick: this.handleClearText
-      }, /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
+      }, (0, _react2.jsx)(_crossCircle.default, {
         label: formatClearLinkText
-      })))), /*#__PURE__*/_react.default.createElement(TextInputWrapper, null, /*#__PURE__*/_react.default.createElement(IconWrapper, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      })))), (0, _react2.jsx)(TextInputWrapper, null, (0, _react2.jsx)(IconWrapper, null, (0, _react2.jsx)(_tooltip.default, {
         content: formatDisplayText
-      }, /*#__PURE__*/_react.default.createElement(_alignLeft.default, {
+      }, (0, _react2.jsx)(_alignLeft.default, {
         label: formatDisplayText
-      }))), /*#__PURE__*/_react.default.createElement(_PanelTextInput.default, {
+      }))), (0, _react2.jsx)(_PanelTextInput.default, {
         ref: function ref(ele) {
           return _this2.displayTextInputContainer = ele;
         },
@@ -1024,20 +1026,21 @@ var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         defaultValue: displayText,
         onSubmit: this.handleSubmit,
         onKeyDown: this.handleKeyDown
-      }), displayText && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      }), displayText && (0, _react2.jsx)(_tooltip.default, {
         content: formatMessage(messages.clearText)
-      }, /*#__PURE__*/_react.default.createElement(ClearText, {
+      }, (0, _react2.jsx)(ClearText, {
         onClick: this.handleClearDisplayText,
         onKeyDown: this.handleClearTextKeyDown
-      }, /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
+      }, (0, _react2.jsx)(_crossCircle.default, {
         label: formatMessage(messages.clearText)
-      })))), /*#__PURE__*/_react.default.createElement(_styles.ScreenReaderText, {
+      })))), (0, _react2.jsx)("div", {
+        css: _styles.visuallyHiddenStyles,
         "aria-live": "polite",
         "aria-atomic": "true",
         id: "fabric.editor.hyperlink.suggested.results"
       }, displayUrl && formatMessage(messages.searchLinkResults, {
         count: items.length
-      })), /*#__PURE__*/_react.default.createElement(_LinkSearchList.default, {
+      })), (0, _react2.jsx)(_LinkSearchList.default, {
         ariaControls: "fabric.editor.hyperlink.suggested.results",
         id: linkSearchListId,
         role: "listbox",

package/dist/cjs/plugins/jira-issue/nodeviews/jira-issue.js

@@ -9,9 +9,7 @@ exports.default = JIRAIssueNode;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _jiraIcon = require("@atlaskit/logo/jira-icon");
 
@@ -23,15 +21,20 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject, _templateObject2, _templateObject3;
 
-var WrapperNode = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 4px;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n\n  .ProseMirror-selectednode & {\n    background: ", ";\n    outline: none;\n  }\n"])), _colors.N30, _colors.N50, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)(13), _colors.N50);
-
-var JiraChildNode = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  color: #707070;\n  line-height: 24px;\n  vertical-align: top;\n\n  &::before {\n    color: black;\n    content: 'JIRA | ';\n  }\n"])));
-
-var SvgChildNode = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n\n  & > div {\n    height: 24px;\n    width: 24px;\n  }\n"])));
+var wrapperNode = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 4px;\n  user-select: none;\n  vertical-align: middle;\n  white-space: nowrap;\n\n  .ProseMirror-selectednode & {\n    background: ", ";\n    outline: none;\n  }\n"])), _colors.N30, _colors.N50, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)(13), _colors.N50);
+var jiraChildNode = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  color: #707070;\n  line-height: 24px;\n  vertical-align: top;\n\n  &::before {\n    color: black;\n    content: 'JIRA | ';\n  }\n"])));
+var svgChildNode = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n\n  & > div {\n    height: 24px;\n    width: 24px;\n  }\n"])));
 
 function JIRAIssueNode(props) {
   var issueKey = props.node.attrs.issueKey;
-  return /*#__PURE__*/_react.default.createElement(WrapperNode, null, /*#__PURE__*/_react.default.createElement(SvgChildNode, null, /*#__PURE__*/_react.default.createElement(_jiraIcon.JiraIcon, {
+  return (0, _react.jsx)("span", {
+    css: wrapperNode,
+    "data-testid": "jira-issue-node"
+  }, (0, _react.jsx)("span", {
+    css: svgChildNode
+  }, (0, _react.jsx)(_jiraIcon.JiraIcon, {
     size: "small"
-  })), /*#__PURE__*/_react.default.createElement(JiraChildNode, null, issueKey));
+  })), (0, _react.jsx)("span", {
+    css: jiraChildNode
+  }, issueKey));
 }

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

@@ -9,7 +9,7 @@ exports.layoutStyles = exports.LAYOUT_SECTION_MARGIN = exports.LAYOUT_COLUMN_PAD
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -29,5 +29,5 @@ var LAYOUT_SECTION_MARGIN = (0, _constants.gridSize)();
 exports.LAYOUT_SECTION_MARGIN = LAYOUT_SECTION_MARGIN;
 var LAYOUT_COLUMN_PADDING = (0, _constants.gridSize)() * 1.5;
 exports.LAYOUT_COLUMN_PADDING = LAYOUT_COLUMN_PADDING;
-var layoutStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > *:first-child {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-child .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border-color: ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() - 1, _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSelectedBorderSize, _colors.N40A, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, _colors.N50A, _editorSharedStyles.akEditorDeleteBackground, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
+var layoutStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > *:first-child {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-child .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border-color: ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() - 1, _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSelectedBorderSize, _colors.N40A, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, _colors.N50A, _editorSharedStyles.akEditorDeleteBackground, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
 exports.layoutStyles = layoutStyles;

package/dist/cjs/plugins/list/actions/wrap-and-join-lists.js

@@ -0,0 +1,180 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.autoJoin = autoJoin;
+exports.wrapInList = wrapInList;
+exports.wrapInListAndJoin = wrapInListAndJoin;
+
+var _prosemirrorModel = require("prosemirror-model");
+
+var _prosemirrorTransform = require("prosemirror-transform");
+
+/**
+ * Wraps the selection in a list with the given type. If this results in
+ * two adjacent lists of the same type, those will be joined together.
+ */
+function wrapInListAndJoin(nodeType, tr) {
+  wrapInList(nodeType)(tr);
+  autoJoin(tr, function (before, after) {
+    return before.type === after.type && before.type === nodeType;
+  });
+}
+/**
+ * Wraps the selection in a list with the given type and attributes.
+ *
+ * Adapted from https://github.com/ProseMirror/prosemirror-schema-list/blob/master/src/schema-list.js#L64-L89
+ */
+
+
+function wrapInList(listType, attrs) {
+  return function (tr) {
+    var _tr$selection = tr.selection,
+        $from = _tr$selection.$from,
+        $to = _tr$selection.$to;
+    var range = $from.blockRange($to);
+    var doJoin = false;
+    var outerRange = range;
+
+    if (!range) {
+      return false;
+    } // This is at the top of an existing list item
+
+
+    if (range.depth >= 2 && // @ts-ignore - missing type for compatibleContent
+    $from.node(range.depth - 1).type.compatibleContent(listType) && range.startIndex === 0) {
+      // Don't do anything if this is the top of the list
+      if ($from.index(range.depth - 1) === 0) {
+        return false;
+      }
+
+      var $insert = tr.doc.resolve(range.start - 2);
+      outerRange = new _prosemirrorModel.NodeRange($insert, $insert, range.depth);
+
+      if (range.endIndex < range.parent.childCount) {
+        range = new _prosemirrorModel.NodeRange($from, tr.doc.resolve($to.end(range.depth)), range.depth);
+      }
+
+      doJoin = true;
+    }
+
+    var wrap = (0, _prosemirrorTransform.findWrapping)(outerRange, listType, attrs, range);
+
+    if (!wrap) {
+      return false;
+    }
+
+    tr = doWrapInList(tr, range, wrap, doJoin, listType);
+    return true;
+  };
+}
+/**
+ * Internal function used by wrapInList
+ *
+ * Adapted from https://github.com/ProseMirror/prosemirror-schema-list/blob/master/src/schema-list.js#L91-L112
+ */
+
+
+function doWrapInList(tr, range, wrappers, joinBefore, listType) {
+  var content = _prosemirrorModel.Fragment.empty;
+
+  for (var i = wrappers.length - 1; i >= 0; i--) {
+    content = _prosemirrorModel.Fragment.from(wrappers[i].type.create(wrappers[i].attrs, content));
+  }
+
+  tr.step(new _prosemirrorTransform.ReplaceAroundStep(range.start - (joinBefore ? 2 : 0), range.end, range.start, range.end, new _prosemirrorModel.Slice(content, 0, 0), wrappers.length, true));
+  var found = 0;
+
+  for (var _i = 0; _i < wrappers.length; _i++) {
+    if (wrappers[_i].type === listType) {
+      found = _i + 1;
+    }
+  }
+
+  var splitDepth = wrappers.length - found;
+  var splitPos = range.start + wrappers.length - (joinBefore ? 2 : 0);
+  var parent = range.parent;
+
+  for (var _i2 = range.startIndex, e = range.endIndex, first = true; _i2 < e; _i2++, first = false) {
+    if (!first && (0, _prosemirrorTransform.canSplit)(tr.doc, splitPos, splitDepth)) {
+      tr.split(splitPos, splitDepth);
+      splitPos += 2 * splitDepth;
+    }
+
+    splitPos += parent.child(_i2).nodeSize;
+  }
+
+  return tr;
+}
+/**
+ * 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.
+ *
+ * Adapted from https://github.com/ProseMirror/prosemirror-commands/blob/master/src/commands.js#L597-L610
+ */
+
+
+function autoJoin(tr, isJoinable) {
+  if (!tr.isGeneric) {
+    return;
+  }
+
+  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 _i3 = 0; _i3 < ranges.length; _i3 += 2) {
+    var from = ranges[_i3];
+    var to = ranges[_i3 + 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 _i4 = joinable.length - 1; _i4 >= 0; _i4--) {
+    if ((0, _prosemirrorTransform.canJoin)(tr.doc, joinable[_i4])) {
+      tr.join(joinable[_i4]);
+    }
+  }
+}