@atlaskit/editor-plugin-annotation 2.7.5 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-annotation
 
+## 2.8.0
+
+### Minor Changes
+
+- [#153391](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/153391)
+  [`1e42cbe3dd636`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1e42cbe3dd636) -
+  [ux] [ED-27484] Track network state from connectivity plugin and provide this to view/create
+  components
+
+## 2.7.6
+
+### Patch Changes
+
+- [#142925](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142925)
+  [`e013698350bef`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e013698350bef) -
+  This updates the renderer to use the new annotation manager create comment APIs and disables the
+  use of the old create hooks. This should be backward compatible and can be controled by a FG
+- [#151999](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/151999)
+  [`daf7c638efb95`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/daf7c638efb95) -
+  Refactor to use sharedPluginStateHookMigratorFactory
+- Updated dependencies
+
 ## 2.7.5
 
 ### Patch Changes

package/dist/cjs/annotationPlugin.js

@@ -136,20 +136,29 @@ var annotationPlugin = exports.annotationPlugin = function annotationPlugin(_ref
     }
   };
 };
+var useAnnotationContentComponentPluginState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+  var isVisible = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.isVisible');
+  return {
+    isVisible: isVisible,
+    annotationState: undefined
+  };
+}, function (api) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['annotation']),
+    annotationState = _useSharedPluginState.annotationState;
+  return {
+    isVisible: annotationState === null || annotationState === void 0 ? void 0 : annotationState.isVisible,
+    annotationState: annotationState
+  };
+});
 function AnnotationContentComponent(_ref4) {
   var _api$analytics5;
   var api = _ref4.api,
     editorView = _ref4.editorView,
     annotationProviders = _ref4.annotationProviders,
     dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['annotation'], {
-      disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
-    }),
-    annotationState = _useSharedPluginState.annotationState;
-  var isVisibleSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.isVisible', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isVisible = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isVisibleSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isVisible;
+  var _useAnnotationContent = useAnnotationContentComponentPluginState(api),
+    isVisible = _useAnnotationContent.isVisible,
+    annotationState = _useAnnotationContent.annotationState;
   if (annotationState && !isVisible && (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)) {
     return null;
   }

package/dist/cjs/pm-plugins/annotation-manager-hooks.js

@@ -147,7 +147,9 @@ var applyDraft = exports.applyDraft = function applyDraft(editorView, options) {
     return {
       success: true,
       // Get the dom element from the newly created annotation and return it here.
-      targetElement: targetElement
+      targetElement: targetElement,
+      // In Editor this is undefined, because the editor will update the document.
+      actionResult: undefined
     };
   };
 };

package/dist/cjs/ui/InlineCommentView.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
@@ -34,53 +35,66 @@ var findPosForDOM = function findPosForDOM(sel) {
   }
   return from;
 };
-function InlineCommentView(_ref) {
-  var providers = _ref.providers,
-    editorView = _ref.editorView,
-    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
-    editorAPI = _ref.editorAPI,
-    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+var useInlineCommentViewPluginState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (_ref) {
+  var api = _ref.api;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var bookmark = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.bookmark');
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var selectedAnnotations = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.selectedAnnotations');
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var annotations = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.annotations');
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var isInlineCommentViewClosed = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.isInlineCommentViewClosed');
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var isOpeningMediaCommentFromToolbar = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.isOpeningMediaCommentFromToolbar');
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var selectAnnotationMethod = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.selectAnnotationMethod');
+  return {
+    bookmark: bookmark,
+    selectedAnnotations: selectedAnnotations,
+    annotations: annotations,
+    isInlineCommentViewClosed: isInlineCommentViewClosed,
+    isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar,
+    selectAnnotationMethod: selectAnnotationMethod
+  };
+}, function (_ref2) {
+  var state = _ref2.state;
+  var inlineCommentState = (0, _utils3.getPluginState)(state);
+  return {
+    bookmark: inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.bookmark,
+    selectedAnnotations: inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.selectedAnnotations,
+    annotations: inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.annotations,
+    isInlineCommentViewClosed: inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.isInlineCommentViewClosed,
+    isOpeningMediaCommentFromToolbar: inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.isOpeningMediaCommentFromToolbar,
+    selectAnnotationMethod: inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.selectAnnotationMethod
+  };
+});
+function InlineCommentView(_ref3) {
+  var providers = _ref3.providers,
+    editorView = _ref3.editorView,
+    editorAnalyticsAPI = _ref3.editorAnalyticsAPI,
+    editorAPI = _ref3.editorAPI,
+    dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent;
   // As inlineComment is the only annotation present, this function is not generic
   var inlineCommentProvider = providers.inlineComment;
   var state = editorView.state,
     dispatch = editorView.dispatch;
   var CreateComponent = inlineCommentProvider.createComponent,
     ViewComponent = inlineCommentProvider.viewComponent;
-  var inlineCommentState = (0, _utils3.getPluginState)(state);
-
-  // bookmark
-  var bookmarkSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(editorAPI, 'annotation.bookmark', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var bookmark = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? bookmarkSelector : inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.bookmark;
-
-  // selectedAnnotations
-  var selectedAnnotationsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(editorAPI, 'annotation.selectedAnnotations', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var selectedAnnotations = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? selectedAnnotationsSelector : inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.selectedAnnotations;
-
-  // annotations
-  var annotationsSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(editorAPI, 'annotation.annotations', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var annotations = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? annotationsSelector : inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.annotations;
-
-  // isInlineCommentViewClosed
-  var isInlineCommentViewClosedSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(editorAPI, 'annotation.isInlineCommentViewClosed', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isInlineCommentViewClosed = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isInlineCommentViewClosedSelector : inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.isInlineCommentViewClosed;
-
-  // isOpeningMediaCommentFromToolbar
-  var isOpeningMediaCommentFromToolbarSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(editorAPI, 'annotation.isOpeningMediaCommentFromToolbar', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isOpeningMediaCommentFromToolbar = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isOpeningMediaCommentFromToolbarSelector : inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.isOpeningMediaCommentFromToolbar;
+  var _useInlineCommentView = useInlineCommentViewPluginState({
+      api: editorAPI,
+      state: state
+    }),
+    annotations = _useInlineCommentView.annotations,
+    bookmark = _useInlineCommentView.bookmark,
+    isInlineCommentViewClosed = _useInlineCommentView.isInlineCommentViewClosed,
+    isOpeningMediaCommentFromToolbar = _useInlineCommentView.isOpeningMediaCommentFromToolbar,
+    selectAnnotationMethod = _useInlineCommentView.selectAnnotationMethod,
+    selectedAnnotations = _useInlineCommentView.selectedAnnotations;
   var annotationsList = (0, _utils3.getAllAnnotations)(editorView.state.doc);
-  var selection = (0, _utils3.getSelectionPositions)(state, (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? {
+  var selection = (0, _utils3.getSelectionPositions)(state, {
     bookmark: bookmark
-  } : inlineCommentState);
+  });
   var position = findPosForDOM(selection);
   var dom;
   try {
@@ -107,9 +121,9 @@ function InlineCommentView(_ref) {
     }
   }
 
-  // selectAnnotationMethod
-  var selectAnnotationMethodSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(editorAPI, 'annotation.selectAnnotationMethod', {
-    disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
+  // Network Status
+  var networkStatusSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(editorAPI, 'connectivity.mode', {
+    disabled: (0, _experiments.editorExperiment)('platform_editor_offline_editing_web', false)
   });
   if (!dom) {
     return null;
@@ -149,7 +163,8 @@ function InlineCommentView(_ref) {
         }
       },
       inlineNodeTypes: inlineNodeTypes,
-      isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar
+      isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar,
+      isOffline: networkStatusSelector === 'offline'
     }));
   }
 
@@ -175,7 +190,7 @@ function InlineCommentView(_ref) {
       attributes: {
         overlap: activeAnnotations.length ? activeAnnotations.length - 1 : 0,
         targetNodeType: (_editorView$state$doc = editorView.state.doc.nodeAt(position)) === null || _editorView$state$doc === void 0 ? void 0 : _editorView$state$doc.type.name,
-        method: (0, _experiments.editorExperiment)('platform_editor_tables_table_selector', true) ? selectAnnotationMethodSelector : inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.selectAnnotationMethod
+        method: selectAnnotationMethod
       }
     };
     dispatchAnalyticsEvent(payload);
@@ -209,6 +224,7 @@ function InlineCommentView(_ref) {
     onClose: function onClose() {
       (0, _editorCommands.closeComponent)()(editorView.state, editorView.dispatch);
     },
-    isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar
+    isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar,
+    isOffline: networkStatusSelector === 'offline'
   }));
 }

package/dist/es2019/annotationPlugin.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -129,6 +129,21 @@ export const annotationPlugin = ({
     }
   };
 };
+const useAnnotationContentComponentPluginState = sharedPluginStateHookMigratorFactory(api => {
+  const isVisible = useSharedPluginStateSelector(api, 'annotation.isVisible');
+  return {
+    isVisible,
+    annotationState: undefined
+  };
+}, api => {
+  const {
+    annotationState
+  } = useSharedPluginState(api, ['annotation']);
+  return {
+    isVisible: annotationState === null || annotationState === void 0 ? void 0 : annotationState.isVisible,
+    annotationState
+  };
+});
 function AnnotationContentComponent({
   api,
   editorView,
@@ -137,14 +152,9 @@ function AnnotationContentComponent({
 }) {
   var _api$analytics5;
   const {
+    isVisible,
     annotationState
-  } = useSharedPluginState(api, ['annotation'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-  const isVisibleSelector = useSharedPluginStateSelector(api, 'annotation.isVisible', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isVisible = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isVisibleSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isVisible;
+  } = useAnnotationContentComponentPluginState(api);
   if (annotationState && !isVisible && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
     return null;
   }

package/dist/es2019/pm-plugins/annotation-manager-hooks.js

@@ -139,7 +139,9 @@ export const applyDraft = (editorView, options) => id => {
   return {
     success: true,
     // Get the dom element from the newly created annotation and return it here.
-    targetElement
+    targetElement,
+    // In Editor this is undefined, because the editor will update the document.
+    actionResult: undefined
   };
 };
 export const getDraft = (editorView, options) => () => {

package/dist/es2019/ui/InlineCommentView.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, CONTENT_COMPONENT, EVENT_TYPE, RESOLVE_METHOD } from '@atlaskit/editor-common/analytics';
+import { sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { getAnnotationInlineNodeTypes, getRangeInlineNodeNames } from '@atlaskit/editor-common/utils';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
@@ -26,6 +27,42 @@ const findPosForDOM = sel => {
   }
   return from;
 };
+const useInlineCommentViewPluginState = sharedPluginStateHookMigratorFactory(({
+  api
+}) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const bookmark = useSharedPluginStateSelector(api, 'annotation.bookmark');
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const selectedAnnotations = useSharedPluginStateSelector(api, 'annotation.selectedAnnotations');
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const annotations = useSharedPluginStateSelector(api, 'annotation.annotations');
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const isInlineCommentViewClosed = useSharedPluginStateSelector(api, 'annotation.isInlineCommentViewClosed');
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const isOpeningMediaCommentFromToolbar = useSharedPluginStateSelector(api, 'annotation.isOpeningMediaCommentFromToolbar');
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const selectAnnotationMethod = useSharedPluginStateSelector(api, 'annotation.selectAnnotationMethod');
+  return {
+    bookmark,
+    selectedAnnotations,
+    annotations,
+    isInlineCommentViewClosed,
+    isOpeningMediaCommentFromToolbar,
+    selectAnnotationMethod
+  };
+}, ({
+  state
+}) => {
+  const inlineCommentState = getPluginState(state);
+  return {
+    bookmark: inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.bookmark,
+    selectedAnnotations: inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.selectedAnnotations,
+    annotations: inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.annotations,
+    isInlineCommentViewClosed: inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.isInlineCommentViewClosed,
+    isOpeningMediaCommentFromToolbar: inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.isOpeningMediaCommentFromToolbar,
+    selectAnnotationMethod: inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.selectAnnotationMethod
+  };
+});
 export function InlineCommentView({
   providers,
   editorView,
@@ -45,41 +82,21 @@ export function InlineCommentView({
     createComponent: CreateComponent,
     viewComponent: ViewComponent
   } = inlineCommentProvider;
-  const inlineCommentState = getPluginState(state);
-
-  // bookmark
-  const bookmarkSelector = useSharedPluginStateSelector(editorAPI, 'annotation.bookmark', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const bookmark = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? bookmarkSelector : inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.bookmark;
-
-  // selectedAnnotations
-  const selectedAnnotationsSelector = useSharedPluginStateSelector(editorAPI, 'annotation.selectedAnnotations', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const selectedAnnotations = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectedAnnotationsSelector : inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.selectedAnnotations;
-
-  // annotations
-  const annotationsSelector = useSharedPluginStateSelector(editorAPI, 'annotation.annotations', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const annotations = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? annotationsSelector : inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.annotations;
-
-  // isInlineCommentViewClosed
-  const isInlineCommentViewClosedSelector = useSharedPluginStateSelector(editorAPI, 'annotation.isInlineCommentViewClosed', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isInlineCommentViewClosed = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isInlineCommentViewClosedSelector : inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.isInlineCommentViewClosed;
-
-  // isOpeningMediaCommentFromToolbar
-  const isOpeningMediaCommentFromToolbarSelector = useSharedPluginStateSelector(editorAPI, 'annotation.isOpeningMediaCommentFromToolbar', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  const {
+    annotations,
+    bookmark,
+    isInlineCommentViewClosed,
+    isOpeningMediaCommentFromToolbar,
+    selectAnnotationMethod,
+    selectedAnnotations
+  } = useInlineCommentViewPluginState({
+    api: editorAPI,
+    state
   });
-  const isOpeningMediaCommentFromToolbar = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isOpeningMediaCommentFromToolbarSelector : inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.isOpeningMediaCommentFromToolbar;
   const annotationsList = getAllAnnotations(editorView.state.doc);
-  const selection = getSelectionPositions(state, editorExperiment('platform_editor_usesharedpluginstateselector', true) ? {
+  const selection = getSelectionPositions(state, {
     bookmark
-  } : inlineCommentState);
+  });
   const position = findPosForDOM(selection);
   let dom;
   try {
@@ -106,9 +123,9 @@ export function InlineCommentView({
     }
   }
 
-  // selectAnnotationMethod
-  const selectAnnotationMethodSelector = useSharedPluginStateSelector(editorAPI, 'annotation.selectAnnotationMethod', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  // Network Status
+  const networkStatusSelector = useSharedPluginStateSelector(editorAPI, 'connectivity.mode', {
+    disabled: editorExperiment('platform_editor_offline_editing_web', false)
   });
   if (!dom) {
     return null;
@@ -148,7 +165,8 @@ export function InlineCommentView({
         }
       },
       inlineNodeTypes: inlineNodeTypes,
-      isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar
+      isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar,
+      isOffline: networkStatusSelector === 'offline'
     }));
   }
 
@@ -172,7 +190,7 @@ export function InlineCommentView({
       attributes: {
         overlap: activeAnnotations.length ? activeAnnotations.length - 1 : 0,
         targetNodeType: (_editorView$state$doc = editorView.state.doc.nodeAt(position)) === null || _editorView$state$doc === void 0 ? void 0 : _editorView$state$doc.type.name,
-        method: editorExperiment('platform_editor_tables_table_selector', true) ? selectAnnotationMethodSelector : inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.selectAnnotationMethod
+        method: selectAnnotationMethod
       }
     };
     dispatchAnalyticsEvent(payload);
@@ -202,6 +220,7 @@ export function InlineCommentView({
     onClose: () => {
       closeComponent()(editorView.state, editorView.dispatch);
     },
-    isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar
+    isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar,
+    isOffline: networkStatusSelector === 'offline'
   }));
 }

package/dist/esm/annotationPlugin.js

@@ -2,7 +2,7 @@ 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 React from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -129,20 +129,29 @@ export var annotationPlugin = function annotationPlugin(_ref) {
     }
   };
 };
+var useAnnotationContentComponentPluginState = sharedPluginStateHookMigratorFactory(function (api) {
+  var isVisible = useSharedPluginStateSelector(api, 'annotation.isVisible');
+  return {
+    isVisible: isVisible,
+    annotationState: undefined
+  };
+}, function (api) {
+  var _useSharedPluginState = useSharedPluginState(api, ['annotation']),
+    annotationState = _useSharedPluginState.annotationState;
+  return {
+    isVisible: annotationState === null || annotationState === void 0 ? void 0 : annotationState.isVisible,
+    annotationState: annotationState
+  };
+});
 function AnnotationContentComponent(_ref4) {
   var _api$analytics5;
   var api = _ref4.api,
     editorView = _ref4.editorView,
     annotationProviders = _ref4.annotationProviders,
     dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent;
-  var _useSharedPluginState = useSharedPluginState(api, ['annotation'], {
-      disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-    }),
-    annotationState = _useSharedPluginState.annotationState;
-  var isVisibleSelector = useSharedPluginStateSelector(api, 'annotation.isVisible', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isVisible = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isVisibleSelector : annotationState === null || annotationState === void 0 ? void 0 : annotationState.isVisible;
+  var _useAnnotationContent = useAnnotationContentComponentPluginState(api),
+    isVisible = _useAnnotationContent.isVisible,
+    annotationState = _useAnnotationContent.annotationState;
   if (annotationState && !isVisible && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
     return null;
   }

package/dist/esm/pm-plugins/annotation-manager-hooks.js

@@ -141,7 +141,9 @@ export var applyDraft = function applyDraft(editorView, options) {
     return {
       success: true,
       // Get the dom element from the newly created annotation and return it here.
-      targetElement: targetElement
+      targetElement: targetElement,
+      // In Editor this is undefined, because the editor will update the document.
+      actionResult: undefined
     };
   };
 };

package/dist/esm/ui/InlineCommentView.js

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, CONTENT_COMPONENT, EVENT_TYPE, RESOLVE_METHOD } from '@atlaskit/editor-common/analytics';
+import { sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { getAnnotationInlineNodeTypes, getRangeInlineNodeNames } from '@atlaskit/editor-common/utils';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
@@ -27,53 +28,66 @@ var findPosForDOM = function findPosForDOM(sel) {
   }
   return from;
 };
-export function InlineCommentView(_ref) {
-  var providers = _ref.providers,
-    editorView = _ref.editorView,
-    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
-    editorAPI = _ref.editorAPI,
-    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+var useInlineCommentViewPluginState = sharedPluginStateHookMigratorFactory(function (_ref) {
+  var api = _ref.api;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var bookmark = useSharedPluginStateSelector(api, 'annotation.bookmark');
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var selectedAnnotations = useSharedPluginStateSelector(api, 'annotation.selectedAnnotations');
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var annotations = useSharedPluginStateSelector(api, 'annotation.annotations');
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var isInlineCommentViewClosed = useSharedPluginStateSelector(api, 'annotation.isInlineCommentViewClosed');
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var isOpeningMediaCommentFromToolbar = useSharedPluginStateSelector(api, 'annotation.isOpeningMediaCommentFromToolbar');
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var selectAnnotationMethod = useSharedPluginStateSelector(api, 'annotation.selectAnnotationMethod');
+  return {
+    bookmark: bookmark,
+    selectedAnnotations: selectedAnnotations,
+    annotations: annotations,
+    isInlineCommentViewClosed: isInlineCommentViewClosed,
+    isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar,
+    selectAnnotationMethod: selectAnnotationMethod
+  };
+}, function (_ref2) {
+  var state = _ref2.state;
+  var inlineCommentState = getPluginState(state);
+  return {
+    bookmark: inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.bookmark,
+    selectedAnnotations: inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.selectedAnnotations,
+    annotations: inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.annotations,
+    isInlineCommentViewClosed: inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.isInlineCommentViewClosed,
+    isOpeningMediaCommentFromToolbar: inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.isOpeningMediaCommentFromToolbar,
+    selectAnnotationMethod: inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.selectAnnotationMethod
+  };
+});
+export function InlineCommentView(_ref3) {
+  var providers = _ref3.providers,
+    editorView = _ref3.editorView,
+    editorAnalyticsAPI = _ref3.editorAnalyticsAPI,
+    editorAPI = _ref3.editorAPI,
+    dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent;
   // As inlineComment is the only annotation present, this function is not generic
   var inlineCommentProvider = providers.inlineComment;
   var state = editorView.state,
     dispatch = editorView.dispatch;
   var CreateComponent = inlineCommentProvider.createComponent,
     ViewComponent = inlineCommentProvider.viewComponent;
-  var inlineCommentState = getPluginState(state);
-
-  // bookmark
-  var bookmarkSelector = useSharedPluginStateSelector(editorAPI, 'annotation.bookmark', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var bookmark = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? bookmarkSelector : inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.bookmark;
-
-  // selectedAnnotations
-  var selectedAnnotationsSelector = useSharedPluginStateSelector(editorAPI, 'annotation.selectedAnnotations', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var selectedAnnotations = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectedAnnotationsSelector : inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.selectedAnnotations;
-
-  // annotations
-  var annotationsSelector = useSharedPluginStateSelector(editorAPI, 'annotation.annotations', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var annotations = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? annotationsSelector : inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.annotations;
-
-  // isInlineCommentViewClosed
-  var isInlineCommentViewClosedSelector = useSharedPluginStateSelector(editorAPI, 'annotation.isInlineCommentViewClosed', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isInlineCommentViewClosed = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isInlineCommentViewClosedSelector : inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.isInlineCommentViewClosed;
-
-  // isOpeningMediaCommentFromToolbar
-  var isOpeningMediaCommentFromToolbarSelector = useSharedPluginStateSelector(editorAPI, 'annotation.isOpeningMediaCommentFromToolbar', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  var isOpeningMediaCommentFromToolbar = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isOpeningMediaCommentFromToolbarSelector : inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.isOpeningMediaCommentFromToolbar;
+  var _useInlineCommentView = useInlineCommentViewPluginState({
+      api: editorAPI,
+      state: state
+    }),
+    annotations = _useInlineCommentView.annotations,
+    bookmark = _useInlineCommentView.bookmark,
+    isInlineCommentViewClosed = _useInlineCommentView.isInlineCommentViewClosed,
+    isOpeningMediaCommentFromToolbar = _useInlineCommentView.isOpeningMediaCommentFromToolbar,
+    selectAnnotationMethod = _useInlineCommentView.selectAnnotationMethod,
+    selectedAnnotations = _useInlineCommentView.selectedAnnotations;
   var annotationsList = getAllAnnotations(editorView.state.doc);
-  var selection = getSelectionPositions(state, editorExperiment('platform_editor_usesharedpluginstateselector', true) ? {
+  var selection = getSelectionPositions(state, {
     bookmark: bookmark
-  } : inlineCommentState);
+  });
   var position = findPosForDOM(selection);
   var dom;
   try {
@@ -100,9 +114,9 @@ export function InlineCommentView(_ref) {
     }
   }
 
-  // selectAnnotationMethod
-  var selectAnnotationMethodSelector = useSharedPluginStateSelector(editorAPI, 'annotation.selectAnnotationMethod', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  // Network Status
+  var networkStatusSelector = useSharedPluginStateSelector(editorAPI, 'connectivity.mode', {
+    disabled: editorExperiment('platform_editor_offline_editing_web', false)
   });
   if (!dom) {
     return null;
@@ -142,7 +156,8 @@ export function InlineCommentView(_ref) {
         }
       },
       inlineNodeTypes: inlineNodeTypes,
-      isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar
+      isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar,
+      isOffline: networkStatusSelector === 'offline'
     }));
   }
 
@@ -168,7 +183,7 @@ export function InlineCommentView(_ref) {
       attributes: {
         overlap: activeAnnotations.length ? activeAnnotations.length - 1 : 0,
         targetNodeType: (_editorView$state$doc = editorView.state.doc.nodeAt(position)) === null || _editorView$state$doc === void 0 ? void 0 : _editorView$state$doc.type.name,
-        method: editorExperiment('platform_editor_tables_table_selector', true) ? selectAnnotationMethodSelector : inlineCommentState === null || inlineCommentState === void 0 ? void 0 : inlineCommentState.selectAnnotationMethod
+        method: selectAnnotationMethod
       }
     };
     dispatchAnalyticsEvent(payload);
@@ -202,6 +217,7 @@ export function InlineCommentView(_ref) {
     onClose: function onClose() {
       closeComponent()(editorView.state, editorView.dispatch);
     },
-    isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar
+    isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar,
+    isOffline: networkStatusSelector === 'offline'
   }));
 }

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

@@ -29,6 +29,10 @@ type AnnotationComponentProps = {
      * Indicates that a draft comment was discarded/cancelled
      */
     onClose?: () => void;
+    /**
+     * Indicates whether the comment UI is offline and should be disabled
+     */
+    isOffline?: boolean;
 };
 export type InlineCommentCreateComponentProps = AnnotationComponentProps & {
     /**

package/dist/types-ts4.5/types/index.d.ts

@@ -29,6 +29,10 @@ type AnnotationComponentProps = {
      * Indicates that a draft comment was discarded/cancelled
      */
     onClose?: () => void;
+    /**
+     * Indicates whether the comment UI is offline and should be disabled
+     */
+    isOffline?: boolean;
 };
 export type InlineCommentCreateComponentProps = AnnotationComponentProps & {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-annotation",
-	"version": "2.7.5",
+	"version": "2.8.0",
 	"description": "Annotation plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",