@atlaskit/editor-core 190.0.0 → 190.1.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-core
 
+## 190.1.1
+
+### Patch Changes
+
+- [#61696](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61696) [`fcc2b35ad97b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fcc2b35ad97b) - ED-21505: Added better selections and highlights for MBE nodes on Editor
+
+## 190.1.0
+
+### Minor Changes
+
+- [#59443](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59443) [`c9c6e1634058`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c9c6e1634058) - [ux] ED-20733: Decouple selected annotation logic from logic to close the inline comment view. This fixes the bug where the inline comment view can be unexpectedly opened from doc changes (through remote editors or non-selection altering changes such as expanding / collapsing expand blocks). Changes are behind platform.editor.annotation.decouple-inline-comment-closed_flmox.
+
+### Patch Changes
+
+- [#62137](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/62137) [`503cb77af9ce`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/503cb77af9ce) - [ux] Fix: Clicking on alignment button did not close the alignment popup.
+
 ## 190.0.0
 
 ### Major Changes

package/dist/cjs/i18n/ja.js

@@ -33,6 +33,7 @@ var _default = exports.default = {
   'fabric.editor.configPanel.fieldTypeError.isMultipleAndRadio': '「isMultiple」と「style: radio」を組み合わせることはできません',
   'fabric.editor.configPanel.formType.addField': 'フィールドを追加',
   'fabric.editor.configPanel.formType.removeField': 'フィールドを削除',
+  'fabric.editor.configPanel.help': 'お困りですか？',
   'fabric.editor.configPanel.invalid': '無効なフィールド',
   'fabric.editor.configPanel.required': '必須フィールド',
   'fabric.editor.configPanel.submit': '送信',

package/dist/cjs/plugins/alignment/ui/ToolbarAlignment/index.js

@@ -97,12 +97,6 @@ var AlignmentToolbar = exports.AlignmentToolbar = /*#__PURE__*/function (_React$
         boundariesElement: popupsBoundariesElement,
         scrollableElement: popupsScrollableElement,
         isOpen: isOpen,
-        onOpenChange: function onOpenChange(_ref) {
-          var isOpen = _ref.isOpen;
-          _this2.setState({
-            isOpen: isOpen
-          });
-        },
         handleClickOutside: function handleClickOutside(event) {
           if (event instanceof MouseEvent) {
             _this2.hide({

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

@@ -13,6 +13,7 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _nodeviews = require("../nodeviews");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../commands");
 var _utils = require("../utils");
 var _pluginFactory = require("./plugin-factory");
@@ -84,6 +85,7 @@ var initialState = function initialState() {
       isSelecting: false
     },
     disallowOnWhitespace: disallowOnWhitespace,
+    isInlineCommentViewClosed: false,
     isVisible: true,
     skipSelectionHandling: false
   };
@@ -211,14 +213,17 @@ var inlineCommentPlugin = exports.inlineCommentPlugin = function inlineCommentPl
           draftDecorationSet = _ref5.draftDecorationSet,
           annotations = _ref5.annotations,
           selectedAnnotations = _ref5.selectedAnnotations,
-          isVisible = _ref5.isVisible;
+          isVisible = _ref5.isVisible,
+          isInlineCommentViewClosed = _ref5.isInlineCommentViewClosed;
         var decorations = draftDecorationSet !== null && draftDecorationSet !== void 0 ? draftDecorationSet : _view.DecorationSet.empty;
         var focusDecorations = [];
         state.doc.descendants(function (node, pos) {
           node.marks.filter(function (mark) {
             return mark.type === state.schema.marks.annotation;
           }).forEach(function (mark) {
-            var isSelected = !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(function (selectedAnnotation) {
+            var isSelected = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.annotation.decouple-inline-comment-closed_flmox') ? !isInlineCommentViewClosed && !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(function (selectedAnnotation) {
+              return selectedAnnotation.id === mark.attrs.id;
+            })) : !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(function (selectedAnnotation) {
               return selectedAnnotation.id === mark.attrs.id;
             }));
             var isUnresolved = !!annotations && annotations[mark.attrs.id] === false;

package/dist/cjs/plugins/annotation/pm-plugins/plugin-factory.js

@@ -8,12 +8,13 @@ exports.createPluginState = exports.createCommand = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _pluginStateFactory = require("../../../utils/plugin-state-factory");
 var _utils = require("../utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _reducer = _interopRequireDefault(require("./reducer"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var handleDocChanged = function handleDocChanged(tr, prevPluginState) {
   if (!tr.getMeta('replaceDocument')) {
-    return handleSelectionChanged(tr, prevPluginState);
+    return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.annotation.decouple-inline-comment-closed_flmox') ? getSelectionChangedHandler(false)(tr, prevPluginState) : handleSelectionChanged(tr, prevPluginState);
   }
   return _objectSpread(_objectSpread({}, prevPluginState), {}, {
     dirtyAnnotations: true
@@ -38,8 +39,48 @@ var handleSelectionChanged = function handleSelectionChanged(tr, pluginState) {
   }
   return pluginState;
 };
+var getSelectionChangedHandler = function getSelectionChangedHandler(reopenCommentView) {
+  return function (tr, pluginState) {
+    /**
+     * If feature flag is **OFF** we want to keep the old behavior. Note that
+     * reopenCommentView is not relevant here when using old behaviour.
+     *
+     * Feature flag is evaluated here rather than directly in onSelectionChanged where it is assigned
+     * to prevent the plugin from setting up the handler before the feature flag is evaluated.
+     *
+     * This comment / logic can be cleaned up once the feature flag is removed.
+     */
+    if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.annotation.decouple-inline-comment-closed_flmox')) {
+      return handleSelectionChanged(tr, pluginState);
+    }
+    if (pluginState.skipSelectionHandling) {
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        skipSelectionHandling: false
+      }, reopenCommentView && {
+        isInlineCommentViewClosed: false
+      });
+    }
+    var selectedAnnotations = (0, _utils.findAnnotationsInSelection)(tr.selection, tr.doc);
+    if (selectedAnnotations.length === 0) {
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        selectedAnnotations: selectedAnnotations,
+        isInlineCommentViewClosed: true
+      });
+    }
+    if ((0, _utils.isSelectedAnnotationsChanged)(selectedAnnotations, pluginState.selectedAnnotations)) {
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        selectedAnnotations: selectedAnnotations
+      }, reopenCommentView && {
+        isInlineCommentViewClosed: false
+      });
+    }
+    return _objectSpread(_objectSpread({}, pluginState), reopenCommentView && {
+      isInlineCommentViewClosed: false
+    });
+  };
+};
 var _pluginFactory = (0, _pluginStateFactory.pluginFactory)(_utils.inlineCommentPluginKey, _reducer.default, {
-    onSelectionChanged: handleSelectionChanged,
+    onSelectionChanged: getSelectionChangedHandler(true),
     onDocChanged: handleDocChanged,
     mapping: function mapping(tr, pluginState) {
       var draftDecorationSet = pluginState.draftDecorationSet,

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

@@ -7,9 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _types = require("./types");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../utils");
+var _types = require("./types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var _default = exports.default = function _default(pluginState, action) {
@@ -31,7 +32,9 @@ var _default = exports.default = function _default(pluginState, action) {
         annotations: {}
       });
     case _types.ACTIONS.CLOSE_COMPONENT:
-      return _objectSpread(_objectSpread({}, pluginState), {}, {
+      return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.annotation.decouple-inline-comment-closed_flmox') ? _objectSpread(_objectSpread({}, pluginState), {}, {
+        isInlineCommentViewClosed: true
+      }) : _objectSpread(_objectSpread({}, pluginState), {}, {
         selectedAnnotations: []
       });
     case _types.ACTIONS.ADD_INLINE_COMMENT:
@@ -39,6 +42,8 @@ var _default = exports.default = function _default(pluginState, action) {
       return _objectSpread(_objectSpread({}, updatedPluginState), {}, {
         selectedAnnotations: [].concat((0, _toConsumableArray2.default)(updatedPluginState.selectedAnnotations), (0, _toConsumableArray2.default)(action.data.selectedAnnotations)),
         annotations: _objectSpread(_objectSpread({}, pluginState.annotations), action.data.inlineComments)
+      }, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.annotation.decouple-inline-comment-closed_flmox') && {
+        isInlineCommentViewClosed: false
       });
     case _types.ACTIONS.INLINE_COMMENT_SET_VISIBLE:
       var isVisible = action.data.isVisible;
@@ -52,6 +57,9 @@ var _default = exports.default = function _default(pluginState, action) {
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         selectedAnnotations: (0, _toConsumableArray2.default)(action.data.selectedAnnotations),
         skipSelectionHandling: true
+      }, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.annotation.decouple-inline-comment-closed_flmox') && {
+        // if selecting annotation explicitly, reopen the comment view
+        isInlineCommentViewClosed: false
       });
     default:
       return pluginState;

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

@@ -8,6 +8,7 @@ exports.InlineCommentView = InlineCommentView;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _AnnotationViewWrapper = require("./AnnotationViewWrapper");
 var _types = require("../types");
 var _utils2 = require("../utils");
@@ -44,7 +45,8 @@ function InlineCommentView(_ref) {
   var _ref2 = inlineCommentState || {},
     bookmark = _ref2.bookmark,
     selectedAnnotations = _ref2.selectedAnnotations,
-    annotations = _ref2.annotations;
+    annotations = _ref2.annotations,
+    isInlineCommentViewClosed = _ref2.isInlineCommentViewClosed;
   var annotationsList = (0, _utils2.getAllAnnotations)(editorView.state.doc);
   var selection = (0, _utils2.getSelectionPositions)(state, inlineCommentState);
   var position = findPosForDOM(selection);
@@ -122,7 +124,7 @@ function InlineCommentView(_ref) {
     };
     dispatchAnalyticsEvent(payload);
   };
-  if (!selectedAnnotations) {
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.annotation.decouple-inline-comment-closed_flmox') && isInlineCommentViewClosed || !selectedAnnotations) {
     return null;
   }
   return /*#__PURE__*/_react.default.createElement(_AnnotationViewWrapper.AnnotationViewWrapper, {

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

@@ -21,7 +21,9 @@ Object.defineProperty(exports, "hasAnnotationMark", {
 });
 exports.hasInvalidNodes = void 0;
 exports.hasInvalidWhitespaceNode = hasInvalidWhitespaceNode;
-exports.isSelectionValid = exports.inlineCommentPluginKey = void 0;
+exports.inlineCommentPluginKey = void 0;
+exports.isSelectedAnnotationsChanged = isSelectedAnnotationsChanged;
+exports.isSelectionValid = void 0;
 exports.stripNonExistingAnnotations = stripNonExistingAnnotations;
 exports.surroundingMarks = void 0;
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -353,4 +355,18 @@ function stripNonExistingAnnotationsFromNode(node, state) {
     });
   }
   return node;
+}
+
+/**
+ * Compares two sets of annotationInfos to see if the annotations have changed
+ * This function assumes annotations will have unique id's for simplicity
+ */
+function isSelectedAnnotationsChanged(oldSelectedAnnotations, newSelectedAnnotations) {
+  return newSelectedAnnotations.length !== oldSelectedAnnotations.length ||
+  // assuming annotations have unique id's for simplicity
+  newSelectedAnnotations.some(function (annotation) {
+    return !oldSelectedAnnotations.find(function (pluginStateAnnotation) {
+      return annotation.id === pluginStateAnnotation.id && annotation.type === pluginStateAnnotation.type;
+    });
+  });
 }

package/dist/cjs/plugins/extension/pm-plugins/unique-id.js

@@ -51,8 +51,8 @@ var createPlugin = exports.createPlugin = function createPlugin() {
                 }));
               }
               /**
-               * If it's a bodiedExtension, we'll need to keep digging; since we
-               * can have more extension nodes within the contents of that
+               * If it's a multiBodiedExtension or bodiedExtension, we'll need to keep digging;
+               * since we can have more extension nodes within the contents of that
                */
               if ([multiBodiedExtension, bodiedExtension].includes(node.type)) {
                 return true;

package/dist/cjs/plugins/extension/toolbar.js

@@ -65,6 +65,16 @@ var isLayoutSupported = function isLayoutSupported(state, selectedExtNode) {
   }
   return !!((selectedExtNode.node.type === bodiedExtension || selectedExtNode.node.type === extension && !(0, _utils.hasParentNodeOfType)([bodiedExtension, table, expand].filter(Boolean))(selection)) && !(0, _utils.hasParentNodeOfType)([layoutSection])(selection));
 };
+
+// Edit is not supported for multiBodiedExtension
+var isEditSupported = function isEditSupported(state, selectedExtNode) {
+  var _selectedExtNode$node;
+  var multiBodiedExtension = state.schema.nodes.multiBodiedExtension;
+  if (!selectedExtNode || (selectedExtNode === null || selectedExtNode === void 0 || (_selectedExtNode$node = selectedExtNode.node) === null || _selectedExtNode$node === void 0 ? void 0 : _selectedExtNode$node.type) === multiBodiedExtension) {
+    return false;
+  }
+  return true;
+};
 var breakoutOptions = function breakoutOptions(state, formatMessage, extensionState, breakoutEnabled) {
   var nodeWithPos = (0, _utils2.getSelectedExtension)(state, true);
 
@@ -96,10 +106,15 @@ var breakoutOptions = function breakoutOptions(state, formatMessage, extensionSt
   }
   return [];
 };
-var editButton = function editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI) {
+var editButton = function editButton(state, formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI) {
+  var nodeWithPos = (0, _utils2.getSelectedExtension)(state, true);
   if (!extensionState.showEditButton) {
     return [];
   }
+  // For multiBodiedExtension case, edit is not supported
+  if (nodeWithPos && !isEditSupported(state, nodeWithPos)) {
+    return [];
+  }
   return [{
     id: 'editor.extension.edit',
     type: 'button',
@@ -129,7 +144,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref
     var extensionState = (0, _main.getPluginState)(state);
     if (extensionState && !extensionState.showContextPanel && extensionState.element) {
       var nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension, state.schema.nodes.multiBodiedExtension];
-      var editButtonArray = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
+      var editButtonArray = editButton(state, formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
       var breakoutButtonArray = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled);
       var extensionObj = (0, _utils2.getSelectedExtension)(state, true);
 

package/dist/cjs/ui/Alignment/index.js

@@ -47,6 +47,7 @@ var Alignment = /*#__PURE__*/function (_PureComponent) {
         className = _this$props.className,
         intl = _this$props.intl;
       return (0, _react.jsx)("div", {
+        "data-testid": "alignment-buttons",
         css: _styles.alignmentWrapper,
         className: className
       }, alignmentOptions.map(function (alignment) {

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

@@ -10,4 +10,4 @@ var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _templateObject;
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-var extensionStyles = exports.extensionStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .multiBodiedExtensionView-content-wrap.", ":not(.danger) {\n    ", "\n  }\n\n  .extensionView-content-wrap,\n  .multiBodiedExtensionView-content-wrap,\n  .bodiedExtensionView-content-wrap {\n    margin: ", " 0;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    &:not(.danger).", " {\n      & > span > .extension-container {\n        ", "\n      }\n    }\n\n    &.danger > span > .extension-container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n\n    &.inline {\n      word-wrap: break-all;\n    }\n  }\n\n  .extensionView-content-wrap .extension-container {\n    overflow: hidden;\n  }\n\n  .bodiedExtensionView-content-wrap\n    .extensionView-content-wrap\n    .extension-container {\n    width: 100%;\n    max-width: 100%; // ensure width can't go over 100%;\n  }\n\n  [data-mark-type='fragment'] {\n    & > .extensionView-content-wrap,\n    & > .bodiedExtensionView-content-wrap {\n      margin: ", " 0;\n    }\n\n    & > [data-mark-type='dataConsumer'] {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin: ", " 0;\n      }\n    }\n\n    &:first-child {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-top: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-top: 0;\n        }\n      }\n    }\n\n    &:nth-last-of-type(-n + 2):not(:first-of-type) {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-bottom: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-bottom: 0;\n        }\n      }\n    }\n  }\n"])), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin);
+var extensionStyles = exports.extensionStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .multiBodiedExtensionView-content-wrap.", ":not(.danger) {\n    ", "\n  }\n\n  .multiBodiedExtensionView-content-wrap {\n    &.danger > span > .multiBodiedExtension--container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n    .multiBodiedExtension--container {\n      width: 100%;\n      max-width: 100%; // ensure width can't go over 100%;\n    }\n  }\n\n  .extensionView-content-wrap,\n  .multiBodiedExtensionView-content-wrap,\n  .bodiedExtensionView-content-wrap {\n    margin: ", " 0;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    &:not(.danger).", " {\n      & > span > .extension-container {\n        ", "\n      }\n    }\n\n    &.danger > span > .extension-container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n\n    &.inline {\n      word-wrap: break-all;\n    }\n  }\n\n  .extensionView-content-wrap .extension-container {\n    overflow: hidden;\n  }\n\n  .bodiedExtensionView-content-wrap\n    .extensionView-content-wrap\n    .extension-container {\n    width: 100%;\n    max-width: 100%; // ensure width can't go over 100%;\n  }\n\n  [data-mark-type='fragment'] {\n    & > .extensionView-content-wrap,\n    & > .bodiedExtensionView-content-wrap {\n      margin: ", " 0;\n    }\n\n    & > [data-mark-type='dataConsumer'] {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin: ", " 0;\n      }\n    }\n\n    &:first-child {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-top: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-top: 0;\n        }\n      }\n    }\n\n    &:nth-last-of-type(-n + 2):not(:first-of-type) {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-bottom: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-bottom: 0;\n        }\n      }\n    }\n  }\n"])), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin);

package/dist/cjs/version-wrapper.js

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

package/dist/es2019/i18n/ja.js

@@ -27,6 +27,7 @@ export default {
   'fabric.editor.configPanel.fieldTypeError.isMultipleAndRadio': '「isMultiple」と「style: radio」を組み合わせることはできません',
   'fabric.editor.configPanel.formType.addField': 'フィールドを追加',
   'fabric.editor.configPanel.formType.removeField': 'フィールドを削除',
+  'fabric.editor.configPanel.help': 'お困りですか？',
   'fabric.editor.configPanel.invalid': '無効なフィールド',
   'fabric.editor.configPanel.required': '必須フィールド',
   'fabric.editor.configPanel.submit': '送信',

package/dist/es2019/plugins/alignment/ui/ToolbarAlignment/index.js

@@ -75,13 +75,6 @@ export class AlignmentToolbar extends React.Component {
       boundariesElement: popupsBoundariesElement,
       scrollableElement: popupsScrollableElement,
       isOpen: isOpen,
-      onOpenChange: ({
-        isOpen
-      }) => {
-        this.setState({
-          isOpen
-        });
-      },
       handleClickOutside: event => {
         if (event instanceof MouseEvent) {
           this.hide({

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

@@ -3,6 +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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { updateInlineCommentResolvedState, updateMouseState, clearDirtyMark, setInlineCommentsVisibility, setSelectedAnnotation, closeComponent } from '../commands';
 import { getAllAnnotations, inlineCommentPluginKey, getPluginState } from '../utils';
 import { createPluginState } from './plugin-factory';
@@ -36,6 +37,7 @@ const initialState = (disallowOnWhitespace = false) => {
       isSelecting: false
     },
     disallowOnWhitespace,
+    isInlineCommentViewClosed: false,
     isVisible: true,
     skipSelectionHandling: false
   };
@@ -151,13 +153,14 @@ export const inlineCommentPlugin = options => {
           draftDecorationSet,
           annotations,
           selectedAnnotations,
-          isVisible
+          isVisible,
+          isInlineCommentViewClosed
         } = getPluginState(state) || {};
         let decorations = draftDecorationSet !== null && draftDecorationSet !== void 0 ? draftDecorationSet : DecorationSet.empty;
         const focusDecorations = [];
         state.doc.descendants((node, pos) => {
           node.marks.filter(mark => mark.type === state.schema.marks.annotation).forEach(mark => {
-            const isSelected = !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(selectedAnnotation => selectedAnnotation.id === mark.attrs.id));
+            const isSelected = getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox') ? !isInlineCommentViewClosed && !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(selectedAnnotation => selectedAnnotation.id === mark.attrs.id)) : !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(selectedAnnotation => selectedAnnotation.id === mark.attrs.id));
             const isUnresolved = !!annotations && annotations[mark.attrs.id] === false;
             if (isVisible) {
               focusDecorations.push(Decoration.inline(pos, pos + node.nodeSize, {

package/dist/es2019/plugins/annotation/pm-plugins/plugin-factory.js

@@ -1,9 +1,10 @@
 import { pluginFactory } from '../../../utils/plugin-state-factory';
-import { findAnnotationsInSelection, inlineCommentPluginKey } from '../utils';
+import { findAnnotationsInSelection, inlineCommentPluginKey, isSelectedAnnotationsChanged } from '../utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import reducer from './reducer';
 const handleDocChanged = (tr, prevPluginState) => {
   if (!tr.getMeta('replaceDocument')) {
-    return handleSelectionChanged(tr, prevPluginState);
+    return getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox') ? getSelectionChangedHandler(false)(tr, prevPluginState) : handleSelectionChanged(tr, prevPluginState);
   }
   return {
     ...prevPluginState,
@@ -29,11 +30,57 @@ const handleSelectionChanged = (tr, pluginState) => {
   }
   return pluginState;
 };
+const getSelectionChangedHandler = reopenCommentView => (tr, pluginState) => {
+  /**
+   * If feature flag is **OFF** we want to keep the old behavior. Note that
+   * reopenCommentView is not relevant here when using old behaviour.
+   *
+   * Feature flag is evaluated here rather than directly in onSelectionChanged where it is assigned
+   * to prevent the plugin from setting up the handler before the feature flag is evaluated.
+   *
+   * This comment / logic can be cleaned up once the feature flag is removed.
+   */
+  if (!getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox')) {
+    return handleSelectionChanged(tr, pluginState);
+  }
+  if (pluginState.skipSelectionHandling) {
+    return {
+      ...pluginState,
+      skipSelectionHandling: false,
+      ...(reopenCommentView && {
+        isInlineCommentViewClosed: false
+      })
+    };
+  }
+  const selectedAnnotations = findAnnotationsInSelection(tr.selection, tr.doc);
+  if (selectedAnnotations.length === 0) {
+    return {
+      ...pluginState,
+      selectedAnnotations,
+      isInlineCommentViewClosed: true
+    };
+  }
+  if (isSelectedAnnotationsChanged(selectedAnnotations, pluginState.selectedAnnotations)) {
+    return {
+      ...pluginState,
+      selectedAnnotations,
+      ...(reopenCommentView && {
+        isInlineCommentViewClosed: false
+      })
+    };
+  }
+  return {
+    ...pluginState,
+    ...(reopenCommentView && {
+      isInlineCommentViewClosed: false
+    })
+  };
+};
 export const {
   createPluginState,
   createCommand
 } = pluginFactory(inlineCommentPluginKey, reducer, {
-  onSelectionChanged: handleSelectionChanged,
+  onSelectionChanged: getSelectionChangedHandler(true),
   onDocChanged: handleDocChanged,
   mapping: (tr, pluginState) => {
     let {

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

@@ -1,6 +1,7 @@
-import { ACTIONS } from './types';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { addDraftDecoration } from '../utils';
+import { ACTIONS } from './types';
 export default ((pluginState, action) => {
   switch (action.type) {
     case ACTIONS.UPDATE_INLINE_COMMENT_STATE:
@@ -26,7 +27,10 @@ export default ((pluginState, action) => {
         annotations: {}
       };
     case ACTIONS.CLOSE_COMPONENT:
-      return {
+      return getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox') ? {
+        ...pluginState,
+        isInlineCommentViewClosed: true
+      } : {
         ...pluginState,
         selectedAnnotations: []
       };
@@ -38,7 +42,10 @@ export default ((pluginState, action) => {
         annotations: {
           ...pluginState.annotations,
           ...action.data.inlineComments
-        }
+        },
+        ...(getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox') && {
+          isInlineCommentViewClosed: false
+        })
       };
     case ACTIONS.INLINE_COMMENT_SET_VISIBLE:
       const {
@@ -55,7 +62,11 @@ export default ((pluginState, action) => {
       return {
         ...pluginState,
         selectedAnnotations: [...action.data.selectedAnnotations],
-        skipSelectionHandling: true
+        skipSelectionHandling: true,
+        ...(getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox') && {
+          // if selecting annotation explicitly, reopen the comment view
+          isInlineCommentViewClosed: false
+        })
       };
     default:
       return pluginState;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { AnnotationViewWrapper } from './AnnotationViewWrapper';
 import { AnnotationTestIds } from '../types';
 import { getAnnotationViewKey, getSelectionPositions, getPluginState, getAllAnnotations } from '../utils';
@@ -45,7 +46,8 @@ export function InlineCommentView({
   const {
     bookmark,
     selectedAnnotations,
-    annotations
+    annotations,
+    isInlineCommentViewClosed
   } = inlineCommentState || {};
   const annotationsList = getAllAnnotations(editorView.state.doc);
   const selection = getSelectionPositions(state, inlineCommentState);
@@ -122,7 +124,7 @@ export function InlineCommentView({
     };
     dispatchAnalyticsEvent(payload);
   };
-  if (!selectedAnnotations) {
+  if (getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox') && isInlineCommentViewClosed || !selectedAnnotations) {
     return null;
   }
   return /*#__PURE__*/React.createElement(AnnotationViewWrapper, {

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

@@ -321,4 +321,14 @@ function stripNonExistingAnnotationsFromNode(node, state) {
     });
   }
   return node;
+}
+
+/**
+ * Compares two sets of annotationInfos to see if the annotations have changed
+ * This function assumes annotations will have unique id's for simplicity
+ */
+export function isSelectedAnnotationsChanged(oldSelectedAnnotations, newSelectedAnnotations) {
+  return newSelectedAnnotations.length !== oldSelectedAnnotations.length ||
+  // assuming annotations have unique id's for simplicity
+  newSelectedAnnotations.some(annotation => !oldSelectedAnnotations.find(pluginStateAnnotation => annotation.id === pluginStateAnnotation.id && annotation.type === pluginStateAnnotation.type));
 }

package/dist/es2019/plugins/extension/pm-plugins/unique-id.js

@@ -40,8 +40,8 @@ const createPlugin = () => new SafePlugin({
               });
             }
             /**
-             * If it's a bodiedExtension, we'll need to keep digging; since we
-             * can have more extension nodes within the contents of that
+             * If it's a multiBodiedExtension or bodiedExtension, we'll need to keep digging;
+             * since we can have more extension nodes within the contents of that
              */
             if ([multiBodiedExtension, bodiedExtension].includes(node.type)) {
               return true;

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

@@ -62,6 +62,22 @@ const isLayoutSupported = (state, selectedExtNode) => {
   }
   return !!((selectedExtNode.node.type === bodiedExtension || selectedExtNode.node.type === extension && !hasParentNodeOfType([bodiedExtension, table, expand].filter(Boolean))(selection)) && !hasParentNodeOfType([layoutSection])(selection));
 };
+
+// Edit is not supported for multiBodiedExtension
+const isEditSupported = (state, selectedExtNode) => {
+  var _selectedExtNode$node;
+  const {
+    schema: {
+      nodes: {
+        multiBodiedExtension
+      }
+    }
+  } = state;
+  if (!selectedExtNode || (selectedExtNode === null || selectedExtNode === void 0 ? void 0 : (_selectedExtNode$node = selectedExtNode.node) === null || _selectedExtNode$node === void 0 ? void 0 : _selectedExtNode$node.type) === multiBodiedExtension) {
+    return false;
+  }
+  return true;
+};
 const breakoutOptions = (state, formatMessage, extensionState, breakoutEnabled) => {
   const nodeWithPos = getSelectedExtension(state, true);
 
@@ -95,10 +111,15 @@ const breakoutOptions = (state, formatMessage, extensionState, breakoutEnabled)
   }
   return [];
 };
-const editButton = (formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI) => {
+const editButton = (state, formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI) => {
+  const nodeWithPos = getSelectedExtension(state, true);
   if (!extensionState.showEditButton) {
     return [];
   }
+  // For multiBodiedExtension case, edit is not supported
+  if (nodeWithPos && !isEditSupported(state, nodeWithPos)) {
+    return [];
+  }
   return [{
     id: 'editor.extension.edit',
     type: 'button',
@@ -130,7 +151,7 @@ export const getToolbarConfig = ({
   const extensionState = getPluginState(state);
   if (extensionState && !extensionState.showContextPanel && extensionState.element) {
     const nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension, state.schema.nodes.multiBodiedExtension];
-    const editButtonArray = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
+    const editButtonArray = editButton(state, formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
     const breakoutButtonArray = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled);
     const extensionObj = getSelectedExtension(state, true);
 

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

@@ -27,6 +27,7 @@ class Alignment extends PureComponent {
       intl
     } = this.props;
     return jsx("div", {
+      "data-testid": "alignment-buttons",
       css: alignmentWrapper,
       className: className
     }, alignmentOptions.map(alignment => {

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

@@ -6,6 +6,18 @@ export const extensionStyles = css`
     ${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket])}
   }
 
+  .multiBodiedExtensionView-content-wrap {
+    &.danger > span > .multiBodiedExtension--container {
+      box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
+        ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+      background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
+    }
+    .multiBodiedExtension--container {
+      width: 100%;
+      max-width: 100%; // ensure width can't go over 100%;
+    }
+  }
+
   .extensionView-content-wrap,
   .multiBodiedExtensionView-content-wrap,
   .bodiedExtensionView-content-wrap {

package/dist/es2019/version-wrapper.js

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

package/dist/esm/i18n/ja.js

@@ -27,6 +27,7 @@ export default {
   'fabric.editor.configPanel.fieldTypeError.isMultipleAndRadio': '「isMultiple」と「style: radio」を組み合わせることはできません',
   'fabric.editor.configPanel.formType.addField': 'フィールドを追加',
   'fabric.editor.configPanel.formType.removeField': 'フィールドを削除',
+  'fabric.editor.configPanel.help': 'お困りですか？',
   'fabric.editor.configPanel.invalid': '無効なフィールド',
   'fabric.editor.configPanel.required': '必須フィールド',
   'fabric.editor.configPanel.submit': '送信',

package/dist/esm/plugins/alignment/ui/ToolbarAlignment/index.js

@@ -91,12 +91,6 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
         boundariesElement: popupsBoundariesElement,
         scrollableElement: popupsScrollableElement,
         isOpen: isOpen,
-        onOpenChange: function onOpenChange(_ref) {
-          var isOpen = _ref.isOpen;
-          _this2.setState({
-            isOpen: isOpen
-          });
-        },
         handleClickOutside: function handleClickOutside(event) {
           if (event instanceof MouseEvent) {
             _this2.hide({

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

@@ -6,6 +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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { updateInlineCommentResolvedState, updateMouseState, clearDirtyMark, setInlineCommentsVisibility, setSelectedAnnotation, closeComponent } from '../commands';
 import { getAllAnnotations, inlineCommentPluginKey, getPluginState } from '../utils';
 import { createPluginState } from './plugin-factory';
@@ -77,6 +78,7 @@ var initialState = function initialState() {
       isSelecting: false
     },
     disallowOnWhitespace: disallowOnWhitespace,
+    isInlineCommentViewClosed: false,
     isVisible: true,
     skipSelectionHandling: false
   };
@@ -204,14 +206,17 @@ export var inlineCommentPlugin = function inlineCommentPlugin(options) {
           draftDecorationSet = _ref5.draftDecorationSet,
           annotations = _ref5.annotations,
           selectedAnnotations = _ref5.selectedAnnotations,
-          isVisible = _ref5.isVisible;
+          isVisible = _ref5.isVisible,
+          isInlineCommentViewClosed = _ref5.isInlineCommentViewClosed;
         var decorations = draftDecorationSet !== null && draftDecorationSet !== void 0 ? draftDecorationSet : DecorationSet.empty;
         var focusDecorations = [];
         state.doc.descendants(function (node, pos) {
           node.marks.filter(function (mark) {
             return mark.type === state.schema.marks.annotation;
           }).forEach(function (mark) {
-            var isSelected = !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(function (selectedAnnotation) {
+            var isSelected = getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox') ? !isInlineCommentViewClosed && !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(function (selectedAnnotation) {
+              return selectedAnnotation.id === mark.attrs.id;
+            })) : !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(function (selectedAnnotation) {
               return selectedAnnotation.id === mark.attrs.id;
             }));
             var isUnresolved = !!annotations && annotations[mark.attrs.id] === false;

package/dist/esm/plugins/annotation/pm-plugins/plugin-factory.js

@@ -2,11 +2,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { pluginFactory } from '../../../utils/plugin-state-factory';
-import { findAnnotationsInSelection, inlineCommentPluginKey } from '../utils';
+import { findAnnotationsInSelection, inlineCommentPluginKey, isSelectedAnnotationsChanged } from '../utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import reducer from './reducer';
 var handleDocChanged = function handleDocChanged(tr, prevPluginState) {
   if (!tr.getMeta('replaceDocument')) {
-    return handleSelectionChanged(tr, prevPluginState);
+    return getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox') ? getSelectionChangedHandler(false)(tr, prevPluginState) : handleSelectionChanged(tr, prevPluginState);
   }
   return _objectSpread(_objectSpread({}, prevPluginState), {}, {
     dirtyAnnotations: true
@@ -31,8 +32,48 @@ var handleSelectionChanged = function handleSelectionChanged(tr, pluginState) {
   }
   return pluginState;
 };
+var getSelectionChangedHandler = function getSelectionChangedHandler(reopenCommentView) {
+  return function (tr, pluginState) {
+    /**
+     * If feature flag is **OFF** we want to keep the old behavior. Note that
+     * reopenCommentView is not relevant here when using old behaviour.
+     *
+     * Feature flag is evaluated here rather than directly in onSelectionChanged where it is assigned
+     * to prevent the plugin from setting up the handler before the feature flag is evaluated.
+     *
+     * This comment / logic can be cleaned up once the feature flag is removed.
+     */
+    if (!getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox')) {
+      return handleSelectionChanged(tr, pluginState);
+    }
+    if (pluginState.skipSelectionHandling) {
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        skipSelectionHandling: false
+      }, reopenCommentView && {
+        isInlineCommentViewClosed: false
+      });
+    }
+    var selectedAnnotations = findAnnotationsInSelection(tr.selection, tr.doc);
+    if (selectedAnnotations.length === 0) {
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        selectedAnnotations: selectedAnnotations,
+        isInlineCommentViewClosed: true
+      });
+    }
+    if (isSelectedAnnotationsChanged(selectedAnnotations, pluginState.selectedAnnotations)) {
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        selectedAnnotations: selectedAnnotations
+      }, reopenCommentView && {
+        isInlineCommentViewClosed: false
+      });
+    }
+    return _objectSpread(_objectSpread({}, pluginState), reopenCommentView && {
+      isInlineCommentViewClosed: false
+    });
+  };
+};
 var _pluginFactory = pluginFactory(inlineCommentPluginKey, reducer, {
-    onSelectionChanged: handleSelectionChanged,
+    onSelectionChanged: getSelectionChangedHandler(true),
     onDocChanged: handleDocChanged,
     mapping: function mapping(tr, pluginState) {
       var draftDecorationSet = pluginState.draftDecorationSet,

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

@@ -2,9 +2,10 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { ACTIONS } from './types';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { addDraftDecoration } from '../utils';
+import { ACTIONS } from './types';
 export default (function (pluginState, action) {
   switch (action.type) {
     case ACTIONS.UPDATE_INLINE_COMMENT_STATE:
@@ -24,7 +25,9 @@ export default (function (pluginState, action) {
         annotations: {}
       });
     case ACTIONS.CLOSE_COMPONENT:
-      return _objectSpread(_objectSpread({}, pluginState), {}, {
+      return getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox') ? _objectSpread(_objectSpread({}, pluginState), {}, {
+        isInlineCommentViewClosed: true
+      }) : _objectSpread(_objectSpread({}, pluginState), {}, {
         selectedAnnotations: []
       });
     case ACTIONS.ADD_INLINE_COMMENT:
@@ -32,6 +35,8 @@ export default (function (pluginState, action) {
       return _objectSpread(_objectSpread({}, updatedPluginState), {}, {
         selectedAnnotations: [].concat(_toConsumableArray(updatedPluginState.selectedAnnotations), _toConsumableArray(action.data.selectedAnnotations)),
         annotations: _objectSpread(_objectSpread({}, pluginState.annotations), action.data.inlineComments)
+      }, getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox') && {
+        isInlineCommentViewClosed: false
       });
     case ACTIONS.INLINE_COMMENT_SET_VISIBLE:
       var isVisible = action.data.isVisible;
@@ -45,6 +50,9 @@ export default (function (pluginState, action) {
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         selectedAnnotations: _toConsumableArray(action.data.selectedAnnotations),
         skipSelectionHandling: true
+      }, getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox') && {
+        // if selecting annotation explicitly, reopen the comment view
+        isInlineCommentViewClosed: false
       });
     default:
       return pluginState;

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { AnnotationViewWrapper } from './AnnotationViewWrapper';
 import { AnnotationTestIds } from '../types';
 import { getAnnotationViewKey, getSelectionPositions, getPluginState, getAllAnnotations } from '../utils';
@@ -39,7 +40,8 @@ export function InlineCommentView(_ref) {
   var _ref2 = inlineCommentState || {},
     bookmark = _ref2.bookmark,
     selectedAnnotations = _ref2.selectedAnnotations,
-    annotations = _ref2.annotations;
+    annotations = _ref2.annotations,
+    isInlineCommentViewClosed = _ref2.isInlineCommentViewClosed;
   var annotationsList = getAllAnnotations(editorView.state.doc);
   var selection = getSelectionPositions(state, inlineCommentState);
   var position = findPosForDOM(selection);
@@ -117,7 +119,7 @@ export function InlineCommentView(_ref) {
     };
     dispatchAnalyticsEvent(payload);
   };
-  if (!selectedAnnotations) {
+  if (getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox') && isInlineCommentViewClosed || !selectedAnnotations) {
     return null;
   }
   return /*#__PURE__*/React.createElement(AnnotationViewWrapper, {

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

@@ -328,4 +328,18 @@ function stripNonExistingAnnotationsFromNode(node, state) {
     });
   }
   return node;
+}
+
+/**
+ * Compares two sets of annotationInfos to see if the annotations have changed
+ * This function assumes annotations will have unique id's for simplicity
+ */
+export function isSelectedAnnotationsChanged(oldSelectedAnnotations, newSelectedAnnotations) {
+  return newSelectedAnnotations.length !== oldSelectedAnnotations.length ||
+  // assuming annotations have unique id's for simplicity
+  newSelectedAnnotations.some(function (annotation) {
+    return !oldSelectedAnnotations.find(function (pluginStateAnnotation) {
+      return annotation.id === pluginStateAnnotation.id && annotation.type === pluginStateAnnotation.type;
+    });
+  });
 }

package/dist/esm/plugins/extension/pm-plugins/unique-id.js

@@ -44,8 +44,8 @@ var createPlugin = function createPlugin() {
                 }));
               }
               /**
-               * If it's a bodiedExtension, we'll need to keep digging; since we
-               * can have more extension nodes within the contents of that
+               * If it's a multiBodiedExtension or bodiedExtension, we'll need to keep digging;
+               * since we can have more extension nodes within the contents of that
                */
               if ([multiBodiedExtension, bodiedExtension].includes(node.type)) {
                 return true;

package/dist/esm/plugins/extension/toolbar.js

@@ -58,6 +58,16 @@ var isLayoutSupported = function isLayoutSupported(state, selectedExtNode) {
   }
   return !!((selectedExtNode.node.type === bodiedExtension || selectedExtNode.node.type === extension && !hasParentNodeOfType([bodiedExtension, table, expand].filter(Boolean))(selection)) && !hasParentNodeOfType([layoutSection])(selection));
 };
+
+// Edit is not supported for multiBodiedExtension
+var isEditSupported = function isEditSupported(state, selectedExtNode) {
+  var _selectedExtNode$node;
+  var multiBodiedExtension = state.schema.nodes.multiBodiedExtension;
+  if (!selectedExtNode || (selectedExtNode === null || selectedExtNode === void 0 || (_selectedExtNode$node = selectedExtNode.node) === null || _selectedExtNode$node === void 0 ? void 0 : _selectedExtNode$node.type) === multiBodiedExtension) {
+    return false;
+  }
+  return true;
+};
 var breakoutOptions = function breakoutOptions(state, formatMessage, extensionState, breakoutEnabled) {
   var nodeWithPos = getSelectedExtension(state, true);
 
@@ -89,10 +99,15 @@ var breakoutOptions = function breakoutOptions(state, formatMessage, extensionSt
   }
   return [];
 };
-var editButton = function editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI) {
+var editButton = function editButton(state, formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI) {
+  var nodeWithPos = getSelectedExtension(state, true);
   if (!extensionState.showEditButton) {
     return [];
   }
+  // For multiBodiedExtension case, edit is not supported
+  if (nodeWithPos && !isEditSupported(state, nodeWithPos)) {
+    return [];
+  }
   return [{
     id: 'editor.extension.edit',
     type: 'button',
@@ -122,7 +137,7 @@ export var getToolbarConfig = function getToolbarConfig(_ref) {
     var extensionState = getPluginState(state);
     if (extensionState && !extensionState.showContextPanel && extensionState.element) {
       var nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension, state.schema.nodes.multiBodiedExtension];
-      var editButtonArray = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
+      var editButtonArray = editButton(state, formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
       var breakoutButtonArray = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled);
       var extensionObj = getSelectedExtension(state, true);
 

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

@@ -41,6 +41,7 @@ var Alignment = /*#__PURE__*/function (_PureComponent) {
         className = _this$props.className,
         intl = _this$props.intl;
       return jsx("div", {
+        "data-testid": "alignment-buttons",
         css: alignmentWrapper,
         className: className
       }, alignmentOptions.map(function (alignment) {

package/dist/esm/ui/ContentStyles/extension.js

@@ -3,4 +3,4 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { blockNodesVerticalMargin, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var extensionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .multiBodiedExtensionView-content-wrap.", ":not(.danger) {\n    ", "\n  }\n\n  .extensionView-content-wrap,\n  .multiBodiedExtensionView-content-wrap,\n  .bodiedExtensionView-content-wrap {\n    margin: ", " 0;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    &:not(.danger).", " {\n      & > span > .extension-container {\n        ", "\n      }\n    }\n\n    &.danger > span > .extension-container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n\n    &.inline {\n      word-wrap: break-all;\n    }\n  }\n\n  .extensionView-content-wrap .extension-container {\n    overflow: hidden;\n  }\n\n  .bodiedExtensionView-content-wrap\n    .extensionView-content-wrap\n    .extension-container {\n    width: 100%;\n    max-width: 100%; // ensure width can't go over 100%;\n  }\n\n  [data-mark-type='fragment'] {\n    & > .extensionView-content-wrap,\n    & > .bodiedExtensionView-content-wrap {\n      margin: ", " 0;\n    }\n\n    & > [data-mark-type='dataConsumer'] {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin: ", " 0;\n      }\n    }\n\n    &:first-child {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-top: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-top: 0;\n        }\n      }\n    }\n\n    &:nth-last-of-type(-n + 2):not(:first-of-type) {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-bottom: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-bottom: 0;\n        }\n      }\n    }\n  }\n"])), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), blockNodesVerticalMargin, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), blockNodesVerticalMargin, blockNodesVerticalMargin);
+export var extensionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .multiBodiedExtensionView-content-wrap.", ":not(.danger) {\n    ", "\n  }\n\n  .multiBodiedExtensionView-content-wrap {\n    &.danger > span > .multiBodiedExtension--container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n    .multiBodiedExtension--container {\n      width: 100%;\n      max-width: 100%; // ensure width can't go over 100%;\n    }\n  }\n\n  .extensionView-content-wrap,\n  .multiBodiedExtensionView-content-wrap,\n  .bodiedExtensionView-content-wrap {\n    margin: ", " 0;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    &:not(.danger).", " {\n      & > span > .extension-container {\n        ", "\n      }\n    }\n\n    &.danger > span > .extension-container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n\n    &.inline {\n      word-wrap: break-all;\n    }\n  }\n\n  .extensionView-content-wrap .extension-container {\n    overflow: hidden;\n  }\n\n  .bodiedExtensionView-content-wrap\n    .extensionView-content-wrap\n    .extension-container {\n    width: 100%;\n    max-width: 100%; // ensure width can't go over 100%;\n  }\n\n  [data-mark-type='fragment'] {\n    & > .extensionView-content-wrap,\n    & > .bodiedExtensionView-content-wrap {\n      margin: ", " 0;\n    }\n\n    & > [data-mark-type='dataConsumer'] {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin: ", " 0;\n      }\n    }\n\n    &:first-child {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-top: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-top: 0;\n        }\n      }\n    }\n\n    &:nth-last-of-type(-n + 2):not(:first-of-type) {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-bottom: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-bottom: 0;\n        }\n      }\n    }\n  }\n"])), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), blockNodesVerticalMargin, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), blockNodesVerticalMargin, blockNodesVerticalMargin);

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "190.0.0";
+export var version = "190.1.1";

package/dist/types/i18n/ja.d.ts

@@ -25,6 +25,7 @@ declare const _default: {
     'fabric.editor.configPanel.fieldTypeError.isMultipleAndRadio': string;
     'fabric.editor.configPanel.formType.addField': string;
     'fabric.editor.configPanel.formType.removeField': string;
+    'fabric.editor.configPanel.help': string;
     'fabric.editor.configPanel.invalid': string;
     'fabric.editor.configPanel.required': string;
     'fabric.editor.configPanel.submit': string;

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

@@ -72,6 +72,7 @@ export type InlineCommentPluginState = {
     draftDecorationSet?: DecorationSet;
     bookmark?: SelectionBookmark;
     disallowOnWhitespace: boolean;
+    isInlineCommentViewClosed: boolean;
     isVisible: boolean;
     skipSelectionHandling: boolean;
 };

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

@@ -38,3 +38,8 @@ export declare const hasInvalidNodes: (state: EditorState) => boolean;
 export declare function hasInvalidWhitespaceNode(selection: TextSelection | AllSelection, schema: Schema): boolean;
 export declare function annotationExists(annotationId: string, state: EditorState): boolean;
 export declare function stripNonExistingAnnotations(slice: Slice, state: EditorState): false | undefined;
+/**
+ * Compares two sets of annotationInfos to see if the annotations have changed
+ * This function assumes annotations will have unique id's for simplicity
+ */
+export declare function isSelectedAnnotationsChanged(oldSelectedAnnotations: AnnotationInfo[], newSelectedAnnotations: AnnotationInfo[]): boolean;

package/dist/types-ts4.5/i18n/ja.d.ts

@@ -25,6 +25,7 @@ declare const _default: {
     'fabric.editor.configPanel.fieldTypeError.isMultipleAndRadio': string;
     'fabric.editor.configPanel.formType.addField': string;
     'fabric.editor.configPanel.formType.removeField': string;
+    'fabric.editor.configPanel.help': string;
     'fabric.editor.configPanel.invalid': string;
     'fabric.editor.configPanel.required': string;
     'fabric.editor.configPanel.submit': string;

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

@@ -72,6 +72,7 @@ export type InlineCommentPluginState = {
     draftDecorationSet?: DecorationSet;
     bookmark?: SelectionBookmark;
     disallowOnWhitespace: boolean;
+    isInlineCommentViewClosed: boolean;
     isVisible: boolean;
     skipSelectionHandling: boolean;
 };

package/dist/types-ts4.5/plugins/annotation/utils.d.ts

@@ -38,3 +38,8 @@ export declare const hasInvalidNodes: (state: EditorState) => boolean;
 export declare function hasInvalidWhitespaceNode(selection: TextSelection | AllSelection, schema: Schema): boolean;
 export declare function annotationExists(annotationId: string, state: EditorState): boolean;
 export declare function stripNonExistingAnnotations(slice: Slice, state: EditorState): false | undefined;
+/**
+ * Compares two sets of annotationInfos to see if the annotations have changed
+ * This function assumes annotations will have unique id's for simplicity
+ */
+export declare function isSelectedAnnotationsChanged(oldSelectedAnnotations: AnnotationInfo[], newSelectedAnnotations: AnnotationInfo[]): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "190.0.0",
+  "version": "190.1.1",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -362,6 +362,9 @@
     "platform.editor.allow-list-in-blockquote": {
       "type": "boolean",
       "referenceOnly": "true"
+    },
+    "platform.editor.annotation.decouple-inline-comment-closed_flmox": {
+      "type": "boolean"
     }
   }
 }