@atlaskit/editor-plugin-avatar-group 0.1.0

package/dist/es2019/ui/avatars.js

@@ -0,0 +1,66 @@
+/** @jsx jsx */
+
+import React from 'react';
+import { jsx } from '@emotion/react';
+import AvatarGroup from '@atlaskit/avatar-group';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { avatarContainer } from './styles';
+import toAvatar from './to-avatar';
+export const scrollToCollabCursor = (editorView, participants, sessionId, index, editorAnalyticsAPI) => {
+  const selectedUser = participants[index];
+  if (selectedUser && selectedUser.cursorPos !== undefined && selectedUser.sessionId !== sessionId) {
+    const {
+      state
+    } = editorView;
+    let tr = state.tr;
+    const analyticsPayload = {
+      action: ACTION.MATCHED,
+      actionSubject: ACTION_SUBJECT.SELECTION,
+      eventType: EVENT_TYPE.TRACK
+    };
+    tr.setSelection(Selection.near(tr.doc.resolve(selectedUser.cursorPos)));
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(analyticsPayload)(tr);
+    tr.scrollIntoView();
+    editorView.dispatch(tr);
+    if (!editorView.hasFocus()) {
+      editorView.focus();
+    }
+  }
+};
+export const Avatars = /*#__PURE__*/React.memo(props => {
+  var _props$participants;
+  const {
+    sessionId,
+    editorView,
+    featureFlags,
+    editorAPI
+  } = props;
+  const participants = (_props$participants = props.participants) === null || _props$participants === void 0 ? void 0 : _props$participants.toArray();
+  const avatars = participants.sort(p => p.sessionId === sessionId ? -1 : 1).map(participant => toAvatar(participant, editorAPI));
+  if (!avatars.length) {
+    return null;
+  }
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    jsx("div", {
+      css: avatarContainer
+    }, jsx(AvatarGroup, {
+      appearance: "stack",
+      size: "medium",
+      data: avatars,
+      maxCount: 3,
+      onAvatarClick: (_event, _analytics, index) => {
+        if (!editorView) {
+          return;
+        }
+        const allowCollabAvatarScroll = featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.collabAvatarScroll;
+
+        // user does not need to scroll to their own position (index 0)
+        if (allowCollabAvatarScroll && index > 0) {
+          scrollToCollabCursor(editorView, participants, props.sessionId, index, props.editorAnalyticsAPI);
+        }
+      }
+    }), props.children)
+  );
+});

package/dist/es2019/ui/colored-avatar-item.js

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { R100 } from '@atlaskit/theme/colors';
+import { badge } from './styles';
+export const ColoredAvatarItem = props => {
+  var _props$api, _props$api$collabEdit, _props$api$collabEdit2;
+  const color = (_props$api = props.api) === null || _props$api === void 0 ? void 0 : (_props$api$collabEdit = _props$api.collabEdit) === null || _props$api$collabEdit === void 0 ? void 0 : (_props$api$collabEdit2 = _props$api$collabEdit.actions) === null || _props$api$collabEdit2 === void 0 ? void 0 : _props$api$collabEdit2.getAvatarColor(props.sessionId).color.solid;
+  const avatar = props.name.substr(0, 1).toUpperCase();
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    jsx("div", {
+      css: badge(color || R100),
+      "data-testid": "editor-collab-badge"
+    }, avatar)
+  );
+};

package/dist/es2019/ui/index.js

@@ -0,0 +1,3 @@
+import AvatarsWithPluginState from './avatars-with-plugin-state';
+export default AvatarsWithPluginState;
+export { default as AvatarGroupPluginWrapper } from './AvatarGroupPluginWrapper';

package/dist/es2019/ui/invite-to-edit.js

@@ -0,0 +1,35 @@
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { jsx } from '@emotion/react';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import InviteTeamIcon from '@atlaskit/icon/glyph/editor/add';
+import { inviteTeamWrapper } from './styles';
+const ID = props => jsx(Fragment, null, props.children);
+export const InviteToEditButton = props => {
+  const {
+    Component,
+    onClick,
+    selected,
+    title
+  } = props;
+  const iconBefore = React.useMemo(() => jsx(InviteTeamIcon, {
+    label: title
+  }), [title]);
+  if (!Component && !onClick) {
+    return null;
+  }
+  const Wrapper = Component ? Component : ID;
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    jsx("div", {
+      css: inviteTeamWrapper
+    }, jsx(Wrapper, null, jsx(ToolbarButton, {
+      className: "invite-to-edit",
+      onClick: onClick,
+      selected: selected,
+      title: title,
+      titlePosition: "bottom",
+      iconBefore: iconBefore
+    })))
+  );
+};

package/dist/es2019/ui/styles.js

@@ -0,0 +1,46 @@
+import { css } from '@emotion/react';
+import { akEditorSmallZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { N20 } from '@atlaskit/theme/colors';
+export const inviteTeamWrapper = css`
+  background: ${`var(--ds-background-neutral, ${N20})`};
+  border-radius: 50%;
+  min-width: ${"var(--ds-space-400, 32px)"};
+  margin-left: ${"var(--ds-space-negative-050, -4px)"};
+`;
+export const avatarContainer = css`
+  margin-right: ${"var(--ds-space-100, 8px)"};
+  display: flex;
+  align-items: center;
+
+  // ED-13102: This is to override list styles that come from the
+  // .wiki-content class in Confluence that should not apply within
+  // the toolbar. Has to be extra specific to override.
+  && > ul {
+    list-style-type: none;
+  }
+
+  div:last-child button.invite-to-edit {
+    border-radius: 50%;
+    height: 32px;
+    width: 32px;
+    padding: ${"var(--ds-space-025, 2px)"};
+  }
+`;
+export const badge = color => css`
+  display: block;
+  position: absolute;
+  right: 1px;
+  bottom: 1px;
+  width: 13px;
+  height: 13px;
+  z-index: ${akEditorSmallZIndex};
+  border-radius: 3px;
+  background: ${color};
+  color: ${"var(--ds-text-inverse, #fff)"};
+  font-size: ${relativeFontSizeToBase16(9)};
+  line-height: 0;
+  padding-top: 7px;
+  text-align: center;
+  box-shadow: 0 0 1px ${"var(--ds-border-inverse, #fff)"};
+  box-sizing: border-box;
+`;

package/dist/es2019/ui/to-avatar.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import memoizeOne from 'memoize-one';
+import { ColoredAvatarItem } from './colored-avatar-item';
+const toAvatar = (participant, api) => ({
+  name: participant.name,
+  src: participant.avatar,
+  size: 'medium',
+  presence: /*#__PURE__*/React.createElement(ColoredAvatarItem, {
+    api: api,
+    name: participant.name,
+    sessionId: participant.sessionId
+  })
+});
+export default memoizeOne(toAvatar, function participantEquals([a], [b]) {
+  return a.name === b.name && a.avatar === b.avatar && a.sessionId === b.sessionId;
+});

package/dist/esm/index.js

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

package/dist/esm/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var avatarGroupMessages = defineMessages({
+  editors: {
+    id: 'fabric.editor.editors',
+    defaultMessage: 'Editors',
+    description: 'classifying the people that are currently editing the document'
+  }
+});

package/dist/esm/plugin.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import AvatarGroupPluginWrapper from './ui/AvatarGroupPluginWrapper';
+import AvatarsWithPluginState from './ui/avatars-with-plugin-state';
+export var avatarGroupPlugin = function avatarGroupPlugin(_ref) {
+  var _api$featureFlags;
+  var props = _ref.config,
+    api = _ref.api;
+  var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  return {
+    name: 'avatarGroup',
+    primaryToolbarComponent: props.showAvatarGroup ? function (_ref2) {
+      var _api$analytics;
+      var editorView = _ref2.editorView,
+        popupsMountPoint = _ref2.popupsMountPoint,
+        popupsBoundariesElement = _ref2.popupsBoundariesElement,
+        popupsScrollableElement = _ref2.popupsScrollableElement,
+        disabled = _ref2.disabled,
+        isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
+        eventDispatcher = _ref2.eventDispatcher,
+        dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
+      return /*#__PURE__*/React.createElement(AvatarGroupPluginWrapper, {
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        editorView: editorView,
+        eventDispatcher: eventDispatcher,
+        collabEdit: props === null || props === void 0 ? void 0 : props.collabEdit,
+        takeFullWidth: props === null || props === void 0 ? void 0 : props.takeFullWidth,
+        featureFlags: featureFlags,
+        editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
+        editorAPI: api
+      });
+    } : undefined,
+    actions: {
+      getToolbarItem: function getToolbarItem(_ref3) {
+        var _api$featureFlags$sha, _api$featureFlags2, _api$analytics2;
+        var editorView = _ref3.editorView,
+          inviteToEditHandler = _ref3.inviteToEditHandler,
+          isInviteToEditButtonSelected = _ref3.isInviteToEditButtonSelected,
+          inviteToEditComponent = _ref3.inviteToEditComponent;
+        return /*#__PURE__*/React.createElement(AvatarsWithPluginState, {
+          editorView: editorView,
+          featureFlags: (_api$featureFlags$sha = api === null || api === void 0 || (_api$featureFlags2 = api.featureFlags) === null || _api$featureFlags2 === void 0 ? void 0 : _api$featureFlags2.sharedState.currentState()) !== null && _api$featureFlags$sha !== void 0 ? _api$featureFlags$sha : {},
+          editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
+          editorAPI: api,
+          inviteToEditHandler: inviteToEditHandler,
+          isInviteToEditButtonSelected: isInviteToEditButtonSelected,
+          inviteToEditComponent: inviteToEditComponent
+        });
+      }
+    }
+  };
+};

package/dist/esm/ui/AvatarGroupPluginWrapper.js

@@ -0,0 +1,46 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+/** @jsx jsx */
+import { useEffect } from 'react';
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { avatarGroupMessages } from '../messages';
+import AvatarsWithPluginState from './avatars-with-plugin-state';
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+var toolbarButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  flex-grow: 0;\n  align-items: center;\n  & > div {\n    margin-right: 0;\n  }\n"])));
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+var toolbarButtonWrapperFullWidth = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  flex-grow: 1;\n"])), toolbarButtonWrapper);
+var AvatarGroupPluginWrapper = function AvatarGroupPluginWrapper(props) {
+  var dispatchAnalyticsEvent = props.dispatchAnalyticsEvent,
+    featureFlags = props.featureFlags;
+  var intl = useIntl();
+  useEffect(function () {
+    if (!dispatchAnalyticsEvent) {
+      return;
+    }
+    dispatchAnalyticsEvent({
+      action: ACTION.VIEWED,
+      actionSubject: ACTION_SUBJECT.BUTTON,
+      actionSubjectId: ACTION_SUBJECT_ID.AVATAR_GROUP_PLUGIN,
+      eventType: EVENT_TYPE.UI
+    });
+  }, [dispatchAnalyticsEvent]);
+  return jsx("div", {
+    "aria-label": intl.formatMessage(avatarGroupMessages.editors),
+    "data-testid": 'avatar-group-in-plugin',
+    css: props.takeFullWidth ? toolbarButtonWrapperFullWidth : toolbarButtonWrapper
+  }, jsx(AvatarsWithPluginState, {
+    editorView: props.editorView,
+    eventDispatcher: props.eventDispatcher,
+    inviteToEditComponent: props.collabEdit && props.collabEdit.inviteToEditComponent,
+    inviteToEditHandler: props.collabEdit && props.collabEdit.inviteToEditHandler,
+    isInviteToEditButtonSelected: props.collabEdit && props.collabEdit.isInviteToEditButtonSelected,
+    featureFlags: featureFlags,
+    editorAnalyticsAPI: props.editorAnalyticsAPI,
+    editorAPI: props.editorAPI
+  }));
+};
+export default AvatarGroupPluginWrapper;

package/dist/esm/ui/avatars-with-plugin-state.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { injectIntl } from 'react-intl-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import messages from '@atlaskit/editor-common/messages';
+import { Avatars } from './avatars';
+import { InviteToEditButton } from './invite-to-edit';
+var AvatarsWithPluginState = function AvatarsWithPluginState(props) {
+  var title = props.intl.formatMessage(messages.inviteToEditButtonTitle);
+  var selected = props.isInviteToEditButtonSelected,
+    onClick = props.inviteToEditHandler,
+    Component = props.inviteToEditComponent,
+    editorView = props.editorView,
+    featureFlags = props.featureFlags,
+    editorAnalyticsAPI = props.editorAnalyticsAPI,
+    editorAPI = props.editorAPI;
+  var _useSharedPluginState = useSharedPluginState(editorAPI, ['collabEdit']),
+    collabEditState = _useSharedPluginState.collabEditState;
+  if (!collabEditState) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Avatars, {
+    sessionId: collabEditState.sessionId,
+    participants: collabEditState.activeParticipants,
+    editorView: editorView,
+    featureFlags: featureFlags,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    editorAPI: editorAPI
+  }, /*#__PURE__*/React.createElement(InviteToEditButton, {
+    title: title,
+    selected: selected,
+    onClick: onClick,
+    Component: Component
+  }));
+};
+export default injectIntl(AvatarsWithPluginState);

package/dist/esm/ui/avatars.js

@@ -0,0 +1,66 @@
+/** @jsx jsx */
+
+import React from 'react';
+import { jsx } from '@emotion/react';
+import AvatarGroup from '@atlaskit/avatar-group';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { avatarContainer } from './styles';
+import toAvatar from './to-avatar';
+export var scrollToCollabCursor = function scrollToCollabCursor(editorView, participants, sessionId, index, editorAnalyticsAPI) {
+  var selectedUser = participants[index];
+  if (selectedUser && selectedUser.cursorPos !== undefined && selectedUser.sessionId !== sessionId) {
+    var state = editorView.state;
+    var tr = state.tr;
+    var analyticsPayload = {
+      action: ACTION.MATCHED,
+      actionSubject: ACTION_SUBJECT.SELECTION,
+      eventType: EVENT_TYPE.TRACK
+    };
+    tr.setSelection(Selection.near(tr.doc.resolve(selectedUser.cursorPos)));
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(analyticsPayload)(tr);
+    tr.scrollIntoView();
+    editorView.dispatch(tr);
+    if (!editorView.hasFocus()) {
+      editorView.focus();
+    }
+  }
+};
+export var Avatars = /*#__PURE__*/React.memo(function (props) {
+  var _props$participants;
+  var sessionId = props.sessionId,
+    editorView = props.editorView,
+    featureFlags = props.featureFlags,
+    editorAPI = props.editorAPI;
+  var participants = (_props$participants = props.participants) === null || _props$participants === void 0 ? void 0 : _props$participants.toArray();
+  var avatars = participants.sort(function (p) {
+    return p.sessionId === sessionId ? -1 : 1;
+  }).map(function (participant) {
+    return toAvatar(participant, editorAPI);
+  });
+  if (!avatars.length) {
+    return null;
+  }
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    jsx("div", {
+      css: avatarContainer
+    }, jsx(AvatarGroup, {
+      appearance: "stack",
+      size: "medium",
+      data: avatars,
+      maxCount: 3,
+      onAvatarClick: function onAvatarClick(_event, _analytics, index) {
+        if (!editorView) {
+          return;
+        }
+        var allowCollabAvatarScroll = featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.collabAvatarScroll;
+
+        // user does not need to scroll to their own position (index 0)
+        if (allowCollabAvatarScroll && index > 0) {
+          scrollToCollabCursor(editorView, participants, props.sessionId, index, props.editorAnalyticsAPI);
+        }
+      }
+    }), props.children)
+  );
+});

package/dist/esm/ui/colored-avatar-item.js

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { R100 } from '@atlaskit/theme/colors';
+import { badge } from './styles';
+export var ColoredAvatarItem = function ColoredAvatarItem(props) {
+  var _props$api;
+  var color = (_props$api = props.api) === null || _props$api === void 0 || (_props$api = _props$api.collabEdit) === null || _props$api === void 0 || (_props$api = _props$api.actions) === null || _props$api === void 0 ? void 0 : _props$api.getAvatarColor(props.sessionId).color.solid;
+  var avatar = props.name.substr(0, 1).toUpperCase();
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    jsx("div", {
+      css: badge(color || R100),
+      "data-testid": "editor-collab-badge"
+    }, avatar)
+  );
+};

package/dist/esm/ui/index.js

@@ -0,0 +1,3 @@
+import AvatarsWithPluginState from './avatars-with-plugin-state';
+export default AvatarsWithPluginState;
+export { default as AvatarGroupPluginWrapper } from './AvatarGroupPluginWrapper';

package/dist/esm/ui/invite-to-edit.js

@@ -0,0 +1,37 @@
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { jsx } from '@emotion/react';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import InviteTeamIcon from '@atlaskit/icon/glyph/editor/add';
+import { inviteTeamWrapper } from './styles';
+var ID = function ID(props) {
+  return jsx(Fragment, null, props.children);
+};
+export var InviteToEditButton = function InviteToEditButton(props) {
+  var Component = props.Component,
+    onClick = props.onClick,
+    selected = props.selected,
+    title = props.title;
+  var iconBefore = React.useMemo(function () {
+    return jsx(InviteTeamIcon, {
+      label: title
+    });
+  }, [title]);
+  if (!Component && !onClick) {
+    return null;
+  }
+  var Wrapper = Component ? Component : ID;
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    jsx("div", {
+      css: inviteTeamWrapper
+    }, jsx(Wrapper, null, jsx(ToolbarButton, {
+      className: "invite-to-edit",
+      onClick: onClick,
+      selected: selected,
+      title: title,
+      titlePosition: "bottom",
+      iconBefore: iconBefore
+    })))
+  );
+};

package/dist/esm/ui/styles.js

@@ -0,0 +1,10 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { css } from '@emotion/react';
+import { akEditorSmallZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { N20 } from '@atlaskit/theme/colors';
+export var inviteTeamWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: 50%;\n  min-width: ", ";\n  margin-left: ", ";\n"])), "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-space-400, 32px)", "var(--ds-space-negative-050, -4px)");
+export var avatarContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  display: flex;\n  align-items: center;\n\n  // ED-13102: This is to override list styles that come from the\n  // .wiki-content class in Confluence that should not apply within\n  // the toolbar. Has to be extra specific to override.\n  && > ul {\n    list-style-type: none;\n  }\n\n  div:last-child button.invite-to-edit {\n    border-radius: 50%;\n    height: 32px;\n    width: 32px;\n    padding: ", ";\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-025, 2px)");
+export var badge = function badge(color) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: block;\n  position: absolute;\n  right: 1px;\n  bottom: 1px;\n  width: 13px;\n  height: 13px;\n  z-index: ", ";\n  border-radius: 3px;\n  background: ", ";\n  color: ", ";\n  font-size: ", ";\n  line-height: 0;\n  padding-top: 7px;\n  text-align: center;\n  box-shadow: 0 0 1px ", ";\n  box-sizing: border-box;\n"])), akEditorSmallZIndex, color, "var(--ds-text-inverse, #fff)", relativeFontSizeToBase16(9), "var(--ds-border-inverse, #fff)");
+};

package/dist/esm/ui/to-avatar.js

@@ -0,0 +1,23 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from 'react';
+import memoizeOne from 'memoize-one';
+import { ColoredAvatarItem } from './colored-avatar-item';
+var toAvatar = function toAvatar(participant, api) {
+  return {
+    name: participant.name,
+    src: participant.avatar,
+    size: 'medium',
+    presence: /*#__PURE__*/React.createElement(ColoredAvatarItem, {
+      api: api,
+      name: participant.name,
+      sessionId: participant.sessionId
+    })
+  };
+};
+export default memoizeOne(toAvatar, function participantEquals(_ref, _ref2) {
+  var _ref3 = _slicedToArray(_ref, 1),
+    a = _ref3[0];
+  var _ref4 = _slicedToArray(_ref2, 1),
+    b = _ref4[0];
+  return a.name === b.name && a.avatar === b.avatar && a.sessionId === b.sessionId;
+});

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export type { AvatarGroupPlugin } from './plugin';
+export { avatarGroupPlugin } from './plugin';

package/dist/types/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const avatarGroupMessages: {
+    editors: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/plugin.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import type { CollabEditOptions, CollabInviteToEditProps } from '@atlaskit/editor-common/collab';
+import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { CollabEditPlugin } from '@atlaskit/editor-plugin-collab-edit';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+type Config = {
+    collabEdit?: CollabEditOptions;
+    takeFullWidth: boolean;
+    showAvatarGroup?: boolean;
+};
+export type AvatarGroupPlugin = NextEditorPlugin<'avatarGroup', {
+    pluginConfiguration: Config;
+    dependencies: [
+        OptionalPlugin<FeatureFlagsPlugin>,
+        OptionalPlugin<AnalyticsPlugin>,
+        OptionalPlugin<CollabEditPlugin>
+    ];
+    actions: {
+        getToolbarItem: ({ editorView, inviteToEditHandler, isInviteToEditButtonSelected, inviteToEditComponent, }: {
+            editorView: EditorView;
+        } & CollabInviteToEditProps) => JSX.Element | null;
+    };
+}>;
+export declare const avatarGroupPlugin: AvatarGroupPlugin;
+export {};

package/dist/types/ui/AvatarGroupPluginWrapper.d.ts

@@ -0,0 +1,18 @@
+import { jsx } from '@emotion/react';
+import type { DispatchAnalyticsEvent, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { ExtractInjectionAPI, FeatureFlags } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { AvatarGroupPlugin } from '../index';
+declare const AvatarGroupPluginWrapper: (props: {
+    collabEdit?: CollabEditOptions | undefined;
+    editorView: EditorView;
+    eventDispatcher: EventDispatcher<any>;
+    dispatchAnalyticsEvent?: DispatchAnalyticsEvent | undefined;
+    takeFullWidth: boolean;
+    featureFlags: FeatureFlags;
+    editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+    editorAPI: ExtractInjectionAPI<AvatarGroupPlugin> | undefined;
+}) => jsx.JSX.Element;
+export default AvatarGroupPluginWrapper;

package/dist/types/ui/avatars-with-plugin-state.d.ts

@@ -0,0 +1,80 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { FeatureFlags, OptionalPlugin, PublicPluginAPI } from '@atlaskit/editor-common/types';
+import type { CollabEditPlugin, CollabInviteToEditProps } from '@atlaskit/editor-plugin-collab-edit';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export type AvatarsWithPluginStateProps = {
+    editorView?: EditorView;
+    eventDispatcher?: EventDispatcher;
+    featureFlags: FeatureFlags;
+    editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+    editorAPI: PublicPluginAPI<[OptionalPlugin<CollabEditPlugin>]> | undefined;
+} & CollabInviteToEditProps;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
+    editorView?: EditorView | undefined;
+    eventDispatcher?: EventDispatcher<any> | undefined;
+    featureFlags: FeatureFlags;
+    editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+    editorAPI: PublicPluginAPI<[OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"collabEdit", {
+        pluginConfiguration: import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions;
+        dependencies: [OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
+            pluginConfiguration: FeatureFlags;
+            sharedState: FeatureFlags;
+        }, FeatureFlags>>, OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
+            pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
+            sharedState: {
+                createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
+                attachAnalyticsEvent: import("@atlaskit/editor-plugin-analytics").CreateAttachPayloadIntoTransaction | null;
+                performanceTracking: import("@atlaskit/editor-common/types").PerformanceTracking | undefined;
+            };
+            dependencies: [OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
+                pluginConfiguration: FeatureFlags;
+                sharedState: FeatureFlags;
+            }, FeatureFlags>>];
+            actions: EditorAnalyticsAPI;
+        }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>>];
+        sharedState: import("@atlaskit/editor-plugin-collab-edit").CollabEditPluginSharedState;
+        actions: {
+            getAvatarColor: (str: string) => {
+                index: number;
+                color: import("@atlaskit/editor-common/collab").Color;
+            };
+        };
+    }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>>]> | undefined;
+} & CollabInviteToEditProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<{
+        editorView?: EditorView | undefined;
+        eventDispatcher?: EventDispatcher<any> | undefined;
+        featureFlags: FeatureFlags;
+        editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+        editorAPI: PublicPluginAPI<[OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"collabEdit", {
+            pluginConfiguration: import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions;
+            dependencies: [OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
+                pluginConfiguration: FeatureFlags;
+                sharedState: FeatureFlags;
+            }, FeatureFlags>>, OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
+                pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
+                sharedState: {
+                    createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | null;
+                    attachAnalyticsEvent: import("@atlaskit/editor-plugin-analytics").CreateAttachPayloadIntoTransaction | null;
+                    performanceTracking: import("@atlaskit/editor-common/types").PerformanceTracking | undefined;
+                };
+                dependencies: [OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
+                    pluginConfiguration: FeatureFlags;
+                    sharedState: FeatureFlags;
+                }, FeatureFlags>>];
+                actions: EditorAnalyticsAPI;
+            }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>>];
+            sharedState: import("@atlaskit/editor-plugin-collab-edit").CollabEditPluginSharedState;
+            actions: {
+                getAvatarColor: (str: string) => {
+                    index: number;
+                    color: import("@atlaskit/editor-common/collab").Color;
+                };
+            };
+        }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>>]> | undefined;
+    } & CollabInviteToEditProps & WrappedComponentProps<"intl">>;
+};
+export default _default;