feat: Comment resolving (#7115)

shared/editor/commands/addMark.ts

@@ -0,0 +1,20 @@
+import { Attrs, MarkType } from "prosemirror-model";
+import { Command } from "prosemirror-state";
+
+/**
+ * A prosemirror command to create a mark at the current selection.
+ *
+ * @returns A prosemirror command.
+ */
+export const addMark =
+  (type: MarkType, attrs?: Attrs | null): Command =>
+  (state, dispatch) => {
+    dispatch?.(
+      state.tr.addMark(
+        state.selection.from,
+        state.selection.to,
+        type.create(attrs)
+      )
+    );
+    return true;
+  };

shared/editor/commands/collapseSelection.ts

@@ -1,6 +1,11 @@
 import { Command, TextSelection } from "prosemirror-state";
 
-const collapseSelection = (): Command => (state, dispatch) => {
+/**
+ * A prosemirror command to collapse the current selection to a cursor at the start of the selection.
+ *
+ * @returns A prosemirror command.
+ */
+export const collapseSelection = (): Command => (state, dispatch) => {
   dispatch?.(
     state.tr.setSelection(
       TextSelection.create(state.doc, state.tr.selection.from)
@@ -8,5 +13,3 @@ const collapseSelection = (): Command => (state, dispatch) => {
   );
   return true;
 };
-
-export default collapseSelection;

shared/editor/commands/table.ts

@@ -14,7 +14,7 @@ import {
 import { chainTransactions } from "../lib/chainTransactions";
 import { getCellsInColumn, isHeaderEnabled } from "../queries/table";
 import { TableLayout } from "../types";
-import collapseSelection from "./collapseSelection";
+import { collapseSelection } from "./collapseSelection";
 
 export function createTable({
   rowsCount,

shared/editor/components/Styles.ts

@@ -857,14 +857,16 @@ h6 {
   opacity: 1;
 }
 
-.comment-marker {
-  border-bottom: 2px solid ${props.theme.commentMarkBackground};
-  transition: background 100ms ease-in-out;
-  border-radius: 2px;
+.${EditorStyleHelper.comment} {
+  &:not([data-resolved]) {
+    border-bottom: 2px solid ${props.theme.commentMarkBackground};
+    transition: background 100ms ease-in-out;
+    border-radius: 2px;
 
-  &:hover {
-    ${props.readOnly ? "cursor: var(--pointer);" : ""}
-    background: ${props.theme.commentMarkBackground};
+    &:hover {
+      ${props.readOnly ? "cursor: var(--pointer);" : ""}
+      background: ${props.theme.commentMarkBackground};
+    }
   }
 }
 
@@ -1768,7 +1770,7 @@ del[data-operation-index] {
     page-break-inside: avoid;
   }
 
-  .comment-marker {
+  .${EditorStyleHelper.comment} {
     border: 0;
     background: none;
   }

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);
               }
 

shared/editor/styles/EditorStyleHelper.ts

@@ -2,6 +2,10 @@
  * Class names and values used by the editor.
  */
 export class EditorStyleHelper {
+  // Comments
+
+  static readonly comment = "comment-marker";
+
   // Tables
 
   /** Table wrapper */
@@ -34,6 +38,8 @@ export class EditorStyleHelper {
   /** Shadow on the left side of the table */
   static readonly tableShadowLeft = "table-shadow-left";
 
+  // Global
+
   /** Minimum padding around editor */
   static readonly padding = 32;