feat: Comment resolving (#7115)

shared/editor/marks/Comment.ts

@@ -2,9 +2,11 @@ import { toggleMark } from "prosemirror-commands";
 import { MarkSpec, MarkType, Schema, Mark as PMMark } from "prosemirror-model";
 import { Command, Plugin } from "prosemirror-state";
 import { v4 as uuidv4 } from "uuid";
-import collapseSelection from "../commands/collapseSelection";
+import { addMark } from "../commands/addMark";
+import { collapseSelection } from "../commands/collapseSelection";
 import { chainTransactions } from "../lib/chainTransactions";
 import { isMarkActive } from "../queries/isMarkActive";
+import { EditorStyleHelper } from "../styles/EditorStyleHelper";
 import Mark from "./Mark";
 
 export default class Comment extends Mark {
@@ -17,11 +19,14 @@ export default class Comment extends Mark {
       attrs: {
         id: {},
         userId: {},
+        resolved: {
+          default: false,
+        },
       },
       inclusive: false,
       parseDOM: [
         {
-          tag: "span.comment-marker",
+          tag: `.${EditorStyleHelper.comment}`,
           getAttrs: (dom: HTMLSpanElement) => {
             // Ignore comment markers from other documents
             const documentId = dom.getAttribute("data-document-id");
@@ -32,6 +37,7 @@ export default class Comment extends Mark {
             return {
               id: dom.getAttribute("id")?.replace("comment-", ""),
               userId: dom.getAttribute("data-user-id"),
+              resolved: !!dom.getAttribute("data-resolved"),
             };
           },
         },
@@ -39,8 +45,9 @@ export default class Comment extends Mark {
       toDOM: (node) => [
         "span",
         {
-          class: "comment-marker",
+          class: EditorStyleHelper.comment,
           id: `comment-${node.attrs.id}`,
+          "data-resolved": node.attrs.resolved ? "true" : undefined,
           "data-user-id": node.attrs.userId,
           "data-document-id": this.editor?.props.id,
         },
@@ -56,7 +63,11 @@ export default class Comment extends Mark {
     return this.options.onCreateCommentMark
       ? {
           "Mod-Alt-m": (state, dispatch) => {
-            if (isMarkActive(state.schema.marks.comment)(state)) {
+            if (
+              isMarkActive(state.schema.marks.comment, { resolved: false })(
+                state
+              )
+            ) {
               return false;
             }
 
@@ -77,12 +88,14 @@ export default class Comment extends Mark {
   commands({ type }: { type: MarkType; schema: Schema }) {
     return this.options.onCreateCommentMark
       ? (): Command => (state, dispatch) => {
-          if (isMarkActive(state.schema.marks.comment)(state)) {
+          if (
+            isMarkActive(state.schema.marks.comment, { resolved: false })(state)
+          ) {
             return false;
           }
 
           chainTransactions(
-            toggleMark(type, {
+            addMark(type, {
               id: uuidv4(),
               userId: this.options.userId,
             }),
@@ -152,13 +165,16 @@ export default class Comment extends Mark {
                 return false;
               }
 
-              const comment = event.target.closest(".comment-marker");
+              const comment = event.target.closest(
+                `.${EditorStyleHelper.comment}`
+              );
               if (!comment) {
                 return false;
               }
 
               const commentId = comment.id.replace("comment-", "");
-              if (commentId) {
+              const resolved = comment.getAttribute("data-resolved");
+              if (commentId && !resolved) {
                 this.options?.onClickCommentMark?.(commentId);
               }