@atlaskit/editor-core 151.1.2 → 151.3.1

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

@@ -6,7 +6,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;
 
   const normalizedFeatureFlags = normalizeFeatureFlags(props.featureFlags);
   return { ...normalizedFeatureFlags,
@@ -19,6 +19,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,
@@ -37,6 +38,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/es2019/plugins/find-replace/FindReplaceToolbarButtonWithState.js

@@ -0,0 +1,152 @@
+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';
+
+const FindReplaceToolbarButtonWithState = props => {
+  const {
+    popupsBoundariesElement,
+    popupsMountPoint,
+    popupsScrollableElement,
+    isToolbarReducedSpacing,
+    editorView,
+    containerElement,
+    dispatchAnalyticsEvent
+  } = props;
+
+  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
+
+
+  const runWithEditorFocused = fn => {
+    const activeElement = document.activeElement;
+    editorView.focus();
+    fn();
+    activeElement === null || activeElement === void 0 ? void 0 : activeElement.focus();
+  };
+
+  const dispatchCommand = cmd => {
+    const {
+      state,
+      dispatch
+    } = editorView;
+    cmd(state, dispatch);
+  };
+
+  const handleActivate = () => {
+    runWithEditorFocused(() => dispatchCommand(activateWithAnalytics({
+      triggerMethod: TRIGGER_METHOD.TOOLBAR
+    })));
+  };
+
+  const handleFind = keyword => {
+    runWithEditorFocused(() => dispatchCommand(findWithAnalytics({
+      editorView,
+      containerElement,
+      keyword
+    })));
+  };
+
+  const handleFindNext = ({
+    triggerMethod
+  }) => {
+    runWithEditorFocused(() => dispatchCommand(findNextWithAnalytics({
+      triggerMethod
+    })));
+  };
+
+  const handleFindPrev = ({
+    triggerMethod
+  }) => {
+    runWithEditorFocused(() => dispatchCommand(findPrevWithAnalytics({
+      triggerMethod
+    })));
+  };
+
+  const handleReplace = ({
+    triggerMethod,
+    replaceText
+  }) => {
+    runWithEditorFocused(() => dispatchCommand(replaceWithAnalytics({
+      triggerMethod,
+      replaceText
+    })));
+  };
+
+  const handleReplaceAll = ({
+    replaceText
+  }) => {
+    runWithEditorFocused(() => dispatchCommand(replaceAllWithAnalytics({
+      replaceText
+    })));
+  };
+
+  const handleFindBlur = () => {
+    dispatchCommand(blur());
+  };
+
+  const handleCancel = ({
+    triggerMethod
+  }) => {
+    dispatchCommand(cancelSearchWithAnalytics({
+      triggerMethod
+    }));
+    editorView.focus();
+  };
+
+  const handleToggleMatchCase = () => {
+    dispatchCommand(toggleMatchCase());
+  };
+
+  const {
+    findReplaceMatchCase
+  } = getFeatureFlags(editorView.state);
+  return /*#__PURE__*/React.createElement(WithPluginState, {
+    debounce: false,
+    plugins: {
+      findReplaceState: findReplacePluginKey
+    },
+    render: ({
+      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/es2019/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 const findReplacePlugin = props => {
   return {
     name: 'findReplace',
@@ -33,127 +27,20 @@ export const findReplacePlugin = props => {
       containerElement,
       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
-      const runWithEditorFocused = fn => {
-        const activeElement = document.activeElement;
-        editorView.focus();
-        fn();
-        activeElement === null || activeElement === void 0 ? void 0 : activeElement.focus();
-      };
-
-      const dispatchCommand = cmd => {
-        const {
-          state,
-          dispatch
-        } = editorView;
-        cmd(state, dispatch);
-      };
-
-      const handleActivate = () => {
-        runWithEditorFocused(() => dispatchCommand(activateWithAnalytics({
-          triggerMethod: TRIGGER_METHOD.TOOLBAR
-        })));
-      };
-
-      const handleFind = keyword => {
-        runWithEditorFocused(() => dispatchCommand(findWithAnalytics({
-          editorView,
-          containerElement,
-          keyword
-        })));
-      };
-
-      const handleFindNext = ({
-        triggerMethod
-      }) => {
-        runWithEditorFocused(() => dispatchCommand(findNextWithAnalytics({
-          triggerMethod
-        })));
-      };
-
-      const handleFindPrev = ({
-        triggerMethod
-      }) => {
-        runWithEditorFocused(() => dispatchCommand(findPrevWithAnalytics({
-          triggerMethod
-        })));
-      };
-
-      const handleReplace = ({
-        triggerMethod,
-        replaceText
-      }) => {
-        runWithEditorFocused(() => dispatchCommand(replaceWithAnalytics({
-          triggerMethod,
-          replaceText
-        })));
-      };
-
-      const handleReplaceAll = ({
-        replaceText
-      }) => {
-        runWithEditorFocused(() => dispatchCommand(replaceAllWithAnalytics({
-          replaceText
-        })));
-      };
-
-      const handleFindBlur = () => {
-        dispatchCommand(blur());
-      };
-
-      const handleCancel = ({
-        triggerMethod
-      }) => {
-        dispatchCommand(cancelSearchWithAnalytics({
-          triggerMethod
-        }));
-        editorView.focus();
-      };
-
-      const handleToggleMatchCase = () => {
-        dispatchCommand(toggleMatchCase());
-      };
-
-      const {
-        findReplaceMatchCase
-      } = getFeatureFlags(editorView.state);
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        debounce: false,
-        plugins: {
-          findReplaceState: findReplacePluginKey
-        },
-        render: ({
-          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
-          });
-        }
-      });
+      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
+        });
+      }
     }
 
   };

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

@@ -1,12 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @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';
 const messages = defineMessages({
@@ -147,16 +150,16 @@ class Find extends 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
@@ -200,7 +203,9 @@ class Find extends 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,
@@ -212,24 +217,27 @@ class Find extends 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/es2019/plugins/find-replace/ui/FindReplace.js

@@ -1,8 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @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';
 
 class FindReplace extends React.PureComponent {
   constructor(...args) {
@@ -51,7 +54,9 @@ class FindReplace extends React.PureComponent {
       shouldMatchCase,
       onToggleMatchCase
     } = this.props;
-    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Find, {
+    return jsx("div", {
+      css: wrapperStyles
+    }, jsx(Find, {
       allowMatchCase: allowMatchCase,
       shouldMatchCase: shouldMatchCase,
       onToggleMatchCase: onToggleMatchCase,
@@ -65,7 +70,10 @@ class FindReplace extends 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,

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

@@ -1,8 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/core';
+import Button from '@atlaskit/button/standard-button';
 import { defineMessages, injectIntl } from 'react-intl';
 import Textfield from '@atlaskit/textfield';
-import { SectionWrapper, ReplaceSectionButton } from './styles';
+import { sectionWrapperStyles, replaceSectionButtonStyles } from './styles';
 import { EVENT_TYPE, ACTION, ACTION_SUBJECT, TRIGGER_METHOD } from '../../analytics/types';
 const messages = defineMessages({
   replaceWith: {
@@ -138,7 +142,9 @@ class Replace extends React.PureComponent {
     const {
       canReplace
     } = this.props;
-    return /*#__PURE__*/React.createElement(SectionWrapper, null, /*#__PURE__*/React.createElement(Textfield, {
+    return jsx("div", {
+      css: sectionWrapperStyles
+    }, jsx(Textfield, {
       name: "replace",
       appearance: "none",
       placeholder: this.replaceWith,
@@ -149,11 +155,13 @@ class Replace extends React.PureComponent {
       onKeyDown: this.handleReplaceKeyDown,
       onCompositionStart: this.handleCompositionStart,
       onCompositionEnd: this.handleCompositionEnd
-    }), /*#__PURE__*/React.createElement(ReplaceSectionButton, {
+    }), jsx(Button, {
+      css: replaceSectionButtonStyles,
       testId: this.replace,
       onClick: this.handleReplaceClick,
       isDisabled: !canReplace
-    }, this.replace), /*#__PURE__*/React.createElement(ReplaceSectionButton, {
+    }, this.replace), jsx(Button, {
+      css: replaceSectionButtonStyles,
       testId: this.replaceAll,
       onClick: this.handleReplaceAllClick,
       isDisabled: !canReplace

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

@@ -1,50 +1,40 @@
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css } from '@emotion/core';
 import { N60, N30A } from '@atlaskit/theme/colors';
-import Button from '@atlaskit/button/standard-button';
-import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles'; // This is a workaround because React.memo does not play well with styled-components
-
-function StyledComponentsButton(props) {
-  return /*#__PURE__*/React.createElement(Button, props);
-}
-
-export const ReplaceSectionButton = styled(StyledComponentsButton)`
-  /* increase specificity to override default Button styles */
-  && {
-    margin-left: 4px;
+import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+export const replaceSectionButtonStyles = css({
+  marginLeft: '4px'
+});
+export const ruleStyles = css({
+  width: '100%',
+  border: 'none',
+  backgroundColor: `${N30A}`,
+  margin: '4px 0px',
+  height: '1px',
+  borderRadius: '1px'
+});
+export const wrapperStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  '> *:not(#replace-hr-element)': {
+    margin: '0px 4px'
   }
-`;
-export const Rule = styled.hr`
-  width: 100%;
-  border: none;
-  background-color: ${N30A};
-  margin: 4px 0px;
-  height: 1px;
-  border-radius: 1px;
-`;
-export const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  > *:not(${Rule}) {
-    margin: 0px 4px;
+});
+export const sectionWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'column',
+  '> *': {
+    display: 'inline-flex',
+    height: '32px',
+    flex: '0 0 auto'
   }
-`;
-export const SectionWrapper = styled.div`
-  display: flex;
-  align-items: center;
-
-  > * {
-    flex: 0 0 auto;
-    display: inline-flex;
-    height: 32px;
-  }
-`;
-export const Count = styled.span`
-  color: ${N60};
-  font-size: ${relativeFontSizeToBase16(12)};
-  flex: 0 0 auto;
-  justify-content: center;
-  align-items: center;
-  margin-left: 4px;
-  margin-right: 8px;
-`;
+});
+export const countStyles = css({
+  color: `${N60}`,
+  fontSize: `${relativeFontSizeToBase16(12)}`,
+  flex: '0 0 auto',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginLeft: '4px',
+  marginRight: '8px'
+});

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

@@ -2,7 +2,8 @@ import React from 'react';
 import { Component } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import { gridSize } from '@atlaskit/theme/constants';
-import { B400 } from '@atlaskit/theme/colors';
+import { B400 } from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 import Item, { itemThemeNamespace } from '@atlaskit/item';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import Tooltip from '@atlaskit/tooltip';

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

@@ -8,6 +8,13 @@ import EditorEmojiAddIcon from './EditorEmojiAddIcon'; // helps adjusts position
 
 const EmojiPickerButtonWrapper = styled.div`
   position: relative;
+`; // helps to vertically align emoji picker
+// both top and bottom margin should be 2px
+// https://product-fabric.atlassian.net/browse/CETI-148
+
+const EmojiPickerWrapper = styled.div`
+  margin-bottom: -12px;
+  margin-top: -4px;
 `;
 export const EmojiPickerButton = props => {
   const buttonRef = React.useRef(null);
@@ -20,6 +27,7 @@ export const EmojiPickerButton = props => {
 
   const updateEmoji = emoji => {
     setIsPopupOpen(false);
+    props.editorView && props.editorView.focus();
     props.onChange && props.onChange(emoji);
   };
 
@@ -47,11 +55,11 @@ export const EmojiPickerButton = props => {
       fitHeight: 350,
       fitWidth: 350,
       offset: [0, 10]
-    }, /*#__PURE__*/React.createElement(WithProviders, {
+    }, /*#__PURE__*/React.createElement(EmojiPickerWrapper, null, /*#__PURE__*/React.createElement(WithProviders, {
       providers: ['emojiProvider'],
       providerFactory: props.providerFactory,
       renderNode: renderPicker
-    }));
+    })));
   };
 
   const title = props.title || '';

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

@@ -224,7 +224,7 @@ export default class Toolbar extends Component {
           if (item.selectType === 'emoji') {
             return /*#__PURE__*/React.createElement(EmojiPickerButton, {
               key: idx,
-              view: editorView,
+              editorView: editorView,
               title: item.title,
               providerFactory: providerFactory,
               isSelected: item.selected,

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

@@ -0,0 +1,22 @@
+import { fragment } from '@atlaskit/adf-schema';
+import { Plugin } from 'prosemirror-state';
+import { pluginKey } from './plugin-key';
+export function createPlugin() {
+  return new Plugin({
+    key: pluginKey
+  });
+}
+
+const fragmentMarkPlugin = () => ({
+  name: 'fragmentPlugin',
+
+  marks() {
+    return [{
+      name: 'fragment',
+      mark: fragment
+    }];
+  }
+
+});
+
+export default fragmentMarkPlugin;

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

@@ -0,0 +1,2 @@
+import { PluginKey } from 'prosemirror-state';
+export const pluginKey = new PluginKey('fragmentMarkPlugin');