More markdown improvements

.changeset/add-misskey-flavored-markdown.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add support for misskey-flavored markdown color definitions. E.g. `$[fg.color=f00 bg.color=00ff00 red on green]`.

.changeset/fix-arbitrary-list-starts.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fixed starting lists at arbitrary numbers and list markers extending off screen with long numbers.

.changeset/fix-blockquote-newlines.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix single new lines after block quotes being block-quoted.

.changeset/fix-emojis-not-rendering-in-reply.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix emojis not rendering in reply chips.

.changeset/fix-hardened-html-input.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Hardened html parsing in standard input box, should no longer randomly delete text in arrow brackets (unless valid, properly closed, legal html).

.changeset/fix-matrix-to-links-arrow.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix matrix.to links getting arrow brackets inserted when editing messages.

.changeset/fix-matrix-to-mentions.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix mentions breaking after editing messages with mentions.

src/app/components/editor/Elements.tsx

@@ -9,7 +9,7 @@ import { mxcUrlToHttp } from '$utils/matrix';
 import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
 import { nicknamesAtom } from '$state/nicknames';
 import { BlockType } from './types';
-import { getBeginCommand } from './utils';
+import { formatMentionElementDisplayName, getBeginCommand } from './utils';
 import type { CommandElement, EmoticonElement, LinkElement, MentionElement } from './slate';
 
 // Put this at the start and end of an inline component to work around this Chromium bug:
@@ -32,7 +32,7 @@ function RenderMentionElement({
   const nicknames = useAtomValue(nicknamesAtom);
 
   const nickname = nicknames[element.id];
-  const displayName = nickname ? `@${nickname}` : element.name;
+  const displayName = nickname ? `@${nickname}` : formatMentionElementDisplayName(element);
 
   return (
     <span

src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx

@@ -18,7 +18,12 @@ import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
 
 import { useAtomValue } from 'jotai';
 import { nicknamesAtom } from '$state/nicknames';
-import { createMentionElement, moveCursor, replaceWithElement } from '$components/editor/utils';
+import {
+  createMentionElement,
+  moveCursor,
+  replaceWithElement,
+  resolveUserMentionName,
+} from '$components/editor/utils';
 import { getMxIdServer } from '$utils/mxIdHelper';
 import { AutocompleteMenu } from './AutocompleteMenu';
 import type { AutocompleteQuery } from './autocompleteQuery';
@@ -110,10 +115,10 @@ export function UserMentionAutocomplete({
     else resetSearch();
   }, [query.text, search, resetSearch]);
 
-  const handleAutocomplete: MentionAutoCompleteHandler = (uId, name) => {
+  const handleAutocomplete: MentionAutoCompleteHandler = (uId) => {
     const mentionEl = createMentionElement(
       uId,
-      name.startsWith('@') ? name : `@${name}`,
+      resolveUserMentionName(uId, { room, nicknames }),
       mx.getUserId() === uId || roomAliasOrId === uId
     );
     replaceWithElement(editor, query.range, mentionEl);

src/app/components/editor/input.ts

@@ -1,5 +1,6 @@
 import type { Descendant } from 'slate';
 
+import type { MentionResolveOptions } from './utils';
 import {
   MX_EMOTICON_MD_END,
   MX_EMOTICON_MD_SEP,
@@ -9,6 +10,7 @@ import {
 import { BlockType } from './types';
 import type { ParagraphElement } from './slate';
 import { createEmoticonElement } from './utils';
+import { expandMatrixMentionMarkdownInText } from './matrixMentionMarkdown';
 
 /** Matches placeholders emitted by htmlToMarkdown for <img data-mx-emoticon>. */
 const MX_EMOTICON_MD_TOKEN = new RegExp(
@@ -35,14 +37,19 @@ function mergeAdjacentTextNodes(
   return out.length > 0 ? out : [{ text: '' }];
 }
 
-function lineToParagraphChildren(line: string): ParagraphElement['children'] {
+function lineToParagraphChildren(
+  line: string,
+  mentionOptions?: MentionResolveOptions
+): ParagraphElement['children'] {
   MX_EMOTICON_MD_TOKEN.lastIndex = 0;
   const parts: ParagraphElement['children'] = [];
   let last = 0;
   let match: RegExpExecArray | null;
   while ((match = MX_EMOTICON_MD_TOKEN.exec(line)) !== null) {
     if (match.index > last) {
-      parts.push({ text: line.slice(last, match.index) });
+      parts.push(
+        ...expandMatrixMentionMarkdownInText(line.slice(last, match.index), mentionOptions)
+      );
     }
     const [, src, shortcode] = match;
     if (src && shortcode && validateMxcUrl(src)) {
@@ -53,15 +60,18 @@ function lineToParagraphChildren(line: string): ParagraphElement['children'] {
     last = MX_EMOTICON_MD_TOKEN.lastIndex;
   }
   if (last < line.length) {
-    parts.push({ text: line.slice(last) });
+    parts.push(...expandMatrixMentionMarkdownInText(line.slice(last), mentionOptions));
   }
   return mergeAdjacentTextNodes(parts);
 }
 
-export const plainToEditorInput = (text: string): Descendant[] => {
+export const plainToEditorInput = (
+  text: string,
+  mentionOptions?: MentionResolveOptions
+): Descendant[] => {
   const lines = text.split('\n');
   return lines.map((lineText) => ({
     type: BlockType.Paragraph,
-    children: lineToParagraphChildren(lineText),
+    children: lineToParagraphChildren(lineText, mentionOptions),
   }));
 };

src/app/components/editor/matrixMentionMarkdown.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest';
+import type { Room } from '$types/matrix-sdk';
+import { plainToEditorInput } from './input';
+import { BlockType } from './types';
+import { htmlToMarkdown } from '$plugins/markdown';
+import {
+  expandMatrixMentionMarkdownInText,
+  mentionFromMatrixToMarkdownLink,
+} from './matrixMentionMarkdown';
+
+const roomWithMember = (userId: string, rawDisplayName: string): Room =>
+  ({
+    getMember: (id: string) =>
+      id === userId ? ({ userId: id, rawDisplayName } as never) : undefined,
+  }) as unknown as Room;
+
+describe('matrixMentionMarkdown', () => {
+  it('recognizes matrix.to user permalinks as mentions with @ display name', () => {
+    const room = roomWithMember('@alice:example.org', 'Alice');
+    const el = mentionFromMatrixToMarkdownLink('Alice', 'https://matrix.to/#/@alice:example.org', {
+      room,
+    });
+    expect(el).toMatchObject({
+      type: BlockType.Mention,
+      id: '@alice:example.org',
+      name: '@Alice',
+    });
+  });
+
+  it('expands markdown matrix.to user links into Mention elements', () => {
+    const room = roomWithMember('@alice:example.org', 'Alice');
+    const parts = expandMatrixMentionMarkdownInText(
+      'hi [Alice](https://matrix.to/#/@alice:example.org)!',
+      { room }
+    );
+    expect(parts).toEqual([
+      { text: 'hi ' },
+      expect.objectContaining({
+        type: BlockType.Mention,
+        id: '@alice:example.org',
+        name: '@Alice',
+      }),
+      { text: '!' },
+    ]);
+  });
+
+  it('expands preview-suppressed matrix.to mention links from corrupted edits', () => {
+    const parts = expandMatrixMentionMarkdownInText(
+      'hi [Alice](<https://matrix.to/#/@alice:example.org>)!'
+    );
+    expect(parts[1]).toMatchObject({
+      type: BlockType.Mention,
+      id: '@alice:example.org',
+    });
+  });
+
+  it('plainToEditorInput round-trips formatted_body user mentions', () => {
+    const room = roomWithMember('@alice:example.org', 'Alice');
+    const md = htmlToMarkdown(
+      '<p>Hello <a href="https://matrix.to/#/@alice:example.org">Alice</a>!</p>'
+    );
+    const doc = plainToEditorInput(md, { room });
+    const paragraph = doc[0] as { children: unknown[] };
+    expect(paragraph.children).toEqual([
+      { text: 'Hello ' },
+      expect.objectContaining({
+        type: BlockType.Mention,
+        id: '@alice:example.org',
+        name: '@Alice',
+      }),
+      { text: '!' },
+    ]);
+  });
+
+  it('does not treat regular https links as mentions', () => {
+    const parts = expandMatrixMentionMarkdownInText('[site](https://example.org/)');
+    expect(parts).toEqual([{ text: '[site](https://example.org/)' }]);
+  });
+});

src/app/components/editor/matrixMentionMarkdown.ts

@@ -0,0 +1,100 @@
+import type { InlineElement } from './slate';
+import {
+  parseMatrixToRoom,
+  parseMatrixToRoomEvent,
+  parseMatrixToUser,
+  isMatrixToMentionHref,
+} from '$plugins/matrix-to';
+import type { MentionResolveOptions } from './utils';
+import {
+  createMentionElement,
+  getMarkdownCodeSpanRanges,
+  isInsideMarkdownCodeSpan,
+  resolveRoomMentionHighlight,
+  resolveRoomMentionName,
+  resolveUserMentionHighlight,
+  resolveUserMentionName,
+} from './utils';
+
+/** [label](href) or [label](<href>) */
+const MD_INLINE_LINK = /\[((?:[^\]\]\\]|\\.)*)\]\((?:<([^>]+)>|([^)]+))\)/g;
+
+export const mentionFromMatrixToMarkdownLink = (
+  label: string,
+  href: string,
+  options?: MentionResolveOptions
+): InlineElement | null => {
+  const trimmedHref = href.trim();
+  if (!isMatrixToMentionHref(trimmedHref)) return null;
+
+  const userId = parseMatrixToUser(trimmedHref);
+  if (userId) {
+    return createMentionElement(
+      userId,
+      resolveUserMentionName(userId, options),
+      resolveUserMentionHighlight(userId, options)
+    );
+  }
+
+  const roomEvent = parseMatrixToRoomEvent(trimmedHref);
+  if (roomEvent) {
+    return createMentionElement(
+      roomEvent.roomIdOrAlias,
+      resolveRoomMentionName(roomEvent.roomIdOrAlias, label, options),
+      resolveRoomMentionHighlight(roomEvent.roomIdOrAlias, options),
+      roomEvent.eventId,
+      roomEvent.viaServers
+    );
+  }
+
+  const room = parseMatrixToRoom(trimmedHref);
+  if (room) {
+    return createMentionElement(
+      room.roomIdOrAlias,
+      resolveRoomMentionName(room.roomIdOrAlias, label, options),
+      resolveRoomMentionHighlight(room.roomIdOrAlias, options),
+      undefined,
+      room.viaServers
+    );
+  }
+
+  return null;
+};
+
+export const expandMatrixMentionMarkdownInText = (
+  text: string,
+  options?: MentionResolveOptions
+): InlineElement[] => {
+  const codeSpanRanges = getMarkdownCodeSpanRanges(text);
+  const parts: InlineElement[] = [];
+  let last = 0;
+
+  MD_INLINE_LINK.lastIndex = 0;
+  let match: RegExpExecArray | null;
+  while ((match = MD_INLINE_LINK.exec(text)) !== null) {
+    const start = match.index;
+    const end = start + match[0].length;
+    if (isInsideMarkdownCodeSpan(start, end, codeSpanRanges)) continue;
+
+    const label = match[1] ?? '';
+    const href = (match[2] ?? match[3] ?? '').trim();
+
+    if (start > last) {
+      parts.push({ text: text.slice(last, start) });
+    }
+
+    const mention = mentionFromMatrixToMarkdownLink(label, href, options);
+    if (mention) {
+      parts.push(mention);
+    } else {
+      parts.push({ text: match[0] });
+    }
+    last = end;
+  }
+
+  if (last < text.length) {
+    parts.push({ text: text.slice(last) });
+  }
+
+  return parts.length > 0 ? parts : [{ text: '' }];
+};

src/app/components/editor/mentionResolve.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest';
+import type { Room } from '$types/matrix-sdk';
+import {
+  formatMentionElementDisplayName,
+  formatUserMentionDisplayName,
+  resolveUserMentionName,
+} from './utils';
+import { BlockType } from './types';
+
+const roomWithMember = (userId: string, rawDisplayName: string): Room =>
+  ({
+    getMember: (id: string) =>
+      id === userId ? ({ userId: id, rawDisplayName } as never) : undefined,
+  }) as unknown as Room;
+
+describe('mention resolve', () => {
+  it('resolveUserMentionName uses room membership and adds @', () => {
+    const room = roomWithMember('@alice:example.org', 'Alice');
+    expect(resolveUserMentionName('@alice:example.org', { room })).toBe('@Alice');
+  });
+
+  it('formatMentionElementDisplayName adds @ to legacy mention nodes without prefix', () => {
+    expect(
+      formatMentionElementDisplayName({
+        type: BlockType.Mention,
+        id: '@alice:example.org',
+        name: 'Alice',
+        highlight: true,
+        children: [{ text: '' }],
+      })
+    ).toBe('@Alice');
+  });
+
+  it('formatUserMentionDisplayName is idempotent for names that already include @', () => {
+    expect(formatUserMentionDisplayName('@Alice')).toBe('@Alice');
+  });
+});