@atlaskit/editor-plugin-mentions 0.1.0

package/dist/cjs/utils.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldKeepInviteItem = exports.isTeamType = exports.isTeamStats = exports.isInviteItem = void 0;
+var _InviteItem = require("./ui/InviteItem");
+var isTeamType = exports.isTeamType = function isTeamType(userType) {
+  return userType === 'TEAM';
+};
+var isTeamStats = exports.isTeamStats = function isTeamStats(stat) {
+  return stat && !isNaN(stat.teamMentionDuration);
+};
+var isInviteItem = exports.isInviteItem = function isInviteItem(mention) {
+  return mention && mention.id === _InviteItem.INVITE_ITEM_DESCRIPTION.id;
+};
+
+/**
+ * Actions
+ */
+var shouldKeepInviteItem = exports.shouldKeepInviteItem = function shouldKeepInviteItem(query, firstQueryWithoutResults) {
+  if (!firstQueryWithoutResults) {
+    return true;
+  }
+  var lastIndexWithResults = firstQueryWithoutResults.length - 1;
+  var suffix = query.slice(lastIndexWithResults);
+  if (query[lastIndexWithResults - 1] === ' ') {
+    suffix = ' ' + suffix;
+  }
+  var depletedExtraWords = /\s[^\s]+\s/.test(suffix);
+  return !depletedExtraWords;
+};

package/dist/es2019/analytics.js

@@ -0,0 +1,147 @@
+import { OPERATIONAL_EVENT_TYPE, UI_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
+import { isSpecialMention } from '@atlaskit/mention/resource';
+import { isTeamType } from './utils';
+const componentName = 'mention';
+export const buildAnalyticsPayload = (actionSubject, action, eventType, sessionId, otherAttributes = {}, tags = []) => ({
+  action,
+  actionSubject,
+  eventType,
+  attributes: {
+    componentName,
+    sessionId,
+    ...otherAttributes
+  },
+  tags
+});
+const emptyQueryResponse = {
+  queryLength: 0,
+  spaceInQuery: false
+};
+const extractAttributesFromQuery = query => {
+  if (query) {
+    return {
+      queryLength: query.length,
+      spaceInQuery: query.indexOf(' ') !== -1
+    };
+  }
+  return emptyQueryResponse;
+};
+export const buildTypeAheadCancelPayload = (duration, upKeyCount, downKeyCount, sessionId, query) => {
+  const {
+    queryLength,
+    spaceInQuery
+  } = extractAttributesFromQuery(query);
+  return buildAnalyticsPayload('mentionTypeahead', 'cancelled', UI_EVENT_TYPE, sessionId, {
+    duration,
+    downKeyCount,
+    upKeyCount,
+    queryLength,
+    spaceInQuery
+  });
+};
+const getPosition = (mentionList, selectedMention) => {
+  if (mentionList) {
+    const index = mentionList.findIndex(mention => mention.id === selectedMention.id);
+    return index === -1 ? undefined : index;
+  }
+  return;
+};
+const isClicked = insertType => insertType === 'selected';
+export const buildTypeAheadInviteItemViewedPayload = (sessionId, contextIdentifierProvider, userRole) => {
+  const {
+    containerId,
+    objectId,
+    childObjectId
+  } = contextIdentifierProvider || {};
+  return buildAnalyticsPayload('inviteItem', 'rendered', UI_EVENT_TYPE, sessionId, {
+    containerId,
+    objectId,
+    childObjectId,
+    userRole
+  });
+};
+export const buildTypeAheadInviteExposurePayload = (sessionId, contextIdentifierProvider, inviteExperimentCohort, userRole) => {
+  const {
+    containerId,
+    objectId,
+    childObjectId
+  } = contextIdentifierProvider || {};
+  return buildAnalyticsPayload('feature', 'exposed', OPERATIONAL_EVENT_TYPE, sessionId, {
+    flagKey: 'confluence.frontend.invite.from.mention',
+    value: inviteExperimentCohort || 'not-enrolled',
+    containerId,
+    objectId,
+    childObjectId,
+    userRole
+  }, ['measurement', 'hasCustomAttributes']);
+};
+export const buildTypeAheadInviteItemClickedPayload = (duration, upKeyCount, downKeyCount, sessionId, insertType, query, contextIdentifierProvider, userRole) => {
+  const {
+    queryLength,
+    spaceInQuery
+  } = extractAttributesFromQuery(query);
+  const {
+    containerId,
+    objectId,
+    childObjectId
+  } = contextIdentifierProvider || {};
+  return buildAnalyticsPayload('inviteItem', isClicked(insertType) ? 'clicked' : 'pressed', UI_EVENT_TYPE, sessionId, {
+    duration,
+    queryLength,
+    spaceInQuery,
+    upKeyCount,
+    downKeyCount,
+    containerId,
+    objectId,
+    childObjectId,
+    userRole
+  });
+};
+export const buildTypeAheadInsertedPayload = (duration, upKeyCount, downKeyCount, sessionId, insertType, mention, mentionList, query, contextIdentifierProvider) => {
+  const {
+    queryLength,
+    spaceInQuery
+  } = extractAttributesFromQuery(query);
+  let analyticsPayload = buildAnalyticsPayload('mentionTypeahead', isClicked(insertType) ? 'clicked' : 'pressed', UI_EVENT_TYPE, sessionId, {
+    duration,
+    position: getPosition(mentionList, mention),
+    keyboardKey: isClicked(insertType) ? undefined : insertType,
+    source: mention.source,
+    queryLength,
+    spaceInQuery,
+    isSpecial: isSpecialMention(mention),
+    accessLevel: mention.accessLevel || '',
+    userType: mention.userType,
+    userId: mention.id,
+    upKeyCount,
+    downKeyCount,
+    memberCount: isTeamType(mention.userType) && mention.context ? mention.context.memberCount : null,
+    includesYou: isTeamType(mention.userType) && mention.context ? mention.context.includesYou : null
+  });
+  if (contextIdentifierProvider) {
+    analyticsPayload.containerId = contextIdentifierProvider.containerId || undefined;
+    analyticsPayload.objectId = contextIdentifierProvider.objectId || undefined;
+    analyticsPayload.childObjectId = contextIdentifierProvider.childObjectId || undefined;
+  }
+  return analyticsPayload;
+};
+export const buildTypeAheadRenderedPayload = (duration, userIds, query, teams) => {
+  const {
+    queryLength,
+    spaceInQuery
+  } = extractAttributesFromQuery(query);
+  const actionSubject = userIds ? 'mentionTypeahead' : 'teamMentionTypeahead';
+  return {
+    action: 'rendered',
+    actionSubject,
+    eventType: OPERATIONAL_EVENT_TYPE,
+    attributes: {
+      componentName,
+      duration,
+      userIds,
+      teams,
+      queryLength,
+      spaceInQuery
+    }
+  };
+};

package/dist/es2019/index.js

@@ -0,0 +1 @@
+export { mentionsPlugin } from './plugin';

package/dist/es2019/messages.js

@@ -0,0 +1,23 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  inviteItemTitle: {
+    id: 'fabric.editor.inviteItem.title',
+    defaultMessage: '{userRole, select, admin {Invite} trusted {Invite} other {Add}} teammate to {productName}',
+    description: 'Title of the invite teammate item in typeahead plugin'
+  },
+  mentionsAddLabel: {
+    id: 'fabric.editor.mentionsAddLabel',
+    defaultMessage: 'add-icon',
+    description: 'icon label to describe adding a new mention'
+  },
+  mentionsIconLabel: {
+    id: 'fabric.editor.mentionsIconLabel',
+    defaultMessage: 'Mention',
+    description: 'icon label to describe the mention icon'
+  },
+  mentionsNodeLabel: {
+    id: 'fabric.editor.mentionNode.label',
+    defaultMessage: 'Tagged user',
+    description: 'Label to indicate mention node to Screen reader users, that preceeds with user name ex: "Tagged user @XXX'
+  }
+});

package/dist/es2019/nodeviews/mention.js

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl-next';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { isResolvingMentionProvider, MentionNameStatus } from '@atlaskit/mention';
+import { isPromise } from '@atlaskit/mention/types';
+import { messages } from '../messages';
+import Mention from '../ui/Mention';
+const UNKNOWN_USER_ID = '_|unknown|_';
+const MentionAssistiveTextComponent = ({
+  id,
+  text,
+  providers,
+  accessLevel,
+  mentionProvider
+}) => {
+  const [resolvedName, setResolvedName] = useState(text);
+  const intl = useIntl();
+  const processName = name => {
+    if (name.status === MentionNameStatus.OK) {
+      return `@${name.name || ''}`;
+    } else {
+      return `@${UNKNOWN_USER_ID}`;
+    }
+  };
+  useEffect(() => {
+    if (mentionProvider) {
+      mentionProvider.then(async provider => {
+        if (!text && isResolvingMentionProvider(provider)) {
+          const nameDetail = provider.resolveMentionName(id);
+          if (isPromise(nameDetail)) {
+            return processName(await nameDetail);
+          } else {
+            return processName(nameDetail);
+          }
+        } else {
+          return text;
+        }
+      }).then(resolvedName => {
+        setResolvedName(resolvedName);
+      });
+    }
+  }, [id, text, mentionProvider]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: 'assistive'
+  }, `${intl.formatMessage(messages.mentionsNodeLabel)} ${resolvedName}`), /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement(Mention, {
+    id: id,
+    text: resolvedName,
+    accessLevel: accessLevel,
+    providers: providers
+  })));
+};
+export const MentionNodeView = props => {
+  const {
+    providerFactory
+  } = props;
+  const {
+    id,
+    text,
+    accessLevel
+  } = props.node.attrs;
+  const renderAssistiveTextWithProviders = providers => {
+    const {
+      mentionProvider
+    } = providers;
+    return /*#__PURE__*/React.createElement(MentionAssistiveTextComponent, {
+      mentionProvider: mentionProvider,
+      id: id,
+      text: text,
+      providers: providerFactory,
+      accessLevel: accessLevel
+    });
+  };
+  return /*#__PURE__*/React.createElement(WithProviders, {
+    providers: ['mentionProvider', 'profilecardProvider'],
+    providerFactory: providerFactory,
+    renderNode: renderAssistiveTextWithProviders
+  });
+};

package/dist/es2019/plugin.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import uuid from 'uuid';
+import { mention } from '@atlaskit/adf-schema';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { IconMention } from '@atlaskit/editor-common/quick-insert';
+import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import { ELEMENTS_CHANNEL } from '@atlaskit/mention/resource';
+import { mentionPluginKey } from './pm-plugins/key';
+import { createMentionPlugin } from './pm-plugins/main';
+import { createTypeAheadConfig } from './type-ahead';
+import ToolbarMention from './ui/ToolbarMention';
+const mentionsPlugin = ({
+  config: options,
+  api
+}) => {
+  let sessionId = uuid();
+  const fireEvent = payload => {
+    var _api$analytics$shared, _api$analytics;
+    const {
+      createAnalyticsEvent
+    } = (_api$analytics$shared = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.sharedState.currentState()) !== null && _api$analytics$shared !== void 0 ? _api$analytics$shared : {};
+    if (!createAnalyticsEvent) {
+      return;
+    }
+    if (payload.attributes && !payload.attributes.sessionId) {
+      payload.attributes.sessionId = sessionId;
+    }
+    createAnalyticsEvent(payload).fire(ELEMENTS_CHANNEL);
+  };
+  const typeAhead = createTypeAheadConfig({
+    sanitizePrivateContent: options === null || options === void 0 ? void 0 : options.sanitizePrivateContent,
+    mentionInsertDisplayName: options === null || options === void 0 ? void 0 : options.insertDisplayName,
+    HighlightComponent: options === null || options === void 0 ? void 0 : options.HighlightComponent,
+    fireEvent
+  });
+  return {
+    name: 'mention',
+    nodes() {
+      return [{
+        name: 'mention',
+        node: mention
+      }];
+    },
+    pmPlugins() {
+      return [{
+        name: 'mention',
+        plugin: pmPluginFactoryParams => createMentionPlugin(pmPluginFactoryParams, fireEvent, options)
+      }];
+    },
+    secondaryToolbarComponent({
+      editorView,
+      disabled
+    }) {
+      const openMentionTypeAhead = () => {
+        var _api$typeAhead, _api$typeAhead$action;
+        api === null || api === void 0 ? void 0 : (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : (_api$typeAhead$action = _api$typeAhead.actions) === null || _api$typeAhead$action === void 0 ? void 0 : _api$typeAhead$action.open({
+          triggerHandler: typeAhead,
+          inputMethod: INPUT_METHOD.INSERT_MENU
+        });
+      };
+      return /*#__PURE__*/React.createElement(WithPluginState, {
+        editorView: editorView,
+        plugins: {
+          mentionState: mentionPluginKey
+        },
+        render: ({
+          mentionState = {}
+        }) => !mentionState.mentionProvider ? null : /*#__PURE__*/React.createElement(ToolbarMention, {
+          editorView: editorView,
+          onInsertMention: openMentionTypeAhead,
+          isDisabled: disabled || (api === null || api === void 0 ? void 0 : api.typeAhead.actions.isAllowed(editorView.state))
+        })
+      });
+    },
+    actions: {
+      openTypeAhead(inputMethod) {
+        var _api$typeAhead2, _api$typeAhead2$actio;
+        return Boolean(api === null || api === void 0 ? void 0 : (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : (_api$typeAhead2$actio = _api$typeAhead2.actions) === null || _api$typeAhead2$actio === void 0 ? void 0 : _api$typeAhead2$actio.open({
+          triggerHandler: typeAhead,
+          inputMethod
+        }));
+      }
+    },
+    getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      const mentionPluginState = mentionPluginKey.getState(editorState);
+      return {
+        ...mentionPluginState,
+        typeAheadHandler: typeAhead
+      };
+    },
+    pluginsOptions: {
+      quickInsert: ({
+        formatMessage
+      }) => [{
+        id: 'mention',
+        title: formatMessage(messages.mention),
+        description: formatMessage(messages.mentionDescription),
+        keywords: ['team', 'user'],
+        priority: 400,
+        keyshortcut: '@',
+        icon: () => /*#__PURE__*/React.createElement(IconMention, null),
+        action(insert, state) {
+          const tr = insert(undefined);
+          const pluginState = mentionPluginKey.getState(state);
+          if (pluginState && pluginState.canInsertMention === false) {
+            return false;
+          }
+          api === null || api === void 0 ? void 0 : api.typeAhead.actions.openAtTransaction({
+            triggerHandler: typeAhead,
+            inputMethod: INPUT_METHOD.QUICK_INSERT
+          })(tr);
+          return tr;
+        }
+      }],
+      typeAhead
+    }
+  };
+};
+export { mentionsPlugin };

package/dist/es2019/pm-plugins/key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const mentionPluginKey = new PluginKey('mentionPlugin');

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

@@ -0,0 +1,143 @@
+import { getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-view';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { buildSliPayload, SLI_EVENT_TYPE, SMART_EVENT_TYPE } from '@atlaskit/mention/resource';
+import { MentionNodeView } from '../nodeviews/mention';
+import { mentionPluginKey } from './key';
+import { canMentionBeCreatedInRange } from './utils';
+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(pmPluginFactoryParams, 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 SafePlugin({
+    key: mentionPluginKey,
+    state: {
+      init(_, state) {
+        const canInsertMention = canMentionBeCreatedInRange(state.selection.from, state.selection.to)(state);
+        return {
+          canInsertMention
+        };
+      },
+      apply(tr, pluginState, oldState, newState) {
+        const {
+          action,
+          params
+        } = tr.getMeta(mentionPluginKey) || {
+          action: null,
+          params: null
+        };
+        let hasNewPluginState = false;
+        let newPluginState = pluginState;
+        const hasPositionChanged = oldState.selection.from !== newState.selection.from || oldState.selection.to !== newState.selection.to;
+        if (tr.docChanged || tr.selectionSet && hasPositionChanged) {
+          newPluginState = {
+            ...pluginState,
+            canInsertMention: canMentionBeCreatedInRange(newState.selection.from, newState.selection.to)(newState)
+          };
+          hasNewPluginState = true;
+        }
+        switch (action) {
+          case ACTIONS.SET_PROVIDER:
+            newPluginState = {
+              ...newPluginState,
+              mentionProvider: params.provider
+            };
+            hasNewPluginState = true;
+            break;
+          case ACTIONS.SET_CONTEXT:
+            newPluginState = {
+              ...newPluginState,
+              contextIdentifierProvider: params.context
+            };
+            hasNewPluginState = true;
+            break;
+        }
+        if (hasNewPluginState) {
+          pmPluginFactoryParams.dispatch(mentionPluginKey, newPluginState);
+        }
+        return newPluginState;
+      }
+    },
+    props: {
+      nodeViews: {
+        mention: getInlineNodeViewProducer({
+          pmPluginFactoryParams,
+          Component: MentionNodeView,
+          extraComponentProps: {
+            providerFactory: pmPluginFactoryParams.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;
+      };
+      pmPluginFactoryParams.providerFactory.subscribe('mentionProvider', providerHandler);
+      pmPluginFactoryParams.providerFactory.subscribe('contextIdentifierProvider', providerHandler);
+      return {
+        destroy() {
+          if (pmPluginFactoryParams.providerFactory) {
+            pmPluginFactoryParams.providerFactory.unsubscribe('mentionProvider', providerHandler);
+            pmPluginFactoryParams.providerFactory.unsubscribe('contextIdentifierProvider', providerHandler);
+          }
+          if (mentionProvider) {
+            mentionProvider.unsubscribe('mentionPlugin');
+          }
+        }
+      };
+    }
+  });
+}

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

@@ -0,0 +1,14 @@
+import { canInsert } from '@atlaskit/editor-prosemirror/utils';
+import { mentionPluginKey } from './key';
+export function getMentionPluginState(state) {
+  return mentionPluginKey.getState(state);
+}
+export const canMentionBeCreatedInRange = (from, to) => state => {
+  const $from = state.doc.resolve(from);
+  const $to = state.doc.resolve(to);
+  const mention = state.schema.nodes.mention.createChecked();
+  if ($from.parent === $to.parent && canInsert($from, mention)) {
+    return true;
+  }
+  return false;
+};