@atlaskit/editor-core 188.7.5 → 188.8.0

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

@@ -0,0 +1,381 @@
+/**
+ *
+ * Revamped typeahead using decorations instead of the `typeAheadQuery` mark
+ *
+ * https://product-fabric.atlassian.net/wiki/spaces/E/pages/2992177582/Technical+TypeAhead+Data+Flow
+ *
+ *
+ */
+import React from 'react';
+import { typeAheadQuery } from '@atlaskit/adf-schema';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import { insertTypeAheadItem } from './commands/insert-type-ahead-item';
+import { updateSelectedIndex } from './commands/update-selected-index';
+import { inputRulePlugin } from './pm-plugins/input-rules';
+import { createPlugin as createInsertItemPlugin } from './pm-plugins/insert-item-plugin';
+import { pluginKey as typeAheadPluginKey } from './pm-plugins/key';
+import { createPlugin } from './pm-plugins/main';
+import { StatsModifier } from './stats-modifier';
+import { closeTypeAhead } from './transforms/close-type-ahead';
+import { openTypeAheadAtCursor } from './transforms/open-typeahead-at-cursor';
+import { useItemInsert } from './ui/hooks/use-item-insert';
+import { TypeAheadPopup } from './ui/TypeAheadPopup';
+import { findHandler, getPluginState, getTypeAheadHandler, getTypeAheadQuery, isTypeAheadAllowed, isTypeAheadOpen } from './utils';
+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, onTextInsert, 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]);
+  const cancel = React.useCallback(({
+    setSelectionAt,
+    addPrefixTrigger,
+    forceFocusOnEditor
+  }) => {
+    const fullQuery = addPrefixTrigger ? `${triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger}${query}` : query;
+    onTextInsert({
+      forceFocusOnEditor,
+      setSelectionAt,
+      text: fullQuery
+    });
+  }, [triggerHandler, onTextInsert, 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,
+    cancel: cancel
+  });
+});
+const createOpenAtTransaction = editorAnalyticsAPI => props => tr => {
+  const {
+    triggerHandler,
+    inputMethod
+  } = props;
+  openTypeAheadAtCursor({
+    triggerHandler,
+    inputMethod
+  })({
+    tr
+  });
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+    action: ACTION.INVOKED,
+    actionSubject: ACTION_SUBJECT.TYPEAHEAD,
+    actionSubjectId: triggerHandler.id,
+    attributes: {
+      inputMethod
+    },
+    eventType: EVENT_TYPE.UI
+  })(tr);
+  return true;
+};
+const createOpenTypeAhead = (editorViewRef, editorAnalyticsAPI) => props => {
+  if (!editorViewRef.current) {
+    return false;
+  }
+  const {
+    current: view
+  } = editorViewRef;
+  const {
+    tr
+  } = view.state;
+  createOpenAtTransaction(editorAnalyticsAPI)(props)(tr);
+  view.dispatch(tr);
+  return true;
+};
+const createInsertTypeAheadItem = editorViewRef => props => {
+  if (!editorViewRef.current) {
+    return false;
+  }
+  const {
+    current: view
+  } = editorViewRef;
+  const {
+    triggerHandler,
+    contentItem,
+    query,
+    sourceListItem,
+    mode
+  } = props;
+  insertTypeAheadItem(view)({
+    handler: triggerHandler,
+    item: contentItem,
+    mode: mode || SelectItemMode.SELECTED,
+    query,
+    sourceListItem
+  });
+  return true;
+};
+const createFindHandlerByTrigger = editorViewRef => trigger => {
+  if (!editorViewRef.current) {
+    return null;
+  }
+  const {
+    current: view
+  } = editorViewRef;
+  return findHandler(trigger, view.state);
+};
+const createCloseTypeAhead = editorViewRef => options => {
+  if (!editorViewRef.current) {
+    return false;
+  }
+  const {
+    current: view
+  } = editorViewRef;
+  const currentQuery = getTypeAheadQuery(view.state) || '';
+  const {
+    state
+  } = view;
+  let tr = state.tr;
+  if (options.attachCommand) {
+    const fakeDispatch = customTr => {
+      tr = customTr;
+    };
+    options.attachCommand(state, fakeDispatch);
+  }
+  closeTypeAhead(tr);
+  if (options.insertCurrentQueryAsRawText && currentQuery && currentQuery.length > 0) {
+    const handler = getTypeAheadHandler(state);
+    if (!handler) {
+      return false;
+    }
+    const text = handler.trigger.concat(currentQuery);
+    tr.replaceSelectionWith(state.schema.text(text));
+  }
+  view.dispatch(tr);
+  if (!view.hasFocus()) {
+    view.focus();
+  }
+  return true;
+};
+
+/**
+ *
+ * Revamped typeahead using decorations instead of the `typeAheadQuery` mark
+ *
+ * https://product-fabric.atlassian.net/wiki/spaces/E/pages/2992177582/Technical+TypeAhead+Data+Flow
+ *
+ *
+ */
+export const typeAheadPlugin = ({
+  config: options,
+  api
+}) => {
+  var _api$analytics, _api$analytics2;
+  const fireAnalyticsCallback = fireAnalyticsEvent(options === null || options === void 0 ? void 0 : options.createAnalyticsEvent);
+  const popupMountRef = {
+    current: null
+  };
+  const editorViewRef = {
+    current: null
+  };
+  return {
+    name: 'typeAhead',
+    marks() {
+      // We need to keep this to make sure
+      // All documents with typeahead marks will be loaded normally
+      return [{
+        name: 'typeAheadQuery',
+        mark: typeAheadQuery
+      }];
+    },
+    pmPlugins(typeAhead = []) {
+      return [{
+        name: 'typeAhead',
+        plugin: ({
+          dispatch,
+          getIntl
+        }) => createPlugin({
+          getIntl,
+          popupMountRef,
+          reactDispatch: dispatch,
+          typeAheadHandlers: typeAhead,
+          createAnalyticsEvent: options === null || options === void 0 ? void 0 : options.createAnalyticsEvent
+        })
+      }, {
+        name: 'typeAheadEditorViewRef',
+        plugin: () => {
+          return new SafePlugin({
+            view(view) {
+              editorViewRef.current = view;
+              return {
+                destroy() {
+                  editorViewRef.current = null;
+                }
+              };
+            }
+          });
+        }
+      }, {
+        name: 'typeAheadInsertItem',
+        plugin: createInsertItemPlugin
+      }, {
+        name: 'typeAheadInputRule',
+        plugin: ({
+          schema,
+          featureFlags
+        }) => inputRulePlugin(schema, typeAhead, featureFlags)
+      }];
+    },
+    getSharedState(editorState) {
+      if (!editorState) {
+        return {
+          query: '',
+          isOpen: false,
+          isAllowed: false,
+          currentHandler: undefined
+        };
+      }
+      const isOpen = isTypeAheadOpen(editorState);
+      return {
+        query: getTypeAheadQuery(editorState) || '',
+        currentHandler: getTypeAheadHandler(editorState),
+        isOpen,
+        isAllowed: !isOpen
+      };
+    },
+    actions: {
+      isOpen: isTypeAheadOpen,
+      isAllowed: isTypeAheadAllowed,
+      open: createOpenTypeAhead(editorViewRef, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions),
+      openAtTransaction: createOpenAtTransaction(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions),
+      findHandlerByTrigger: createFindHandlerByTrigger(editorViewRef),
+      insert: createInsertTypeAheadItem(editorViewRef),
+      close: createCloseTypeAhead(editorViewRef)
+    },
+    contentComponent({
+      editorView,
+      containerElement,
+      popupsMountPoint,
+      popupsBoundariesElement,
+      popupsScrollableElement,
+      wrapperElement
+    }) {
+      popupMountRef.current = {
+        popupsMountPoint: popupsMountPoint || wrapperElement || undefined,
+        popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement || containerElement || undefined
+      };
+      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({
+      originalTransaction,
+      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;
+      if (oldTriggerHandler !== null && oldTriggerHandler !== void 0 && oldTriggerHandler.dismiss && isANewHandler) {
+        const typeAheadMessage = originalTransaction.getMeta(typeAheadPluginKey);
+        const wasItemInserted = typeAheadMessage && typeAheadMessage.action === 'INSERT_RAW_QUERY';
+        oldTriggerHandler.dismiss({
+          editorState: newEditorState,
+          query: oldPluginState.query,
+          stats: (oldPluginState.stats || new StatsModifier()).serialize(),
+          wasItemInserted
+        });
+      }
+      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
+          }
+        });
+      }
+    }
+  };
+};

package/dist/es2019/plugins/view-update-subscription/subscribe/toolbarAndPickerUpdates.js

@@ -1,5 +1,4 @@
 import { areSameItems } from '@atlaskit/editor-common/floating-toolbar';
-import { isTypeAheadOpen } from '../../type-ahead/utils';
 import { trackerStore } from '..';
 const areToolbarsSame = (left, right) => {
   if (!left && !right) {
@@ -25,14 +24,13 @@ export const subscribeToToolbarAndPickerUpdates = (editorView, cb) => {
   const subscription = ({
     newEditorState
   }) => {
-    // TypeAhead has priority in the mobile-bridge
-    // In case it is open we don't need to send
-    // any toolbar updates don't need to be send
-    if (isTypeAheadOpen(newEditorState)) {
-      return;
-    }
-
     // Creating fake plugin keys for these plugins for the mean time until all these plugins are extracted.
+    const typeAheadPluginKey = {
+      key: 'typeAheadPlugin$',
+      getState: state => {
+        return state['typeAheadPlugin$'];
+      }
+    };
     const datePluginKey = {
       key: 'datePlugin$',
       getState: state => {
@@ -51,6 +49,17 @@ export const subscribeToToolbarAndPickerUpdates = (editorView, cb) => {
         return state['floatingToolbarPluginKey$'];
       }
     };
+    const isTypeAheadOpen = editorState => {
+      var _typeAheadState$decor;
+      const typeAheadState = typeAheadPluginKey.getState(newEditorState);
+      return !!((_typeAheadState$decor = typeAheadState.decorationSet) !== null && _typeAheadState$decor !== void 0 && _typeAheadState$decor.find().length);
+    };
+    // TypeAhead has priority in the mobile-bridge
+    // In case it is open we don't need to send
+    // any toolbar updates don't need to be send
+    if (isTypeAheadOpen(newEditorState)) {
+      return;
+    }
     const dateState = datePluginKey.getState(newEditorState);
     const statusState = statusPluginKey.getState(newEditorState);
     const {

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "188.7.5";
+export const version = "188.8.0";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/plugins/date/actions.js

@@ -2,9 +2,8 @@ import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { todayTimestampInUTC } from '@atlaskit/editor-common/utils';
 import { pluginKey } from './pm-plugins/plugin-key';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { isToday } from './utils/internal';
-import { canInsert } from '@atlaskit/editor-prosemirror/utils';
 export var createDate = function createDate(isQuickInsertAction) {
   return function (insert, state) {
     var dateNode = state.schema.nodes.date.createChecked({
@@ -25,25 +24,6 @@ export var createDate = function createDate(isQuickInsertAction) {
   };
 };
 
-/** Delete the date and close the datepicker */
-export var deleteDate = function deleteDate() {
-  return function (state, dispatch) {
-    var pluginState = pluginKey.getState(state);
-    if (!pluginState || pluginState.showDatePickerAt === null) {
-      return false;
-    }
-    var showDatePickerAt = pluginState.showDatePickerAt;
-    var tr = state.tr.delete(showDatePickerAt, showDatePickerAt + 1).setMeta(pluginKey, {
-      showDatePickerAt: null,
-      isNew: false
-    });
-    if (dispatch) {
-      dispatch(tr);
-    }
-    return true;
-  };
-};
-
 /** Focus input */
 export var focusDateInput = function focusDateInput() {
   return function (state, dispatch) {
@@ -61,92 +41,6 @@ export var focusDateInput = function focusDateInput() {
     return true;
   };
 };
-export var insertDate = function insertDate(date, inputMethod, commitMethod) {
-  var enterPressed = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-  var pluginInjectionApi = arguments.length > 4 ? arguments[4] : undefined;
-  return function (state, dispatch) {
-    var schema = state.schema;
-    var timestamp;
-    if (date) {
-      timestamp = Date.UTC(date.year, date.month - 1, date.day).toString();
-    } else {
-      timestamp = todayTimestampInUTC();
-    }
-    var tr = state.tr;
-    if (inputMethod) {
-      var _pluginInjectionApi$a;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || (_pluginInjectionApi$a = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.attachAnalyticsEvent({
-        action: ACTION.INSERTED,
-        actionSubject: ACTION_SUBJECT.DOCUMENT,
-        actionSubjectId: ACTION_SUBJECT_ID.DATE,
-        eventType: EVENT_TYPE.TRACK,
-        attributes: {
-          inputMethod: inputMethod
-        }
-      })(tr);
-    }
-    if (commitMethod) {
-      var _pluginInjectionApi$a2;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 || (_pluginInjectionApi$a2 = _pluginInjectionApi$a2.actions) === null || _pluginInjectionApi$a2 === void 0 || _pluginInjectionApi$a2.attachAnalyticsEvent({
-        eventType: EVENT_TYPE.TRACK,
-        action: ACTION.COMMITTED,
-        actionSubject: ACTION_SUBJECT.DATE,
-        attributes: {
-          commitMethod: commitMethod,
-          isValid: date !== undefined,
-          isToday: isToday(date)
-        }
-      })(tr);
-    }
-    var _ref = pluginKey.getState(state) || {},
-      showDatePickerAt = _ref.showDatePickerAt;
-    if (!showDatePickerAt) {
-      var dateNode = schema.nodes.date.createChecked({
-        timestamp: timestamp
-      });
-      var textNode = state.schema.text(' ');
-      var fragment = Fragment.fromArray([dateNode, textNode]);
-      var _state$selection = state.selection,
-        from = _state$selection.from,
-        to = _state$selection.to;
-      var insertable = canInsert(tr.selection.$from, fragment);
-      if (!insertable) {
-        var parentSelection = NodeSelection.create(tr.doc, tr.selection.from - tr.selection.$anchor.parentOffset - 1);
-        tr.insert(parentSelection.to, fragment).setSelection(NodeSelection.create(tr.doc, parentSelection.to + 1));
-      } else {
-        tr.replaceWith(from, to, fragment).setSelection(NodeSelection.create(tr.doc, from));
-      }
-      if (dispatch) {
-        dispatch(tr.scrollIntoView().setMeta(pluginKey, {
-          isNew: true
-        }));
-      }
-      return true;
-    }
-    if (state.doc.nodeAt(showDatePickerAt)) {
-      if (enterPressed) {
-        // Setting selection to outside the date node causes showDatePickerAt
-        // to be set to null by the PM plugin (onSelectionChanged), which will
-        // immediately close the datepicker once a valid date is typed in.
-        // Adding this check forces it to stay open until the user presses Enter.
-        tr = tr.setSelection(Selection.near(tr.doc.resolve(showDatePickerAt + 2)));
-      }
-      tr = tr.setNodeMarkup(showDatePickerAt, schema.nodes.date, {
-        timestamp: timestamp
-      }).setMeta(pluginKey, {
-        isNew: false
-      }).scrollIntoView();
-      if (!enterPressed) {
-        tr = tr.setSelection(NodeSelection.create(tr.doc, showDatePickerAt));
-      }
-      if (dispatch) {
-        dispatch(tr);
-      }
-      return true;
-    }
-    return false;
-  };
-};
 export var setDatePickerAt = function setDatePickerAt(showDatePickerAt) {
   return function (state, dispatch) {
     dispatch(state.tr.setMeta(pluginKey, {
@@ -157,8 +51,8 @@ export var setDatePickerAt = function setDatePickerAt(showDatePickerAt) {
 };
 export var closeDatePicker = function closeDatePicker() {
   return function (state, dispatch) {
-    var _ref2 = pluginKey.getState(state) || {},
-      showDatePickerAt = _ref2.showDatePickerAt;
+    var _ref = pluginKey.getState(state) || {},
+      showDatePickerAt = _ref.showDatePickerAt;
     if (!dispatch) {
       return false;
     }
@@ -172,11 +66,11 @@ export var closeDatePicker = function closeDatePicker() {
     return false;
   };
 };
-export var closeDatePickerWithAnalytics = function closeDatePickerWithAnalytics(_ref3) {
-  var _pluginInjectionApi$a3;
-  var date = _ref3.date,
-    pluginInjectionApi = _ref3.pluginInjectionApi;
-  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 || (_pluginInjectionApi$a3 = _pluginInjectionApi$a3.actions) === null || _pluginInjectionApi$a3 === void 0 || _pluginInjectionApi$a3.attachAnalyticsEvent({
+export var closeDatePickerWithAnalytics = function closeDatePickerWithAnalytics(_ref2) {
+  var _pluginInjectionApi$a;
+  var date = _ref2.date,
+    pluginInjectionApi = _ref2.pluginInjectionApi;
+  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || (_pluginInjectionApi$a = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.attachAnalyticsEvent({
     eventType: EVENT_TYPE.TRACK,
     action: ACTION.COMMITTED,
     actionSubject: ACTION_SUBJECT.DATE,