From 864079e30bd2429de7b0fa49249e7c0bf78c22cd Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 23 May 2026 16:30:25 +0000
Subject: [PATCH] feat: add comment button to mermaid diagram toolbar

Allow users to comment on mermaid diagrams via the selection toolbar,
matching the existing comment-on-image pattern.

https://claude.ai/code/session_01E7BvJCgSpXJZdQEqj9mHgs
---
 app/editor/menus/code.tsx        | 15 ++++++++++++++-
 shared/editor/nodes/CodeFence.ts |  8 ++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/app/editor/menus/code.tsx b/app/editor/menus/code.tsx
index bc123fb81b..825a9c5580 100644
--- a/app/editor/menus/code.tsx
+++ b/app/editor/menus/code.tsx
@@ -1,4 +1,10 @@
-import { CopyIcon, EditIcon, ExpandedIcon, TextWrapIcon } from "outline-icons";
+import {
+  CommentIcon,
+  CopyIcon,
+  EditIcon,
+  ExpandedIcon,
+  TextWrapIcon,
+} from "outline-icons";
 import type { Node as ProseMirrorNode } from "prosemirror-model";
 import { NodeSelection } from "prosemirror-state";
 import type { EditorState } from "prosemirror-state";
@@ -71,6 +77,13 @@ export default function codeMenuItems(
       shortcut: `${metaDisplay} Enter`,
       visible: isMermaid(node) && !isEditingMermaid && !readOnly,
     },
+    {
+      name: "commentOnMermaid",
+      icon: <CommentIcon />,
+      tooltip: t("Comment"),
+      shortcut: `${metaDisplay}+⌥+M`,
+      visible: isMermaid(node) && !isEditingMermaid && !readOnly,
+    },
     {
       name: "separator",
     },
diff --git a/shared/editor/nodes/CodeFence.ts b/shared/editor/nodes/CodeFence.ts
index bca0828da6..bd76c1b025 100644
--- a/shared/editor/nodes/CodeFence.ts
+++ b/shared/editor/nodes/CodeFence.ts
@@ -20,6 +20,7 @@ import { toast } from "sonner";
 import type { Primitive } from "utility-types";
 import type { UserPreferences } from "../../types";
 import { isBrowser, isMac } from "../../utils/browser";
+import { addComment } from "../commands/comment";
 import backspaceToParagraph from "../commands/backspaceToParagraph";
 import {
   newlineInCode,
@@ -151,6 +152,8 @@ function buildCollapseState(
 type CodeFenceOptions = {
   /** Display preferences for the logged in user, if any. */
   userPreferences?: UserPreferences | null;
+  /** The id of the current user, used for comment attribution. */
+  userId?: string;
 };
 
 export default class CodeFence extends Node<CodeFenceOptions> {
@@ -178,6 +181,9 @@ export default class CodeFence extends Node<CodeFenceOptions> {
           default: false,
           validate: "boolean",
         },
+        marks: {
+          default: undefined,
+        },
       },
       content: "text*",
       marks: "comment",
@@ -333,6 +339,8 @@ export default class CodeFence extends Node<CodeFenceOptions> {
         }
         return true;
       },
+      commentOnMermaid: (): Command =>
+        addComment({ userId: this.options.userId }),
       copyToClipboard: (): Command => (state, dispatch) => {
         const codeBlock = findParentNode(isCode)(state.selection);