@atlaskit/editor-core 151.2.0 → 152.0.1

package/dist/esm/nodeviews/SelectionBasedNodeView.js

@@ -97,6 +97,13 @@ export var SelectionBasedNodeView = /*#__PURE__*/function (_ReactNodeView) {
       return _this.isSelectedNode(_this.view.state.selection) || _this.isSelectionInsideNode(from, to);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "nodeInsideSelection", function () {
+      var selection = _this.view.state.selection;
+      var from = selection.from,
+          to = selection.to;
+      return _this.isSelectedNode(selection) || _this.isNodeInsideSelection(from, to);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onSelectionChange", function () {
       _this.update(_this.node, []);
     });

package/dist/esm/plugins/analytics/types/enums.js

@@ -55,6 +55,7 @@ export var ACTION;
   ACTION["INITIALISED"] = "initialised";
   ACTION["INPUT_PERF_SAMPLING"] = "inputPerfSampling";
   ACTION["INSERTED"] = "inserted";
+  ACTION["INVALID_DOCUMENT_ENCOUNTERED"] = "invalidDocumentEncountered";
   ACTION["INVOKED"] = "invoked";
   ACTION["LANGUAGE_SELECTED"] = "languageSelected";
   ACTION["LIST_ITEM_JOINED"] = "listItemJoined";

package/dist/esm/plugins/annotation/utils.js

@@ -264,7 +264,7 @@ export var isSelectionValid = function isSelectionValid(state) {
     return AnnotationSelectionType.DISABLED;
   }
 
-  if (disallowOnWhitespace && hasWhitespaceNode(selection)) {
+  if (disallowOnWhitespace && hasInvalidWhitespaceNode(selection)) {
     return AnnotationSelectionType.INVALID;
   }
 
@@ -314,16 +314,27 @@ function isEmptyTextSelection(selection, schema) {
  */
 
 
-export function hasWhitespaceNode(selection) {
-  var foundWhitespace = false;
-  selection.content().content.descendants(function (node) {
+export function hasInvalidWhitespaceNode(selection) {
+  var foundInvalidWhitespace = false;
+  var content = selection.content().content;
+  content.descendants(function (node) {
     if (node.textContent.trim() === '') {
-      foundWhitespace = true;
+      // Trailing new lines do not result in the annotation spanning into
+      // the trailing new line so can be ignored when looking for invalid
+      // whitespace nodes.
+      var nodeIsTrailingNewLine = // it is the final node
+      node.eq(content.lastChild) && // and there are multiple nodes
+      !node.eq(content.firstChild) && // and it is a paragraph node
+      node.type.name === 'paragraph';
+
+      if (!nodeIsTrailingNewLine) {
+        foundInvalidWhitespace = true;
+      }
     }
 
-    return !foundWhitespace;
+    return !foundInvalidWhitespace;
   });
-  return foundWhitespace;
+  return foundInvalidWhitespace;
 }
 /*
  * verifies if node contains annotation mark

package/dist/esm/plugins/avatar-group/index.js

@@ -17,7 +17,8 @@ var avatarGroup = function avatarGroup(props) {
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         editorView: editorView,
         eventDispatcher: eventDispatcher,
-        collabEdit: props.collabEdit
+        collabEdit: props.collabEdit,
+        takeFullWidth: props.takeFullWidth
       });
     }
   };

package/dist/esm/plugins/avatar-group/ui/AvatarGroupPluginWrapper.js

@@ -6,7 +6,9 @@ import React, { useEffect } from 'react';
 import AvatarsWithPluginState from '../../collab-edit/ui/avatars-with-plugin-state';
 import styled from 'styled-components';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '../../analytics';
-var ToolbarButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n  justify-content: flex-end;\n  align-items: center;\n  & > div {\n    margin-right: 0;\n  }\n"])));
+var ToolbarButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: ", ";\n  justify-content: flex-end;\n  align-items: center;\n  & > div {\n    margin-right: 0;\n  }\n"])), function (props) {
+  return props.takeFullWidth ? 1 : 0;
+});
 export var AvatarGroupPluginWrapper = function AvatarGroupPluginWrapper(props) {
   var dispatchAnalyticsEvent = props.dispatchAnalyticsEvent;
   useEffect(function () {
@@ -23,7 +25,8 @@ export var AvatarGroupPluginWrapper = function AvatarGroupPluginWrapper(props) {
   }, [dispatchAnalyticsEvent]);
   return /*#__PURE__*/React.createElement(ToolbarButtonWrapper, {
     "aria-label": "Editors",
-    "data-testid": 'avatar-group-in-plugin'
+    "data-testid": 'avatar-group-in-plugin',
+    takeFullWidth: props.takeFullWidth
   }, /*#__PURE__*/React.createElement(AvatarsWithPluginState, {
     editorView: props.editorView,
     eventDispatcher: props.eventDispatcher,

package/dist/esm/plugins/before-primaryToolbar/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BeforePrimaryToolbarWrapper } from './ui/BeforePrimaryToolbarWrapper';
+
+var beforePrimaryToolbar = function beforePrimaryToolbar(props) {
+  return {
+    name: 'beforePrimaryToolbar',
+    primaryToolbarComponent: function primaryToolbarComponent() {
+      return /*#__PURE__*/React.createElement(BeforePrimaryToolbarWrapper, {
+        beforePrimaryToolbarComponents: props.beforePrimaryToolbarComponents
+      });
+    }
+  };
+};
+
+export default beforePrimaryToolbar;

package/dist/esm/plugins/before-primaryToolbar/ui/BeforePrimaryToolbarWrapper.js

@@ -0,0 +1,12 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import React from 'react';
+import styled from 'styled-components';
+export var BeforePrimaryToolbarPluginWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: 8px;\n  flex-grow: 1;\n  justify-content: flex-end;\n  align-items: center;\n"])));
+export var BeforePrimaryToolbarWrapper = function BeforePrimaryToolbarWrapper(props) {
+  return /*#__PURE__*/React.createElement(BeforePrimaryToolbarPluginWrapper, {
+    "data-testid": 'before-primary-toolbar-components-plugin'
+  }, props.beforePrimaryToolbarComponents);
+};

package/dist/esm/plugins/extension/extension-api.js

@@ -1,5 +1,6 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 import { Fragment, Mark } from 'prosemirror-model';
+import { NodeSelection } from 'prosemirror-state';
 import { insertMacroFromMacroBrowser } from '../macro';
 import { pluginKey as macroPluginKey } from '../macro/plugin-key';
 import { setEditingContextToContextPanel } from './commands';
@@ -43,7 +44,7 @@ var extensionAPICallPayload = function extensionAPICallPayload(functionName) {
 
 export var createExtensionAPI = function createExtensionAPI(options) {
   var doc = {
-    insertAfter: function insertAfter(localId, adf) {
+    insertAfter: function insertAfter(localId, adf, opt) {
       var editorView = options.editorView;
       var dispatch = editorView.dispatch; // Be extra cautious since 3rd party devs can use regular JS without type safety
 
@@ -82,7 +83,8 @@ export var createExtensionAPI = function createExtensionAPI(options) {
         throw new Error('insertAfter(): Could not create a node for given ADFEntity.');
       }
 
-      tr.insert(nodePos.pos + nodePos.node.nodeSize, newNode); // Validate if the document is valid at this point
+      var insertPosition = nodePos.pos + nodePos.node.nodeSize;
+      tr.insert(insertPosition, newNode); // Validate if the document is valid at this point
 
       try {
         tr.doc.check();
@@ -126,6 +128,11 @@ export var createExtensionAPI = function createExtensionAPI(options) {
         };
         addAnalytics(state, tr, payload);
       });
+
+      if (opt && opt.allowSelectionToNewNode) {
+        tr.setSelection(new NodeSelection(tr.doc.resolve(insertPosition)));
+      }
+
       dispatch(tr);
     },
     scrollTo: function scrollTo(localId) {

package/dist/esm/plugins/extension/ui/styles.js

@@ -4,4 +4,4 @@ var _templateObject;
 
 import { css } from 'styled-components';
 import { blockNodesVerticalMargin, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-export var extensionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .extensionView-content-wrap,\n  .bodiedExtensionView-content-wrap {\n    margin: ", " 0;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    &:not(.danger).", " {\n      & > span > .extension-container {\n        ", "\n      }\n    }\n\n    &.danger > span > .extension-container {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n\n    &.inline {\n      word-wrap: break-all;\n    }\n  }\n\n  .extensionView-content-wrap .extension-container {\n    overflow: hidden;\n  }\n"])), blockNodesVerticalMargin, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground);
+export var extensionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .extensionView-content-wrap,\n  .bodiedExtensionView-content-wrap {\n    margin: ", " 0;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    &:not(.danger).", " {\n      & > span > .extension-container {\n        ", "\n      }\n    }\n\n    &.danger > span > .extension-container {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n\n    &.inline {\n      word-wrap: break-all;\n    }\n  }\n\n  .extensionView-content-wrap .extension-container {\n    overflow: hidden;\n  }\n\n  .bodiedExtensionView-content-wrap\n    .extensionView-content-wrap\n    .extension-container {\n    width: 100%;\n  }\n"])), blockNodesVerticalMargin, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground);

package/dist/esm/plugins/feature-flags-context/feature-flags-from-props.js

@@ -13,7 +13,7 @@ import { browser } from '@atlaskit/editor-common';
  */
 
 export function createFeatureFlagsFromProps(props) {
-  var _props$allowTextColor, _props$performanceTra, _props$performanceTra2, _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$allowTables, _props$featureFlags4, _props$featureFlags5, _props$allowTables2, _props$featureFlags6, _props$featureFlags7, _props$allowTables3, _props$featureFlags8, _props$featureFlags9, _props$allowTables4, _props$featureFlags10, _props$featureFlags11, _props$allowTables5, _props$allowExtension, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$featureFlags28, _props$featureFlags29;
+  var _props$allowTextColor, _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$allowTables, _props$featureFlags4, _props$featureFlags5, _props$allowTables2, _props$featureFlags6, _props$featureFlags7, _props$allowTables3, _props$featureFlags8, _props$featureFlags9, _props$allowTables4, _props$featureFlags10, _props$featureFlags11, _props$allowTables5, _props$allowExtension, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$featureFlags28, _props$featureFlags29, _props$featureFlags30, _props$featureFlags31;
 
   var normalizedFeatureFlags = normalizeFeatureFlags(props.featureFlags);
   return _objectSpread(_objectSpread({}, normalizedFeatureFlags), {}, {
@@ -26,6 +26,7 @@ export function createFeatureFlagsFromProps(props) {
     findReplaceMatchCase: _typeof(props.allowFindReplace) === 'object' && Boolean(props.allowFindReplace.allowMatchCase),
     keyboardAccessibleDatepicker: typeof props.allowKeyboardAccessibleDatepicker === 'boolean' ? props.allowKeyboardAccessibleDatepicker : false,
     addColumnWithCustomStep: !props.allowTables || typeof props.allowTables === 'boolean' ? false : Boolean(props.allowTables.allowAddColumnWithCustomStep),
+    singleLayout: _typeof(props.allowLayouts) === 'object' && !!((_props$allowLayouts = props.allowLayouts) !== null && _props$allowLayouts !== void 0 && _props$allowLayouts.UNSAFE_allowSingleColumnLayout),
     undoRedoButtons: props.UNSAFE_allowUndoRedoButtons,
     catchAllTracking: (_props$performanceTra = props.performanceTracking) === null || _props$performanceTra === void 0 ? void 0 : (_props$performanceTra2 = _props$performanceTra.catchAllTracking) === null || _props$performanceTra2 === void 0 ? void 0 : _props$performanceTra2.enabled,
     nextEmojiNodeView: ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.nextEmojiNodeView) === true,
@@ -44,6 +45,7 @@ export function createFeatureFlagsFromProps(props) {
     collabAvatarScroll: Boolean(typeof ((_props$featureFlags24 = props.featureFlags) === null || _props$featureFlags24 === void 0 ? void 0 : _props$featureFlags24.collabAvatarScroll) === 'boolean' ? !!((_props$featureFlags25 = props.featureFlags) !== null && _props$featureFlags25 !== void 0 && _props$featureFlags25.collabAvatarScroll) : false),
     ufo: Boolean(typeof ((_props$featureFlags26 = props.featureFlags) === null || _props$featureFlags26 === void 0 ? void 0 : _props$featureFlags26.ufo) === 'boolean' ? !!((_props$featureFlags27 = props.featureFlags) !== null && _props$featureFlags27 !== void 0 && _props$featureFlags27.ufo) : false),
     codeBlockSyntaxHighlighting: Boolean(typeof normalizedFeatureFlags.codeBlockSyntaxHighlighting === 'boolean' ? !!normalizedFeatureFlags.codeBlockSyntaxHighlighting && !browser.safari : false),
-    codeBidiWarnings: Boolean(typeof ((_props$featureFlags28 = props.featureFlags) === null || _props$featureFlags28 === void 0 ? void 0 : _props$featureFlags28.codeBidiWarnings) === 'boolean' ? !!((_props$featureFlags29 = props.featureFlags) !== null && _props$featureFlags29 !== void 0 && _props$featureFlags29.codeBidiWarnings) : true)
+    twoLineEditorToolbar: Boolean(typeof ((_props$featureFlags28 = props.featureFlags) === null || _props$featureFlags28 === void 0 ? void 0 : _props$featureFlags28.twoLineEditorToolbar) === 'boolean' ? !!((_props$featureFlags29 = props.featureFlags) !== null && _props$featureFlags29 !== void 0 && _props$featureFlags29.twoLineEditorToolbar) : false),
+    codeBidiWarnings: Boolean(typeof ((_props$featureFlags30 = props.featureFlags) === null || _props$featureFlags30 === void 0 ? void 0 : _props$featureFlags30.codeBidiWarnings) === 'boolean' ? !!((_props$featureFlags31 = props.featureFlags) !== null && _props$featureFlags31 !== void 0 && _props$featureFlags31.codeBidiWarnings) : true)
   });
 }

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

@@ -0,0 +1,155 @@
+import React from 'react';
+import { findReplacePluginKey } from './types';
+import WithPluginState from '../../ui/WithPluginState';
+import { cancelSearchWithAnalytics, replaceWithAnalytics, replaceAllWithAnalytics, findWithAnalytics, findNextWithAnalytics, findPrevWithAnalytics, activateWithAnalytics } from './commands-with-analytics';
+import { blur, toggleMatchCase } from './commands';
+import FindReplaceToolbarButton from './ui/FindReplaceToolbarButton';
+import { TRIGGER_METHOD } from '../analytics';
+import { getFeatureFlags } from '../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(activateWithAnalytics({
+        triggerMethod: TRIGGER_METHOD.TOOLBAR
+      }));
+    });
+  };
+
+  var handleFind = function handleFind(keyword) {
+    runWithEditorFocused(function () {
+      return dispatchCommand(findWithAnalytics({
+        editorView: editorView,
+        containerElement: containerElement,
+        keyword: keyword
+      }));
+    });
+  };
+
+  var handleFindNext = function handleFindNext(_ref) {
+    var triggerMethod = _ref.triggerMethod;
+    runWithEditorFocused(function () {
+      return dispatchCommand(findNextWithAnalytics({
+        triggerMethod: triggerMethod
+      }));
+    });
+  };
+
+  var handleFindPrev = function handleFindPrev(_ref2) {
+    var triggerMethod = _ref2.triggerMethod;
+    runWithEditorFocused(function () {
+      return dispatchCommand(findPrevWithAnalytics({
+        triggerMethod: triggerMethod
+      }));
+    });
+  };
+
+  var handleReplace = function handleReplace(_ref3) {
+    var triggerMethod = _ref3.triggerMethod,
+        replaceText = _ref3.replaceText;
+    runWithEditorFocused(function () {
+      return dispatchCommand(replaceWithAnalytics({
+        triggerMethod: triggerMethod,
+        replaceText: replaceText
+      }));
+    });
+  };
+
+  var handleReplaceAll = function handleReplaceAll(_ref4) {
+    var replaceText = _ref4.replaceText;
+    runWithEditorFocused(function () {
+      return dispatchCommand(replaceAllWithAnalytics({
+        replaceText: replaceText
+      }));
+    });
+  };
+
+  var handleFindBlur = function handleFindBlur() {
+    dispatchCommand(blur());
+  };
+
+  var handleCancel = function handleCancel(_ref5) {
+    var triggerMethod = _ref5.triggerMethod;
+    dispatchCommand(cancelSearchWithAnalytics({
+      triggerMethod: triggerMethod
+    }));
+    editorView.focus();
+  };
+
+  var handleToggleMatchCase = function handleToggleMatchCase() {
+    dispatchCommand(toggleMatchCase());
+  };
+
+  var _getFeatureFlags = getFeatureFlags(editorView.state),
+      findReplaceMatchCase = _getFeatureFlags.findReplaceMatchCase;
+
+  return /*#__PURE__*/React.createElement(WithPluginState, {
+    debounce: false,
+    plugins: {
+      findReplaceState: findReplacePluginKey
+    },
+    render: function render(_ref6) {
+      var findReplaceState = _ref6.findReplaceState;
+
+      if (!findReplaceState) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement(FindReplaceToolbarButton, {
+        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
+      });
+    }
+  });
+};
+
+export default FindReplaceToolbarButtonWithState;

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

@@ -1,13 +1,7 @@
 import React from 'react';
 import { createPlugin } from './plugin';
-import { findReplacePluginKey } from './types';
 import keymapPlugin from './keymap';
-import WithPluginState from '../../ui/WithPluginState';
-import { cancelSearchWithAnalytics, replaceWithAnalytics, replaceAllWithAnalytics, findWithAnalytics, findNextWithAnalytics, findPrevWithAnalytics, activateWithAnalytics } from './commands-with-analytics';
-import { blur, toggleMatchCase } from './commands';
-import FindReplaceToolbarButton from './ui/FindReplaceToolbarButton';
-import { TRIGGER_METHOD } from '../analytics';
-import { getFeatureFlags } from '../feature-flags-context';
+import FindReplaceToolbarButtonWithState from './FindReplaceToolbarButtonWithState';
 export var findReplacePlugin = function findReplacePlugin(props) {
   return {
     name: 'findReplace',
@@ -34,131 +28,20 @@ export 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(activateWithAnalytics({
-            triggerMethod: TRIGGER_METHOD.TOOLBAR
-          }));
-        });
-      };
-
-      var handleFind = function handleFind(keyword) {
-        runWithEditorFocused(function () {
-          return dispatchCommand(findWithAnalytics({
-            editorView: editorView,
-            containerElement: containerElement,
-            keyword: keyword
-          }));
-        });
-      };
-
-      var handleFindNext = function handleFindNext(_ref3) {
-        var triggerMethod = _ref3.triggerMethod;
-        runWithEditorFocused(function () {
-          return dispatchCommand(findNextWithAnalytics({
-            triggerMethod: triggerMethod
-          }));
-        });
-      };
-
-      var handleFindPrev = function handleFindPrev(_ref4) {
-        var triggerMethod = _ref4.triggerMethod;
-        runWithEditorFocused(function () {
-          return dispatchCommand(findPrevWithAnalytics({
-            triggerMethod: triggerMethod
-          }));
-        });
-      };
-
-      var handleReplace = function handleReplace(_ref5) {
-        var triggerMethod = _ref5.triggerMethod,
-            replaceText = _ref5.replaceText;
-        runWithEditorFocused(function () {
-          return dispatchCommand(replaceWithAnalytics({
-            triggerMethod: triggerMethod,
-            replaceText: replaceText
-          }));
-        });
-      };
-
-      var handleReplaceAll = function handleReplaceAll(_ref6) {
-        var replaceText = _ref6.replaceText;
-        runWithEditorFocused(function () {
-          return dispatchCommand(replaceAllWithAnalytics({
-            replaceText: replaceText
-          }));
+      if (props.twoLineEditorToolbar) {
+        return null;
+      } else {
+        return /*#__PURE__*/React.createElement(FindReplaceToolbarButtonWithState, {
+          popupsBoundariesElement: popupsBoundariesElement,
+          popupsMountPoint: popupsMountPoint,
+          popupsScrollableElement: popupsScrollableElement,
+          isToolbarReducedSpacing: isToolbarReducedSpacing,
+          editorView: editorView,
+          containerElement: containerElement,
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+          takeFullWidth: props.takeFullWidth
         });
-      };
-
-      var handleFindBlur = function handleFindBlur() {
-        dispatchCommand(blur());
-      };
-
-      var handleCancel = function handleCancel(_ref7) {
-        var triggerMethod = _ref7.triggerMethod;
-        dispatchCommand(cancelSearchWithAnalytics({
-          triggerMethod: triggerMethod
-        }));
-        editorView.focus();
-      };
-
-      var handleToggleMatchCase = function handleToggleMatchCase() {
-        dispatchCommand(toggleMatchCase());
-      };
-
-      var _getFeatureFlags = getFeatureFlags(editorView.state),
-          findReplaceMatchCase = _getFeatureFlags.findReplaceMatchCase;
-
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        debounce: false,
-        plugins: {
-          findReplaceState: findReplacePluginKey
-        },
-        render: function render(_ref8) {
-          var findReplaceState = _ref8.findReplaceState;
-          return /*#__PURE__*/React.createElement(FindReplaceToolbarButton, {
-            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/esm/plugins/find-replace/ui/Find.js

@@ -10,14 +10,16 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/core';
 import { defineMessages, injectIntl } from 'react-intl';
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
 import MatchCaseIcon from '@atlaskit/icon/glyph/emoji/keyboard';
 import Textfield from '@atlaskit/textfield';
-import { SectionWrapper, Count } from './styles';
+import { countStyles, sectionWrapperStyles } from './styles';
 import { TRIGGER_METHOD } from '../../analytics/types';
 import { FindReplaceTooltipButton } from './FindReplaceTooltipButton';
 var messages = defineMessages({
@@ -170,16 +172,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.createElement(MatchCaseIcon, {
+    _this.matchCaseIcon = jsx(MatchCaseIcon, {
       label: _this.matchCase
     });
-    _this.findNextIcon = /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    _this.findNextIcon = jsx(ChevronDownIcon, {
       label: _this.findNext
     });
-    _this.findPrevIcon = /*#__PURE__*/React.createElement(ChevronUpIcon, {
+    _this.findPrevIcon = jsx(ChevronUpIcon, {
       label: _this.findPrevious
     });
-    _this.closeIcon = /*#__PURE__*/React.createElement(EditorCloseIcon, {
+    _this.closeIcon = jsx(EditorCloseIcon, {
       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
@@ -225,7 +227,9 @@ var Find = /*#__PURE__*/function (_React$Component) {
         selectedMatchPosition: count.index + 1,
         totalResultsCount: count.total
       });
-      return /*#__PURE__*/React.createElement(SectionWrapper, null, /*#__PURE__*/React.createElement(Textfield, {
+      return jsx("div", {
+        css: sectionWrapperStyles
+      }, jsx(Textfield, {
         name: "find",
         appearance: "none",
         placeholder: this.find,
@@ -237,24 +241,27 @@ var Find = /*#__PURE__*/function (_React$Component) {
         onBlur: this.props.onFindBlur,
         onCompositionStart: this.handleCompositionStart,
         onCompositionEnd: this.handleCompositionEnd
-      }), findText && /*#__PURE__*/React.createElement(Count, null, count.total === 0 ? this.noResultsFound : resultsCount), allowMatchCase && /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
+      }), findText && jsx("span", {
+        "data-testid": "textfield-count",
+        css: countStyles
+      }, count.total === 0 ? this.noResultsFound : resultsCount), allowMatchCase && jsx(FindReplaceTooltipButton, {
         title: this.matchCase,
         icon: this.matchCaseIcon,
         onClick: this.handleMatchCaseClick,
         isPressed: shouldMatchCase
-      }), /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
+      }), jsx(FindReplaceTooltipButton, {
         title: this.findNext,
         icon: this.findNextIcon,
         keymapDescription: 'Enter',
         onClick: this.handleFindNextClick,
         disabled: count.total <= 1
-      }), /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
+      }), jsx(FindReplaceTooltipButton, {
         title: this.findPrevious,
         icon: this.findPrevIcon,
         keymapDescription: 'Shift Enter',
         onClick: this.handleFindPrevClick,
         disabled: count.total <= 1
-      }), /*#__PURE__*/React.createElement(FindReplaceTooltipButton, {
+      }), jsx(FindReplaceTooltipButton, {
         title: this.closeFindReplaceDialog,
         icon: this.closeIcon,
         keymapDescription: 'Escape',

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

@@ -10,10 +10,12 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/core';
 import Find from './Find';
 import Replace from './Replace';
-import { Rule, Wrapper } from './styles';
+import { ruleStyles, wrapperStyles } from './styles';
 
 var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(FindReplace, _React$PureComponent);
@@ -77,7 +79,9 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
           allowMatchCase = _this$props.allowMatchCase,
           shouldMatchCase = _this$props.shouldMatchCase,
           onToggleMatchCase = _this$props.onToggleMatchCase;
-      return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Find, {
+      return jsx("div", {
+        css: wrapperStyles
+      }, jsx(Find, {
         allowMatchCase: allowMatchCase,
         shouldMatchCase: shouldMatchCase,
         onToggleMatchCase: onToggleMatchCase,
@@ -91,7 +95,10 @@ var FindReplace = /*#__PURE__*/function (_React$PureComponent) {
         onFindTextfieldRefSet: this.setFindTextfieldRef,
         onCancel: onCancel,
         onArrowDown: this.setFocusToReplace
-      }), /*#__PURE__*/React.createElement(Rule, null), /*#__PURE__*/React.createElement(Replace, {
+      }), jsx("hr", {
+        css: ruleStyles,
+        id: "replace-hr-element"
+      }), jsx(Replace, {
         canReplace: count.total > 0,
         replaceText: replaceText,
         onReplace: onReplace,