@atlaskit/editor-plugin-annotation 0.1.0

package/dist/es2019/types.js

@@ -0,0 +1,14 @@
+export let AnnotationSelectionType = /*#__PURE__*/function (AnnotationSelectionType) {
+  AnnotationSelectionType["INVALID"] = "invalid";
+  AnnotationSelectionType["DISABLED"] = "disabled";
+  AnnotationSelectionType["VALID"] = "valid";
+  return AnnotationSelectionType;
+}({}); // Annotation can be created
+const prefix = 'ak-editor-annotation';
+export const AnnotationTestIds = {
+  prefix,
+  floatingComponent: `${prefix}-floating-component`,
+  floatingToolbarCreateButton: `${prefix}-toolbar-create-button`,
+  componentSave: `${prefix}-dummy-save-button`,
+  componentClose: `${prefix}-dummy-close-button`
+};

package/dist/es2019/ui/AnnotationViewWrapper.js

@@ -0,0 +1,15 @@
+import React from 'react';
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class AnnotationViewWrapper extends React.PureComponent {
+  componentDidMount() {
+    const {
+      onViewed
+    } = this.props;
+    if (onViewed) {
+      onViewed();
+    }
+  }
+  render() {
+    return this.props.children;
+  }
+}

package/dist/es2019/ui/InlineCommentView.js

@@ -0,0 +1,145 @@
+import React from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, CONTENT_COMPONENT, EVENT_TYPE, RESOLVE_METHOD } from '@atlaskit/editor-common/analytics';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { closeComponent, createAnnotation, removeInlineCommentNearSelection, setInlineCommentDraftState, updateInlineCommentResolvedState } from '../commands';
+import { AnnotationTestIds } from '../types';
+import { getAllAnnotations, getAnnotationViewKey, getPluginState, getSelectionPositions } from '../utils';
+import { AnnotationViewWrapper } from './AnnotationViewWrapper';
+const findPosForDOM = sel => {
+  const {
+    $from,
+    from
+  } = sel;
+
+  // Retrieve current TextNode
+  const index = $from.index();
+  const node = index < $from.parent.childCount && $from.parent.child(index);
+
+  // Right edge of a mark.
+  if (!node && $from.nodeBefore && $from.nodeBefore.isText && $from.nodeBefore.marks.find(mark => mark.type.name === 'annotation')) {
+    return from - 1;
+  }
+  return from;
+};
+export function InlineCommentView({
+  providers,
+  editorView,
+  editorAnalyticsAPI,
+  dispatchAnalyticsEvent
+}) {
+  // As inlineComment is the only annotation present, this function is not generic
+  const {
+    inlineComment: inlineCommentProvider
+  } = providers;
+  const {
+    state,
+    dispatch
+  } = editorView;
+  const {
+    createComponent: CreateComponent,
+    viewComponent: ViewComponent
+  } = inlineCommentProvider;
+  const inlineCommentState = getPluginState(state);
+  const {
+    bookmark,
+    selectedAnnotations,
+    annotations,
+    isInlineCommentViewClosed
+  } = inlineCommentState || {};
+  const annotationsList = getAllAnnotations(editorView.state.doc);
+  const selection = getSelectionPositions(state, inlineCommentState);
+  const position = findPosForDOM(selection);
+  let dom;
+  try {
+    dom = findDomRefAtPos(position, editorView.domAtPos.bind(editorView));
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn(error);
+    if (dispatchAnalyticsEvent) {
+      const payload = {
+        action: ACTION.ERRORED,
+        actionSubject: ACTION_SUBJECT.CONTENT_COMPONENT,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          component: CONTENT_COMPONENT.INLINE_COMMENT,
+          selection: selection.toJSON(),
+          position,
+          docSize: editorView.state.doc.nodeSize,
+          error: error.toString()
+        }
+      };
+      dispatchAnalyticsEvent(payload);
+    }
+  }
+  if (!dom) {
+    return null;
+  }
+
+  // Create Component
+  if (bookmark) {
+    if (!CreateComponent) {
+      return null;
+    }
+
+    //getting all text between bookmarked positions
+    const textSelection = state.doc.textBetween(selection.from, selection.to);
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": AnnotationTestIds.floatingComponent,
+      "data-editor-popup": "true"
+    }, /*#__PURE__*/React.createElement(CreateComponent, {
+      dom: dom,
+      textSelection: textSelection,
+      onCreate: id => {
+        createAnnotation(editorAnalyticsAPI)(id)(editorView.state, editorView.dispatch);
+        !editorView.hasFocus() && editorView.focus();
+      },
+      onClose: () => {
+        setInlineCommentDraftState(editorAnalyticsAPI)(false)(editorView.state, editorView.dispatch);
+        !editorView.hasFocus() && editorView.focus();
+      }
+    }));
+  }
+
+  // View Component
+  const activeAnnotations = (selectedAnnotations === null || selectedAnnotations === void 0 ? void 0 : selectedAnnotations.filter(mark => annotations && annotations[mark.id] === false)) || [];
+  if (!ViewComponent || activeAnnotations.length === 0) {
+    return null;
+  }
+  const onAnnotationViewed = () => {
+    if (!dispatchAnalyticsEvent) {
+      return;
+    }
+    // fire analytics
+    const payload = {
+      action: ACTION.VIEWED,
+      actionSubject: ACTION_SUBJECT.ANNOTATION,
+      actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        overlap: activeAnnotations.length ? activeAnnotations.length - 1 : 0
+      }
+    };
+    dispatchAnalyticsEvent(payload);
+  };
+  if (getBooleanFF('platform.editor.annotation.decouple-inline-comment-closed_flmox') && isInlineCommentViewClosed || !selectedAnnotations) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(AnnotationViewWrapper, {
+    "data-editor-popup": "true",
+    "data-testid": AnnotationTestIds.floatingComponent,
+    key: getAnnotationViewKey(activeAnnotations),
+    onViewed: onAnnotationViewed
+  }, /*#__PURE__*/React.createElement(ViewComponent, {
+    annotationsList: annotationsList,
+    annotations: activeAnnotations,
+    dom: dom,
+    onDelete: id => removeInlineCommentNearSelection(id)(state, dispatch),
+    onResolve: id => updateInlineCommentResolvedState(editorAnalyticsAPI)({
+      [id]: true
+    }, RESOLVE_METHOD.COMPONENT)(editorView.state, editorView.dispatch),
+    onClose: () => {
+      closeComponent()(editorView.state, editorView.dispatch);
+    }
+  }));
+}

package/dist/es2019/utils.js

@@ -0,0 +1,334 @@
+import { AnnotationTypes } from '@atlaskit/adf-schema';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { AnnotationSharedClassNames } from '@atlaskit/editor-common/styles';
+import { canApplyAnnotationOnRange, containsAnyAnnotations, getAnnotationIdsFromRange, hasAnnotationMark, isParagraph, isText } from '@atlaskit/editor-common/utils';
+import { AllSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { AnnotationSelectionType } from './types';
+export { hasAnnotationMark, containsAnyAnnotations };
+function sum(arr, f) {
+  return arr.reduce((val, x) => val + f(x), 0);
+}
+/**
+ * Finds the marks in the nodes to the left and right.
+ * @param $pos Position to center search around
+ */
+export const surroundingMarks = $pos => {
+  const {
+    nodeBefore,
+    nodeAfter
+  } = $pos;
+  const markNodeBefore = nodeBefore && $pos.doc.nodeAt(Math.max(0, $pos.pos - nodeBefore.nodeSize - 1));
+  const markNodeAfter = nodeAfter && $pos.doc.nodeAt($pos.pos + nodeAfter.nodeSize);
+  return [markNodeBefore && markNodeBefore.marks || [], markNodeAfter && markNodeAfter.marks || []];
+};
+
+/**
+ * Finds annotation marks, and returns their IDs.
+ * @param marks Array of marks to search in
+ */
+const filterAnnotationIds = marks => {
+  if (!marks.length) {
+    return [];
+  }
+  const {
+    annotation
+  } = marks[0].type.schema.marks;
+  return marks.filter(mark => mark.type === annotation).map(mark => mark.attrs.id);
+};
+
+/**
+ * Re-orders the annotation array based on the order in the document.
+ *
+ * This places the marks that do not appear in the surrounding nodes
+ * higher in the list. That is, the inner-most one appears first.
+ *
+ * Undo, for example, can re-order annotation marks in the document.
+ * @param annotations annotation metadata
+ * @param $from location to look around (usually the selection)
+ */
+const reorderAnnotations = (annotations, $from) => {
+  const idSet = surroundingMarks($from).map(filterAnnotationIds);
+  annotations.sort((a, b) => sum(idSet, ids => ids.indexOf(a.id)) - sum(idSet, ids => ids.indexOf(b.id)));
+};
+export const getAllAnnotations = doc => {
+  const allAnnotationIds = new Set();
+  doc.descendants(node => {
+    node.marks.filter(mark => mark.type.name === 'annotation')
+    // filter out annotations with invalid attributes as they cause errors when interacting with them
+    .filter(validateAnnotationMark).forEach(m => allAnnotationIds.add(m.attrs.id));
+    return true;
+  });
+  return Array.from(allAnnotationIds);
+};
+
+/*
+ * verifies if annotation mark contains valid attributes
+ */
+const validateAnnotationMark = annotationMark => {
+  const {
+    id,
+    annotationType
+  } = annotationMark.attrs;
+  return validateAnnotationId(id) && validateAnnotationType(annotationType);
+  function validateAnnotationId(id) {
+    if (!id || typeof id !== 'string') {
+      return false;
+    }
+    const invalidIds = ['null', 'undefined'];
+    return !invalidIds.includes(id.toLowerCase());
+  }
+  function validateAnnotationType(type) {
+    if (!type || typeof type !== 'string') {
+      return false;
+    }
+    const allowedTypes = Object.values(AnnotationTypes);
+    return allowedTypes.includes(type);
+  }
+};
+
+/*
+ * add decoration for the comment selection in draft state
+ * (when creating new comment)
+ */
+export const addDraftDecoration = (start, end) => {
+  return Decoration.inline(start, end, {
+    class: `${AnnotationSharedClassNames.draft}`
+  });
+};
+export const getAnnotationViewKey = annotations => {
+  const keys = annotations.map(mark => mark.id).join('_');
+  return `view-annotation-wrapper_${keys}`;
+};
+export const findAnnotationsInSelection = (selection, doc) => {
+  const {
+    empty,
+    $anchor,
+    anchor
+  } = selection;
+  // Only detect annotations on caret selection
+  if (!empty || !doc) {
+    return [];
+  }
+  const node = doc.nodeAt(anchor);
+  if (!node && !$anchor.nodeBefore) {
+    return [];
+  }
+  const annotationMark = doc.type.schema.marks.annotation;
+  const nodeBefore = $anchor.nodeBefore;
+  const anchorAnnotationMarks = node && node.marks || [];
+  let marks = [];
+  if (annotationMark.isInSet(anchorAnnotationMarks)) {
+    marks = anchorAnnotationMarks;
+  } else if (nodeBefore && annotationMark.isInSet(nodeBefore.marks)) {
+    marks = nodeBefore.marks;
+  }
+  const annotations = marks.filter(mark => mark.type.name === 'annotation').map(mark => ({
+    id: mark.attrs.id,
+    type: mark.attrs.annotationType
+  }));
+  reorderAnnotations(annotations, $anchor);
+  return annotations;
+};
+
+/**
+ * get selection from position to apply new comment for
+ * @return bookmarked positions if they exists, otherwise current selection positions
+ */
+export function getSelectionPositions(editorState, inlineCommentState) {
+  const {
+    bookmark
+  } = inlineCommentState || {};
+  // get positions via saved bookmark if it is available
+  // this is to make comments box positioned relative to temporary highlight rather then current selection
+  if (bookmark) {
+    return bookmark.resolve(editorState.doc);
+  }
+  return editorState.selection;
+}
+export const inlineCommentPluginKey = new PluginKey('inlineCommentPluginKey');
+export const getPluginState = state => {
+  return inlineCommentPluginKey.getState(state);
+};
+
+/**
+ * get number of unique annotations within current selection
+ */
+const getAnnotationsInSelectionCount = state => {
+  const {
+    from,
+    to
+  } = state.selection;
+  const annotations = getAnnotationIdsFromRange({
+    from,
+    to
+  }, state.doc, state.schema);
+  return annotations.length;
+};
+
+/**
+ * get payload for the open/close analytics event
+ */
+export const getDraftCommandAnalyticsPayload = (drafting, inputMethod) => {
+  const payload = state => {
+    let attributes = {};
+    if (drafting) {
+      attributes = {
+        inputMethod,
+        overlap: getAnnotationsInSelectionCount(state)
+      };
+    }
+    return {
+      action: drafting ? ACTION.OPENED : ACTION.CLOSED,
+      actionSubject: ACTION_SUBJECT.ANNOTATION,
+      actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
+      eventType: EVENT_TYPE.TRACK,
+      attributes
+    };
+  };
+  return payload;
+};
+export const isSelectionValid = state => {
+  const {
+    selection
+  } = state;
+  const {
+    disallowOnWhitespace
+  } = getPluginState(state) || {};
+  if (selection.empty || !(selection instanceof TextSelection || selection instanceof AllSelection)) {
+    return AnnotationSelectionType.INVALID;
+  }
+  const containsInvalidNodes = hasInvalidNodes(state);
+
+  // A selection that only covers 1 pos, and is an invalid node
+  // e.g. a text selection over a mention
+  if (containsInvalidNodes && selection.to - selection.from === 1) {
+    return AnnotationSelectionType.INVALID;
+  }
+  if (containsInvalidNodes) {
+    return AnnotationSelectionType.DISABLED;
+  }
+  if (disallowOnWhitespace && hasInvalidWhitespaceNode(selection, state.schema)) {
+    return AnnotationSelectionType.INVALID;
+  }
+  if (isEmptyTextSelection(selection, state.schema)) {
+    return AnnotationSelectionType.INVALID;
+  }
+  return AnnotationSelectionType.VALID;
+};
+export const hasInvalidNodes = state => {
+  const {
+    selection,
+    doc,
+    schema
+  } = state;
+  return !canApplyAnnotationOnRange({
+    from: selection.from,
+    to: selection.to
+  }, doc, schema);
+};
+
+/**
+ * Checks if selection contains only empty text
+ * e.g. when you select across multiple empty paragraphs
+ */
+function isEmptyTextSelection(selection, schema) {
+  const {
+    text,
+    paragraph
+  } = schema.nodes;
+  let hasContent = false;
+  selection.content().content.descendants(node => {
+    // for empty paragraph - consider empty (nothing to comment on)
+    if (node.type === paragraph && !node.content.size) {
+      return false;
+    }
+    // for not a text or nonempty text - consider nonempty (can comment if the node is supported for annotations)
+    if (node.type !== text || !node.textContent) {
+      hasContent = true;
+    }
+    return !hasContent;
+  });
+  return !hasContent;
+}
+
+/**
+ * Checks if any of the nodes in a given selection are completely whitespace
+ * This is to conform to Confluence annotation specifications
+ */
+export function hasInvalidWhitespaceNode(selection, schema) {
+  let foundInvalidWhitespace = false;
+  const content = selection.content().content;
+  content.descendants(node => {
+    if (isText(node, schema)) {
+      return false;
+    }
+    if (node.textContent.trim() === '') {
+      // Trailing new lines do not result in the annotation spanning into
+      // the trailing new line so can be ignored when looking for invalid
+      // whitespace nodes.
+      const nodeIsTrailingNewLine =
+      // it is the final node
+      node.eq(content.lastChild) &&
+      // and there are multiple nodes
+      !node.eq(content.firstChild) &&
+      // and it is a paragraph node
+      isParagraph(node, schema);
+      if (!nodeIsTrailingNewLine) {
+        foundInvalidWhitespace = true;
+      }
+    }
+    return !foundInvalidWhitespace;
+  });
+  return foundInvalidWhitespace;
+}
+
+/*
+ * verifies that the annotation exists by the given id
+ */
+export function annotationExists(annotationId, state) {
+  const commentsPluginState = getPluginState(state);
+  return !!(commentsPluginState !== null && commentsPluginState !== void 0 && commentsPluginState.annotations) && Object.keys(commentsPluginState.annotations).includes(annotationId);
+}
+
+/*
+ * remove annotations that dont exsist in plugin state from slice
+ */
+export function stripNonExistingAnnotations(slice, state) {
+  if (!slice.content.size) {
+    return false;
+  }
+  slice.content.forEach(node => {
+    stripNonExistingAnnotationsFromNode(node, state);
+    node.content.descendants(node => {
+      stripNonExistingAnnotationsFromNode(node, state);
+      return true;
+    });
+  });
+}
+
+/*
+ * remove annotations that dont exsist in plugin state
+ * from node
+ */
+function stripNonExistingAnnotationsFromNode(node, state) {
+  if (hasAnnotationMark(node, state)) {
+    node.marks = node.marks.filter(mark => {
+      if (mark.type.name === 'annotation') {
+        return annotationExists(mark.attrs.id, state);
+      }
+      return true;
+    });
+  }
+  return node;
+}
+
+/**
+ * Compares two sets of annotationInfos to see if the annotations have changed
+ * This function assumes annotations will have unique id's for simplicity
+ */
+export function isSelectedAnnotationsChanged(oldSelectedAnnotations, newSelectedAnnotations) {
+  return newSelectedAnnotations.length !== oldSelectedAnnotations.length ||
+  // assuming annotations have unique id's for simplicity
+  newSelectedAnnotations.some(annotation => !oldSelectedAnnotations.find(pluginStateAnnotation => annotation.id === pluginStateAnnotation.id && annotation.type === pluginStateAnnotation.type));
+}

package/dist/esm/commands/index.js

@@ -0,0 +1,143 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { AnnotationTypes } from '@atlaskit/adf-schema';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { createCommand } from '../pm-plugins/plugin-factory';
+import { ACTIONS } from '../pm-plugins/types';
+import { AnnotationSelectionType } from '../types';
+import { getPluginState, isSelectionValid } from '../utils';
+import transform from './transform';
+export var updateInlineCommentResolvedState = function updateInlineCommentResolvedState(editorAnalyticsAPI) {
+  return function (partialNewState, resolveMethod) {
+    var command = {
+      type: ACTIONS.UPDATE_INLINE_COMMENT_STATE,
+      data: partialNewState
+    };
+    var allResolved = Object.values(partialNewState).every(function (state) {
+      return state;
+    });
+    if (resolveMethod && allResolved) {
+      return createCommand(command, transform.addResolveAnalytics(editorAnalyticsAPI)(resolveMethod));
+    }
+    return createCommand(command);
+  };
+};
+export var closeComponent = function closeComponent() {
+  return createCommand({
+    type: ACTIONS.CLOSE_COMPONENT
+  });
+};
+export var clearDirtyMark = function clearDirtyMark() {
+  return createCommand({
+    type: ACTIONS.INLINE_COMMENT_CLEAR_DIRTY_MARK
+  });
+};
+export var removeInlineCommentNearSelection = function removeInlineCommentNearSelection(id) {
+  return function (state, dispatch) {
+    var tr = state.tr,
+      $from = state.selection.$from;
+    var annotationMarkType = state.schema.marks.annotation;
+    var hasAnnotation = $from.marks().some(function (mark) {
+      return mark.type === annotationMarkType;
+    });
+    if (!hasAnnotation) {
+      return false;
+    }
+
+    // just remove entire mark from around the node
+    tr.removeMark($from.start(), $from.end(), annotationMarkType.create({
+      id: id,
+      type: AnnotationTypes.INLINE_COMMENT
+    }));
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+var getDraftCommandAction = function getDraftCommandAction(drafting) {
+  return function (editorState) {
+    // validate selection only when entering draft mode
+    if (drafting && isSelectionValid(editorState) !== AnnotationSelectionType.VALID) {
+      return false;
+    }
+    return {
+      type: ACTIONS.SET_INLINE_COMMENT_DRAFT_STATE,
+      data: {
+        drafting: drafting,
+        editorState: editorState
+      }
+    };
+  };
+};
+export var setInlineCommentDraftState = function setInlineCommentDraftState(editorAnalyticsAPI) {
+  return function (drafting) {
+    var inputMethod = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INPUT_METHOD.TOOLBAR;
+    var commandAction = getDraftCommandAction(drafting);
+    return createCommand(commandAction, transform.addOpenCloseAnalytics(editorAnalyticsAPI)(drafting, inputMethod));
+  };
+};
+export var addInlineComment = function addInlineComment(editorAnalyticsAPI) {
+  return function (id) {
+    var commandAction = function commandAction(editorState) {
+      return {
+        type: ACTIONS.ADD_INLINE_COMMENT,
+        data: {
+          drafting: false,
+          inlineComments: _defineProperty({}, id, false),
+          // Auto make the newly inserted comment selected.
+          // We move the selection to the head of the comment selection.
+          selectedAnnotations: [{
+            id: id,
+            type: AnnotationTypes.INLINE_COMMENT
+          }],
+          editorState: editorState
+        }
+      };
+    };
+    return createCommand(commandAction, transform.addInlineComment(editorAnalyticsAPI)(id));
+  };
+};
+export var updateMouseState = function updateMouseState(mouseData) {
+  return createCommand({
+    type: ACTIONS.INLINE_COMMENT_UPDATE_MOUSE_STATE,
+    data: {
+      mouseData: mouseData
+    }
+  });
+};
+export var setSelectedAnnotation = function setSelectedAnnotation(id) {
+  return createCommand({
+    type: ACTIONS.SET_SELECTED_ANNOTATION,
+    data: {
+      selectedAnnotations: [{
+        id: id,
+        type: AnnotationTypes.INLINE_COMMENT
+      }]
+    }
+  });
+};
+export var createAnnotation = function createAnnotation(editorAnalyticsAPI) {
+  return function (id) {
+    var annotationType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : AnnotationTypes.INLINE_COMMENT;
+    return function (state, dispatch) {
+      // don't try to add if there are is no temp highlight bookmarked
+      var _ref = getPluginState(state) || {},
+        bookmark = _ref.bookmark;
+      if (!bookmark || !dispatch) {
+        return false;
+      }
+      if (annotationType === AnnotationTypes.INLINE_COMMENT) {
+        return addInlineComment(editorAnalyticsAPI)(id)(state, dispatch);
+      }
+      return false;
+    };
+  };
+};
+export var setInlineCommentsVisibility = function setInlineCommentsVisibility(isVisible) {
+  return createCommand({
+    type: ACTIONS.INLINE_COMMENT_SET_VISIBLE,
+    data: {
+      isVisible: isVisible
+    }
+  });
+};