fix(web): keep typed underscores literal in the rich text composer

apps/web/package.json

@@ -45,6 +45,7 @@
     "@tiptap/extension-code-block": "^3.31.3",
     "@tiptap/extension-heading": "^3.31.3",
     "@tiptap/extension-horizontal-rule": "^3.31.3",
+    "@tiptap/extension-italic": "^3.31.3",
     "@tiptap/extension-list": "^3.31.3",
     "@tiptap/extension-task-item": "^3.31.3",
     "@tiptap/extension-task-list": "^3.31.3",

apps/web/src/components/ComposerPromptEditorTiptap.input.browser.test.tsx

@@ -116,6 +116,42 @@ function typeText(editor: Editor, from: number, to: number, text: string) {
   }
 }
 
+function textWithMark(editor: Editor, name: string) {
+  const text: string[] = [];
+  editor.state.doc.descendants((node) => {
+    if (node.isText && node.marks.some((mark) => mark.type.name === name)) {
+      text.push(node.textContent);
+    }
+  });
+  return text;
+}
+
+it.each([
+  { value: "clean _build and node", code: [] },
+  { value: "clean `_build` and `node", code: ["_build"] },
+])("keeps a typed underscore literal after $value", async ({ value, code }) => {
+  const editor = await mountEditor(value);
+  await act(async () => {
+    editor.commands.focus("end");
+    const { from, to } = editor.state.selection;
+    typeText(editor, from, to, "_");
+  });
+  expect(serializeEditorDoc(editor.state.doc).value).toBe(`${value}_`);
+  expect(textWithMark(editor, "italic")).toEqual([]);
+  expect(textWithMark(editor, "code")).toEqual(code);
+});
+
+it("still italicizes text when typing a closing asterisk", async () => {
+  const editor = await mountEditor("clean *build");
+  await act(async () => {
+    editor.commands.focus("end");
+    const { from, to } = editor.state.selection;
+    typeText(editor, from, to, "*");
+  });
+  expect(serializeEditorDoc(editor.state.doc).value).toBe("clean *build*");
+  expect(textWithMark(editor, "italic")).toEqual(["build"]);
+});
+
 it.each([false, true])(
   "composes an umlaut without wrapping the preedit text (rich text: %s)",
   async (richTextEnabled) => {

apps/web/src/components/ComposerPromptEditorTiptap.tsx

@@ -68,6 +68,7 @@ import {
   caretTakesMarksBefore,
   convertBulletItemToTask,
   ComposerCodeExtension,
+  ComposerItalicExtension,
   ComposerTaskItemExtension,
   ComposerTaskListExtension,
   flatToMarkdown,
@@ -843,7 +844,8 @@ function createComposerExtensions(richText: boolean) {
       code: false,
       listKeymap: false,
       undoRedo: { newGroupDelay: COMPOSER_UNDO_GROUP_DELAY },
-      ...(richText ? {} : { bold: false, italic: false, strike: false }),
+      italic: false,
+      ...(richText ? {} : { bold: false, strike: false }),
     }),
     ComposerUndoGroupingExtension,
     ComposerMentionExtension,
@@ -853,6 +855,7 @@ function createComposerExtensions(richText: boolean) {
     ComposerMarkersExtension,
     ...(richText
       ? [
+          ComposerItalicExtension,
           ComposerCodeExtension,
           ComposerCodeBlockExtension.extend({
             addNodeView() {

apps/web/src/composer-rich-text-doc.ts

@@ -11,7 +11,14 @@ import { Blockquote } from "@tiptap/extension-blockquote";
 import { CodeBlock } from "@tiptap/extension-code-block";
 import { Heading } from "@tiptap/extension-heading";
 import { HorizontalRule } from "@tiptap/extension-horizontal-rule";
-import { type Command, type Editor, mergeAttributes } from "@tiptap/core";
+import { Italic, starInputRegex, starPasteRegex } from "@tiptap/extension-italic";
+import {
+  type Command,
+  type Editor,
+  markInputRule,
+  markPasteRule,
+  mergeAttributes,
+} from "@tiptap/core";
 import { BulletList, ListItem, OrderedList } from "@tiptap/extension-list";
 import { TaskItem } from "@tiptap/extension-task-item";
 import { TaskList } from "@tiptap/extension-task-list";
@@ -127,6 +134,20 @@ export const ComposerCodeExtension = Code.extend({
   },
 });
 
+/**
+ * The composer writes italic as `*text*`, so it keeps only the `*` shortcuts.
+ * Tiptap's `_text_` rules fire on the `_` in names like `node_modules` and
+ * italicize back to an earlier `_build`, even one inside a code span.
+ */
+export const ComposerItalicExtension = Italic.extend({
+  addInputRules() {
+    return [markInputRule({ find: starInputRegex, type: this.type })];
+  },
+  addPasteRules() {
+    return [markPasteRule({ find: starPasteRegex, type: this.type })];
+  },
+});
+
 /**
  * Tiptap's block extensions each bind a chord that turns the current block into
  * their node (Mod-Shift-8 for a list, Mod-Alt-c for a fence, and so on). The