@atlaskit/editor-core 179.1.2 → 180.1.0

package/dist/esm/plugins/text-formatting/ui/Toolbar/dropdown-menu.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import DropdownMenu from '../../../../ui/DropdownMenu';
 import { useMenuState } from './hooks/menu-state';
@@ -18,6 +18,10 @@ export var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref)
     isMenuOpen = _useMenuState2[0],
     toggleMenu = _useMenuState2[1],
     closeMenu = _useMenuState2[2];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpenedByKeyboard = _useState2[0],
+    setIsOpenedByKeyboard = _useState2[1];
   var group = useMemo(function () {
     return [{
       items: items
@@ -43,13 +47,29 @@ export var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref)
     zIndex: akEditorMenuZIndex,
     fitHeight: 188,
     fitWidth: 136,
-    shouldUseDefaultRole: true
+    shouldUseDefaultRole: true,
+    shouldFocusFirstItem: function shouldFocusFirstItem() {
+      if (isOpenedByKeyboard) {
+        setIsOpenedByKeyboard(false);
+      }
+      return isOpenedByKeyboard;
+    }
   }, /*#__PURE__*/React.createElement(MoreButton, {
     isSelected: isMenuOpen || hasFormattingActive,
     label: moreButtonLabel,
     isReducedSpacing: isReducedSpacing,
     isDisabled: false,
-    onClick: toggleMenu,
+    onClick: function onClick() {
+      toggleMenu();
+      setIsOpenedByKeyboard(false);
+    },
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        toggleMenu();
+        setIsOpenedByKeyboard(true);
+      }
+    },
     "aria-expanded": isMenuOpen
   }));
 });

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

@@ -19,9 +19,11 @@ import { SingleToolbarButtons } from './single-toolbar-buttons';
 import { MoreButton } from './more-button';
 import { FormattingTextDropdownMenu } from './dropdown-menu';
 import { toolbarMessages } from './toolbar-messages';
-import { usePreviousObjectState, compareItemsArrays, isArrayContainsContent } from '../../utils';
+import { compareItemsArrays, isArrayContainsContent } from '../../utils';
 import Announcer from '../../../../utils/announcer/announcer';
+import { usePreviousState } from '@atlaskit/editor-common/hooks';
 var ToolbarFormatting = function ToolbarFormatting(_ref) {
+  var _usePreviousState;
   var shouldUseResponsiveToolbar = _ref.shouldUseResponsiveToolbar,
     popupsMountPoint = _ref.popupsMountPoint,
     popupsBoundariesElement = _ref.popupsBoundariesElement,
@@ -68,7 +70,7 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
   var activeItems = [].concat(_toConsumableArray(dropdownItems), _toConsumableArray(singleItems)).filter(function (item) {
     return item.isActive;
   });
-  var prevActiveItems = usePreviousObjectState(activeItems);
+  var prevActiveItems = (_usePreviousState = usePreviousState(activeItems)) !== null && _usePreviousState !== void 0 ? _usePreviousState : [];
   var fromSuperscriptToSubscript = isArrayContainsContent(activeItems, 'Subscript') && isArrayContainsContent(prevActiveItems, 'Superscript');
   var fromSubscriptToSuperscript = isArrayContainsContent(activeItems, 'Superscript') && isArrayContainsContent(prevActiveItems, 'Subscript');
   var comparedItems;

package/dist/esm/plugins/text-formatting/ui/Toolbar/more-button.js

@@ -10,11 +10,13 @@ export var MoreButton = /*#__PURE__*/React.memo(function (_ref) {
     isReducedSpacing = _ref.isReducedSpacing,
     isSelected = _ref.isSelected,
     isDisabled = _ref.isDisabled,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown;
   return jsx(ToolbarButton, {
     disabled: isDisabled,
     selected: isSelected,
     onClick: onClick,
+    onKeyDown: onKeyDown,
     spacing: isReducedSpacing ? 'none' : 'default',
     title: label,
     iconBefore: jsx("div", {

package/dist/esm/plugins/text-formatting/utils.js

@@ -1,4 +1,3 @@
-import { useRef, useEffect } from 'react';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { FORMATTING_MARK_TYPES, FORMATTING_NODE_TYPES } from './commands/clear-formatting';
 export var nodeLen = function nodeLen(node) {
@@ -112,13 +111,6 @@ var marksArePresent = function marksArePresent(state) {
 export var checkFormattingIsPresent = function checkFormattingIsPresent(state) {
   return marksArePresent(state) || blockStylingIsPresent(state);
 };
-export var usePreviousObjectState = function usePreviousObjectState(value) {
-  var ref = useRef([]);
-  useEffect(function () {
-    ref.current = value;
-  });
-  return ref.current;
-};
 export var compareItemsArrays = function compareItemsArrays(items, prevItems) {
   return items && items.filter(function (item) {
     return !prevItems.includes(item);

package/dist/esm/plugins/toolbar-lists-indentation/ui/ToolbarDropdown.js

@@ -26,6 +26,10 @@ export function ToolbarDropdown(props) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isDropdownOpen = _React$useState2[0],
     setIsDropdownOpen = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isOpenedByKeyboard = _React$useState4[0],
+    setOpenedByKeyboard = _React$useState4[1];
   var labelLists = formatMessage(listMessages.lists);
   var onOpenChange = function onOpenChange(attrs) {
     setIsDropdownOpen(attrs.isDropdownOpen);
@@ -35,6 +39,13 @@ export function ToolbarDropdown(props) {
       isDropdownOpen: !isDropdownOpen
     });
   };
+  var handleOnKeyDown = function handleOnKeyDown(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      setIsDropdownOpen(!isDropdownOpen);
+      setOpenedByKeyboard(true);
+    }
+  };
   var items = useItems(props);
   var handleOnItemActivated = function handleOnItemActivated(_ref) {
     var item = _ref.item,
@@ -58,7 +69,13 @@ export function ToolbarDropdown(props) {
     onOpenChange: onOpenChange,
     fitHeight: 188,
     fitWidth: 175,
-    shouldUseDefaultRole: true
+    shouldUseDefaultRole: true,
+    shouldFocusFirstItem: function shouldFocusFirstItem() {
+      if (isOpenedByKeyboard) {
+        setOpenedByKeyboard(false);
+      }
+      return isOpenedByKeyboard;
+    }
   }, jsx(ToolbarButton, {
     spacing: isReducedSpacing ? 'none' : 'default',
     selected: bulletListActive || orderedListActive,
@@ -67,6 +84,7 @@ export function ToolbarDropdown(props) {
     "aria-label": labelLists,
     disabled: disabled,
     onClick: handleTriggerClick,
+    onKeyDown: handleOnKeyDown,
     title: labelLists,
     iconBefore: jsx("span", {
       css: wrapperStyle

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

@@ -20,7 +20,7 @@ import { getPluginState } from './utils';
 import { useItemInsert } from './ui/hooks/use-item-insert';
 import { updateSelectedIndex } from './commands/update-selected-index';
 import { StatsModifier } from './stats-modifier';
-import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, fireAnalyticsEvent } from '../analytics';
+import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
   var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
   var editorView = _ref.editorView,

package/dist/esm/plugins/type-ahead/ui/InputQuery.js

@@ -1,4 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import React, { useRef, useCallback, Fragment, useLayoutEffect, useState } from 'react';
@@ -12,7 +11,21 @@ import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
 import { AssistiveText } from './AssistiveText';
 import { typeAheadListMessages } from '../messages';
 import { useIntl } from 'react-intl-next';
-import * as colors from '@atlaskit/theme/colors';
+import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+var querySpan = css({
+  outline: 'none',
+  '& input': {
+    width: '5px',
+    border: 'none',
+    background: 'transparent',
+    padding: 0,
+    margin: 0,
+    // ED-17022 Fixes firefox caret position
+    fontSize: '1em',
+    height: blockNodesVerticalMargin,
+    caretColor: "var(--ds-text-accent-blue, #0052CC)"
+  }
+});
 var isNavigationKey = function isNavigationKey(event) {
   return ['Enter', 'Tab', 'ArrowDown', 'ArrowUp'].includes(event.key);
 };
@@ -29,10 +42,6 @@ var isUndoRedoShortcut = function isUndoRedoShortcut(event) {
   }
   return false;
 };
-var isSelectAllShortcut = function isSelectAllShortcut(event) {
-  var key = keyNameNormalized(event);
-  return (event.ctrlKey || event.metaKey) && key === 'a';
-};
 var getAriaLabel = function getAriaLabel(triggerPrefix, intl) {
   switch (triggerPrefix) {
     case '@':
@@ -58,29 +67,31 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     onUndoRedo = _ref.onUndoRedo,
     editorView = _ref.editorView,
     items = _ref.items;
-  var ref = useRef(document.createElement('input'));
-  var sizeSpanRef = useRef(document.createElement('span'));
-  var _useState = useState([]),
+  var ref = useRef(document.createElement('span'));
+  var inputRef = useRef(null);
+  var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    redoBuffer = _useState2[0],
-    setRedoBuffer = _useState2[1];
-  var _useState3 = useState(reopenQuery),
-    _useState4 = _slicedToArray(_useState3, 2),
-    query = _useState4[0],
-    setQuery = _useState4[1];
-  var onChange = useCallback(function (event) {
-    var text = event.currentTarget.value;
-    sizeSpanRef.current.textContent = text;
-    setQuery(text);
+    query = _useState2[0],
+    setQuery = _useState2[1];
+  var cleanedInputContent = useCallback(function () {
+    var _ref$current;
+    var raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
+    return raw;
+  }, []);
+  var onKeyUp = useCallback(function (event) {
+    var text = cleanedInputContent();
     onQueryChange(text);
-  }, [onQueryChange]);
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isInFocus = _useState6[0],
-    setInFocus = _useState6[1];
+  }, [onQueryChange, cleanedInputContent]);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isInFocus = _useState4[0],
+    setInFocus = _useState4[1];
   var checkKeyEvent = useCallback(function (event) {
+    var _ref$current2;
     var key = keyNameNormalized(event);
-    var text = ref.current.value;
+    var sel = document.getSelection();
+    var raw = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.textContent) || '';
+    var text = cleanedInputContent();
     var stopDefault = false;
     var _getPluginState = getPluginState(editorView.state),
       selectedIndex = _getPluginState.selectedIndex;
@@ -111,7 +122,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
         stopDefault = true;
         break;
       case 'Backspace':
-        if (text.length === 0 || ref.current.selectionStart === 0) {
+        if (raw.length === 0 || (sel === null || sel === void 0 ? void 0 : sel.anchorOffset) === 0) {
           event.stopPropagation();
           event.preventDefault();
           cancel({
@@ -150,70 +161,24 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
         }
         break;
     }
-    if (isSelectAllShortcut(event)) {
-      cancel({
-        forceFocusOnEditor: true,
-        addPrefixTrigger: true,
-        text: ref.current.value,
-        setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED
-      });
-      return true;
-    }
     var undoRedoType = isUndoRedoShortcut(event);
-    var hasReopenQuery = reopenQuery && reopenQuery.length > 0;
-    if (onUndoRedo && undoRedoType) {
-      if (!hasReopenQuery && undoRedoType === 'historyUndo' && text.length > 0) {
-        setRedoBuffer(function (buffer) {
-          return [ref.current.value].concat(_toConsumableArray(buffer));
-        });
-        var undoValue = text.substring(0, text.length - 1);
-        ref.current.value = undoValue;
-        sizeSpanRef.current.textContent = undoValue;
-        stopDefault = true;
-      } else if (undoRedoType === 'historyRedo' && redoBuffer.length > 0) {
-        var redoValue = redoBuffer[0];
-        ref.current.value = redoValue;
-        sizeSpanRef.current.textContent = redoValue;
-        setRedoBuffer(function (buffer) {
-          return buffer.slice(1);
-        });
-        stopDefault = true;
-      } else {
-        stopDefault = onUndoRedo(undoRedoType);
-      }
+    if (onUndoRedo && undoRedoType && onUndoRedo(undoRedoType)) {
+      stopDefault = true;
     }
     if (isNavigationKey(event) || stopDefault) {
       event.stopPropagation();
       event.preventDefault();
       return false;
     }
-  }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, editorView.state, redoBuffer, reopenQuery]);
+  }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
   var onClick = useCallback(function (event) {
-    var _ref$current;
+    var _inputRef$current;
     event.stopPropagation();
     event.preventDefault();
     onQueryFocus();
-    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     return false;
   }, [onQueryFocus]);
-  var queryStyle = css({
-    '&&': {
-      outline: 'none',
-      position: 'absolute',
-      fontFamily: 'inherit',
-      fontSize: 'inherit',
-      fontWeight: 'inherit',
-      letterSpacing: 'inherit',
-      padding: 0,
-      height: '100%',
-      width: '100%',
-      top: 0,
-      left: 0,
-      background: 'transparent',
-      border: 'none',
-      color: "".concat("var(--ds-link, ".concat(colors.B400, ")"))
-    }
-  });
   useLayoutEffect(function () {
     if (!ref.current) {
       return;
@@ -225,18 +190,18 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     var keyDown = function keyDown(event) {
       var key = keyNameNormalized(event);
       if (['ArrowLeft', 'ArrowRight'].includes(key) && document.getSelection && document.getSelection()) {
-        var _ref$current2, _ref$current3;
-        var q = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.value) || '';
-        var anchorOffset = (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.selectionStart;
-        var isMovingRight = 'ArrowRight' === key && anchorOffset === q.length;
-        var isMovingLeft = 'ArrowLeft' === key && (anchorOffset === 0 || event.metaKey);
+        var _ref$current3;
+        var q = ((_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.textContent) || '';
+        var sel = document.getSelection();
+        var isMovingRight = sel && 'ArrowRight' === key && sel.anchorOffset === q.length;
+        var isMovingLeft = sel && 'ArrowLeft' === key && (sel.anchorOffset === 0 || event.metaKey);
         if (!isMovingRight && !isMovingLeft) {
           return;
         }
         cancel({
           forceFocusOnEditor: true,
           addPrefixTrigger: true,
-          text: ref.current.value,
+          text: cleanedInputContent(),
           setSelectionAt: isMovingRight ? CloseSelectionOptions.AFTER_TEXT_INSERTED : CloseSelectionOptions.BEFORE_TEXT_INSERTED
         });
         event.preventDefault();
@@ -267,8 +232,8 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
       }
       cancel({
         addPrefixTrigger: true,
-        text: ref.current.value,
-        setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
+        text: cleanedInputContent(),
+        setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED,
         forceFocusOnEditor: false
       });
     };
@@ -284,7 +249,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
       var _target$textContent;
       setInFocus(false);
       var target = e.target;
-      if (e.isComposing || !(target instanceof HTMLInputElement)) {
+      if (e.isComposing || !(target instanceof HTMLElement)) {
         return;
       }
       if (e.inputType === 'historyUndo' && ((_target$textContent = target.textContent) === null || _target$textContent === void 0 ? void 0 : _target$textContent.length) === 0) {
@@ -293,6 +258,23 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
         close();
         return;
       }
+      if (e.data != null && inputRef.current === null) {
+        setQuery('');
+
+        // We need to change the content on Safari
+        // and set the cursor at the right place
+        if (browser.safari) {
+          e.preventDefault();
+          var dataElement = document.createTextNode(e.data);
+          element.appendChild(dataElement);
+          var sel = window.getSelection();
+          var range = document.createRange();
+          range.setStart(dataElement, dataElement.length);
+          range.collapse(true);
+          sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
+          sel === null || sel === void 0 ? void 0 : sel.addRange(range);
+        }
+      }
     };
     var onInput = null;
     if (browser.safari) {
@@ -302,7 +284,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
       var _onInput = function _onInput(e) {
         var _target$textContent2;
         var target = e.target;
-        if (e.isComposing || !(target instanceof HTMLInputElement)) {
+        if (e.isComposing || !(target instanceof HTMLElement)) {
           return;
         }
         if (e.inputType === 'historyUndo' && ((_target$textContent2 = target.textContent) === null || _target$textContent2 === void 0 ? void 0 : _target$textContent2.length) === 1) {
@@ -327,12 +309,11 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
         element.removeEventListener('input', onInput);
       }
     };
-  }, [triggerQueryPrefix, ref.current.value, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
+  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
   useLayoutEffect(function () {
     var hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
     if (ref.current && forceFocus) {
-      ref.current.value = hasReopenQuery ? reopenQuery : '';
-      sizeSpanRef.current.textContent = hasReopenQuery ? reopenQuery : '';
+      setQuery(hasReopenQuery ? reopenQuery : null);
       requestAnimationFrame(function () {
         if (!(ref !== null && ref !== void 0 && ref.current)) {
           return;
@@ -360,20 +341,10 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
    */
   return jsx(Fragment, null, triggerQueryPrefix, jsx("span", {
-    style: {
-      position: 'relative'
-    }
-  }, jsx("span", {
-    ref: sizeSpanRef,
-    "aria-hidden": true,
-    style: {
-      marginLeft: '1px',
-      visibility: 'hidden'
-    }
-  }), jsx("input", {
-    css: queryStyle,
+    css: querySpan,
+    contentEditable: true,
     ref: ref,
-    onChange: onChange,
+    onKeyUp: onKeyUp,
     onClick: onClick,
     role: "combobox",
     "aria-controls": TYPE_AHEAD_DECORATION_ELEMENT_ID,
@@ -381,9 +352,11 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     "aria-expanded": items.length !== 0,
     "aria-labelledby": assistiveHintID,
     suppressContentEditableWarning: true,
-    "data-query-prefix": triggerQueryPrefix,
-    value: query
-  })), jsx("span", {
+    "data-query-prefix": triggerQueryPrefix
+  }, query === null ? jsx("input", {
+    ref: inputRef,
+    type: "text"
+  }) : query), jsx("span", {
     id: assistiveHintID,
     style: {
       display: 'none'

package/dist/esm/types/get-editor-props.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/ChromeCollapsed/index.js

@@ -48,6 +48,7 @@ var ChromeCollapsed = /*#__PURE__*/function (_PureComponent) {
     value: function render() {
       var placeholder = this.props.text || this.props.intl.formatMessage(messages.chromeCollapsedPlaceholder);
       return jsx("input", {
+        "data-testid": "chrome-collapsed",
         css: inputStyle,
         ref: this.handleInputRef,
         onFocus: this.focusHandler,

package/dist/esm/ui/CollapsedEditor/index.js

@@ -10,6 +10,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { IntlProviderIfMissingWrapper } from '@atlaskit/editor-common/ui';
 import React from 'react';
 import Editor from '../../editor';
+import EditorNext from '../../editor-next';
+import EditorMigrationComponent from '../../editor-next/editor-migration-component';
 import EditorWithActions from '../../labs/EditorWithActions';
 import ChromeCollapsed from '../ChromeCollapsed';
 var CollapsedEditor = /*#__PURE__*/function (_React$Component) {
@@ -31,28 +33,20 @@ var CollapsedEditor = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
   _createClass(CollapsedEditor, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (!this.props.isExpanded && nextProps.isExpanded) {
-        this.shouldTriggerExpandEvent = true;
-      }
-    }
-  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
-      if (this.shouldTriggerExpandEvent && this.editorComponent) {
-        this.shouldTriggerExpandEvent = false;
-        if (this.props.onExpand) {
-          this.props.onExpand();
-        }
+      if (this.props.isExpanded && this.editorComponent && (!this.previouslyExpanded || this.previouslyExpanded === undefined)) {
+        var _this$props$onExpand, _this$props;
+        (_this$props$onExpand = (_this$props = this.props).onExpand) === null || _this$props$onExpand === void 0 ? void 0 : _this$props$onExpand.call(_this$props);
       }
+      this.previouslyExpanded = this.props.isExpanded;
     }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
       var child = React.Children.only(this.props.children);
-      if (child.type !== Editor && child.type !== EditorWithActions) {
+      if (child.type !== Editor && child.type !== EditorWithActions && child.type !== EditorNext && child.type !== EditorMigrationComponent) {
         throw new Error('Expected child to be of type `Editor`');
       }
       if (!this.props.isExpanded) {