@atlaskit/editor-core 187.20.0 → 187.21.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-core
 
+## 187.21.0
+
+### Minor Changes
+
+- [`560ce4c7a2b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/560ce4c7a2b) - Pass annotations list to inline comment component
+
+## 187.20.1
+
+### Patch Changes
+
+- [`24f092238be`](https://bitbucket.org/atlassian/atlassian-frontend/commits/24f092238be) - NO-ISSUE Switch collab type imports in editor-core to editor-common
+- [`469b5c12303`](https://bitbucket.org/atlassian/atlassian-frontend/commits/469b5c12303) - NO-ISSUE Move CollabEventLocalStepData to editor-common
+- [`c2cd174b721`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2cd174b721) - - Add layout calculation in full width editor
+  - Prevent scroll bar for wrapped layout in small viewport
+  - Limit resizing for nested node with wrapped layout
+  - Update size state for full-width layout to avoid flicker when first resizing
+- [`da58165fe10`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da58165fe10) - [ux] ED-19440 - Adds dark mode icons for bullet list, numbered list, quote, status and table
+
 ## 187.20.0
 
 ### Minor Changes

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateMouseState = exports.updateInlineCommentResolvedState = exports.setInlineCommentsVisibility = exports.setInlineCommentDraftState = exports.removeInlineCommentNearSelection = exports.createAnnotation = exports.closeComponent = exports.clearDirtyMark = exports.addInlineComment = void 0;
+exports.updateMouseState = exports.updateInlineCommentResolvedState = exports.setSelectedAnnotation = exports.setInlineCommentsVisibility = exports.setInlineCommentDraftState = exports.removeInlineCommentNearSelection = exports.createAnnotation = exports.closeComponent = exports.clearDirtyMark = exports.addInlineComment = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
@@ -113,6 +113,18 @@ var updateMouseState = function updateMouseState(mouseData) {
   });
 };
 exports.updateMouseState = updateMouseState;
+var setSelectedAnnotation = function setSelectedAnnotation(id) {
+  return (0, _pluginFactory.createCommand)({
+    type: _types.ACTIONS.SET_SELECTED_ANNOTATION,
+    data: {
+      selectedAnnotations: [{
+        id: id,
+        type: _adfSchema.AnnotationTypes.INLINE_COMMENT
+      }]
+    }
+  });
+};
+exports.setSelectedAnnotation = setSelectedAnnotation;
 var createAnnotation = function createAnnotation(id) {
   var annotationType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _adfSchema.AnnotationTypes.INLINE_COMMENT;
   return function (state, dispatch) {

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

@@ -154,9 +154,16 @@ var inlineCommentPlugin = function inlineCommentPlugin(options) {
       var setVisibility = function setVisibility(isVisible) {
         return onSetVisibility(editorView)(isVisible);
       };
+      var setSelectedAnnotationFn = function setSelectedAnnotationFn(annotationId) {
+        if (!annotationId) {
+          (0, _commands.closeComponent)()(editorView.state, editorView.dispatch);
+        } else {
+          (0, _commands.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 {
@@ -172,7 +179,7 @@ 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/cjs/plugins/annotation/pm-plugins/reducer.js

@@ -48,6 +48,10 @@ var _default = function _default(pluginState, action) {
       return _objectSpread(_objectSpread({}, isVisible ? pluginState : getNewDraftState(pluginState, false)), {}, {
         isVisible: isVisible
       });
+    case _types.ACTIONS.SET_SELECTED_ANNOTATION:
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        selectedAnnotations: (0, _toConsumableArray2.default)(action.data.selectedAnnotations)
+      });
     default:
       return pluginState;
   }

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

@@ -12,6 +12,7 @@ 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;
 }({});
 exports.ACTIONS = ACTIONS;

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

@@ -46,6 +46,7 @@ function InlineCommentView(_ref) {
     bookmark = _ref2.bookmark,
     selectedAnnotations = _ref2.selectedAnnotations,
     annotations = _ref2.annotations;
+  var annotationsList = (0, _utils2.getAllAnnotations)(editorView.state.doc);
   var selection = (0, _utils2.getSelectionPositions)(state, inlineCommentState);
   var position = findPosForDOM(selection);
   var dom;
@@ -134,6 +135,7 @@ function InlineCommentView(_ref) {
     key: (0, _utils2.getAnnotationViewKey)(activeAnnotations),
     onViewed: onAnnotationViewed
   }, /*#__PURE__*/_react.default.createElement(ViewComponent, {
+    annotationsList: annotationsList,
     annotations: activeAnnotations,
     dom: dom,
     onDelete: function onDelete(id) {

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

@@ -77,7 +77,7 @@ 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/cjs/plugins/media/nodeviews/mediaSingle.js

@@ -24,6 +24,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _nodes = require("../../../utils/nodes");
 var _utils2 = require("../../../utils");
+var _mediaSingle = require("../utils/media-single");
 var _ResizableMediaSingleNext = _interopRequireDefault(require("../ui/ResizableMediaSingle/ResizableMediaSingleNext"));
 var _ResizableMediaSingle = _interopRequireDefault(require("../ui/ResizableMediaSingle"));
 var _main = require("../pm-plugins/main");
@@ -39,7 +40,7 @@ var _CaptionPlaceholder = _interopRequireDefault(require("../ui/CaptionPlacehold
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _captions = require("../commands/captions");
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _mediaSingle = require("@atlaskit/editor-common/media-single");
+var _mediaSingle2 = require("@atlaskit/editor-common/media-single");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -254,13 +255,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)
      */
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLineLength", function (view, pos, includeMoreParentNodeTypes) {
       if (typeof pos !== 'number') {
         return null;
       }
-      if ((0, _utils.isRichMediaInsideOfBlockNode)(view, pos, includeMoreParentNodeTypes)) {
+      if ((0, _utils.isRichMediaInsideOfBlockNode)(view, pos)) {
         var $pos = view.state.doc.resolve(pos);
         var domNode = view.nodeDOM($pos.pos);
         if ($pos.nodeAfter && _utils.floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
@@ -272,6 +272,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
+     */
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 (0, _mediaSingle.getParentWidthForNestedMediaSingleNode)($pos, view);
+      }
+      return null;
+    });
     return _this;
   }
   (0, _createClass2.default)(MediaSingleNode, [{
@@ -361,19 +376,19 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
           stateWidth = _this$state.width,
           stateHeight = _this$state.height;
         if (width === null) {
-          width = stateWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
+          width = stateWidth || _mediaSingle2.DEFAULT_IMAGE_WIDTH;
         }
         if (height === null) {
-          height = stateHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT;
+          height = stateHeight || _mediaSingle2.DEFAULT_IMAGE_HEIGHT;
         }
       }
       if (!width || !height) {
-        width = _mediaSingle.DEFAULT_IMAGE_WIDTH;
-        height = _mediaSingle.DEFAULT_IMAGE_HEIGHT;
+        width = _mediaSingle2.DEFAULT_IMAGE_WIDTH;
+        height = _mediaSingle2.DEFAULT_IMAGE_HEIGHT;
       }
       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,
@@ -383,7 +398,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         pctWidth: mediaSingleWidthAttribute,
         fullWidthMode: fullWidthMode,
         hasFallbackContainer: false,
-        mediaSingleWidth: (0, _mediaSingle.calcMediaSinglePixelWidth)({
+        mediaSingleWidth: (0, _mediaSingle2.calcMediaSinglePixelWidth)({
           width: mediaSingleWidthAttribute,
           widthType: widthType,
           origWidth: width,
@@ -392,7 +407,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
           // thus we use the legecy value (exclude table as container node)
           contentWidth: contentWidthForLegacyExperience,
           containerWidth: containerWidth,
-          gutterOffset: _mediaSingle.MEDIA_SINGLE_GUTTER_SIZE
+          gutterOffset: _mediaSingle2.MEDIA_SINGLE_GUTTER_SIZE
         })
       };
       var resizableMediaSingleProps = _objectSpread({
@@ -510,6 +525,9 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
         // see also: https://github.com/ProseMirror/prosemirror/issues/884
         domRef.contentEditable = 'true';
       }
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience')) {
+        domRef.classList.add('media-extended-resize-experience');
+      }
       return domRef;
     }
   }, {

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

@@ -12,7 +12,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _mediaCard = require("@atlaskit/media-card");
 var _templateObject;
-var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border, ".concat(_colors.N60, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))");
+var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border, ".concat(_colors.N60, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(_editorSharedStyles.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/cjs/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -79,12 +79,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 = (0, _ui.calcPctFromPx)(newWidth, _this.props.lineLength) * 100;
       _this.setState({
         resizedPctWidth: newPct
       });
-      var newLayout = (0, _utils.hasParentNodeOfType)(state.schema.nodes.table)(state.selection) ? layout : _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength);
+      var newLayout = (0, _utils.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;
@@ -100,7 +101,13 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         };
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth, fullWidthMode) {
+      if (fullWidthMode) {
+        if (width < contentWidth) {
+          return 'center';
+        }
+        return 'full-width';
+      }
       if (width <= contentWidth) {
         return 'center';
       }
@@ -290,6 +297,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
       var offsetLeft = (0, _mediaSingle.calculateOffsetLeft)(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
       if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
         this.setState({
@@ -315,6 +323,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: (0, _mediaSingle.calcMediaSingleMaxWidth)(_this2.props.containerWidth),
+              height: prevState.size.height
+            }
+          };
+        });
+      }
       return true;
     }
 
@@ -474,7 +494,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,
@@ -491,7 +511,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       _ui.handleSides.forEach(function (side) {
         var oppositeSide = side === 'left' ? 'right' : 'left';
         enable[side] = _utils2.nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(_ui.imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
-        if (side === 'left' && _this2.insideInlineLike) {
+        if (side === 'left' && _this3.insideInlineLike) {
           enable[side] = false;
         }
       });

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.insertMediaSingleNode = exports.insertMediaAsMediaSingle = exports.createMediaSingleNode = void 0;
+exports.insertMediaSingleNode = exports.insertMediaAsMediaSingle = exports.getParentWidthForNestedMediaSingleNode = exports.createMediaSingleNode = void 0;
 exports.isCaptionNode = isCaptionNode;
 exports.isMediaSingle = void 0;
 exports.transformSliceForMedia = transformSliceForMedia;
@@ -223,4 +223,23 @@ function isCaptionNode(editorView) {
     return true;
   }
   return false;
-}
+}
+var getParentWidthForNestedMediaSingleNode = function getParentWidthForNestedMediaSingleNode(resolvedPos, view) {
+  var domNode = view.nodeDOM(resolvedPos.pos);
+  if (resolvedPos.nodeAfter && _utils3.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;
+};
+exports.getParentWidthForNestedMediaSingleNode = getParentWidthForNestedMediaSingleNode;

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.20.0";
+var version = "187.21.0";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

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

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

@@ -91,6 +91,15 @@ export const updateMouseState = mouseData => createCommand({
     mouseData
   }
 });
+export const setSelectedAnnotation = id => createCommand({
+  type: ACTIONS.SET_SELECTED_ANNOTATION,
+  data: {
+    selectedAnnotations: [{
+      id,
+      type: AnnotationTypes.INLINE_COMMENT
+    }]
+  }
+});
 export const createAnnotation = (id, annotationType = AnnotationTypes.INLINE_COMMENT) => (state, dispatch) => {
   // don't try to add if there are is no temp highlight bookmarked
   const {

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

@@ -3,7 +3,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';
 const fetchProviderStates = async (provider, annotationIds) => {
@@ -97,11 +97,18 @@ export const inlineCommentPlugin = options => {
       const unResolve = annotationId => onUnResolve(editorView.state, editorView.dispatch)(annotationId);
       const mouseUp = event => onMouseUp(editorView.state, editorView.dispatch)(event);
       const setVisibility = isVisible => onSetVisibility(editorView)(isVisible);
+      const setSelectedAnnotationFn = annotationId => {
+        if (!annotationId) {
+          closeComponent()(editorView.state, editorView.dispatch);
+        } else {
+          setSelectedAnnotation(annotationId)(editorView.state, editorView.dispatch);
+        }
+      };
       const {
         updateSubscriber
       } = provider;
       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 {
@@ -118,7 +125,7 @@ export const inlineCommentPlugin = options => {
         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/es2019/plugins/annotation/pm-plugins/reducer.js

@@ -51,6 +51,11 @@ export default ((pluginState, action) => {
         ...(isVisible ? pluginState : getNewDraftState(pluginState, false)),
         isVisible
       };
+    case ACTIONS.SET_SELECTED_ANNOTATION:
+      return {
+        ...pluginState,
+        selectedAnnotations: [...action.data.selectedAnnotations]
+      };
     default:
       return pluginState;
   }

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

@@ -6,5 +6,6 @@ export let 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/es2019/plugins/annotation/ui/InlineCommentView.js

@@ -2,7 +2,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';
@@ -46,6 +46,7 @@ export function InlineCommentView({
     selectedAnnotations,
     annotations
   } = inlineCommentState || {};
+  const annotationsList = getAllAnnotations(editorView.state.doc);
   const selection = getSelectionPositions(state, inlineCommentState);
   const position = findPosForDOM(selection);
   let dom;
@@ -132,6 +133,7 @@ export function InlineCommentView({
     key: getAnnotationViewKey(activeAnnotations),
     onViewed: onAnnotationViewed
   }, /*#__PURE__*/React.createElement(ViewComponent, {
+    annotationsList: annotationsList,
     annotations: activeAnnotations,
     dom: dom,
     onDelete: id => removeInlineCommentNearSelection(id)(state, dispatch),

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

@@ -52,7 +52,7 @@ export const getAllAnnotations = doc => {
   const allAnnotationIds = new Set();
   doc.descendants(node => {
     node.marks.filter(mark => 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(m => allAnnotationIds.add(m.attrs.id));
     return true;
   });

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

@@ -8,6 +8,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';
@@ -180,13 +181,12 @@ export default class MediaSingleNode extends 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(this, "getLineLength", (view, pos, includeMoreParentNodeTypes) => {
       if (typeof pos !== 'number') {
         return null;
       }
-      if (isRichMediaInsideOfBlockNode(view, pos, includeMoreParentNodeTypes)) {
+      if (isRichMediaInsideOfBlockNode(view, pos)) {
         const $pos = view.state.doc.resolve(pos);
         const domNode = view.nodeDOM($pos.pos);
         if ($pos.nodeAfter && floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
@@ -198,6 +198,21 @@ export default class MediaSingleNode extends Component {
       }
       return null;
     });
+    /**
+     * Get parent width for a nested media single node for new experience
+     * @param view Editor view
+     * @param pos node position
+     */
+    _defineProperty(this, "getLineLengthNext", (view, pos) => {
+      if (typeof pos !== 'number') {
+        return null;
+      }
+      const $pos = view.state.doc.resolve(pos);
+      if ($pos && $pos.parent.type.name !== 'doc') {
+        return getParentWidthForNestedMediaSingleNode($pos, view);
+      }
+      return null;
+    });
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.mediaProvider !== this.props.mediaProvider) {
@@ -280,7 +295,7 @@ export default class MediaSingleNode extends Component {
     }
     const isSelected = selected();
     const contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
-    const contentWidth = this.getLineLength(view, getPos(), true) || lineLength;
+    const contentWidth = this.getLineLengthNext(view, getPos()) || lineLength;
     const mediaSingleProps = {
       layout,
       width,
@@ -411,6 +426,9 @@ class MediaSingleNodeView extends 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;
   }
   getContentDOM() {

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

@@ -11,6 +11,12 @@ export const mediaStyles = css`
       transform: translateX(-50%);
     }
 
+    .media-extended-resize-experience[layout^='wrap-'] {
+      // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle
+      // to prevent scroll bar
+      overflow: visible !important;
+    }
+
     & [layout^='wrap-'] + [layout^='wrap-'] {
       clear: none;
       & + p,
@@ -72,13 +78,13 @@ export const mediaStyles = css`
 
   .richMedia-resize-handle-right {
     align-items: flex-end;
-    padding-right: 12px;
+    padding-right: ${"var(--ds-space-150, 12px)"};
     margin-right: -${akEditorMediaResizeHandlerPadding}px;
   }
 
   .richMedia-resize-handle-left {
     align-items: flex-start;
-    padding-left: 12px;
+    padding-left: ${"var(--ds-space-150, 12px)"};
     margin-left: -${akEditorMediaResizeHandlerPadding}px;
   }