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..aca6023 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,24 @@ 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);
+  editor.mountToolbar(toolbar);
+
+  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 +225,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 +268,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..e690a49
--- /dev/null
+++ b/src/content/editors.js
@@ -0,0 +1,470 @@
+// --- 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:
+//
+//   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
+//   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 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) {
+  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;
+  }
+
+  mountToolbar(toolbar) {
+    const anchor = this.getMountPoint();
+    anchor.parentNode?.insertBefore(toolbar, anchor);
+  }
+
+  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"))
+  );
+}
+
+// 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;
+}
+
+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();
+  }
+
+  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.
+  //
+  //   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,
+          anchor,
+          ...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,
+        anchor: null,
+        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 previous = await this.selectPrefix();
+
+      if (prettified) {
+        // 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) 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);
+      }
+
+      this.focus();
+    });
+  }
+
+  clearPrefix() {
+    return this.enqueue(async () => {
+      if (await this.selectPrefix()) await this.deleteSelection();
+      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 the prefix it found.
+  async selectPrefix() {
+    this.element.focus();
+
+    const found = this.findPrefix();
+    this.setSelection(found?.rangeToDelete ?? this.startOfDocument());
+    await nextTask();
+
+    return 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.
+  async deleteSelection() {
+    this.pressBackspace();
+    await nextTask();
+  }
+
+  pressBackspace() {
+    this.element.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: "Backspace",
+        code: "Backspace",
+        keyCode: 8,
+        which: 8,
+        bubbles: true,
+        cancelable: true,
+      })
+    );
+  }
+
+  // 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;
+
+    const isNewBadge = (found) =>
+      found?.prettified && found.anchor !== previousAnchor;
+
+    let found = this.findPrefix();
+    while (!isNewBadge(found) && Date.now() < deadline) {
+      await nextTask();
+      found = this.findPrefix();
+    }
+    if (!isNewBadge(found)) 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: