@atlaskit/editor-core 190.2.2 → 191.0.0

package/dist/cjs/ui/ContentStyles/layout.js

@@ -19,21 +19,10 @@ Object.defineProperty(exports, "LAYOUT_SECTION_MARGIN", {
 exports.layoutStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _types = require("@atlaskit/editor-plugin-table/types");
 var _consts = require("@atlaskit/editor-plugin-table/ui/consts");
-var _templateObject; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-var layoutStyles = exports.layoutStyles = function layoutStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      // TODO: Migrate away from gridSize\n      // Recommendation: Replace directly with 7px\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4441\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border: ", "px solid\n          ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() - 1, _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSelectedBorderSize, (0, _components.themed)({
-    light: "var(--ds-border, ".concat(_colors.N40A, ")"),
-    dark: "var(--ds-border, ".concat(_colors.DN70, ")")
-  })(props), _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.akEditorSelectedBorderSize, (0, _components.themed)({
-    light: "var(--ds-border, ".concat(_colors.N50A, ")"),
-    dark: "var(--ds-border, ".concat(_colors.DN80, ")")
-  })(props), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
-};
+var _templateObject;
+var layoutStyles = exports.layoutStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      // TODO: Migrate away from gridSize\n      // Recommendation: Replace directly with 7px\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4441\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border: ", "px solid\n          ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), _styles.columnLayoutSharedStyle, 8 - 1, _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, ".concat(_colors.N40A, ")"), _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, ".concat(_colors.N50A, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "190.2.2";
+var version = exports.version = "191.0.0";

package/dist/es2019/actions/index.js

@@ -4,12 +4,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, 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
+const fakePluginKey = {
+  key: 'nativeCollabProviderPlugin$',
+  getState: state => {
+    return state['nativeCollabProviderPlugin$'];
+  }
+};
 export default class EditorActions {
   constructor() {
     _defineProperty(this, "listeners", []);
@@ -30,7 +39,6 @@ export default class EditorActions {
      * steps.
      */
     _defineProperty(this, "getResolvedEditorState", async () => {
-      var _getCollabProvider;
       const {
         useNativeCollabPlugin
       } = this.getFeatureFlags();
@@ -50,7 +58,8 @@ export default class EditorActions {
       }
       const editorView = this.editorView;
       await getEditorValueWithMedia(editorView);
-      return (_getCollabProvider = getCollabProvider(editorView.state)) === null || _getCollabProvider === void 0 ? void 0 : _getCollabProvider.getFinalAcknowledgedState();
+      const collabEditState = fakePluginKey.getState(editorView.state);
+      return collabEditState === null || collabEditState === void 0 ? void 0 : collabEditState.getFinalAcknowledgedState();
     });
   }
   static from(view, eventDispatcher, transformer) {

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

@@ -6,7 +6,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 class ErrorBoundaryWithEditorView extends React.Component {
   constructor(props) {

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/extension.js

@@ -2,16 +2,17 @@ import { css } from '@emotion/react';
 import { blockNodesVerticalMargin, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const extensionStyles = css`
-  .multiBodiedExtensionView-content-wrap.${akEditorSelectedNodeClassName}:not(.danger) {
-    ${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket])}
-  }
-
   .multiBodiedExtensionView-content-wrap {
     &.danger > span > .multiBodiedExtension--container {
       box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
         ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
       background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
     }
+    &:not(.danger).${akEditorSelectedNodeClassName} {
+      & > span > .multiBodiedExtension--container {
+        ${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket])}
+      }
+    }
     .multiBodiedExtension--container {
       width: 100%;
       max-width: 100%; // ensure width can't go over 100%;

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';
@@ -179,7 +179,7 @@ const contentStyles = props => css`
   ${listsStyles}
   ${ruleStyles()}
   ${mediaStyles}
-  ${layoutStyles(props)}
+  ${layoutStyles}
   ${telepointerStyle}
   ${gapCursorStyles};
   ${tableStyles(props)}

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

@@ -1,21 +1,16 @@
 import { css } from '@emotion/react';
-
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize } from '@atlaskit/theme/constants';
-import { N40A, N50A, DN70, DN80 } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { themed } from '@atlaskit/theme/components';
+import { N40A, N50A } from '@atlaskit/theme/colors';
 import { columnLayoutSharedStyle, LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from '@atlaskit/editor-common/styles';
 import { gridMediumMaxWidth, akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akLayoutGutterOffset, akEditorSwoopCubicBezier, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { TableCssClassName } from '@atlaskit/editor-plugin-table/types';
 import { tableMarginFullWidthMode } from '@atlaskit/editor-plugin-table/ui/consts';
 export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
-export const layoutStyles = props => css`
+export const layoutStyles = css`
   .ProseMirror {
     ${columnLayoutSharedStyle} [data-layout-section] {
       // TODO: Migrate away from gridSize
       // Recommendation: Replace directly with 7px
-      margin: ${gridSize() - 1}px -${akLayoutGutterOffset}px 0;
+      margin: ${8 - 1}px -${akLayoutGutterOffset}px 0;
       transition: border-color 0.3s ${akEditorSwoopCubicBezier};
       cursor: pointer;
 
@@ -24,10 +19,7 @@ export const layoutStyles = props => css`
         flex: 1;
         min-width: 0;
         border: ${akEditorSelectedBorderSize}px solid
-          ${themed({
-  light: `var(--ds-border, ${N40A})`,
-  dark: `var(--ds-border, ${DN70})`
-})(props)};
+          ${`var(--ds-border, ${N40A})`};
         border-radius: 4px;
         padding: ${LAYOUT_COLUMN_PADDING}px;
         box-sizing: border-box;
@@ -115,10 +107,7 @@ export const layoutStyles = props => css`
       &.selected [data-layout-column],
       &:hover [data-layout-column] {
         border: ${akEditorSelectedBorderSize}px solid
-          ${themed({
-  light: `var(--ds-border, ${N50A})`,
-  dark: `var(--ds-border, ${DN80})`
-})(props)};
+          ${`var(--ds-border, ${N50A})`};
       }
 
       &.selected.danger > [data-layout-column] {

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "190.2.2";
+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);