@atlaskit/editor-core 179.1.2 → 180.1.0

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

@@ -210,5 +210,5 @@ const decorateWithPluginOptions = (plugin, options) => {
   };
   return plugin;
 };
-const placeholderTextPlugin = options => decorateWithPluginOptions(basePlaceholderTextPlugin(options), options);
+const placeholderTextPlugin = (options, api) => decorateWithPluginOptions(basePlaceholderTextPlugin(options, api), options);
 export default placeholderTextPlugin;

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

@@ -28,7 +28,10 @@ const baseStatusPlugin = options => ({
     }];
   },
   contentComponent({
-    editorView
+    editorView,
+    popupsMountPoint,
+    popupsBoundariesElement,
+    popupsScrollableElement
   }) {
     const domAtPos = editorView.domAtPos.bind(editorView);
     return /*#__PURE__*/React.createElement(WithPluginState, {
@@ -60,6 +63,9 @@ const baseStatusPlugin = options => ({
           defaultText: text,
           defaultColor: color,
           defaultLocalId: localId,
+          mountTo: popupsMountPoint,
+          boundariesElement: popupsBoundariesElement,
+          scrollableElement: popupsScrollableElement,
           onSelect: status => {
             updateStatus(status)(editorView.state, editorView.dispatch);
           },
@@ -106,5 +112,5 @@ const decorateWithPluginOptions = (plugin, options) => {
   };
   return plugin;
 };
-const statusPlugin = options => decorateWithPluginOptions(baseStatusPlugin(options), options);
+const statusPlugin = (options, api) => decorateWithPluginOptions(baseStatusPlugin(options, api), options);
 export default statusPlugin;

package/dist/es2019/plugins/status/ui/statusPicker.js

@@ -182,7 +182,10 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
   render() {
     const {
       isNew,
-      target
+      target,
+      mountTo,
+      boundariesElement,
+      scrollableElement
     } = this.props;
     const {
       color,
@@ -194,7 +197,10 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
       handleClickOutside: this.handleClickOutside,
       handleEscapeKeydown: this.handleEscapeKeydown,
       zIndex: akEditorFloatingDialogZIndex,
-      fitHeight: 40
+      fitHeight: 40,
+      mountTo: mountTo,
+      boundariesElement: boundariesElement,
+      scrollableElement: scrollableElement
     }, jsx("div", {
       css: pickerContainer,
       onClick: this.handlePopupClick

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

@@ -3,6 +3,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { defineMessages, injectIntl } from 'react-intl-next';
+import { getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
+import { ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
+import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ColorPalette from '../../../../ui/ColorPalette';
@@ -27,7 +30,8 @@ export class ToolbarTextColor extends React.Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "state", {
-      isOpen: false
+      isOpen: false,
+      isOpenedByKeyboard: false
     });
     _defineProperty(this, "toolbarItemRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "changeColor", color => commands.changeColor(color)(this.props.editorView.state, this.props.editorView.dispatch));
@@ -39,6 +43,7 @@ export class ToolbarTextColor extends React.Component {
       });
     });
     _defineProperty(this, "changeTextColor", (color, disabled) => {
+      var _this$toolbarItemRef, _this$toolbarItemRef$;
       if (!disabled) {
         var _this$props$editorVie;
         const {
@@ -60,6 +65,7 @@ export class ToolbarTextColor extends React.Component {
         //To set the focus on the textcolor button when the menu is closed by 'Esc' only to meet aria guidelines
         (_this$props$editorVie = this.props.editorView) === null || _this$props$editorVie === void 0 ? void 0 : _this$props$editorVie.focus();
       }
+      (_this$toolbarItemRef = this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 ? void 0 : (_this$toolbarItemRef$ = _this$toolbarItemRef.current) === null || _this$toolbarItemRef$ === void 0 ? void 0 : _this$toolbarItemRef$.focus();
       return false;
     });
     _defineProperty(this, "toggleOpen", () => {
@@ -68,6 +74,15 @@ export class ToolbarTextColor extends React.Component {
         logCloseEvent: true
       });
     });
+    _defineProperty(this, "onKeyDown", event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        this.setState({
+          isOpenedByKeyboard: true
+        });
+        this.toggleOpen();
+      }
+    });
     _defineProperty(this, "handleOpenChange", ({
       isOpen,
       logCloseEvent,
@@ -76,14 +91,19 @@ export class ToolbarTextColor extends React.Component {
       this.setState({
         isOpen
       });
+      if (!isOpen) {
+        this.setState({
+          isOpenedByKeyboard: false
+        });
+      }
       if (logCloseEvent) {
         this.dispatchAnalyticsEvent(this.buildAnalyticsPalette(isOpen ? ACTION.OPENED : ACTION.CLOSED, {
           noSelect: isOpen === false
         }));
       }
       if (!isOpen && event instanceof KeyboardEvent && (event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
-        var _this$toolbarItemRef, _this$toolbarItemRef$;
-        (_this$toolbarItemRef = this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 ? void 0 : (_this$toolbarItemRef$ = _this$toolbarItemRef.current) === null || _this$toolbarItemRef$ === void 0 ? void 0 : _this$toolbarItemRef$.focus();
+        var _this$toolbarItemRef2, _this$toolbarItemRef3;
+        (_this$toolbarItemRef2 = this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 ? void 0 : (_this$toolbarItemRef3 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef3 === void 0 ? void 0 : _this$toolbarItemRef3.focus();
       }
     });
     _defineProperty(this, "hide", e => {
@@ -98,20 +118,21 @@ export class ToolbarTextColor extends React.Component {
           isOpen: false
         });
         if (e instanceof KeyboardEvent && e.key === 'Escape') {
-          var _this$toolbarItemRef2, _this$toolbarItemRef3;
-          (_this$toolbarItemRef2 = this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 ? void 0 : (_this$toolbarItemRef3 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef3 === void 0 ? void 0 : _this$toolbarItemRef3.focus();
+          var _this$toolbarItemRef4, _this$toolbarItemRef5;
+          (_this$toolbarItemRef4 = this.toolbarItemRef) === null || _this$toolbarItemRef4 === void 0 ? void 0 : (_this$toolbarItemRef5 = _this$toolbarItemRef4.current) === null || _this$toolbarItemRef5 === void 0 ? void 0 : _this$toolbarItemRef5.focus();
         }
       }
     });
     _defineProperty(this, "hideonEsc", e => {
-      var _this$toolbarItemRef4, _this$toolbarItemRef5;
+      var _this$toolbarItemRef6, _this$toolbarItemRef7;
       this.hide(e);
-      (_this$toolbarItemRef4 = this.toolbarItemRef) === null || _this$toolbarItemRef4 === void 0 ? void 0 : (_this$toolbarItemRef5 = _this$toolbarItemRef4.current) === null || _this$toolbarItemRef5 === void 0 ? void 0 : _this$toolbarItemRef5.focus();
+      (_this$toolbarItemRef6 = this.toolbarItemRef) === null || _this$toolbarItemRef6 === void 0 ? void 0 : (_this$toolbarItemRef7 = _this$toolbarItemRef6.current) === null || _this$toolbarItemRef7 === void 0 ? void 0 : _this$toolbarItemRef7.focus();
     });
   }
   render() {
     const {
-      isOpen
+      isOpen,
+      isOpenedByKeyboard
     } = this.state;
     const {
       popupsMountPoint,
@@ -138,6 +159,10 @@ export class ToolbarTextColor extends React.Component {
       fitWidth = 242;
     }
     const selectedColor = pluginState.color !== pluginState.defaultColor && pluginState.color;
+    const {
+      selectedRowIndex,
+      selectedColumnIndex
+    } = getSelectedRowAndColumnFromPalette(palette, pluginState.color);
     return jsx("span", {
       css: wrapperStyle
     }, jsx(Dropdown, {
@@ -151,6 +176,13 @@ export class ToolbarTextColor extends React.Component {
       fitWidth: fitWidth,
       onOpenChange: this.onOpenChange,
       closeOnTab: true,
+      arrowKeyNavigationProviderOptions: {
+        type: ArrowKeyNavigationType.COLOR,
+        selectedRowIndex,
+        selectedColumnIndex,
+        isOpenedByKeyboard,
+        isPopupPositioned: true
+      },
       trigger: jsx(ToolbarButton, {
         buttonId: TOOLBAR_BUTTON.TEXT_COLOR,
         spacing: isReducedSpacing ? 'none' : 'default',
@@ -161,6 +193,7 @@ export class ToolbarTextColor extends React.Component {
         "aria-haspopup": true,
         title: labelTextColor,
         onClick: this.toggleOpen,
+        onKeyDown: this.onKeyDown,
         ref: this.toolbarItemRef,
         iconBefore: jsx("div", {
           css: triggerWrapperStyles
@@ -181,6 +214,7 @@ export class ToolbarTextColor extends React.Component {
       onClick: color => this.changeTextColor(color, pluginState.disabled),
       selectedColor: pluginState.color,
       textPalette: true,
+      hexToPaletteColor: hexToEditorTextPaletteColor,
       useSomewhatSemanticTextColorNames: useSomewhatSemanticTextColorNames
     }))), jsx("span", {
       css: separatorStyles

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

@@ -1,4 +1,4 @@
-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';
@@ -14,6 +14,7 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
   popupsScrollableElement
 }) => {
   const [isMenuOpen, toggleMenu, closeMenu] = useMenuState();
+  const [isOpenedByKeyboard, setIsOpenedByKeyboard] = useState(false);
   const group = useMemo(() => [{
     items
   }], [items]);
@@ -37,13 +38,29 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
     zIndex: akEditorMenuZIndex,
     fitHeight: 188,
     fitWidth: 136,
-    shouldUseDefaultRole: true
+    shouldUseDefaultRole: true,
+    shouldFocusFirstItem: () => {
+      if (isOpenedByKeyboard) {
+        setIsOpenedByKeyboard(false);
+      }
+      return isOpenedByKeyboard;
+    }
   }, /*#__PURE__*/React.createElement(MoreButton, {
     isSelected: isMenuOpen || hasFormattingActive,
     label: moreButtonLabel,
     isReducedSpacing: isReducedSpacing,
     isDisabled: false,
-    onClick: toggleMenu,
+    onClick: () => {
+      toggleMenu();
+      setIsOpenedByKeyboard(false);
+    },
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        toggleMenu();
+        setIsOpenedByKeyboard(true);
+      }
+    },
     "aria-expanded": isMenuOpen
   }));
 });

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

@@ -10,8 +10,9 @@ 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';
 const ToolbarFormatting = ({
   shouldUseResponsiveToolbar,
   popupsMountPoint,
@@ -23,6 +24,7 @@ const ToolbarFormatting = ({
   isToolbarDisabled,
   intl
 }) => {
+  var _usePreviousState;
   const editorState = useMemo(() => editorView.state, [editorView.state]);
   const [message, setMessage] = useState('');
   const defaultIcons = useFormattingIcons({
@@ -54,7 +56,7 @@ const ToolbarFormatting = ({
   const superscriptOffSubscriptOnStatus = intl.formatMessage(toolbarMessages.superscriptOffSubscriptOn);
   const subscriptOffSuperscriptOnStatus = intl.formatMessage(toolbarMessages.subscriptOffSuperscriptOn);
   const activeItems = [...dropdownItems, ...singleItems].filter(item => item.isActive);
-  const prevActiveItems = usePreviousObjectState(activeItems);
+  const prevActiveItems = (_usePreviousState = usePreviousState(activeItems)) !== null && _usePreviousState !== void 0 ? _usePreviousState : [];
   const fromSuperscriptToSubscript = isArrayContainsContent(activeItems, 'Subscript') && isArrayContainsContent(prevActiveItems, 'Superscript');
   const fromSubscriptToSuperscript = isArrayContainsContent(activeItems, 'Superscript') && isArrayContainsContent(prevActiveItems, 'Subscript');
   let comparedItems;

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

@@ -10,12 +10,14 @@ export const MoreButton = /*#__PURE__*/React.memo(({
   isReducedSpacing,
   isSelected,
   isDisabled,
-  onClick
+  onClick,
+  onKeyDown
 }) => {
   return jsx(ToolbarButton, {
     disabled: isDisabled,
     selected: isSelected,
     onClick: onClick,
+    onKeyDown: onKeyDown,
     spacing: isReducedSpacing ? 'none' : 'default',
     title: label,
     iconBefore: jsx("div", {

package/dist/es2019/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 const nodeLen = node => {
@@ -116,13 +115,6 @@ const marksArePresent = state => {
 export const checkFormattingIsPresent = state => {
   return marksArePresent(state) || blockStylingIsPresent(state);
 };
-export const usePreviousObjectState = value => {
-  const ref = useRef([]);
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};
 export const compareItemsArrays = (items, prevItems) => {
   return items && items.filter(item => !prevItems.includes(item));
 };

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

@@ -25,6 +25,7 @@ export function ToolbarDropdown(props) {
     onItemActivated
   } = props;
   const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [isOpenedByKeyboard, setOpenedByKeyboard] = React.useState(false);
   const labelLists = formatMessage(listMessages.lists);
   const onOpenChange = attrs => {
     setIsDropdownOpen(attrs.isDropdownOpen);
@@ -34,6 +35,13 @@ export function ToolbarDropdown(props) {
       isDropdownOpen: !isDropdownOpen
     });
   };
+  const handleOnKeyDown = event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      setIsDropdownOpen(!isDropdownOpen);
+      setOpenedByKeyboard(true);
+    }
+  };
   const items = useItems(props);
   const handleOnItemActivated = ({
     item,
@@ -57,7 +65,13 @@ export function ToolbarDropdown(props) {
     onOpenChange: onOpenChange,
     fitHeight: 188,
     fitWidth: 175,
-    shouldUseDefaultRole: true
+    shouldUseDefaultRole: true,
+    shouldFocusFirstItem: () => {
+      if (isOpenedByKeyboard) {
+        setOpenedByKeyboard(false);
+      }
+      return isOpenedByKeyboard;
+    }
   }, jsx(ToolbarButton, {
     spacing: isReducedSpacing ? 'none' : 'default',
     selected: bulletListActive || orderedListActive,
@@ -66,6 +80,7 @@ export function ToolbarDropdown(props) {
     "aria-label": labelLists,
     disabled: disabled,
     onClick: handleTriggerClick,
+    onKeyDown: handleOnKeyDown,
     title: labelLists,
     iconBefore: jsx("span", {
       css: wrapperStyle

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

@@ -19,7 +19,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';
 const TypeAheadMenu = /*#__PURE__*/React.memo(({
   editorView,
   popupMountRef,

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

@@ -10,7 +10,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';
+const 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)"
+  }
+});
 const isNavigationKey = event => {
   return ['Enter', 'Tab', 'ArrowDown', 'ArrowUp'].includes(event.key);
 };
@@ -27,10 +41,6 @@ const isUndoRedoShortcut = event => {
   }
   return false;
 };
-const isSelectAllShortcut = event => {
-  const key = keyNameNormalized(event);
-  return (event.ctrlKey || event.metaKey) && key === 'a';
-};
 const getAriaLabel = (triggerPrefix, intl) => {
   switch (triggerPrefix) {
     case '@':
@@ -57,20 +67,25 @@ export const InputQuery = /*#__PURE__*/React.memo(({
   editorView,
   items
 }) => {
-  const ref = useRef(document.createElement('input'));
-  const sizeSpanRef = useRef(document.createElement('span'));
-  const [redoBuffer, setRedoBuffer] = useState([]);
-  const [query, setQuery] = useState(reopenQuery);
-  const onChange = useCallback(event => {
-    const text = event.currentTarget.value;
-    sizeSpanRef.current.textContent = text;
-    setQuery(text);
+  const ref = useRef(document.createElement('span'));
+  const inputRef = useRef(null);
+  const [query, setQuery] = useState(null);
+  const cleanedInputContent = useCallback(() => {
+    var _ref$current;
+    const raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
+    return raw;
+  }, []);
+  const onKeyUp = useCallback(event => {
+    const text = cleanedInputContent();
     onQueryChange(text);
-  }, [onQueryChange]);
+  }, [onQueryChange, cleanedInputContent]);
   const [isInFocus, setInFocus] = useState(false);
   const checkKeyEvent = useCallback(event => {
+    var _ref$current2;
     const key = keyNameNormalized(event);
-    const text = ref.current.value;
+    const sel = document.getSelection();
+    const raw = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.textContent) || '';
+    const text = cleanedInputContent();
     let stopDefault = false;
     const {
       selectedIndex
@@ -102,7 +117,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         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({
@@ -141,66 +156,24 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         }
         break;
     }
-    if (isSelectAllShortcut(event)) {
-      cancel({
-        forceFocusOnEditor: true,
-        addPrefixTrigger: true,
-        text: ref.current.value,
-        setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED
-      });
-      return true;
-    }
     const undoRedoType = isUndoRedoShortcut(event);
-    const hasReopenQuery = reopenQuery && reopenQuery.length > 0;
-    if (onUndoRedo && undoRedoType) {
-      if (!hasReopenQuery && undoRedoType === 'historyUndo' && text.length > 0) {
-        setRedoBuffer(buffer => [ref.current.value, ...buffer]);
-        const undoValue = text.substring(0, text.length - 1);
-        ref.current.value = undoValue;
-        sizeSpanRef.current.textContent = undoValue;
-        stopDefault = true;
-      } else if (undoRedoType === 'historyRedo' && redoBuffer.length > 0) {
-        const redoValue = redoBuffer[0];
-        ref.current.value = redoValue;
-        sizeSpanRef.current.textContent = redoValue;
-        setRedoBuffer(buffer => 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]);
   const onClick = useCallback(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]);
-  const 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: `${`var(--ds-link, ${colors.B400})`}`
-    }
-  });
   useLayoutEffect(() => {
     if (!ref.current) {
       return;
@@ -214,18 +187,18 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     const keyDown = event => {
       const key = keyNameNormalized(event);
       if (['ArrowLeft', 'ArrowRight'].includes(key) && document.getSelection && document.getSelection()) {
-        var _ref$current2, _ref$current3;
-        const q = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.value) || '';
-        const anchorOffset = (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.selectionStart;
-        const isMovingRight = 'ArrowRight' === key && anchorOffset === q.length;
-        const isMovingLeft = 'ArrowLeft' === key && (anchorOffset === 0 || event.metaKey);
+        var _ref$current3;
+        const q = ((_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.textContent) || '';
+        const sel = document.getSelection();
+        const isMovingRight = sel && 'ArrowRight' === key && sel.anchorOffset === q.length;
+        const 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();
@@ -258,8 +231,8 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       }
       cancel({
         addPrefixTrigger: true,
-        text: ref.current.value,
-        setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
+        text: cleanedInputContent(),
+        setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED,
         forceFocusOnEditor: false
       });
     };
@@ -277,7 +250,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       const {
         target
       } = e;
-      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) {
@@ -286,6 +259,23 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         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();
+          const dataElement = document.createTextNode(e.data);
+          element.appendChild(dataElement);
+          const sel = window.getSelection();
+          const 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);
+        }
+      }
     };
     let onInput = null;
     if (browser.safari) {
@@ -297,7 +287,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         const {
           target
         } = e;
-        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) {
@@ -322,12 +312,11 @@ export const InputQuery = /*#__PURE__*/React.memo(({
         element.removeEventListener('input', onInput);
       }
     };
-  }, [triggerQueryPrefix, ref.current.value, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
+  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
   useLayoutEffect(() => {
     const 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(() => {
         if (!(ref !== null && ref !== void 0 && ref.current)) {
           return;
@@ -355,20 +344,10 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     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,
@@ -376,9 +355,11 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     "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/es2019/types/get-editor-props.js

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

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

@@ -30,6 +30,7 @@ class ChromeCollapsed extends PureComponent {
   render() {
     const 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,