@atlaskit/editor-plugin-annotation 19.0.3 → 19.2.0

package/dist/es2019/editor-commands/index.js

@@ -58,12 +58,13 @@ export const setPendingSelectedAnnotation = id => createCommand({
     }]
   }
 });
-const removeInlineCommentFromNode = (id, supportedBlockNodes = [], state, dispatch) => {
+const removeInlineCommentFromNode = (id, supportedBlockNodes = [], isBlockNodeSupported, state, dispatch) => {
   const {
     tr,
     selection
   } = state;
-  if (selection instanceof NodeSelection && isSupportedBlockNode(selection.node, supportedBlockNodes)) {
+  const selectedNodeIsSupported = selection instanceof NodeSelection && (isSupportedBlockNode(selection.node, supportedBlockNodes, isBlockNodeSupported) || selection.node.type === state.schema.nodes.mediaSingle && !!selection.node.firstChild && isSupportedBlockNode(selection.node.firstChild, supportedBlockNodes, isBlockNodeSupported));
+  if (selectedNodeIsSupported) {
     const {
       $from
     } = selection;
@@ -93,14 +94,14 @@ const removeInlineCommentFromNode = (id, supportedBlockNodes = [], state, dispat
   }
   return false;
 };
-export const removeInlineCommentNearSelection = (id, supportedNodes = []) => (state, dispatch) => {
+export const removeInlineCommentNearSelection = (id, supportedNodes = [], isBlockNodeSupported) => (state, dispatch) => {
   const {
     tr,
     selection: {
       $from
     }
   } = state;
-  if (removeInlineCommentFromNode(id, supportedNodes, state, dispatch)) {
+  if (removeInlineCommentFromNode(id, supportedNodes, isBlockNodeSupported, state, dispatch)) {
     return true;
   }
   const {
@@ -121,7 +122,7 @@ export const removeInlineCommentNearSelection = (id, supportedNodes = []) => (st
   }
   return true;
 };
-export const removeInlineCommentFromDoc = editorAnalyticsAPI => (id, supportedNodes = []) => (state, dispatch) => {
+export const removeInlineCommentFromDoc = editorAnalyticsAPI => (id, supportedNodes = [], isBlockNodeSupported) => (state, dispatch) => {
   const {
     tr
   } = state;
@@ -131,9 +132,9 @@ export const removeInlineCommentFromDoc = editorAnalyticsAPI => (id, supportedNo
     if (node.type.name === 'mediaInline') {
       return false;
     }
-    const isSupportedBlockNode = node.isBlock && (supportedNodes === null || supportedNodes === void 0 ? void 0 : supportedNodes.includes(node.type.name));
+    const isSupportedBlock = node.isBlock && isSupportedBlockNode(node, supportedNodes, isBlockNodeSupported);
     node.marks.filter(mark => mark.type === state.schema.marks.annotation && mark.attrs.id === id).forEach(mark => {
-      if (isSupportedBlockNode) {
+      if (isSupportedBlock) {
         tr.removeNodeMark(pos, mark);
       } else {
         tr.removeMark(pos, pos + node.nodeSize, mark);
@@ -146,10 +147,10 @@ export const removeInlineCommentFromDoc = editorAnalyticsAPI => (id, supportedNo
   }
   return false;
 };
-const getDraftCommandAction = (drafting, targetType, targetNodeId, supportedBlockNodes, isOpeningMediaCommentFromToolbar) => {
+const getDraftCommandAction = (drafting, targetType, targetNodeId, supportedBlockNodes, isBlockNodeSupported, isOpeningMediaCommentFromToolbar) => {
   return editorState => {
     // validate selection only when entering draft mode
-    if (drafting && isSelectionValid(editorState) !== AnnotationSelectionType.VALID) {
+    if (drafting && isSelectionValid(editorState, supportedBlockNodes, isBlockNodeSupported) !== AnnotationSelectionType.VALID) {
       return false;
     }
     return {
@@ -159,6 +160,7 @@ const getDraftCommandAction = (drafting, targetType, targetNodeId, supportedBloc
         editorState,
         targetType,
         supportedBlockNodes,
+        isBlockNodeSupported,
         targetNodeId,
         isOpeningMediaCommentFromToolbar
       }
@@ -172,12 +174,12 @@ const getDraftCommandAction = (drafting, targetType, targetNodeId, supportedBloc
  * @param supportedBlockNodes
  * @example
  */
-export const showInlineCommentForBlockNode = (supportedBlockNodes = []) => (node, viewMethod, isOpeningMediaCommentFromToolbar) => (state, dispatch) => {
+export const showInlineCommentForBlockNode = (supportedBlockNodes = [], isBlockNodeSupported) => (node, viewMethod, isOpeningMediaCommentFromToolbar) => (state, dispatch) => {
   const pluginState = getPluginState(state);
   const {
     annotation
   } = state.schema.marks;
-  if (node && node.isBlock && supportedBlockNodes.includes(node.type.name)) {
+  if (node && node.isBlock && isSupportedBlockNode(node, supportedBlockNodes, isBlockNodeSupported)) {
     const unresolvedAnnotationMarks = ((node === null || node === void 0 ? void 0 : node.marks) || []).filter(mark => mark.type === annotation && !(pluginState !== null && pluginState !== void 0 && pluginState.annotations[mark.attrs.id])).map(mark => ({
       id: mark.attrs.id,
       type: mark.attrs.annotationType
@@ -201,8 +203,8 @@ export const showInlineCommentForBlockNode = (supportedBlockNodes = []) => (node
   }
   return false;
 };
-export const setInlineCommentDraftState = (editorAnalyticsAPI, supportedBlockNodes = [], api) => (drafting, inputMethod = INPUT_METHOD.TOOLBAR, targetType = 'inline', targetNodeId = undefined, isOpeningMediaCommentFromToolbar) => {
-  const commandAction = getDraftCommandAction(drafting, targetType, targetNodeId, supportedBlockNodes, isOpeningMediaCommentFromToolbar);
+export const setInlineCommentDraftState = (editorAnalyticsAPI, supportedBlockNodes = [], api, isBlockNodeSupported) => (drafting, inputMethod = INPUT_METHOD.TOOLBAR, targetType = 'inline', targetNodeId = undefined, isOpeningMediaCommentFromToolbar) => {
+  const commandAction = getDraftCommandAction(drafting, targetType, targetNodeId, supportedBlockNodes, isBlockNodeSupported, isOpeningMediaCommentFromToolbar);
   if (Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) {
     return (state, dispatch) => {
       const tr = transform.handleDraftState(editorAnalyticsAPI)(drafting, inputMethod)(state.tr, state);
@@ -226,7 +228,7 @@ export const setInlineCommentDraftState = (editorAnalyticsAPI, supportedBlockNod
     return createCommand(commandAction, transform.handleDraftState(editorAnalyticsAPI)(drafting, inputMethod));
   }
 };
-export const addInlineComment = (editorAnalyticsAPI, editorAPI) => (id, supportedBlockNodes) => {
+export const addInlineComment = (editorAnalyticsAPI, editorAPI) => (id, supportedBlockNodes, isBlockNodeSupported) => {
   const commandAction = editorState => ({
     type: ACTIONS.ADD_INLINE_COMMENT,
     data: {
@@ -245,7 +247,7 @@ export const addInlineComment = (editorAnalyticsAPI, editorAPI) => (id, supporte
   });
   if (Boolean(editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.toolbar)) {
     return (state, dispatch) => {
-      const tr = transform.addInlineComment(editorAnalyticsAPI, editorAPI)(id, supportedBlockNodes)(state.tr, state);
+      const tr = transform.addInlineComment(editorAnalyticsAPI, editorAPI)(id, supportedBlockNodes, isBlockNodeSupported)(state.tr, state);
       tr.setMeta(inlineCommentPluginKey, commandAction(state));
       resetUserIntent(editorAPI, tr);
       if (dispatch) {
@@ -255,7 +257,7 @@ export const addInlineComment = (editorAnalyticsAPI, editorAPI) => (id, supporte
       return false;
     };
   } else {
-    return createCommand(commandAction, transform.addInlineComment(editorAnalyticsAPI, editorAPI)(id, supportedBlockNodes));
+    return createCommand(commandAction, transform.addInlineComment(editorAnalyticsAPI, editorAPI)(id, supportedBlockNodes, isBlockNodeSupported));
   }
 };
 export const updateMouseState = mouseData => createCommand({
@@ -282,7 +284,7 @@ export const setHoveredAnnotation = id => createCommand({
     }]
   }
 });
-export const createAnnotation = (editorAnalyticsAPI, editorAPI) => (id, annotationType = AnnotationTypes.INLINE_COMMENT, supportedBlockNodes) => (state, dispatch) => {
+export const createAnnotation = (editorAnalyticsAPI, editorAPI) => (id, annotationType = AnnotationTypes.INLINE_COMMENT, supportedBlockNodes, isBlockNodeSupported) => (state, dispatch) => {
   // don't try to add if there are is no temp highlight bookmarked
   const {
     bookmark
@@ -291,7 +293,7 @@ export const createAnnotation = (editorAnalyticsAPI, editorAPI) => (id, annotati
     return false;
   }
   if (annotationType === AnnotationTypes.INLINE_COMMENT) {
-    return addInlineComment(editorAnalyticsAPI, editorAPI)(id, supportedBlockNodes)(state, dispatch);
+    return addInlineComment(editorAnalyticsAPI, editorAPI)(id, supportedBlockNodes, isBlockNodeSupported)(state, dispatch);
   }
   return false;
 };

package/dist/es2019/editor-commands/transform.js

@@ -7,7 +7,7 @@ import { AddMarkStep } from '@atlaskit/editor-prosemirror/transform';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { getDraftCommandAnalyticsPayload, getPluginState, resolveDraftBookmark } from '../pm-plugins/utils';
 const isAnnotationStep = step => step instanceof AddMarkStep && step.mark.type.name === 'annotation';
-const addAnnotationMark = (id, supportedBlockNodes) => (transaction, state) => {
+const addAnnotationMark = (id, supportedBlockNodes, isBlockNodeSupported) => (transaction, state) => {
   const inlineCommentState = getPluginState(state);
   const {
     bookmark
@@ -21,7 +21,7 @@ const addAnnotationMark = (id, supportedBlockNodes) => (transaction, state) => {
     to,
     head,
     isBlockNode
-  } = resolveDraftBookmark(state, bookmark, supportedBlockNodes);
+  } = resolveDraftBookmark(state, bookmark, supportedBlockNodes, isBlockNodeSupported);
   let tr = transaction;
   if (isBlockNode) {
     tr = tr.addNodeMark(from, annotationMark);
@@ -39,9 +39,9 @@ const addAnnotationMark = (id, supportedBlockNodes) => (transaction, state) => {
   }
   return tr;
 };
-const addInlineComment = (editorAnalyticsAPI, editorAPI) => (id, supportedBlockNodes) => (transaction, state) => {
+const addInlineComment = (editorAnalyticsAPI, editorAPI) => (id, supportedBlockNodes, isBlockNodeSupported) => (transaction, state) => {
   var _editorAPI$editorView, _pluginState$featureF;
-  let tr = addAnnotationMark(id, supportedBlockNodes)(transaction, state);
+  let tr = addAnnotationMark(id, supportedBlockNodes, isBlockNodeSupported)(transaction, state);
   editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$editorView = editorAPI.editorViewModeEffects) === null || _editorAPI$editorView === void 0 ? void 0 : _editorAPI$editorView.actions.applyViewModeStepAt(tr);
 
   // add insert analytics step to transaction

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

@@ -22,7 +22,7 @@ const domRefFromPos = (view, position) => {
   }
   return dom;
 };
-export const allowAnnotation = (editorView, _options) => () => {
+export const allowAnnotation = (editorView, options) => () => {
   const {
     isDrafting,
     draftDecorationSet
@@ -36,7 +36,7 @@ export const allowAnnotation = (editorView, _options) => () => {
   if (!!(decoration !== null && decoration !== void 0 && decoration.length)) {
     return false;
   }
-  return isSelectionValid(editorView.state) === AnnotationSelectionType.VALID;
+  return isSelectionValid(editorView.state, options.provider.supportedBlockNodes, options.provider.isBlockNodeSupported) === AnnotationSelectionType.VALID;
 };
 export const startDraft = (editorView, options) => () => {
   var _getRangeInlineNodeNa, _options$annotationMa2;
@@ -68,7 +68,7 @@ export const startDraft = (editorView, options) => () => {
       });
     });
   }
-  setInlineCommentDraftState(options.editorAnalyticsAPI, undefined, options.api)(true)(editorView.state, editorView.dispatch);
+  setInlineCommentDraftState(options.editorAnalyticsAPI, options.provider.supportedBlockNodes, options.api, options.provider.isBlockNodeSupported)(true)(editorView.state, editorView.dispatch);
   const {
     draftDecorationSet
   } = inlineCommentPluginKey.getState(editorView.state) || {};
@@ -151,7 +151,7 @@ export const applyDraft = (editorView, options) => id => {
     };
   }
   const from = decorations[0].from;
-  createAnnotation(options.editorAnalyticsAPI, options.api)(id, AnnotationTypes.INLINE_COMMENT, options.provider.supportedBlockNodes)(editorView.state, editorView.dispatch);
+  createAnnotation(options.editorAnalyticsAPI, options.api)(id, AnnotationTypes.INLINE_COMMENT, options.provider.supportedBlockNodes, options.provider.isBlockNodeSupported)(editorView.state, editorView.dispatch);
   !editorView.hasFocus() && editorView.focus();
 
   // Using the original decoration from position we should be able to locate the new target element.
@@ -327,7 +327,7 @@ export const clearAnnotation = (editorView, options) => id => {
       reason: ERROR_REASON_ID_INVALID
     };
   }
-  removeInlineCommentFromDoc(options.editorAnalyticsAPI)(id, options.provider.supportedBlockNodes)(editorView.state, editorView.dispatch);
+  removeInlineCommentFromDoc(options.editorAnalyticsAPI)(id, options.provider.supportedBlockNodes, options.provider.isBlockNodeSupported)(editorView.state, editorView.dispatch);
   return {
     success: true,
     actionResult: undefined

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

@@ -10,7 +10,7 @@ import { getAnnotationViewClassname, getBlockAnnotationViewClassname } from '../
 import { allowAnnotation, applyDraft, clearDraft, clearAnnotation, getDraft, setIsAnnotationHovered, setIsAnnotationSelected, startDraft } from './annotation-manager-hooks';
 import { createPluginState } from './plugin-factory';
 import { shouldSuppressFloatingToolbar } from './toolbar';
-import { decorationKey, getAllAnnotations, getPluginState, inlineCommentPluginKey } from './utils';
+import { decorationKey, getAllAnnotations, getPluginState, inlineCommentPluginKey, isSupportedBlockNode } from './utils';
 const fetchProviderStates = async (provider, annotationIds) => {
   if (!provider || !provider.getState) {
     return {};
@@ -409,19 +409,18 @@ export const inlineCommentPlugin = options => {
         // everytime we need to update the decorations. This handler will be called alot. We should be caching
         // the decorations in plugin state and only updating them when required.
         state.doc.descendants((node, pos) => {
-          var _provider$supportedBl;
           // Inline comment on mediaInline is not supported as part of comments on media project
           // Thus, we skip the decoration for mediaInline node
           if (node.type.name === 'mediaInline') {
             return false;
           }
-          const isSupportedBlockNode = node.isBlock && ((_provider$supportedBl = provider.supportedBlockNodes) === null || _provider$supportedBl === void 0 ? void 0 : _provider$supportedBl.includes(node.type.name));
+          const isSupportedBlock = node.isBlock && isSupportedBlockNode(node, provider.supportedBlockNodes, provider.isBlockNodeSupported);
           node.marks.filter(mark => mark.type === state.schema.marks.annotation).forEach(mark => {
             if (isVisible) {
               const isUnresolved = !!annotations && annotations[mark.attrs.id] === false;
               const isSelected = !isInlineCommentViewClosed && !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(selectedAnnotation => selectedAnnotation.id === mark.attrs.id));
               const isHovered = !isInlineCommentViewClosed && !!(hoveredAnnotations !== null && hoveredAnnotations !== void 0 && hoveredAnnotations.some(hoveredAnnotation => hoveredAnnotation.id === mark.attrs.id));
-              if (isSupportedBlockNode) {
+              if (isSupportedBlock) {
                 focusDecorations.push(Decoration.node(pos, pos + node.nodeSize, {
                   class: `${getBlockAnnotationViewClassname(isUnresolved, isSelected)} ${isUnresolved}`
                 }, {

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

@@ -24,7 +24,7 @@ export default ((pluginState, action) => {
         mouseData
       };
     case ACTIONS.SET_INLINE_COMMENT_DRAFT_STATE:
-      return getNewDraftState(pluginState, action.data.drafting, action.data.editorState, action.data.targetType, action.data.supportedBlockNodes, action.data.targetNodeId, action.data.isOpeningMediaCommentFromToolbar);
+      return getNewDraftState(pluginState, action.data.drafting, action.data.editorState, action.data.targetType, action.data.supportedBlockNodes, action.data.isBlockNodeSupported, action.data.targetNodeId, action.data.isOpeningMediaCommentFromToolbar);
     case ACTIONS.INLINE_COMMENT_CLEAR_DIRTY_MARK:
       return {
         ...pluginState,
@@ -100,7 +100,7 @@ export default ((pluginState, action) => {
       return pluginState;
   }
 });
-function getNewDraftState(pluginState, drafting, editorState, targetType, supportedBlockNodes, targetNodeId, isOpeningMediaCommentFromToolbar) {
+function getNewDraftState(pluginState, drafting, editorState, targetType, supportedBlockNodes, isBlockNodeSupported, targetNodeId, isOpeningMediaCommentFromToolbar) {
   let {
     draftDecorationSet
   } = pluginState;
@@ -119,7 +119,7 @@ function getNewDraftState(pluginState, drafting, editorState, targetType, suppor
     const {
       from,
       to
-    } = resolveDraftBookmark(editorState, newState.bookmark, supportedBlockNodes);
+    } = resolveDraftBookmark(editorState, newState.bookmark, supportedBlockNodes, isBlockNodeSupported);
     const draftDecoration = addDraftDecoration(from, to, targetType);
     newState.draftDecorationSet = draftDecorationSet.add(editorState.doc, [draftDecoration]);
   }

package/dist/es2019/pm-plugins/utils.js

@@ -159,7 +159,7 @@ export const findAnnotationsInSelection = (selection, doc) => {
   reorderAnnotations(annotations, $anchor);
   return annotations;
 };
-export const resolveDraftBookmark = (editorState, bookmark, supportedBlockNodes = []) => {
+export const resolveDraftBookmark = (editorState, bookmark, supportedBlockNodes = [], isBlockNodeSupported) => {
   const {
     doc
   } = editorState;
@@ -185,7 +185,8 @@ export const resolveDraftBookmark = (editorState, bookmark, supportedBlockNodes
         return false;
       }
       const nodeEndsAt = pos + node.nodeSize;
-      if (supportedBlockNodes.includes(node.type.name)) {
+      const isLegacyMediaSingleWrapper = node.type.name === 'mediaSingle' && supportedBlockNodes.includes('media') && !supportedBlockNodes.includes('mediaSingle');
+      if (isSupportedBlockNode(node, supportedBlockNodes, isBlockNodeSupported) && !isLegacyMediaSingleWrapper) {
         draftBookmark = {
           from: pos,
           to: nodeEndsAt,
@@ -262,7 +263,7 @@ export const getDraftCommandAnalyticsPayload = (drafting, inputMethod) => {
   };
   return payload;
 };
-export const isSelectionValid = (state, _supportedNodes = []) => {
+export const isSelectionValid = (state, supportedBlockNodes = [], isBlockNodeSupported) => {
   var _currentMediaNodeWith;
   const {
     selection
@@ -273,7 +274,8 @@ export const isSelectionValid = (state, _supportedNodes = []) => {
   const allowedInlineNodes = ['emoji', 'status', 'date', 'mention', 'inlineCard'];
   const isSelectionEmpty = selection.empty;
   const isTextOrAllSelection = selection instanceof TextSelection || selection instanceof AllSelection;
-  const isValidNodeSelection = selection instanceof NodeSelection && allowedInlineNodes.includes(selection.node.type.name);
+  const isSupportedBlockNodeSelection = selection instanceof NodeSelection && isSupportedBlockNode(selection.node, supportedBlockNodes, isBlockNodeSupported);
+  const isValidNodeSelection = selection instanceof NodeSelection && (allowedInlineNodes.includes(selection.node.type.name) || isSupportedBlockNodeSelection);
   const isValidSelection = isTextOrAllSelection || isValidNodeSelection;
 
   // Allow media so that it can enter draft mode
@@ -283,7 +285,7 @@ export const isSelectionValid = (state, _supportedNodes = []) => {
   if (isSelectionEmpty || !isValidSelection) {
     return AnnotationSelectionType.INVALID;
   }
-  const containsInvalidNodes = hasInvalidNodes(state);
+  const containsInvalidNodes = !isSupportedBlockNodeSelection && hasInvalidNodes(state);
 
   // A selection that only covers 1 pos, and is an invalid node
   // e.g. a text selection over a mention
@@ -312,8 +314,8 @@ export const hasInvalidNodes = state => {
     to: selection.to
   }, doc, schema);
 };
-export const isSupportedBlockNode = (node, supportedBlockNodes = []) => {
-  return supportedBlockNodes.indexOf(node.type.name) >= 0 || node.type.name === 'mediaSingle' && supportedBlockNodes.indexOf('media') >= 0;
+export const isSupportedBlockNode = (node, supportedBlockNodes = [], isBlockNodeSupported) => {
+  return supportedBlockNodes.indexOf(node.type.name) >= 0 || node.type.name === 'mediaSingle' && supportedBlockNodes.indexOf('media') >= 0 || fg('cc_maui_annotations_on_extensions') && (isBlockNodeSupported === null || isBlockNodeSupported === void 0 ? void 0 : isBlockNodeSupported(node)) === true;
 };
 
 /**

package/dist/es2019/ui/InlineCommentView.js

@@ -122,7 +122,7 @@ export function InlineCommentView({
       ,
       onCreate: id => {
         if (!isAnnotationManagerEnabled) {
-          const createAnnotationResult = createAnnotation(editorAnalyticsAPI, editorAPI)(id, AnnotationTypes.INLINE_COMMENT, inlineCommentProvider.supportedBlockNodes)(editorView.state, editorView.dispatch);
+          const createAnnotationResult = createAnnotation(editorAnalyticsAPI, editorAPI)(id, AnnotationTypes.INLINE_COMMENT, inlineCommentProvider.supportedBlockNodes, inlineCommentProvider.isBlockNodeSupported)(editorView.state, editorView.dispatch);
           !editorView.hasFocus() && editorView.focus();
           if (!createAnnotationResult) {
             throw new Error('Failed to create annotation');
@@ -134,7 +134,7 @@ export function InlineCommentView({
       onCreateError: id =>
       // This is called when optimistic create inline comment encounters an error,
       // in which case the optimistically added annotation must be removed.
-      removeInlineCommentNearSelection(id, inlineCommentProvider.supportedBlockNodes)(editorView.state, editorView.dispatch)
+      removeInlineCommentNearSelection(id, inlineCommentProvider.supportedBlockNodes, inlineCommentProvider.isBlockNodeSupported)(editorView.state, editorView.dispatch)
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       ,
       onClose: () => {
@@ -196,7 +196,7 @@ export function InlineCommentView({
     dom: dom
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
-    onDelete: id => removeInlineCommentNearSelection(id, inlineCommentProvider.supportedBlockNodes)(editorView.state, dispatch)
+    onDelete: id => removeInlineCommentNearSelection(id, inlineCommentProvider.supportedBlockNodes, inlineCommentProvider.isBlockNodeSupported)(editorView.state, dispatch)
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     onResolve: id => updateInlineCommentResolvedState(editorAnalyticsAPI)({

package/dist/esm/annotationPlugin.js

@@ -4,10 +4,11 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
+import { AnnotationTypes } from '@atlaskit/adf-schema/annotation';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
-import { setInlineCommentDraftState, setSelectedAnnotation, setPendingSelectedAnnotation, showInlineCommentForBlockNode } from './editor-commands';
+import { createAnnotation, removeInlineCommentFromDoc, setInlineCommentDraftState, setSelectedAnnotation, setPendingSelectedAnnotation, showInlineCommentForBlockNode } from './editor-commands';
 import { annotationWithToDOMFix } from './nodeviews/annotationMark';
 import { inlineCommentPlugin } from './pm-plugins/inline-comment';
 import { keymapPlugin } from './pm-plugins/keymap';
@@ -17,7 +18,7 @@ import { getPluginState, hasAnyUnResolvedAnnotationInPage, inlineCommentPluginKe
 import { InlineCommentView } from './ui/InlineCommentView';
 import { getToolbarComponents } from './ui/toolbar-components';
 export var annotationPlugin = function annotationPlugin(_ref) {
-  var _api$featureFlags, _api$analytics;
+  var _api$featureFlags, _api$analytics3;
   var annotationProviders = _ref.config,
     api = _ref.api;
   var featureFlags = api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState();
@@ -87,8 +88,16 @@ export var annotationPlugin = function annotationPlugin(_ref) {
       hasAnyUnResolvedAnnotationInPage: hasAnyUnResolvedAnnotationInPage,
       requestCloseInlineComment: requestCloseInlineComment,
       stripNonExistingAnnotations: stripNonExistingAnnotations,
-      setInlineCommentDraftState: setInlineCommentDraftState(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.supportedBlockNodes),
-      showCommentForBlockNode: showInlineCommentForBlockNode(annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.supportedBlockNodes),
+      applyInlineCommentDraft: function applyInlineCommentDraft(annotationId) {
+        var _api$analytics;
+        return createAnnotation(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api)(annotationId, AnnotationTypes.INLINE_COMMENT, annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.supportedBlockNodes);
+      },
+      removeInlineCommentAnnotation: function removeInlineCommentAnnotation(annotationId) {
+        var _api$analytics2, _annotationProviders$;
+        return removeInlineCommentFromDoc(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)(annotationId, (_annotationProviders$ = annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.supportedBlockNodes) !== null && _annotationProviders$ !== void 0 ? _annotationProviders$ : []);
+      },
+      setInlineCommentDraftState: setInlineCommentDraftState(api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.supportedBlockNodes, undefined, annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.isBlockNodeSupported),
+      showCommentForBlockNode: showInlineCommentForBlockNode(annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.supportedBlockNodes, annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.isBlockNodeSupported),
       setSelectedAnnotation: setSelectedAnnotation,
       setPendingSelectedAnnotation: setPendingSelectedAnnotation
     },
@@ -107,11 +116,11 @@ export var annotationPlugin = function annotationPlugin(_ref) {
         plugin: function plugin(_ref4) {
           var dispatch = _ref4.dispatch;
           if (annotationProviders) {
-            var _api$analytics2;
+            var _api$analytics4;
             return inlineCommentPlugin({
               dispatch: dispatch,
               provider: annotationProviders.inlineComment,
-              editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
+              editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
               featureFlagsPluginState: featureFlags,
               selectCommentExperience: annotationProviders.selectCommentExperience,
               viewInlineCommentTraceUFOPress: annotationProviders.viewInlineCommentTraceUFOPress,
@@ -151,13 +160,13 @@ export var annotationPlugin = function annotationPlugin(_ref) {
         }
         var pluginState = getPluginState(state);
         if (pluginState && pluginState.isVisible && !pluginState.bookmark && !pluginState.mouseData.isSelecting) {
-          var _api$analytics3;
-          var _annotationProviders$ = annotationProviders.inlineComment,
-            isToolbarAbove = _annotationProviders$.isToolbarAbove,
-            onCommentButtonMount = _annotationProviders$.onCommentButtonMount,
-            getCanAddComments = _annotationProviders$.getCanAddComments,
-            contentType = _annotationProviders$.contentType;
-          var toolbarConfig = buildToolbar(api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions)({
+          var _api$analytics5;
+          var _annotationProviders$2 = annotationProviders.inlineComment,
+            isToolbarAbove = _annotationProviders$2.isToolbarAbove,
+            onCommentButtonMount = _annotationProviders$2.onCommentButtonMount,
+            getCanAddComments = _annotationProviders$2.getCanAddComments,
+            contentType = _annotationProviders$2.contentType;
+          var toolbarConfig = buildToolbar(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions)({
             state: state,
             intl: intl,
             isToolbarAbove: isToolbarAbove,
@@ -202,7 +211,7 @@ var selector = function selector(states) {
   };
 };
 function AnnotationContentComponent(_ref6) {
-  var _api$analytics4;
+  var _api$analytics6;
   var api = _ref6.api,
     editorView = _ref6.editorView,
     annotationProviders = _ref6.annotationProviders,
@@ -219,7 +228,7 @@ function AnnotationContentComponent(_ref6) {
     providers: annotationProviders,
     editorView: editorView,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
+    editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions,
     editorAPI: api
   }));
 }

package/dist/esm/editor-commands/index.js

@@ -81,11 +81,13 @@ export var setPendingSelectedAnnotation = function setPendingSelectedAnnotation(
 };
 var removeInlineCommentFromNode = function removeInlineCommentFromNode(id) {
   var supportedBlockNodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  var state = arguments.length > 2 ? arguments[2] : undefined;
-  var dispatch = arguments.length > 3 ? arguments[3] : undefined;
+  var isBlockNodeSupported = arguments.length > 2 ? arguments[2] : undefined;
+  var state = arguments.length > 3 ? arguments[3] : undefined;
+  var dispatch = arguments.length > 4 ? arguments[4] : undefined;
   var tr = state.tr,
     selection = state.selection;
-  if (selection instanceof NodeSelection && isSupportedBlockNode(selection.node, supportedBlockNodes)) {
+  var selectedNodeIsSupported = selection instanceof NodeSelection && (isSupportedBlockNode(selection.node, supportedBlockNodes, isBlockNodeSupported) || selection.node.type === state.schema.nodes.mediaSingle && !!selection.node.firstChild && isSupportedBlockNode(selection.node.firstChild, supportedBlockNodes, isBlockNodeSupported));
+  if (selectedNodeIsSupported) {
     var $from = selection.$from;
     var currNode = selection.node;
     var from = $from.start();
@@ -115,10 +117,11 @@ var removeInlineCommentFromNode = function removeInlineCommentFromNode(id) {
 };
 export var removeInlineCommentNearSelection = function removeInlineCommentNearSelection(id) {
   var supportedNodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var isBlockNodeSupported = arguments.length > 2 ? arguments[2] : undefined;
   return function (state, dispatch) {
     var tr = state.tr,
       $from = state.selection.$from;
-    if (removeInlineCommentFromNode(id, supportedNodes, state, dispatch)) {
+    if (removeInlineCommentFromNode(id, supportedNodes, isBlockNodeSupported, state, dispatch)) {
       return true;
     }
     var annotationMarkType = state.schema.marks.annotation;
@@ -143,6 +146,7 @@ export var removeInlineCommentNearSelection = function removeInlineCommentNearSe
 export var removeInlineCommentFromDoc = function removeInlineCommentFromDoc(editorAnalyticsAPI) {
   return function (id) {
     var supportedNodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    var isBlockNodeSupported = arguments.length > 2 ? arguments[2] : undefined;
     return function (state, dispatch) {
       var tr = state.tr;
       state.doc.descendants(function (node, pos) {
@@ -151,11 +155,11 @@ export var removeInlineCommentFromDoc = function removeInlineCommentFromDoc(edit
         if (node.type.name === 'mediaInline') {
           return false;
         }
-        var isSupportedBlockNode = node.isBlock && (supportedNodes === null || supportedNodes === void 0 ? void 0 : supportedNodes.includes(node.type.name));
+        var isSupportedBlock = node.isBlock && isSupportedBlockNode(node, supportedNodes, isBlockNodeSupported);
         node.marks.filter(function (mark) {
           return mark.type === state.schema.marks.annotation && mark.attrs.id === id;
         }).forEach(function (mark) {
-          if (isSupportedBlockNode) {
+          if (isSupportedBlock) {
             tr.removeNodeMark(pos, mark);
           } else {
             tr.removeMark(pos, pos + node.nodeSize, mark);
@@ -170,10 +174,10 @@ export var removeInlineCommentFromDoc = function removeInlineCommentFromDoc(edit
     };
   };
 };
-var getDraftCommandAction = function getDraftCommandAction(drafting, targetType, targetNodeId, supportedBlockNodes, isOpeningMediaCommentFromToolbar) {
+var getDraftCommandAction = function getDraftCommandAction(drafting, targetType, targetNodeId, supportedBlockNodes, isBlockNodeSupported, isOpeningMediaCommentFromToolbar) {
   return function (editorState) {
     // validate selection only when entering draft mode
-    if (drafting && isSelectionValid(editorState) !== AnnotationSelectionType.VALID) {
+    if (drafting && isSelectionValid(editorState, supportedBlockNodes, isBlockNodeSupported) !== AnnotationSelectionType.VALID) {
       return false;
     }
     return {
@@ -183,6 +187,7 @@ var getDraftCommandAction = function getDraftCommandAction(drafting, targetType,
         editorState: editorState,
         targetType: targetType,
         supportedBlockNodes: supportedBlockNodes,
+        isBlockNodeSupported: isBlockNodeSupported,
         targetNodeId: targetNodeId,
         isOpeningMediaCommentFromToolbar: isOpeningMediaCommentFromToolbar
       }
@@ -198,11 +203,12 @@ var getDraftCommandAction = function getDraftCommandAction(drafting, targetType,
  */
 export var showInlineCommentForBlockNode = function showInlineCommentForBlockNode() {
   var supportedBlockNodes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var isBlockNodeSupported = arguments.length > 1 ? arguments[1] : undefined;
   return function (node, viewMethod, isOpeningMediaCommentFromToolbar) {
     return function (state, dispatch) {
       var pluginState = getPluginState(state);
       var annotation = state.schema.marks.annotation;
-      if (node && node.isBlock && supportedBlockNodes.includes(node.type.name)) {
+      if (node && node.isBlock && isSupportedBlockNode(node, supportedBlockNodes, isBlockNodeSupported)) {
         var unresolvedAnnotationMarks = ((node === null || node === void 0 ? void 0 : node.marks) || []).filter(function (mark) {
           return mark.type === annotation && !(pluginState !== null && pluginState !== void 0 && pluginState.annotations[mark.attrs.id]);
         }).map(function (mark) {
@@ -235,12 +241,13 @@ export var showInlineCommentForBlockNode = function showInlineCommentForBlockNod
 export var setInlineCommentDraftState = function setInlineCommentDraftState(editorAnalyticsAPI) {
   var supportedBlockNodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var api = arguments.length > 2 ? arguments[2] : undefined;
+  var isBlockNodeSupported = arguments.length > 3 ? arguments[3] : undefined;
   return function (drafting) {
     var inputMethod = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INPUT_METHOD.TOOLBAR;
     var targetType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'inline';
     var targetNodeId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
     var isOpeningMediaCommentFromToolbar = arguments.length > 4 ? arguments[4] : undefined;
-    var commandAction = getDraftCommandAction(drafting, targetType, targetNodeId, supportedBlockNodes, isOpeningMediaCommentFromToolbar);
+    var commandAction = getDraftCommandAction(drafting, targetType, targetNodeId, supportedBlockNodes, isBlockNodeSupported, isOpeningMediaCommentFromToolbar);
     if (Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) {
       return function (state, dispatch) {
         var tr = transform.handleDraftState(editorAnalyticsAPI)(drafting, inputMethod)(state.tr, state);
@@ -266,7 +273,7 @@ export var setInlineCommentDraftState = function setInlineCommentDraftState(edit
   };
 };
 export var addInlineComment = function addInlineComment(editorAnalyticsAPI, editorAPI) {
-  return function (id, supportedBlockNodes) {
+  return function (id, supportedBlockNodes, isBlockNodeSupported) {
     var commandAction = function commandAction(editorState) {
       return {
         type: ACTIONS.ADD_INLINE_COMMENT,
@@ -285,7 +292,7 @@ export var addInlineComment = function addInlineComment(editorAnalyticsAPI, edit
     };
     if (Boolean(editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.toolbar)) {
       return function (state, dispatch) {
-        var tr = transform.addInlineComment(editorAnalyticsAPI, editorAPI)(id, supportedBlockNodes)(state.tr, state);
+        var tr = transform.addInlineComment(editorAnalyticsAPI, editorAPI)(id, supportedBlockNodes, isBlockNodeSupported)(state.tr, state);
         tr.setMeta(inlineCommentPluginKey, commandAction(state));
         resetUserIntent(editorAPI, tr);
         if (dispatch) {
@@ -295,7 +302,7 @@ export var addInlineComment = function addInlineComment(editorAnalyticsAPI, edit
         return false;
       };
     } else {
-      return createCommand(commandAction, transform.addInlineComment(editorAnalyticsAPI, editorAPI)(id, supportedBlockNodes));
+      return createCommand(commandAction, transform.addInlineComment(editorAnalyticsAPI, editorAPI)(id, supportedBlockNodes, isBlockNodeSupported));
     }
   };
 };
@@ -333,6 +340,7 @@ export var createAnnotation = function createAnnotation(editorAnalyticsAPI, edit
   return function (id) {
     var annotationType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : AnnotationTypes.INLINE_COMMENT;
     var supportedBlockNodes = arguments.length > 2 ? arguments[2] : undefined;
+    var isBlockNodeSupported = arguments.length > 3 ? arguments[3] : undefined;
     return function (state, dispatch) {
       // don't try to add if there are is no temp highlight bookmarked
       var _ref = getPluginState(state) || {},
@@ -341,7 +349,7 @@ export var createAnnotation = function createAnnotation(editorAnalyticsAPI, edit
         return false;
       }
       if (annotationType === AnnotationTypes.INLINE_COMMENT) {
-        return addInlineComment(editorAnalyticsAPI, editorAPI)(id, supportedBlockNodes)(state, dispatch);
+        return addInlineComment(editorAnalyticsAPI, editorAPI)(id, supportedBlockNodes, isBlockNodeSupported)(state, dispatch);
       }
       return false;
     };

package/dist/esm/editor-commands/transform.js

@@ -9,7 +9,7 @@ import { getDraftCommandAnalyticsPayload, getPluginState, resolveDraftBookmark }
 var isAnnotationStep = function isAnnotationStep(step) {
   return step instanceof AddMarkStep && step.mark.type.name === 'annotation';
 };
-var addAnnotationMark = function addAnnotationMark(id, supportedBlockNodes) {
+var addAnnotationMark = function addAnnotationMark(id, supportedBlockNodes, isBlockNodeSupported) {
   return function (transaction, state) {
     var inlineCommentState = getPluginState(state);
     var _ref = inlineCommentState || {},
@@ -18,7 +18,7 @@ var addAnnotationMark = function addAnnotationMark(id, supportedBlockNodes) {
       id: id,
       type: AnnotationTypes.INLINE_COMMENT
     });
-    var _resolveDraftBookmark = resolveDraftBookmark(state, bookmark, supportedBlockNodes),
+    var _resolveDraftBookmark = resolveDraftBookmark(state, bookmark, supportedBlockNodes, isBlockNodeSupported),
       from = _resolveDraftBookmark.from,
       to = _resolveDraftBookmark.to,
       head = _resolveDraftBookmark.head,
@@ -42,10 +42,10 @@ var addAnnotationMark = function addAnnotationMark(id, supportedBlockNodes) {
   };
 };
 var addInlineComment = function addInlineComment(editorAnalyticsAPI, editorAPI) {
-  return function (id, supportedBlockNodes) {
+  return function (id, supportedBlockNodes, isBlockNodeSupported) {
     return function (transaction, state) {
       var _editorAPI$editorView, _pluginState$featureF;
-      var tr = addAnnotationMark(id, supportedBlockNodes)(transaction, state);
+      var tr = addAnnotationMark(id, supportedBlockNodes, isBlockNodeSupported)(transaction, state);
       editorAPI === null || editorAPI === void 0 || (_editorAPI$editorView = editorAPI.editorViewModeEffects) === null || _editorAPI$editorView === void 0 || _editorAPI$editorView.actions.applyViewModeStepAt(tr);
 
       // add insert analytics step to transaction