@atlaskit/editor-core 151.2.1 → 153.0.0

package/dist/es2019/plugins/caption/nodeviews/index.js

@@ -44,5 +44,8 @@ export class CaptionNodeView extends SelectionBasedNodeView {
 
 }
 export default function captionNodeView(portalProviderAPI, eventDispatcher) {
-  return (node, view, getPos) => new CaptionNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {}).init();
+  return (node, view, getPos) => {
+    const hasIntlContext = true;
+    return new CaptionNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {}, undefined, undefined, undefined, hasIntlContext).init();
+  };
 }

package/dist/es2019/plugins/caption/pm-plugins/main.js

@@ -13,36 +13,38 @@ const fireAnalytic = (state, tr, action) => {
   });
 };
 
-export default ((portalProviderAPI, eventDispatcher, providerFactory, dispatch) => new Plugin({
-  appendTransaction(transactions, oldState, newState) {
-    // only run for transactions that change selection
-    if (!transactions.find(tr => tr.selectionSet)) {
-      return;
-    }
+export default ((portalProviderAPI, eventDispatcher, providerFactory, dispatch) => {
+  return new Plugin({
+    appendTransaction(transactions, oldState, newState) {
+      // only run for transactions that change selection
+      if (!transactions.find(tr => tr.selectionSet)) {
+        return;
+      }
 
-    const newSelection = !newState.selection.eq(oldState.selection);
-    const findCaption = findParentNodeOfType(oldState.schema.nodes.caption);
-    const oldSelectionCaption = findCaption(oldState.selection);
-    const {
-      tr
-    } = newState; // if selecting away from caption, or selecting a different caption
+      const newSelection = !newState.selection.eq(oldState.selection);
+      const findCaption = findParentNodeOfType(oldState.schema.nodes.caption);
+      const oldSelectionCaption = findCaption(oldState.selection);
+      const {
+        tr
+      } = newState; // if selecting away from caption, or selecting a different caption
 
-    if (newSelection && oldSelectionCaption) {
-      if (oldSelectionCaption.node.childCount === 0) {
-        tr.delete(oldSelectionCaption.start - 1, oldSelectionCaption.start);
-        tr.setMeta('scrollIntoView', false);
-        fireAnalytic(newState, tr, ACTION.DELETED);
-        return tr;
-      } else {
-        fireAnalytic(newState, tr, ACTION.EDITED);
+      if (newSelection && oldSelectionCaption) {
+        if (oldSelectionCaption.node.childCount === 0) {
+          tr.delete(oldSelectionCaption.start - 1, oldSelectionCaption.start);
+          tr.setMeta('scrollIntoView', false);
+          fireAnalytic(newState, tr, ACTION.DELETED);
+          return tr;
+        } else {
+          fireAnalytic(newState, tr, ACTION.EDITED);
+        }
       }
-    }
-  },
+    },
 
-  key: pluginKey,
-  props: {
-    nodeViews: {
-      caption: captionNodeView(portalProviderAPI, eventDispatcher)
+    key: pluginKey,
+    props: {
+      nodeViews: {
+        caption: captionNodeView(portalProviderAPI, eventDispatcher)
+      }
     }
-  }
-}));
+  });
+});

package/dist/es2019/plugins/card/messages.js

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

package/dist/es2019/plugins/card/nodeviews/embedCard.js

@@ -205,7 +205,9 @@ export class EmbedCardComponent extends React.PureComponent {
     // since `heightAlone` is defined only when just height is available.
 
     let heightAlone = liveHeight !== null && liveHeight !== void 0 ? liveHeight : !originalWidth && originalHeight || undefined;
-    const aspectRatio = !heightAlone && (initialAspectRatio || originalHeight && originalWidth && originalWidth / originalHeight) || // If ADF contains both width and height we get ratio from that
+    const aspectRatio = !heightAlone && ( // No need getting aspectRatio if heightAlone defined already
+    initialAspectRatio || // If we have initialAspectRatio (coming from iframely) we should go with that
+    originalHeight && originalWidth && originalWidth / originalHeight) || // If ADF contains both width and height we get ratio from that
     undefined;
     const cardProps = {
       layout,

package/dist/es2019/plugins/card/pm-plugins/main.js

@@ -105,13 +105,15 @@ export const createPlugin = options => ({
             useAlternativePreloader,
             useInlineWrapper: platform === 'mobile'
           };
-          return new InlineCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true).init();
+          const hasIntlContext = true;
+          return new InlineCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();
         },
         blockCard: (node, view, getPos) => {
           const reactComponentProps = {
             platform
           };
-          return new BlockCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true).init();
+          const hasIntlContext = true;
+          return new BlockCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();
         },
         embedCard: (node, view, getPos) => {
           const reactComponentProps = {
@@ -121,7 +123,8 @@ export const createPlugin = options => ({
             fullWidthMode,
             dispatchAnalyticsEvent
           };
-          return new EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true).init();
+          const hasIntlContext = true;
+          return new EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();
         }
       }
     },

package/dist/es2019/plugins/code-bidi-warning/pm-plugins/main.js

@@ -4,11 +4,11 @@ import { codeBidiWarningPluginKey } from '../plugin-key';
 import { createBidiWarningsDecorationSetFromDoc, createPluginState, getPluginState } from './plugin-factory';
 export const createPlugin = ({
   dispatch,
-  reactContext
+  getIntl
 }, {
   appearance
 }) => {
-  const intl = reactContext().intl;
+  const intl = getIntl();
   const codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
   return new Plugin({
     key: codeBidiWarningPluginKey,

package/dist/es2019/plugins/code-block/index.js

@@ -23,10 +23,10 @@ const codeBlockPlugin = options => ({
     return [{
       name: 'codeBlock',
       plugin: ({
-        reactContext
+        getIntl
       }) => createPlugin({
         useLongPressSelection: options.useLongPressSelection,
-        reactContext,
+        getIntl,
         appearance: options.appearance
       })
     }, {

package/dist/es2019/plugins/code-block/pm-plugins/main.js

@@ -10,10 +10,10 @@ import { codeBlockClassNames } from '../ui/class-names';
 import { getFeatureFlags } from '../../feature-flags-context';
 export const createPlugin = ({
   useLongPressSelection = false,
-  reactContext,
+  getIntl,
   appearance
 }) => {
-  const intl = reactContext().intl;
+  const intl = getIntl();
   const codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
   return new Plugin({
     state: {

package/dist/es2019/plugins/code-block/toolbar.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
 import { findDomRefAtPos } from 'prosemirror-utils';

package/dist/es2019/plugins/collab-edit/ui/avatars-with-plugin-state.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import WithPluginState from '../../../ui/WithPluginState';
 import { pluginKey as collabEditPluginKey } from '../plugin';
 import messages from '../../../messages';

package/dist/es2019/plugins/date/nodeviews/date.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { timestampToString, timestampToTaskContext, isPastDate, DateSharedCssClassName } from '@atlaskit/editor-common';
 import { Date } from '@atlaskit/date';
 import { setDatePickerAt } from '../actions';

package/dist/es2019/plugins/date/nodeviews/messages.js

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

package/dist/es2019/plugins/date/pm-plugins/main.js

@@ -23,12 +23,13 @@ const createPlugin = ({
     isDateEmpty: false,
     focusDateInput: false
   };
+  const hasIntlContext = true;
   return new Plugin({
     state: createPluginState(dispatch, newPluginState),
     key: pluginKey,
     props: {
       nodeViews: {
-        date: ReactNodeView.fromComponent(DateNodeView, portalProviderAPI, eventDispatcher)
+        date: ReactNodeView.fromComponent(DateNodeView, portalProviderAPI, eventDispatcher, undefined, undefined, hasIntlContext)
       }
     }
   });

package/dist/es2019/plugins/date/ui/DatePicker/date-picker-input.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 styled from 'styled-components';
 import { findDateSegmentByPosition, adjustDate, isDatePossiblyValid } from '../../utils/internal';
 import { parseDateType, formatDateType } from '../../utils/formatParse';

package/dist/es2019/plugins/date/ui/DatePicker/index.js

@@ -10,7 +10,7 @@ import withOuterListeners from '../../../../ui/with-outer-listeners';
 import styled from 'styled-components';
 const PopupWithListeners = withOuterListeners(Popup);
 import { INPUT_METHOD } from '../../../analytics/types/enums';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import DatePickerInput from './date-picker-input';
 const PopupContentWrapper = styled.div`
   padding: 2px;

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

@@ -26,9 +26,9 @@ const expandPlugin = (options = {}) => ({
       name: 'expand',
       plugin: ({
         dispatch,
-        reactContext
+        getIntl
       }) => {
-        return createPlugin(dispatch, reactContext, options.useLongPressSelection);
+        return createPlugin(dispatch, getIntl, options.useLongPressSelection);
       }
     }, {
       name: 'expandKeymap',

package/dist/es2019/plugins/expand/nodeviews/index.js

@@ -51,7 +51,7 @@ const toDOM = (node, intl) => ['div', {
 }, 0]];
 
 export class ExpandNodeView {
-  constructor(node, view, getPos, reactContext) {
+  constructor(node, view, getPos, getIntl) {
     _defineProperty(this, "allowInteractiveExpand", true);
 
     _defineProperty(this, "focusTitle", () => {
@@ -332,11 +332,11 @@ export class ExpandNodeView {
       }
     });
 
-    this.reactContext = reactContext() || {};
+    this.intl = getIntl();
     const {
       dom,
       contentDOM
-    } = DOMSerializer.renderSpec(document, toDOM(node, this.reactContext.intl));
+    } = DOMSerializer.renderSpec(document, toDOM(node, this.intl));
     this.getPos = getPos;
     this.pos = getPos();
     this.view = view;
@@ -347,7 +347,7 @@ export class ExpandNodeView {
     this.input = this.dom.querySelector(`.${expandClassNames.titleInput}`);
     this.titleContainer = this.dom.querySelector(`.${expandClassNames.titleContainer}`);
     this.content = this.dom.querySelector(`.${expandClassNames.content}`);
-    this.renderIcon(this.reactContext.intl);
+    this.renderIcon(this.intl);
     this.initHandlers();
   }
 
@@ -381,6 +381,7 @@ export class ExpandNodeView {
       __expanded
     } = node && node.attrs || this.node.attrs;
     ReactDOM.render( /*#__PURE__*/React.createElement(ExpandIconButton, {
+      intl: intl,
       allowInteractiveExpand: this.isAllowInteractiveExpandEnabled(),
       expanded: __expanded
     }), this.icon);
@@ -406,7 +407,7 @@ export class ExpandNodeView {
         // we toggle a class name to hide the content and animate the chevron.
         if (this.dom) {
           this.dom.classList.toggle(expandClassNames.expanded);
-          this.renderIcon(this.reactContext && this.reactContext.intl, node);
+          this.renderIcon(this && this.intl, node);
         }
 
         if (this.content) {
@@ -458,6 +459,6 @@ export class ExpandNodeView {
   }
 
 }
-export default function (reactContext) {
-  return (node, view, getPos) => new ExpandNodeView(node, view, getPos, reactContext);
+export default function (getIntl) {
+  return (node, view, getPos) => new ExpandNodeView(node, view, getPos, getIntl);
 }

package/dist/es2019/plugins/expand/pm-plugins/main.js

@@ -11,15 +11,15 @@ function containsClass(element, className) {
   return !!element && element.classList.contains(className);
 }
 
-export const createPlugin = (dispatch, reactContext, useLongPressSelection = false) => {
+export const createPlugin = (dispatch, getIntl, useLongPressSelection = false) => {
   const state = createPluginState(dispatch, {});
   return new Plugin({
     state: state,
     key: pluginKey,
     props: {
       nodeViews: {
-        expand: ExpandNodeView(reactContext),
-        nestedExpand: ExpandNodeView(reactContext)
+        expand: ExpandNodeView(getIntl),
+        nestedExpand: ExpandNodeView(getIntl)
       },
 
       handleKeyDown(_view, event) {

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

@@ -1,4 +1,5 @@
 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';
@@ -41,7 +42,7 @@ const extensionAPICallPayload = functionName => ({
 
 export const createExtensionAPI = options => {
   const doc = {
-    insertAfter: (localId, adf) => {
+    insertAfter: (localId, adf, opt) => {
       const {
         editorView
       } = options;
@@ -86,7 +87,8 @@ export const 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
+      const insertPosition = nodePos.pos + nodePos.node.nodeSize;
+      tr.insert(insertPosition, newNode); // Validate if the document is valid at this point
 
       try {
         tr.doc.check();
@@ -129,6 +131,11 @@ export const createExtensionAPI = options => {
         };
         addAnalytics(state, tr, payload);
       });
+
+      if (opt && opt.allowSelectionToNewNode) {
+        tr.setSelection(new NodeSelection(tr.doc.resolve(insertPosition)));
+      }
+
       dispatch(tr);
     },
     scrollTo: localId => {

package/dist/es2019/plugins/extension/nodeviews/extension.js

@@ -41,10 +41,11 @@ export class ExtensionNode extends ReactNodeView {
 }
 export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions) {
   return (node, view, getPos) => {
+    const hasIntlContext = true;
     return new ExtensionNode(node, view, getPos, portalProviderAPI, eventDispatcher, {
       providerFactory,
       extensionHandlers,
       extensionNodeViewOptions
-    }).init();
+    }, undefined, undefined, undefined, hasIntlContext).init();
   };
 }

package/dist/es2019/plugins/extension/toolbar.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 import { hasParentNodeOfType } from 'prosemirror-utils';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import EditIcon from '@atlaskit/icon/glyph/editor/edit';
@@ -41,7 +41,7 @@ const isLayoutSupported = (state, selectedExtNode) => {
   return !!((selectedExtNode.node.type === bodiedExtension || selectedExtNode.node.type === extension && !hasParentNodeOfType([bodiedExtension, table, expand].filter(Boolean))(selection)) && !hasParentNodeOfType([layoutSection])(selection));
 };
 
-const breakoutOptions = (state, formatMessage, breakoutEnabled) => {
+const breakoutOptions = (state, formatMessage, extensionState, breakoutEnabled) => {
   const nodeWithPos = getSelectedExtension(state, true); // we should only return breakout options when breakouts are enabled and the node supports them
 
   if (nodeWithPos && breakoutEnabled && isLayoutSupported(state, nodeWithPos)) {
@@ -104,7 +104,7 @@ export const getToolbarConfig = (breakoutEnabled = true) => (state, intl) => {
   if (extensionState && !extensionState.showContextPanel && extensionState.element) {
     const nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension];
     const editButtonArray = editButton(formatMessage, extensionState);
-    const breakoutButtonArray = breakoutOptions(state, formatMessage, breakoutEnabled);
+    const breakoutButtonArray = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled);
     return {
       title: 'Extension floating controls',
       getDomRef: () => extensionState.element.parentElement || undefined,

package/dist/es2019/plugins/extension/ui/SaveIndicator/SaveIndicator.js

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { G300, N0 } from '@atlaskit/theme/colors';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { messages } from './messages';
 
 const noop = () => {};

package/dist/es2019/plugins/extension/ui/SaveIndicator/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   saveIndicator: {
     id: 'fabric.editor.extensions.config-panel.save-indicator',

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

@@ -32,4 +32,10 @@ export const extensionStyles = css`
   .extensionView-content-wrap .extension-container {
     overflow: hidden;
   }
+
+  .bodiedExtensionView-content-wrap
+    .extensionView-content-wrap
+    .extension-container {
+    width: 100%;
+  }
 `;

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;