feat: Comment resolving (#7115)

app/editor/index.tsx

@@ -640,27 +640,56 @@ export class Editor extends React.PureComponent<
   public getComments = () => ProsemirrorHelper.getComments(this.view.state.doc);
 
   /**
-   * Remove a specific comment mark from the document.
+   * Remove all marks related to a specific comment from the document.
    *
    * @param commentId The id of the comment to remove
    */
   public removeComment = (commentId: string) => {
     const { state, dispatch } = this.view;
-    let found = false;
+
     state.doc.descendants((node, pos) => {
-      if (!node.isInline || found) {
+      if (!node.isInline) {
         return;
       }
 
       const mark = node.marks.find(
-        (mark) =>
-          mark.type === state.schema.marks.comment &&
-          mark.attrs.id === commentId
+        (m) => m.type === state.schema.marks.comment && m.attrs.id === commentId
       );
 
       if (mark) {
         dispatch(state.tr.removeMark(pos, pos + node.nodeSize, mark));
-        found = true;
+      }
+    });
+  };
+
+  /**
+   * Update all marks related to a specific comment in the document.
+   *
+   * @param commentId The id of the comment to remove
+   * @param attrs The attributes to update
+   */
+  public updateComment = (commentId: string, attrs: { resolved: boolean }) => {
+    const { state, dispatch } = this.view;
+
+    state.doc.descendants((node, pos) => {
+      if (!node.isInline) {
+        return;
+      }
+
+      const mark = node.marks.find(
+        (m) => m.type === state.schema.marks.comment && m.attrs.id === commentId
+      );
+
+      if (mark) {
+        const from = pos;
+        const to = pos + node.nodeSize;
+        const newMark = state.schema.marks.comment.create({
+          ...mark.attrs,
+          ...attrs,
+        });
+        dispatch(
+          state.tr.removeMark(from, to, mark).addMark(from, to, newMark)
+        );
       }
     });
   };
@@ -808,6 +837,7 @@ const EditorContainer = styled(Styles)<{
     css`
       #comment-${props.focusedCommentId} {
         background: ${transparentize(0.5, props.theme.brand.marine)};
+        border-bottom: 2px solid ${props.theme.commentMarkBackground};
       }
     `}
 

app/editor/menus/formatting.tsx

@@ -209,7 +209,7 @@ export default function formattingMenuItems(
       tooltip: dictionary.comment,
       icon: <CommentIcon />,
       label: isCodeBlock ? dictionary.comment : undefined,
-      active: isMarkActive(schema.marks.comment),
+      active: isMarkActive(schema.marks.comment, { resolved: false }),
       visible: !isMobile || !isEmpty,
     },
     {