feat: Allow commenting in code (#5953)

* Allow commenting in code marks

* Allow commenting in code blocks

* Floating comment toolbar in code block

shared/editor/marks/Code.ts

@@ -41,7 +41,7 @@ export default class Code extends Mark {
 
   get schema(): MarkSpec {
     return {
-      excludes: "comment mention link placeholder highlight em strong",
+      excludes: "mention link placeholder highlight em strong",
       parseDOM: [{ tag: "code.inline", preserveWhitespace: true }],
       toDOM: () => ["code", { class: "inline", spellCheck: "false" }],
     };

shared/editor/marks/Comment.ts

@@ -109,14 +109,16 @@ export default class Comment extends Mark {
         props: {
           handleDOMEvents: {
             mouseup: (_view, event: MouseEvent) => {
-              if (
-                !(event.target instanceof HTMLSpanElement) ||
-                !event.target.classList.contains("comment-marker")
-              ) {
+              if (!(event.target instanceof HTMLElement)) {
                 return false;
               }
 
-              const commentId = event.target.id.replace("comment-", "");
+              const comment = event.target.closest(".comment-marker");
+              if (!comment) {
+                return false;
+              }
+
+              const commentId = comment.id.replace("comment-", "");
               if (commentId) {
                 this.options?.onClickCommentMark?.(commentId);
               }

shared/editor/nodes/CodeFence.ts

@@ -150,7 +150,7 @@ export default class CodeFence extends Node {
         },
       },
       content: "text*",
-      marks: "",
+      marks: "comment",
       group: "block",
       code: true,
       defining: true,

shared/editor/nodes/index.ts

@@ -118,4 +118,4 @@ export const richExtensions: Nodes = [
 /**
  * Add commenting and mentions to a set of nodes
  */
-export const withComments = (nodes: Nodes) => [Mention, Comment, ...nodes];
+export const withComments = (nodes: Nodes) => [...nodes, Mention, Comment];

shared/editor/queries/isInCode.ts

@@ -1,29 +1,40 @@
 import { EditorState } from "prosemirror-state";
 import isMarkActive from "./isMarkActive";
+import isNodeActive from "./isNodeActive";
+
+type Options = {
+  /** Only check if the selection is inside a code block. */
+  onlyBlock?: boolean;
+  /** Only check if the selection is inside a code mark. */
+  onlyMark?: boolean;
+};
 
 /**
  * Returns true if the selection is inside a code block or code mark.
  *
  * @param state The editor state.
+ * @param options The options.
  * @returns True if the selection is inside a code block or code mark.
  */
-export default function isInCode(state: EditorState): boolean {
+export default function isInCode(
+  state: EditorState,
+  options?: Options
+): boolean {
   const { nodes, marks } = state.schema;
 
-  if (nodes.code_block || nodes.code_fence) {
-    const $head = state.selection.$head;
-    for (let d = $head.depth; d > 0; d--) {
-      if (nodes.code_block && $head.node(d).type === nodes.code_block) {
-        return true;
-      }
-      if (nodes.code_fence && $head.node(d).type === nodes.code_fence) {
-        return true;
-      }
+  if (!options?.onlyMark) {
+    if (nodes.code_block && isNodeActive(nodes.code_block)(state)) {
+      return true;
+    }
+    if (nodes.code_fence && isNodeActive(nodes.code_fence)(state)) {
+      return true;
     }
   }
 
-  if (marks.code_inline) {
-    return isMarkActive(marks.code_inline)(state);
+  if (!options?.onlyBlock) {
+    if (marks.code_inline) {
+      return isMarkActive(marks.code_inline)(state);
+    }
   }
 
   return false;