feat(composer): add rich text editor with formatting and mentions

desktop/package.json

@@ -34,6 +34,7 @@
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-query": "^5.90.21",
     "@tanstack/react-router": "^1.168.10",
@@ -42,12 +43,19 @@
     "@tauri-apps/plugin-opener": "^2",
     "@tauri-apps/plugin-process": "^2.3.1",
     "@tauri-apps/plugin-updater": "^2.10.0",
+    "@tiptap/core": "^3.22.3",
+    "@tiptap/extension-link": "^3.22.3",
+    "@tiptap/extension-placeholder": "^3.22.3",
+    "@tiptap/pm": "^3.22.3",
+    "@tiptap/react": "^3.22.3",
+    "@tiptap/starter-kit": "^3.22.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "emoji-mart": "^5.6.0",
     "jdenticon": "^3.3.0",
     "livekit-client": "^2.18.1",
     "lucide-react": "^0.577.0",
+    "motion": "^12.38.0",
     "qrcode.react": "^4.2.0",
     "react": "^19.1.0",
     "react-diff-view": "^3.3.2",
@@ -57,6 +65,7 @@
     "remark-gfm": "^4.0.1",
     "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
+    "tiptap-markdown": "^0.9.0",
     "yaml": "^2.8.3"
   },
   "devDependencies": {

desktop/src/features/messages/lib/mentionHighlightExtension.test.mjs

@@ -0,0 +1,140 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import {
+  buildHighlightPatterns,
+  findHighlightMatches,
+} from "./mentionHighlightExtension.ts";
+
+// ── buildHighlightPatterns ────────────────────────────────────────────
+
+test("returns empty array when no names or channels provided", () => {
+  assert.deepEqual(buildHighlightPatterns([], []), []);
+});
+
+test("builds a single pattern for mentions only", () => {
+  const patterns = buildHighlightPatterns(["alice"], []);
+  assert.equal(patterns.length, 1);
+});
+
+test("builds a single pattern for channels only", () => {
+  const patterns = buildHighlightPatterns([], ["general"]);
+  assert.equal(patterns.length, 1);
+});
+
+test("builds two patterns when both names and channels provided", () => {
+  const patterns = buildHighlightPatterns(["alice"], ["general"]);
+  assert.equal(patterns.length, 2);
+});
+
+test("escapes regex special characters in names", () => {
+  const patterns = buildHighlightPatterns(["alice (admin)"], []);
+  // Should not throw when used as regex
+  const matches = findHighlightMatches("@alice (admin) hello", patterns);
+  assert.equal(matches.length, 1);
+  assert.equal(matches[0].match, "@alice (admin)");
+});
+
+test("escapes regex special characters in channel names", () => {
+  const patterns = buildHighlightPatterns([], ["c++ help"]);
+  const matches = findHighlightMatches("#c++ help", patterns);
+  assert.equal(matches.length, 1);
+});
+
+// ── findHighlightMatches — @mentions ──────────────────────────────────
+
+test("matches @mention at start of text", () => {
+  const patterns = buildHighlightPatterns(["alice"], []);
+  const matches = findHighlightMatches("@alice hello", patterns);
+  assert.equal(matches.length, 1);
+  assert.equal(matches[0].match, "@alice");
+  assert.equal(matches[0].from, 0);
+  assert.equal(matches[0].to, 6);
+});
+
+test("matches @mention after whitespace", () => {
+  const patterns = buildHighlightPatterns(["bob"], []);
+  const matches = findHighlightMatches("hey @bob", patterns);
+  assert.equal(matches.length, 1);
+  assert.equal(matches[0].match, "@bob");
+});
+
+test("does not match @mention embedded in a word", () => {
+  const patterns = buildHighlightPatterns(["bob"], []);
+  const matches = findHighlightMatches("email@bob.com", patterns);
+  assert.equal(matches.length, 0);
+});
+
+test("matches are case-insensitive", () => {
+  const patterns = buildHighlightPatterns(["Alice"], []);
+  const matches = findHighlightMatches("@alice @ALICE @Alice", patterns);
+  assert.equal(matches.length, 3);
+});
+
+test("matches multiple different mentions in one string", () => {
+  const patterns = buildHighlightPatterns(["alice", "bob"], []);
+  const matches = findHighlightMatches("@alice and @bob", patterns);
+  assert.equal(matches.length, 2);
+  assert.equal(matches[0].match, "@alice");
+  assert.equal(matches[1].match, "@bob");
+});
+
+test("longer names matched first (no partial overlap)", () => {
+  const patterns = buildHighlightPatterns(["al", "alice"], []);
+  const matches = findHighlightMatches("@alice", patterns);
+  // Should match "alice" not just "al"
+  assert.equal(matches.length, 1);
+  assert.equal(matches[0].match, "@alice");
+});
+
+// ── findHighlightMatches — #channels ──────────────────────────────────
+
+test("matches #channel at start of text", () => {
+  const patterns = buildHighlightPatterns([], ["general"]);
+  const matches = findHighlightMatches("#general is cool", patterns);
+  assert.equal(matches.length, 1);
+  assert.equal(matches[0].match, "#general");
+});
+
+test("matches #channel after whitespace", () => {
+  const patterns = buildHighlightPatterns([], ["random"]);
+  const matches = findHighlightMatches("check #random", patterns);
+  assert.equal(matches.length, 1);
+});
+
+test("does not match #channel embedded in a word", () => {
+  const patterns = buildHighlightPatterns([], ["foo"]);
+  const matches = findHighlightMatches("bar#foo", patterns);
+  assert.equal(matches.length, 0);
+});
+
+test("channel matches are case-insensitive", () => {
+  const patterns = buildHighlightPatterns([], ["General"]);
+  const matches = findHighlightMatches("#general #GENERAL", patterns);
+  assert.equal(matches.length, 2);
+});
+
+// ── findHighlightMatches — mixed ──────────────────────────────────────
+
+test("matches both @mentions and #channels in the same text", () => {
+  const patterns = buildHighlightPatterns(["alice"], ["general"]);
+  const matches = findHighlightMatches("@alice in #general", patterns);
+  assert.equal(matches.length, 2);
+});
+
+test("returns empty array for text with no matches", () => {
+  const patterns = buildHighlightPatterns(["alice"], ["general"]);
+  const matches = findHighlightMatches("nothing here", patterns);
+  assert.equal(matches.length, 0);
+});
+
+test("handles empty text", () => {
+  const patterns = buildHighlightPatterns(["alice"], []);
+  const matches = findHighlightMatches("", patterns);
+  assert.equal(matches.length, 0);
+});
+
+test("handles empty patterns against non-empty text", () => {
+  const matches = findHighlightMatches("@alice #general", []);
+  assert.equal(matches.length, 0);
+});

desktop/src/features/messages/lib/mentionHighlightExtension.ts

@@ -0,0 +1,144 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+
+export const mentionHighlightKey = new PluginKey("mentionHighlight");
+
+/**
+ * TipTap extension that applies inline `mention-highlight` decorations
+ * to `@Name` and `#channel-name` patterns in the document.
+ *
+ * Accepts `names` (display names) and `channelNames` storage options.
+ * On every doc update the plugin scans text nodes and decorates matches.
+ */
+export const MentionHighlightExtension = Extension.create({
+  name: "mentionHighlight",
+
+  addStorage() {
+    return {
+      names: [] as string[],
+      channelNames: [] as string[],
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const extension = this;
+
+    return [
+      new Plugin({
+        key: mentionHighlightKey,
+        state: {
+          init(_, state) {
+            return buildDecorations(
+              state.doc,
+              extension.storage.names,
+              extension.storage.channelNames,
+            );
+          },
+          apply(tr, oldDecorations) {
+            if (tr.docChanged || tr.getMeta(mentionHighlightKey)) {
+              return buildDecorations(
+                tr.doc,
+                extension.storage.names,
+                extension.storage.channelNames,
+              );
+            }
+            return oldDecorations;
+          },
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state) ?? DecorationSet.empty;
+          },
+        },
+      }),
+    ];
+  },
+});
+
+/**
+ * Build highlight patterns for @Name and #channel-name matching.
+ * Exported for testing — the patterns are the core logic of this extension.
+ */
+export function buildHighlightPatterns(
+  names: string[],
+  channelNames: string[],
+): RegExp[] {
+  const patterns: RegExp[] = [];
+
+  if (names.length > 0) {
+    const sortedNames = [...names].sort((a, b) => b.length - a.length);
+    const escapedNames = sortedNames.map((n) =>
+      n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"),
+    );
+    patterns.push(
+      new RegExp(`(?:^|(?<=\\s))@(${escapedNames.join("|")})`, "gi"),
+    );
+  }
+
+  if (channelNames.length > 0) {
+    const sortedChannels = [...channelNames].sort(
+      (a, b) => b.length - a.length,
+    );
+    const escapedChannels = sortedChannels.map((n) =>
+      n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"),
+    );
+    patterns.push(
+      new RegExp(`(?:^|(?<=\\s))#(${escapedChannels.join("|")})`, "gi"),
+    );
+  }
+
+  return patterns;
+}
+
+/**
+ * Find all highlight matches in a text string given a set of patterns.
+ * Returns an array of { from, to } offsets relative to the text start.
+ * Exported for testing.
+ */
+export function findHighlightMatches(
+  text: string,
+  patterns: RegExp[],
+): { from: number; to: number; match: string }[] {
+  const results: { from: number; to: number; match: string }[] = [];
+  for (const pattern of patterns) {
+    pattern.lastIndex = 0;
+    let m: RegExpExecArray | null = pattern.exec(text);
+    while (m !== null) {
+      results.push({ from: m.index, to: m.index + m[0].length, match: m[0] });
+      m = pattern.exec(text);
+    }
+  }
+  return results;
+}
+
+function buildDecorations(
+  doc: Parameters<typeof DecorationSet.create>[0],
+  names: string[],
+  channelNames: string[],
+): DecorationSet {
+  if (names.length === 0 && channelNames.length === 0)
+    return DecorationSet.empty;
+
+  const decorations: Decoration[] = [];
+  const patterns = buildHighlightPatterns(names, channelNames);
+
+  doc.descendants((node, pos) => {
+    if (!node.isText || !node.text) return;
+
+    for (const pattern of patterns) {
+      pattern.lastIndex = 0;
+      let match: RegExpExecArray | null = pattern.exec(node.text);
+      while (match !== null) {
+        const from = pos + match.index;
+        const to = from + match[0].length;
+        decorations.push(
+          Decoration.inline(from, to, { class: "mention-highlight" }),
+        );
+        match = pattern.exec(node.text);
+      }
+    }
+  });
+
+  return DecorationSet.create(doc, decorations);
+}