@atlaskit/editor-core 187.20.0 → 187.21.0

package/dist/es2019/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -60,13 +60,14 @@ class ResizableMediaSingleNext extends React.Component {
           state
         },
         containerWidth,
-        lineLength
+        lineLength,
+        fullWidthMode
       } = this.props;
       const newPct = calcPctFromPx(newWidth, this.props.lineLength) * 100;
       this.setState({
         resizedPctWidth: newPct
       });
-      let newLayout = hasParentNodeOfType(state.schema.nodes.table)(state.selection) ? layout : this.calcUnwrappedLayout(newWidth, containerWidth, lineLength);
+      let newLayout = hasParentNodeOfType(state.schema.nodes.table)(state.selection) ? layout : this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode);
       if (newPct <= 100) {
         if (this.wrappedLayout && (stop ? newPct !== 100 : true)) {
           newLayout = layout;
@@ -82,7 +83,13 @@ class ResizableMediaSingleNext extends React.Component {
         };
       }
     });
-    _defineProperty(this, "calcUnwrappedLayout", (width, containerWidth, contentWidth) => {
+    _defineProperty(this, "calcUnwrappedLayout", (width, containerWidth, contentWidth, fullWidthMode) => {
+      if (fullWidthMode) {
+        if (width < contentWidth) {
+          return 'center';
+        }
+        return 'full-width';
+      }
       if (width <= contentWidth) {
         return 'center';
       }
@@ -292,6 +299,18 @@ class ResizableMediaSingleNext extends React.Component {
         }
       });
     }
+    if (this.props.layout === 'full-width' && !this.isNestedNode() && prevProps.containerWidth !== this.props.containerWidth) {
+      // To achieve edge-to-edge for full-width, we need to update its width according to containerWidth
+      // Update state to allow resizer to get most up-to-date width to avoid jumping when start resizing
+      this.setState(prevState => {
+        return {
+          size: {
+            width: calcMediaSingleMaxWidth(this.props.containerWidth),
+            height: prevState.size.height
+          }
+        };
+      });
+    }
     return true;
   }
 

package/dist/es2019/plugins/media/utils/media-single.js

@@ -1,7 +1,7 @@
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { safeInsert as pmSafeInsert, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { checkNodeDown } from '../../../utils';
-import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { isEmptyParagraph, floatingLayouts } from '@atlaskit/editor-common/utils';
 import { getMediaSingleInitialWidth } from '@atlaskit/editor-common/media-single';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
@@ -218,4 +218,23 @@ export function isCaptionNode(editorView) {
     return true;
   }
   return false;
-}
+}
+export const getParentWidthForNestedMediaSingleNode = (resolvedPos, view) => {
+  const domNode = view.nodeDOM(resolvedPos.pos);
+  if (resolvedPos.nodeAfter && floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {
+    const {
+      tableCell,
+      tableHeader
+    } = view.state.schema.nodes;
+    if ([tableCell, tableHeader].includes(resolvedPos.parent.type)) {
+      // since table has constant padding, use hardcoded constant instead of query the dom
+      const tablePadding = 8;
+      return domNode.parentElement.offsetWidth - tablePadding * 2;
+    }
+    return domNode.parentElement.offsetWidth;
+  }
+  if (domNode instanceof HTMLElement) {
+    return domNode.offsetWidth;
+  }
+  return null;
+};

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.20.0";
+export const version = "187.21.0";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.20.0",
+	"version": "187.21.0",
 	"sideEffects": false
 }

package/dist/esm/plugins/annotation/commands/index.js

@@ -99,6 +99,17 @@ export var updateMouseState = function updateMouseState(mouseData) {
     }
   });
 };
+export var setSelectedAnnotation = function setSelectedAnnotation(id) {
+  return createCommand({
+    type: ACTIONS.SET_SELECTED_ANNOTATION,
+    data: {
+      selectedAnnotations: [{
+        id: id,
+        type: AnnotationTypes.INLINE_COMMENT
+      }]
+    }
+  });
+};
 export var createAnnotation = function createAnnotation(id) {
   var annotationType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : AnnotationTypes.INLINE_COMMENT;
   return function (state, dispatch) {

package/dist/esm/plugins/annotation/pm-plugins/inline-comment.js

@@ -6,7 +6,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { AnnotationNodeView, getAnnotationViewClassname } from '../nodeviews';
-import { updateInlineCommentResolvedState, updateMouseState, clearDirtyMark, setInlineCommentsVisibility } from '../commands';
+import { updateInlineCommentResolvedState, updateMouseState, clearDirtyMark, setInlineCommentsVisibility, setSelectedAnnotation, closeComponent } from '../commands';
 import { getAllAnnotations, inlineCommentPluginKey, getPluginState } from '../utils';
 import { createPluginState } from './plugin-factory';
 var fetchProviderStates = /*#__PURE__*/function () {
@@ -147,9 +147,16 @@ export var inlineCommentPlugin = function inlineCommentPlugin(options) {
       var setVisibility = function setVisibility(isVisible) {
         return onSetVisibility(editorView)(isVisible);
       };
+      var setSelectedAnnotationFn = function setSelectedAnnotationFn(annotationId) {
+        if (!annotationId) {
+          closeComponent()(editorView.state, editorView.dispatch);
+        } else {
+          setSelectedAnnotation(annotationId)(editorView.state, editorView.dispatch);
+        }
+      };
       var updateSubscriber = provider.updateSubscriber;
       if (updateSubscriber) {
-        updateSubscriber.on('resolve', resolve).on('delete', resolve).on('unresolve', unResolve).on('create', unResolve).on('setvisibility', setVisibility);
+        updateSubscriber.on('resolve', resolve).on('delete', resolve).on('unresolve', unResolve).on('create', unResolve).on('setvisibility', setVisibility).on('setselectedannotation', setSelectedAnnotationFn);
       }
       editorView.root.addEventListener('mouseup', mouseUp);
       return {
@@ -165,7 +172,7 @@ export var inlineCommentPlugin = function inlineCommentPlugin(options) {
         destroy: function destroy() {
           editorView.root.removeEventListener('mouseup', mouseUp);
           if (updateSubscriber) {
-            updateSubscriber.off('resolve', resolve).off('delete', resolve).off('unresolve', unResolve).off('create', unResolve).off('setvisibility', setVisibility);
+            updateSubscriber.off('resolve', resolve).off('delete', resolve).off('unresolve', unResolve).off('create', unResolve).off('setvisibility', setVisibility).off('setselectedannotation', setSelectedAnnotationFn);
           }
         }
       };

package/dist/esm/plugins/annotation/pm-plugins/reducer.js

@@ -41,6 +41,10 @@ export default (function (pluginState, action) {
       return _objectSpread(_objectSpread({}, isVisible ? pluginState : getNewDraftState(pluginState, false)), {}, {
         isVisible: isVisible
       });
+    case ACTIONS.SET_SELECTED_ANNOTATION:
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        selectedAnnotations: _toConsumableArray(action.data.selectedAnnotations)
+      });
     default:
       return pluginState;
   }

package/dist/esm/plugins/annotation/pm-plugins/types.js

@@ -6,5 +6,6 @@ export var ACTIONS = /*#__PURE__*/function (ACTIONS) {
   ACTIONS[ACTIONS["ADD_INLINE_COMMENT"] = 4] = "ADD_INLINE_COMMENT";
   ACTIONS[ACTIONS["INLINE_COMMENT_SET_VISIBLE"] = 5] = "INLINE_COMMENT_SET_VISIBLE";
   ACTIONS[ACTIONS["CLOSE_COMPONENT"] = 6] = "CLOSE_COMPONENT";
+  ACTIONS[ACTIONS["SET_SELECTED_ANNOTATION"] = 7] = "SET_SELECTED_ANNOTATION";
   return ACTIONS;
 }({});

package/dist/esm/plugins/annotation/ui/InlineCommentView.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { AnnotationViewWrapper } from './AnnotationViewWrapper';
 import { AnnotationTestIds } from '../types';
-import { getAnnotationViewKey, getSelectionPositions, getPluginState } from '../utils';
+import { getAnnotationViewKey, getSelectionPositions, getPluginState, getAllAnnotations } from '../utils';
 import { removeInlineCommentNearSelection, updateInlineCommentResolvedState, setInlineCommentDraftState, createAnnotation, closeComponent } from '../commands';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '../../analytics';
 import { CONTENT_COMPONENT } from '../../analytics/types';
@@ -39,6 +39,7 @@ export function InlineCommentView(_ref) {
     bookmark = _ref2.bookmark,
     selectedAnnotations = _ref2.selectedAnnotations,
     annotations = _ref2.annotations;
+  var annotationsList = getAllAnnotations(editorView.state.doc);
   var selection = getSelectionPositions(state, inlineCommentState);
   var position = findPosForDOM(selection);
   var dom;
@@ -127,6 +128,7 @@ export function InlineCommentView(_ref) {
     key: getAnnotationViewKey(activeAnnotations),
     onViewed: onAnnotationViewed
   }, /*#__PURE__*/React.createElement(ViewComponent, {
+    annotationsList: annotationsList,
     annotations: activeAnnotations,
     dom: dom,
     onDelete: function onDelete(id) {

package/dist/esm/plugins/annotation/utils.js

@@ -60,7 +60,7 @@ export var getAllAnnotations = function getAllAnnotations(doc) {
     node.marks.filter(function (mark) {
       return mark.type.name === 'annotation';
     })
-    // filter out annotations with invalid attribues as they cause errors when interacting with them
+    // filter out annotations with invalid attributes as they cause errors when interacting with them
     .filter(validateAnnotationMark).forEach(function (m) {
       return allAnnotationIds.add(m.attrs.id);
     });

package/dist/esm/plugins/media/nodeviews/mediaSingle.js

@@ -21,6 +21,7 @@ import { MediaSingle } from '@atlaskit/editor-common/ui';
 import { browser, floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { isNodeSelectedOrInRange } from '../../../utils/nodes';
 import { setNodeSelection, setTextSelection } from '../../../utils';
+import { getParentWidthForNestedMediaSingleNode } from '../utils/media-single';
 import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
@@ -245,13 +246,12 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
      * Get parent width for a nested media single node
      * @param view Editor view
      * @param pos node position
-     * @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
      */
     _defineProperty(_assertThisInitialized(_this), "getLineLength", function (view, pos, includeMoreParentNodeTypes) {
       if (typeof pos !== 'number') {
         return null;
       }
-      if (isRichMediaInsideOfBlockNode(view, pos, includeMoreParentNodeTypes)) {
+      if (isRichMediaInsideOfBlockNode(view, pos)) {
         var $pos = view.state.doc.resolve(pos);
         var domNode = view.nodeDOM($pos.pos);
         if ($pos.nodeAfter && floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
@@ -263,6 +263,21 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       }
       return null;
     });
+    /**
+     * Get parent width for a nested media single node for new experience
+     * @param view Editor view
+     * @param pos node position
+     */
+    _defineProperty(_assertThisInitialized(_this), "getLineLengthNext", function (view, pos) {
+      if (typeof pos !== 'number') {
+        return null;
+      }
+      var $pos = view.state.doc.resolve(pos);
+      if ($pos && $pos.parent.type.name !== 'doc') {
+        return getParentWidthForNestedMediaSingleNode($pos, view);
+      }
+      return null;
+    });
     return _this;
   }
   _createClass(MediaSingleNode, [{
@@ -364,7 +379,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       }
       var isSelected = selected();
       var contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
-      var contentWidth = this.getLineLength(view, getPos(), true) || lineLength;
+      var contentWidth = this.getLineLengthNext(view, getPos()) || lineLength;
       var mediaSingleProps = {
         layout: layout,
         width: width,
@@ -501,6 +516,9 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
         // see also: https://github.com/ProseMirror/prosemirror/issues/884
         domRef.contentEditable = 'true';
       }
+      if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
+        domRef.classList.add('media-extended-resize-experience');
+      }
       return domRef;
     }
   }, {

package/dist/esm/plugins/media/styles.js

@@ -5,7 +5,7 @@ import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-com
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
 import { N60, B200 } from '@atlaskit/theme/colors';
 import { fileCardImageViewSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
-export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))");
+export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    .media-extended-resize-experience[layout^='wrap-'] {\n      // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n      // to prevent scroll bar\n      overflow: visible !important;\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: ", ";\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: ", ";\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))");
 
 /* `left: unset` above is to work around Chrome bug where rendering a div with
  * that style applied inside a container that has a scroll, causes any svgs on

package/dist/esm/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -72,12 +72,13 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         layout = _this$props2.layout,
         state = _this$props2.view.state,
         containerWidth = _this$props2.containerWidth,
-        lineLength = _this$props2.lineLength;
+        lineLength = _this$props2.lineLength,
+        fullWidthMode = _this$props2.fullWidthMode;
       var newPct = calcPctFromPx(newWidth, _this.props.lineLength) * 100;
       _this.setState({
         resizedPctWidth: newPct
       });
-      var newLayout = hasParentNodeOfType(state.schema.nodes.table)(state.selection) ? layout : _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength);
+      var newLayout = hasParentNodeOfType(state.schema.nodes.table)(state.selection) ? layout : _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode);
       if (newPct <= 100) {
         if (_this.wrappedLayout && (stop ? newPct !== 100 : true)) {
           newLayout = layout;
@@ -93,7 +94,13 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         };
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth) {
+    _defineProperty(_assertThisInitialized(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth, fullWidthMode) {
+      if (fullWidthMode) {
+        if (width < contentWidth) {
+          return 'center';
+        }
+        return 'full-width';
+      }
       if (width <= contentWidth) {
         return 'center';
       }
@@ -283,6 +290,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
       var offsetLeft = calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
       if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
         this.setState({
@@ -308,6 +316,18 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           }
         });
       }
+      if (this.props.layout === 'full-width' && !this.isNestedNode() && prevProps.containerWidth !== this.props.containerWidth) {
+        // To achieve edge-to-edge for full-width, we need to update its width according to containerWidth
+        // Update state to allow resizer to get most up-to-date width to avoid jumping when start resizing
+        this.setState(function (prevState) {
+          return {
+            size: {
+              width: calcMediaSingleMaxWidth(_this2.props.containerWidth),
+              height: prevState.size.height
+            }
+          };
+        });
+      }
       return true;
     }
 
@@ -467,7 +487,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
       var _this$props8 = this.props,
         origWidth = _this$props8.width,
         layout = _this$props8.layout,
@@ -484,7 +504,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       handleSides.forEach(function (side) {
         var oppositeSide = side === 'left' ? 'right' : 'left';
         enable[side] = nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
-        if (side === 'left' && _this2.insideInlineLike) {
+        if (side === 'left' && _this3.insideInlineLike) {
           enable[side] = false;
         }
       });

package/dist/esm/plugins/media/utils/media-single.js

@@ -4,7 +4,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { safeInsert as pmSafeInsert, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { checkNodeDown } from '../../../utils';
-import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { isEmptyParagraph, floatingLayouts } from '@atlaskit/editor-common/utils';
 import { getMediaSingleInitialWidth } from '@atlaskit/editor-common/media-single';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
@@ -209,4 +209,22 @@ export function isCaptionNode(editorView) {
     return true;
   }
   return false;
-}
+}
+export var getParentWidthForNestedMediaSingleNode = function getParentWidthForNestedMediaSingleNode(resolvedPos, view) {
+  var domNode = view.nodeDOM(resolvedPos.pos);
+  if (resolvedPos.nodeAfter && floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {
+    var _view$state$schema$no = view.state.schema.nodes,
+      tableCell = _view$state$schema$no.tableCell,
+      tableHeader = _view$state$schema$no.tableHeader;
+    if ([tableCell, tableHeader].includes(resolvedPos.parent.type)) {
+      // since table has constant padding, use hardcoded constant instead of query the dom
+      var tablePadding = 8;
+      return domNode.parentElement.offsetWidth - tablePadding * 2;
+    }
+    return domNode.parentElement.offsetWidth;
+  }
+  if (domNode instanceof HTMLElement) {
+    return domNode.offsetWidth;
+  }
+  return null;
+};

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "187.20.0";
+export var version = "187.21.0";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.20.0",
+	"version": "187.21.0",
 	"sideEffects": false
 }

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

@@ -1,9 +1,8 @@
 import { Node } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { AnalyticsEventPayload } from '@atlaskit/analytics-next/AnalyticsEvent';
-import type { ResolvedEditorState } from '@atlaskit/collab-provider';
-import type { ContextUpdateHandler, EditorActionsOptions, ReplaceRawValue } from '@atlaskit/editor-common/types';
-import type { FeatureFlags, Transformer } from '@atlaskit/editor-common/types';
+import type { ResolvedEditorState } from '@atlaskit/editor-common/collab';
+import type { ContextUpdateHandler, EditorActionsOptions, ReplaceRawValue, FeatureFlags, Transformer } from '@atlaskit/editor-common/types';
 import type { EventDispatcher } from '../event-dispatcher';
 export default class EditorActions<T = any> implements EditorActionsOptions<T> {
     private editorView?;

package/dist/types/plugins/annotation/commands/index.d.ts

@@ -10,5 +10,6 @@ export declare const removeInlineCommentNearSelection: (id: string) => Command;
 export declare const setInlineCommentDraftState: (drafting: boolean, inputMethod?: INPUT_METHOD.TOOLBAR | INPUT_METHOD.SHORTCUT) => Command;
 export declare const addInlineComment: (id: string) => Command;
 export declare const updateMouseState: (mouseData: InlineCommentMouseData) => Command;
+export declare const setSelectedAnnotation: (id: string) => Command;
 export declare const createAnnotation: (id: string, annotationType?: AnnotationTypes) => Command;
 export declare const setInlineCommentsVisibility: (isVisible: boolean) => Command;

package/dist/types/plugins/annotation/pm-plugins/types.d.ts

@@ -10,7 +10,8 @@ export declare enum ACTIONS {
     INLINE_COMMENT_CLEAR_DIRTY_MARK = 3,
     ADD_INLINE_COMMENT = 4,
     INLINE_COMMENT_SET_VISIBLE = 5,
-    CLOSE_COMPONENT = 6
+    CLOSE_COMPONENT = 6,
+    SET_SELECTED_ANNOTATION = 7
 }
 export interface InlineCommentPluginOptions {
     dispatch: Dispatch;
@@ -55,6 +56,11 @@ export type InlineCommentAction = {
     data: {
         isVisible: boolean;
     };
+} | {
+    type: ACTIONS.SET_SELECTED_ANNOTATION;
+    data: {
+        selectedAnnotations: AnnotationInfo[];
+    };
 };
 export type InlineCommentPluginState = {
     annotations: InlineCommentMap;

package/dist/types/plugins/annotation/types.d.ts

@@ -39,6 +39,10 @@ export type InlineCommentViewComponentProps = AnnotationComponentProps & {
      * Removes the annotation from the document
      */
     onDelete?: (id: string) => void;
+    /**
+     * Ordered list of annotation ids as shown in the document
+     */
+    annotationsList?: string[];
 };
 export interface AnnotationState<Type, State> {
     annotationType: Type;

package/dist/types/plugins/annotation/update-provider.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 import { EventEmitter } from 'events';
-export type UpdateEvent = 'create' | 'delete' | 'resolve' | 'unresolve';
+export type UpdateEvent = 'create' | 'delete' | 'resolve' | 'unresolve' | 'setselectedannotation';
 export type VisibilityEvent = 'setvisibility';
 export declare class AnnotationUpdateEmitter extends EventEmitter {
     on(event: VisibilityEvent, listener: (isVisible: boolean) => void): this;

package/dist/types/plugins/collab-edit/actions.d.ts

@@ -1,6 +1,6 @@
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { CollabEventInitData, CollabEventRemoteData, CollabEventConnectionData, CollabEventPresenceData, CollabTelepointerPayload, CollabSendableSelection } from '@atlaskit/collab-provider';
+import type { CollabEventInitData, CollabEventRemoteData, CollabEventConnectionData, CollabEventPresenceData, CollabTelepointerPayload, CollabSendableSelection } from '@atlaskit/editor-common/collab';
 import type { PrivateCollabEditOptions } from './types';
 export declare const handleInit: (initData: CollabEventInitData, view: EditorView, options?: PrivateCollabEditOptions) => void;
 export declare const handleConnection: (connectionData: CollabEventConnectionData, view: EditorView) => void;

package/dist/types/plugins/collab-edit/events/handlers.d.ts

@@ -1,5 +1,5 @@
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { CollabEventInitData, CollabEventConnectionData, CollabEventPresenceData, CollabTelepointerPayload, CollabEventRemoteData, CollabEventLocalStepData, CollabEditProvider } from '@atlaskit/collab-provider';
+import type { CollabEventInitData, CollabEventConnectionData, CollabEventPresenceData, CollabTelepointerPayload, CollabEventRemoteData, CollabEventLocalStepData, CollabEditProvider } from '@atlaskit/editor-common/collab';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { PrivateCollabEditOptions } from '../types';
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
@@ -21,4 +21,4 @@ export interface CollabHandlers {
     }) => void;
 }
 export type Cleanup = () => void;
-export declare const subscribe: (currentDeps_0: EditorView, currentDeps_1: CollabEditProvider<import("@atlaskit/collab-provider").CollabEvents>, currentDeps_2: PrivateCollabEditOptions, currentDeps_3: FeatureFlags, currentDeps_4?: ProviderFactory | undefined, currentDeps_5?: EditorAnalyticsAPI | undefined) => Cleanup;
+export declare const subscribe: (currentDeps_0: EditorView, currentDeps_1: CollabEditProvider<import("@atlaskit/editor-common/collab").CollabEvents>, currentDeps_2: PrivateCollabEditOptions, currentDeps_3: FeatureFlags, currentDeps_4?: ProviderFactory | undefined, currentDeps_5?: EditorAnalyticsAPI | undefined) => Cleanup;

package/dist/types/plugins/collab-edit/events/initialize.d.ts

@@ -1,6 +1,6 @@
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import type { CollabEditProvider } from '@atlaskit/collab-provider';
+import type { CollabEditProvider } from '@atlaskit/editor-common/collab';
 import type { PrivateCollabEditOptions } from '../types';
 import type { Cleanup } from './handlers';
 import type { FeatureFlags } from '@atlaskit/editor-common/types';

package/dist/types/plugins/collab-edit/events/send-transaction.d.ts

@@ -1,4 +1,4 @@
-import type { CollabEditProvider } from '@atlaskit/collab-provider';
+import type { CollabEditProvider } from '@atlaskit/editor-common/collab';
 import type { Transaction, EditorState } from '@atlaskit/editor-prosemirror/state';
 type Props = {
     originalTransaction: Readonly<Transaction>;

package/dist/types/plugins/collab-edit/index.d.ts

@@ -1,6 +1,6 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import { pluginKey } from './plugin';
-import { PrivateCollabEditOptions } from './types';
+import type { PrivateCollabEditOptions } from './types';
 import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 export { pluginKey };

package/dist/types/plugins/collab-edit/native-collab-provider-plugin.d.ts

@@ -1,7 +1,7 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import type { CollabEditProvider } from '@atlaskit/collab-provider';
+import type { CollabEditProvider } from '@atlaskit/editor-common/collab';
 export declare const nativeCollabProviderPlugin: ({ providerPromise, }: {
     providerPromise: Promise<CollabEditProvider>;
-}) => SafePlugin<CollabEditProvider<import("@atlaskit/collab-provider").CollabEvents> | null>;
+}) => SafePlugin<CollabEditProvider<import("@atlaskit/editor-common/collab").CollabEvents> | null>;
 export declare const getCollabProvider: (editorState: EditorState) => CollabEditProvider | null;

package/dist/types/plugins/collab-edit/participants.d.ts

@@ -1,4 +1,4 @@
-import type { CollabParticipant } from '@atlaskit/collab-provider';
+import type { CollabParticipant } from '@atlaskit/editor-common/collab';
 export interface ReadOnlyParticipants {
     get(sessionId: string): CollabParticipant | undefined;
     toArray(): ReadonlyArray<CollabParticipant>;

package/dist/types/plugins/collab-edit/plugin.d.ts

@@ -1,12 +1,11 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import { Dispatch } from '../../event-dispatcher';
-import { PrivateCollabEditOptions, ProviderCallback } from './types';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { Dispatch } from '../../event-dispatcher';
+import type { PrivateCollabEditOptions, ProviderCallback } from './types';
 import { PluginState } from './plugin-state';
 import { pluginKey } from './plugin-key';
-import { FeatureFlags } from '@atlaskit/editor-common/types';
-import type { CollabEditProvider } from '@atlaskit/collab-provider/types';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { FeatureFlags, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { CollabEditProvider } from '@atlaskit/editor-common/collab';
 import type collabEditPlugin from './index';
 export { PluginState, pluginKey };
 export declare const createPlugin: (dispatch: Dispatch, providerFactory: ProviderFactory, providerResolver: (value: CollabEditProvider) => void, collabProviderCallback: ProviderCallback, options: PrivateCollabEditOptions, featureFlags: FeatureFlags, pluginInjectionApi: ExtractInjectionAPI<typeof collabEditPlugin> | undefined) => SafePlugin<PluginState>;

package/dist/types/plugins/collab-edit/types.d.ts

@@ -1,5 +1,4 @@
-import type { CollabEditProvider, SyncUpErrorFunction } from '@atlaskit/collab-provider';
-import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
+import type { CollabEditProvider, SyncUpErrorFunction, CollabEditOptions } from '@atlaskit/editor-common/collab';
 export type { InviteToEditComponentProps, InviteToEditButtonProps, CollabInviteToEditProps, CollabAnalyticsProps, } from '@atlaskit/editor-common/collab';
 export type PrivateCollabEditOptions = CollabEditOptions & {
     sanitizePrivateContent?: boolean;

package/dist/types/plugins/collab-edit/ui/to-avatar.d.ts

@@ -1,4 +1,4 @@
-import { AvatarProps } from '@atlaskit/avatar-group';
-import type { CollabParticipant } from '@atlaskit/collab-provider';
+import type { AvatarProps } from '@atlaskit/avatar-group';
+import type { CollabParticipant } from '@atlaskit/editor-common/collab';
 declare const _default: import("memoize-one").MemoizedFn<(participant: CollabParticipant) => AvatarProps>;
 export default _default;

package/dist/types/plugins/collab-edit/utils.d.ts

@@ -1,8 +1,7 @@
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import type { CollabParticipant } from '@atlaskit/collab-provider';
-import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
+import type { CollabParticipant, CollabEditOptions } from '@atlaskit/editor-common/collab';
 export interface Color {
     solid: string;
     selection: string;