@atlaskit/editor-core 190.2.3 → 191.0.0

package/dist/es2019/create-editor/ReactEditorView.js

@@ -15,13 +15,12 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent, FULL_WIDTH_MODE
 import { createFeatureFlagsFromProps } from './feature-flags-from-props';
 import { getEnabledFeatureFlagKeys } from '@atlaskit/editor-common/normalize-feature-flags';
 import { createErrorReporter, createPMPlugins, processPluginsList } from './create-editor';
-import { getDocStructure } from '../utils/document-logger';
+import { getDocStructure } from '@atlaskit/editor-common/core-utils';
 import { isFullPage } from '../utils/is-full-page';
 import measurements from '../utils/performance/measure-enum';
 import { getNodesCount } from '../utils/document';
 import { createSchema } from './create-schema';
 import { PluginPerformanceObserver } from '../utils/performance/plugin-performance-observer';
-import { getParticipantsCount } from '../plugins/collab-edit/get-participants-count';
 import { EVENT_NAME_DISPATCH_TRANSACTION, EVENT_NAME_STATE_APPLY, EVENT_NAME_UPDATE_STATE, EVENT_NAME_VIEW_STATE_UPDATED, EVENT_NAME_ON_CHANGE, TransactionTracker } from '../utils/performance/track-transactions';
 import { countNodes } from '@atlaskit/editor-common/utils';
 import createPluginsList from './create-plugins-list';
@@ -93,14 +92,15 @@ export class ReactEditorView extends React.Component {
     // ProseMirror is instantiated prior to the initial React render cycle,
     // so we allow transactions by default, to avoid discarding the initial one.
     _defineProperty(this, "canDispatchTransactions", true);
-    _defineProperty(this, "onPluginObservation", (report, editorState) => {
+    _defineProperty(this, "onPluginObservation", report => {
+      var _this$pluginInjection;
       this.dispatchAnalyticsEvent({
         action: ACTION.TRANSACTION_DISPATCHED,
         actionSubject: ACTION_SUBJECT.EDITOR,
         eventType: EVENT_TYPE.OPERATIONAL,
         attributes: {
           report,
-          participants: getParticipantsCount(editorState)
+          participants: ((_this$pluginInjection = this.pluginInjectionAPI.api().collabEdit) === null || _this$pluginInjection === void 0 ? void 0 : _this$pluginInjection.sharedState.currentState().participants.size()) || 1
         }
       });
     });
@@ -398,10 +398,10 @@ export class ReactEditorView extends React.Component {
         const forceSeverityTracking = typeof proseMirrorRenderedTracking === 'undefined' && shouldForceTracking();
         this.proseMirrorRenderedSeverity = !!forceSeverityTracking || proseMirrorRenderedTracking !== null && proseMirrorRenderedTracking !== void 0 && proseMirrorRenderedTracking.trackSeverity ? getAnalyticsEventSeverity(duration, (_proseMirrorRenderedT = proseMirrorRenderedTracking === null || proseMirrorRenderedTracking === void 0 ? void 0 : proseMirrorRenderedTracking.severityNormalThreshold) !== null && _proseMirrorRenderedT !== void 0 ? _proseMirrorRenderedT : PROSEMIRROR_RENDERED_NORMAL_SEVERITY_THRESHOLD, (_proseMirrorRenderedT2 = proseMirrorRenderedTracking === null || proseMirrorRenderedTracking === void 0 ? void 0 : proseMirrorRenderedTracking.severityDegradedThreshold) !== null && _proseMirrorRenderedT2 !== void 0 ? _proseMirrorRenderedT2 : PROSEMIRROR_RENDERED_DEGRADED_SEVERITY_THRESHOLD) : undefined;
         if (this.view) {
-          var _this$pluginInjection, _this$experienceStore10;
+          var _this$pluginInjection2, _this$experienceStore10;
           const nodes = getNodesCount(this.view.state.doc);
           const ttfb = getResponseEndTime();
-          const contextIdentifier = (_this$pluginInjection = this.pluginInjectionAPI.api().base) === null || _this$pluginInjection === void 0 ? void 0 : _this$pluginInjection.sharedState.currentState();
+          const contextIdentifier = (_this$pluginInjection2 = this.pluginInjectionAPI.api().base) === null || _this$pluginInjection2 === void 0 ? void 0 : _this$pluginInjection2.sharedState.currentState();
           this.dispatchAnalyticsEvent({
             action: ACTION.PROSEMIRROR_RENDERED,
             actionSubject: ACTION_SUBJECT.EDITOR,
@@ -543,7 +543,7 @@ export class ReactEditorView extends React.Component {
     this.dispatch = createDispatch(this.eventDispatcher);
     this.errorReporter = createErrorReporter(props.editorProps.errorReporterHandler);
     this.transactionTracker = new TransactionTracker();
-    this.pluginPerformanceObserver = new PluginPerformanceObserver(report => this.onPluginObservation(report, this.editorState)).withPlugins(() => this.getPluginNames()).withNodeCounts(() => this.countNodes()).withOptions(() => this.transactionTracking).withTransactionTracker(() => this.transactionTracker);
+    this.pluginPerformanceObserver = new PluginPerformanceObserver(report => this.onPluginObservation(report)).withPlugins(() => this.getPluginNames()).withNodeCounts(() => this.countNodes()).withOptions(() => this.transactionTracking).withTransactionTracker(() => this.transactionTracker);
     this.validTransactionCount = 0;
     this.featureFlags = createFeatureFlagsFromProps(this.props.editorProps);
     const featureFlagsEnabled = this.featureFlags ? getEnabledFeatureFlagKeys(this.featureFlags) : [];

package/dist/es2019/plugins/avatar-group/index.js

@@ -26,7 +26,8 @@ const avatarGroup = ({
         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 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
+        editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
+        editorAPI: api
       });
     }
   };

package/dist/es2019/plugins/avatar-group/ui/AvatarGroupPluginWrapper.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
-import AvatarsWithPluginState from '../../collab-edit/ui/avatars-with-plugin-state';
+import AvatarsWithPluginState from './avatars-with-plugin-state';
 import { useIntl } from 'react-intl-next';
 import { avatarGroupMessages } from '../messages';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
@@ -46,7 +46,8 @@ const AvatarGroupPluginWrapper = props => {
     inviteToEditHandler: props.collabEdit && props.collabEdit.inviteToEditHandler,
     isInviteToEditButtonSelected: props.collabEdit && props.collabEdit.isInviteToEditButtonSelected,
     featureFlags: featureFlags,
-    editorAnalyticsAPI: props.editorAnalyticsAPI
+    editorAnalyticsAPI: props.editorAnalyticsAPI,
+    editorAPI: props.editorAPI
   }));
 };
 export default AvatarGroupPluginWrapper;

package/dist/es2019/plugins/{collab-edit → avatar-group}/ui/avatars-with-plugin-state.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
-import WithPluginState from '../../../ui/WithPluginState';
-import { pluginKey as collabEditPluginKey } from '../plugin';
 import messages from '../../../messages';
 import { Avatars } from './avatars';
 import { InviteToEditButton } from './invite-to-edit';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 const AvatarsWithPluginState = props => {
   const title = props.intl.formatMessage(messages.inviteToEditButtonTitle);
   const {
@@ -13,7 +12,8 @@ const AvatarsWithPluginState = props => {
     inviteToEditComponent: Component,
     editorView,
     featureFlags,
-    editorAnalyticsAPI
+    editorAnalyticsAPI,
+    editorAPI
   } = props;
   const render = React.useCallback(({
     data
@@ -26,20 +26,20 @@ const AvatarsWithPluginState = props => {
       participants: data.activeParticipants,
       editorView: editorView,
       featureFlags: featureFlags,
-      editorAnalyticsAPI: editorAnalyticsAPI
+      editorAnalyticsAPI: editorAnalyticsAPI,
+      editorAPI: editorAPI
     }, /*#__PURE__*/React.createElement(InviteToEditButton, {
       title: title,
       selected: selected,
       onClick: onClick,
       Component: Component
     }));
-  }, [selected, onClick, Component, title, editorView, featureFlags, editorAnalyticsAPI]);
-  return /*#__PURE__*/React.createElement(WithPluginState, {
-    plugins: {
-      data: collabEditPluginKey
-    },
-    render: render,
-    editorView: editorView
+  }, [selected, onClick, Component, title, editorView, featureFlags, editorAnalyticsAPI, editorAPI]);
+  const {
+    collabEditState
+  } = useSharedPluginState(editorAPI, ['collabEdit']);
+  return render({
+    data: collabEditState
   });
 };
 export default injectIntl(AvatarsWithPluginState);

package/dist/es2019/plugins/avatar-group/ui/avatars.js

@@ -0,0 +1,62 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import AvatarGroup from '@atlaskit/avatar-group';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { avatarContainer } from './styles';
+import toAvatar from './to-avatar';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+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 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/plugins/avatar-group/ui/colored-avatar-item.js

@@ -0,0 +1,13 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { badge } from './styles';
+import { R100 } from '@atlaskit/theme/colors';
+export const ColoredAvatarItem = props => {
+  var _props$api, _props$api$collabEdit;
+  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$collabEdit.actions.getAvatarColor(props.sessionId).color.solid;
+  const avatar = props.name.substr(0, 1).toUpperCase();
+  return jsx("div", {
+    css: badge(color || R100),
+    "data-testid": "editor-collab-badge"
+  }, avatar);
+};

package/dist/es2019/plugins/{collab-edit → avatar-group}/ui/to-avatar.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import memoizeOne from 'memoize-one';
 import { ColoredAvatarItem } from './colored-avatar-item';
-const toAvatar = participant => ({
+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
   })

package/dist/es2019/plugins/extension/actions.js

@@ -128,6 +128,9 @@ const updateExtensionParams = editorAnalyticsAPI => (updateExtension, node, acti
   } catch {}
   return true;
 };
+
+// This is to decouple extensions from editor core
+// Ideally in the future we completely deprecate `EditorActions`
 export const editSelectedExtension = editorActions => {
   const editorView = editorActions._privateGetEditorView();
   const {

package/dist/es2019/plugins/extension/context-panel.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { getExtensionKeyAndNodeKey } from '@atlaskit/editor-common/extensions';
 import { getPluginState } from './pm-plugins/main';
 import { getSelectedExtension } from './utils';
-import ConfigPanelLoader from '../../ui/ConfigPanel/ConfigPanelLoader';
+import ConfigPanelLoader from './ui/ConfigPanel/ConfigPanelLoader';
 import { clearEditingContext, forceAutoSave, updateState } from './commands';
 import { buildExtensionNode } from './actions';
 import { SaveIndicator } from './ui/SaveIndicator/SaveIndicator';

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

@@ -2,7 +2,7 @@ import { TextSelection, NodeSelection } from '@atlaskit/editor-prosemirror/state
 import { findParentNodeOfTypeClosestToPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { isSelectionAtStartOfNode, isSelectionAtEndOfNode, createSelectionClickHandler } from '@atlaskit/editor-common/selection';
-import ExtensionNodeView from '../nodeviews/extension';
+import { ExtensionNodeView } from '@atlaskit/editor-common/extensibility';
 import { updateState, clearEditingContext } from '../commands';
 import { getSelectedExtension, getSelectedDomElement } from '../utils';
 import { createPluginState, getPluginState, createCommand } from '../plugin-factory';

package/dist/es2019/{ui → plugins/extension/ui}/ConfigPanel/ConfigPanel.js

@@ -16,8 +16,8 @@ import { injectIntl } from 'react-intl-next';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/custom-theme-button';
 import { FormFooter } from '@atlaskit/form';
-import { pluginKey as extensionPluginKey } from '../../plugins/extension/plugin-key';
-import WithPluginState from '../WithPluginState';
+import { pluginKey as extensionPluginKey } from '../../plugin-key';
+import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import FormContent from './FormContent';
 import { messages } from './messages';
 import { FormErrorBoundary } from './FormErrorBoundary';

package/dist/es2019/{ui → plugins/extension/ui}/ConfigPanel/ConfigPanelFieldsLoader.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { useStateFromPromise } from '../../utils/react-hooks/use-state-from-promise';
+import { useStateFromPromise } from './use-state-from-promise';
 import ConfigPanel from './ConfigPanel';
 const getFieldsDefinitionFn = (extensionManifest, nodeKey) => {
   if (extensionManifest && extensionManifest.modules.nodes && extensionManifest.modules.nodes[nodeKey] && extensionManifest.modules.nodes[nodeKey].getFieldsDefinition) {

package/dist/es2019/plugins/index.js

@@ -1,4 +1,3 @@
-export { default as collabEditPlugin } from './collab-edit';
 export { default as extensionPlugin } from './extension';
 export { default as jiraIssuePlugin } from './jira-issue';
 export { default as findReplacePlugin } from './find-replace';

package/dist/es2019/presets/universal.js

@@ -38,7 +38,8 @@ import { alignmentPlugin } from '@atlaskit/editor-plugin-alignment';
 import { dataConsumerPlugin } from '@atlaskit/editor-plugin-data-consumer';
 import { annotationPlugin } from '@atlaskit/editor-plugin-annotation';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { avatarGroupPlugin, beforePrimaryToolbarPlugin, collabEditPlugin, extensionPlugin, findReplacePlugin, jiraIssuePlugin } from '../plugins';
+import { collabEditPlugin } from '@atlaskit/editor-plugin-collab-edit';
+import { avatarGroupPlugin, beforePrimaryToolbarPlugin, extensionPlugin, findReplacePlugin, jiraIssuePlugin } from '../plugins';
 import { feedbackDialogPlugin } from '@atlaskit/editor-plugin-feedback-dialog';
 import { shouldForceTracking } from '@atlaskit/editor-common/utils';
 import { isFullPage as fullPageCheck } from '../utils/is-full-page';

package/dist/es2019/ui/Appearance/FullPage/FullPageToolbar.js

@@ -3,7 +3,7 @@
 import React, { useState, useEffect } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import AvatarsWithPluginState from '../../../plugins/collab-edit/ui';
+import AvatarsWithPluginState from '../../../plugins/avatar-group/ui';
 import FindReplaceToolbarButtonWithState from '../../../plugins/find-replace/FindReplaceToolbarButtonWithState';
 import { BeforePrimaryToolbarWrapper } from '../../../plugins/before-primaryToolbar/ui/BeforePrimaryToolbarWrapper';
 import Toolbar from '../../Toolbar';
@@ -55,7 +55,8 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
     inviteToEditHandler: (_props$collabEdit2 = props.collabEdit) === null || _props$collabEdit2 === void 0 ? void 0 : _props$collabEdit2.inviteToEditHandler,
     isInviteToEditButtonSelected: (_props$collabEdit3 = props.collabEdit) === null || _props$collabEdit3 === void 0 ? void 0 : _props$collabEdit3.isInviteToEditButtonSelected,
     featureFlags: props.featureFlags || {},
-    editorAnalyticsAPI: editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$analytics = editorAPI.analytics) === null || _editorAPI$analytics === void 0 ? void 0 : _editorAPI$analytics.actions
+    editorAnalyticsAPI: editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$analytics = editorAPI.analytics) === null || _editorAPI$analytics === void 0 ? void 0 : _editorAPI$analytics.actions,
+    editorAPI: editorAPI
   }), editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? jsx(FindReplaceToolbarButtonWithState, {
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: props.popupsMountPoint,

package/dist/es2019/ui/ContentStyles/index.js

@@ -4,7 +4,7 @@ import { jsx, css, useTheme } from '@emotion/react';
 import { whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, shadowSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, annotationSharedStyles, smartCardSharedStyles, textColorStyles, resizerStyles, gridStyles, smartCardStyles, embedCardStyles, codeBlockInListSafariFix, unsupportedStyles, SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackgroundWithOpacity, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle, akEditorLineHeight, akEditorSelectedBorderColor } from '@atlaskit/editor-shared-styles';
 import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
-import { telepointerStyle } from '../../plugins/collab-edit/styles';
+import { telepointerStyle } from '@atlaskit/editor-common/collab';
 import { tableStyles } from '@atlaskit/editor-plugin-table/ui/common-styles';
 import { blocktypeStyles } from '@atlaskit/editor-plugin-block-type/styles';
 import { textHighlightStyle } from '@atlaskit/editor-plugin-paste-options-toolbar/styles';

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "190.2.3";
+export const version = "191.0.0";

package/dist/esm/actions/index.js

@@ -8,12 +8,21 @@ import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state
 import { findParentNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { analyticsEventKey, isEmptyDocument, processRawValue, findNodePosByLocalIds } from '@atlaskit/editor-common/utils';
 import { createDispatch } from '../event-dispatcher';
-import { getCollabProvider } from '../plugins/collab-edit/native-collab-provider-plugin';
 import { toJSON } from '../utils';
 import { __temporaryFixForConfigPanel as _temporaryFixForConfigPanel, getEditorValueWithMedia } from '../utils/action';
 import deprecationWarnings from '../utils/deprecation-warnings';
 import { processRawFragmentValue } from '../utils/document';
 import { findNodePosByFragmentLocalIds } from '../utils/nodes-by-localIds';
+
+// TODO: ED-21786
+// Please, do not copy or use this kind of code below
+// @ts-ignore
+var fakePluginKey = {
+  key: 'nativeCollabProviderPlugin$',
+  getState: function getState(state) {
+    return state['nativeCollabProviderPlugin$'];
+  }
+};
 var EditorActions = /*#__PURE__*/function () {
   function EditorActions() {
     var _this = this;
@@ -36,8 +45,7 @@ var EditorActions = /*#__PURE__*/function () {
      * steps.
      */
     _defineProperty(this, "getResolvedEditorState", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var _getCollabProvider;
-      var _this$getFeatureFlags, useNativeCollabPlugin, editorValue, editorView;
+      var _this$getFeatureFlags, useNativeCollabPlugin, editorValue, editorView, collabEditState;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -72,8 +80,9 @@ var EditorActions = /*#__PURE__*/function () {
             _context.next = 13;
             return getEditorValueWithMedia(editorView);
           case 13:
-            return _context.abrupt("return", (_getCollabProvider = getCollabProvider(editorView.state)) === null || _getCollabProvider === void 0 ? void 0 : _getCollabProvider.getFinalAcknowledgedState());
-          case 14:
+            collabEditState = fakePluginKey.getState(editorView.state);
+            return _context.abrupt("return", collabEditState === null || collabEditState === void 0 ? void 0 : collabEditState.getFinalAcknowledgedState());
+          case 15:
           case "end":
             return _context.stop();
         }

package/dist/esm/create-editor/ErrorBoundary.js

@@ -18,7 +18,7 @@ import { logException } from '@atlaskit/editor-common/monitoring';
 import { ExperienceStore } from '@atlaskit/editor-common/ufo';
 import { IntlErrorBoundary } from '@atlaskit/editor-common/ui';
 import { isOutdatedBrowser, sniffUserBrowserExtensions } from '@atlaskit/editor-common/utils';
-import { getDocStructure } from '../utils/document-logger';
+import { getDocStructure } from '@atlaskit/editor-common/core-utils';
 import { WithEditorView } from './WithEditorView';
 export var ErrorBoundaryWithEditorView = /*#__PURE__*/function (_React$Component) {
   _inherits(ErrorBoundaryWithEditorView, _React$Component);

package/dist/esm/create-editor/ReactEditorView.js

@@ -26,13 +26,12 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent, FULL_WIDTH_MODE
 import { createFeatureFlagsFromProps } from './feature-flags-from-props';
 import { getEnabledFeatureFlagKeys } from '@atlaskit/editor-common/normalize-feature-flags';
 import { createErrorReporter, createPMPlugins, processPluginsList } from './create-editor';
-import { getDocStructure } from '../utils/document-logger';
+import { getDocStructure } from '@atlaskit/editor-common/core-utils';
 import { isFullPage } from '../utils/is-full-page';
 import measurements from '../utils/performance/measure-enum';
 import { getNodesCount } from '../utils/document';
 import { createSchema } from './create-schema';
 import { PluginPerformanceObserver } from '../utils/performance/plugin-performance-observer';
-import { getParticipantsCount } from '../plugins/collab-edit/get-participants-count';
 import { EVENT_NAME_DISPATCH_TRANSACTION, EVENT_NAME_STATE_APPLY, EVENT_NAME_UPDATE_STATE, EVENT_NAME_VIEW_STATE_UPDATED, EVENT_NAME_ON_CHANGE, TransactionTracker } from '../utils/performance/track-transactions';
 import { countNodes as _countNodes } from '@atlaskit/editor-common/utils';
 import createPluginsList from './create-plugins-list';
@@ -89,14 +88,15 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
     // ProseMirror is instantiated prior to the initial React render cycle,
     // so we allow transactions by default, to avoid discarding the initial one.
     _defineProperty(_assertThisInitialized(_this), "canDispatchTransactions", true);
-    _defineProperty(_assertThisInitialized(_this), "onPluginObservation", function (report, editorState) {
+    _defineProperty(_assertThisInitialized(_this), "onPluginObservation", function (report) {
+      var _this$pluginInjection;
       _this.dispatchAnalyticsEvent({
         action: ACTION.TRANSACTION_DISPATCHED,
         actionSubject: ACTION_SUBJECT.EDITOR,
         eventType: EVENT_TYPE.OPERATIONAL,
         attributes: {
           report: report,
-          participants: getParticipantsCount(editorState)
+          participants: ((_this$pluginInjection = _this.pluginInjectionAPI.api().collabEdit) === null || _this$pluginInjection === void 0 ? void 0 : _this$pluginInjection.sharedState.currentState().participants.size()) || 1
         }
       });
     });
@@ -395,10 +395,10 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
         var forceSeverityTracking = typeof proseMirrorRenderedTracking === 'undefined' && shouldForceTracking();
         _this.proseMirrorRenderedSeverity = !!forceSeverityTracking || proseMirrorRenderedTracking !== null && proseMirrorRenderedTracking !== void 0 && proseMirrorRenderedTracking.trackSeverity ? getAnalyticsEventSeverity(duration, (_proseMirrorRenderedT = proseMirrorRenderedTracking === null || proseMirrorRenderedTracking === void 0 ? void 0 : proseMirrorRenderedTracking.severityNormalThreshold) !== null && _proseMirrorRenderedT !== void 0 ? _proseMirrorRenderedT : PROSEMIRROR_RENDERED_NORMAL_SEVERITY_THRESHOLD, (_proseMirrorRenderedT2 = proseMirrorRenderedTracking === null || proseMirrorRenderedTracking === void 0 ? void 0 : proseMirrorRenderedTracking.severityDegradedThreshold) !== null && _proseMirrorRenderedT2 !== void 0 ? _proseMirrorRenderedT2 : PROSEMIRROR_RENDERED_DEGRADED_SEVERITY_THRESHOLD) : undefined;
         if (_this.view) {
-          var _this$pluginInjection, _this$experienceStore10;
+          var _this$pluginInjection2, _this$experienceStore10;
           var nodes = getNodesCount(_this.view.state.doc);
           var ttfb = getResponseEndTime();
-          var contextIdentifier = (_this$pluginInjection = _this.pluginInjectionAPI.api().base) === null || _this$pluginInjection === void 0 ? void 0 : _this$pluginInjection.sharedState.currentState();
+          var contextIdentifier = (_this$pluginInjection2 = _this.pluginInjectionAPI.api().base) === null || _this$pluginInjection2 === void 0 ? void 0 : _this$pluginInjection2.sharedState.currentState();
           _this.dispatchAnalyticsEvent({
             action: ACTION.PROSEMIRROR_RENDERED,
             actionSubject: ACTION_SUBJECT.EDITOR,
@@ -541,7 +541,7 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
     _this.errorReporter = createErrorReporter(props.editorProps.errorReporterHandler);
     _this.transactionTracker = new TransactionTracker();
     _this.pluginPerformanceObserver = new PluginPerformanceObserver(function (report) {
-      return _this.onPluginObservation(report, _this.editorState);
+      return _this.onPluginObservation(report);
     }).withPlugins(function () {
       return _this.getPluginNames();
     }).withNodeCounts(function () {

package/dist/esm/plugins/avatar-group/index.js

@@ -24,7 +24,8 @@ var avatarGroup = function avatarGroup(_ref) {
         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
+        editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
+        editorAPI: api
       });
     }
   };

package/dist/esm/plugins/avatar-group/ui/AvatarGroupPluginWrapper.js

@@ -3,7 +3,7 @@ var _templateObject, _templateObject2;
 /** @jsx jsx */
 import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
-import AvatarsWithPluginState from '../../collab-edit/ui/avatars-with-plugin-state';
+import AvatarsWithPluginState from './avatars-with-plugin-state';
 import { useIntl } from 'react-intl-next';
 import { avatarGroupMessages } from '../messages';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
@@ -35,7 +35,8 @@ var AvatarGroupPluginWrapper = function AvatarGroupPluginWrapper(props) {
     inviteToEditHandler: props.collabEdit && props.collabEdit.inviteToEditHandler,
     isInviteToEditButtonSelected: props.collabEdit && props.collabEdit.isInviteToEditButtonSelected,
     featureFlags: featureFlags,
-    editorAnalyticsAPI: props.editorAnalyticsAPI
+    editorAnalyticsAPI: props.editorAnalyticsAPI,
+    editorAPI: props.editorAPI
   }));
 };
 export default AvatarGroupPluginWrapper;

package/dist/esm/plugins/{collab-edit → avatar-group}/ui/avatars-with-plugin-state.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
-import WithPluginState from '../../../ui/WithPluginState';
-import { pluginKey as collabEditPluginKey } from '../plugin';
 import messages from '../../../messages';
 import { Avatars } from './avatars';
 import { InviteToEditButton } from './invite-to-edit';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 var AvatarsWithPluginState = function AvatarsWithPluginState(props) {
   var title = props.intl.formatMessage(messages.inviteToEditButtonTitle);
   var selected = props.isInviteToEditButtonSelected,
@@ -12,7 +11,8 @@ var AvatarsWithPluginState = function AvatarsWithPluginState(props) {
     Component = props.inviteToEditComponent,
     editorView = props.editorView,
     featureFlags = props.featureFlags,
-    editorAnalyticsAPI = props.editorAnalyticsAPI;
+    editorAnalyticsAPI = props.editorAnalyticsAPI,
+    editorAPI = props.editorAPI;
   var render = React.useCallback(function (_ref) {
     var data = _ref.data;
     if (!data) {
@@ -23,20 +23,19 @@ var AvatarsWithPluginState = function AvatarsWithPluginState(props) {
       participants: data.activeParticipants,
       editorView: editorView,
       featureFlags: featureFlags,
-      editorAnalyticsAPI: editorAnalyticsAPI
+      editorAnalyticsAPI: editorAnalyticsAPI,
+      editorAPI: editorAPI
     }, /*#__PURE__*/React.createElement(InviteToEditButton, {
       title: title,
       selected: selected,
       onClick: onClick,
       Component: Component
     }));
-  }, [selected, onClick, Component, title, editorView, featureFlags, editorAnalyticsAPI]);
-  return /*#__PURE__*/React.createElement(WithPluginState, {
-    plugins: {
-      data: collabEditPluginKey
-    },
-    render: render,
-    editorView: editorView
+  }, [selected, onClick, Component, title, editorView, featureFlags, editorAnalyticsAPI, editorAPI]);
+  var _useSharedPluginState = useSharedPluginState(editorAPI, ['collabEdit']),
+    collabEditState = _useSharedPluginState.collabEditState;
+  return render({
+    data: collabEditState
   });
 };
 export default injectIntl(AvatarsWithPluginState);

package/dist/esm/plugins/avatar-group/ui/avatars.js

@@ -0,0 +1,62 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import AvatarGroup from '@atlaskit/avatar-group';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { avatarContainer } from './styles';
+import toAvatar from './to-avatar';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+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 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/plugins/avatar-group/ui/colored-avatar-item.js

@@ -0,0 +1,13 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { badge } from './styles';
+import { R100 } from '@atlaskit/theme/colors';
+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 ? void 0 : _props$api.actions.getAvatarColor(props.sessionId).color.solid;
+  var avatar = props.name.substr(0, 1).toUpperCase();
+  return jsx("div", {
+    css: badge(color || R100),
+    "data-testid": "editor-collab-badge"
+  }, avatar);
+};

package/dist/esm/plugins/{collab-edit → avatar-group}/ui/to-avatar.js

@@ -2,12 +2,13 @@ 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) {
+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
     })