@atlaskit/editor-core 151.3.0 → 152.0.0

package/dist/cjs/ui/ConfigPanel/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isValidHex = exports.getNameFromDuplicateField = exports.isDuplicateField = exports.getSafeParentedName = exports.getOptionFromValue = exports.validateRequired = exports.toEntries = exports.fromEntries = exports.validate = void 0;
+exports.isValidHex = exports.getNameFromDuplicateField = exports.isDuplicateField = exports.getSafeParentedName = exports.getOptionFromValue = exports.validateRequired = exports.fromEntries = exports.validate = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -32,14 +32,6 @@ var fromEntries = function fromEntries(iterable) {
 
 exports.fromEntries = fromEntries;
 
-var toEntries = function toEntries(parameters) {
-  return Array.isArray(parameters) ? parameters.reduce(function (prev, curr) {
-    return [].concat((0, _toConsumableArray2.default)(prev), (0, _toConsumableArray2.default)(Object.entries(curr)));
-  }, []) : Object.entries(parameters);
-};
-
-exports.toEntries = toEntries;
-
 var isEmptyString = function isEmptyString(value) {
   return typeof value === 'string' && value === '';
 };
@@ -104,7 +96,7 @@ exports.isDuplicateField = isDuplicateField;
 var getNameFromDuplicateField = function getNameFromDuplicateField(key) {
   return key.replace(duplicateFieldRegex, '');
 };
-/* 
+/*
     ColorPickerButton only accepts 8 digit hex alpha values, for example:
     #123fffaa (8 digits, hex alpha)
     */

package/dist/cjs/ui/DropdownMenu/index.js

@@ -134,6 +134,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         key: item.key || item.content,
         isSelected: item.isActive
       }, /*#__PURE__*/_react.default.createElement(_item.default, {
+        role: "menuitem",
         elemBefore: item.elemBefore,
         elemAfter: item.elemAfter,
         isDisabled: item.isDisabled,
@@ -212,7 +213,8 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         }
       }), items.map(function (group, index) {
         return /*#__PURE__*/_react.default.createElement(_item.ItemGroup, {
-          key: index
+          key: index,
+          role: "menu"
         }, group.items.map(function (item) {
           return _this2.renderItem(item);
         }));

package/dist/cjs/ui/LinkSearch/LinkSearchListItem.js

@@ -63,7 +63,7 @@ var Name = _styledComponents.default.div(_templateObject3 || (_templateObject3 =
 
 exports.Name = Name;
 
-var ContainerName = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  line-height: 14px;\n  font-size: ", ";\n"])), _colors.N100, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _theme.fontSizeSmall)()));
+var ContainerName = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  line-height: 14px;\n  font-size: ", ";\n"])), _colors.N300, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _theme.fontSizeSmall)()));
 
 exports.ContainerName = ContainerName;
 

package/dist/cjs/ui/Resizer/index.js

@@ -185,6 +185,7 @@ var Resizer = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var handleStyles = {};
       var handles = {};
+      var handleComponent = {};
       var _this$props4 = this.props,
           _this$props4$innerPad = _this$props4.innerPadding,
           innerPadding = _this$props4$innerPad === void 0 ? 0 : _this$props4$innerPad,
@@ -194,7 +195,8 @@ var Resizer = /*#__PURE__*/function (_React$Component) {
           layout = _this$props4.layout,
           enable = _this$props4.enable,
           children = _this$props4.children,
-          ratio = _this$props4.ratio;
+          ratio = _this$props4.ratio,
+          handleComponentFunc = _this$props4.handleComponentFunc;
       var isResizing = this.state.isResizing;
 
       _utils.handleSides.forEach(function (side) {
@@ -204,6 +206,11 @@ var Resizer = /*#__PURE__*/function (_React$Component) {
         handleStyles[side] = (_handleStyles$side = {
           width: '24px'
         }, (0, _defineProperty2.default)(_handleStyles$side, side, "".concat(-13 - innerPadding, "px")), (0, _defineProperty2.default)(_handleStyles$side, "zIndex", _editorSharedStyles.akRichMediaResizeZIndex), (0, _defineProperty2.default)(_handleStyles$side, "pointerEvents", 'auto'), _handleStyles$side);
+        var sideHandleComponent = handleComponentFunc && handleComponentFunc(side);
+
+        if (sideHandleComponent) {
+          handleComponent[side] = sideHandleComponent;
+        }
       });
 
       var className = (0, _classnames.default)(_editorCommon.richMediaClassName, "image-".concat(layout), this.props.className, {
@@ -237,6 +244,7 @@ var Resizer = /*#__PURE__*/function (_React$Component) {
         handleClasses: handles,
         handleStyles: handleStyles,
         handleWrapperStyle: handleWrapperStyle,
+        handleComponent: handleComponent,
         enable: enable,
         onResize: this.handleResize,
         onResizeStop: this.handleResizeStop,

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.nextMajorVersion = exports.version = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "151.3.0";
+var version = "152.0.0";
 exports.version = version;
 
 var nextMajorVersion = function nextMajorVersion() {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "151.3.0",
+	"version": "152.0.0",
 	"sideEffects": false
 }

package/dist/es2019/create-editor/ReactEditorView.js

@@ -471,8 +471,27 @@ export default class ReactEditorView extends React.Component {
           transformer: this.contentTransformer
         });
 
+        if (this.props.editorProps.shouldFocus && view.props.editable && view.props.editable(view.state)) {
+          this.focusTimeoutId = handleEditorFocus(view);
+        }
+
         if (this.featureFlags.ufo) {
+          this.experienceStore = ExperienceStore.getInstance(view);
+          this.experienceStore.start(EditorExperience.editSession);
+          this.experienceStore.addMetadata(EditorExperience.editSession, {
+            reliabilityInterval: RELIABILITY_INTERVAL
+          });
           this.reliabilityInterval = window.setInterval(() => {
+            var _this$experienceStore11, _this$experienceStore12;
+
+            (_this$experienceStore11 = this.experienceStore) === null || _this$experienceStore11 === void 0 ? void 0 : (_this$experienceStore12 = _this$experienceStore11.success(EditorExperience.editSession)) === null || _this$experienceStore12 === void 0 ? void 0 : _this$experienceStore12.finally(() => {
+              var _this$experienceStore13, _this$experienceStore14;
+
+              (_this$experienceStore13 = this.experienceStore) === null || _this$experienceStore13 === void 0 ? void 0 : _this$experienceStore13.start(EditorExperience.editSession);
+              (_this$experienceStore14 = this.experienceStore) === null || _this$experienceStore14 === void 0 ? void 0 : _this$experienceStore14.addMetadata(EditorExperience.editSession, {
+                reliabilityInterval: RELIABILITY_INTERVAL
+              });
+            });
             const reliabilityEvent = {
               action: ACTION.UFO_SESSION_COMPLETE,
               actionSubject: ACTION_SUBJECT.EDITOR,
@@ -483,14 +502,6 @@ export default class ReactEditorView extends React.Component {
             };
             this.dispatchAnalyticsEvent(reliabilityEvent);
           }, RELIABILITY_INTERVAL);
-        }
-
-        if (this.props.editorProps.shouldFocus && view.props.editable && view.props.editable(view.state)) {
-          this.focusTimeoutId = handleEditorFocus(view);
-        }
-
-        if (this.featureFlags.ufo) {
-          this.experienceStore = ExperienceStore.getInstance(view);
         } // Force React to re-render so consumers get a reference to the editor view
 
 

package/dist/es2019/create-editor/create-plugins-list.js

@@ -1,4 +1,4 @@
-import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, helpDialogPlugin, imageUploadPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, listPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tablesPlugin, tasksAndDecisionsPlugin, textColorPlugin, cardPlugin, gridPlugin, statusPlugin, alignmentPlugin, indentationPlugin, analyticsPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, contextPanelPlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, codeBidiWarningPlugin } from '../plugins';
+import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, fragmentMarkPlugin, helpDialogPlugin, imageUploadPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, listPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tablesPlugin, tasksAndDecisionsPlugin, textColorPlugin, cardPlugin, gridPlugin, statusPlugin, alignmentPlugin, indentationPlugin, analyticsPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, contextPanelPlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin } from '../plugins';
 import { isFullPage as fullPageCheck } from '../utils/is-full-page';
 import { GUTTER_SIZE_MOBILE_IN_PX } from '../plugins/base/pm-plugins/scroll-gutter';
 import { createFeatureFlagsFromProps } from '../plugins/feature-flags-context/feature-flags-from-props';
@@ -100,8 +100,6 @@ export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEve
  */
 
 export default function createPluginsList(props, prevProps, createAnalyticsEvent) {
-  var _props$featureFlags;
-
   const appearance = props.appearance;
   const isMobile = appearance === 'mobile';
   const isComment = appearance === 'comment';
@@ -273,8 +271,8 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
   if (props.allowPanel) {
     preset.add([panelPlugin, {
       useLongPressSelection: false,
-      UNSAFE_allowCustomPanel: props.allowPanel.UNSAFE_allowCustomPanel,
-      UNSAFE_allowCustomPanelEdit: props.allowPanel.UNSAFE_allowCustomPanelEdit
+      allowCustomPanel: props.allowPanel.allowCustomPanel,
+      allowCustomPanelEdit: props.allowPanel.allowCustomPanelEdit
     }]);
   }
 
@@ -372,20 +370,38 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
     replacePlusMenuWithElementBrowser: props.elementBrowser && props.elementBrowser.replacePlusMenu || false
   }]);
 
-  if (((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.showAvatarGroupAsPlugin) === true) {
+  const hasBeforePrimaryToolbar = components => {
+    if (components && 'before' in components) {
+      return !!components.before;
+    }
+
+    return false;
+  };
+
+  if (hasBeforePrimaryToolbar(props.primaryToolbarComponents) && !featureFlags.twoLineEditorToolbar) {
+    preset.add([beforePrimaryToolbarPlugin, {
+      beforePrimaryToolbarComponents: props.primaryToolbarComponents.before
+    }]);
+  }
+
+  if (featureFlags.showAvatarGroupAsPlugin === true && !featureFlags.twoLineEditorToolbar) {
     preset.add([avatarGroupPlugin, {
-      collabEdit: props.collabEdit
+      collabEdit: props.collabEdit,
+      takeFullWidth: !hasBeforePrimaryToolbar(props.primaryToolbarComponents)
     }]);
   }
 
   if (props.allowFindReplace) {
-    var _props$featureFlags2;
-
     preset.add([findReplacePlugin, {
-      takeFullWidth: !!((_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.showAvatarGroupAsPlugin) === false
+      takeFullWidth: !!featureFlags.showAvatarGroupAsPlugin === false && !hasBeforePrimaryToolbar(props.primaryToolbarComponents),
+      twoLineEditorToolbar: !!featureFlags.twoLineEditorToolbar
     }]);
   }
 
+  if (props.UNSAFE_allowFragmentMark) {
+    preset.add(fragmentMarkPlugin);
+  }
+
   if (featureFlags.enableViewUpdateSubscription) {
     preset.add([viewUpdateSubscriptionPlugin]);
   }

package/dist/es2019/labs/next/presets/cxhtml.js

@@ -26,8 +26,7 @@ export function useCXHTMLPreset({
     }
   }]);
   preset.add([panelPlugin, {
-    UNSAFE_allowCustomPanel: true,
-    UNSAFE_allowCustomPanelEdit: true
+    allowCustomPanel: true
   }]);
   preset.add(listPlugin);
   preset.add(textColorPlugin);

package/dist/es2019/nodeviews/ReactNodeView.js

@@ -148,7 +148,7 @@ export default class ReactNodeView {
     }, props)) : null;
   }
 
-  update(node, _decorations, validUpdate = () => true) {
+  update(node, _decorations, _innerDecorations, validUpdate = () => true) {
     // @see https://github.com/ProseMirror/prosemirror/issues/648
     const isValidUpdate = this.node.type === node.type && validUpdate(this.node, node);
 

package/dist/es2019/nodeviews/SelectionBasedNodeView.js

@@ -80,6 +80,17 @@ export class SelectionBasedNodeView extends ReactNodeView {
       return this.isSelectedNode(this.view.state.selection) || this.isSelectionInsideNode(from, to);
     });
 
+    _defineProperty(this, "nodeInsideSelection", () => {
+      const {
+        selection
+      } = this.view.state;
+      const {
+        from,
+        to
+      } = selection;
+      return this.isSelectedNode(selection) || this.isNodeInsideSelection(from, to);
+    });
+
     _defineProperty(this, "onSelectionChange", () => {
       this.update(this.node, []);
     });

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

@@ -55,6 +55,7 @@ export let 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/es2019/plugins/annotation/utils.js

@@ -254,7 +254,7 @@ export const isSelectionValid = state => {
     return AnnotationSelectionType.DISABLED;
   }
 
-  if (disallowOnWhitespace && hasWhitespaceNode(selection)) {
+  if (disallowOnWhitespace && hasInvalidWhitespaceNode(selection)) {
     return AnnotationSelectionType.INVALID;
   }
 
@@ -307,16 +307,27 @@ function isEmptyTextSelection(selection, schema) {
  */
 
 
-export function hasWhitespaceNode(selection) {
-  let foundWhitespace = false;
-  selection.content().content.descendants(node => {
+export function hasInvalidWhitespaceNode(selection) {
+  let foundInvalidWhitespace = false;
+  const content = selection.content().content;
+  content.descendants(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.
+      const 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/es2019/plugins/avatar-group/index.js

@@ -18,7 +18,8 @@ const avatarGroup = props => ({
       dispatchAnalyticsEvent: dispatchAnalyticsEvent,
       editorView: editorView,
       eventDispatcher: eventDispatcher,
-      collabEdit: props.collabEdit
+      collabEdit: props.collabEdit,
+      takeFullWidth: props.takeFullWidth
     });
   }
 

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

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '../../analytics';
 const ToolbarButtonWrapper = styled.div`
   display: flex;
-  flex-grow: 1;
+  flex-grow: ${props => props.takeFullWidth ? 1 : 0};
   justify-content: flex-end;
   align-items: center;
   & > div {
@@ -29,7 +29,8 @@ export const 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/es2019/plugins/before-primaryToolbar/index.js

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from 'styled-components';
+export const BeforePrimaryToolbarPluginWrapper = styled.div`
+  display: flex;
+  margin-right: 8px;
+  flex-grow: 1;
+  justify-content: flex-end;
+  align-items: center;
+`;
+export const BeforePrimaryToolbarWrapper = props => /*#__PURE__*/React.createElement(BeforePrimaryToolbarPluginWrapper, {
+  "data-testid": 'before-primary-toolbar-components-plugin'
+}, props.beforePrimaryToolbarComponents);

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/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;