@atlaskit/editor-core 148.0.0 → 149.0.3

package/dist/es2019/plugins/type-ahead/commands/insert-type-ahead-item.js

@@ -0,0 +1,222 @@
+import { Node as PMNode, Fragment } from 'prosemirror-model';
+import { InsertTypeAheadStep, InsertTypeAheadStages } from '@atlaskit/adf-schema/steps';
+import { closeHistory } from 'prosemirror-history';
+import { pluginKey } from '../pm-plugins/key';
+import { insertBlockNode, insertInlineNodeOrFragment } from '../insert-utils';
+import { StatsModifier } from '../stats-modifier';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { ACTIONS } from '../pm-plugins/actions';
+import { closeTypeAhead } from '../transforms/close-type-ahead';
+import { getPluginState } from '../utils';
+
+const validateNode = ({
+  schema,
+  maybeNode
+}) => {
+  if (!maybeNode) {
+    return null;
+  }
+
+  if (maybeNode instanceof PMNode || maybeNode instanceof Fragment) {
+    return maybeNode;
+  }
+
+  if (typeof maybeNode === 'string') {
+    return schema.text(maybeNode);
+  }
+
+  try {
+    return PMNode.fromJSON(schema, maybeNode);
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+    return null;
+  }
+};
+
+const createInsertCallback = ({
+  editorState: state,
+  handler,
+  query,
+  mode,
+  wasInsertedBySpace,
+  selectedIndex,
+  textStartPosition,
+  textInserted
+}) => (maybeNode, opts = {}) => {
+  const {
+    tr
+  } = state;
+  const position = {
+    start: textStartPosition,
+    end: textStartPosition + (wasInsertedBySpace ? textInserted.length : 0)
+  };
+  const node = validateNode({
+    schema: state.schema,
+    maybeNode
+  });
+
+  if (!node) {
+    closeTypeAhead(tr); // In this kind of situation we need to
+    // delete the raw text query
+
+    tr.delete(position.start, position.end);
+    return tr;
+  }
+
+  node instanceof PMNode && node.isBlock ? insertBlockNode({
+    node,
+    tr,
+    position
+  }) : insertInlineNodeOrFragment({
+    maybeFragment: node,
+    tr,
+    position,
+    selectInlineNode: Boolean(opts.selectInlineNode)
+  });
+  closeHistory(tr);
+
+  if (wasInsertedBySpace) {
+    return tr;
+  }
+
+  const config = {
+    stage: InsertTypeAheadStages.INSERTING_ITEM,
+    query,
+    selectedIndex,
+    trigger: handler.trigger
+  };
+  tr.step(new InsertTypeAheadStep(config));
+  return tr;
+};
+
+const createDeleteRawTextCallback = ({
+  trigger,
+  selectedIndex,
+  position,
+  query,
+  wasInsertedBySpace,
+  insertItem
+}) => {
+  return newState => {
+    const tr = newState.tr;
+    closeHistory(tr);
+
+    if (!wasInsertedBySpace) {
+      tr.delete(position.start, position.end);
+      const config = {
+        stage: InsertTypeAheadStages.DELETING_RAW_QUERY,
+        selectedIndex,
+        query,
+        trigger
+      };
+      tr.step(new InsertTypeAheadStep(config));
+    }
+
+    tr.setMeta(pluginKey, {
+      action: ACTIONS.INSERT_ITEM,
+      params: insertItem
+    });
+    return tr;
+  };
+};
+
+export const insertTypeAheadItem = view => ({
+  item,
+  handler,
+  mode,
+  query,
+  sourceListItem
+}) => {
+  const pluginState = getPluginState(view.state);
+
+  if (!pluginState) {
+    return;
+  }
+
+  const stats = (pluginState.stats || new StatsModifier()).serialize();
+  const meta = {
+    mode,
+    query,
+    stats,
+    sourceListItem
+  };
+  const {
+    tr
+  } = view.state;
+  const trigger = handler.trigger;
+  let text = `${trigger}${query}`;
+
+  if (mode === SelectItemMode.SPACE) {
+    text = text.trim().concat(' ');
+  }
+
+  const selectedIndex = Math.max(sourceListItem.indexOf(item), 0);
+  const wasInsertedBySpace = mode === SelectItemMode.SPACE;
+  const {
+    selection: {
+      from: textStartPosition
+    }
+  } = tr;
+
+  const insertItem = newEditorSate => {
+    const insertCallback = createInsertCallback({
+      editorState: newEditorSate,
+      query,
+      mode,
+      handler,
+      wasInsertedBySpace,
+      selectedIndex,
+      textInserted: text,
+      textStartPosition
+    });
+    let wasInsertCallbackCalled = false; // Some wierd plugins doesn't call the insert item callback
+    // For example, the link quick insert item
+    // For those cases we need to make sure we are closing the typeahead
+
+    const proxyHandler = {
+      apply: function (target, _thisContext, argumentsList) {
+        wasInsertCallbackCalled = true;
+        return target(...argumentsList);
+      }
+    };
+    const insertCallbackProxy = new Proxy(insertCallback, proxyHandler);
+    const nextTr = handler.selectItem(newEditorSate, item, insertCallbackProxy, meta);
+
+    if (!wasInsertCallbackCalled && nextTr) {
+      closeHistory(nextTr); // In some cases we need to re-open the typeahead
+      // e.g.: addign mentions from the quick insert
+      //
+      // Today, the QuickInsert API doesn't have a tool
+      // to help on this. So the code below will close the typeahead
+      // only if there is no previous metadata about typeahead in the
+      // next transaction
+
+      if (!nextTr.getMeta(pluginKey)) {
+        closeTypeAhead(nextTr);
+      }
+    }
+
+    return nextTr;
+  };
+
+  const position = {
+    start: tr.selection.from,
+    end: tr.selection.from + text.length
+  };
+  tr.setMeta(pluginKey, {
+    action: ACTIONS.INSERT_RAW_QUERY,
+    params: createDeleteRawTextCallback({
+      wasInsertedBySpace,
+      selectedIndex,
+      insertItem,
+      position,
+      query,
+      trigger
+    })
+  });
+  tr.insertText(text);
+  closeHistory(tr);
+  view.dispatch(tr);
+  view.focus();
+};

package/dist/es2019/plugins/type-ahead/commands/update-list-items.js

@@ -0,0 +1,19 @@
+import { pluginKey as typeAheadPluginKey } from '../pm-plugins/key';
+import { ACTIONS } from '../pm-plugins/actions';
+export const updateListItem = items => {
+  return (state, dispatch) => {
+    const tr = state.tr;
+    tr.setMeta(typeAheadPluginKey, {
+      action: ACTIONS.UPDATE_LIST_ITEMS,
+      params: {
+        items
+      }
+    });
+
+    if (dispatch) {
+      dispatch(tr);
+    }
+
+    return true;
+  };
+};

package/dist/es2019/plugins/type-ahead/commands/update-query.js

@@ -1,23 +1,25 @@
+import { pluginKey as typeAheadPluginKey } from '../pm-plugins/key';
 import { ACTIONS } from '../pm-plugins/actions';
-import { pluginKey } from '../pm-plugins/plugin-key';
-import { findTypeAheadQuery } from '../utils/find-query-mark';
-import { isQueryActive } from '../utils/is-query-active';
-export const updateQueryCommand = query => (state, dispatch) => {
-  const queryMark = findTypeAheadQuery(state);
-  const activeQuery = isQueryActive(state.schema.marks.typeAheadQuery, state.doc, state.selection.from, state.selection.to);
+export const updateQuery = query => {
+  return (state, dispatch) => {
+    const pluginState = typeAheadPluginKey.getState(state);
 
-  if (queryMark === null || activeQuery === false) {
-    return false;
-  }
+    if (pluginState.query === query) {
+      return false;
+    }
 
-  if (dispatch) {
-    dispatch(state.tr.setMeta(pluginKey, {
-      action: ACTIONS.SET_QUERY,
+    const tr = state.tr;
+    tr.setMeta(typeAheadPluginKey, {
+      action: ACTIONS.CHANGE_QUERY,
       params: {
         query
       }
-    }));
-  }
+    });
 
-  return true;
+    if (dispatch) {
+      dispatch(tr);
+    }
+
+    return true;
+  };
 };

package/dist/es2019/plugins/type-ahead/commands/update-selected-index.js

@@ -0,0 +1,25 @@
+import { pluginKey as typeAheadPluginKey } from '../pm-plugins/key';
+import { ACTIONS } from '../pm-plugins/actions';
+export const updateSelectedIndex = selectedIndex => {
+  return (state, dispatch) => {
+    const pluginState = typeAheadPluginKey.getState(state);
+
+    if (pluginState.selectedIndex === selectedIndex) {
+      return false;
+    }
+
+    const tr = state.tr;
+    tr.setMeta(typeAheadPluginKey, {
+      action: ACTIONS.UPDATE_SELECTED_INDEX,
+      params: {
+        selectedIndex
+      }
+    });
+
+    if (dispatch) {
+      dispatch(tr);
+    }
+
+    return true;
+  };
+};

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

@@ -0,0 +1,15 @@
+export const TYPE_AHEAD_DECORATION_KEY = 'typeahead_decoration_key';
+export const TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE = 'typeaheadDecoration';
+export let NavigationDirection;
+
+(function (NavigationDirection) {
+  NavigationDirection[NavigationDirection["LEFT"] = -1] = "LEFT";
+  NavigationDirection[NavigationDirection["RIGHT"] = 1] = "RIGHT";
+})(NavigationDirection || (NavigationDirection = {}));
+
+export let CloseSelectionOptions;
+
+(function (CloseSelectionOptions) {
+  CloseSelectionOptions["BEFORE_TEXT_INSERTED"] = "BEFORE_TEXT_INSERTED";
+  CloseSelectionOptions["AFTER_TEXT_INSERTED"] = "AFTER_TEXT_INSERTED";
+})(CloseSelectionOptions || (CloseSelectionOptions = {}));

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

@@ -1,91 +1,216 @@
 import React from 'react';
-import { typeAheadQuery } from '@atlaskit/adf-schema';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { createPlugin } from './pm-plugins/main';
+import { createPlugin as createInsertItemPlugin } from './pm-plugins/insert-item-plugin';
 import WithPluginState from '../../ui/WithPluginState';
+import { typeAheadQuery } from '@atlaskit/adf-schema';
+import { pluginKey as typeAheadPluginKey } from './pm-plugins/key';
 import { inputRulePlugin } from './pm-plugins/input-rules';
-import { keymapPlugin } from './pm-plugins/keymap';
-import { createInitialPluginState, createPlugin, pluginKey as typeAheadPluginKey } from './pm-plugins/main';
-import { TypeAhead } from './ui/TypeAhead';
-
-const typeAheadPlugin = options => ({
-  name: 'typeAhead',
-
-  marks() {
-    return [{
-      name: 'typeAheadQuery',
-      mark: typeAheadQuery
-    }];
-  },
-
-  pmPlugins(typeAhead = []) {
-    return [{
-      name: 'typeAhead',
-      plugin: ({
-        dispatch,
-        reactContext
-      }) => createPlugin(dispatch, reactContext, typeAhead)
-    }, {
-      name: 'typeAheadInputRule',
-      plugin: ({
-        schema,
-        featureFlags
-      }) => inputRulePlugin(schema, typeAhead, featureFlags)
-    }, {
-      name: 'typeAheadKeymap',
-      plugin: () => keymapPlugin()
-    }];
-  },
-
-  contentComponent({
-    editorView,
-    popupsMountPoint,
-    popupsBoundariesElement,
-    popupsScrollableElement
-  }) {
-    return /*#__PURE__*/React.createElement(WithPluginState, {
-      plugins: {
-        typeAhead: typeAheadPluginKey
-      },
-      render: ({
-        typeAhead = createInitialPluginState()
-      }) => {
-        if (typeAhead.typeAheadHandler && typeAhead.typeAheadHandler.headless) {
-          return null;
-        }
+import { TypeAheadPopup } from './ui/TypeAheadPopup';
+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';
+const TypeAheadMenu = /*#__PURE__*/React.memo(({
+  editorView,
+  popupMountRef,
+  typeAheadState,
+  fireAnalyticsCallback
+}) => {
+  var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
+
+  const isOpen = typeAheadState.decorationSet.find().length > 0;
+  const {
+    triggerHandler,
+    items,
+    selectedIndex,
+    decorationElement,
+    decorationSet,
+    query
+  } = typeAheadState;
+  const [onItemInsert,, onItemMatch] = useItemInsert(triggerHandler, editorView, items);
+  const setSelectedItem = React.useCallback(({
+    index: nextIndex
+  }) => {
+    queueMicrotask(() => {
+      updateSelectedIndex(nextIndex)(editorView.state, editorView.dispatch);
+    });
+  }, [editorView]);
+  const insertItem = React.useCallback((mode = SelectItemMode.SELECTED, index) => {
+    queueMicrotask(() => {
+      onItemInsert({
+        mode,
+        index,
+        query
+      });
+    });
+  }, [onItemInsert, query]);
+  React.useEffect(() => {
+    if (!isOpen || !query) {
+      return;
+    }
+
+    const isLastCharSpace = query[query.length - 1] === ' ';
+
+    if (!isLastCharSpace) {
+      return;
+    }
+
+    const result = onItemMatch({
+      mode: SelectItemMode.SPACE,
+      query: query.trim()
+    });
+
+    if (!result) {
+      return;
+    }
+  }, [isOpen, query, onItemMatch]);
+
+  if (!isOpen || !triggerHandler || !(decorationElement instanceof HTMLElement) || items.length === 0) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(TypeAheadPopup, {
+    editorView: editorView,
+    popupsMountPoint: (_popupMountRef$curren = popupMountRef.current) === null || _popupMountRef$curren === void 0 ? void 0 : _popupMountRef$curren.popupsMountPoint,
+    popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
+    popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
+    anchorElement: decorationElement,
+    triggerHandler: triggerHandler,
+    fireAnalyticsCallback: fireAnalyticsCallback,
+    items: items,
+    selectedIndex: selectedIndex,
+    setSelectedItem: setSelectedItem,
+    onItemInsert: insertItem,
+    decorationSet: decorationSet,
+    isEmptyQuery: !query
+  });
+});
+
+const typeAheadPlugin = options => {
+  const fireAnalyticsCallback = fireAnalyticsEvent(options === null || options === void 0 ? void 0 : options.createAnalyticsEvent);
+  const popupMountRef = {
+    current: null
+  };
+  return {
+    name: 'typeAhead',
 
-        const {
-          queryMarkPos
-        } = typeAhead;
-        let domRef = null;
+    marks() {
+      // We need to keep this to make sure
+      // All documents with typeahead marks will be loaded normaly
+      return [{
+        name: 'typeAheadQuery',
+        mark: typeAheadQuery
+      }];
+    },
 
-        if (queryMarkPos !== null) {
-          // temporary fix to avoid page crash until it is fixed properly
-          try {
-            domRef = editorView.domAtPos(queryMarkPos);
-          } catch (ex) {
+    pmPlugins(typeAhead = []) {
+      return [{
+        name: 'typeAhead',
+        plugin: ({
+          dispatch,
+          reactContext
+        }) => createPlugin({
+          reactContext,
+          popupMountRef,
+          reactDispatch: dispatch,
+          typeAheadHandlers: typeAhead,
+          createAnalyticsEvent: options === null || options === void 0 ? void 0 : options.createAnalyticsEvent
+        })
+      }, {
+        name: 'typeAheadInsertItem',
+        plugin: createInsertItemPlugin
+      }, {
+        name: 'typeAheadInputRule',
+        plugin: ({
+          schema,
+          featureFlags
+        }) => inputRulePlugin(schema, typeAhead, featureFlags)
+      }];
+    },
+
+    contentComponent({
+      editorView,
+      containerElement,
+      popupsMountPoint,
+      popupsBoundariesElement,
+      popupsScrollableElement
+    }) {
+      popupMountRef.current = {
+        popupsMountPoint: popupsMountPoint || containerElement || undefined,
+        popupsBoundariesElement,
+        popupsScrollableElement
+      };
+      return /*#__PURE__*/React.createElement(WithPluginState, {
+        plugins: {
+          typeAheadState: typeAheadPluginKey
+        },
+        render: ({
+          typeAheadState
+        }) => {
+          if (!typeAheadState) {
             return null;
           }
+
+          return /*#__PURE__*/React.createElement(TypeAheadMenu, {
+            editorView: editorView,
+            popupMountRef: popupMountRef,
+            typeAheadState: typeAheadState,
+            fireAnalyticsCallback: fireAnalyticsCallback
+          });
         }
+      });
+    },
+
+    onEditorViewStateUpdated({
+      oldEditorState,
+      newEditorState
+    }) {
+      const oldPluginState = getPluginState(oldEditorState);
+      const newPluginState = getPluginState(newEditorState);
+
+      if (!oldPluginState || !newPluginState) {
+        return;
+      }
+
+      const {
+        triggerHandler: oldTriggerHandler
+      } = oldPluginState;
+      const {
+        triggerHandler: newTriggerHandler
+      } = newPluginState;
+      const isANewHandler = oldTriggerHandler !== newTriggerHandler;
 
-        const anchorElement = domRef ? domRef.node.childNodes[domRef.offset] : undefined;
-        return /*#__PURE__*/React.createElement(TypeAhead, {
-          editorView: editorView,
-          popupsMountPoint: popupsMountPoint,
-          popupsBoundariesElement: popupsBoundariesElement,
-          popupsScrollableElement: popupsScrollableElement,
-          anchorElement: anchorElement,
-          active: typeAhead.active,
-          isLoading: !!typeAhead.itemsLoader,
-          items: typeAhead.items,
-          currentIndex: typeAhead.currentIndex,
-          highlight: typeAhead.highlight,
-          createAnalyticsEvent: options === null || options === void 0 ? void 0 : options.createAnalyticsEvent,
-          query: typeAhead.query
+      if (oldTriggerHandler !== null && oldTriggerHandler !== void 0 && oldTriggerHandler.dismiss && isANewHandler) {
+        oldTriggerHandler.dismiss({
+          editorState: newEditorState,
+          query: oldPluginState.query,
+          stats: (oldPluginState.stats || new StatsModifier()).serialize()
         });
       }
-    });
-  }
 
-});
+      if (newTriggerHandler !== null && newTriggerHandler !== void 0 && newTriggerHandler.onOpen && isANewHandler) {
+        newTriggerHandler.onOpen(newEditorState);
+      }
+
+      if (newTriggerHandler && isANewHandler && options !== null && options !== void 0 && options.createAnalyticsEvent) {
+        fireAnalyticsCallback({
+          payload: {
+            action: ACTION.INVOKED,
+            actionSubject: ACTION_SUBJECT.TYPEAHEAD,
+            actionSubjectId: newTriggerHandler.id || 'not_set',
+            attributes: {
+              inputMethod: newPluginState.inputMethod || INPUT_METHOD.KEYBOARD
+            },
+            eventType: EVENT_TYPE.UI
+          }
+        });
+      }
+    }
+
+  };
+};
 
-export { typeAheadPluginKey };
-export default typeAheadPlugin;
+export default typeAheadPlugin;
+export { typeAheadPluginKey };