@atlaskit/editor-core 162.0.1 → 163.0.0

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

@@ -29,6 +29,8 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _react = _interopRequireDefault(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _reactIntlNext = require("react-intl-next");
 
 var _utils = require("@atlaskit/editor-common/utils");
@@ -120,7 +122,9 @@ var formatting = function formatting(_ref) {
       return keymaps.toggleBold;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "**", /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _toolbarMessages.toolbarMessages.bold), "**"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "**", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _toolbarMessages.toolbarMessages.bold), "**"));
     }
   }, {
     name: formatMessage(_toolbarMessages.toolbarMessages.italic),
@@ -129,7 +133,9 @@ var formatting = function formatting(_ref) {
       return keymaps.toggleItalic;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "*", /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _toolbarMessages.toolbarMessages.italic), "*"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "*", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _toolbarMessages.toolbarMessages.italic), "*"));
     }
   }, {
     name: formatMessage(_toolbarMessages.toolbarMessages.underline),
@@ -144,7 +150,9 @@ var formatting = function formatting(_ref) {
       return keymaps.toggleStrikethrough;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "~~", /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _toolbarMessages.toolbarMessages.strike), "~~"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "~~", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _toolbarMessages.toolbarMessages.strike), "~~"));
     }
   }, {
     name: formatMessage(_toolbarMessages.toolbarMessages.subscript),
@@ -165,7 +173,11 @@ var formatting = function formatting(_ref) {
       return keymaps.toggleHeading1;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeSm, null, "#"), " ", /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "Space"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeSm
+      }, "#"), " ", (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(_messages3.messages.heading2),
@@ -174,7 +186,11 @@ var formatting = function formatting(_ref) {
       return keymaps.toggleHeading2;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "##"), " ", /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "Space"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "##"), " ", (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(_messages3.messages.heading3),
@@ -183,7 +199,11 @@ var formatting = function formatting(_ref) {
       return keymaps.toggleHeading3;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "###"), " ", /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "Space"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "###"), " ", (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(_messages3.messages.heading4),
@@ -192,7 +212,11 @@ var formatting = function formatting(_ref) {
       return keymaps.toggleHeading4;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "####"), " ", /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "Space"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "####"), " ", (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(_messages3.messages.heading5),
@@ -201,7 +225,11 @@ var formatting = function formatting(_ref) {
       return keymaps.toggleHeading5;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "#####"), " ", /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "Space"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "#####"), " ", (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(_messages3.messages.heading6),
@@ -210,7 +238,11 @@ var formatting = function formatting(_ref) {
       return keymaps.toggleHeading6;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "######"), " ", /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "Space"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "######"), " ", (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(_messages3.messages.normal),
@@ -225,7 +257,11 @@ var formatting = function formatting(_ref) {
       return keymaps.toggleOrderedList;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeSm, null, "1."), " ", /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "Space"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeSm
+      }, "1."), " ", (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(_messages.messages.unorderedList),
@@ -234,7 +270,11 @@ var formatting = function formatting(_ref) {
       return keymaps.toggleBulletList;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeSm, null, "*"), " ", /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "Space"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeSm
+      }, "*"), " ", (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(_messages3.messages.blockquote),
@@ -243,13 +283,19 @@ var formatting = function formatting(_ref) {
       return keymaps.toggleBlockQuote;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, '>'), " ", /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "Space"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, '>'), " ", (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(_messages3.messages.codeblock),
     type: 'codeBlock',
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "```"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "```"));
     }
   }, {
     name: formatMessage(_messages2.messages.horizontalRule),
@@ -258,7 +304,9 @@ var formatting = function formatting(_ref) {
       return keymaps.insertRule;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "---"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "---"));
     }
   }, {
     name: formatMessage(_messages2.messages.link),
@@ -267,7 +315,9 @@ var formatting = function formatting(_ref) {
       return keymaps.addLink;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "[", /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages2.messages.link), "](http://a.com)"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "[", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages2.messages.link), "](http://a.com)"));
     }
   }, {
     name: formatMessage(_toolbarMessages.toolbarMessages.code),
@@ -276,31 +326,45 @@ var formatting = function formatting(_ref) {
       return keymaps.toggleCode;
     },
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "`", /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _toolbarMessages.toolbarMessages.code), "`"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "`", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _toolbarMessages.toolbarMessages.code), "`"));
     }
   }, {
     name: formatMessage(_messages2.messages.action),
     type: 'taskItem',
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeSm, null, "[]"), " ", /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "Space"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeSm
+      }, "[]"), " ", (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(_messages2.messages.decision),
     type: 'decisionItem',
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeSm, null, "<>"), " ", /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "Space"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeSm
+      }, "<>"), " ", (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "Space"));
     }
   }, {
     name: formatMessage(_messages2.messages.emoji),
     type: 'emoji',
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, ":"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, ":"));
     }
   }, {
     name: formatMessage(_messages2.messages.mention),
     type: 'mention',
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "@"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "@"));
     }
   }, {
     name: formatMessage(_messages5.alignmentMessages.alignLeft),
@@ -359,7 +423,9 @@ var imageAutoFormat = {
   name: 'Image',
   type: 'image',
   autoFormatting: function autoFormatting() {
-    return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "![", /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.altText), "](http://www.image.com)"));
+    return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+      css: _styles.codeLg
+    }, "![", (0, _react2.jsx)(_reactIntlNext.FormattedMessage, messages.altText), "](http://www.image.com)"));
   }
 };
 
@@ -369,7 +435,9 @@ var quickInsertAutoFormat = function quickInsertAutoFormat(_ref3) {
     name: formatMessage(messages.quickInsert),
     type: 'quickInsert',
     autoFormatting: function autoFormatting() {
-      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_styles.CodeLg, null, "/"));
+      return (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+        css: _styles.codeLg
+      }, "/"));
     }
   };
 };
@@ -391,22 +459,25 @@ var getComponentFromKeymap = function getComponentFromKeymap(keymap) {
   }
 
   var keyParts = shortcut.replace(/\-(?=.)/g, ' + ').split(' ');
-  return /*#__PURE__*/_react.default.createElement("span", null, keyParts.map(function (part, index) {
+  return (0, _react2.jsx)("span", null, keyParts.map(function (part, index) {
     if (part === '+') {
-      return /*#__PURE__*/_react.default.createElement("span", {
+      return (0, _react2.jsx)("span", {
         key: "".concat(shortcut, "-").concat(index)
       }, ' + ');
     } else if (part === 'Cmd') {
-      return /*#__PURE__*/_react.default.createElement(_styles.CodeSm, {
+      return (0, _react2.jsx)("span", {
+        css: _styles.codeSm,
         key: "".concat(shortcut, "-").concat(index)
       }, "\u2318");
     } else if (['ctrl', 'alt', 'opt', 'shift'].indexOf(part.toLowerCase()) >= 0) {
-      return /*#__PURE__*/_react.default.createElement(_styles.CodeMd, {
+      return (0, _react2.jsx)("span", {
+        css: _styles.codeMd,
         key: "".concat(shortcut, "-").concat(index)
       }, part);
     }
 
-    return /*#__PURE__*/_react.default.createElement(_styles.CodeSm, {
+    return (0, _react2.jsx)("span", {
+      css: _styles.codeSm,
       key: "".concat(shortcut, "-").concat(index)
     }, part.toUpperCase());
   }));
@@ -419,12 +490,14 @@ var ModalHeader = (0, _reactIntlNext.injectIntl)(function (_ref4) {
   var _useModal = (0, _modalDialog.useModal)(),
       onClose = _useModal.onClose;
 
-  return /*#__PURE__*/_react.default.createElement(_styles.Header, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.editorHelp), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default // @ts-ignore
+  return (0, _react2.jsx)("div", {
+    css: _styles.header
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, messages.editorHelp), (0, _react2.jsx)("div", null, (0, _react2.jsx)(_ToolbarButton.default // @ts-ignore
   , {
     onClick: onClose,
     title: formatMessage(messages.closeHelpDialog),
     spacing: "compact",
-    iconBefore: /*#__PURE__*/_react.default.createElement(_cross.default, {
+    iconBefore: (0, _react2.jsx)(_cross.default, {
       label: formatMessage(messages.closeHelpDialog),
       size: "medium"
     })
@@ -432,7 +505,9 @@ var ModalHeader = (0, _reactIntlNext.injectIntl)(function (_ref4) {
 });
 
 var ModalFooter = function ModalFooter() {
-  return /*#__PURE__*/_react.default.createElement(_styles.Footer, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, messages.helpDialogTips, {
+  return (0, _react2.jsx)("div", {
+    css: _styles.footer
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, messages.helpDialogTips, {
     values: {
       keyMap: getComponentFromKeymap(keymaps.openHelp)
     }
@@ -490,32 +565,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.default.createElement(_modalDialog.ModalTransition, null, this.props.isVisible ? /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+      return (0, _react2.jsx)(_modalDialog.ModalTransition, null, this.props.isVisible ? (0, _react2.jsx)(_modalDialog.default, {
         width: "large",
         onClose: this.closeDialog,
         testId: "help-modal-dialog"
-      }, /*#__PURE__*/_react.default.createElement(ModalHeader, null), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_styles.ContentWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Line, null), /*#__PURE__*/_react.default.createElement(_styles.Content, null, /*#__PURE__*/_react.default.createElement(_styles.ColumnLeft, null, /*#__PURE__*/_react.default.createElement(_styles.Title, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.keyboardShortcuts)), /*#__PURE__*/_react.default.createElement("div", null, this.formatting.filter(function (form) {
+      }, (0, _react2.jsx)(ModalHeader, null), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)("div", {
+        css: _styles.contentWrapper
+      }, (0, _react2.jsx)("div", {
+        css: _styles.line
+      }), (0, _react2.jsx)("div", {
+        css: _styles.content
+      }, (0, _react2.jsx)("div", {
+        css: _styles.columnLeft
+      }, (0, _react2.jsx)("div", {
+        css: _styles.title
+      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, messages.keyboardShortcuts)), (0, _react2.jsx)("div", null, this.formatting.filter(function (form) {
         var keymap = form.keymap && form.keymap(_this2.props);
         return keymap && keymap[_utils.browser.mac ? 'mac' : 'windows'];
       }).map(function (form) {
-        return /*#__PURE__*/_react.default.createElement(_styles.Row, {
+        return (0, _react2.jsx)("div", {
+          css: _styles.row,
           key: "textFormatting-".concat(form.name)
-        }, /*#__PURE__*/_react.default.createElement("span", null, form.name), getComponentFromKeymap(form.keymap()));
+        }, (0, _react2.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.default.createElement(_styles.Row, {
+        return (0, _react2.jsx)("div", {
+          css: _styles.row,
           key: "autoFormatting-".concat(form.name)
-        }, /*#__PURE__*/_react.default.createElement("span", null, form.name), form.autoFormatting());
-      }))), /*#__PURE__*/_react.default.createElement(_styles.Line, null), /*#__PURE__*/_react.default.createElement(_styles.ColumnRight, null, /*#__PURE__*/_react.default.createElement(_styles.Title, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.markdown)), /*#__PURE__*/_react.default.createElement("div", null, this.formatting.filter(function (form) {
+        }, (0, _react2.jsx)("span", null, form.name), form.autoFormatting());
+      }))), (0, _react2.jsx)("div", {
+        css: _styles.line
+      }), (0, _react2.jsx)("div", {
+        css: _styles.columnRight
+      }, (0, _react2.jsx)("div", {
+        css: _styles.title
+      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, messages.markdown)), (0, _react2.jsx)("div", null, this.formatting.filter(function (form) {
         return shortcutNamesWithoutKeymap.indexOf(form.type) === -1;
       }).map(function (form) {
-        return form.autoFormatting && /*#__PURE__*/_react.default.createElement(_styles.Row, {
+        return form.autoFormatting && (0, _react2.jsx)("div", {
+          css: _styles.row,
           key: "autoFormatting-".concat(form.name)
-        }, /*#__PURE__*/_react.default.createElement("span", null, form.name), form.autoFormatting());
-      })))))), /*#__PURE__*/_react.default.createElement(ModalFooter, null)) : null);
+        }, (0, _react2.jsx)("span", null, form.name), form.autoFormatting());
+      })))))), (0, _react2.jsx)(ModalFooter, null)) : null);
     }
   }]);
   return HelpDialog;

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",