Add underline to markdown (#761)

<!-- Please read
https://github.com/SableClient/Sable/blob/dev/CONTRIBUTING.md before
submitting your pull request -->

### Description

<!-- Please include a summary of the change. Please also include
relevant motivation and context. List any dependencies that are required
for this change. -->

Adds underline using `__`

also fixed a typo in the pins that resulted in text like `pinned ...
andunpinned ...`, now there's spaces around and.

#### Type of change

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

### Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings

### AI disclosure:

- [x] Partially AI assisted (clarify which code was AI assisted and
briefly explain what it does).
- [ ] Fully AI generated (explain what all the generated code does in
moderate detail).
<!-- Write any explanation required here, but do not generate the
explanation using AI!! You must prove you understand what the code in
this PR does. -->

Tests were updated with AI.

Author: 7w1

.changeset/fix-underline-markdown.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Added the ability to **underline** using `__underscores__`.

src/app/components/message/Reply.tsx

@@ -231,7 +231,7 @@ export const Reply = as<'div', ReplyProps>(
           {(pinsAdded?.length > 0 &&
             `pinned ${pinsAdded.length} message${pinsAdded.length > 1 ? 's' : ''}`) ||
             ''}
-          {(pinsAdded?.length > 0 && pinsRemoved?.length > 0 && `and`) || ''}
+          {(pinsAdded?.length > 0 && pinsRemoved?.length > 0 && ` and `) || ''}
           {(pinsRemoved?.length > 0 &&
             `unpinned ${pinsRemoved.length} message${pinsRemoved.length > 1 ? 's' : ''}`) ||
             ''}

src/app/hooks/timeline/useTimelineEventRenderer.tsx

@@ -1074,7 +1074,7 @@ export function useTimelineEventRenderer({
                     {(pinsAdded?.length > 0 &&
                       `pinned ${pinsAdded.length} message${pinsAdded.length > 1 ? 's' : ''}`) ||
                       ''}
-                    {(pinsAdded?.length > 0 && pinsRemoved?.length > 0 && ` and`) || ''}
+                    {(pinsAdded?.length > 0 && pinsRemoved?.length > 0 && ` and `) || ''}
                     {(pinsRemoved?.length > 0 &&
                       `unpinned ${pinsRemoved.length} message${pinsRemoved.length > 1 ? 's' : ''}`) ||
                       ''}

src/app/plugins/markdown/bidirectional.test.ts

@@ -29,6 +29,14 @@ describe('bidirectional round-trip', () => {
     expect(result).toContain('*italic text*');
   });
 
+  it('round-trips underline', () => {
+    const markdown = '__underlined__';
+    const html = markdownToHtml(markdown);
+    const injected = injectDataMd(html);
+    const result = htmlToMarkdown(injected);
+    expect(result).toContain('__underlined__');
+  });
+
   it('round-trips inline code', () => {
     const markdown = '`inline code`';
     const html = markdownToHtml(markdown);

src/app/plugins/markdown/extensions/matrix-underline.ts

@@ -0,0 +1,38 @@
+import type { TokenizerExtension, RendererExtension, Tokens } from 'marked';
+
+// Underline extension: __text__
+export const matrixUnderlineExtension = {
+  name: 'matrixUnderline',
+  level: 'inline',
+  start(src: string) {
+    return src.indexOf('__');
+  },
+  tokenizer(
+    this: {
+      lexer: { inlineTokens: (t: string, tokens: Tokens.Generic[]) => void };
+    },
+    src: string
+  ) {
+    if (!src.startsWith('__')) return undefined;
+    const rule = /^__(.+?)__/;
+    const match = rule.exec(src);
+    if (match) {
+      const token = {
+        type: 'matrixUnderline',
+        raw: match[0],
+        text: match[1],
+        tokens: [] as Tokens.Generic[],
+      };
+      this.lexer.inlineTokens(token.text!, token.tokens);
+      return token;
+    }
+    return undefined;
+  },
+  renderer(
+    this: { parser: { parseInline: (tokens: Tokens.Generic[]) => string } },
+    token: Tokens.Generic
+  ) {
+    const tokens = (token as { tokens: Tokens.Generic[] }).tokens || [];
+    return `<u data-md="__">${this.parser.parseInline(tokens)}</u>`;
+  },
+} satisfies TokenizerExtension & RendererExtension;

src/app/plugins/markdown/htmlToMarkdown.ts

@@ -117,8 +117,10 @@ function processNode(node: ChildNode, listDepth: number = 0): string {
     case 'i':
       return processInlineWrapper(node, '*');
 
-    case 'u':
-      return processInlineWrapper(node, '_');
+    case 'u': {
+      const md = node.attribs['data-md'];
+      return processInlineWrapper(node, md ?? '__');
+    }
 
     case 's':
     case 'del':

src/app/plugins/markdown/injectDataMd.test.ts

@@ -56,7 +56,7 @@ describe('injectDataMd', () => {
 
   it('injects data-md into u tags', () => {
     const result = injectDataMd('<u>underline</u>');
-    expect(result).toContain('data-md="_"');
+    expect(result).toContain('data-md="__"');
   });
 
   it('injects data-md into s tags', () => {

src/app/plugins/markdown/injectDataMd.ts

@@ -75,7 +75,7 @@ export function injectDataMd(html: string): string {
   // Inject inline markdown markers for underline
   html = html.replace(/<u([^>]*)>([^<]*)<\/u>/g, (_, attrs, content) => {
     if (attrs.includes('data-md')) return `<u${attrs}>${content}</u>`;
-    return `<u data-md="_"${attrs}>${content}</u>`;
+    return `<u data-md="__"${attrs}>${content}</u>`;
   });
 
   // Inject inline markdown markers for strikethrough

src/app/plugins/markdown/markdownToHtml.test.ts

@@ -13,6 +13,14 @@ describe('markdownToHtml', () => {
     expect(result).toContain('<strong>bold</strong>');
   });
 
+  it('converts __ to underline, not bold', () => {
+    const result = markdownToHtml('__underlined__');
+    expect(result).toContain('<u');
+    expect(result).toContain('data-md="__"');
+    expect(result).toContain('>underlined<');
+    expect(result).not.toContain('<strong>underlined</strong>');
+  });
+
   it('converts italic text', () => {
     const result = markdownToHtml('*italic*');
     expect(result).toContain('<em>italic</em>');

src/app/plugins/markdown/markdownToHtml.ts

@@ -9,6 +9,7 @@ import {
 } from './extensions/matrix-math';
 import { matrixSubscriptExtension } from './extensions/matrix-subscript';
 import { matrixEmoticonExtension, preprocessEmoticon } from './extensions/matrix-emoticon';
+import { matrixUnderlineExtension } from './extensions/matrix-underline';
 import {
   escapeLineStartBlockquoteWithoutFollowingSpace,
   unescapeMarkdownInlineSequences,
@@ -18,6 +19,7 @@ import {
 const processor = marked.use({
   breaks: true,
   extensions: [
+    matrixUnderlineExtension,
     matrixSpoilerExtension,
     matrixMathExtension,
     matrixMathBlockExtension,