From 854603f0f1b2b42aafdfa5e0f028c99330ce02f5 Mon Sep 17 00:00:00 2001
From: Nicanor Romero Venier <n.romero-venier@efg.gg>
Date: Mon, 3 Aug 2026 08:58:13 +0200
Subject: [PATCH 1/4] fix: support GitLab's rich text editor

The extension only ever targeted `<textarea>` elements. When GitLab
switches to "rich text editing" the textarea is swapped for a
Tiptap/ProseMirror `contenteditable`, so no toolbar was attached and
labels could not be inserted (#25).

Comment inputs are now driven through an editor-handle abstraction:

* `TextareaHandle` keeps the existing behaviour for GitHub and GitLab's
  markdown mode.
* `RichTextHandle` reads the current prefix straight from the rendered
  ProseMirror DOM (a leading `pullpo.io/cc` link for badges, leading text
  matching `PLAIN_CC_REGEX` otherwise) and writes through the editor
  instead of around it: badges are inserted with a synthetic `text/x-gfm`
  paste, which GitLab's `copyPaste` content-editor extension turns into
  real nodes, plain prefixes are typed with `insertText`, and removals go
  through ProseMirror's own `deleteSelection`.

The label/badge/regex definitions moved to `content/conventional-comments.js`
so both handles can share them.
---
 README.md                            |   1 +
 src/content/badges.js                | 341 ++++++---------------
 src/content/conventional-comments.js | 100 +++++++
 src/content/editors.js               | 426 +++++++++++++++++++++++++++
 src/content/platform.js              |   5 +
 5 files changed, 620 insertions(+), 253 deletions(-)
 create mode 100644 src/content/conventional-comments.js
 create mode 100644 src/content/editors.js

diff --git a/README.md b/README.md
index 13b5915..3fc5c96 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,7 @@ Code reviews are crucial for maintaining code quality, but they often suffer fro
   - `(if-minor)`: Address if the effort is small
 - 🔄 **Toggle Functionality**: Easily remove labels or decorations
 - 🎨 **Badge Style Option**: Switch between text and visual badge formats
+- 📝 **GitLab Rich Text Editing**: Works in both GitLab's markdown and rich text (content editor) modes
 - 🧩 **Slack Threads**: Integrated with Pullpo's PR-Channels add-on for direct Slack thread links
 - 🌓 **Dark Mode Support**: Seamlessly works with both GitHub and GitLab themes
 
diff --git a/src/content/badges.js b/src/content/badges.js
index a13ea3c..e0b9a87 100644
--- a/src/content/badges.js
+++ b/src/content/badges.js
@@ -1,54 +1,18 @@
 import Platform, { TOOLBAR_MARKER_CLASS } from "./platform.js";
-
-// --- Components of a Conventional Comment ---
-
-export const LABELS = [
-  { label: "praise", desc: "Highlight something positive.", color: "#28A745" },
-  {
-    label: "nitpick",
-    desc: "Minor, non-blocking issues (style, naming...).",
-    color: "#F59E0B",
-  },
-  {
-    label: "suggestion",
-    desc: "Suggest specific improvements.",
-    color: "#3B82F6",
-  },
-  {
-    label: "todo",
-    desc: "Mark something that needs to be done.",
-    color: "#E879F9",
-  },
-  { label: "issue", desc: "Point out a blocking problem.", color: "#EF4444" },
-  { label: "question", desc: "Ask for clarification.", color: "#8B5CF6" },
-  { label: "thought", desc: "Share a reflection or idea.", color: "#6B7280" },
-  { label: "chore", desc: "Request a minor, non-code task.", color: "#F97316" },
-];
-
-export const DECORATIONS = [
-  {
-    label: "non-blocking",
-    desc: "Optional change, doesn't block merge.",
-    color: "#9CA3AF",
-  },
-  {
-    label: "blocking",
-    desc: "Must be addressed before merge.",
-    color: "#374151",
-  },
-  {
-    label: "if-minor",
-    desc: "Address if the effort is small.",
-    color: "#14B8A6",
-  },
-];
-
-// --- Selector for formatted Conventional Comments ---
-
-export const PLAIN_CC_REGEX =
-  /^\s*(?:(praise|nitpick|suggestion|issue|question|thought|chore|todo)\s*(?:\((non-blocking|blocking|if-minor)\))?:)\s*/;
-export const BADGE_CC_REGEX =
-  /^\s*\[\!\[(?:(praise|nitpick|suggestion|issue|question|thought|chore|todo)(?:\((non-blocking|blocking|if-minor)\))?)\]\(https?:\/\/img\.shields\.io\/badge\/.*?\)\]\(https?:\/\/pullpo\.io\/cc\?.*?\)\s*/;
+import { createEditorHandle } from "./editors.js";
+import {
+  LABELS,
+  DECORATIONS,
+  createBadgeMarkdown,
+  createPlainMarkdown,
+} from "./conventional-comments.js";
+
+export {
+  LABELS,
+  DECORATIONS,
+  PLAIN_CC_REGEX,
+  BADGE_CC_REGEX,
+} from "./conventional-comments.js";
 
 // --- Toolbar selector Constants ---
 
@@ -60,114 +24,23 @@ const SETTINGS_BUTTON_ID_PREFIX = "cc-settings-button-";
 let toolbarCounter = 0;
 let settingsCounter = 0;
 
-// --- Badge Helpers ---
-
-function getBadgeColor(type) {
-  const label = LABELS.find((l) => l.label === type);
-  return label ? label.color.substring(1) : "6B7280";
-}
-
-function createBadgeMarkdown(type, decoration) {
-  const labelColor = getBadgeColor(type);
-  let label = type;
-  let message = decoration || "";
-  let decorationColor = "";
-
-  if (decoration) {
-    const decorObj = DECORATIONS.find((d) => d.label === decoration);
-    if (decorObj) {
-      decorationColor = decorObj.color.substring(1);
-    }
-  }
-
-  let badgeUrl;
-  const encode = (str) =>
-    encodeURIComponent(str.replace(/-/g, "--").replace(/_/g, "__"));
-
-  if (message) {
-    if (decorationColor) {
-      badgeUrl = `https://img.shields.io/badge/${encode(label)}-${encode(
-        message
-      )}-${decorationColor}?labelColor=${labelColor}`;
-    } else {
-      badgeUrl = `https://img.shields.io/badge/${encode(label)}-${encode(
-        message
-      )}-${labelColor}`;
-    }
-  } else {
-    badgeUrl = `https://img.shields.io/badge/${encode(label)}-${labelColor}`;
-  }
-
-  const badge = `![${type}${decoration ? `(${decoration})` : ""}](${badgeUrl})`;
-  const pullpoUrl = `https://pullpo.io/cc?l=${encodeURIComponent(type)}${
-    decoration ? `&d=${encodeURIComponent(decoration)}` : ""
-  }`;
-  return `[${badge}](${pullpoUrl}) `;
-}
-
-// --- LocalStorage Helpers ---
-
 // --- Core Function: Update Comment Prefix (Handles Text or Badge) ---
 
-function updateCommentPrefix(toolbar, textarea) {
-  const currentValue = textarea.value;
-  const originalSelectionStart = textarea.selectionStart;
-  const originalSelectionEnd = textarea.selectionEnd;
-
-  const newType = toolbar.dataset.selectedType;
-  const newDecoration = toolbar.dataset.selectedDecoration;
-  const newPrettified = toolbar.dataset.prettified === "true";
+function updateCommentPrefix(toolbar, editor) {
+  const type = toolbar.dataset.selectedType;
+  const decoration = toolbar.dataset.selectedDecoration;
+  const prettified = toolbar.dataset.prettified === "true";
 
-  const match =
-    currentValue.match(PLAIN_CC_REGEX) ?? currentValue.match(BADGE_CC_REGEX);
+  const markdown = prettified
+    ? createBadgeMarkdown(type, decoration)
+    : createPlainMarkdown(type, decoration);
 
-  let initialPrefix = "";
-  let subject = currentValue;
-
-  if (match) {
-    initialPrefix = match[0];
-    subject = currentValue.substring(initialPrefix.length);
-  }
-
-  let newPrefix, newValue;
-  if (newPrettified) {
-    newPrefix = createBadgeMarkdown(newType, newDecoration) + "\n";
-    newValue = newPrefix + subject.trimStart();
-  } else {
-    newPrefix = newType;
-    if (newDecoration) {
-      newPrefix += `(${newDecoration})`;
-    }
-    newPrefix += ": ";
-    newValue = newPrefix + subject;
-  }
-
-  let newSelectionStart = 0;
-  let newSelectionEnd = 0;
-
-  if (newType) {
-    newSelectionStart =
-      originalSelectionStart - initialPrefix.length + newPrefix.length;
-    newSelectionEnd =
-      originalSelectionEnd - initialPrefix.length + newPrefix.length;
-  } else {
-    newSelectionStart = originalSelectionStart - initialPrefix.length;
-    newSelectionEnd = originalSelectionEnd - initialPrefix.length;
-  }
-
-  textarea.value = newValue;
-  textarea.selectionStart = Math.max(0, newSelectionStart);
-  textarea.selectionEnd = Math.max(0, newSelectionEnd);
-
-  textarea.dispatchEvent(new Event("input", { bubbles: true }));
-  textarea.dispatchEvent(new Event("change", { bubbles: true }));
-
-  textarea.focus();
+  editor.writePrefix(markdown, prettified);
 }
 
 // --- Settings UI ---
 
-function createSettingsButton(toolbar, textarea) {
+function createSettingsButton(toolbar, editor) {
   const button = document.createElement("button");
   button.id = `${SETTINGS_BUTTON_ID_PREFIX}${settingsCounter}`;
   button.title = "Toggle prettify";
@@ -195,7 +68,7 @@ function createSettingsButton(toolbar, textarea) {
     button.classList.toggle("cc-settings-button-active", newState);
 
     if (toolbar.dataset.selectedType) {
-      updateCommentPrefix(toolbar, textarea);
+      updateCommentPrefix(toolbar, editor);
     }
   });
 
@@ -205,7 +78,7 @@ function createSettingsButton(toolbar, textarea) {
 
 // --- Render Toolbar ---
 
-function renderToolbar(toolbar, textarea) {
+function renderToolbar(toolbar, editor) {
   const state = toolbar.dataset.state || "initial";
   const selectedType = toolbar.dataset.selectedType || null;
   const selectedDecoration = toolbar.dataset.selectedDecoration || null;
@@ -232,20 +105,16 @@ function renderToolbar(toolbar, textarea) {
           toolbar.dataset.selectedDecoration = "";
           toolbar.dataset.state = "initial";
 
-          textarea.value = textarea.value
-            .replace(PLAIN_CC_REGEX, "")
-            .replace(BADGE_CC_REGEX, "");
-          textarea.dispatchEvent(new Event("input", { bubbles: true }));
-          textarea.dispatchEvent(new Event("change", { bubbles: true }));
+          editor.clearPrefix();
         } else {
           toolbar.dataset.selectedType = item.label;
           toolbar.dataset.selectedDecoration = "";
           toolbar.dataset.state = "typeSelected";
 
-          updateCommentPrefix(toolbar, textarea);
+          updateCommentPrefix(toolbar, editor);
         }
 
-        renderToolbar(toolbar, textarea);
+        renderToolbar(toolbar, editor);
       });
       toolbar.appendChild(button);
     });
@@ -258,7 +127,7 @@ function renderToolbar(toolbar, textarea) {
 
     typeLabel.addEventListener("click", () => {
       toolbar.dataset.state = "changeType";
-      renderToolbar(toolbar, textarea);
+      renderToolbar(toolbar, editor);
     });
     toolbar.appendChild(typeLabel);
 
@@ -283,40 +152,41 @@ function renderToolbar(toolbar, textarea) {
 
         if (currentSelectedDecoration === decItem.label) {
           toolbar.dataset.selectedDecoration = "";
-          updateCommentPrefix(toolbar, textarea);
         } else {
           toolbar.dataset.selectedDecoration = decItem.label;
-          updateCommentPrefix(toolbar, textarea);
         }
+        updateCommentPrefix(toolbar, editor);
 
-        renderToolbar(toolbar, textarea);
+        renderToolbar(toolbar, editor);
       });
       toolbar.appendChild(button);
     });
   }
 
-  const settingsButton = createSettingsButton(toolbar, textarea);
+  const settingsButton = createSettingsButton(toolbar, editor);
   const settingsButtonWrapper = document.createElement("div");
   settingsButtonWrapper.classList.add("cc-toolbar-settings-item");
   settingsButtonWrapper.appendChild(settingsButton);
   toolbar.appendChild(settingsButtonWrapper);
 }
 
-// --- Initialize Toolbar for a Textarea ---
+// --- Initialize Toolbar for a comment input ---
+
+function initializeToolbarForElement(element) {
+  const editor = createEditorHandle(element);
 
-function initializeToolbarForTextarea(textarea) {
-  const textareaId =
-    textarea.id ||
-    textarea.name ||
+  const elementId =
+    element.id ||
+    element.name ||
     `cc-textarea-${Math.random().toString(36).substring(2, 9)}`;
-  if (!textarea.id) textarea.id = textareaId;
+  if (!element.id) element.id = elementId;
 
   const toolbar = document.createElement("div");
   toolbar.id = `${TOOLBAR_ID_PREFIX}${toolbarCounter++}`;
-  toolbar.dataset.textareaId = textarea.id;
+  toolbar.dataset.textareaId = element.id;
   toolbar.classList.add("cc-toolbar");
 
-  const initialState = extractInitialTextareaState(textarea);
+  const initialState = extractInitialState(editor);
   toolbar.dataset.state = initialState.state;
   toolbar.dataset.selectedType = initialState.label;
   toolbar.dataset.selectedDecoration = initialState.decorator;
@@ -324,51 +194,25 @@ function initializeToolbarForTextarea(textarea) {
 
   toolbar.style.display = "flex";
 
-  renderToolbar(toolbar, textarea);
-
-  const hasGithubMarkdownClass = Array.from(textarea.classList).some((name) =>
-    name.startsWith("prc-Textarea-TextArea-")
-  );
-  const githubWrapper = textarea.closest(
-    '[class*="MarkdownInput-module__textArea"], [class*="TextInputBaseWrapper"]'
-  );
-
-  if (hasGithubMarkdownClass || githubWrapper) {
-    // GitHub's new editor wraps the textarea in a flex container; insert above it.
-    if (githubWrapper && githubWrapper.parentNode) {
-      githubWrapper.parentNode.insertBefore(toolbar, githubWrapper);
-    } else {
-      textarea.parentNode?.insertBefore(toolbar, textarea);
-    }
-  } else {
-    textarea.parentNode?.insertBefore(toolbar, textarea);
-  }
+  renderToolbar(toolbar, editor);
 
-  textarea.classList.add(TOOLBAR_MARKER_CLASS);
+  const mountPoint = editor.getMountPoint();
+  mountPoint.parentNode?.insertBefore(toolbar, mountPoint);
+
+  element.classList.add(TOOLBAR_MARKER_CLASS);
 }
 
-// --- Detect initial textarea state ---
+// --- Detect initial comment input state ---
 
-function extractInitialTextareaState(textarea) {
-  const initialValue = textarea.value;
+function extractInitialState(editor) {
+  const prefix = editor.readPrefix();
 
-  const plainMatch = initialValue.match(PLAIN_CC_REGEX);
-  if (plainMatch) {
+  if (prefix) {
     return {
       state: "typeSelected",
-      label: plainMatch[1],
-      decorator: plainMatch[2],
-      prettified: "false",
-    };
-  }
-
-  const badgeMatch = initialValue.match(BADGE_CC_REGEX);
-  if (badgeMatch) {
-    return {
-      state: "typeSelected",
-      label: badgeMatch[1],
-      decorator: badgeMatch[2],
-      prettified: "true",
+      label: prefix.label ?? "",
+      decorator: prefix.decoration ?? "",
+      prettified: String(prefix.prettified),
     };
   }
 
@@ -382,30 +226,37 @@ function extractInitialTextareaState(textarea) {
 
 // --- Public: process comment areas ---
 
-export function processCommentAreas() {
-  const query = Platform.strategy.getUnprocessedTextareaQuery();
-  const commentTextareas = document.querySelectorAll(query);
-
-  commentTextareas.forEach((textarea) => {
-    textarea.placeholder = "Add your comment here...";
-
-    const commentBoxContainer = textarea.closest(".CommentBox-container");
-    if (commentBoxContainer) {
-      const placeholderElement = commentBoxContainer.querySelector(
-        ".CommentBox-placeholder"
-      );
-      if (placeholderElement) {
-        placeholderElement.remove();
-      }
-    }
+function prepareElement(element, placeholder) {
+  // Rich text editors render their own placeholder and have no `placeholder`
+  // attribute, so only textareas are touched here.
+  if (element.tagName === "TEXTAREA") {
+    element.placeholder = placeholder;
+  }
 
-    if (!textarea.id) {
-      textarea.id = `cc-textarea-${Date.now()}-${Math.random()
-        .toString(36)
-        .substring(2, 7)}`;
+  const commentBoxContainer = element.closest(".CommentBox-container");
+  if (commentBoxContainer) {
+    const placeholderElement = commentBoxContainer.querySelector(
+      ".CommentBox-placeholder"
+    );
+    if (placeholderElement) {
+      placeholderElement.remove();
     }
+  }
+
+  if (!element.id) {
+    element.id = `cc-textarea-${Date.now()}-${Math.random()
+      .toString(36)
+      .substring(2, 7)}`;
+  }
+}
+
+export function processCommentAreas() {
+  const query = Platform.strategy.getUnprocessedTextareaQuery();
+  const commentAreas = document.querySelectorAll(query);
 
-    initializeToolbarForTextarea(textarea);
+  commentAreas.forEach((element) => {
+    prepareElement(element, "Add your comment here...");
+    initializeToolbarForElement(element);
   });
 }
 
@@ -418,29 +269,13 @@ export function checkAndInitializeAddedTextareas(node) {
     node.matches(query) &&
     !node.classList.contains(TOOLBAR_MARKER_CLASS)
   ) {
-    node.placeholder = "";
-    initializeToolbarForTextarea(node);
+    prepareElement(node, "");
+    initializeToolbarForElement(node);
   } else if (node.querySelectorAll) {
-    const textareas = node.querySelectorAll(query);
-    textareas.forEach((textarea) => {
-      textarea.placeholder = "Add your comment here...";
-      const commentBoxContainer = textarea.closest(".CommentBox-container");
-      if (commentBoxContainer) {
-        const placeholderElement = commentBoxContainer.querySelector(
-          ".CommentBox-placeholder"
-        );
-        if (placeholderElement) {
-          placeholderElement.remove();
-        }
-      }
-
-      if (!textarea.id) {
-        textarea.id = `cc-textarea-${Date.now()}-${Math.random()
-          .toString(36)
-          .substring(2, 7)}`;
-      }
-
-      initializeToolbarForTextarea(textarea);
+    const elements = node.querySelectorAll(query);
+    elements.forEach((element) => {
+      prepareElement(element, "Add your comment here...");
+      initializeToolbarForElement(element);
     });
   }
 }
diff --git a/src/content/conventional-comments.js b/src/content/conventional-comments.js
new file mode 100644
index 0000000..c7266c6
--- /dev/null
+++ b/src/content/conventional-comments.js
@@ -0,0 +1,100 @@
+// --- Components of a Conventional Comment ---
+
+export const LABELS = [
+  { label: "praise", desc: "Highlight something positive.", color: "#28A745" },
+  {
+    label: "nitpick",
+    desc: "Minor, non-blocking issues (style, naming...).",
+    color: "#F59E0B",
+  },
+  {
+    label: "suggestion",
+    desc: "Suggest specific improvements.",
+    color: "#3B82F6",
+  },
+  {
+    label: "todo",
+    desc: "Mark something that needs to be done.",
+    color: "#E879F9",
+  },
+  { label: "issue", desc: "Point out a blocking problem.", color: "#EF4444" },
+  { label: "question", desc: "Ask for clarification.", color: "#8B5CF6" },
+  { label: "thought", desc: "Share a reflection or idea.", color: "#6B7280" },
+  { label: "chore", desc: "Request a minor, non-code task.", color: "#F97316" },
+];
+
+export const DECORATIONS = [
+  {
+    label: "non-blocking",
+    desc: "Optional change, doesn't block merge.",
+    color: "#9CA3AF",
+  },
+  {
+    label: "blocking",
+    desc: "Must be addressed before merge.",
+    color: "#374151",
+  },
+  {
+    label: "if-minor",
+    desc: "Address if the effort is small.",
+    color: "#14B8A6",
+  },
+];
+
+// --- Selectors for formatted Conventional Comments ---
+
+export const BADGE_LINK_HOST_PATH = "pullpo.io/cc";
+
+export const PLAIN_CC_REGEX =
+  /^\s*(?:(praise|nitpick|suggestion|issue|question|thought|chore|todo)\s*(?:\((non-blocking|blocking|if-minor)\))?:)\s*/;
+export const BADGE_CC_REGEX =
+  /^\s*\[\!\[(?:(praise|nitpick|suggestion|issue|question|thought|chore|todo)(?:\((non-blocking|blocking|if-minor)\))?)\]\(https?:\/\/img\.shields\.io\/badge\/.*?\)\]\(https?:\/\/pullpo\.io\/cc\?.*?\)\s*/;
+
+// --- Badge helpers ---
+
+function getBadgeColor(type) {
+  const label = LABELS.find((l) => l.label === type);
+  return label ? label.color.substring(1) : "6B7280";
+}
+
+export function createBadgeMarkdown(type, decoration) {
+  const labelColor = getBadgeColor(type);
+  let label = type;
+  let message = decoration || "";
+  let decorationColor = "";
+
+  if (decoration) {
+    const decorObj = DECORATIONS.find((d) => d.label === decoration);
+    if (decorObj) {
+      decorationColor = decorObj.color.substring(1);
+    }
+  }
+
+  let badgeUrl;
+  const encode = (str) =>
+    encodeURIComponent(str.replace(/-/g, "--").replace(/_/g, "__"));
+
+  if (message) {
+    if (decorationColor) {
+      badgeUrl = `https://img.shields.io/badge/${encode(label)}-${encode(
+        message
+      )}-${decorationColor}?labelColor=${labelColor}`;
+    } else {
+      badgeUrl = `https://img.shields.io/badge/${encode(label)}-${encode(
+        message
+      )}-${labelColor}`;
+    }
+  } else {
+    badgeUrl = `https://img.shields.io/badge/${encode(label)}-${labelColor}`;
+  }
+
+  const badge = `![${type}${decoration ? `(${decoration})` : ""}](${badgeUrl})`;
+  const pullpoUrl = `https://pullpo.io/cc?l=${encodeURIComponent(type)}${
+    decoration ? `&d=${encodeURIComponent(decoration)}` : ""
+  }`;
+  return `[${badge}](${pullpoUrl}) `;
+}
+
+export function createPlainMarkdown(type, decoration) {
+  return `${type}${decoration ? `(${decoration})` : ""}: `;
+}
diff --git a/src/content/editors.js b/src/content/editors.js
new file mode 100644
index 0000000..dc2b07a
--- /dev/null
+++ b/src/content/editors.js
@@ -0,0 +1,426 @@
+// --- Editor handles ---
+//
+// The extension drives two very different kinds of comment inputs:
+//
+//   * a plain `<textarea>` (GitHub, and GitLab's "markdown" editing mode)
+//   * a ProseMirror/Tiptap `contenteditable` (GitLab's "rich text" editing mode)
+//
+// Both are wrapped behind the same handle interface so the toolbar code does not
+// have to know which one it is talking to:
+//
+//   getMountPoint()                    element the toolbar is inserted before
+//   readPrefix()                       { label, decoration, prettified } | null
+//   writePrefix(markdown, prettified)  replace the current CC prefix
+//   clearPrefix()                      remove the current CC prefix
+//   focus()
+
+import {
+  BADGE_LINK_HOST_PATH,
+  PLAIN_CC_REGEX,
+  BADGE_CC_REGEX,
+} from "./conventional-comments.js";
+
+export const RICH_TEXT_SELECTORS = [
+  '[data-testid="content_editor_editablebox"] div.ProseMirror[contenteditable="true"]',
+  "div.md-content-editor-wrapper div.ProseMirror[contenteditable='true']",
+];
+
+// Anchor wrapping a prettified badge; the href is built by `createBadgeMarkdown`.
+const BADGE_ANCHOR_SELECTOR = `a[href*="${BADGE_LINK_HOST_PATH}"]`;
+
+const RICH_TEXT_WRITE_TIMEOUT_MS = 5000;
+
+export function isRichTextElement(element) {
+  return element instanceof HTMLElement && element.isContentEditable;
+}
+
+function nextTask() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+// --- Textarea handle ---
+
+class TextareaHandle {
+  constructor(textarea) {
+    this.element = textarea;
+    this.isRichText = false;
+  }
+
+  getMountPoint() {
+    const githubWrapper = this.element.closest(
+      '[class*="MarkdownInput-module__textArea"], [class*="TextInputBaseWrapper"]'
+    );
+    const hasGithubMarkdownClass = Array.from(this.element.classList).some(
+      (name) => name.startsWith("prc-Textarea-TextArea-")
+    );
+
+    // GitHub's new editor wraps the textarea in a flex container; mount above it.
+    if (
+      (hasGithubMarkdownClass || githubWrapper) &&
+      githubWrapper?.parentNode
+    ) {
+      return githubWrapper;
+    }
+    return this.element;
+  }
+
+  readPrefix() {
+    const value = this.element.value;
+
+    const plainMatch = value.match(PLAIN_CC_REGEX);
+    if (plainMatch) {
+      return {
+        label: plainMatch[1],
+        decoration: plainMatch[2],
+        prettified: false,
+      };
+    }
+
+    const badgeMatch = value.match(BADGE_CC_REGEX);
+    if (badgeMatch) {
+      return {
+        label: badgeMatch[1],
+        decoration: badgeMatch[2],
+        prettified: true,
+      };
+    }
+
+    return null;
+  }
+
+  writePrefix(markdown, prettified) {
+    const textarea = this.element;
+    const currentValue = textarea.value;
+    const originalSelectionStart = textarea.selectionStart;
+    const originalSelectionEnd = textarea.selectionEnd;
+
+    const match =
+      currentValue.match(PLAIN_CC_REGEX) ?? currentValue.match(BADGE_CC_REGEX);
+    const initialPrefix = match ? match[0] : "";
+    const subject = currentValue.substring(initialPrefix.length);
+
+    // Badges sit on their own line; plain labels stay inline with the comment.
+    const newPrefix = prettified ? `${markdown}\n` : markdown;
+    const newValue = prettified
+      ? newPrefix + subject.trimStart()
+      : newPrefix + subject;
+
+    const offset = newPrefix.length - initialPrefix.length;
+
+    textarea.value = newValue;
+    textarea.selectionStart = Math.max(0, originalSelectionStart + offset);
+    textarea.selectionEnd = Math.max(0, originalSelectionEnd + offset);
+
+    this.notify();
+    this.focus();
+  }
+
+  clearPrefix() {
+    const textarea = this.element;
+    const currentValue = textarea.value;
+    const match =
+      currentValue.match(PLAIN_CC_REGEX) ?? currentValue.match(BADGE_CC_REGEX);
+    if (!match) return;
+
+    const removed = match[0].length;
+    const selectionStart = Math.max(0, textarea.selectionStart - removed);
+    const selectionEnd = Math.max(0, textarea.selectionEnd - removed);
+
+    textarea.value = currentValue.substring(removed);
+    textarea.selectionStart = selectionStart;
+    textarea.selectionEnd = selectionEnd;
+
+    this.notify();
+  }
+
+  notify() {
+    this.element.dispatchEvent(new Event("input", { bubbles: true }));
+    this.element.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+
+  focus() {
+    this.element.focus();
+  }
+}
+
+// --- Rich text (ProseMirror) handle ---
+
+function isBlank(node) {
+  return node.nodeType === Node.TEXT_NODE && !node.textContent.trim();
+}
+
+function isSeparator(node) {
+  return isBlank(node) || node.nodeName === "BR";
+}
+
+// Elements ProseMirror injects purely for rendering; they carry no content.
+function isArtifact(node) {
+  return (
+    node.nodeType === Node.ELEMENT_NODE &&
+    (node.classList.contains("ProseMirror-trailingBreak") ||
+      node.classList.contains("ProseMirror-separator"))
+  );
+}
+
+// First block-level child of the ProseMirror document, where a prefix would live.
+function getFirstBlock(root) {
+  return root.firstElementChild;
+}
+
+function parseBadgeAnchor(anchor) {
+  try {
+    const url = new URL(anchor.href, window.location.origin);
+    return {
+      label: url.searchParams.get("l"),
+      decoration: url.searchParams.get("d"),
+    };
+  } catch {
+    return { label: null, decoration: null };
+  }
+}
+
+// Walks the text nodes of `block` and returns the DOM position `offset` chars in.
+function positionAtTextOffset(block, offset) {
+  const walker = document.createTreeWalker(block, NodeFilter.SHOW_TEXT);
+  let consumed = 0;
+
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    const length = node.textContent.length;
+    if (consumed + length >= offset) {
+      return { node, offset: offset - consumed };
+    }
+    consumed += length;
+  }
+
+  return null;
+}
+
+class RichTextHandle {
+  constructor(element) {
+    this.element = element;
+    this.isRichText = true;
+    // Writes are asynchronous (ProseMirror has to observe our DOM selection
+    // before it acts on it), so serialize them to survive rapid clicking.
+    this.pending = Promise.resolve();
+  }
+
+  getMountPoint() {
+    // The ProseMirror node must not gain children of ours, so mount the toolbar
+    // above its wrapper (`[data-testid="content_editor_editablebox"]`).
+    return this.element.parentElement ?? this.element;
+  }
+
+  // Describes the CC prefix currently rendered in the editor, if any.
+  //
+  //   range           just the prefix
+  //   rangeToDelete   the prefix plus the separator that follows it
+  //   hasSeparator    whether whitespace already follows the prefix
+  findPrefix() {
+    const block = getFirstBlock(this.element);
+    if (!block) return null;
+
+    const first = Array.from(block.childNodes).find(
+      (node) => !isBlank(node) && !isArtifact(node)
+    );
+
+    if (first?.nodeType === Node.ELEMENT_NODE) {
+      const anchor = first.matches?.(BADGE_ANCHOR_SELECTOR)
+        ? first
+        : first.querySelector?.(BADGE_ANCHOR_SELECTOR);
+
+      if (anchor) {
+        const range = document.createRange();
+        range.setStartBefore(block.firstChild);
+        range.setEndAfter(first);
+
+        const rangeToDelete = range.cloneRange();
+        let hasSeparator = false;
+        for (
+          let sibling = first.nextSibling;
+          sibling;
+          sibling = sibling.nextSibling
+        ) {
+          if (isArtifact(sibling)) continue;
+          if (isSeparator(sibling)) {
+            rangeToDelete.setEndAfter(sibling);
+            hasSeparator = true;
+            continue;
+          }
+          // The space we add after a badge belongs to the prefix, not the body.
+          const leading = sibling.textContent?.match(/^\s+/);
+          if (leading && sibling.nodeType === Node.TEXT_NODE) {
+            rangeToDelete.setEnd(sibling, leading[0].length);
+          }
+          hasSeparator ||= Boolean(leading);
+          break;
+        }
+
+        return {
+          range,
+          rangeToDelete,
+          hasSeparator,
+          prettified: true,
+          ...parseBadgeAnchor(anchor),
+        };
+      }
+    }
+
+    const match = block.textContent.match(PLAIN_CC_REGEX);
+    if (match) {
+      const start = positionAtTextOffset(block, 0);
+      const end = positionAtTextOffset(block, match[0].length);
+      if (!start || !end) return null;
+
+      const range = document.createRange();
+      range.setStart(start.node, start.offset);
+      range.setEnd(end.node, end.offset);
+
+      return {
+        range,
+        rangeToDelete: range.cloneRange(),
+        hasSeparator: true,
+        prettified: false,
+        label: match[1],
+        decoration: match[2],
+      };
+    }
+
+    return null;
+  }
+
+  readPrefix() {
+    const found = this.findPrefix();
+    if (!found) return null;
+
+    return {
+      label: found.label,
+      decoration: found.decoration,
+      prettified: found.prettified,
+    };
+  }
+
+  writePrefix(markdown, prettified) {
+    return this.enqueue(async () => {
+      const hadPrefix = await this.selectPrefix();
+
+      if (prettified) {
+        // GitLab replaces the selection itself when handling the paste.
+        this.pasteMarkdown(markdown);
+        await this.awaitBadge();
+      } else {
+        // Deleting through ProseMirror first keeps atoms (a badge image) from
+        // being half-removed by the browser's own text insertion.
+        if (hadPrefix) this.pressBackspace();
+        // Plain prefixes are literal text: typing them preserves the trailing
+        // space that a markdown round-trip would otherwise strip.
+        document.execCommand("insertText", false, markdown);
+      }
+
+      this.focus();
+    });
+  }
+
+  clearPrefix() {
+    return this.enqueue(async () => {
+      if (await this.selectPrefix()) this.pressBackspace();
+      this.focus();
+    });
+  }
+
+  enqueue(task) {
+    this.pending = this.pending.then(task, task);
+    return this.pending;
+  }
+
+  // Focuses the editor and selects the existing prefix (collapsing the caret at
+  // the start of the document when there is none). Returns whether one existed.
+  async selectPrefix() {
+    this.element.focus();
+
+    const found = this.findPrefix();
+    this.setSelection(found?.rangeToDelete ?? this.startOfDocument());
+    await nextTask();
+
+    return Boolean(found);
+  }
+
+  startOfDocument() {
+    const range = document.createRange();
+    range.setStart(getFirstBlock(this.element) ?? this.element, 0);
+    range.collapse(true);
+    return range;
+  }
+
+  setSelection(range) {
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+
+    // ProseMirror only reads the DOM selection when it sees `selectionchange`,
+    // which browsers fire asynchronously; nudge it so the next write is in sync.
+    document.dispatchEvent(new Event("selectionchange"));
+  }
+
+  // GitLab's `copyPaste` content-editor extension turns pasted `text/x-gfm` into
+  // real nodes (an image inside a link), which is what a badge needs to render.
+  pasteMarkdown(markdown) {
+    const data = new DataTransfer();
+    // GitLab bails out early when `text/plain` is empty, so provide both formats.
+    data.setData("text/plain", markdown);
+    data.setData("text/x-gfm", markdown);
+
+    this.element.dispatchEvent(
+      new ClipboardEvent("paste", {
+        clipboardData: data,
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+  }
+
+  // ProseMirror maps Backspace to `deleteSelection`, which removes atoms (the
+  // badge image) far more reliably than mutating the contenteditable ourselves.
+  pressBackspace() {
+    this.element.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: "Backspace",
+        code: "Backspace",
+        keyCode: 8,
+        which: 8,
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+  }
+
+  // Pasting markdown is resolved asynchronously by GitLab, so wait for the badge
+  // to land before restoring the caret and separating it from the comment body.
+  async awaitBadge() {
+    const deadline = Date.now() + RICH_TEXT_WRITE_TIMEOUT_MS;
+
+    let found = this.findPrefix();
+    while (!found?.prettified && Date.now() < deadline) {
+      await nextTask();
+      found = this.findPrefix();
+    }
+    if (!found?.prettified) return;
+
+    const caret = found.range.cloneRange();
+    caret.collapse(false);
+    this.setSelection(caret);
+    await nextTask();
+
+    // The markdown renderer trims the trailing space of the badge prefix.
+    if (!found.hasSeparator) document.execCommand("insertText", false, " ");
+  }
+
+  focus() {
+    this.element.focus();
+  }
+}
+
+export function createEditorHandle(element) {
+  return isRichTextElement(element)
+    ? new RichTextHandle(element)
+    : new TextareaHandle(element);
+}
diff --git a/src/content/platform.js b/src/content/platform.js
index f25c34d..9818582 100644
--- a/src/content/platform.js
+++ b/src/content/platform.js
@@ -1,3 +1,5 @@
+import { RICH_TEXT_SELECTORS } from "./editors.js";
+
 // --- Selector marker constants used across modules ---
 
 export const TOOLBAR_MARKER_CLASS = "cc-toolbar-added";
@@ -40,8 +42,11 @@ const GITHUB_CONFIG_NEW = {
 
 const GITLAB_CONFIG = {
   targetTextareaSelectors: [
+    // Markdown editing mode
     'textarea[name="note[note]"]',
     'textarea[name="work-item-add-or-edit-comment"]',
+    // Rich text editing mode (Tiptap/ProseMirror content editor)
+    ...RICH_TEXT_SELECTORS,
   ],
   targetThreadSelectors: ["div[data-discussion-id]"],
   slackThreadButtonClassName:

From 398a47632ac345600bdc02a27cb4848f44999233 Mon Sep 17 00:00:00 2001
From: Nicanor Romero Venier <n.romero-venier@efg.gg>
Date: Mon, 3 Aug 2026 09:08:01 +0200
Subject: [PATCH 2/4] fix: keep the toolbar clear of GitLab's rich text
 placeholder
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`content_editor.vue` renders the "Write a comment…" empty state as an
absolutely positioned sibling of the editable box, so its top edge is
pinned to wherever the editor header ends. Mounting the toolbar between
the header and the editable box therefore drew the two on top of each
other.

Mount into the header instead. Placement is now the handle's
responsibility (`mountToolbar`) rather than something the toolbar code
derives from a single anchor node.
---
 src/content/badges.js  |  3 +--
 src/content/editors.js | 32 +++++++++++++++++++++++++++-----
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/content/badges.js b/src/content/badges.js
index e0b9a87..aca6023 100644
--- a/src/content/badges.js
+++ b/src/content/badges.js
@@ -196,8 +196,7 @@ function initializeToolbarForElement(element) {
 
   renderToolbar(toolbar, editor);
 
-  const mountPoint = editor.getMountPoint();
-  mountPoint.parentNode?.insertBefore(toolbar, mountPoint);
+  editor.mountToolbar(toolbar);
 
   element.classList.add(TOOLBAR_MARKER_CLASS);
 }
diff --git a/src/content/editors.js b/src/content/editors.js
index dc2b07a..7a1d7e9 100644
--- a/src/content/editors.js
+++ b/src/content/editors.js
@@ -8,7 +8,7 @@
 // Both are wrapped behind the same handle interface so the toolbar code does not
 // have to know which one it is talking to:
 //
-//   getMountPoint()                    element the toolbar is inserted before
+//   mountToolbar(toolbar)              place the toolbar next to the input
 //   readPrefix()                       { label, decoration, prettified } | null
 //   writePrefix(markdown, prettified)  replace the current CC prefix
 //   clearPrefix()                      remove the current CC prefix
@@ -28,6 +28,9 @@ export const RICH_TEXT_SELECTORS = [
 // Anchor wrapping a prettified badge; the href is built by `createBadgeMarkdown`.
 const BADGE_ANCHOR_SELECTOR = `a[href*="${BADGE_LINK_HOST_PATH}"]`;
 
+const CONTENT_EDITOR_SELECTOR = '[data-testid="content-editor"]';
+const CONTENT_EDITOR_HEADER_SELECTOR = '[data-testid="content-editor-header"]';
+
 const RICH_TEXT_WRITE_TIMEOUT_MS = 5000;
 
 export function isRichTextElement(element) {
@@ -46,6 +49,11 @@ class TextareaHandle {
     this.isRichText = false;
   }
 
+  mountToolbar(toolbar) {
+    const anchor = this.getMountPoint();
+    anchor.parentNode?.insertBefore(toolbar, anchor);
+  }
+
   getMountPoint() {
     const githubWrapper = this.element.closest(
       '[class*="MarkdownInput-module__textArea"], [class*="TextInputBaseWrapper"]'
@@ -204,10 +212,24 @@ class RichTextHandle {
     this.pending = Promise.resolve();
   }
 
-  getMountPoint() {
-    // The ProseMirror node must not gain children of ours, so mount the toolbar
-    // above its wrapper (`[data-testid="content_editor_editablebox"]`).
-    return this.element.parentElement ?? this.element;
+  mountToolbar(toolbar) {
+    // GitLab draws the "Write a comment…" placeholder as an absolutely
+    // positioned sibling of the editable box, so its top edge is wherever the
+    // editor header ends. Anything inserted between the two is rendered
+    // underneath it; appending to the header keeps both readable.
+    const header = this.element
+      .closest(CONTENT_EDITOR_SELECTOR)
+      ?.querySelector(`:scope > ${CONTENT_EDITOR_HEADER_SELECTOR}`);
+
+    if (header) {
+      header.appendChild(toolbar);
+      return;
+    }
+
+    // The ProseMirror node must not gain children of ours, so fall back to
+    // mounting above its wrapper.
+    const anchor = this.element.parentElement ?? this.element;
+    anchor.parentNode?.insertBefore(toolbar, anchor);
   }
 
   // Describes the CC prefix currently rendered in the editor, if any.

From f747e604be57eb6bf2a2220e534a302deece4917 Mon Sep 17 00:00:00 2001
From: Nicanor Romero Venier <n.romero-venier@efg.gg>
Date: Mon, 3 Aug 2026 09:17:33 +0200
Subject: [PATCH 3/4] fix: stop GitLab stacking badges when a decoration is
 picked
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`pasteContent` drops the selection a microtask after the paste event and
only inserts the rendered markdown once the renderer has answered, so the
badge being replaced is still on screen when the paste handler returns.
`awaitBadge` matched it, concluded the write was done and collapsed the
caret — clearing the selection that GitLab was about to delete. The old
badge survived and the new one landed next to it.

Wait for a badge anchored to a different node than the one we set out to
replace.
---
 src/content/editors.js | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/content/editors.js b/src/content/editors.js
index 7a1d7e9..1c108a2 100644
--- a/src/content/editors.js
+++ b/src/content/editors.js
@@ -282,6 +282,7 @@ class RichTextHandle {
           rangeToDelete,
           hasSeparator,
           prettified: true,
+          anchor,
           ...parseBadgeAnchor(anchor),
         };
       }
@@ -302,6 +303,7 @@ class RichTextHandle {
         rangeToDelete: range.cloneRange(),
         hasSeparator: true,
         prettified: false,
+        anchor: null,
         label: match[1],
         decoration: match[2],
       };
@@ -323,16 +325,16 @@ class RichTextHandle {
 
   writePrefix(markdown, prettified) {
     return this.enqueue(async () => {
-      const hadPrefix = await this.selectPrefix();
+      const previous = await this.selectPrefix();
 
       if (prettified) {
         // GitLab replaces the selection itself when handling the paste.
         this.pasteMarkdown(markdown);
-        await this.awaitBadge();
+        await this.awaitBadge(previous?.anchor ?? null);
       } else {
         // Deleting through ProseMirror first keeps atoms (a badge image) from
         // being half-removed by the browser's own text insertion.
-        if (hadPrefix) this.pressBackspace();
+        if (previous) this.pressBackspace();
         // Plain prefixes are literal text: typing them preserves the trailing
         // space that a markdown round-trip would otherwise strip.
         document.execCommand("insertText", false, markdown);
@@ -355,7 +357,7 @@ class RichTextHandle {
   }
 
   // Focuses the editor and selects the existing prefix (collapsing the caret at
-  // the start of the document when there is none). Returns whether one existed.
+  // the start of the document when there is none). Returns the prefix it found.
   async selectPrefix() {
     this.element.focus();
 
@@ -363,7 +365,7 @@ class RichTextHandle {
     this.setSelection(found?.rangeToDelete ?? this.startOfDocument());
     await nextTask();
 
-    return Boolean(found);
+    return found;
   }
 
   startOfDocument() {
@@ -415,17 +417,23 @@ class RichTextHandle {
     );
   }
 
-  // Pasting markdown is resolved asynchronously by GitLab, so wait for the badge
-  // to land before restoring the caret and separating it from the comment body.
-  async awaitBadge() {
+  // Pasting markdown is resolved asynchronously by GitLab: the selection is only
+  // dropped a microtask later, and the badge itself lands after a round trip to
+  // the markdown renderer. Waiting for merely *a* badge would therefore match the
+  // one still on screen and move the caret out of the selection GitLab is about
+  // to delete, leaving the old badge behind — so wait for a different node.
+  async awaitBadge(previousAnchor) {
     const deadline = Date.now() + RICH_TEXT_WRITE_TIMEOUT_MS;
 
+    const isNewBadge = (found) =>
+      found?.prettified && found.anchor !== previousAnchor;
+
     let found = this.findPrefix();
-    while (!found?.prettified && Date.now() < deadline) {
+    while (!isNewBadge(found) && Date.now() < deadline) {
       await nextTask();
       found = this.findPrefix();
     }
-    if (!found?.prettified) return;
+    if (!isNewBadge(found)) return;
 
     const caret = found.range.cloneRange();
     caret.collapse(false);

From fbcdcfa9f71c7a1782db42edd105ed51a5b659f3 Mon Sep 17 00:00:00 2001
From: Nicanor Romero Venier <n.romero-venier@efg.gg>
Date: Mon, 3 Aug 2026 09:41:47 +0200
Subject: [PATCH 4/4] fix: replace the GitLab badge instead of losing it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Selecting a decoration on top of a label deleted the existing badge and
left the comment empty, with no error.

`pasteContent` anchors the rendered markdown to a loader widget added in
the same transaction that clears the selection, and that widget never
reaches the document when there is a selection to clear — `findLoader`
then returns null and the insert is silently skipped. Delete the old
prefix ourselves so the paste always runs against an empty selection,
which is the path that works.

The trailing space separating the badge from the comment body is written
as a non-breaking space too: the renderer strips ASCII whitespace at the
end of the markdown, so the `insertText` fallback was the only thing
producing it and it does not survive on gitlab.com either.
---
 src/content/editors.js | 34 ++++++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/content/editors.js b/src/content/editors.js
index 1c108a2..e690a49 100644
--- a/src/content/editors.js
+++ b/src/content/editors.js
@@ -170,6 +170,12 @@ function isArtifact(node) {
   );
 }
 
+// GitLab's markdown renderer strips the trailing space that keeps a badge off
+// the comment body, but a non-breaking space survives the round trip.
+function withSeparator(markdown) {
+  return `${markdown.replace(/\s+$/, "")}\u00a0`;
+}
+
 // First block-level child of the ProseMirror document, where a prefix would live.
 function getFirstBlock(root) {
   return root.firstElementChild;
@@ -328,13 +334,18 @@ class RichTextHandle {
       const previous = await this.selectPrefix();
 
       if (prettified) {
-        // GitLab replaces the selection itself when handling the paste.
-        this.pasteMarkdown(markdown);
-        await this.awaitBadge(previous?.anchor ?? null);
+        // GitLab anchors the rendered markdown to a loader widget placed where
+        // the paste began, and that widget never makes it into the document
+        // when the same command also has to clear a selection: the old badge
+        // is deleted and nothing ever replaces it. Clearing the prefix here
+        // keeps the paste on the path that does work, an empty selection.
+        if (previous) await this.deleteSelection();
+        this.pasteMarkdown(withSeparator(markdown));
+        await this.awaitBadge(this.findPrefix()?.anchor ?? null);
       } else {
         // Deleting through ProseMirror first keeps atoms (a badge image) from
         // being half-removed by the browser's own text insertion.
-        if (previous) this.pressBackspace();
+        if (previous) await this.deleteSelection();
         // Plain prefixes are literal text: typing them preserves the trailing
         // space that a markdown round-trip would otherwise strip.
         document.execCommand("insertText", false, markdown);
@@ -346,7 +357,7 @@ class RichTextHandle {
 
   clearPrefix() {
     return this.enqueue(async () => {
-      if (await this.selectPrefix()) this.pressBackspace();
+      if (await this.selectPrefix()) await this.deleteSelection();
       this.focus();
     });
   }
@@ -404,6 +415,11 @@ class RichTextHandle {
 
   // ProseMirror maps Backspace to `deleteSelection`, which removes atoms (the
   // badge image) far more reliably than mutating the contenteditable ourselves.
+  async deleteSelection() {
+    this.pressBackspace();
+    await nextTask();
+  }
+
   pressBackspace() {
     this.element.dispatchEvent(
       new KeyboardEvent("keydown", {
@@ -417,11 +433,9 @@ class RichTextHandle {
     );
   }
 
-  // Pasting markdown is resolved asynchronously by GitLab: the selection is only
-  // dropped a microtask later, and the badge itself lands after a round trip to
-  // the markdown renderer. Waiting for merely *a* badge would therefore match the
-  // one still on screen and move the caret out of the selection GitLab is about
-  // to delete, leaving the old badge behind — so wait for a different node.
+  // The badge only lands once GitLab's markdown renderer has answered, so wait
+  // for it. `previousAnchor` guards against matching a prefix we failed to
+  // remove, which would otherwise move the caret and corrupt the paste.
   async awaitBadge(previousAnchor) {
     const deadline = Date.now() + RICH_TEXT_WRITE_TIMEOUT_MS;