@atlaskit/editor-core 148.0.0 → 149.0.3

package/dist/es2019/plugins/mentions/pm-plugins/main.js

@@ -0,0 +1,138 @@
+import { Plugin } from 'prosemirror-state';
+import { SLI_EVENT_TYPE, SMART_EVENT_TYPE, buildSliPayload } from '@atlaskit/mention/resource';
+import mentionNodeView from '../nodeviews/mention';
+import { mentionPluginKey } from './key';
+const ACTIONS = {
+  SET_PROVIDER: 'SET_PROVIDER',
+  SET_CONTEXT: 'SET_CONTEXT'
+};
+
+const setProvider = provider => (state, dispatch) => {
+  if (dispatch) {
+    dispatch(state.tr.setMeta(mentionPluginKey, {
+      action: ACTIONS.SET_PROVIDER,
+      params: {
+        provider
+      }
+    }));
+  }
+
+  return true;
+};
+
+export const setContext = context => (state, dispatch) => {
+  if (dispatch) {
+    dispatch(state.tr.setMeta(mentionPluginKey, {
+      action: ACTIONS.SET_CONTEXT,
+      params: {
+        context
+      }
+    }));
+  }
+
+  return true;
+};
+export function createMentionPlugin(dispatch, providerFactory, portalProviderAPI, eventDispatcher, fireEvent, options) {
+  let mentionProvider;
+
+  const sendAnalytics = (event, actionSubject, action, attributes) => {
+    if (event === SLI_EVENT_TYPE || event === SMART_EVENT_TYPE) {
+      fireEvent(buildSliPayload(actionSubject, action, attributes));
+    }
+  };
+
+  return new Plugin({
+    key: mentionPluginKey,
+    state: {
+      init() {
+        return {};
+      },
+
+      apply(tr, pluginState) {
+        const {
+          action,
+          params
+        } = tr.getMeta(mentionPluginKey) || {
+          action: null,
+          params: null
+        };
+        let newPluginState = pluginState;
+
+        switch (action) {
+          case ACTIONS.SET_PROVIDER:
+            newPluginState = { ...pluginState,
+              mentionProvider: params.provider
+            };
+            dispatch(mentionPluginKey, newPluginState);
+            return newPluginState;
+
+          case ACTIONS.SET_CONTEXT:
+            newPluginState = { ...pluginState,
+              contextIdentifierProvider: params.context
+            };
+            dispatch(mentionPluginKey, newPluginState);
+            return newPluginState;
+        }
+
+        return newPluginState;
+      }
+
+    },
+    props: {
+      nodeViews: {
+        mention: mentionNodeView(portalProviderAPI, eventDispatcher, providerFactory, options)
+      }
+    },
+
+    view(editorView) {
+      const providerHandler = (name, providerPromise) => {
+        switch (name) {
+          case 'mentionProvider':
+            if (!providerPromise) {
+              return setProvider(undefined)(editorView.state, editorView.dispatch);
+            }
+
+            providerPromise.then(provider => {
+              if (mentionProvider) {
+                mentionProvider.unsubscribe('mentionPlugin');
+              }
+
+              mentionProvider = provider;
+              setProvider(provider)(editorView.state, editorView.dispatch);
+              provider.subscribe('mentionPlugin', undefined, undefined, undefined, undefined, sendAnalytics);
+            }).catch(() => setProvider(undefined)(editorView.state, editorView.dispatch));
+            break;
+
+          case 'contextIdentifierProvider':
+            if (!providerPromise) {
+              return setContext(undefined)(editorView.state, editorView.dispatch);
+            }
+
+            providerPromise.then(provider => {
+              setContext(provider)(editorView.state, editorView.dispatch);
+            });
+            break;
+        }
+
+        return;
+      };
+
+      providerFactory.subscribe('mentionProvider', providerHandler);
+      providerFactory.subscribe('contextIdentifierProvider', providerHandler);
+      return {
+        destroy() {
+          if (providerFactory) {
+            providerFactory.unsubscribe('mentionProvider', providerHandler);
+            providerFactory.unsubscribe('contextIdentifierProvider', providerHandler);
+          }
+
+          if (mentionProvider) {
+            mentionProvider.unsubscribe('mentionPlugin');
+          }
+        }
+
+      };
+    }
+
+  });
+}

package/dist/es2019/plugins/mentions/pm-plugins/utils.js

@@ -0,0 +1,4 @@
+import { mentionPluginKey } from './key';
+export function getMentionPluginState(state) {
+  return mentionPluginKey.getState(state);
+}

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

@@ -0,0 +1,394 @@
+import React from 'react';
+import uuid from 'uuid';
+import { Fragment } from 'prosemirror-model';
+import { isResolvingMentionProvider } from '@atlaskit/mention/resource';
+import { MENTION_ITEM_HEIGHT, MentionItem } from '@atlaskit/mention/item';
+import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
+import { TeamMentionHighlight, TeamMentionHighlightController } from '@atlaskit/mention/spotlight';
+import { buildTypeAheadCancelPayload, buildTypeAheadInsertedPayload, buildTypeAheadInviteExposurePayload, buildTypeAheadInviteItemClickedPayload, buildTypeAheadInviteItemViewedPayload, buildTypeAheadRenderedPayload } from '../analytics';
+import InviteItem, { INVITE_ITEM_DESCRIPTION } from '../ui/InviteItem';
+import { isInviteItem, isTeamType, isTeamStats, shouldKeepInviteItem } from '../utils';
+import { getMentionPluginState } from '../pm-plugins/utils';
+
+const createInviteItem = ({
+  mentionProvider,
+  onInviteItemMount
+}) => ({
+  title: INVITE_ITEM_DESCRIPTION.id,
+  render: ({
+    isSelected,
+    onClick,
+    onHover
+  }) => /*#__PURE__*/React.createElement(InviteItem, {
+    productName: mentionProvider ? mentionProvider.productName : undefined,
+    selected: isSelected,
+    onMount: onInviteItemMount,
+    onMouseEnter: onHover,
+    onSelection: onClick,
+    userRole: mentionProvider.userRole
+  }),
+  mention: INVITE_ITEM_DESCRIPTION
+});
+
+const withInviteItem = ({
+  mentionProvider,
+  firstQueryWithoutResults,
+  currentQuery,
+  onInviteItemMount
+}) => mentionItems => {
+  const inviteItem = createInviteItem({
+    mentionProvider,
+    onInviteItemMount
+  });
+  const keepInviteItem = shouldKeepInviteItem(currentQuery, firstQueryWithoutResults);
+
+  if (mentionItems.length === 0) {
+    return keepInviteItem ? [inviteItem] : [];
+  }
+
+  return [...mentionItems, // invite item should be shown at the bottom
+  inviteItem];
+};
+
+export const mentionToTypeaheadItem = mention => {
+  return {
+    title: mention.id,
+    render: ({
+      isSelected,
+      onClick,
+      onHover
+    }) => /*#__PURE__*/React.createElement(MentionItem, {
+      mention: mention,
+      selected: isSelected,
+      onMouseEnter: onHover,
+      onSelection: onClick
+    }),
+    getCustomComponentHeight: () => {
+      return MENTION_ITEM_HEIGHT;
+    },
+    mention
+  };
+};
+export function memoize(fn) {
+  // Cache results here
+  const seen = new Map();
+
+  function memoized(mention) {
+    // Check cache for hits
+    const hit = seen.get(mention.id);
+
+    if (hit) {
+      return hit;
+    } // Generate new result and cache it
+
+
+    const result = fn(mention);
+    seen.set(mention.id, result);
+    return result;
+  }
+
+  return {
+    call: memoized,
+    clear: seen.clear.bind(seen)
+  };
+}
+const memoizedToItem = memoize(mentionToTypeaheadItem);
+
+const buildAndSendElementsTypeAheadAnalytics = fireEvent => ({
+  query,
+  mentions,
+  stats
+}) => {
+  let duration = 0;
+  let userOrTeamIds = null;
+  let teams = null;
+
+  if (!isTeamStats(stats)) {
+    // is from primary mention endpoint which could be just user mentions or user/team mentions
+    duration = stats && stats.duration;
+    teams = null;
+    userOrTeamIds = mentions.map(mention => mention.id);
+  } else {
+    // is from dedicated team-only mention endpoint
+    duration = stats && stats.teamMentionDuration;
+    userOrTeamIds = null;
+    teams = mentions.map(mention => isTeamType(mention.userType) ? {
+      teamId: mention.id,
+      includesYou: mention.context.includesYou,
+      memberCount: mention.context.memberCount
+    } : null).filter(m => !!m);
+  }
+
+  const payload = buildTypeAheadRenderedPayload(duration, userOrTeamIds, query, teams);
+  fireEvent(payload);
+};
+
+const isTeamMentionProvider = p => !!(p.mentionTypeaheadHighlightEnabled && p.mentionTypeaheadCreateTeamPath);
+/**
+ * When a team mention is selected, we render a team link and list of member/user mentions
+ * in editor content
+ */
+
+
+const buildNodesForTeamMention = (schema, selectedMention, mentionProvider, sanitizePrivateContent) => {
+  const {
+    nodes,
+    marks
+  } = schema;
+  const {
+    name,
+    id: teamId,
+    accessLevel,
+    context
+  } = selectedMention; // build team link
+
+  const defaultTeamLink = `${window.location.origin}/people/team/${teamId}`;
+  const teamLink = context && context.teamLink ? context.teamLink : defaultTeamLink;
+  const teamLinkNode = schema.text(name, [marks.link.create({
+    href: teamLink
+  })]);
+  const openBracketText = schema.text('(');
+  const closeBracketText = schema.text(')');
+  const emptySpaceText = schema.text(' ');
+  const inlineNodes = [teamLinkNode, emptySpaceText, openBracketText];
+  const members = context && context.members ? context.members : [];
+  members.forEach((member, index) => {
+    const {
+      name,
+      id
+    } = member;
+    const mentionName = `@${name}`;
+    const text = sanitizePrivateContent ? '' : mentionName;
+
+    if (sanitizePrivateContent && isResolvingMentionProvider(mentionProvider)) {
+      mentionProvider.cacheMentionName(id, name);
+    }
+
+    const userMentionNode = nodes.mention.createChecked({
+      text,
+      id: member.id,
+      accessLevel,
+      userType: 'DEFAULT'
+    });
+    inlineNodes.push(userMentionNode); // should not add empty space after the last user mention.
+
+    if (index !== members.length - 1) {
+      inlineNodes.push(emptySpaceText);
+    }
+  });
+  inlineNodes.push(closeBracketText);
+  return Fragment.fromArray(inlineNodes);
+};
+
+export const createTypeAheadConfig = ({
+  sanitizePrivateContent,
+  mentionInsertDisplayName,
+  fireEvent,
+  HighlightComponent
+}) => {
+  let sessionId = uuid();
+  let firstQueryWithoutResults = null;
+  const subscriptionKeys = new Set();
+  const typeAhead = {
+    id: TypeAheadAvailableNodes.MENTION,
+    trigger: '@',
+    // Custom regex must have a capture group around trigger
+    // so it's possible to use it without needing to scan through all triggers again
+    customRegex: '\\(?(@)',
+    getHighlight: state => {
+      const CustomHighlightComponent = HighlightComponent;
+
+      if (CustomHighlightComponent) {
+        return /*#__PURE__*/React.createElement(CustomHighlightComponent, null);
+      }
+
+      const pluginState = getMentionPluginState(state);
+      const provider = pluginState.mentionProvider;
+
+      if (provider) {
+        const teamMentionProvider = provider;
+
+        if (isTeamMentionProvider(teamMentionProvider) && teamMentionProvider.mentionTypeaheadHighlightEnabled()) {
+          return /*#__PURE__*/React.createElement(TeamMentionHighlight, {
+            createTeamLink: teamMentionProvider.mentionTypeaheadCreateTeamPath(),
+            onClose: () => TeamMentionHighlightController.registerClosed()
+          });
+        }
+      }
+
+      return null;
+    },
+
+    getItems({
+      query,
+      editorState
+    }) {
+      const pluginState = getMentionPluginState(editorState);
+
+      if (!(pluginState !== null && pluginState !== void 0 && pluginState.mentionProvider)) {
+        return Promise.resolve([]);
+      }
+
+      const {
+        mentionProvider,
+        contextIdentifierProvider
+      } = pluginState;
+      return new Promise(resolve => {
+        const key = `loadingMentionsForTypeAhead_${uuid()}`;
+
+        const mentionsSubscribeCallback = (mentions, resultQuery = '', stats) => {
+          if (query !== resultQuery) {
+            return;
+          }
+
+          mentionProvider.unsubscribe(key);
+          subscriptionKeys.delete(key);
+          const mentionItems = mentions.map(mention => memoizedToItem.call(mention));
+          buildAndSendElementsTypeAheadAnalytics(fireEvent)({
+            query,
+            mentions,
+            stats
+          });
+
+          if (mentions.length === 0 && firstQueryWithoutResults === null) {
+            firstQueryWithoutResults = query;
+          }
+
+          if (!mentionProvider.shouldEnableInvite || mentionItems.length > 2) {
+            resolve(mentionItems);
+          } else {
+            const items = withInviteItem({
+              mentionProvider,
+              firstQueryWithoutResults: firstQueryWithoutResults || '',
+              currentQuery: query,
+              onInviteItemMount: () => {
+                fireEvent(buildTypeAheadInviteItemViewedPayload(sessionId, contextIdentifierProvider, mentionProvider.userRole));
+              }
+            })(mentionItems);
+            resolve(items);
+          }
+        };
+
+        subscriptionKeys.add(key);
+        mentionProvider.subscribe(key, mentionsSubscribeCallback);
+        mentionProvider.filter(query || '', { ...contextIdentifierProvider,
+          sessionId
+        });
+      });
+    },
+
+    onOpen: editorState => {
+      firstQueryWithoutResults = null;
+      const pluginState = getMentionPluginState(editorState);
+
+      if (!pluginState || !pluginState.mentionProvider) {
+        return null;
+      }
+
+      const {
+        contextIdentifierProvider,
+        mentionProvider: {
+          shouldEnableInvite,
+          inviteExperimentCohort,
+          userRole
+        }
+      } = pluginState;
+      fireEvent(buildTypeAheadInviteExposurePayload(!!shouldEnableInvite, sessionId, contextIdentifierProvider, inviteExperimentCohort, userRole));
+    },
+
+    selectItem(state, item, insert, {
+      mode,
+      stats,
+      query,
+      sourceListItem
+    }) {
+      const {
+        schema
+      } = state;
+      const pluginState = getMentionPluginState(state);
+      const {
+        mentionProvider
+      } = pluginState;
+      const {
+        id,
+        name,
+        nickname,
+        accessLevel,
+        userType
+      } = item.mention;
+      const trimmedNickname = nickname && nickname.startsWith('@') ? nickname.slice(1) : nickname;
+      const renderName = mentionInsertDisplayName || !trimmedNickname ? name : trimmedNickname;
+      const mentionContext = { ...pluginState.contextIdentifierProvider,
+        sessionId
+      };
+
+      if (mentionProvider && !isInviteItem(item.mention)) {
+        mentionProvider.recordMentionSelection(item.mention, mentionContext);
+      }
+
+      const pickerElapsedTime = stats.startedAt ? Date.now() - stats.startedAt : 0;
+
+      if (mentionProvider && mentionProvider.shouldEnableInvite && isInviteItem(item.mention)) {
+        // Don't fire event and the callback with selection by space press
+        if (mode !== 'space') {
+          fireEvent(buildTypeAheadInviteItemClickedPayload(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, mode, query, pluginState.contextIdentifierProvider, mentionProvider.userRole));
+
+          if (mentionProvider.onInviteItemClick) {
+            mentionProvider.onInviteItemClick('mention');
+          }
+        }
+
+        return state.tr;
+      }
+
+      fireEvent(buildTypeAheadInsertedPayload(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, mode, item.mention, sourceListItem.map(x => x.mention), query, pluginState.contextIdentifierProvider));
+      sessionId = uuid();
+
+      if (mentionProvider && isTeamType(userType)) {
+        TeamMentionHighlightController.registerTeamMention();
+        return insert(buildNodesForTeamMention(schema, item.mention, mentionProvider, sanitizePrivateContent));
+      } // Don't insert into document if document data is sanitized.
+
+
+      const text = sanitizePrivateContent ? '' : `@${renderName}`;
+
+      if (sanitizePrivateContent && isResolvingMentionProvider(mentionProvider)) {
+        // Cache (locally) for later rendering
+        mentionProvider.cacheMentionName(id, renderName);
+      }
+
+      const mentionNode = schema.nodes.mention.createChecked({
+        text,
+        id,
+        accessLevel,
+        userType: userType === 'DEFAULT' ? null : userType
+      });
+      const space = schema.text(' ');
+      return insert(Fragment.from([mentionNode, space]));
+    },
+
+    dismiss({
+      editorState,
+      query,
+      stats
+    }) {
+      firstQueryWithoutResults = null;
+      const pickerElapsedTime = stats.startedAt ? Date.now() - stats.startedAt : 0;
+      fireEvent(buildTypeAheadCancelPayload(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, query || ''));
+      const pluginState = getMentionPluginState(editorState);
+
+      if (pluginState !== null && pluginState !== void 0 && pluginState.mentionProvider) {
+        const mentionProvider = pluginState.mentionProvider;
+
+        for (let key of subscriptionKeys) {
+          mentionProvider.unsubscribe(key);
+        }
+      }
+
+      subscriptionKeys.clear();
+      sessionId = uuid();
+    }
+
+  };
+  return typeAhead;
+};

package/dist/es2019/plugins/mentions/ui/InviteItem/index.js

@@ -3,8 +3,9 @@ import AddIcon from '@atlaskit/icon/glyph/add';
 import { N300 } from '@atlaskit/theme/colors';
 import React, { useCallback, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { AvatarStyle, CapitalizedStyle, MentionItemStyle, NameSectionStyle, RowStyle } from './styles';
+import { AvatarStyle, CapitalizedStyle, MentionItemStyle, NameSectionStyle, RowStyle, ROW_SIDE_PADDING, AVATAR_HEIGHT } from './styles';
 import { messages } from '../../messages';
+export const INVITE_ITEM_MIN_HEIGHT = AVATAR_HEIGHT + ROW_SIDE_PADDING * 2;
 export const INVITE_ITEM_DESCRIPTION = {
   id: 'invite-teammate'
 };

package/dist/es2019/plugins/mentions/ui/InviteItem/styles.js

@@ -1,22 +1,24 @@
 import styled from 'styled-components'; // prettier-ignore
 
 import { N30, N300 } from '@atlaskit/theme/colors';
+export const ROW_SIDE_PADDING = 14;
 export const RowStyle = styled.div`
   align-items: center;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   overflow: hidden;
-  padding: 6px 14px;
+  padding: 6px ${ROW_SIDE_PADDING}px;
   text-overflow: ellipsis;
   vertical-align: middle;
 `;
+export const AVATAR_HEIGHT = 36;
 export const AvatarStyle = styled.span`
   position: relative;
   flex: initial;
   opacity: inherit;
   width: 36px;
-  height: 36px;
+  height: ${AVATAR_HEIGHT}px;
 
   > span {
     width: 24px;

package/dist/es2019/plugins/mentions/ui/ToolbarMention/index.js

@@ -3,8 +3,8 @@ import React from 'react';
 import { PureComponent } from 'react';
 import MentionIcon from '@atlaskit/icon/glyph/editor/mention';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
-import { insertMentionQuery } from '../../commands/insert-mention-query';
 import { INPUT_METHOD } from '../../../analytics';
+import { createTypeAheadTools } from '../../../type-ahead/api';
 export default class ToolbarMention extends PureComponent {
   constructor(...args) {
     super(...args);
@@ -14,7 +14,7 @@ export default class ToolbarMention extends PureComponent {
         return false;
       }
 
-      insertMentionQuery(INPUT_METHOD.TOOLBAR)(this.props.editorView.state, this.props.editorView.dispatch);
+      createTypeAheadTools(this.props.editorView).openMention(INPUT_METHOD.INSERT_MENU);
       return true;
     });
   }

package/dist/es2019/plugins/mentions/utils.js

@@ -1,4 +1,23 @@
 import { INVITE_ITEM_DESCRIPTION } from './ui/InviteItem';
 export const isTeamType = userType => userType === 'TEAM';
 export const isTeamStats = stat => stat && !isNaN(stat.teamMentionDuration);
-export const isInviteItem = mention => mention && mention.id === INVITE_ITEM_DESCRIPTION.id;
+export const isInviteItem = mention => mention && mention.id === INVITE_ITEM_DESCRIPTION.id;
+/**
+ * Actions
+ */
+
+export const shouldKeepInviteItem = (query, firstQueryWithoutResults) => {
+  if (!firstQueryWithoutResults) {
+    return true;
+  }
+
+  let lastIndexWithResults = firstQueryWithoutResults.length - 1;
+  let suffix = query.slice(lastIndexWithResults);
+
+  if (query[lastIndexWithResults - 1] === ' ') {
+    suffix = ' ' + suffix;
+  }
+
+  const depletedExtraWords = /\s[^\s]+\s/.test(suffix);
+  return !depletedExtraWords;
+};