@atlaskit/editor-core 148.0.0 → 149.0.3

package/dist/es2019/plugins/type-ahead/pm-plugins/main.js

@@ -1,226 +1,113 @@
-import { Plugin, TextSelection } from 'prosemirror-state';
-import { isMarkTypeAllowedInCurrentSelection } from '../../../utils';
-import { dismissCommand } from '../commands/dismiss';
-import { insertTypeAheadQuery } from '../commands/insert-query';
-import { itemsListUpdated } from '../commands/items-list-updated';
-import { selectByIndex } from '../commands/select-item';
-import { updateQueryCommand } from '../commands/update-query';
-import { findTypeAheadQuery } from '../utils/find-query-mark';
-import { isQueryActive } from '../utils/is-query-active';
+import { Plugin } from 'prosemirror-state';
+import { DecorationSet } from 'prosemirror-view';
+import { InsertTypeAheadStep } from '@atlaskit/adf-schema/steps';
+import { TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE } from '../constants';
 import { ACTIONS } from './actions';
-import { pluginKey } from './plugin-key';
-export { pluginKey } from './plugin-key';
-export { ACTIONS } from './actions';
-export function createInitialPluginState(prevActiveState = false, isAllowed = true) {
-  return {
-    isAllowed,
-    active: false,
-    prevActiveState,
-    query: null,
-    trigger: null,
-    typeAheadHandler: null,
-    currentIndex: 0,
-    items: [],
-    itemsLoader: null,
-    queryMarkPos: null,
-    queryStarted: 0,
-    upKeyCount: 0,
-    downKeyCount: 0
-  };
-}
-export function createPlugin(dispatch, reactContext, typeAhead) {
+import { pluginKey } from './key';
+import { closest } from '../../../utils/dom';
+import { createReducer } from './reducer';
+import { factoryDecorations } from './decorations';
+import { isInsertionTransaction } from './utils';
+
+const hasTypeAheadStep = tr => {
+  const step = tr.steps.find(step => step instanceof InsertTypeAheadStep);
+
+  if (!step) {
+    return null;
+  }
+
+  return step;
+};
+
+export function createPlugin({
+  reactDispatch,
+  reactContext,
+  popupMountRef,
+  createAnalyticsEvent,
+  typeAheadHandlers
+}) {
+  const intl = reactContext().intl;
+  const {
+    createDecorations,
+    removeDecorations
+  } = factoryDecorations({
+    intl,
+    popupMountRef,
+    createAnalyticsEvent: createAnalyticsEvent
+  });
+  const reducer = createReducer({
+    createDecorations,
+    removeDecorations,
+    typeAheadHandlers,
+    popupMountRef
+  });
   return new Plugin({
     key: pluginKey,
     state: {
       init() {
-        return createInitialPluginState();
+        return {
+          typeAheadHandlers,
+          query: '',
+          decorationSet: DecorationSet.empty,
+          decorationElement: null,
+          items: [],
+          selectedIndex: 0,
+          stats: null,
+          inputMethod: null
+        };
       },
 
-      apply(tr, pluginState, _oldState, state) {
-        const meta = tr.getMeta(pluginKey) || {};
-        const {
-          action,
-          params
-        } = meta;
-
-        switch (action) {
-          case ACTIONS.SET_CURRENT_INDEX:
-            return setCurrentItemIndex({
-              dispatch,
-              pluginState,
-              tr,
-              params
-            });
-
-          case ACTIONS.SELECT_PREV:
-            return selectPrevActionHandler({
-              dispatch,
-              pluginState,
-              tr
-            });
+      apply(tr, currentPluginState, oldEditorState, state) {
+        const customStep = hasTypeAheadStep(tr);
+        const nextPluginState = reducer(tr, currentPluginState, customStep);
 
-          case ACTIONS.SELECT_NEXT:
-            return selectNextActionHandler({
-              dispatch,
-              pluginState,
-              tr
-            });
+        if (currentPluginState !== nextPluginState) {
+          reactDispatch(pluginKey, nextPluginState);
+        }
 
-          case ACTIONS.ITEMS_LIST_UPDATED:
-            return itemsListUpdatedActionHandler({
-              dispatch,
-              pluginState,
-              tr
-            });
+        return nextPluginState;
+      }
 
-          case ACTIONS.SELECT_CURRENT:
-            const {
-              from,
-              to
-            } = tr.selection;
-            const {
-              typeAheadQuery
-            } = state.schema.marks; // If inserted content has typeAheadQuery mark should fallback to default action handler
+    },
 
-            return tr.doc.rangeHasMark(from - 1, to, typeAheadQuery) ? defaultActionHandler({
-              dispatch,
-              reactContext,
-              typeAhead,
-              state,
-              pluginState,
-              tr
-            }) : selectCurrentActionHandler({
-              dispatch,
-              pluginState,
-              tr
-            });
+    appendTransaction(transactions, _oldState, newState) {
+      const insertItemCallback = isInsertionTransaction(transactions, ACTIONS.INSERT_RAW_QUERY);
 
-          case ACTIONS.SET_QUERY:
-            return updateQueryHandler({
-              dispatch,
-              pluginState,
-              tr,
-              params
-            });
+      if (insertItemCallback) {
+        const tr = insertItemCallback(newState);
 
-          default:
-            return defaultActionHandler({
-              dispatch,
-              reactContext,
-              typeAhead,
-              state,
-              pluginState,
-              tr
-            });
+        if (tr) {
+          return tr;
         }
       }
-
     },
 
     view() {
       return {
-        update(editorView) {
-          const pluginState = pluginKey.getState(editorView.state);
-
-          if (!pluginState) {
-            return;
-          }
-
-          const {
-            state,
-            dispatch
-          } = editorView;
-          const {
-            doc,
-            selection
-          } = state;
-          const {
-            from,
-            to
-          } = selection;
-          const {
-            typeAheadQuery
-          } = state.schema.marks; // Disable type ahead query when removing trigger.
-
-          if (pluginState.active && !pluginState.query && !pluginState.trigger) {
-            dismissCommand()(state, dispatch);
-            return;
-          } // Disable type ahead query when the first character is a space.
-
-
-          if (pluginState.active && (pluginState.query || '').indexOf(' ') === 0) {
-            dismissCommand()(state, dispatch);
-            return;
-          } // Optimization to not call dismissCommand if plugin is in an inactive state.
-
-
-          if (!pluginState.active && pluginState.prevActiveState && !doc.rangeHasMark(from - 1, to, typeAheadQuery)) {
-            dismissCommand()(state, dispatch);
-            return;
-          } // Fetch type ahead items if handler returned a promise.
-
-
-          if (pluginState.active && pluginState.itemsLoader) {
-            pluginState.itemsLoader.promise.then(items => itemsListUpdated(items)(editorView.state, dispatch));
-          }
-        }
+        update(editorView) {}
 
       };
     },
 
-    appendTransaction(_trs, _oldState, newState) {
-      const pluginState = pluginKey.getState(newState);
-
-      if (pluginState.active && pluginState.query && pluginState.typeAheadHandler && pluginState.typeAheadHandler.forceSelect) {
-        const items = pluginState.items;
-        const matchedItem = pluginState.typeAheadHandler.forceSelect(pluginState.query, items);
-
-        if (matchedItem) {
-          let newTr;
-          selectByIndex(items.indexOf(matchedItem))(newState, tr => newTr = tr);
-          return newTr;
-        }
-      }
-
-      return null;
-    },
-
     props: {
-      handleDOMEvents: {
-        input(view, event) {
-          const {
-            state,
-            dispatch
-          } = view;
-          const {
-            selection,
-            schema
-          } = state;
-
-          if (selection instanceof TextSelection && selection.$cursor && schema.marks.typeAheadQuery.isInSet(selection.$cursor.marks())) {
-            updateQueryCommand(event.data)(state, dispatch);
-            return false;
-          }
+      decorations: state => {
+        var _pluginKey$getState;
 
+        return (_pluginKey$getState = pluginKey.getState(state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.decorationSet;
+      },
+      handleDOMEvents: {
+        compositionend: (view, event) => {
           return false;
         },
-
-        // FM-2123: On latest Android version Q there's a bug while compositionend,
-        // the typeAheadQuery is inserted next to the position of the trigger character (so that creates double characters).
-        // In this use case, need to replace the last written character with our typeAheadQuery.
-        compositionend: (view, event) => {
-          const {
-            state,
-            dispatch
-          } = view;
+        click: (view, event) => {
           const {
-            selection,
-            schema
-          } = state;
-          const triggers = typeAhead.map(typeAheadHandler => typeAheadHandler.trigger);
+            target
+          } = event; // ProseMirror view listen to any click event inside of it
+          // When this event is coming from the typeahead
+          // we should tell to ProseMirror to sit down and relax
+          // cuz we know what we are doing (I hope)
 
-          if (triggers.indexOf(event.data) !== -1 && selection instanceof TextSelection && selection.$cursor && !schema.marks.typeAheadQuery.isInSet(selection.$cursor.marks())) {
-            insertTypeAheadQuery(event.data, true)(state, dispatch);
+          if (target instanceof HTMLElement && closest(target, `[data-type-ahead=${TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE}]`)) {
             return true;
           }
 
@@ -229,211 +116,4 @@ export function createPlugin(dispatch, reactContext, typeAhead) {
       }
     }
   });
-}
-/**
- *
- * Action Handlers
- *
- */
-
-export function createItemsLoader(promiseOfItems) {
-  let canceled = false;
-  return {
-    promise: new Promise((resolve, reject) => {
-      promiseOfItems.then(result => !canceled && resolve(result)).catch(error => !canceled && reject(error));
-    }),
-
-    cancel() {
-      canceled = true;
-    }
-
-  };
-}
-export function defaultActionHandler({
-  dispatch,
-  reactContext,
-  typeAhead,
-  pluginState,
-  state,
-  tr
-}) {
-  const {
-    typeAheadQuery
-  } = state.schema.marks;
-  const {
-    doc,
-    selection
-  } = state;
-  const {
-    from,
-    to
-  } = selection;
-  const isActive = isQueryActive(typeAheadQuery, doc, from - 1, to);
-  const isAllowed = isMarkTypeAllowedInCurrentSelection(typeAheadQuery, state);
-
-  if (!isAllowed && !isActive) {
-    if (pluginState && pluginState.active === isActive && pluginState.isAllowed === isAllowed) {
-      return pluginState;
-    }
-
-    const newPluginState = createInitialPluginState(pluginState.active, isAllowed);
-    dispatch(pluginKey, newPluginState);
-    return newPluginState;
-  }
-
-  const {
-    nodeBefore
-  } = selection.$from;
-
-  if (!isActive || !nodeBefore || !pluginState) {
-    const newPluginState = createInitialPluginState(pluginState ? pluginState.active : false);
-
-    if (!pluginState || pluginState.active || !pluginState.isAllowed) {
-      dispatch(pluginKey, newPluginState);
-    }
-
-    return newPluginState;
-  }
-
-  const typeAheadMark = typeAheadQuery.isInSet(nodeBefore.marks || []);
-
-  if (!typeAheadMark || !typeAheadMark.attrs.trigger) {
-    return pluginState;
-  }
-
-  const textContent = nodeBefore.textContent || '';
-  const trigger = typeAheadMark.attrs.trigger.replace(/([^\x00-\xFF]|[\s\n])+/g, ''); // If trigger has been removed, reset plugin state
-
-  if (!textContent.includes(trigger)) {
-    const newPluginState = { ...createInitialPluginState(true),
-      active: true
-    };
-    dispatch(pluginKey, newPluginState);
-    return newPluginState;
-  }
-
-  const query = textContent.replace(/^([^\x00-\xFF]|[\s\n])+/g, '').replace(trigger, '');
-  const typeAheadHandler = typeAhead.find(t => t.trigger === trigger);
-  let typeAheadItems = [];
-  let itemsLoader = null;
-  let highlight = null;
-
-  try {
-    const {
-      intl
-    } = reactContext();
-    typeAheadItems = typeAheadHandler.getItems(query, state, intl, {
-      prevActive: pluginState.prevActiveState,
-      queryChanged: query !== pluginState.query || trigger !== pluginState.trigger
-    }, tr, dispatch);
-
-    if (typeAheadHandler.getHighlight) {
-      highlight = typeAheadHandler.getHighlight(state);
-    }
-
-    if (pluginState.itemsLoader) {
-      pluginState.itemsLoader.cancel();
-    }
-
-    if (!Array.isArray(typeAheadItems)) {
-      itemsLoader = createItemsLoader(typeAheadItems);
-      typeAheadItems = pluginState.items;
-    }
-  } catch (e) {}
-
-  const queryMark = findTypeAheadQuery(state);
-  const newPluginState = {
-    isAllowed,
-    query,
-    trigger,
-    typeAheadHandler,
-    active: true,
-    prevActiveState: pluginState.active,
-    items: typeAheadItems,
-    itemsLoader: itemsLoader,
-    currentIndex: pluginState.currentIndex,
-    queryMarkPos: queryMark !== null ? queryMark.start : null,
-    queryStarted: Date.now(),
-    upKeyCount: 0,
-    downKeyCount: 0,
-    highlight
-  };
-  dispatch(pluginKey, newPluginState);
-  return newPluginState;
-}
-export function setCurrentItemIndex({
-  dispatch,
-  pluginState,
-  params
-}) {
-  if (!params) {
-    return pluginState;
-  }
-
-  const newPluginState = { ...pluginState,
-    currentIndex: params.currentIndex || params.currentIndex === 0 ? params.currentIndex : pluginState.currentIndex
-  };
-  dispatch(pluginKey, newPluginState);
-  return newPluginState;
-}
-export function updateQueryHandler({
-  dispatch,
-  pluginState,
-  params
-}) {
-  if (!params) {
-    return pluginState;
-  }
-
-  const newPluginState = { ...pluginState,
-    query: typeof params.query === 'string' ? params.query : null
-  };
-  dispatch(pluginKey, newPluginState);
-  return newPluginState;
-}
-export function selectPrevActionHandler({
-  dispatch,
-  pluginState
-}) {
-  const newIndex = pluginState.currentIndex - 1;
-  const newPluginState = { ...pluginState,
-    currentIndex: newIndex < 0 ? pluginState.items.length - 1 : newIndex,
-    upKeyCount: ++pluginState.upKeyCount
-  };
-  dispatch(pluginKey, newPluginState);
-  return newPluginState;
-}
-export function selectNextActionHandler({
-  dispatch,
-  pluginState
-}) {
-  const newIndex = pluginState.currentIndex + 1;
-  const newPluginState = { ...pluginState,
-    currentIndex: newIndex > pluginState.items.length - 1 ? 0 : newIndex,
-    downKeyCount: ++pluginState.downKeyCount
-  };
-  dispatch(pluginKey, newPluginState);
-  return newPluginState;
-}
-export function itemsListUpdatedActionHandler({
-  dispatch,
-  pluginState,
-  tr
-}) {
-  const items = tr.getMeta(pluginKey).items;
-  const newPluginState = { ...pluginState,
-    items,
-    itemsLoader: null,
-    // Set to 0 to always reset the query to the top of the typeahead
-    currentIndex: 0
-  };
-  dispatch(pluginKey, newPluginState);
-  return newPluginState;
-}
-export function selectCurrentActionHandler({
-  dispatch
-}) {
-  const newPluginState = createInitialPluginState(false);
-  dispatch(pluginKey, newPluginState);
-  return newPluginState;
 }

package/dist/es2019/plugins/type-ahead/pm-plugins/reducer.js

@@ -0,0 +1,165 @@
+import { DecorationSet } from 'prosemirror-view';
+import { InsertTypeAheadStep, InsertTypeAheadStages } from '@atlaskit/adf-schema/steps';
+import { ACTIONS } from './actions';
+import { pluginKey } from './key';
+import { INPUT_METHOD } from '../../analytics/types/enums';
+import { isTypeAheadHandler } from '../utils';
+
+const shouldForceOpen = step => {
+  if (!(step instanceof InsertTypeAheadStep)) {
+    return false;
+  }
+
+  const isDeletionRawQueryOperation = step.isInsertionStep() && step.stage === InsertTypeAheadStages.DELETING_RAW_QUERY;
+  const isUndoingInsertionItem = step.isUndoingStep() && step.stage === InsertTypeAheadStages.INSERTING_ITEM;
+  return isDeletionRawQueryOperation || isUndoingInsertionItem;
+};
+
+const shouldForceClose = step => {
+  if (!(step instanceof InsertTypeAheadStep)) {
+    return false;
+  }
+
+  const isInsertingItem = step.isInsertionStep() && step.stage === InsertTypeAheadStages.INSERTING_ITEM;
+  const isUndoingDeletionRawQuery = step.isUndoingStep() && step.stage === InsertTypeAheadStages.DELETING_RAW_QUERY;
+  return isInsertingItem || isUndoingDeletionRawQuery;
+};
+
+const createFindHandler = typeAheadHandlers => step => {
+  if (!(step instanceof InsertTypeAheadStep)) {
+    return null;
+  }
+
+  const handler = typeAheadHandlers.find(h => h.trigger === step.trigger);
+  return handler || null;
+};
+
+export const createReducer = ({
+  typeAheadHandlers,
+  removeDecorations,
+  createDecorations
+}) => {
+  const findHandler = createFindHandler(typeAheadHandlers);
+
+  const openMenu = (currentPluginState, {
+    tr,
+    triggerHandler,
+    inputMethod,
+    reopenQuery,
+    selectedIndex
+  }) => {
+    removeDecorations(currentPluginState.decorationSet);
+    const {
+      decorationSet,
+      decorationElement,
+      stats
+    } = createDecorations(tr, {
+      triggerHandler,
+      inputMethod,
+      reopenQuery
+    });
+    return { ...currentPluginState,
+      stats,
+      decorationSet,
+      triggerHandler,
+      decorationElement,
+      inputMethod,
+      selectedIndex: typeof selectedIndex === 'number' ? selectedIndex : 0,
+      items: [],
+      query: reopenQuery || ''
+    };
+  };
+
+  const closeMenu = currentPluginState => {
+    removeDecorations(currentPluginState.decorationSet);
+    return { ...currentPluginState,
+      inputMethod: null,
+      query: '',
+      decorationElement: null,
+      decorationSet: DecorationSet.empty,
+      stats: null,
+      triggerHandler: undefined,
+      items: []
+    };
+  };
+
+  return (tr, currentPluginState, typeAheadStepOverride) => {
+    const meta = tr.getMeta(pluginKey) || {}; // This code below controls when we should force
+    // the menu to open or close during undo/redo operations
+
+    const overrideHandler = findHandler(typeAheadStepOverride);
+
+    if (typeAheadStepOverride && overrideHandler && shouldForceOpen(typeAheadStepOverride)) {
+      return openMenu(currentPluginState, {
+        tr,
+        triggerHandler: overrideHandler,
+        inputMethod: INPUT_METHOD.KEYBOARD,
+        reopenQuery: typeAheadStepOverride.query,
+        selectedIndex: typeAheadStepOverride.selectedIndex
+      });
+    } else if (shouldForceClose(typeAheadStepOverride)) {
+      return closeMenu(currentPluginState);
+    }
+
+    const {
+      action,
+      params
+    } = meta || {};
+    const shouldOpenMenu = action === ACTIONS.OPEN_TYPEAHEAD_AT_CURSOR && isTypeAheadHandler(params === null || params === void 0 ? void 0 : params.triggerHandler);
+    const selectionChanged = tr.selectionSet && (tr.isGeneric || Boolean(tr.getMeta('pointer')));
+    const shouldCloseMenu = [ACTIONS.CLOSE_TYPE_AHEAD, ACTIONS.INSERT_ITEM].includes(action) || selectionChanged;
+    const shouldUpdateQuery = action === ACTIONS.CHANGE_QUERY;
+    const shouldUpdateListItems = action === ACTIONS.UPDATE_LIST_ITEMS;
+    const shouldUpdateSelectedIndex = action === ACTIONS.UPDATE_SELECTED_INDEX;
+
+    if (shouldOpenMenu) {
+      return openMenu(currentPluginState, {
+        tr,
+        triggerHandler: params.triggerHandler,
+        inputMethod: params.inputMethod
+      });
+    } else if (shouldCloseMenu) {
+      return closeMenu(currentPluginState);
+    } else if (shouldUpdateQuery) {
+      return { ...currentPluginState,
+        query: params.query
+      };
+    } else if (shouldUpdateListItems) {
+      const {
+        items
+      } = params;
+      const {
+        selectedIndex
+      } = currentPluginState;
+      return { ...currentPluginState,
+        items,
+        selectedIndex: Math.max(selectedIndex >= items.length ? items.length - 1 : selectedIndex, 0)
+      };
+    } else if (shouldUpdateSelectedIndex) {
+      return { ...currentPluginState,
+        selectedIndex: params.selectedIndex
+      };
+    }
+
+    if (tr.docChanged) {
+      const {
+        decorationSet
+      } = currentPluginState;
+
+      const onRemove = () => {
+        // Make sure we are unmounting the component
+        // from the react tree when this decoration is removed
+        removeDecorations(currentPluginState.decorationSet);
+      };
+
+      const mappedDecorationSet = decorationSet.map(tr.mapping, tr.doc, {
+        onRemove
+      });
+      return { ...currentPluginState,
+        decorationSet: mappedDecorationSet
+      };
+    }
+
+    return currentPluginState;
+  };
+};

package/dist/es2019/plugins/type-ahead/pm-plugins/utils.js

@@ -0,0 +1,16 @@
+import { pluginKey } from './key';
+export const isInsertionTransaction = (transactions, action) => {
+  var _tr$getMeta2;
+
+  const tr = transactions.find(tr => {
+    var _tr$getMeta;
+
+    return ((_tr$getMeta = tr.getMeta(pluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.action) === action;
+  });
+
+  if (!tr) {
+    return null;
+  }
+
+  return (_tr$getMeta2 = tr.getMeta(pluginKey)) === null || _tr$getMeta2 === void 0 ? void 0 : _tr$getMeta2.params;
+};