@atlaskit/editor-core 151.2.0 → 152.0.1

package/dist/cjs/plugins/find-replace/FindReplaceToolbarButtonWithState.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _types = require("./types");
+
+var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"));
+
+var _commandsWithAnalytics = require("./commands-with-analytics");
+
+var _commands = require("./commands");
+
+var _FindReplaceToolbarButton = _interopRequireDefault(require("./ui/FindReplaceToolbarButton"));
+
+var _analytics = require("../analytics");
+
+var _featureFlagsContext = require("../feature-flags-context");
+
+var FindReplaceToolbarButtonWithState = function FindReplaceToolbarButtonWithState(props) {
+  var popupsBoundariesElement = props.popupsBoundariesElement,
+      popupsMountPoint = props.popupsMountPoint,
+      popupsScrollableElement = props.popupsScrollableElement,
+      isToolbarReducedSpacing = props.isToolbarReducedSpacing,
+      editorView = props.editorView,
+      containerElement = props.containerElement,
+      dispatchAnalyticsEvent = props.dispatchAnalyticsEvent;
+
+  if (!editorView) {
+    return null;
+  } // we need the editor to be in focus for scrollIntoView() to work
+  // so we focus it while we run the command, then put focus back into
+  // whatever element was previously focused in find replace component
+
+
+  var runWithEditorFocused = function runWithEditorFocused(fn) {
+    var activeElement = document.activeElement;
+    editorView.focus();
+    fn();
+    activeElement === null || activeElement === void 0 ? void 0 : activeElement.focus();
+  };
+
+  var dispatchCommand = function dispatchCommand(cmd) {
+    var state = editorView.state,
+        dispatch = editorView.dispatch;
+    cmd(state, dispatch);
+  };
+
+  var handleActivate = function handleActivate() {
+    runWithEditorFocused(function () {
+      return dispatchCommand((0, _commandsWithAnalytics.activateWithAnalytics)({
+        triggerMethod: _analytics.TRIGGER_METHOD.TOOLBAR
+      }));
+    });
+  };
+
+  var handleFind = function handleFind(keyword) {
+    runWithEditorFocused(function () {
+      return dispatchCommand((0, _commandsWithAnalytics.findWithAnalytics)({
+        editorView: editorView,
+        containerElement: containerElement,
+        keyword: keyword
+      }));
+    });
+  };
+
+  var handleFindNext = function handleFindNext(_ref) {
+    var triggerMethod = _ref.triggerMethod;
+    runWithEditorFocused(function () {
+      return dispatchCommand((0, _commandsWithAnalytics.findNextWithAnalytics)({
+        triggerMethod: triggerMethod
+      }));
+    });
+  };
+
+  var handleFindPrev = function handleFindPrev(_ref2) {
+    var triggerMethod = _ref2.triggerMethod;
+    runWithEditorFocused(function () {
+      return dispatchCommand((0, _commandsWithAnalytics.findPrevWithAnalytics)({
+        triggerMethod: triggerMethod
+      }));
+    });
+  };
+
+  var handleReplace = function handleReplace(_ref3) {
+    var triggerMethod = _ref3.triggerMethod,
+        replaceText = _ref3.replaceText;
+    runWithEditorFocused(function () {
+      return dispatchCommand((0, _commandsWithAnalytics.replaceWithAnalytics)({
+        triggerMethod: triggerMethod,
+        replaceText: replaceText
+      }));
+    });
+  };
+
+  var handleReplaceAll = function handleReplaceAll(_ref4) {
+    var replaceText = _ref4.replaceText;
+    runWithEditorFocused(function () {
+      return dispatchCommand((0, _commandsWithAnalytics.replaceAllWithAnalytics)({
+        replaceText: replaceText
+      }));
+    });
+  };
+
+  var handleFindBlur = function handleFindBlur() {
+    dispatchCommand((0, _commands.blur)());
+  };
+
+  var handleCancel = function handleCancel(_ref5) {
+    var triggerMethod = _ref5.triggerMethod;
+    dispatchCommand((0, _commandsWithAnalytics.cancelSearchWithAnalytics)({
+      triggerMethod: triggerMethod
+    }));
+    editorView.focus();
+  };
+
+  var handleToggleMatchCase = function handleToggleMatchCase() {
+    dispatchCommand((0, _commands.toggleMatchCase)());
+  };
+
+  var _getFeatureFlags = (0, _featureFlagsContext.getFeatureFlags)(editorView.state),
+      findReplaceMatchCase = _getFeatureFlags.findReplaceMatchCase;
+
+  return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
+    debounce: false,
+    plugins: {
+      findReplaceState: _types.findReplacePluginKey
+    },
+    render: function render(_ref6) {
+      var findReplaceState = _ref6.findReplaceState;
+
+      if (!findReplaceState) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_FindReplaceToolbarButton.default, {
+        allowMatchCase: findReplaceMatchCase,
+        shouldMatchCase: findReplaceState.shouldMatchCase,
+        onToggleMatchCase: handleToggleMatchCase,
+        isActive: findReplaceState.isActive,
+        findText: findReplaceState.findText,
+        index: findReplaceState.index,
+        numMatches: findReplaceState.matches.length,
+        replaceText: findReplaceState.replaceText,
+        shouldFocus: findReplaceState.shouldFocus,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsMountPoint: popupsMountPoint,
+        popupsScrollableElement: popupsScrollableElement,
+        isReducedSpacing: !!isToolbarReducedSpacing,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        onFindBlur: handleFindBlur,
+        onCancel: handleCancel,
+        onActivate: handleActivate,
+        onFind: handleFind,
+        onFindNext: handleFindNext,
+        onFindPrev: handleFindPrev,
+        onReplace: handleReplace,
+        onReplaceAll: handleReplaceAll,
+        takeFullWidth: !!props.takeFullWidth
+      });
+    }
+  });
+};
+
+var _default = FindReplaceToolbarButtonWithState;
+exports.default = _default;

package/dist/cjs/plugins/find-replace/index.js

@@ -11,21 +11,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _plugin = require("./plugin");
 
-var _types = require("./types");
-
 var _keymap = _interopRequireDefault(require("./keymap"));
 
-var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"));
-
-var _commandsWithAnalytics = require("./commands-with-analytics");
-
-var _commands = require("./commands");
-
-var _FindReplaceToolbarButton = _interopRequireDefault(require("./ui/FindReplaceToolbarButton"));
-
-var _analytics = require("../analytics");
-
-var _featureFlagsContext = require("../feature-flags-context");
+var _FindReplaceToolbarButtonWithState = _interopRequireDefault(require("./FindReplaceToolbarButtonWithState"));
 
 var findReplacePlugin = function findReplacePlugin(props) {
   return {
@@ -53,131 +41,20 @@ var findReplacePlugin = function findReplacePlugin(props) {
           containerElement = _ref2.containerElement,
           dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
 
-      // we need the editor to be in focus for scrollIntoView() to work
-      // so we focus it while we run the command, then put focus back into
-      // whatever element was previously focused in find replace component
-      var runWithEditorFocused = function runWithEditorFocused(fn) {
-        var activeElement = document.activeElement;
-        editorView.focus();
-        fn();
-        activeElement === null || activeElement === void 0 ? void 0 : activeElement.focus();
-      };
-
-      var dispatchCommand = function dispatchCommand(cmd) {
-        var state = editorView.state,
-            dispatch = editorView.dispatch;
-        cmd(state, dispatch);
-      };
-
-      var handleActivate = function handleActivate() {
-        runWithEditorFocused(function () {
-          return dispatchCommand((0, _commandsWithAnalytics.activateWithAnalytics)({
-            triggerMethod: _analytics.TRIGGER_METHOD.TOOLBAR
-          }));
-        });
-      };
-
-      var handleFind = function handleFind(keyword) {
-        runWithEditorFocused(function () {
-          return dispatchCommand((0, _commandsWithAnalytics.findWithAnalytics)({
-            editorView: editorView,
-            containerElement: containerElement,
-            keyword: keyword
-          }));
-        });
-      };
-
-      var handleFindNext = function handleFindNext(_ref3) {
-        var triggerMethod = _ref3.triggerMethod;
-        runWithEditorFocused(function () {
-          return dispatchCommand((0, _commandsWithAnalytics.findNextWithAnalytics)({
-            triggerMethod: triggerMethod
-          }));
+      if (props.twoLineEditorToolbar) {
+        return null;
+      } else {
+        return /*#__PURE__*/_react.default.createElement(_FindReplaceToolbarButtonWithState.default, {
+          popupsBoundariesElement: popupsBoundariesElement,
+          popupsMountPoint: popupsMountPoint,
+          popupsScrollableElement: popupsScrollableElement,
+          isToolbarReducedSpacing: isToolbarReducedSpacing,
+          editorView: editorView,
+          containerElement: containerElement,
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+          takeFullWidth: props.takeFullWidth
         });
-      };
-
-      var handleFindPrev = function handleFindPrev(_ref4) {
-        var triggerMethod = _ref4.triggerMethod;
-        runWithEditorFocused(function () {
-          return dispatchCommand((0, _commandsWithAnalytics.findPrevWithAnalytics)({
-            triggerMethod: triggerMethod
-          }));
-        });
-      };
-
-      var handleReplace = function handleReplace(_ref5) {
-        var triggerMethod = _ref5.triggerMethod,
-            replaceText = _ref5.replaceText;
-        runWithEditorFocused(function () {
-          return dispatchCommand((0, _commandsWithAnalytics.replaceWithAnalytics)({
-            triggerMethod: triggerMethod,
-            replaceText: replaceText
-          }));
-        });
-      };
-
-      var handleReplaceAll = function handleReplaceAll(_ref6) {
-        var replaceText = _ref6.replaceText;
-        runWithEditorFocused(function () {
-          return dispatchCommand((0, _commandsWithAnalytics.replaceAllWithAnalytics)({
-            replaceText: replaceText
-          }));
-        });
-      };
-
-      var handleFindBlur = function handleFindBlur() {
-        dispatchCommand((0, _commands.blur)());
-      };
-
-      var handleCancel = function handleCancel(_ref7) {
-        var triggerMethod = _ref7.triggerMethod;
-        dispatchCommand((0, _commandsWithAnalytics.cancelSearchWithAnalytics)({
-          triggerMethod: triggerMethod
-        }));
-        editorView.focus();
-      };
-
-      var handleToggleMatchCase = function handleToggleMatchCase() {
-        dispatchCommand((0, _commands.toggleMatchCase)());
-      };
-
-      var _getFeatureFlags = (0, _featureFlagsContext.getFeatureFlags)(editorView.state),
-          findReplaceMatchCase = _getFeatureFlags.findReplaceMatchCase;
-
-      return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
-        debounce: false,
-        plugins: {
-          findReplaceState: _types.findReplacePluginKey
-        },
-        render: function render(_ref8) {
-          var findReplaceState = _ref8.findReplaceState;
-          return /*#__PURE__*/_react.default.createElement(_FindReplaceToolbarButton.default, {
-            allowMatchCase: findReplaceMatchCase,
-            shouldMatchCase: findReplaceState.shouldMatchCase,
-            onToggleMatchCase: handleToggleMatchCase,
-            isActive: findReplaceState.isActive,
-            findText: findReplaceState.findText,
-            index: findReplaceState.index,
-            numMatches: findReplaceState.matches.length,
-            replaceText: findReplaceState.replaceText,
-            shouldFocus: findReplaceState.shouldFocus,
-            popupsBoundariesElement: popupsBoundariesElement,
-            popupsMountPoint: popupsMountPoint,
-            popupsScrollableElement: popupsScrollableElement,
-            isReducedSpacing: isToolbarReducedSpacing,
-            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-            onFindBlur: handleFindBlur,
-            onCancel: handleCancel,
-            onActivate: handleActivate,
-            onFind: handleFind,
-            onFindNext: handleFindNext,
-            onFindPrev: handleFindPrev,
-            onReplace: handleReplace,
-            onReplaceAll: handleReplaceAll,
-            takeFullWidth: props.takeFullWidth
-          });
-        }
-      });
+      }
     }
   };
 };

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

@@ -23,6 +23,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
+var _core = require("@emotion/core");
+
 var _reactIntl = require("react-intl");
 
 var _close = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/close"));
@@ -180,16 +182,16 @@ var Find = /*#__PURE__*/function (_React$Component) {
     _this.findNext = formatMessage(messages.findNext);
     _this.findPrevious = formatMessage(messages.findPrevious);
     _this.matchCase = formatMessage(messages.matchCase);
-    _this.matchCaseIcon = /*#__PURE__*/_react.default.createElement(_keyboard.default, {
+    _this.matchCaseIcon = (0, _core.jsx)(_keyboard.default, {
       label: _this.matchCase
     });
-    _this.findNextIcon = /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+    _this.findNextIcon = (0, _core.jsx)(_chevronDown.default, {
       label: _this.findNext
     });
-    _this.findPrevIcon = /*#__PURE__*/_react.default.createElement(_chevronUp.default, {
+    _this.findPrevIcon = (0, _core.jsx)(_chevronUp.default, {
       label: _this.findPrevious
     });
-    _this.closeIcon = /*#__PURE__*/_react.default.createElement(_close.default, {
+    _this.closeIcon = (0, _core.jsx)(_close.default, {
       label: _this.closeFindReplaceDialog
     }); // We locally manage the value of the input inside this component in order to support compositions.
     // This requires some additional work inside componentDidUpdate to ensure we support changes that
@@ -235,7 +237,9 @@ var Find = /*#__PURE__*/function (_React$Component) {
         selectedMatchPosition: count.index + 1,
         totalResultsCount: count.total
       });
-      return /*#__PURE__*/_react.default.createElement(_styles.SectionWrapper, null, /*#__PURE__*/_react.default.createElement(_textfield.default, {
+      return (0, _core.jsx)("div", {
+        css: _styles.sectionWrapperStyles
+      }, (0, _core.jsx)(_textfield.default, {
         name: "find",
         appearance: "none",
         placeholder: this.find,
@@ -247,24 +251,27 @@ var Find = /*#__PURE__*/function (_React$Component) {
         onBlur: this.props.onFindBlur,
         onCompositionStart: this.handleCompositionStart,
         onCompositionEnd: this.handleCompositionEnd
-      }), findText && /*#__PURE__*/_react.default.createElement(_styles.Count, null, count.total === 0 ? this.noResultsFound : resultsCount), allowMatchCase && /*#__PURE__*/_react.default.createElement(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+      }), findText && (0, _core.jsx)("span", {
+        "data-testid": "textfield-count",
+        css: _styles.countStyles
+      }, count.total === 0 ? this.noResultsFound : resultsCount), allowMatchCase && (0, _core.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
         title: this.matchCase,
         icon: this.matchCaseIcon,
         onClick: this.handleMatchCaseClick,
         isPressed: shouldMatchCase
-      }), /*#__PURE__*/_react.default.createElement(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+      }), (0, _core.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
         title: this.findNext,
         icon: this.findNextIcon,
         keymapDescription: 'Enter',
         onClick: this.handleFindNextClick,
         disabled: count.total <= 1
-      }), /*#__PURE__*/_react.default.createElement(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+      }), (0, _core.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
         title: this.findPrevious,
         icon: this.findPrevIcon,
         keymapDescription: 'Shift Enter',
         onClick: this.handleFindPrevClick,
         disabled: count.total <= 1
-      }), /*#__PURE__*/_react.default.createElement(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
+      }), (0, _core.jsx)(_FindReplaceTooltipButton.FindReplaceTooltipButton, {
         title: this.closeFindReplaceDialog,
         icon: this.closeIcon,
         keymapDescription: 'Escape',

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

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

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

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

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

@@ -1,46 +1,55 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Count = exports.SectionWrapper = exports.Wrapper = exports.Rule = exports.ReplaceSectionButton = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
+exports.countStyles = exports.sectionWrapperStyles = exports.wrapperStyles = exports.ruleStyles = exports.replaceSectionButtonStyles = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
-// This is a workaround because React.memo does not play well with styled-components
-function StyledComponentsButton(props) {
-  return /*#__PURE__*/_react.default.createElement(_standardButton.default, props);
-}
-
-var ReplaceSectionButton = (0, _styledComponents.default)(StyledComponentsButton)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* increase specificity to override default Button styles */\n  && {\n    margin-left: 4px;\n  }\n"])));
-exports.ReplaceSectionButton = ReplaceSectionButton;
-
-var Rule = _styledComponents.default.hr(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  border: none;\n  background-color: ", ";\n  margin: 4px 0px;\n  height: 1px;\n  border-radius: 1px;\n"])), _colors.N30A);
-
-exports.Rule = Rule;
-
-var Wrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  > *:not(", ") {\n    margin: 0px 4px;\n  }\n"])), Rule);
-
-exports.Wrapper = Wrapper;
-
-var SectionWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  > * {\n    flex: 0 0 auto;\n    display: inline-flex;\n    height: 32px;\n  }\n"])));
-
-exports.SectionWrapper = SectionWrapper;
-
-var Count = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  flex: 0 0 auto;\n  justify-content: center;\n  align-items: center;\n  margin-left: 4px;\n  margin-right: 8px;\n"])), _colors.N60, (0, _editorSharedStyles.relativeFontSizeToBase16)(12));
-
-exports.Count = Count;
+/** @jsx jsx */
+var replaceSectionButtonStyles = (0, _core.css)({
+  marginLeft: '4px'
+});
+exports.replaceSectionButtonStyles = replaceSectionButtonStyles;
+var ruleStyles = (0, _core.css)({
+  width: '100%',
+  border: 'none',
+  backgroundColor: "".concat(_colors.N30A),
+  margin: '4px 0px',
+  height: '1px',
+  borderRadius: '1px'
+});
+exports.ruleStyles = ruleStyles;
+var wrapperStyles = (0, _core.css)({
+  display: 'flex',
+  flexDirection: 'column',
+  '> *:not(#replace-hr-element)': {
+    margin: '0px 4px'
+  }
+});
+exports.wrapperStyles = wrapperStyles;
+var sectionWrapperStyles = (0, _core.css)({
+  display: 'flex',
+  alignItems: 'column',
+  '> *': {
+    display: 'inline-flex',
+    height: '32px',
+    flex: '0 0 auto'
+  }
+});
+exports.sectionWrapperStyles = sectionWrapperStyles;
+var countStyles = (0, _core.css)({
+  color: "".concat(_colors.N60),
+  fontSize: "".concat((0, _editorSharedStyles.relativeFontSizeToBase16)(12)),
+  flex: '0 0 auto',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginLeft: '4px',
+  marginRight: '8px'
+});
+exports.countStyles = countStyles;

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

@@ -25,10 +25,15 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _EditorEmojiAddIcon = _interopRequireDefault(require("./EditorEmojiAddIcon"));
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 // helps adjusts position of popup
-var EmojiPickerButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
+var EmojiPickerButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"]))); // helps to vertically align emoji picker
+// both top and bottom margin should be 2px
+// https://product-fabric.atlassian.net/browse/CETI-148
+
+
+var EmojiPickerWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: -12px;\n  margin-top: -4px;\n"])));
 
 var EmojiPickerButton = function EmojiPickerButton(props) {
   var buttonRef = _react.default.useRef(null);
@@ -46,6 +51,7 @@ var EmojiPickerButton = function EmojiPickerButton(props) {
 
   var updateEmoji = function updateEmoji(emoji) {
     setIsPopupOpen(false);
+    props.editorView && props.editorView.focus();
     props.onChange && props.onChange(emoji);
   };
 
@@ -73,11 +79,11 @@ var EmojiPickerButton = function EmojiPickerButton(props) {
       fitHeight: 350,
       fitWidth: 350,
       offset: [0, 10]
-    }, /*#__PURE__*/_react.default.createElement(_editorCommon.WithProviders, {
+    }, /*#__PURE__*/_react.default.createElement(EmojiPickerWrapper, null, /*#__PURE__*/_react.default.createElement(_editorCommon.WithProviders, {
       providers: ['emojiProvider'],
       providerFactory: props.providerFactory,
       renderNode: renderPicker
-    }));
+    })));
   };
 
   var title = props.title || '';

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

@@ -308,7 +308,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
             if (item.selectType === 'emoji') {
               return /*#__PURE__*/_react.default.createElement(_EmojiPickerButton.EmojiPickerButton, {
                 key: idx,
-                view: editorView,
+                editorView: editorView,
                 title: item.title,
                 providerFactory: providerFactory,
                 isSelected: item.selected,

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPlugin = createPlugin;
+exports.default = void 0;
+
+var _adfSchema = require("@atlaskit/adf-schema");
+
+var _prosemirrorState = require("prosemirror-state");
+
+var _pluginKey = require("./plugin-key");
+
+function createPlugin() {
+  return new _prosemirrorState.Plugin({
+    key: _pluginKey.pluginKey
+  });
+}
+
+var fragmentMarkPlugin = function fragmentMarkPlugin() {
+  return {
+    name: 'fragmentPlugin',
+    marks: function marks() {
+      return [{
+        name: 'fragment',
+        mark: _adfSchema.fragment
+      }];
+    }
+  };
+};
+
+var _default = fragmentMarkPlugin;
+exports.default = _default;

package/dist/cjs/plugins/fragment/plugin-key.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = void 0;
+
+var _prosemirrorState = require("prosemirror-state");
+
+var pluginKey = new _prosemirrorState.PluginKey('fragmentMarkPlugin');
+exports.pluginKey = pluginKey;