@atlaskit/editor-core 161.0.0 → 163.0.0

package/dist/cjs/plugins/find-replace/ui/FindReplace.js

@@ -23,7 +23,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _Find = _interopRequireDefault(require("./Find"));
 
@@ -90,9 +90,9 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
           allowMatchCase = _this$props.allowMatchCase,
           shouldMatchCase = _this$props.shouldMatchCase,
           onToggleMatchCase = _this$props.onToggleMatchCase;
-      return (0, _core.jsx)("div", {
+      return (0, _react2.jsx)("div", {
         css: _styles.wrapperStyles
-      }, (0, _core.jsx)(_Find.default, {
+      }, (0, _react2.jsx)(_Find.default, {
         allowMatchCase: allowMatchCase,
         shouldMatchCase: shouldMatchCase,
         onToggleMatchCase: onToggleMatchCase,
@@ -106,10 +106,10 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
         onFindTextfieldRefSet: this.setFindTextfieldRef,
         onCancel: onCancel,
         onArrowDown: this.setFocusToReplace
-      }), (0, _core.jsx)("hr", {
+      }), (0, _react2.jsx)("hr", {
         css: _styles.ruleStyles,
         id: "replace-hr-element"
-      }), (0, _core.jsx)(_Replace.default, {
+      }), (0, _react2.jsx)(_Replace.default, {
         canReplace: count.total > 0,
         replaceText: replaceText,
         onReplace: onReplace,

package/dist/cjs/plugins/find-replace/ui/Replace.js

@@ -23,7 +23,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
@@ -171,9 +171,9 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       var replaceText = this.state.replaceText;
       var canReplace = this.props.canReplace;
-      return (0, _core.jsx)("div", {
+      return (0, _react2.jsx)("div", {
         css: _styles.sectionWrapperStyles
-      }, (0, _core.jsx)(_textfield.default, {
+      }, (0, _react2.jsx)(_textfield.default, {
         name: "replace",
         appearance: "none",
         placeholder: this.replaceWith,
@@ -184,12 +184,12 @@ var Replace = /*#__PURE__*/function (_React$PureComponent) {
         onKeyDown: this.handleReplaceKeyDown,
         onCompositionStart: this.handleCompositionStart,
         onCompositionEnd: this.handleCompositionEnd
-      }), (0, _core.jsx)(_standardButton.default, {
+      }), (0, _react2.jsx)(_standardButton.default, {
         css: _styles.replaceSectionButtonStyles,
         testId: this.replace,
         onClick: this.handleReplaceClick,
         isDisabled: !canReplace
-      }, this.replace), (0, _core.jsx)(_standardButton.default, {
+      }, this.replace), (0, _react2.jsx)(_standardButton.default, {
         css: _styles.replaceSectionButtonStyles,
         testId: this.replaceAll,
         onClick: this.handleReplaceAllClick,

package/dist/cjs/plugins/find-replace/ui/styles.js

@@ -1,22 +1,27 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.wrapperStyles = exports.sectionWrapperStyles = exports.ruleStyles = exports.replaceSectionButtonStyles = exports.countStyles = void 0;
 
-var _core = require("@emotion/core");
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-/** @jsx jsx */
-var replaceSectionButtonStyles = (0, _core.css)({
+var _templateObject;
+
+var replaceSectionButtonStyles = (0, _react.css)({
   marginLeft: '4px'
 });
 exports.replaceSectionButtonStyles = replaceSectionButtonStyles;
-var ruleStyles = (0, _core.css)({
+var ruleStyles = (0, _react.css)({
   width: '100%',
   border: 'none',
   backgroundColor: "".concat(_colors.N30A),
@@ -25,7 +30,7 @@ var ruleStyles = (0, _core.css)({
   borderRadius: '1px'
 });
 exports.ruleStyles = ruleStyles;
-var wrapperStyles = (0, _core.css)({
+var wrapperStyles = (0, _react.css)({
   display: 'flex',
   flexDirection: 'column',
   '> *:not(#replace-hr-element)': {
@@ -33,17 +38,9 @@ var wrapperStyles = (0, _core.css)({
   }
 });
 exports.wrapperStyles = wrapperStyles;
-var sectionWrapperStyles = (0, _core.css)({
-  display: 'flex',
-  alignItems: 'column',
-  '> *': {
-    display: 'inline-flex',
-    height: '32px',
-    flex: '0 0 auto'
-  }
-});
+var sectionWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n\n  & > * {\n    display: inline-flex;\n    height: 32px;\n    flex: 0 0 auto;\n  }\n\n  & > [data-ds--text-field--container] {\n    display: flex;\n    flex: 1 1 auto;\n  }\n"])));
 exports.sectionWrapperStyles = sectionWrapperStyles;
-var countStyles = (0, _core.css)({
+var countStyles = (0, _react.css)({
   color: "".concat(_colors.N60),
   fontSize: "".concat((0, _editorSharedStyles.relativeFontSizeToBase16)(12)),
   flex: '0 0 auto',

package/dist/cjs/plugins/floating-toolbar/ui/DropdownMenu.js

@@ -25,7 +25,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -59,7 +59,7 @@ exports.menuItemDimensions = menuItemDimensions;
 
 var Spacer = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  padding: 8px;\n"])));
 
-var MenuContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", "px;\n"])), menuItemDimensions.width);
+var MenuContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", "px;\n\n  // temporary solution before we migrated off dst/item\n  & span[class^='ItemParts__Before'] {\n    margin-right: 4px;\n  }\n"])), menuItemDimensions.width);
 
 var padding = (0, _constants.gridSize)();
 var itemSpacing = (0, _constants.gridSize)() / 2;
@@ -102,9 +102,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           dispatchCommand = _this$props.dispatchCommand,
           items = _this$props.items,
           intl = _this$props.intl;
-      return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-        theme: (0, _defineProperty2.default)({}, _item.itemThemeNamespace, editorItemTheme)
-      }, /*#__PURE__*/_react.default.createElement(MenuContainer, null, items.filter(function (item) {
+      return /*#__PURE__*/_react.default.createElement(MenuContainer, null, items.filter(function (item) {
         return !item.hidden;
       }).map(function (item, idx) {
         var itemContent = /*#__PURE__*/_react.default.createElement(_item.default, {
@@ -122,7 +120,8 @@ var Dropdown = /*#__PURE__*/function (_Component) {
             hide();
           },
           "data-testid": item.testId,
-          isDisabled: item.disabled
+          isDisabled: item.disabled,
+          theme: (0, _defineProperty2.default)({}, _item.itemThemeNamespace, editorItemTheme)
         }, item.title);
 
         if (item.tooltip) {
@@ -133,7 +132,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         }
 
         return itemContent;
-      })));
+      }));
     }
   }, {
     key: "renderSelected",

package/dist/cjs/plugins/floating-toolbar/ui/styles.js

@@ -66,7 +66,13 @@ var getStyles = function getStyles(property, _ref) {
 var iconOnlySpacing = {
   '&&': {
     padding: '0px',
-    '&[href]': {
+
+    /**
+      Increased specificity here because css for .hyperlink-open-link defined in
+      packages/editor/editor-core/src/ui/ContentStyles/index.tsx file
+      overrides padding left-right 2px with 4px.
+    */
+    '&&[href]': {
       padding: '0 2px'
     }
   },

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

@@ -9,7 +9,7 @@ exports.gridStyles = exports.GRID_GUTTER = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = require("styled-components");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -19,5 +19,5 @@ var _templateObject;
 
 var GRID_GUTTER = 12;
 exports.GRID_GUTTER = GRID_GUTTER;
-var gridStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .gridParent {\n    width: calc(100% + ", "px);\n    margin-left: -", "px;\n    margin-right: -", "px;\n    transform: scale(1);\n    z-index: ", ";\n  }\n\n  .gridContainer {\n    position: fixed;\n    height: 100vh;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  .gridLine {\n    border-left: 1px solid ", ";\n    display: inline-block;\n    box-sizing: border-box;\n    height: 100%;\n    margin-left: -1px;\n\n    transition: border-color 0.15s linear;\n    z-index: 0;\n  }\n\n  .highlight {\n    border-left: 1px solid ", ";\n  }\n"])), GRID_GUTTER * 2, GRID_GUTTER, GRID_GUTTER, _editorSharedStyles.akEditorGridLineZIndex, _colors.N30A, _colors.B200);
+var gridStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .gridParent {\n    width: calc(100% + ", "px);\n    margin-left: -", "px;\n    margin-right: -", "px;\n    transform: scale(1);\n    z-index: ", ";\n  }\n\n  .gridContainer {\n    position: fixed;\n    height: 100vh;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  .gridLine {\n    border-left: 1px solid ", ";\n    display: inline-block;\n    box-sizing: border-box;\n    height: 100%;\n    margin-left: -1px;\n\n    transition: border-color 0.15s linear;\n    z-index: 0;\n  }\n\n  .highlight {\n    border-left: 1px solid ", ";\n  }\n"])), GRID_GUTTER * 2, GRID_GUTTER, GRID_GUTTER, _editorSharedStyles.akEditorGridLineZIndex, _colors.N30A, _colors.B200);
 exports.gridStyles = gridStyles;

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;