@atlaskit/editor-core 148.0.0 → 149.0.3

package/dist/es2019/plugins/type-ahead/stats-modifier.js

@@ -0,0 +1,41 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+export class StatsModifier {
+  constructor() {
+    _defineProperty(this, "startedAt", 0);
+
+    _defineProperty(this, "endedAt", 0);
+
+    _defineProperty(this, "keyCount", {
+      arrowUp: 0,
+      arrowDown: 0
+    });
+
+    _defineProperty(this, "increaseArrowUp", () => {
+      this.keyCount.arrowUp += 1;
+    });
+
+    _defineProperty(this, "increaseArrowDown", () => {
+      this.keyCount.arrowDown += 1;
+    });
+
+    _defineProperty(this, "serialize", () => {
+      var _this$keyCount, _this$keyCount2;
+
+      return {
+        startedAt: this.startedAt,
+        endedAt: performance.now(),
+        keyCount: {
+          arrowUp: ((_this$keyCount = this.keyCount) === null || _this$keyCount === void 0 ? void 0 : _this$keyCount.arrowUp) || 0,
+          arrowDown: ((_this$keyCount2 = this.keyCount) === null || _this$keyCount2 === void 0 ? void 0 : _this$keyCount2.arrowDown) || 0
+        }
+      };
+    });
+
+    this.startedAt = performance.now();
+    this.keyCount = {
+      arrowUp: 0,
+      arrowDown: 0
+    };
+  }
+
+}

package/dist/es2019/plugins/type-ahead/transforms/close-type-ahead.js

@@ -0,0 +1,7 @@
+import { pluginKey } from '../pm-plugins/key';
+import { ACTIONS } from '../pm-plugins/actions';
+export const closeTypeAhead = tr => {
+  return tr.setMeta(pluginKey, {
+    action: ACTIONS.CLOSE_TYPE_AHEAD
+  });
+};

package/dist/es2019/plugins/type-ahead/transforms/open-typeahead-at-cursor.js

@@ -0,0 +1,40 @@
+import { TextSelection } from 'prosemirror-state';
+import { pluginKey } from '../pm-plugins/key';
+import { ACTIONS } from '../pm-plugins/actions';
+export const openTypeAheadAtCursor = ({
+  triggerHandler,
+  inputMethod,
+  query
+}) => tr => {
+  tr.setMeta(pluginKey, {
+    action: ACTIONS.OPEN_TYPEAHEAD_AT_CURSOR,
+    params: {
+      triggerHandler,
+      inputMethod,
+      query
+    }
+  });
+  const {
+    selection
+  } = tr;
+
+  if (!(selection instanceof TextSelection)) {
+    return tr;
+  }
+
+  if (!selection.$cursor) {
+    tr.deleteSelection();
+    return tr;
+  } // Search & Destroy placeholder
+
+
+  const cursorPos = selection.$cursor.pos;
+  const nodeAtCursor = tr.doc.nodeAt(cursorPos);
+  const isPlaceholderAtCursorPosition = nodeAtCursor && nodeAtCursor.type.name === 'placeholder';
+
+  if (nodeAtCursor && isPlaceholderAtCursorPosition) {
+    tr.delete(cursorPos, cursorPos + nodeAtCursor.nodeSize);
+  }
+
+  return tr;
+};

package/dist/es2019/plugins/type-ahead/transforms/set-selection-before-query.js

@@ -0,0 +1,11 @@
+import { TextSelection } from 'prosemirror-state';
+export const setSelectionBeforeQuery = rawText => tr => {
+  const currentPosition = tr.selection.$from.pos;
+  const positionBeforeRawText = Math.max(currentPosition - rawText.length, 0);
+  const resolvedPositionBeforeText = tr.doc.resolve(positionBeforeRawText);
+  const nextSelection = TextSelection.findFrom(resolvedPositionBeforeText, -1, true);
+
+  if (nextSelection) {
+    tr.setSelection(nextSelection);
+  }
+};

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

@@ -0,0 +1,51 @@
+import React, { useContext, useRef, useCallback } from 'react';
+import { TypeAheadListItem } from './TypeAheadListItem';
+import { useResizeObserver } from './hooks/use-resize-observer';
+
+const noop = () => {};
+
+export const SelectedIndexContext = /*#__PURE__*/React.createContext(0);
+export const ListItemActionsContext = /*#__PURE__*/React.createContext({
+  onItemClick: noop,
+  onItemHover: noop
+});
+export const UpdateListItemHeightContext = /*#__PURE__*/React.createContext(noop);
+export const DynamicHeightListItem = ({
+  index,
+  data,
+  style
+}) => {
+  const item = data[index];
+  const selectedIndex = useContext(SelectedIndexContext);
+  const {
+    onItemClick,
+    onItemHover
+  } = useContext(ListItemActionsContext);
+  const updateItemHeight = useContext(UpdateListItemHeightContext);
+  const innerDivRef = useRef(document.createElement('div'));
+  const onResize = useCallback(entry => {
+    if (typeof updateItemHeight !== 'function') {
+      return;
+    }
+
+    updateItemHeight({
+      index,
+      height: entry.contentRect.height
+    });
+  }, [updateItemHeight, index]);
+  useResizeObserver(innerDivRef, onResize);
+  return /*#__PURE__*/React.createElement("div", {
+    style: style,
+    "data-index": index
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: innerDivRef,
+    "data-testid": `list-item-height-observed-${index}`
+  }, /*#__PURE__*/React.createElement(TypeAheadListItem, {
+    key: item.title,
+    item: item,
+    itemIndex: index,
+    selectedIndex: selectedIndex,
+    onItemClick: onItemClick,
+    onItemHover: onItemHover
+  })));
+};

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

@@ -0,0 +1,307 @@
+import React, { useRef, useEffect, useCallback } from 'react';
+import styled from 'styled-components';
+import { keyName as keyNameNormalized } from 'w3c-keyname';
+import { browser, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
+import { CloseSelectionOptions } from '../constants';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+const QuerySpan = styled.span`
+  outline: none;
+`;
+
+const isNavigationKey = event => {
+  return ['Enter', 'Tab', 'ArrowDown', 'ArrowUp'].includes(event.key);
+};
+
+const isUndoRedoShortcut = event => {
+  const 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;
+};
+
+export const InputQuery = /*#__PURE__*/React.memo(({
+  triggerQueryPrefix,
+  cancel,
+  onQueryChange,
+  onItemSelect,
+  selectNextItem,
+  selectPreviousItem,
+  forceFocus,
+  reopenQuery,
+  onQueryFocus,
+  onUndoRedo
+}) => {
+  const ref = useRef(document.createElement('span'));
+  const cleanedInputContent = useCallback(() => {
+    const raw = ref.current.textContent || '';
+    return raw.replace(ZERO_WIDTH_SPACE, '');
+  }, []);
+  const onKeyUp = useCallback(event => {
+    const text = cleanedInputContent();
+    onQueryChange(text);
+  }, [onQueryChange, cleanedInputContent]);
+  const checkKeyEvent = useCallback(event => {
+    const key = keyNameNormalized(event);
+    const sel = document.getSelection();
+    const raw = ref.current.textContent || '';
+    const text = cleanedInputContent();
+    let stopDefault = false;
+
+    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':
+        cancel({
+          text,
+          forceFocusOnEditor: true,
+          addPrefixTrigger: true,
+          setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED
+        });
+        break;
+
+      case 'Backspace':
+        if (raw === ZERO_WIDTH_SPACE || raw.length === 0 || (sel === null || sel === void 0 ? void 0 : sel.anchorOffset) === 0) {
+          event.stopPropagation();
+          event.preventDefault();
+          cancel({
+            forceFocusOnEditor: true,
+            text,
+            addPrefixTrigger: false,
+            setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED
+          });
+        }
+
+        break;
+
+      case 'Enter':
+        onItemSelect(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER);
+        break;
+
+      case 'Tab':
+        onItemSelect(SelectItemMode.TAB);
+        break;
+
+      case 'ArrowDown':
+        selectNextItem();
+        break;
+
+      case 'ArrowUp':
+        selectPreviousItem();
+        break;
+    }
+
+    const undoRedoType = isUndoRedoShortcut(event);
+
+    if (onUndoRedo && undoRedoType && onUndoRedo(undoRedoType)) {
+      stopDefault = true;
+    }
+
+    if (isNavigationKey(event) || stopDefault) {
+      event.stopPropagation();
+      event.preventDefault();
+      return false;
+    }
+  }, [onUndoRedo, onItemSelect, selectNextItem, cancel, selectPreviousItem, cleanedInputContent]);
+  const onClick = useCallback(event => {
+    event.stopPropagation();
+    event.preventDefault();
+    onQueryFocus();
+    ref.current.focus();
+    return false;
+  }, [onQueryFocus]);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const {
+      current: element
+    } = ref;
+
+    const onFocusIn = event => {
+      onQueryFocus();
+    };
+
+    const keyDown = event => {
+      const key = keyNameNormalized(event);
+
+      if (['ArrowLeft', 'ArrowRight'].includes(key) && document.getSelection && document.getSelection()) {
+        const q = ref.current.textContent || '';
+        const sel = document.getSelection();
+        const isMovingRight = sel && 'ArrowRight' === key && sel.anchorOffset === q.length;
+        const isMovingLeft = sel && 'ArrowLeft' === key && sel.anchorOffset === 0;
+
+        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);
+    };
+
+    const onFocusOut = event => {
+      cancel({
+        addPrefixTrigger: true,
+        text: cleanedInputContent(),
+        setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED,
+        forceFocusOnEditor: false
+      });
+    };
+
+    const close = () => {
+      cancel({
+        addPrefixTrigger: false,
+        text: '',
+        forceFocusOnEditor: true,
+        setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED
+      });
+    };
+
+    const beforeinput = e => {
+      var _target$textContent;
+
+      const {
+        target
+      } = e;
+
+      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 || target.textContent === ZERO_WIDTH_SPACE)) {
+        e.preventDefault();
+        e.stopPropagation();
+        close();
+        return;
+      }
+
+      if (e.data != null && target.textContent === ZERO_WIDTH_SPACE) {
+        element.textContent = ''; // 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) {
+      // 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.
+      const onInput = e => {
+        var _target$textContent2;
+
+        const {
+          target
+        } = e;
+
+        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 () => {
+      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]);
+  useEffect(() => {
+    const hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
+
+    if (ref.current && forceFocus) {
+      ref.current.textContent = hasReopenQuery ? reopenQuery : ZERO_WIDTH_SPACE;
+      requestAnimationFrame(() => {
+        if (!(ref !== null && ref !== void 0 && ref.current)) {
+          return;
+        }
+
+        const sel = window.getSelection();
+
+        if (sel && hasReopenQuery && ref.current.lastChild instanceof Text) {
+          const lastChild = ref.current.lastChild;
+          const range = document.createRange();
+          range.setStart(ref.current.lastChild, lastChild.length);
+          range.collapse(true);
+          sel.removeAllRanges();
+          sel.addRange(range);
+        }
+
+        ref.current.focus();
+      });
+    }
+  }, [forceFocus, reopenQuery]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, triggerQueryPrefix, /*#__PURE__*/React.createElement(QuerySpan, {
+    contentEditable: true,
+    innerRef: ref,
+    onKeyUp: onKeyUp,
+    onClick: onClick,
+    role: "textbox",
+    suppressContentEditableWarning: true,
+    "data-query-prefix": triggerQueryPrefix
+  }));
+});
+InputQuery.displayName = 'InputQuery';

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

@@ -0,0 +1,163 @@
+import React, { useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
+import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors';
+import { ItemGroup, itemThemeNamespace } from '@atlaskit/item';
+import { themed } from '@atlaskit/theme/components';
+import { ThemeProvider } from 'styled-components';
+import { ICON_HEIGHT } from './TypeAheadListItem';
+import { VariableSizeList as List } from 'react-window';
+import { ResizeObserverProvider } from './hooks/use-resize-observer';
+import { useDynamicListHeightCalculation } from './hooks/use-dynamic-list-height-calculation';
+import { DynamicHeightListItem, SelectedIndexContext, ListItemActionsContext, UpdateListItemHeightContext } from './DynamicHeightListItem';
+const ITEM_PADDING = 12;
+const LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
+const LIST_MAX_HEIGHT = 380;
+const LIST_WIDTH = 320;
+const itemTheme = {
+  [itemThemeNamespace]: {
+    padding: {
+      default: {
+        bottom: ITEM_PADDING,
+        left: ITEM_PADDING,
+        right: ITEM_PADDING,
+        top: ITEM_PADDING
+      }
+    },
+    beforeItemSpacing: {
+      default: () => ITEM_PADDING
+    },
+    borderRadius: () => 0,
+    hover: {
+      // background: colors.transparent, transparent is not a thing
+      text: colorsText,
+      secondaryText: N200
+    },
+    selected: {
+      background: themed({
+        light: N20,
+        dark: DN70
+      }),
+      text: themed({
+        light: N800,
+        dark: DN600
+      }),
+      secondaryText: themed({
+        light: N200,
+        dark: DN300
+      })
+    }
+  }
+};
+export const TypeAheadList = /*#__PURE__*/React.memo(({
+  items,
+  selectedIndex,
+  onItemHover,
+  onItemClick
+}) => {
+  const listRef = useRef();
+  const redrawListAtIndex = useCallback(index => {
+    listRef.current.resetAfterIndex(index);
+  }, []);
+  const lastVisibleIndexes = useRef({
+    overscanStartIndex: 0,
+    overscanStopIndex: 0,
+    visibleStartIndex: 0,
+    visibleStopIndex: 0
+  });
+  const getFirstVisibleIndex = useCallback(() => {
+    return lastVisibleIndexes.current.overscanStartIndex;
+  }, []);
+  const {
+    getListItemHeight,
+    setListItemHeight,
+    renderedListHeight
+  } = useDynamicListHeightCalculation({
+    redrawListAtIndex,
+    getFirstVisibleIndex,
+    listLength: items.length,
+    listMaxHeight: LIST_MAX_HEIGHT,
+    listItemEstimatedHeight: LIST_ITEM_ESTIMATED_HEIGHT
+  });
+  const onItemsRendered = useCallback(props => {
+    lastVisibleIndexes.current = props;
+  }, []);
+  const actions = useMemo(() => ({
+    onItemClick,
+    onItemHover
+  }), [onItemClick, onItemHover]);
+  const onScroll = useCallback(({
+    scrollUpdateWasRequested
+  }) => {
+    if (!scrollUpdateWasRequested) {
+      return;
+    } // In case the user scroll to a non-visible item like press ArrowUp from the first index
+    // We will force the scroll calling the scrollToItem in the useEffect hook
+    // When the scroll happens and we render the elements,
+    // we still need calculate the items height and re-draw the List.
+    // It is possible the item selected became invisible again (because the items height changed)
+    // So, we need to wait for height to be calculated. Then we need to check
+    // if the selected item is visible or not. If it isn't visible we call the scrollToItem again.
+    //
+    // We can't do this check in the first frame because that frame is being used by the resetScreenThrottled
+    // to calculate each height. THen, we can schedule a new frame when this one finishs.
+
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        const {
+          current: indexes
+        } = lastVisibleIndexes;
+        const isSelectedItemVisible = selectedIndex >= indexes.visibleStartIndex && selectedIndex <= indexes.visibleStopIndex;
+
+        if (!isSelectedItemVisible) {
+          listRef.current.scrollToItem(selectedIndex);
+        }
+      });
+    });
+  }, [selectedIndex]);
+  useEffect(() => {
+    if (!listRef.current) {
+      return;
+    }
+
+    listRef.current.scrollToItem(selectedIndex);
+  }, [selectedIndex]);
+  useLayoutEffect(() => {
+    requestAnimationFrame(() => {
+      listRef.current.resetAfterIndex(lastVisibleIndexes.current.overscanStartIndex);
+    });
+  }, [items]);
+
+  if (!Array.isArray(items)) {
+    return null;
+  }
+
+  const estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
+  const height = Math.min(typeof renderedListHeight === 'number' ? renderedListHeight : estimatedHeight, LIST_MAX_HEIGHT);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: itemTheme
+  }, /*#__PURE__*/React.createElement(ItemGroup, {
+    role: "listbox",
+    "aria-live": "polite",
+    "aria-label": "TypeAhead results",
+    "aria-relevant": "additions removals"
+  }, /*#__PURE__*/React.createElement(ResizeObserverProvider, null, /*#__PURE__*/React.createElement(UpdateListItemHeightContext.Provider, {
+    value: setListItemHeight
+  }, /*#__PURE__*/React.createElement(ListItemActionsContext.Provider, {
+    value: actions
+  }, /*#__PURE__*/React.createElement(SelectedIndexContext.Provider, {
+    value: selectedIndex
+  }, /*#__PURE__*/React.createElement(List, {
+    useIsScrolling: true,
+    ref: listRef,
+    itemData: items,
+    itemCount: items.length,
+    estimatedItemSize: LIST_ITEM_ESTIMATED_HEIGHT,
+    onScroll: onScroll,
+    onItemsRendered: onItemsRendered,
+    itemSize: getListItemHeight,
+    width: LIST_WIDTH,
+    height: height,
+    overscanCount: 3
+  }, DynamicHeightListItem)))))));
+});
+TypeAheadList.displayName = 'TypeAheadList';