@atlaskit/editor-plugin-annotation 0.1.0

package/dist/es2019/commands/transform.js

@@ -0,0 +1,64 @@
+import { AnnotationTypes } from '@atlaskit/adf-schema';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { applyMarkOnRange } from '@atlaskit/editor-common/mark';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { getDraftCommandAnalyticsPayload, getPluginState, getSelectionPositions } from '../utils';
+const addAnnotationMark = id => (transaction, state) => {
+  const inlineCommentState = getPluginState(state);
+  const {
+    from,
+    to,
+    head
+  } = getSelectionPositions(state, inlineCommentState);
+  const annotationMark = state.schema.marks.annotation.create({
+    id,
+    type: AnnotationTypes.INLINE_COMMENT
+  });
+  // Apply the mark only to text node in the range.
+  let tr = applyMarkOnRange(from, to, false, annotationMark, transaction);
+  // set selection back to the end of annotation once annotation mark is applied
+  tr.setSelection(TextSelection.create(tr.doc, head));
+  return tr;
+};
+const addInlineComment = editorAnalyticsAPI => id => (transaction, state) => {
+  let tr = addAnnotationMark(id)(transaction, state);
+  // add insert analytics step to transaction
+  tr = addInsertAnalytics(editorAnalyticsAPI)(tr, state);
+  // add close analytics step to transaction
+  tr = addOpenCloseAnalytics(editorAnalyticsAPI)(false, INPUT_METHOD.TOOLBAR)(tr, state);
+  return tr;
+};
+const addOpenCloseAnalytics = editorAnalyticsAPI => (drafting, method = INPUT_METHOD.TOOLBAR) => (transaction, state) => {
+  const draftingPayload = getDraftCommandAnalyticsPayload(drafting, method)(state);
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(draftingPayload)(transaction);
+  return transaction;
+};
+const addInsertAnalytics = editorAnalyticsAPI => (transaction, state) => {
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+    action: ACTION.INSERTED,
+    actionSubject: ACTION_SUBJECT.ANNOTATION,
+    eventType: EVENT_TYPE.TRACK,
+    actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT
+  })(transaction);
+  return transaction;
+};
+const addResolveAnalytics = editorAnalyticsAPI => method => (transaction, state) => {
+  const resolvedPayload = {
+    action: ACTION.RESOLVED,
+    actionSubject: ACTION_SUBJECT.ANNOTATION,
+    actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      method
+    }
+  };
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(resolvedPayload)(transaction);
+  return transaction;
+};
+export default {
+  addAnnotationMark,
+  addInlineComment,
+  addOpenCloseAnalytics,
+  addInsertAnalytics,
+  addResolveAnalytics
+};

package/dist/es2019/index.js

@@ -0,0 +1 @@
+export { annotationPlugin } from './plugin';

package/dist/es2019/nodeviews/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { AnnotationSharedClassNames } from '@atlaskit/editor-common/styles';
+export class AnnotationNodeView extends ReactNodeView {
+  createDomRef() {
+    return document.createElement('span');
+  }
+  getContentDOM() {
+    const dom = document.createElement('span');
+    dom.className = 'ak-editor-annotation';
+    return {
+      dom
+    };
+  }
+  render(_props, forwardRef) {
+    return (
+      /*#__PURE__*/
+      // all inline comment states are now set in decorations at ../pm-plugins/inline-comment.ts
+      React.createElement("span", {
+        "data-mark-type": "annotation",
+        ref: forwardRef
+      })
+    );
+  }
+}
+export const getAnnotationViewClassname = (isUnresolved, hasFocus) => {
+  if (!isUnresolved) {
+    return;
+  }
+  return hasFocus ? AnnotationSharedClassNames.focus : AnnotationSharedClassNames.blur;
+};

package/dist/es2019/plugin.js

@@ -0,0 +1,127 @@
+import React from 'react';
+import { annotation } from '@atlaskit/adf-schema';
+import { AnnotationUpdateEmitter } from '@atlaskit/editor-common/annotation';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { inlineCommentPlugin } from './pm-plugins/inline-comment';
+import { keymapPlugin } from './pm-plugins/keymap';
+import { buildToolbar } from './toolbar';
+import { InlineCommentView } from './ui/InlineCommentView';
+import { getPluginState, stripNonExistingAnnotations } from './utils';
+export const annotationPlugin = ({
+  config: annotationProviders,
+  api
+}) => {
+  return {
+    name: 'annotation',
+    marks() {
+      return [{
+        name: 'annotation',
+        mark: annotation
+      }];
+    },
+    actions: {
+      stripNonExistingAnnotations
+    },
+    getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return getPluginState(editorState) || undefined;
+    },
+    pmPlugins: () => [{
+      name: 'annotation',
+      plugin: ({
+        dispatch,
+        portalProviderAPI,
+        eventDispatcher
+      }) => {
+        if (annotationProviders) {
+          var _api$analytics;
+          return inlineCommentPlugin({
+            dispatch,
+            portalProviderAPI,
+            eventDispatcher,
+            provider: annotationProviders.inlineComment,
+            editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
+          });
+        }
+        return;
+      }
+    }, {
+      name: 'annotationKeymap',
+      plugin: () => {
+        if (annotationProviders) {
+          var _api$analytics2;
+          return keymapPlugin(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
+        }
+        return;
+      }
+    }],
+    pluginsOptions: {
+      floatingToolbar(state, intl) {
+        if (getBooleanFF('platform.editor.enable-selection-toolbar_ucdwd') || !annotationProviders) {
+          return;
+        }
+        const pluginState = getPluginState(state);
+        if (pluginState && pluginState.isVisible && !pluginState.bookmark && !pluginState.mouseData.isSelecting) {
+          var _api$analytics3;
+          const {
+            isToolbarAbove
+          } = annotationProviders.inlineComment;
+          return buildToolbar(api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions)(state, intl, isToolbarAbove);
+        }
+      },
+      selectionToolbar(state, intl) {
+        if (!getBooleanFF('platform.editor.enable-selection-toolbar_ucdwd') || !annotationProviders) {
+          return;
+        }
+        const pluginState = getPluginState(state);
+        if (pluginState && pluginState.isVisible && !pluginState.bookmark && !pluginState.mouseData.isSelecting) {
+          var _api$analytics4;
+          const {
+            isToolbarAbove
+          } = annotationProviders.inlineComment;
+          return buildToolbar(api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(state, intl, isToolbarAbove);
+        }
+      }
+    },
+    contentComponent({
+      editorView,
+      dispatchAnalyticsEvent
+    }) {
+      if (!annotationProviders) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(AnnotationContentComponent, {
+        api: api,
+        editorView: editorView,
+        annotationProviders: annotationProviders,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent
+      });
+    }
+  };
+};
+function AnnotationContentComponent({
+  api,
+  editorView,
+  annotationProviders,
+  dispatchAnalyticsEvent
+}) {
+  var _api$analytics5;
+  const {
+    annotationState: inlineCommentState
+  } = useSharedPluginState(api, ['annotation']);
+  if (inlineCommentState && !inlineCommentState.isVisible) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    "data-editor-popup": "true"
+  }, /*#__PURE__*/React.createElement(InlineCommentView, {
+    providers: annotationProviders,
+    editorView: editorView,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions
+  }));
+}
+export { AnnotationUpdateEmitter };

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

@@ -0,0 +1,181 @@
+import { AnnotationTypes } from '@atlaskit/adf-schema';
+import { RESOLVE_METHOD } from '@atlaskit/editor-common/analytics';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { clearDirtyMark, closeComponent, setInlineCommentsVisibility, setSelectedAnnotation, updateInlineCommentResolvedState, updateMouseState } from '../commands';
+import { AnnotationNodeView, getAnnotationViewClassname } from '../nodeviews';
+import { getAllAnnotations, getPluginState, inlineCommentPluginKey } from '../utils';
+import { createPluginState } from './plugin-factory';
+const fetchProviderStates = async (provider, annotationIds) => {
+  const data = await provider.getState(annotationIds);
+  let result = {};
+  data.forEach(annotation => {
+    if (annotation.annotationType === AnnotationTypes.INLINE_COMMENT) {
+      result[annotation.id] = annotation.state.resolved;
+    }
+  });
+  return result;
+};
+
+// fetchState is unable to return a command as it's runs async and may dispatch at a later time
+// Requires `editorView` instead of the decomposition as the async means state may end up stale
+const fetchState = async (provider, annotationIds, editorView, editorAnalyticsAPI) => {
+  if (!annotationIds || !annotationIds.length) {
+    return;
+  }
+  const inlineCommentStates = await fetchProviderStates(provider, annotationIds);
+  if (editorView.dispatch) {
+    updateInlineCommentResolvedState(editorAnalyticsAPI)(inlineCommentStates)(editorView.state, editorView.dispatch);
+  }
+};
+const initialState = (disallowOnWhitespace = false) => {
+  return {
+    annotations: {},
+    selectedAnnotations: [],
+    mouseData: {
+      isSelecting: false
+    },
+    disallowOnWhitespace,
+    isInlineCommentViewClosed: false,
+    isVisible: true,
+    skipSelectionHandling: false
+  };
+};
+const hideToolbar = (state, dispatch) => () => {
+  updateMouseState({
+    isSelecting: true
+  })(state, dispatch);
+};
+
+// Subscribe to updates from consumer
+const onResolve = editorAnalyticsAPI => (state, dispatch) => annotationId => {
+  updateInlineCommentResolvedState(editorAnalyticsAPI)({
+    [annotationId]: true
+  }, RESOLVE_METHOD.CONSUMER)(state, dispatch);
+};
+const onUnResolve = editorAnalyticsAPI => (state, dispatch) => annotationId => {
+  updateInlineCommentResolvedState(editorAnalyticsAPI)({
+    [annotationId]: false
+  })(state, dispatch);
+};
+const onMouseUp = (state, dispatch) => e => {
+  const {
+    mouseData
+  } = getPluginState(state) || {};
+  if (mouseData !== null && mouseData !== void 0 && mouseData.isSelecting) {
+    updateMouseState({
+      isSelecting: false
+    })(state, dispatch);
+  }
+};
+const onSetVisibility = view => isVisible => {
+  const {
+    state,
+    dispatch
+  } = view;
+  setInlineCommentsVisibility(isVisible)(state, dispatch);
+  if (isVisible) {
+    // PM retains focus when we click away from the editor.
+    // This will restore the visual aspect of the selection,
+    // otherwise it will seem a floating toolbar will appear
+    // for no reason.
+    view.focus();
+  }
+};
+export const inlineCommentPlugin = options => {
+  const {
+    provider,
+    portalProviderAPI,
+    eventDispatcher
+  } = options;
+  return new SafePlugin({
+    key: inlineCommentPluginKey,
+    state: createPluginState(options.dispatch, initialState(provider.disallowOnWhitespace)),
+    view(editorView) {
+      // Get initial state
+      // Need to pass `editorView` to mitigate editor state going stale
+      fetchState(provider, getAllAnnotations(editorView.state.doc), editorView, options.editorAnalyticsAPI);
+      const resolve = annotationId => onResolve(options.editorAnalyticsAPI)(editorView.state, editorView.dispatch)(annotationId);
+      const unResolve = annotationId => onUnResolve(options.editorAnalyticsAPI)(editorView.state, editorView.dispatch)(annotationId);
+      const mouseUp = event => onMouseUp(editorView.state, editorView.dispatch)(event);
+      const setVisibility = isVisible => onSetVisibility(editorView)(isVisible);
+      const setSelectedAnnotationFn = annotationId => {
+        if (!annotationId) {
+          closeComponent()(editorView.state, editorView.dispatch);
+        } else {
+          setSelectedAnnotation(annotationId)(editorView.state, editorView.dispatch);
+        }
+      };
+      const {
+        updateSubscriber
+      } = provider;
+      if (updateSubscriber) {
+        updateSubscriber.on('resolve', resolve).on('delete', resolve).on('unresolve', unResolve).on('create', unResolve).on('setvisibility', setVisibility).on('setselectedannotation', setSelectedAnnotationFn);
+      }
+
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      editorView.root.addEventListener('mouseup', mouseUp);
+      return {
+        update(view, _prevState) {
+          const {
+            dirtyAnnotations
+          } = getPluginState(view.state) || {};
+          if (!dirtyAnnotations) {
+            return;
+          }
+          clearDirtyMark()(view.state, view.dispatch);
+          fetchState(provider, getAllAnnotations(view.state.doc), view, options.editorAnalyticsAPI);
+        },
+        destroy() {
+          // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+          editorView.root.removeEventListener('mouseup', mouseUp);
+          if (updateSubscriber) {
+            updateSubscriber.off('resolve', resolve).off('delete', resolve).off('unresolve', unResolve).off('create', unResolve).off('setvisibility', setVisibility).off('setselectedannotation', setSelectedAnnotationFn);
+          }
+        }
+      };
+    },
+    props: {
+      nodeViews: {
+        annotation: (node, view, getPos) => new AnnotationNodeView(node, view, getPos, portalProviderAPI, eventDispatcher) // resolved
+        .init()
+      },
+      handleDOMEvents: {
+        mousedown: view => {
+          const pluginState = getPluginState(view.state);
+          if (!(pluginState !== null && pluginState !== void 0 && pluginState.mouseData.isSelecting)) {
+            hideToolbar(view.state, view.dispatch)();
+          }
+          return false;
+        }
+      },
+      decorations(state) {
+        // highlight comments, depending on state
+        const {
+          draftDecorationSet,
+          annotations,
+          selectedAnnotations,
+          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 = 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, {
+                class: `${getAnnotationViewClassname(isUnresolved, isSelected)} ${isUnresolved}`,
+                nodeName: 'span'
+              }));
+            }
+          });
+        });
+        decorations = decorations.add(state.doc, focusDecorations);
+        return decorations;
+      }
+    }
+  });
+};

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

@@ -0,0 +1,9 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { addInlineComment, bindKeymapWithCommand } from '@atlaskit/editor-common/keymaps';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { setInlineCommentDraftState } from '../commands';
+export function keymapPlugin(editorAnalyticsAPI) {
+  const list = {};
+  bindKeymapWithCommand(addInlineComment.common, setInlineCommentDraftState(editorAnalyticsAPI)(true, INPUT_METHOD.SHORTCUT), list);
+  return keymap(list);
+}

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

@@ -0,0 +1,108 @@
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { findAnnotationsInSelection, inlineCommentPluginKey, isSelectedAnnotationsChanged } from '../utils';
+import reducer from './reducer';
+const handleDocChanged = (tr, prevPluginState) => {
+  if (!tr.getMeta('replaceDocument')) {
+    return getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox') ? getSelectionChangedHandler(false)(tr, prevPluginState) : handleSelectionChanged(tr, prevPluginState);
+  }
+  return {
+    ...prevPluginState,
+    dirtyAnnotations: true
+  };
+};
+const handleSelectionChanged = (tr, pluginState) => {
+  if (pluginState.skipSelectionHandling) {
+    return {
+      ...pluginState,
+      skipSelectionHandling: false
+    };
+  }
+  const selectedAnnotations = findAnnotationsInSelection(tr.selection, tr.doc);
+  const changed = selectedAnnotations.length !== pluginState.selectedAnnotations.length || selectedAnnotations.some(annotationInfo => {
+    return !pluginState.selectedAnnotations.some(aInfo => aInfo.type === annotationInfo.id);
+  });
+  if (changed) {
+    return {
+      ...pluginState,
+      selectedAnnotations
+    };
+  }
+  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: getSelectionChangedHandler(true),
+  onDocChanged: handleDocChanged,
+  mapping: (tr, pluginState) => {
+    let {
+      draftDecorationSet,
+      bookmark
+    } = pluginState;
+    let mappedDecorationSet, mappedBookmark;
+    if (draftDecorationSet) {
+      mappedDecorationSet = draftDecorationSet.map(tr.mapping, tr.doc);
+    }
+    if (bookmark) {
+      mappedBookmark = bookmark.map(tr.mapping);
+    }
+
+    // return same pluginState if mappings did not change
+    if (mappedBookmark === bookmark && mappedDecorationSet === draftDecorationSet) {
+      return pluginState;
+    }
+    return {
+      ...pluginState,
+      draftDecorationSet: mappedDecorationSet,
+      bookmark: mappedBookmark
+    };
+  }
+});

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

@@ -0,0 +1,94 @@
+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:
+      return {
+        ...pluginState,
+        annotations: {
+          ...pluginState.annotations,
+          ...action.data
+        }
+      };
+    case ACTIONS.INLINE_COMMENT_UPDATE_MOUSE_STATE:
+      const mouseData = Object.assign({}, pluginState.mouseData, action.data.mouseData);
+      return {
+        ...pluginState,
+        mouseData
+      };
+    case ACTIONS.SET_INLINE_COMMENT_DRAFT_STATE:
+      return getNewDraftState(pluginState, action.data.drafting, action.data.editorState);
+    case ACTIONS.INLINE_COMMENT_CLEAR_DIRTY_MARK:
+      return {
+        ...pluginState,
+        dirtyAnnotations: false,
+        annotations: {}
+      };
+    case ACTIONS.CLOSE_COMPONENT:
+      return getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox') ? {
+        ...pluginState,
+        isInlineCommentViewClosed: true
+      } : {
+        ...pluginState,
+        selectedAnnotations: []
+      };
+    case ACTIONS.ADD_INLINE_COMMENT:
+      const updatedPluginState = getNewDraftState(pluginState, action.data.drafting, action.data.editorState);
+      return {
+        ...updatedPluginState,
+        selectedAnnotations: [...updatedPluginState.selectedAnnotations, ...action.data.selectedAnnotations],
+        annotations: {
+          ...pluginState.annotations,
+          ...action.data.inlineComments
+        },
+        ...(getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox') && {
+          isInlineCommentViewClosed: false
+        })
+      };
+    case ACTIONS.INLINE_COMMENT_SET_VISIBLE:
+      const {
+        isVisible
+      } = action.data;
+      if (isVisible === pluginState.isVisible) {
+        return pluginState;
+      }
+      return {
+        ...(isVisible ? pluginState : getNewDraftState(pluginState, false)),
+        isVisible
+      };
+    case ACTIONS.SET_SELECTED_ANNOTATION:
+      return {
+        ...pluginState,
+        selectedAnnotations: [...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;
+  }
+});
+function getNewDraftState(pluginState, drafting, editorState) {
+  let {
+    draftDecorationSet
+  } = pluginState;
+  if (!draftDecorationSet || !drafting) {
+    draftDecorationSet = DecorationSet.empty;
+  }
+  let newState = {
+    ...pluginState,
+    draftDecorationSet
+  };
+  newState.bookmark = undefined;
+  if (drafting && editorState) {
+    newState.bookmark = editorState.selection.getBookmark();
+    const resolvedBookmark = newState.bookmark.resolve(editorState.doc);
+    const draftDecoration = addDraftDecoration(resolvedBookmark.from, resolvedBookmark.to);
+    newState.draftDecorationSet = draftDecorationSet.add(editorState.doc, [draftDecoration]);
+  }
+  return newState;
+}

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

@@ -0,0 +1,11 @@
+export let ACTIONS = /*#__PURE__*/function (ACTIONS) {
+  ACTIONS[ACTIONS["UPDATE_INLINE_COMMENT_STATE"] = 0] = "UPDATE_INLINE_COMMENT_STATE";
+  ACTIONS[ACTIONS["SET_INLINE_COMMENT_DRAFT_STATE"] = 1] = "SET_INLINE_COMMENT_DRAFT_STATE";
+  ACTIONS[ACTIONS["INLINE_COMMENT_UPDATE_MOUSE_STATE"] = 2] = "INLINE_COMMENT_UPDATE_MOUSE_STATE";
+  ACTIONS[ACTIONS["INLINE_COMMENT_CLEAR_DIRTY_MARK"] = 3] = "INLINE_COMMENT_CLEAR_DIRTY_MARK";
+  ACTIONS[ACTIONS["ADD_INLINE_COMMENT"] = 4] = "ADD_INLINE_COMMENT";
+  ACTIONS[ACTIONS["INLINE_COMMENT_SET_VISIBLE"] = 5] = "INLINE_COMMENT_SET_VISIBLE";
+  ACTIONS[ACTIONS["CLOSE_COMPONENT"] = 6] = "CLOSE_COMPONENT";
+  ACTIONS[ACTIONS["SET_SELECTED_ANNOTATION"] = 7] = "SET_SELECTED_ANNOTATION";
+  return ACTIONS;
+}({});

package/dist/es2019/toolbar.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { addInlineComment, ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { annotationMessages } from '@atlaskit/editor-common/messages';
+import { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
+import CommentIcon from '@atlaskit/icon/glyph/comment';
+import { setInlineCommentDraftState } from './commands';
+import { AnnotationSelectionType, AnnotationTestIds } from './types';
+import { isSelectionValid } from './utils';
+export const buildToolbar = editorAnalyticsAPI => (state, intl, isToolbarAbove = false) => {
+  const {
+    schema
+  } = state;
+  const selectionValid = isSelectionValid(state);
+  if (selectionValid === AnnotationSelectionType.INVALID) {
+    return undefined;
+  }
+  const createCommentMessage = intl.formatMessage(annotationMessages.createComment);
+  const commentDisabledMessage = intl.formatMessage(annotationMessages.createCommentInvalid);
+  const createComment = {
+    type: 'button',
+    showTitle: true,
+    disabled: selectionValid === AnnotationSelectionType.DISABLED,
+    testId: AnnotationTestIds.floatingToolbarCreateButton,
+    icon: CommentIcon,
+    tooltipContent: selectionValid === AnnotationSelectionType.DISABLED ? commentDisabledMessage : /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: createCommentMessage,
+      keymap: addInlineComment
+    }),
+    title: createCommentMessage,
+    onClick: (state, dispatch) => {
+      return setInlineCommentDraftState(editorAnalyticsAPI)(true)(state, dispatch);
+    }
+  };
+  const {
+    annotation
+  } = schema.marks;
+  const validNodes = Object.keys(schema.nodes).reduce((acc, current) => {
+    const type = schema.nodes[current];
+    if (type.allowsMarkType(annotation)) {
+      acc.push(type);
+    }
+    return acc;
+  }, []);
+  const toolbarTitle = intl.formatMessage(annotationMessages.toolbar);
+  const calcToolbarPosition = isToolbarAbove ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
+  const onPositionCalculated = calcToolbarPosition(toolbarTitle);
+  return {
+    title: toolbarTitle,
+    nodeType: validNodes,
+    items: [createComment],
+    onPositionCalculated
+  };
+};