@atlaskit/editor-core 162.0.1 → 163.0.0

package/dist/esm/plugins/help-dialog/ui/index.js

@@ -12,12 +12,14 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl-next';
 import { browser } from '@atlaskit/editor-common/utils';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import AkModalDialog, { ModalTransition, ModalBody, useModal } from '@atlaskit/modal-dialog';
-import { Header, Footer, ContentWrapper, Line, Content, ColumnRight, ColumnLeft, Row, CodeSm, CodeMd, CodeLg, Title } from './styles';
+import { header, footer, contentWrapper, line, content, columnRight, columnLeft, row, codeSm, codeMd, codeLg, title } from './styles';
 import * as keymaps from '../../../keymaps';
 import ToolbarButton from '../../../ui/ToolbarButton';
 import { toolbarMessages } from '../../text-formatting/ui/Toolbar/toolbar-messages';
@@ -80,7 +82,9 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleBold;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "**", /*#__PURE__*/React.createElement(FormattedMessage, toolbarMessages.bold), "**"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "**", jsx(FormattedMessage, toolbarMessages.bold), "**"));
     }
   }, {
     name: formatMessage(toolbarMessages.italic),
@@ -89,7 +93,9 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleItalic;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "*", /*#__PURE__*/React.createElement(FormattedMessage, toolbarMessages.italic), "*"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "*", jsx(FormattedMessage, toolbarMessages.italic), "*"));
     }
   }, {
     name: formatMessage(toolbarMessages.underline),
@@ -104,7 +110,9 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleStrikethrough;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "~~", /*#__PURE__*/React.createElement(FormattedMessage, toolbarMessages.strike), "~~"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "~~", jsx(FormattedMessage, toolbarMessages.strike), "~~"));
     }
   }, {
     name: formatMessage(toolbarMessages.subscript),
@@ -125,7 +133,11 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleHeading1;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeSm, null, "#"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeSm
+      }, "#"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(blockTypeMessages.heading2),
@@ -134,7 +146,11 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleHeading2;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "##"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "##"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(blockTypeMessages.heading3),
@@ -143,7 +159,11 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleHeading3;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "###"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "###"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(blockTypeMessages.heading4),
@@ -152,7 +172,11 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleHeading4;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "####"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "####"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(blockTypeMessages.heading5),
@@ -161,7 +185,11 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleHeading5;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "#####"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "#####"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(blockTypeMessages.heading6),
@@ -170,7 +198,11 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleHeading6;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "######"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "######"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(blockTypeMessages.normal),
@@ -185,7 +217,11 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleOrderedList;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeSm, null, "1."), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeSm
+      }, "1."), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(listMessages.unorderedList),
@@ -194,7 +230,11 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleBulletList;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeSm, null, "*"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeSm
+      }, "*"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(blockTypeMessages.blockquote),
@@ -203,13 +243,19 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleBlockQuote;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, '>'), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, '>'), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(blockTypeMessages.codeblock),
     type: 'codeBlock',
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "```"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "```"));
     }
   }, {
     name: formatMessage(insertBlockMessages.horizontalRule),
@@ -218,7 +264,9 @@ export var formatting = function formatting(_ref) {
       return keymaps.insertRule;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "---"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "---"));
     }
   }, {
     name: formatMessage(insertBlockMessages.link),
@@ -227,7 +275,9 @@ export var formatting = function formatting(_ref) {
       return keymaps.addLink;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "[", /*#__PURE__*/React.createElement(FormattedMessage, insertBlockMessages.link), "](http://a.com)"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "[", jsx(FormattedMessage, insertBlockMessages.link), "](http://a.com)"));
     }
   }, {
     name: formatMessage(toolbarMessages.code),
@@ -236,31 +286,45 @@ export var formatting = function formatting(_ref) {
       return keymaps.toggleCode;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "`", /*#__PURE__*/React.createElement(FormattedMessage, toolbarMessages.code), "`"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "`", jsx(FormattedMessage, toolbarMessages.code), "`"));
     }
   }, {
     name: formatMessage(insertBlockMessages.action),
     type: 'taskItem',
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeSm, null, "[]"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeSm
+      }, "[]"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(insertBlockMessages.decision),
     type: 'decisionItem',
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeSm, null, "<>"), " ", /*#__PURE__*/React.createElement(CodeLg, null, "Space"));
+      return jsx("span", null, jsx("span", {
+        css: codeSm
+      }, "<>"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(insertBlockMessages.emoji),
     type: 'emoji',
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, ":"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, ":"));
     }
   }, {
     name: formatMessage(insertBlockMessages.mention),
     type: 'mention',
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "@"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "@"));
     }
   }, {
     name: formatMessage(alignmentMessages.alignLeft),
@@ -317,7 +381,9 @@ var imageAutoFormat = {
   name: 'Image',
   type: 'image',
   autoFormatting: function autoFormatting() {
-    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "![", /*#__PURE__*/React.createElement(FormattedMessage, messages.altText), "](http://www.image.com)"));
+    return jsx("span", null, jsx("span", {
+      css: codeLg
+    }, "![", jsx(FormattedMessage, messages.altText), "](http://www.image.com)"));
   }
 };
 
@@ -327,7 +393,9 @@ var quickInsertAutoFormat = function quickInsertAutoFormat(_ref3) {
     name: formatMessage(messages.quickInsert),
     type: 'quickInsert',
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "/"));
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "/"));
     }
   };
 };
@@ -346,22 +414,25 @@ export var getComponentFromKeymap = function getComponentFromKeymap(keymap) {
   }
 
   var keyParts = shortcut.replace(/\-(?=.)/g, ' + ').split(' ');
-  return /*#__PURE__*/React.createElement("span", null, keyParts.map(function (part, index) {
+  return jsx("span", null, keyParts.map(function (part, index) {
     if (part === '+') {
-      return /*#__PURE__*/React.createElement("span", {
+      return jsx("span", {
         key: "".concat(shortcut, "-").concat(index)
       }, ' + ');
     } else if (part === 'Cmd') {
-      return /*#__PURE__*/React.createElement(CodeSm, {
+      return jsx("span", {
+        css: codeSm,
         key: "".concat(shortcut, "-").concat(index)
       }, "\u2318");
     } else if (['ctrl', 'alt', 'opt', 'shift'].indexOf(part.toLowerCase()) >= 0) {
-      return /*#__PURE__*/React.createElement(CodeMd, {
+      return jsx("span", {
+        css: codeMd,
         key: "".concat(shortcut, "-").concat(index)
       }, part);
     }
 
-    return /*#__PURE__*/React.createElement(CodeSm, {
+    return jsx("span", {
+      css: codeSm,
       key: "".concat(shortcut, "-").concat(index)
     }, part.toUpperCase());
   }));
@@ -372,12 +443,14 @@ var ModalHeader = injectIntl(function (_ref4) {
   var _useModal = useModal(),
       onClose = _useModal.onClose;
 
-  return /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.editorHelp), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ToolbarButton // @ts-ignore
+  return jsx("div", {
+    css: header
+  }, jsx(FormattedMessage, messages.editorHelp), jsx("div", null, jsx(ToolbarButton // @ts-ignore
   , {
     onClick: onClose,
     title: formatMessage(messages.closeHelpDialog),
     spacing: "compact",
-    iconBefore: /*#__PURE__*/React.createElement(CrossIcon, {
+    iconBefore: jsx(CrossIcon, {
       label: formatMessage(messages.closeHelpDialog),
       size: "medium"
     })
@@ -385,7 +458,9 @@ var ModalHeader = injectIntl(function (_ref4) {
 });
 
 var ModalFooter = function ModalFooter() {
-  return /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.helpDialogTips, {
+  return jsx("div", {
+    css: footer
+  }, jsx(FormattedMessage, _extends({}, messages.helpDialogTips, {
     values: {
       keyMap: getComponentFromKeymap(keymaps.openHelp)
     }
@@ -447,32 +522,51 @@ var HelpDialog = /*#__PURE__*/function (_React$Component) {
           imageEnabled = _this$props.imageEnabled,
           quickInsertEnabled = _this$props.quickInsertEnabled;
       this.formatting = getSupportedFormatting(editorView.state.schema, intl, imageEnabled, quickInsertEnabled);
-      return /*#__PURE__*/React.createElement(ModalTransition, null, this.props.isVisible ? /*#__PURE__*/React.createElement(AkModalDialog, {
+      return jsx(ModalTransition, null, this.props.isVisible ? jsx(AkModalDialog, {
         width: "large",
         onClose: this.closeDialog,
         testId: "help-modal-dialog"
-      }, /*#__PURE__*/React.createElement(ModalHeader, null), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(ContentWrapper, null, /*#__PURE__*/React.createElement(Line, null), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(ColumnLeft, null, /*#__PURE__*/React.createElement(Title, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.keyboardShortcuts)), /*#__PURE__*/React.createElement("div", null, this.formatting.filter(function (form) {
+      }, jsx(ModalHeader, null), jsx(ModalBody, null, jsx("div", {
+        css: contentWrapper
+      }, jsx("div", {
+        css: line
+      }), jsx("div", {
+        css: content
+      }, jsx("div", {
+        css: columnLeft
+      }, jsx("div", {
+        css: title
+      }, jsx(FormattedMessage, messages.keyboardShortcuts)), jsx("div", null, this.formatting.filter(function (form) {
         var keymap = form.keymap && form.keymap(_this2.props);
         return keymap && keymap[browser.mac ? 'mac' : 'windows'];
       }).map(function (form) {
-        return /*#__PURE__*/React.createElement(Row, {
+        return jsx("div", {
+          css: row,
           key: "textFormatting-".concat(form.name)
-        }, /*#__PURE__*/React.createElement("span", null, form.name), getComponentFromKeymap(form.keymap()));
+        }, jsx("span", null, form.name), getComponentFromKeymap(form.keymap()));
       }), this.formatting.filter(function (form) {
         return shortcutNamesWithoutKeymap.indexOf(form.type) !== -1;
       }).filter(function (form) {
         return form.autoFormatting;
       }).map(function (form) {
-        return /*#__PURE__*/React.createElement(Row, {
+        return jsx("div", {
+          css: row,
           key: "autoFormatting-".concat(form.name)
-        }, /*#__PURE__*/React.createElement("span", null, form.name), form.autoFormatting());
-      }))), /*#__PURE__*/React.createElement(Line, null), /*#__PURE__*/React.createElement(ColumnRight, null, /*#__PURE__*/React.createElement(Title, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.markdown)), /*#__PURE__*/React.createElement("div", null, this.formatting.filter(function (form) {
+        }, jsx("span", null, form.name), form.autoFormatting());
+      }))), jsx("div", {
+        css: line
+      }), jsx("div", {
+        css: columnRight
+      }, jsx("div", {
+        css: title
+      }, jsx(FormattedMessage, messages.markdown)), jsx("div", null, this.formatting.filter(function (form) {
         return shortcutNamesWithoutKeymap.indexOf(form.type) === -1;
       }).map(function (form) {
-        return form.autoFormatting && /*#__PURE__*/React.createElement(Row, {
+        return form.autoFormatting && jsx("div", {
+          css: row,
           key: "autoFormatting-".concat(form.name)
-        }, /*#__PURE__*/React.createElement("span", null, form.name), form.autoFormatting());
-      })))))), /*#__PURE__*/React.createElement(ModalFooter, null)) : null);
+        }, jsx("span", null, form.name), form.autoFormatting());
+      })))))), jsx(ModalFooter, null)) : null);
     }
   }]);
 

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

@@ -2,19 +2,19 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { akEditorUnitZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-export var Header = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), akEditorUnitZIndex, relativeFontSizeToBase16(24), colors.N400, colors.N0, borderRadius());
-export var Footer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: 24px;\n  text-align: right;\n  box-shadow: 'none';\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(14), colors.N300);
-export var ContentWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 18px 20px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), borderRadius(), colors.N400, colors.N0);
-export var Line = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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"])));
-export var Content = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  min-width: 524px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n"])));
-export var ColumnLeft = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 44%;\n"])));
-export var ColumnRight = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 44%;\n"])));
-export var Row = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin: 20px 0;\n  display: flex;\n  justify-content: space-between;\n"])));
-export var Title = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: 400;\n"])), relativeFontSizeToBase16(18));
-export var CodeSm = styled.span(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\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, borderRadius());
-export var CodeMd = styled.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\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, borderRadius());
-export var CodeLg = styled.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\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, borderRadius());
+export var header = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), akEditorUnitZIndex, relativeFontSizeToBase16(24), colors.N400, colors.N0, borderRadius());
+export var footer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  z-index: ", ";\n  font-size: ", ";\n  line-height: 20px;\n  color: ", ";\n  padding: 24px;\n  text-align: right;\n  box-shadow: 'none';\n"])), akEditorUnitZIndex, relativeFontSizeToBase16(14), colors.N300);
+export var contentWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 18px 20px;\n  border-bottom-right-radius: ", "px;\n  overflow: auto;\n  position: relative;\n  color: ", ";\n  background-color: ", ";\n"])), borderRadius(), colors.N400, colors.N0);
+export var line = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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"])));
+export var content = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  min-width: 524px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n"])));
+export var columnLeft = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 44%;\n"])));
+export var columnRight = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 44%;\n"])));
+export var row = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin: 20px 0;\n  display: flex;\n  justify-content: space-between;\n"])));
+export var title = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: 400;\n"])), relativeFontSizeToBase16(18));
+export var codeSm = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\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, borderRadius());
+export var codeMd = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\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, borderRadius());
+export var codeLg = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\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, borderRadius());

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

@@ -1,9 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 
-/* eslint-disable @atlaskit/design-system/use-visually-hidden */
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { linkSharedStyle } from '@atlaskit/editor-common/styles';
 export var linkStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", "\n  }\n"])), linkSharedStyle);
 /**
@@ -11,5 +10,4 @@ export var linkStyles = css(_templateObject || (_templateObject = _taggedTemplat
  * to provide more context to a non-sighted user.
  */
 
-export var visuallyHiddenStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])));
-export var ScreenReaderText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n"])), visuallyHiddenStyles);
+export var visuallyHiddenStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])));

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

@@ -17,7 +17,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import EditorAlignLeftIcon from '@atlaskit/icon/glyph/editor/align-left';
@@ -40,7 +42,7 @@ import debounce from 'lodash/debounce';
 import { mapContentTypeToIcon, sha1, wordCount } from './utils';
 import { hideLinkToolbar } from '../../commands';
 import { hideLinkToolbar as cardHideLinkToolbar } from '../../../card/pm-plugins/actions';
-import { ScreenReaderText } from '../../styles';
+import { visuallyHiddenStyles } from '../../styles';
 import { browser } from '@atlaskit/editor-common/utils';
 import { transformTimeStamp } from '../../../../ui/LinkSearch/transformTimeStamp';
 import Announcer from '../../../../utils/announcer/announcer';
@@ -80,7 +82,7 @@ export var messages = defineMessages({
     description: 'aria label for a link'
   }
 });
-var defaultIcon = /*#__PURE__*/React.createElement(Page16Icon, {
+var defaultIcon = jsx(Page16Icon, {
   label: 'page'
 });
 
@@ -932,24 +934,25 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
       // for details: https://a11y-internal.atlassian.net/browse/AK-740
 
       var screenReaderText = browser.safari && this.getScreenReaderText();
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: "recent-list"
-      }, /*#__PURE__*/React.createElement(Container, {
+      }, jsx(Container, {
         provider: !!activityProvider,
         innerRef: this.wrapperRef
-      }, /*#__PURE__*/React.createElement(UrlInputWrapper, null, /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+      }, jsx(UrlInputWrapper, null, jsx(IconWrapper, null, jsx(Tooltip, {
         content: formatLinkAddressText
-      }, /*#__PURE__*/React.createElement(LinkIcon, {
+      }, jsx(LinkIcon, {
         label: formatLinkAddressText
-      }))), screenReaderText && /*#__PURE__*/React.createElement(Announcer, {
+      }))), screenReaderText && jsx(Announcer, {
         ariaLive: "assertive",
         text: screenReaderText,
         ariaRelevant: "additions",
         delay: 250
-      }), /*#__PURE__*/React.createElement(ScreenReaderText, {
+      }), jsx("div", {
+        css: visuallyHiddenStyles,
         "aria-hidden": "true",
         id: screenReaderDescriptionId
-      }, formatMessage(messages.searchLinkAriaDescription)), /*#__PURE__*/React.createElement(PanelTextInput, {
+      }, formatMessage(messages.searchLinkAriaDescription)), jsx(PanelTextInput, {
         role: "combobox",
         ariaExpanded: true,
         ariaActiveDescendant: ariaActiveDescendant,
@@ -969,17 +972,17 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         onCancel: this.handleCancel,
         defaultValue: displayUrl,
         onKeyDown: this.handleKeyDown
-      }), displayUrl && /*#__PURE__*/React.createElement(Tooltip, {
+      }), displayUrl && jsx(Tooltip, {
         content: formatClearLinkText
-      }, /*#__PURE__*/React.createElement(ClearText, {
+      }, jsx(ClearText, {
         onClick: this.handleClearText
-      }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
+      }, jsx(CrossCircleIcon, {
         label: formatClearLinkText
-      })))), /*#__PURE__*/React.createElement(TextInputWrapper, null, /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+      })))), jsx(TextInputWrapper, null, jsx(IconWrapper, null, jsx(Tooltip, {
         content: formatDisplayText
-      }, /*#__PURE__*/React.createElement(EditorAlignLeftIcon, {
+      }, jsx(EditorAlignLeftIcon, {
         label: formatDisplayText
-      }))), /*#__PURE__*/React.createElement(PanelTextInput, {
+      }))), jsx(PanelTextInput, {
         ref: function ref(ele) {
           return _this2.displayTextInputContainer = ele;
         },
@@ -991,20 +994,21 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         defaultValue: displayText,
         onSubmit: this.handleSubmit,
         onKeyDown: this.handleKeyDown
-      }), displayText && /*#__PURE__*/React.createElement(Tooltip, {
+      }), displayText && jsx(Tooltip, {
         content: formatMessage(messages.clearText)
-      }, /*#__PURE__*/React.createElement(ClearText, {
+      }, jsx(ClearText, {
         onClick: this.handleClearDisplayText,
         onKeyDown: this.handleClearTextKeyDown
-      }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
+      }, jsx(CrossCircleIcon, {
         label: formatMessage(messages.clearText)
-      })))), /*#__PURE__*/React.createElement(ScreenReaderText, {
+      })))), jsx("div", {
+        css: visuallyHiddenStyles,
         "aria-live": "polite",
         "aria-atomic": "true",
         id: "fabric.editor.hyperlink.suggested.results"
       }, displayUrl && formatMessage(messages.searchLinkResults, {
         count: items.length
-      })), /*#__PURE__*/React.createElement(LinkSearchList, {
+      })), jsx(LinkSearchList, {
         ariaControls: "fabric.editor.hyperlink.suggested.results",
         id: linkSearchListId,
         role: "listbox",

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

@@ -2,18 +2,25 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3;
 
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { JiraIcon } from '@atlaskit/logo/jira-icon';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30, N50 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-var WrapperNode = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), N30, N50, borderRadius(), relativeFontSizeToBase16(13), N50);
-var JiraChildNode = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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 = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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 = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), N30, N50, borderRadius(), relativeFontSizeToBase16(13), N50);
+var jiraChildNode = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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 = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])));
 export default function JIRAIssueNode(props) {
   var issueKey = props.node.attrs.issueKey;
-  return /*#__PURE__*/React.createElement(WrapperNode, null, /*#__PURE__*/React.createElement(SvgChildNode, null, /*#__PURE__*/React.createElement(JiraIcon, {
+  return jsx("span", {
+    css: wrapperNode,
+    "data-testid": "jira-issue-node"
+  }, jsx("span", {
+    css: svgChildNode
+  }, jsx(JiraIcon, {
     size: "small"
-  })), /*#__PURE__*/React.createElement(JiraChildNode, null, issueKey));
+  })), jsx("span", {
+    css: jiraChildNode
+  }, issueKey));
 }

package/dist/esm/plugins/list/commands/index.js

@@ -5,6 +5,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) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { Fragment, Slice } from 'prosemirror-model';
+import { TextSelection } from 'prosemirror-state';
 import * as baseCommand from 'prosemirror-commands';
 import { hasParentNodeOfType, findPositionOfNodeBefore } from 'prosemirror-utils';
 import { hasVisibleContent, isNodeEmpty } from '../../../utils/document';
@@ -327,6 +328,12 @@ var joinToPreviousListItem = function joinToPreviousListItem(state, dispatch) {
       }
 
       if (dispatch) {
+        var _tr$doc$resolve$nodeB;
+
+        if (!((_tr$doc$resolve$nodeB = tr.doc.resolve($lastNode.pos).nodeBefore) !== null && _tr$doc$resolve$nodeB !== void 0 && _tr$doc$resolve$nodeB.isBlock) || tr.doc.resolve($lastNode.pos).nodeBefore === null) {
+          tr = tr.setSelection(TextSelection.near(tr.doc.resolve(tr.mapping.map($cut.pos)), -1));
+        }
+
         dispatch(tr.scrollIntoView());
       }
 

package/dist/esm/plugins/list/pm-plugins/main.js

@@ -51,6 +51,12 @@ export var getDecorations = function getDecorations(doc) {
       decorations.push(Decoration.node(from, to, {
         'data-indent-level': "".concat(depth)
       }));
+
+      if (node.childCount >= 100) {
+        decorations.push(Decoration.node(from, to, {
+          'data-child-count': '100+'
+        }));
+      }
     }
   });
   return DecorationSet.empty.add(doc, decorations);