@atlaskit/editor-plugin-type-ahead 0.5.0 → 0.7.0

package/dist/esm/ui/AssistiveText.js

@@ -0,0 +1,115 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+/** @jsx jsx */
+
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+import debounce from 'lodash/debounce';
+var statusDebounceMillis = 1400;
+var assitiveTextStyles = css({
+  border: 0,
+  clip: 'rect(0 0 0 0)',
+  height: '1px',
+  marginbottom: '-1px',
+  marginright: '-1px',
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute',
+  whitespace: 'nowrap',
+  width: '1px'
+});
+var AssistveTextComponent = /*#__PURE__*/function (_React$Component) {
+  _inherits(AssistveTextComponent, _React$Component);
+  var _super = _createSuper(AssistveTextComponent);
+  function AssistveTextComponent() {
+    var _this;
+    _classCallCheck(this, AssistveTextComponent);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      bump: false,
+      //when the same text needs to be read again, Hence it needs to be toggled between __status--A and __status--B
+      debounced: false,
+      silenced: false
+    });
+    return _this;
+  }
+  _createClass(AssistveTextComponent, [{
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      var _this2 = this;
+      this.debounceStatusUpdate = debounce(function () {
+        if (!_this2.state.debounced) {
+          var shouldSilence = !_this2.props.isInFocus;
+          _this2.setState(function (_ref) {
+            var bump = _ref.bump;
+            return {
+              bump: !bump,
+              debounced: true,
+              silenced: shouldSilence
+            };
+          });
+        }
+      }, statusDebounceMillis);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.debounceStatusUpdate.cancel();
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps() {
+      this.setState(function (_ref2) {
+        var bump = _ref2.bump;
+        return {
+          bump: !bump,
+          debounced: false
+        };
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        assistiveText = _this$props.assistiveText,
+        id = _this$props.id;
+      var _this$state = this.state,
+        bump = _this$state.bump,
+        debounced = _this$state.debounced,
+        silenced = _this$state.silenced;
+      this.debounceStatusUpdate();
+      return jsx("div", {
+        css: assitiveTextStyles
+      }, jsx("div", {
+        id: id + '__status--A',
+        role: "status",
+        "aria-atomic": "true",
+        "aria-live": "polite"
+      }, "".concat(!silenced && debounced && bump ? assistiveText : '')), jsx("div", {
+        id: id + '__status--B',
+        role: "status",
+        "aria-atomic": "true",
+        "aria-live": "polite"
+      }, "".concat(!silenced && debounced && !bump ? assistiveText : '')));
+    }
+  }]);
+  return AssistveTextComponent;
+}(React.Component);
+_defineProperty(AssistveTextComponent, "defaultProps", {
+  statusDebounceMillis: 1400,
+  debounce: true,
+  assistiveText: '',
+  isInFocus: false,
+  id: ''
+});
+export var AssistiveText = AssistveTextComponent;

package/dist/esm/ui/InputQuery.js

@@ -0,0 +1,390 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+import React, { Fragment, useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { keyName as keyNameNormalized } from 'w3c-keyname';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { browser } from '@atlaskit/editor-common/utils';
+import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+import { CloseSelectionOptions, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
+import { TYPE_AHEAD_DECORATION_ELEMENT_ID } from '../constants';
+import { typeAheadListMessages } from '../messages';
+import { getPluginState } from '../utils';
+import { AssistiveText } from './AssistiveText';
+var querySpanStyles = 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);
+};
+var isUndoRedoShortcut = function isUndoRedoShortcut(event) {
+  var key = keyNameNormalized(event);
+  if (event.ctrlKey && key === 'y') {
+    return 'historyRedo';
+  }
+  if ((event.ctrlKey || event.metaKey) && event.shiftKey && key === 'Z') {
+    return 'historyRedo';
+  }
+  if ((event.ctrlKey || event.metaKey) && key === 'z') {
+    return 'historyUndo';
+  }
+  return false;
+};
+var getAriaLabel = function getAriaLabel(triggerPrefix, intl) {
+  switch (triggerPrefix) {
+    case '@':
+      return typeAheadListMessages.mentionInputLabel;
+    case '/':
+      return typeAheadListMessages.quickInsertInputLabel;
+    case ':':
+      return typeAheadListMessages.emojiInputLabel;
+    default:
+      return typeAheadListMessages.quickInsertInputLabel;
+  }
+};
+export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
+  var triggerQueryPrefix = _ref.triggerQueryPrefix,
+    cancel = _ref.cancel,
+    onQueryChange = _ref.onQueryChange,
+    onItemSelect = _ref.onItemSelect,
+    selectNextItem = _ref.selectNextItem,
+    selectPreviousItem = _ref.selectPreviousItem,
+    forceFocus = _ref.forceFocus,
+    reopenQuery = _ref.reopenQuery,
+    onQueryFocus = _ref.onQueryFocus,
+    onUndoRedo = _ref.onUndoRedo,
+    editorView = _ref.editorView,
+    items = _ref.items;
+  var ref = useRef(document.createElement('span'));
+  var inputRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    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, 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 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 _ref2 = getPluginState(editorView.state) || {},
+      selectedIndex = _ref2.selectedIndex;
+    setInFocus(true);
+    switch (key) {
+      case ' ':
+        // space key
+        if (text.length === 0) {
+          cancel({
+            forceFocusOnEditor: true,
+            text: ' ',
+            addPrefixTrigger: true,
+            setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED
+          });
+          stopDefault = true;
+        }
+        break;
+      case 'Escape':
+      case 'PageUp':
+      case 'PageDown':
+      case 'Home':
+        cancel({
+          text: text,
+          forceFocusOnEditor: true,
+          addPrefixTrigger: true,
+          setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED
+        });
+        stopDefault = true;
+        break;
+      case 'Backspace':
+        if (raw.length === 0 || (sel === null || sel === void 0 ? void 0 : sel.anchorOffset) === 0) {
+          event.stopPropagation();
+          event.preventDefault();
+          cancel({
+            forceFocusOnEditor: true,
+            text: text,
+            addPrefixTrigger: false,
+            setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED
+          });
+        }
+        break;
+      case 'Enter':
+        // ED-14758 - Under the W3C specification, any keycode sent under IME would return a keycode 229
+        // event.isComposing can't be used alone as this also included a virtual keyboard under a keyboardless device, therefore, it seems the best practice would be intercepting the event as below.
+        // Some suggested the other workaround maybe listen on`keypress` instead of `keydown`
+        if (!event.isComposing && event.which !== 229 && event.keyCode !== 229) {
+          if (selectedIndex === -1) {
+            /**
+             * TODO DTR-1401: (also see ED-17200) There are two options
+             * here, either
+             * - set the index directly to 1 in WrapperTypeAhead.tsx's
+             *   `insertSelectedItem` at the cost of breaking some of the a11y
+             *   focus changes,
+             * - or do this jank at the cost of some small analytics noise.
+             *
+             * The focus behaviour still needs cleanup
+             */
+            selectPreviousItem();
+            selectNextItem();
+          }
+          onItemSelect(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER);
+        }
+        break;
+      case 'Tab':
+        if (selectedIndex === -1) {
+          /**
+           * TODO DTR-1401: (also see ED-17200) There are two options
+           * here, either
+           * - set the index directly to 1 in WrapperTypeAhead.tsx's
+           *   `insertSelectedItem` at the cost of breaking some of the a11y
+           *   focus changes,
+           * - or do this jank at the cost of some small analytics noise.
+           *
+           */
+          selectPreviousItem();
+          selectNextItem();
+        }
+        // TODO DTR-1401: why is this calling select item when hitting tab? fix this in DTR-1401
+        onItemSelect(SelectItemMode.TAB);
+        break;
+      case 'ArrowDown':
+        selectNextItem();
+        break;
+      case 'ArrowUp':
+        selectPreviousItem();
+        break;
+    }
+    var undoRedoType = isUndoRedoShortcut(event);
+    if (onUndoRedo && undoRedoType && onUndoRedo(undoRedoType)) {
+      stopDefault = true;
+    }
+    if (isNavigationKey(event) || stopDefault) {
+      event.stopPropagation();
+      event.preventDefault();
+      return false;
+    }
+  }, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
+  var onClick = useCallback(function (event) {
+    var _inputRef$current;
+    event.stopPropagation();
+    event.preventDefault();
+    onQueryFocus();
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    return false;
+  }, [onQueryFocus]);
+  useLayoutEffect(function () {
+    if (!ref.current) {
+      return;
+    }
+    var element = ref.current;
+    var onFocusIn = function onFocusIn(event) {
+      onQueryFocus();
+    };
+    var keyDown = function keyDown(event) {
+      var key = keyNameNormalized(event);
+      if (['ArrowLeft', 'ArrowRight'].includes(key) && document.getSelection && document.getSelection()) {
+        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: cleanedInputContent(),
+          setSelectionAt: isMovingRight ? CloseSelectionOptions.AFTER_TEXT_INSERTED : CloseSelectionOptions.BEFORE_TEXT_INSERTED
+        });
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      checkKeyEvent(event);
+    };
+    var onFocusOut = function onFocusOut(event) {
+      var _window$getSelection;
+      var relatedTarget = event.relatedTarget;
+
+      // Given the user is changing the focus
+      // When the target is inside the TypeAhead Popup
+      // Then the popup should stay open
+      if (relatedTarget instanceof HTMLElement && relatedTarget.closest && relatedTarget.closest(".".concat(TYPE_AHEAD_POPUP_CONTENT_CLASS))) {
+        return;
+      }
+
+      // See ED-14909: Chrome may emit focusout events where an input
+      // device was not directly responsible. (This rears in react v17+ consumers
+      // where react-managed node removal now appears to propagate focusout events to
+      // our event listener). As this path is strictly for click or other typeahead
+      // dismissals that don't involve typeahead item selection, we carve out an
+      // exception for Chrome-specific events where an input device was not the initiator.
+      if (browser.chrome && !(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range') && !('sourceCapabilities' in event && event.sourceCapabilities)) {
+        return;
+      }
+      cancel({
+        addPrefixTrigger: true,
+        text: cleanedInputContent(),
+        setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED,
+        forceFocusOnEditor: false
+      });
+    };
+    var close = function close() {
+      cancel({
+        addPrefixTrigger: false,
+        text: '',
+        forceFocusOnEditor: true,
+        setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED
+      });
+    };
+    var beforeinput = function beforeinput(e) {
+      var _target$textContent;
+      setInFocus(false);
+      var target = e.target;
+      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) {
+        e.preventDefault();
+        e.stopPropagation();
+        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 || sel.removeAllRanges();
+          sel === null || sel === void 0 || sel.addRange(range);
+        }
+      }
+    };
+    var onInput = null;
+    if (browser.safari) {
+      // On Safari, for reasons beyond my understanding,
+      // The undo behavior is totally different from other browsers
+      // That why we need to have an specific branch only for Safari.
+      var _onInput = function _onInput(e) {
+        var _target$textContent2;
+        var target = e.target;
+        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) {
+          e.preventDefault();
+          e.stopPropagation();
+          close();
+          return;
+        }
+      };
+      element.addEventListener('input', _onInput);
+    }
+    element.addEventListener('focusout', onFocusOut);
+    element.addEventListener('focusin', onFocusIn);
+    element.addEventListener('keydown', keyDown);
+    element.addEventListener('beforeinput', beforeinput);
+    return function () {
+      element.removeEventListener('focusout', onFocusOut);
+      element.removeEventListener('focusin', onFocusIn);
+      element.removeEventListener('keydown', keyDown);
+      element.removeEventListener('beforeinput', beforeinput);
+      if (browser.safari) {
+        element.removeEventListener('input', onInput);
+      }
+    };
+  }, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
+  useLayoutEffect(function () {
+    var hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
+    if (ref.current && forceFocus) {
+      setQuery(hasReopenQuery ? reopenQuery : null);
+      requestAnimationFrame(function () {
+        if (!(ref !== null && ref !== void 0 && ref.current)) {
+          return;
+        }
+        var sel = window.getSelection();
+        if (sel && hasReopenQuery && ref.current.lastChild instanceof Text) {
+          var lastChild = ref.current.lastChild;
+          var range = document.createRange();
+          range.setStart(ref.current.lastChild, lastChild.length);
+          range.collapse(true);
+          sel.removeAllRanges();
+          sel.addRange(range);
+        }
+        ref.current.focus();
+        setInFocus(true);
+      });
+    }
+  }, [forceFocus, reopenQuery]);
+  var assistiveHintID = TYPE_AHEAD_DECORATION_ELEMENT_ID + '__assistiveHint';
+  var intl = useIntl();
+
+  /**
+    When we migrated to emotion from styled component, we started getting this error.
+    jsx-a11y/interactive-supports-focus
+    Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
+   */
+  return jsx(Fragment, null, triggerQueryPrefix, jsx("span", {
+    css: querySpanStyles,
+    contentEditable: true,
+    ref: ref,
+    onKeyUp: onKeyUp,
+    onClick: onClick,
+    role: "combobox",
+    "aria-controls": TYPE_AHEAD_DECORATION_ELEMENT_ID,
+    "aria-autocomplete": "list",
+    "aria-expanded": items.length !== 0,
+    "aria-labelledby": assistiveHintID,
+    suppressContentEditableWarning: true,
+    "data-query-prefix": triggerQueryPrefix
+  }, query === null ? jsx("input", {
+    ref: inputRef,
+    type: "text"
+  }) : query), jsx("span", {
+    id: assistiveHintID,
+    style: {
+      display: 'none'
+    }
+  }, intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl)), ",", intl.formatMessage(typeAheadListMessages.inputQueryAssistiveLabel)), jsx(AssistiveText, {
+    assistiveText: items.length === 0 ? intl.formatMessage(typeAheadListMessages.noSearchResultsLabel, {
+      itemsLength: items.length
+    }) : '',
+    isInFocus: items.length === 0 || isInFocus,
+    id: TYPE_AHEAD_DECORATION_ELEMENT_ID
+  }));
+});
+InputQuery.displayName = 'InputQuery';