@atlaskit/editor-common 63.0.1 → 64.0.0

package/dist/es2019/ui/Mention/mention-with-profilecard.js

@@ -1,148 +1,35 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { PureComponent } from 'react';
-import { findDOMNode } from 'react-dom';
+import React, { useMemo } from 'react';
 import { ResourcedMention } from '@atlaskit/mention';
-import ProfileCard from '@atlaskit/profilecard';
-import Popup from '../Popup';
-import withOuterListeners from '../with-outer-listeners';
-const ProfilecardResourcedWithListeners = withOuterListeners(ProfileCard);
-export default class MentionWithProfileCard extends PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "state", {
-      target: null,
-      visible: false,
-      popupAlignX: 'left',
-      popupAlignY: 'top'
-    });
-
-    _defineProperty(this, "handleRef", target => {
-      this.setState({
-        target
-      });
-    });
-
-    _defineProperty(this, "handleMentionNodeRef", component => {
-      if (!component) {
-        this.domNode = null;
-      } else {
-        this.domNode = findDOMNode(component);
-      }
-    });
-
-    _defineProperty(this, "showProfilecard", event => {
-      if (!this.domNode) {
-        return;
-      }
-
-      event.stopPropagation();
-      const [popupAlignX, popupAlignY] = this.calculateLayerPosition();
-      this.setState({
-        popupAlignX,
-        popupAlignY,
-        visible: true
-      });
-    });
-
-    _defineProperty(this, "hideProfilecard", () => {
-      this.setState({
-        visible: false
-      });
-    });
-  }
-
-  calculateLayerPosition() {
-    const domNodeCentreCoords = this.getDomNodeCenterCoords();
-    const visibleAreaCentreCoords = this.getVisibleAreaCentreCoords();
-    const popupAlignY = domNodeCentreCoords.y > visibleAreaCentreCoords.y ? 'top' : 'bottom';
-    const popupAlignX = domNodeCentreCoords.x > visibleAreaCentreCoords.x ? 'right' : 'left';
-    return [popupAlignX, popupAlignY];
-  }
-
-  getDomNodeCenterCoords() {
-    const rect = this.domNode.getBoundingClientRect();
-    return {
-      x: rect.left + rect.width / 2,
-      y: rect.top + rect.height / 2
-    };
-  }
-
-  getVisibleAreaCentreCoords() {
-    return {
-      x: window.innerWidth / 2,
-      y: window.innerHeight / 2
-    };
-  }
-
-  getActions(id, text, accessLevel) {
-    const {
-      profilecardProvider
-    } = this.props;
-    const actions = profilecardProvider.getActions(id, text, accessLevel);
-    return actions.map(action => {
-      return { ...action,
-        callback: () => {
-          this.setState({
-            visible: false
-          });
-
-          if (action && action.callback) {
-            action.callback();
-          }
-        }
-      };
-    });
-  }
-
-  render() {
-    const {
-      accessLevel,
-      id,
-      mentionProvider,
-      profilecardProvider,
-      text,
-      onClick,
-      onMouseEnter,
-      onMouseLeave,
-      portal
-    } = this.props;
-    const {
-      popupAlignX,
-      popupAlignY,
-      target,
-      visible
-    } = this.state;
-    const {
-      cloudId,
-      resourceClient
-    } = profilecardProvider;
-    return /*#__PURE__*/React.createElement("span", {
-      ref: this.handleRef,
-      onClick: this.showProfilecard
-    }, /*#__PURE__*/React.createElement(ResourcedMention, {
-      ref: this.handleMentionNodeRef,
-      id: id,
-      text: text,
-      accessLevel: accessLevel,
-      mentionProvider: mentionProvider,
-      onClick: onClick,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave
-    }), target && portal && visible && /*#__PURE__*/React.createElement(Popup, {
-      offset: [0, 8],
-      target: target,
-      mountTo: portal,
-      alignX: popupAlignX,
-      alignY: popupAlignY
-    }, /*#__PURE__*/React.createElement(ProfilecardResourcedWithListeners, {
-      handleClickOutside: this.hideProfilecard,
-      handleEscapeKeydown: this.hideProfilecard,
-      cloudId: cloudId,
-      userId: id,
-      resourceClient: resourceClient,
-      actions: this.getActions(id, text, accessLevel)
-    })));
-  }
-
+import { ProfileCardTrigger } from '@atlaskit/profilecard';
+export default function MentionWithProfileCard({
+  id,
+  text,
+  accessLevel,
+  mentionProvider,
+  profilecardProvider,
+  onClick,
+  onMouseEnter,
+  onMouseLeave
+}) {
+  const {
+    cloudId,
+    resourceClient
+  } = profilecardProvider;
+  const actions = useMemo(() => profilecardProvider.getActions(id, text, accessLevel), [accessLevel, id, profilecardProvider, text]);
+  return /*#__PURE__*/React.createElement(ProfileCardTrigger, {
+    cloudId: cloudId,
+    userId: id,
+    resourceClient: resourceClient,
+    actions: actions,
+    trigger: "click",
+    position: "bottom-end"
+  }, /*#__PURE__*/React.createElement(ResourcedMention, {
+    id: id,
+    text: text,
+    accessLevel: accessLevel,
+    mentionProvider: mentionProvider,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }));
 }

package/dist/es2019/ui/Mention/mention-with-providers.js

@@ -51,11 +51,9 @@ export default class MentionWithProviders extends PureComponent {
   render() {
     const {
       accessLevel,
-      userType,
       eventHandlers,
       id,
       mentionProvider,
-      portal,
       text
     } = this.props;
     const {
@@ -70,10 +68,8 @@ export default class MentionWithProviders extends PureComponent {
       id: id,
       text: text,
       accessLevel: accessLevel,
-      userType: userType,
       mentionProvider: mentionProvider,
-      profilecardProvider: profilecardProvider,
-      portal: portal
+      profilecardProvider: profilecardProvider
     }, actionHandlers));
   }
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "63.0.1",
+	"version": "64.0.0",
 	"sideEffects": false
 }

package/dist/esm/safe-plugin/index.js

@@ -0,0 +1,27 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import { Plugin } from 'prosemirror-state';
+export var SafePlugin = /*#__PURE__*/function (_Plugin) {
+  _inherits(SafePlugin, _Plugin);
+
+  var _super = _createSuper(SafePlugin);
+
+  // This variable isn't (and shouldn't) be used anywhere. Its purpose is
+  // to distinguish Plugin from SafePlugin, thus ensuring that an 'unsafe'
+  // Plugin cannot be assigned as an item in EditorPlugin → pmPlugins.
+  function SafePlugin(spec) {
+    _classCallCheck(this, SafePlugin);
+
+    return _super.call(this, spec);
+  }
+
+  return _createClass(SafePlugin);
+}(Plugin);

package/dist/esm/styles/index.js

@@ -9,7 +9,6 @@ export { getPanelTypeBackground, darkPanelColors, getPanelDarkColor, panelShared
 export { ruleSharedStyles } from './shared/rule';
 export { whitespaceSharedStyles } from './shared/whitespace';
 export { paragraphSharedStyles } from './shared/paragraph';
-export { inlineNodeSharedStyle } from './shared/inline-nodes';
 export { linkSharedStyle } from './shared/link';
 export { listsSharedStyles } from './shared/lists';
 export { indentationSharedStyles } from './shared/indentation';

package/dist/esm/styles/shared/block-marks.js

@@ -3,4 +3,4 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import { css } from 'styled-components';
-export var blockMarksSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /**\n   * We need to remove margin-top from first item\n   * inside doc, tableCell, tableHeader, blockquote, etc.\n   */\n  *:not(.fabric-editor-block-mark) >,\n  /* For nested block marks */\n  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-child {\n    p,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n"])));
+export var blockMarksSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /**\n   * We need to remove margin-top from first item\n   * inside doc, tableCell, tableHeader, blockquote, etc.\n   */\n  *:not(.fabric-editor-block-mark) >,\n  /* For nested block marks */\n  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-child {\n    p,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    .heading-wrapper {\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n"])));

package/dist/esm/styles/shared/lists.js

@@ -4,4 +4,5 @@ var _templateObject;
 
 import { css } from 'styled-components';
 import { bulletListSelector, orderedListSelector } from '@atlaskit/adf-schema';
-export var listsSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* =============== INDENTATION SPACING ========= */\n\n  ul,\n  ol {\n    box-sizing: border-box;\n    padding-left: 24px;\n  }\n\n  ", ", ", " {\n    /*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n    // For older browsers the do not support flow-root.\n    display: table;\n    display: flow-root;\n  }\n\n  /* =============== INDENTATION AESTHETICS ========= */\n\n  /**\n        We support nested lists up to six levels deep.\n    **/\n\n  /* LEGACY LISTS */\n\n  ul,\n  ul ul ul ul {\n    list-style-type: disc;\n  }\n\n  ul ul,\n  ul ul ul ul ul {\n    list-style-type: circle;\n  }\n\n  ul ul ul,\n  ul ul ul ul ul ul {\n    list-style-type: square;\n  }\n\n  ol,\n  ol ol ol ol {\n    list-style-type: decimal;\n  }\n  ol ol,\n  ol ol ol ol ol {\n    list-style-type: lower-alpha;\n  }\n  ol ol ol,\n  ol ol ol ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  /* PREDICTABLE LISTS */\n\n  ol[data-indent-level='1'],\n  ol[data-indent-level='4'] {\n    list-style-type: decimal;\n  }\n\n  ol[data-indent-level='2'],\n  ol[data-indent-level='5'] {\n    list-style-type: lower-alpha;\n  }\n\n  ol[data-indent-level='3'],\n  ol[data-indent-level='6'] {\n    list-style-type: lower-roman;\n  }\n\n  ul[data-indent-level='1'],\n  ul[data-indent-level='4'] {\n    list-style-type: disc;\n  }\n\n  ul[data-indent-level='2'],\n  ul[data-indent-level='5'] {\n    list-style-type: circle;\n  }\n\n  ul[data-indent-level='3'],\n  ul[data-indent-level='6'] {\n    list-style-type: square;\n  }\n"])), orderedListSelector, bulletListSelector);
+import browser from '../../utils/browser';
+export var listsSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* =============== INDENTATION SPACING ========= */\n\n  ul,\n  ol {\n    box-sizing: border-box;\n    padding-left: 24px;\n\n    /*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n    li p:empty,\n    li p > span:empty {\n      ", "\n    }\n  }\n\n  ", ", ", " {\n    /*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n    // For older browsers the do not support flow-root.\n    display: table;\n    display: flow-root;\n  }\n\n  /* =============== INDENTATION AESTHETICS ========= */\n\n  /**\n        We support nested lists up to six levels deep.\n    **/\n\n  /* LEGACY LISTS */\n\n  ul,\n  ul ul ul ul {\n    list-style-type: disc;\n  }\n\n  ul ul,\n  ul ul ul ul ul {\n    list-style-type: circle;\n  }\n\n  ul ul ul,\n  ul ul ul ul ul ul {\n    list-style-type: square;\n  }\n\n  ol,\n  ol ol ol ol {\n    list-style-type: decimal;\n  }\n  ol ol,\n  ol ol ol ol ol {\n    list-style-type: lower-alpha;\n  }\n  ol ol ol,\n  ol ol ol ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  /* PREDICTABLE LISTS */\n\n  ol[data-indent-level='1'],\n  ol[data-indent-level='4'] {\n    list-style-type: decimal;\n  }\n\n  ol[data-indent-level='2'],\n  ol[data-indent-level='5'] {\n    list-style-type: lower-alpha;\n  }\n\n  ol[data-indent-level='3'],\n  ol[data-indent-level='6'] {\n    list-style-type: lower-roman;\n  }\n\n  ul[data-indent-level='1'],\n  ul[data-indent-level='4'] {\n    list-style-type: disc;\n  }\n\n  ul[data-indent-level='2'],\n  ul[data-indent-level='5'] {\n    list-style-type: circle;\n  }\n\n  ul[data-indent-level='3'],\n  ul[data-indent-level='6'] {\n    list-style-type: square;\n  }\n"])), browser.gecko ? 'display: inline-block;' : '', orderedListSelector, bulletListSelector);

package/dist/esm/types/collab.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/MediaSingle/index.js

@@ -26,7 +26,8 @@ export default function MediaSingle(_ref) {
       fullWidthMode = _ref.fullWidthMode,
       lineLength = _ref.lineLength,
       _ref$hasFallbackConta = _ref.hasFallbackContainer,
-      hasFallbackContainer = _ref$hasFallbackConta === void 0 ? true : _ref$hasFallbackConta;
+      hasFallbackContainer = _ref$hasFallbackConta === void 0 ? true : _ref$hasFallbackConta,
+      handleMediaSingleRef = _ref.handleMediaSingleRef;
   var children = React.Children.toArray(propsChildren);
 
   if (!pctWidth && shouldAddDefaultWrappedWidth(layout, width, lineLength)) {
@@ -81,6 +82,7 @@ export default function MediaSingle(_ref) {
       caption = _children[1];
 
   return /*#__PURE__*/React.createElement(MediaSingleWrapper, {
+    innerRef: handleMediaSingleRef,
     width: width,
     layout: layout,
     containerWidth: containerWidth,

package/dist/esm/ui/Mention/index.js

@@ -31,7 +31,6 @@ var Mention = /*#__PURE__*/function (_PureComponent) {
           accessLevel = _this$props.accessLevel,
           eventHandlers = _this$props.eventHandlers,
           id = _this$props.id,
-          portal = _this$props.portal,
           text = _this$props.text;
       var mentionProvider = providers.mentionProvider,
           profilecardProvider = providers.profilecardProvider;
@@ -41,8 +40,7 @@ var Mention = /*#__PURE__*/function (_PureComponent) {
         accessLevel: accessLevel,
         eventHandlers: eventHandlers,
         mentionProvider: mentionProvider,
-        profilecardProvider: profilecardProvider,
-        portal: portal
+        profilecardProvider: profilecardProvider
       });
     });
 

package/dist/esm/ui/Mention/mention-with-profilecard.js

@@ -1,190 +1,34 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import React, { PureComponent } from 'react';
-import { findDOMNode } from 'react-dom';
+import React, { useMemo } from 'react';
 import { ResourcedMention } from '@atlaskit/mention';
-import ProfileCard from '@atlaskit/profilecard';
-import Popup from '../Popup';
-import withOuterListeners from '../with-outer-listeners';
-var ProfilecardResourcedWithListeners = withOuterListeners(ProfileCard);
-
-var MentionWithProfileCard = /*#__PURE__*/function (_PureComponent) {
-  _inherits(MentionWithProfileCard, _PureComponent);
-
-  var _super = _createSuper(MentionWithProfileCard);
-
-  function MentionWithProfileCard() {
-    var _this;
-
-    _classCallCheck(this, MentionWithProfileCard);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      target: null,
-      visible: false,
-      popupAlignX: 'left',
-      popupAlignY: 'top'
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleRef", function (target) {
-      _this.setState({
-        target: target
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleMentionNodeRef", function (component) {
-      if (!component) {
-        _this.domNode = null;
-      } else {
-        _this.domNode = findDOMNode(component);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "showProfilecard", function (event) {
-      if (!_this.domNode) {
-        return;
-      }
-
-      event.stopPropagation();
-
-      var _this$calculateLayerP = _this.calculateLayerPosition(),
-          _this$calculateLayerP2 = _slicedToArray(_this$calculateLayerP, 2),
-          popupAlignX = _this$calculateLayerP2[0],
-          popupAlignY = _this$calculateLayerP2[1];
-
-      _this.setState({
-        popupAlignX: popupAlignX,
-        popupAlignY: popupAlignY,
-        visible: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "hideProfilecard", function () {
-      _this.setState({
-        visible: false
-      });
-    });
-
-    return _this;
-  }
-
-  _createClass(MentionWithProfileCard, [{
-    key: "calculateLayerPosition",
-    value: function calculateLayerPosition() {
-      var domNodeCentreCoords = this.getDomNodeCenterCoords();
-      var visibleAreaCentreCoords = this.getVisibleAreaCentreCoords();
-      var popupAlignY = domNodeCentreCoords.y > visibleAreaCentreCoords.y ? 'top' : 'bottom';
-      var popupAlignX = domNodeCentreCoords.x > visibleAreaCentreCoords.x ? 'right' : 'left';
-      return [popupAlignX, popupAlignY];
-    }
-  }, {
-    key: "getDomNodeCenterCoords",
-    value: function getDomNodeCenterCoords() {
-      var rect = this.domNode.getBoundingClientRect();
-      return {
-        x: rect.left + rect.width / 2,
-        y: rect.top + rect.height / 2
-      };
-    }
-  }, {
-    key: "getVisibleAreaCentreCoords",
-    value: function getVisibleAreaCentreCoords() {
-      return {
-        x: window.innerWidth / 2,
-        y: window.innerHeight / 2
-      };
-    }
-  }, {
-    key: "getActions",
-    value: function getActions(id, text, accessLevel) {
-      var _this2 = this;
-
-      var profilecardProvider = this.props.profilecardProvider;
-      var actions = profilecardProvider.getActions(id, text, accessLevel);
-      return actions.map(function (action) {
-        return _objectSpread(_objectSpread({}, action), {}, {
-          callback: function callback() {
-            _this2.setState({
-              visible: false
-            });
-
-            if (action && action.callback) {
-              action.callback();
-            }
-          }
-        });
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          accessLevel = _this$props.accessLevel,
-          id = _this$props.id,
-          mentionProvider = _this$props.mentionProvider,
-          profilecardProvider = _this$props.profilecardProvider,
-          text = _this$props.text,
-          onClick = _this$props.onClick,
-          onMouseEnter = _this$props.onMouseEnter,
-          onMouseLeave = _this$props.onMouseLeave,
-          portal = _this$props.portal;
-      var _this$state = this.state,
-          popupAlignX = _this$state.popupAlignX,
-          popupAlignY = _this$state.popupAlignY,
-          target = _this$state.target,
-          visible = _this$state.visible;
-      var cloudId = profilecardProvider.cloudId,
-          resourceClient = profilecardProvider.resourceClient;
-      return /*#__PURE__*/React.createElement("span", {
-        ref: this.handleRef,
-        onClick: this.showProfilecard
-      }, /*#__PURE__*/React.createElement(ResourcedMention, {
-        ref: this.handleMentionNodeRef,
-        id: id,
-        text: text,
-        accessLevel: accessLevel,
-        mentionProvider: mentionProvider,
-        onClick: onClick,
-        onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave
-      }), target && portal && visible && /*#__PURE__*/React.createElement(Popup, {
-        offset: [0, 8],
-        target: target,
-        mountTo: portal,
-        alignX: popupAlignX,
-        alignY: popupAlignY
-      }, /*#__PURE__*/React.createElement(ProfilecardResourcedWithListeners, {
-        handleClickOutside: this.hideProfilecard,
-        handleEscapeKeydown: this.hideProfilecard,
-        cloudId: cloudId,
-        userId: id,
-        resourceClient: resourceClient,
-        actions: this.getActions(id, text, accessLevel)
-      })));
-    }
-  }]);
-
-  return MentionWithProfileCard;
-}(PureComponent);
-
-export { MentionWithProfileCard as default };
+import { ProfileCardTrigger } from '@atlaskit/profilecard';
+export default function MentionWithProfileCard(_ref) {
+  var id = _ref.id,
+      text = _ref.text,
+      accessLevel = _ref.accessLevel,
+      mentionProvider = _ref.mentionProvider,
+      profilecardProvider = _ref.profilecardProvider,
+      onClick = _ref.onClick,
+      onMouseEnter = _ref.onMouseEnter,
+      onMouseLeave = _ref.onMouseLeave;
+  var cloudId = profilecardProvider.cloudId,
+      resourceClient = profilecardProvider.resourceClient;
+  var actions = useMemo(function () {
+    return profilecardProvider.getActions(id, text, accessLevel);
+  }, [accessLevel, id, profilecardProvider, text]);
+  return /*#__PURE__*/React.createElement(ProfileCardTrigger, {
+    cloudId: cloudId,
+    userId: id,
+    resourceClient: resourceClient,
+    actions: actions,
+    trigger: "click",
+    position: "bottom-end"
+  }, /*#__PURE__*/React.createElement(ResourcedMention, {
+    id: id,
+    text: text,
+    accessLevel: accessLevel,
+    mentionProvider: mentionProvider,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }));
+}

package/dist/esm/ui/Mention/mention-with-providers.js

@@ -83,11 +83,9 @@ var MentionWithProviders = /*#__PURE__*/function (_PureComponent) {
     value: function render() {
       var _this$props = this.props,
           accessLevel = _this$props.accessLevel,
-          userType = _this$props.userType,
           eventHandlers = _this$props.eventHandlers,
           id = _this$props.id,
           mentionProvider = _this$props.mentionProvider,
-          portal = _this$props.portal,
           text = _this$props.text;
       var profilecardProvider = this.state.profilecardProvider;
       var actionHandlers = {};
@@ -99,10 +97,8 @@ var MentionWithProviders = /*#__PURE__*/function (_PureComponent) {
         id: id,
         text: text,
         accessLevel: accessLevel,
-        userType: userType,
         mentionProvider: mentionProvider,
-        profilecardProvider: profilecardProvider,
-        portal: portal
+        profilecardProvider: profilecardProvider
       }, actionHandlers));
     }
   }]);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "63.0.1",
+	"version": "64.0.0",
 	"sideEffects": false
 }

package/dist/types/collab/types.d.ts

@@ -1,5 +1,7 @@
 import { EditorState, Transaction } from 'prosemirror-state';
 import { Step } from 'prosemirror-transform';
+import { JSONDocNode } from '@atlaskit/editor-json-transformer';
+import { SyncUpErrorFunction } from '../types';
 export interface CollabParticipant {
     lastActive: number;
     sessionId: string;
@@ -23,7 +25,7 @@ export interface CollabEventRemoteData {
 export interface CollabEventConnectionData {
     sid: string;
 }
-export interface CollabEventDisonnectedData {
+export interface CollabEventDisconnectedData {
     sid: string;
     reason: 'CLIENT_DISCONNECT' | 'SERVER_DISCONNECT' | 'SOCKET_CLOSED' | 'SOCKET_ERROR' | 'SOCKET_TIMEOUT' | 'UNKNOWN_DISCONNECT';
 }
@@ -50,7 +52,7 @@ export declare type CollabEvent = keyof CollabEventData;
 export interface CollabEventData {
     init: CollabEventInitData;
     connected: CollabEventConnectionData;
-    disconnected: CollabEventDisonnectedData;
+    disconnected: CollabEventDisconnectedData;
     data: CollabEventRemoteData;
     telepointer: CollabEventTelepointerData;
     presence: CollabEventPresenceData;
@@ -58,8 +60,17 @@ export interface CollabEventData {
     'local-steps': any;
     entity: any;
 }
+export declare type ResolvedEditorState = {
+    content: JSONDocNode;
+    title: string | null;
+    stepVersion: number;
+};
 export interface CollabEditProvider<Events extends CollabEventData = CollabEventData> {
     initialize(getState: () => any, createStep: (json: object) => Step): this;
+    setup(props: {
+        getState: () => EditorState;
+        onSyncUpError?: SyncUpErrorFunction;
+    }): this;
     send(tr: Transaction, oldState: EditorState, newState: EditorState): void;
     on(evt: keyof Events, handler: (...args: any) => void): this;
     off(evt: keyof Events, handler: (...args: any) => void): this;
@@ -67,4 +78,5 @@ export interface CollabEditProvider<Events extends CollabEventData = CollabEvent
     sendMessage<K extends keyof Events>(data: {
         type: K;
     } & Events[K]): void;
+    getFinalAcknowledgedState(): Promise<ResolvedEditorState>;
 }

package/dist/types/collab.d.ts

@@ -1 +1 @@
-export type { CollabEditProvider, CollabEventPresenceData, CollabEvent, CollabEventConnectionData, CollabEventData, CollabEventInitData, CollabEventRemoteData, CollabEventTelepointerData, CollabParticipant, CollabSendableSelection, CollabEventLocalStepData, } from './collab/types';
+export type { CollabEditProvider, CollabEventPresenceData, CollabEvent, CollabEventConnectionData, CollabEventData, CollabEventInitData, CollabEventRemoteData, CollabEventTelepointerData, CollabParticipant, CollabSendableSelection, CollabEventLocalStepData, ResolvedEditorState, } from './collab/types';

package/dist/types/index.d.ts

@@ -12,3 +12,4 @@ export type { EventHandlers, // temporarily keep for confluence
 LinkEventClickHandler, // temporarily keep for confluence
 MentionEventHandler, // temporarily keep for confluence
 SmartCardEventClickHandler, } from './ui';
+export type { SafePlugin } from './safe-plugin';

package/dist/types/safe-plugin/index.d.ts

@@ -0,0 +1,6 @@
+import { Schema } from 'prosemirror-model';
+import { Plugin, SafePluginSpec } from 'prosemirror-state';
+export declare class SafePlugin<T = any, S extends Schema = any> extends Plugin {
+    _isATypeSafePlugin: never;
+    constructor(spec: SafePluginSpec<T, S>);
+}

package/dist/types/styles/index.d.ts

@@ -9,7 +9,6 @@ export { getPanelTypeBackground, darkPanelColors, getPanelDarkColor, panelShared
 export { ruleSharedStyles } from './shared/rule';
 export { whitespaceSharedStyles } from './shared/whitespace';
 export { paragraphSharedStyles } from './shared/paragraph';
-export { inlineNodeSharedStyle } from './shared/inline-nodes';
 export { linkSharedStyle } from './shared/link';
 export { listsSharedStyles } from './shared/lists';
 export { indentationSharedStyles } from './shared/indentation';

package/dist/types/types/collab.d.ts

@@ -0,0 +1,8 @@
+export declare type NewCollabSyncUpErrorAttributes = {
+    lengthOfUnconfirmedSteps?: number;
+    tries: number;
+    maxRetries: number;
+    clientId?: string;
+    version: number;
+};
+export declare type SyncUpErrorFunction = (attributes: NewCollabSyncUpErrorAttributes) => void;