@atlaskit/editor-core 148.0.0 → 149.0.3

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

@@ -0,0 +1,136 @@
+import React, { useCallback, useMemo, useRef, useLayoutEffect } from 'react';
+import { N200 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+import Item from '@atlaskit/item';
+import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import styled from 'styled-components';
+import IconFallback from '../../quick-insert/assets/fallback';
+import { Shortcut } from '../../../ui/styles';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+export const ICON_HEIGHT = 40;
+export const ICON_WIDTH = 40;
+export const ItemIcon = styled.div`
+  width: ${ICON_WIDTH}px;
+  height: ${ICON_HEIGHT}px;
+  overflow: hidden;
+  border: 1px solid rgba(223, 225, 229, 0.5); /* N60 at 50% */
+  border-radius: ${borderRadius()}px;
+  box-sizing: border-box;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  div {
+    width: ${ICON_WIDTH}px;
+    height: ${ICON_HEIGHT}px;
+  }
+`;
+const ItemBody = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  line-height: 1.4;
+`;
+const ItemText = styled.div`
+  white-space: initial;
+  .item-description {
+    font-size: ${relativeFontSizeToBase16(11.67)};
+    color: ${N200};
+    margin-top: 4px;
+  }
+`;
+const ItemAfter = styled.div`
+  flex: 0 0 auto;
+`;
+const hidden = {
+  overflow: 'hidden'
+};
+const FallbackIcon = /*#__PURE__*/React.memo(({
+  label
+}) => {
+  return /*#__PURE__*/React.createElement(IconFallback, null);
+});
+
+const noop = () => {};
+
+export const TypeAheadListItem = ({
+  item,
+  selectedIndex,
+  onItemHover,
+  onItemClick,
+  itemIndex
+}) => {
+  const isSelected = itemIndex === selectedIndex; // It's possible for onMouseMove to be called multiple times in quick
+  // succession because the mousemove event can fire very rapidly. This
+  // provides an additional safety net to prevent that.
+
+  const mouseMoveCalled = useRef(false);
+  const onMouseMove = useCallback(() => {
+    if (isSelected || mouseMoveCalled.current) {
+      return;
+    }
+
+    mouseMoveCalled.current = true;
+    onItemHover({
+      item,
+      index: itemIndex
+    });
+  }, [item, itemIndex, onItemHover, isSelected]);
+  useLayoutEffect(() => {
+    if (!isSelected) {
+      mouseMoveCalled.current = false;
+    }
+  }, [isSelected]);
+  const {
+    icon,
+    title,
+    render: customRenderItem
+  } = item;
+  const elementIcon = useMemo(() => {
+    return /*#__PURE__*/React.createElement(ItemIcon, null, icon ? icon() : /*#__PURE__*/React.createElement(FallbackIcon, {
+      label: title
+    }));
+  }, [icon, title]);
+  const insertSelectedItem = useCallback(() => {
+    onItemClick(SelectItemMode.SELECTED, itemIndex);
+  }, [onItemClick, itemIndex]);
+  const customItem = useMemo(() => {
+    if (!customRenderItem) {
+      return null;
+    }
+
+    const Comp = customRenderItem;
+    return /*#__PURE__*/React.createElement("div", {
+      "aria-selected": isSelected,
+      "aria-label": title,
+      role: "option",
+      tabIndex: 0,
+      style: hidden,
+      onMouseMove: onMouseMove
+    }, /*#__PURE__*/React.createElement(Comp, {
+      onClick: insertSelectedItem,
+      isSelected: isSelected,
+      onHover: noop
+    }));
+  }, [customRenderItem, insertSelectedItem, onMouseMove, isSelected, title]);
+
+  if (customItem) {
+    return customItem;
+  }
+
+  return /*#__PURE__*/React.createElement(Item, {
+    onClick: insertSelectedItem,
+    onMouseMove: onMouseMove,
+    elemBefore: elementIcon,
+    isSelected: isSelected,
+    "aria-selected": isSelected,
+    "aria-label": item.title,
+    role: "option"
+  }, /*#__PURE__*/React.createElement(ItemBody, null, /*#__PURE__*/React.createElement(ItemText, null, /*#__PURE__*/React.createElement("div", {
+    className: "item-title"
+  }, item.title), item.description && /*#__PURE__*/React.createElement("div", {
+    className: "item-description"
+  }, item.description)), /*#__PURE__*/React.createElement(ItemAfter, null, item.keyshortcut && /*#__PURE__*/React.createElement(Shortcut, null, item.keyshortcut))));
+};

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

@@ -0,0 +1,120 @@
+import React, { useEffect, useMemo } from 'react';
+import styled from 'styled-components';
+import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import { Popup } from '@atlaskit/editor-common';
+import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { N0, N60A, N50A } from '@atlaskit/theme/colors';
+import { divide } from '@atlaskit/theme/math';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';
+import { TypeAheadList } from './TypeAheadList';
+const TypeAheadContent = styled.div`
+  background: ${N0};
+  border-radius: ${borderRadius()}px;
+  box-shadow: 0 0 1px ${N60A}, 0 4px 8px -2px ${N50A};
+  padding: ${divide(gridSize, 2)}px 0;
+  width: 320px;
+  max-height: 380px; /* ~5.5 visibile items */
+  overflow-y: auto;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  position: relative;
+`;
+
+const Highlight = ({
+  state,
+  triggerHandler
+}) => {
+  if (!(triggerHandler !== null && triggerHandler !== void 0 && triggerHandler.getHighlight)) {
+    return null;
+  }
+
+  const highlight = triggerHandler.getHighlight(state);
+  return highlight;
+};
+
+const OFFSET = [0, 8];
+export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
+  const {
+    editorView,
+    triggerHandler,
+    anchorElement,
+    popupsMountPoint,
+    popupsBoundariesElement,
+    popupsScrollableElement,
+    items,
+    selectedIndex,
+    setSelectedItem,
+    onItemInsert,
+    fireAnalyticsCallback,
+    isEmptyQuery
+  } = props;
+  const startTime = useMemo(() => performance.now(), // In case those props changes
+  // we need to recreate the startTime
+  [items, isEmptyQuery, fireAnalyticsCallback, triggerHandler] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  useEffect(() => {
+    if (!fireAnalyticsCallback) {
+      return;
+    }
+
+    const stopTime = performance.now();
+    const time = stopTime - startTime;
+    fireAnalyticsCallback({
+      payload: {
+        action: ACTION.RENDERED,
+        actionSubject: ACTION_SUBJECT.TYPEAHEAD,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          time,
+          items: items.length,
+          initial: isEmptyQuery
+        }
+      }
+    });
+  }, [startTime, items, fireAnalyticsCallback, isEmptyQuery, // In case the current triggerHandler changes
+  // e.g: Inserting a mention using the quick insert
+  // we need to send the event again
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  triggerHandler]);
+  useEffect(() => {
+    if (!fireAnalyticsCallback) {
+      return;
+    }
+
+    fireAnalyticsCallback({
+      payload: {
+        action: ACTION.VIEWED,
+        actionSubject: ACTION_SUBJECT.TYPEAHEAD_ITEM,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          index: selectedIndex,
+          items: items.length
+        }
+      }
+    });
+  }, [items, fireAnalyticsCallback, selectedIndex, // In case the current triggerHandler changes
+  // e.g: Inserting a mention using the quick insert
+  // we need to send the event again
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  triggerHandler]);
+  return /*#__PURE__*/React.createElement(Popup, {
+    zIndex: akEditorFloatingDialogZIndex,
+    target: anchorElement,
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    fitHeight: 300,
+    fitWidth: 340,
+    offset: OFFSET
+  }, /*#__PURE__*/React.createElement(TypeAheadContent, {
+    className: "fabric-editor-typeahead"
+  }, /*#__PURE__*/React.createElement(Highlight, {
+    state: editorView.state,
+    triggerHandler: triggerHandler
+  }), /*#__PURE__*/React.createElement(TypeAheadList, {
+    items: items,
+    selectedIndex: selectedIndex,
+    onItemHover: setSelectedItem,
+    onItemClick: onItemInsert
+  })));
+});
+TypeAheadPopup.displayName = 'TypeAheadPopup';

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

@@ -0,0 +1,110 @@
+import React, { useMemo, useEffect, useLayoutEffect, useCallback, useRef, useState } from 'react';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { moveSelectedIndex, getPluginState } from '../utils';
+import { updateQuery } from '../commands/update-query';
+import { InputQuery } from './InputQuery';
+import { useLoadItems } from './hooks/use-load-items';
+import { useItemInsert } from './hooks/use-item-insert';
+import { useOnForceSelect } from './hooks/use-on-force-select';
+export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
+  triggerHandler,
+  editorView,
+  anchorElement,
+  shouldFocusCursorInsideQuery,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement,
+  createAnalyticsEvent,
+  inputMethod,
+  getDecorationPosition,
+  reopenQuery,
+  onUndoRedo
+}) => {
+  const [closed, setClosed] = useState(false);
+  const [query, setQuery] = useState(reopenQuery || '');
+  const queryRef = useRef(query);
+  const editorViewRef = useRef(editorView);
+  const items = useLoadItems(triggerHandler, editorView, query);
+  useLayoutEffect(() => {
+    queryRef.current = query;
+  }, [query]);
+  const [onItemInsert, onTextInsert] = useItemInsert(triggerHandler, editorView, items);
+  const selectNextItem = useMemo(() => moveSelectedIndex({
+    editorView,
+    direction: 'next'
+  }), [editorView]);
+  const selectPreviousItem = useMemo(() => moveSelectedIndex({
+    editorView,
+    direction: 'previous'
+  }), [editorView]);
+  const cancel = useCallback(({
+    setSelectionAt,
+    addPrefixTrigger,
+    text,
+    forceFocusOnEditor
+  }) => {
+    setClosed(true);
+    const fullquery = addPrefixTrigger ? `${triggerHandler.trigger}${text}` : text;
+    onTextInsert({
+      forceFocusOnEditor,
+      setSelectionAt,
+      text: fullquery
+    });
+  }, [triggerHandler, onTextInsert]);
+  const insertSelectedItem = useCallback((mode = SelectItemMode.SELECTED) => {
+    const {
+      current: view
+    } = editorViewRef;
+    const {
+      selectedIndex
+    } = getPluginState(view.state);
+    setClosed(true);
+    queueMicrotask(() => {
+      onItemInsert({
+        mode,
+        index: selectedIndex,
+        query: queryRef.current
+      });
+    });
+  }, [onItemInsert]);
+  const showTypeAheadPopupList = useCallback(() => {}, []);
+  const closePopup = useCallback(() => {
+    setClosed(true);
+  }, []);
+  useEffect(() => {
+    const {
+      current: view
+    } = editorViewRef;
+    const pluginState = getPluginState(view.state);
+
+    if (query.length === 0 || query === pluginState.query || !pluginState.triggerHandler) {
+      return;
+    }
+
+    updateQuery(query)(view.state, view.dispatch);
+  }, [query, reopenQuery]);
+  useOnForceSelect({
+    triggerHandler,
+    items,
+    query,
+    editorView,
+    closePopup
+  });
+
+  if (closed) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(InputQuery, {
+    triggerQueryPrefix: triggerHandler.trigger,
+    onQueryChange: setQuery,
+    onItemSelect: insertSelectedItem,
+    selectNextItem: selectNextItem,
+    selectPreviousItem: selectPreviousItem,
+    onQueryFocus: showTypeAheadPopupList,
+    cancel: cancel,
+    forceFocus: shouldFocusCursorInsideQuery,
+    onUndoRedo: onUndoRedo,
+    reopenQuery: reopenQuery
+  });
+});

package/dist/es2019/plugins/type-ahead/ui/hooks/use-dynamic-list-height-calculation.js

@@ -0,0 +1,97 @@
+import { useMemo, useState, useRef, useCallback, useLayoutEffect } from 'react';
+import throttle from 'lodash/throttle';
+export const calcVisibleListHeight = ({
+  startIndex,
+  indexHeightMap,
+  limit,
+  listMaxHeight,
+  listItemEstimatedHeight
+}) => {
+  let hasSpace = true;
+  let totalHeight = 0;
+  let i = startIndex;
+
+  while (hasSpace && i < limit) {
+    const nextHeight = indexHeightMap[i] || listItemEstimatedHeight;
+
+    if (totalHeight < listMaxHeight) {
+      totalHeight += nextHeight;
+    }
+
+    i++;
+    hasSpace = totalHeight <= listMaxHeight;
+  }
+
+  return totalHeight;
+};
+export const useDynamicListHeightCalculation = ({
+  redrawListAtIndex,
+  getFirstVisibleIndex,
+  listLength,
+  listMaxHeight,
+  listItemEstimatedHeight
+}) => {
+  const [renderedListHeight, setRenderedListHeight] = useState(null);
+  const indexHeightMap = useRef([]);
+  const resetScreenThrottled = useMemo(() => {
+    return throttle(() => {
+      requestAnimationFrame(() => {
+        const startIndex = getFirstVisibleIndex();
+        const lastItemRenderer = indexHeightMap.current[startIndex];
+
+        if (!lastItemRenderer) {
+          return;
+        } // This is an expensive method
+        // So, we are calling it only
+        // for the last top one visible
+
+
+        redrawListAtIndex(startIndex);
+        const nextListHeight = calcVisibleListHeight({
+          startIndex,
+          limit: listLength,
+          indexHeightMap: indexHeightMap.current,
+          listMaxHeight,
+          listItemEstimatedHeight
+        });
+
+        if (nextListHeight) {
+          setRenderedListHeight(nextListHeight);
+        }
+      });
+    }, 16 // wait for one frame
+    );
+  }, [redrawListAtIndex, listLength, listMaxHeight, listItemEstimatedHeight, getFirstVisibleIndex]);
+  const setListItemHeight = useCallback(({
+    index,
+    height
+  }) => {
+    if (typeof height !== 'number') {
+      return;
+    }
+
+    indexHeightMap.current[index] = height;
+    resetScreenThrottled();
+  }, [resetScreenThrottled]);
+  const getListItemHeight = useCallback(index => {
+    const result = indexHeightMap.current[index];
+
+    if (result && typeof result === 'number') {
+      return result;
+    }
+
+    return listItemEstimatedHeight;
+  }, [listItemEstimatedHeight]);
+  useLayoutEffect(() => {
+    indexHeightMap.current = [];
+    return () => {
+      indexHeightMap.current = [];
+    };
+  }, [listLength]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return {
+    getListItemHeight,
+    setListItemHeight,
+    renderedListHeight
+  };
+};

package/dist/es2019/plugins/type-ahead/ui/hooks/use-item-insert.js

@@ -0,0 +1,126 @@
+import { useLayoutEffect, useCallback, useRef } from 'react';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { closeTypeAhead } from '../../transforms/close-type-ahead';
+import { setSelectionBeforeQuery } from '../../transforms/set-selection-before-query';
+import { insertTypeAheadItem } from '../../commands/insert-type-ahead-item';
+import { CloseSelectionOptions } from '../../constants';
+
+const insertRawQuery = ({
+  view,
+  setSelectionAt,
+  text,
+  forceFocusOnEditor
+}) => {
+  const {
+    tr,
+    schema
+  } = view.state;
+  closeTypeAhead(tr);
+
+  if (text.length > 0) {
+    tr.replaceSelectionWith(schema.text(text));
+
+    if (setSelectionAt === CloseSelectionOptions.BEFORE_TEXT_INSERTED) {
+      setSelectionBeforeQuery(text)(tr);
+    }
+  }
+
+  view.dispatch(tr);
+
+  if (forceFocusOnEditor) {
+    view.focus();
+  }
+};
+
+export const useItemInsert = (triggerHandler, editorView, items) => {
+  const editorViewRef = useRef(editorView);
+  const itemsRef = useRef(items);
+  const onTextInsert = useCallback(({
+    setSelectionAt,
+    text,
+    forceFocusOnEditor
+  }) => {
+    if (!triggerHandler) {
+      return;
+    }
+
+    const {
+      current: view
+    } = editorViewRef;
+    insertRawQuery({
+      view,
+      setSelectionAt,
+      text,
+      forceFocusOnEditor
+    });
+  }, [triggerHandler]);
+  const onItemInsert = useCallback(({
+    mode,
+    index,
+    query
+  }) => {
+    const sourceListItem = itemsRef.current;
+
+    if (sourceListItem.length === 0 || !triggerHandler) {
+      const text = `${triggerHandler.trigger}${query}`;
+      onTextInsert({
+        forceFocusOnEditor: true,
+        setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
+        text
+      });
+      return;
+    }
+
+    const itemToInsert = sourceListItem[index];
+
+    if (!itemToInsert) {
+      return;
+    }
+
+    const {
+      current: view
+    } = editorViewRef;
+    insertTypeAheadItem(view)({
+      item: itemToInsert,
+      handler: triggerHandler,
+      mode,
+      query,
+      sourceListItem
+    });
+  }, [triggerHandler, onTextInsert]);
+  const onItemMatch = useCallback(({
+    mode,
+    query
+  }) => {
+    const _items = itemsRef.current;
+
+    if (_items && _items.length > 1) {
+      return false;
+    }
+
+    if (_items.length === 1) {
+      queueMicrotask(() => {
+        onItemInsert({
+          mode,
+          query,
+          index: 0
+        });
+      });
+    } else {
+      const text = `${triggerHandler.trigger}${query}`;
+      queueMicrotask(() => {
+        onTextInsert({
+          forceFocusOnEditor: true,
+          setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
+          text: mode === SelectItemMode.SPACE ? text.concat(' ') : text
+        });
+      });
+    }
+
+    return true;
+  }, [onItemInsert, triggerHandler, onTextInsert]);
+  useLayoutEffect(() => {
+    itemsRef.current = items;
+  }, [items]);
+  return [onItemInsert, onTextInsert, onItemMatch];
+};

package/dist/es2019/plugins/type-ahead/ui/hooks/use-load-items.js

@@ -0,0 +1,43 @@
+import { useRef, useState, useEffect } from 'react';
+import { updateListItem } from '../../commands/update-list-items';
+const EMPTY_LIST_ITEM = [];
+export const useLoadItems = (triggerHandler, editorView, query) => {
+  const [items, setItems] = useState(EMPTY_LIST_ITEM);
+  const componentIsMounted = useRef(true);
+  const editorViewRef = useRef(editorView);
+  useEffect(() => {
+    const getItems = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.getItems;
+
+    if (!getItems) {
+      setItems(EMPTY_LIST_ITEM);
+      return;
+    }
+
+    const options = {
+      query: query || '',
+      editorState: editorView.state
+    };
+    const {
+      current: view
+    } = editorViewRef;
+    getItems(options).then(result => {
+      const list = result.length > 0 ? result : EMPTY_LIST_ITEM;
+
+      if (componentIsMounted.current) {
+        setItems(list);
+      }
+
+      queueMicrotask(() => {
+        updateListItem(list)(view.state, view.dispatch);
+      });
+    }); // ignore because EditorView is mutable but we don't want to
+    // call loadItems when it changes, only when the query changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [triggerHandler, query]);
+  useEffect(() => {
+    return () => {
+      componentIsMounted.current = false;
+    };
+  }, []);
+  return items;
+};

package/dist/es2019/plugins/type-ahead/ui/hooks/use-on-force-select.js

@@ -0,0 +1,41 @@
+import { useLayoutEffect, useRef } from 'react';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { insertTypeAheadItem } from '../../commands/insert-type-ahead-item';
+export const useOnForceSelect = ({
+  triggerHandler,
+  items,
+  query,
+  editorView,
+  closePopup
+}) => {
+  const editorViewRef = useRef(editorView);
+  useLayoutEffect(() => {
+    if (!query || typeof triggerHandler.forceSelect !== 'function') {
+      return;
+    }
+
+    const item = triggerHandler.forceSelect({
+      items,
+      query,
+      editorState: editorViewRef.current.state
+    });
+
+    if (!item) {
+      return;
+    }
+
+    const {
+      current: view
+    } = editorViewRef;
+    closePopup();
+    queueMicrotask(() => {
+      insertTypeAheadItem(view)({
+        item,
+        mode: SelectItemMode.SPACE,
+        query,
+        handler: triggerHandler,
+        sourceListItem: items
+      });
+    });
+  }, [triggerHandler, closePopup, query, items]);
+};