@atlaskit/editor-core 151.2.1 → 153.0.0

package/dist/es2019/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import { splitCell } from '@atlaskit/editor-tables/utils';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl-next';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '../../../../keymaps';
 import ColorPalette from '../../../../ui/ColorPalette';
 import cellBackgroundColorPalette from '../../../../ui/ColorPalette/Palettes/cellBackgroundColorPalette';
@@ -61,8 +61,7 @@ export const messages = defineMessages({
     description: `Distribute widths between selected columns`
   }
 });
-
-class ContextualMenu extends Component {
+export class ContextualMenu extends Component {
   constructor(...args) {
     super(...args);
 
@@ -443,6 +442,7 @@ class ContextualMenu extends Component {
     }
 
     return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "table-cell-contextual-menu",
       onMouseLeave: this.closeSubmenu
     }, /*#__PURE__*/React.createElement(DropdownMenu, {
       mountTo: mountPoint,

package/dist/es2019/plugins/table/ui/FloatingDeleteButton/DeleteButton.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { TableCssClassName as ClassName } from '../../types';
 
 const DeleteButton = ({

package/dist/es2019/plugins/table/ui/FloatingInsertButton/InsertButton.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { tableMarginTop } from '@atlaskit/editor-common';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import Tooltip from '@atlaskit/tooltip';

package/dist/es2019/plugins/table/ui/FloatingInsertButton/index.js

@@ -5,7 +5,7 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { Popup } from '@atlaskit/editor-common';
 import { closestElement } from '../../../../utils/dom';
 import { INPUT_METHOD } from '../../../analytics';
@@ -15,8 +15,7 @@ import { checkIfNumberColumnEnabled } from '../../utils';
 import getPopupOptions from './getPopupOptions';
 import InsertButton from './InsertButton';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, CONTENT_COMPONENT } from '../../../analytics/types/enums';
-
-class FloatingInsertButton extends React.Component {
+export class FloatingInsertButton extends React.Component {
   constructor(props) {
     super(props);
     this.insertColumn = this.insertColumn.bind(this);

package/dist/es2019/plugins/table/ui/LayoutButton/index.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import classnames from 'classnames';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { Popup } from '@atlaskit/editor-common';
 import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
 import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';

package/dist/es2019/plugins/table/ui/common-styles.css.js

@@ -18,7 +18,11 @@ const sentinelStyles = `.${ClassName.TABLE_CONTAINER} {
   > .${ClassName.TABLE_STICKY_SENTINEL_TOP}, > .${ClassName.TABLE_STICKY_SENTINEL_BOTTOM} {
     position: absolute;
     width: 100%;
-    height: 0px;
+    height: 1px;
+    margin-top: -1px;
+    // need this to avoid sentinel being focused via keyboard
+    // this still allows it to be detected by intersection observer
+    visibility: hidden;
   }
   > .${ClassName.TABLE_STICKY_SENTINEL_TOP} {
     top: ${columnControlsDecorationHeight}px;

package/dist/es2019/plugins/table/ui/consts.js

@@ -1,4 +1,4 @@
-import { B100, B300, B75, N0, N20, R50, R300, R75, DN400, N200, DN30 } from '@atlaskit/theme/colors';
+import { B100, B300, B75, N0, N20, R50, R400, R75, DN400, N200, DN30 } from '@atlaskit/theme/colors';
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common';
 import { akEditorTableBorder, akEditorTableBorderDark, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
@@ -28,7 +28,7 @@ export const tableCellSelectedColor = B75;
 export const tableToolbarSelectedColor = B100;
 export const tableBorderSelectedColor = B300;
 export const tableCellDeleteColor = R50;
-export const tableBorderDeleteColor = R300;
+export const tableBorderDeleteColor = R400;
 export const tableToolbarDeleteColor = R75;
 export const tableBorderRadiusSize = 3;
 export const tablePadding = 8;

package/dist/es2019/plugins/table/ui/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export default defineMessages({
   insertColumn: {
     id: 'fabric.editor.insertColumn',
@@ -32,7 +32,7 @@ export default defineMessages({
   },
   confirmDeleteLinkedModalMessage: {
     id: 'fabric.editor.tables.confirmDeleteLinkedModalMessage',
-    defaultMessage: 'Removing this table will also remove all of the data contained in any connected charts.',
+    defaultMessage: 'Removing this table will break all the charts connected to it.',
     description: 'Message for confirm modal when deleting a table linked to an extension.'
   }
 });

package/dist/es2019/plugins/tasks-and-decisions/nodeviews/decisionItem.js

@@ -41,12 +41,13 @@ class Decision extends ReactNodeView {
   }
 
   update(node, decorations) {
-    return super.update(node, decorations, // Toggle the placeholder based on whether user input exists.
+    return super.update(node, decorations, undefined, // Toggle the placeholder based on whether user input exists.
     (_currentNode, _newNode) => !this.isContentEmpty(_newNode));
   }
 
 }
 
 export const decisionItemNodeView = (portalProviderAPI, eventDispatcher) => (node, view, getPos) => {
-  return new Decision(node, view, getPos, portalProviderAPI, eventDispatcher, {}).init();
+  const hasIntlContext = true;
+  return new Decision(node, view, getPos, portalProviderAPI, eventDispatcher, {}, undefined, undefined, undefined, hasIntlContext).init();
 };

package/dist/es2019/plugins/tasks-and-decisions/nodeviews/taskItem.js

@@ -110,7 +110,7 @@ class Task extends ReactNodeView {
   }
 
   update(node, decorations) {
-    return super.update(node, decorations, (currentNode, newNode) => // Toggle the placeholder based on whether user input exists
+    return super.update(node, decorations, undefined, (currentNode, newNode) => // Toggle the placeholder based on whether user input exists
     !this.isContentEmpty(newNode) && !!(currentNode.attrs.state === newNode.attrs.state));
   }
 
@@ -118,8 +118,9 @@ class Task extends ReactNodeView {
 
 export function taskItemNodeViewFactory(portalProviderAPI, eventDispatcher, providerFactory) {
   return (node, view, getPos) => {
+    const hasIntlContext = true;
     return new Task(node, view, getPos, portalProviderAPI, eventDispatcher, {
       providerFactory
-    }).init();
+    }, undefined, undefined, undefined, hasIntlContext).init();
   };
 }

package/dist/es2019/plugins/tasks-and-decisions/pm-plugins/keymaps.js

@@ -173,7 +173,8 @@ const deleteHandler = filter([isInsideTaskOrDecisionItem, isEmptySelectionAtEnd]
   } // if nested, just unindent
 
 
-  if ($next.node($next.depth - 2).type === taskList || $next.node($next.depth - 1).type === taskList && $next.parent.type === taskList) {
+  if ($next.node($next.depth - 2).type === taskList || // this is for the case when we are on a non-nested item and next one is nested
+  $next.node($next.depth - 1).type === taskList && $next.parent.type === taskList) {
     const tr = liftBlock(state.tr, $next, $next);
 
     if (dispatch && tr) {

package/dist/es2019/plugins/tasks-and-decisions/pm-plugins/main.js

@@ -1,6 +1,6 @@
 import { NodeSelection, Plugin } from 'prosemirror-state';
 import { uuid } from '@atlaskit/adf-schema';
-import { nodesBetweenChanged } from '../../../utils';
+import { nodesBetweenChanged, SetAttrsStep } from '../../../utils';
 import { createSelectionClickHandler } from '../../selection/utils';
 import { decisionItemNodeView } from '../nodeviews/decisionItem';
 import { taskItemNodeViewFactory } from '../nodeviews/taskItem';
@@ -145,10 +145,10 @@ export function createPlugin(portalProviderAPI, eventDispatcher, providerFactory
             } = node.attrs;
 
             if (localId === undefined || localId === null || localId === '') {
-              tr.setNodeMarkup(pos, undefined, {
+              tr.step(new SetAttrsStep(pos, {
                 localId: uuid.generate(),
                 ...rest
-              });
+              }));
               modified = true;
             }
           }

package/dist/es2019/plugins/tasks-and-decisions/ui/Decision/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl-next';
 import { DecisionItem } from '@atlaskit/task-decision';
 const messages = defineMessages({
   placeholder: {

package/dist/es2019/plugins/tasks-and-decisions/ui/Task/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { PureComponent } from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl-next';
 import { ProviderFactory, WithProviders } from '@atlaskit/editor-common';
 import TaskItemWithProviders from './task-item-with-providers';
 const messages = defineMessages({

package/dist/es2019/plugins/tasks-and-decisions/ui/ToolbarDecision/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { messages } from '../../../insert-block/ui/ToolbarInsertBlock/messages';

package/dist/es2019/plugins/tasks-and-decisions/ui/ToolbarTask/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import TaskIcon from '@atlaskit/icon/glyph/editor/task';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { messages } from '../../../insert-block/ui/ToolbarInsertBlock/messages';

package/dist/es2019/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/custom-theme-button';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
@@ -34,8 +34,7 @@ export const messages = defineMessages({
     description: 'Fewer colors'
   }
 });
-
-class ToolbarTextColor extends React.Component {
+export class ToolbarTextColor extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -206,7 +205,8 @@ class ToolbarTextColor extends React.Component {
     }, /*#__PURE__*/React.createElement(ColorPalette, {
       palette: palette,
       onClick: color => this.changeTextColor(color, pluginState.disabled),
-      selectedColor: pluginState.color
+      selectedColor: pluginState.color,
+      isShowingMoreColors: isShowingMoreColors
     })), showMoreColorsToggle && /*#__PURE__*/React.createElement(ShowMoreWrapper, null, /*#__PURE__*/React.createElement(Button, {
       appearance: "subtle",
       onClick: this.handleShowMoreToggle,
@@ -273,5 +273,4 @@ class ToolbarTextColor extends React.Component {
   }
 
 }
-
 export default injectIntl(ToolbarTextColor);

package/dist/es2019/plugins/text-formatting/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { code, em, strike, strong, subsup, underline } from '@atlaskit/adf-schema';
 import WithPluginState from '../../ui/WithPluginState';
 import { plugin as textFormattingPlugin, pluginKey as textFormattingPluginKey } from './pm-plugins/main';
-import { plugin as clearFormattingPlugin } from './pm-plugins/clear-formatting';
+import { plugin as clearFormattingPlugin, pluginKey as clearFormattingPluginKey } from './pm-plugins/clear-formatting';
 import clearFormattingKeymapPlugin from './pm-plugins/clear-formatting-keymap';
 import textFormattingCursorPlugin from './pm-plugins/cursor';
 import textFormattingInputRulePlugin from './pm-plugins/input-rule';
@@ -81,7 +81,8 @@ const textFormatting = (options = {}) => ({
   }) {
     return /*#__PURE__*/React.createElement(WithPluginState, {
       plugins: {
-        textFormattingState: textFormattingPluginKey
+        textFormattingState: textFormattingPluginKey,
+        clearFormattingPluginState: clearFormattingPluginKey
       },
       render: () => {
         return /*#__PURE__*/React.createElement(Toolbar, {

package/dist/es2019/plugins/text-formatting/pm-plugins/cursor.js

@@ -28,7 +28,10 @@ export default new Plugin({
       const clickWasAtTextNode = !!(clickNode && clickNode.isText);
       const clickWasAtEndOfAParagraphNode = $click.parent.type === paragraph && $click.textOffset === 0 && $click.nodeAfter === null;
 
-      if (clickWasAtEdgeOfATextNode && clickWasNearACodeMark && clickedDOMElementPosition && (clickWasAtTextNode || clickWasAtEndOfAParagraphNode)) {
+      if (clickWasAtEdgeOfATextNode && clickWasNearACodeMark && clickedDOMElementPosition && ( // if click did not occur at a text node or end of paragraph, then
+      // it was at a directly adjacent non-text node, so we skip this manual
+      // text selection logic to preserve that non-text node's selection
+      clickWasAtTextNode || clickWasAtEndOfAParagraphNode)) {
         const clickWasInsideNodeDOM = event.target.parentNode === view.domAtPos(clickedDOMElementPosition).node && code.isInSet(view.state.doc.resolve(clickedDOMElementPosition).nodeAfter.marks);
         const nodeNextToClick = $click.nodeBefore && code.isInSet($click.nodeBefore.marks) ? $click.nodeAfter : $click.nodeBefore; // Need to set the selection here to allow clicking between [code('text'),{<>},emoji()]
 

package/dist/es2019/plugins/text-formatting/ui/Toolbar/index.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { Separator, Wrapper, ButtonGroup } from '../../../../ui/styles';
 import { useFormattingIcons, useHasFormattingActived } from './hooks/formatting-icons';
 import { useClearIcon } from './hooks/clear-formatting-icon';

package/dist/es2019/plugins/text-formatting/ui/Toolbar/toolbar-messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const toolbarMessages = defineMessages({
   underline: {
     id: 'fabric.editor.underline',

package/dist/es2019/plugins/type-ahead/index.js

@@ -110,9 +110,9 @@ const typeAheadPlugin = options => {
         name: 'typeAhead',
         plugin: ({
           dispatch,
-          reactContext
+          getIntl
         }) => createPlugin({
-          reactContext,
+          getIntl,
           popupMountRef,
           reactDispatch: dispatch,
           typeAheadHandlers: typeAhead,

package/dist/es2019/plugins/type-ahead/pm-plugins/decorations.js

@@ -5,7 +5,7 @@ import { TextSelection } from 'prosemirror-state';
 import { DecorationSet, Decoration } from 'prosemirror-view';
 import { B400 } from '@atlaskit/theme/colors';
 import { keyName as keyNameNormalized } from 'w3c-keyname';
-import { IntlProvider } from 'react-intl';
+import { IntlProvider } from 'react-intl-next';
 import { redo, undo } from 'prosemirror-history';
 import { TYPE_AHEAD_DECORATION_KEY, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE } from '../constants';
 import { WrapperTypeAhead } from '../ui/WrapperTypeAhead';

package/dist/es2019/plugins/type-ahead/pm-plugins/main.js

@@ -21,12 +21,12 @@ const hasTypeAheadStep = tr => {
 
 export function createPlugin({
   reactDispatch,
-  reactContext,
   popupMountRef,
   createAnalyticsEvent,
-  typeAheadHandlers
+  typeAheadHandlers,
+  getIntl
 }) {
-  const intl = reactContext().intl;
+  const intl = getIntl();
   const {
     createDecorations,
     removeDecorations

package/dist/es2019/plugins/type-ahead/ui/TypeAheadList.js

@@ -1,5 +1,6 @@
 import React, { useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
-import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors';
+import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 import { ItemGroup, itemThemeNamespace } from '@atlaskit/item';
 import { themed } from '@atlaskit/theme/components';
 import { ThemeProvider } from 'styled-components';

package/dist/es2019/plugins/type-ahead/ui/TypeAheadListItem.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo, useRef, useLayoutEffect } from 'react';
 import { N200 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
+import { borderRadius } from '@atlaskit/theme/constants'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 import Item from '@atlaskit/item';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import styled from 'styled-components';

package/dist/es2019/plugins/undo-redo/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   undo: {
     id: 'fabric.editor.undo',

package/dist/es2019/plugins/undo-redo/ui/ToolbarUndoRedo/index.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import UndoIcon from '@atlaskit/icon/glyph/undo';
 import RedoIcon from '@atlaskit/icon/glyph/redo';
 import { undo as undoKeymap, redo as redoKeymap, ToolTipContent } from '../../../../keymaps';

package/dist/es2019/plugins/unsupported-content/index.js

@@ -9,22 +9,23 @@ const createPlugin = ({
   eventDispatcher,
   dispatchAnalyticsEvent
 }) => {
+  const hasIntlContext = true;
   return new Plugin({
     key: pluginKey,
     props: {
       nodeViews: {
         confluenceUnsupportedBlock: ReactNodeView.fromComponent(UnsupportedBlock, portalProviderAPI, eventDispatcher, {
           dispatchAnalyticsEvent
-        }),
+        }, undefined, hasIntlContext),
         confluenceUnsupportedInline: ReactNodeView.fromComponent(UnsupportedInline, portalProviderAPI, eventDispatcher, {
           dispatchAnalyticsEvent
-        }),
+        }, undefined, hasIntlContext),
         unsupportedBlock: ReactNodeView.fromComponent(UnsupportedBlock, portalProviderAPI, eventDispatcher, {
           dispatchAnalyticsEvent
-        }),
+        }, undefined, hasIntlContext),
         unsupportedInline: ReactNodeView.fromComponent(UnsupportedInline, portalProviderAPI, eventDispatcher, {
           dispatchAnalyticsEvent
-        })
+        }, undefined, hasIntlContext)
       }
     }
   });

package/dist/es2019/plugins/view-update-subscription/subscribe/toolbarAndPickerUpdates.js

@@ -60,7 +60,9 @@ export const subscribeToToolbarAndPickerUpdates = (editorView, cb) => {
       const oldToolbarConfig = getOldConfigWithNodeInfo(lastUpdatedState);
       const isToolbarEqual = areToolbarsSame(toolbarConfig, oldToolbarConfig);
 
-      if (dateState !== oldDateState || statusState !== oldStatusState || !isToolbarEqual && !statusState.showStatusPickerAt && !dateState.showDatePickerAt) {
+      if (dateState !== oldDateState || statusState !== oldStatusState || // Sometimes the toolbar changes while a picker is open, we dont care about this
+      // EG A nested status or date node in a table
+      !isToolbarEqual && !statusState.showStatusPickerAt && !dateState.showDatePickerAt) {
         shouldCallback = true;
       }
     } else {

package/dist/es2019/ui/Alignment/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PureComponent } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { iconMap } from '../../plugins/alignment/ui/ToolbarAlignment/icon-map';
 import AlignmentButton from './AlignmentButton';
 import { alignmentMessages } from './messages';

package/dist/es2019/ui/Alignment/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const alignmentMessages = defineMessages({
   alignLeft: {
     id: 'fabric.editor.alignLeft',

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -19,7 +19,7 @@ import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import WidthEmitter from '../../WidthEmitter';
 import { GRID_GUTTER } from '../../../plugins/grid';
 import classnames from 'classnames';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import messages from '../../../messages';
 import { TableControlsPadding, MainToolbar, MainToolbarCustomComponentsSlot } from './Toolbar';
 const CommentEditorMargin = 14;

package/dist/es2019/ui/Appearance/FullPage/FullPageToolbar.js

@@ -1,39 +1,72 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import AvatarsWithPluginState from '../../../plugins/collab-edit/ui';
+import FindReplaceToolbarButtonWithState from '../../../plugins/find-replace/FindReplaceToolbarButtonWithState';
+import { BeforePrimaryToolbarWrapper } from '../../../plugins/before-primaryToolbar/ui/BeforePrimaryToolbarWrapper';
 import Toolbar from '../../Toolbar';
-import { MainToolbar, MainToolbarIconBefore, MainToolbarCustomComponentsSlot } from './MainToolbar';
+import { MainToolbar, MainToolbarIconBefore, MainToolbarFirstChild, MainToolbarSecondChild, NonCustomToolbarWrapper, CustomToolbarWrapper, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
 import { ContextPanelConsumer } from '../../ContextPanel/context';
 export const FullPageToolbar = /*#__PURE__*/React.memo(props => {
+  var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$collabEdit, _props$collabEdit2, _props$collabEdit3, _props$featureFlags4, _props$featureFlags5;
+
+  const [shouldSplitToolbar, setShouldSplitToolbar] = useState(false);
+  const nonCustomToolbar = /*#__PURE__*/React.createElement(NonCustomToolbarWrapper, null, props.beforeIcon && /*#__PURE__*/React.createElement(MainToolbarIconBefore, null, props.beforeIcon), /*#__PURE__*/React.createElement(Toolbar, {
+    editorView: props.editorView,
+    editorActions: props.editorActions,
+    eventDispatcher: props.eventDispatcher,
+    providerFactory: props.providerFactory,
+    appearance: props.appearance,
+    items: props.primaryToolbarComponents,
+    popupsMountPoint: props.popupsMountPoint,
+    popupsBoundariesElement: props.popupsBoundariesElement,
+    popupsScrollableElement: props.popupsScrollableElement,
+    disabled: props.disabled,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    containerElement: props.containerElement,
+    hasMinWidth: props.hasMinWidth
+  }));
+  const customToolbar = /*#__PURE__*/React.createElement(CustomToolbarWrapper, null, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? /*#__PURE__*/React.createElement(BeforePrimaryToolbarWrapper, {
+    beforePrimaryToolbarComponents: props.customPrimaryToolbarComponents.before
+  }) : null, (props === null || props === void 0 ? void 0 : (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null : /*#__PURE__*/React.createElement(AvatarsWithPluginState, {
+    editorView: props.editorView,
+    eventDispatcher: props.eventDispatcher,
+    inviteToEditComponent: (_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.inviteToEditComponent,
+    inviteToEditHandler: (_props$collabEdit2 = props.collabEdit) === null || _props$collabEdit2 === void 0 ? void 0 : _props$collabEdit2.inviteToEditHandler,
+    isInviteToEditButtonSelected: (_props$collabEdit3 = props.collabEdit) === null || _props$collabEdit3 === void 0 ? void 0 : _props$collabEdit3.isInviteToEditButtonSelected
+  }), (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.findReplace && (_props$featureFlags5 = props.featureFlags) !== null && _props$featureFlags5 !== void 0 && _props$featureFlags5.twoLineEditorToolbar ? /*#__PURE__*/React.createElement(FindReplaceToolbarButtonWithState, {
+    popupsBoundariesElement: props.popupsBoundariesElement,
+    popupsMountPoint: props.popupsMountPoint,
+    popupsScrollableElement: props.popupsScrollableElement,
+    editorView: props.editorView,
+    containerElement: props.containerElement,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
+  }) : null, !!props.customPrimaryToolbarComponents && 'after' in props.customPrimaryToolbarComponents ? props.customPrimaryToolbarComponents.after : props.customPrimaryToolbarComponents);
+  useEffect(() => {
+    var _props$featureFlags6;
+
+    if ((_props$featureFlags6 = props.featureFlags) !== null && _props$featureFlags6 !== void 0 && _props$featureFlags6.twoLineEditorToolbar) {
+      const updateOnResize = () => {
+        setShouldSplitToolbar(window.innerWidth <= MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT);
+      };
+
+      window.addEventListener('resize', updateOnResize);
+      updateOnResize();
+      return () => window.removeEventListener('resize', updateOnResize);
+    }
+  });
   return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, ({
     width: contextPanelWidth
   }) => {
-    var _props$featureFlags;
+    var _props$featureFlags7, _props$featureFlags8, _props$featureFlags9;
 
     return /*#__PURE__*/React.createElement(MainToolbar, {
       "data-testid": "ak-editor-main-toolbar",
-      showKeyline: props.showKeyline || contextPanelWidth > 0
-    }, props.beforeIcon && /*#__PURE__*/React.createElement(MainToolbarIconBefore, null, props.beforeIcon), /*#__PURE__*/React.createElement(Toolbar, {
-      editorView: props.editorView,
-      editorActions: props.editorActions,
-      eventDispatcher: props.eventDispatcher,
-      providerFactory: props.providerFactory,
-      appearance: props.appearance,
-      items: props.primaryToolbarComponents,
-      popupsMountPoint: props.popupsMountPoint,
-      popupsBoundariesElement: props.popupsBoundariesElement,
-      popupsScrollableElement: props.popupsScrollableElement,
-      disabled: props.disabled,
-      dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-      containerElement: props.containerElement,
-      hasMinWidth: props.hasMinWidth
-    }), /*#__PURE__*/React.createElement(MainToolbarCustomComponentsSlot, {
-      "data-testid": 'avatar-group-outside-plugin'
-    }, (props === null || props === void 0 ? void 0 : (_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.showAvatarGroupAsPlugin) === true ? null : /*#__PURE__*/React.createElement(AvatarsWithPluginState, {
-      editorView: props.editorView,
-      eventDispatcher: props.eventDispatcher,
-      inviteToEditComponent: props.collabEdit && props.collabEdit.inviteToEditComponent,
-      inviteToEditHandler: props.collabEdit && props.collabEdit.inviteToEditHandler,
-      isInviteToEditButtonSelected: props.collabEdit && props.collabEdit.isInviteToEditButtonSelected
-    }), props.customPrimaryToolbarComponents));
+      showKeyline: props.showKeyline || contextPanelWidth > 0,
+      twoLineEditorToolbar: !!((_props$featureFlags7 = props.featureFlags) !== null && _props$featureFlags7 !== void 0 && _props$featureFlags7.twoLineEditorToolbar)
+    }, /*#__PURE__*/React.createElement(MainToolbarFirstChild, {
+      twoLineEditorToolbar: !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar)
+    }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), /*#__PURE__*/React.createElement(MainToolbarSecondChild, {
+      "data-testid": 'avatar-group-outside-plugin',
+      twoLineEditorToolbar: !!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.twoLineEditorToolbar)
+    }, shouldSplitToolbar ? nonCustomToolbar : customToolbar));
   });
 });