feat(editor): add live markdown preview while typing

.changeset/add-composer-markdown-preview-prosemirror.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add a live markdown preview to the composer: markdown syntax characters stay visible but dimmed, with their content styled inline while typing (bold, italic, underline, strikethrough, spoilers, links, per-level headings, and fenced code blocks syntax-highlighted like sent messages), plus an optional rendered preview box that can be enabled above the composer in Settings. Also lets Enter insert a newline in the composer and stops the timeline from snapping back to the bottom when the composer grows while scrolling up.

src/app/components/editor/Editor.css.ts

@@ -121,3 +121,86 @@ export const EditorToolbarBase = style({
 export const EditorToolbar = style({
   padding: config.space.S100,
 });
+
+export const EditorMarkdownToken = style({
+  opacity: 0.4,
+});
+
+// Matches the dimmed block markers and the sent renderer's <hr> border.
+export const EditorMarkdownDivider = style({
+  opacity: 0.4,
+  borderBottom: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+});
+
+export const EditorMarkdownItalic = style({
+  fontStyle: 'italic',
+});
+
+export const EditorMarkdownUnderline = style({
+  textDecoration: 'underline',
+});
+
+export const EditorMarkdownStrikeThrough = style({
+  textDecoration: 'line-through',
+});
+
+export const EditorMarkdownLink = style({
+  color: color.Primary.OnContainer,
+});
+
+export const EditorMarkdownCode = style([
+  DefaultReset,
+  {
+    fontFamily: 'var(--font-monospace)',
+    fontSize: '0.9em',
+    color: color.SurfaceVariant.OnContainer,
+    background: color.SurfaceVariant.Container,
+    border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
+    borderRadius: config.radii.R300,
+    padding: `0 ${config.space.S100}`,
+  },
+]);
+
+export const EditorMarkdownCodeBlock = style({
+  fontFamily: 'var(--font-monospace)',
+  fontSize: '0.9em',
+  lineHeight: 1.3,
+  letterSpacing: '-0.01em',
+  fontVariantLigatures: 'contextual',
+  background: color.SurfaceVariant.Container,
+});
+
+// Heading levels reuse folds' own heading sizes/weights so the preview matches
+// the sent renderer exactly (the message parser maps `#`…`######` onto
+// Text sizes H2…H6, all at weight 600).
+const heading = (size: 'H2' | 'H3' | 'H4' | 'H5' | 'H6') =>
+  style({
+    fontSize: config.fontSize[size],
+    lineHeight: config.lineHeight[size],
+    letterSpacing: config.letterSpacing[size],
+    fontWeight: config.fontWeight.W600,
+  });
+
+export const EditorMarkdownHeading1 = heading('H2');
+export const EditorMarkdownHeading2 = heading('H3');
+export const EditorMarkdownHeading3 = heading('H4');
+export const EditorMarkdownHeading4 = heading('H4');
+export const EditorMarkdownHeading5 = heading('H5');
+export const EditorMarkdownHeading6 = heading('H6');
+
+// Declared after the heading classes so its 700 weight beats a heading's 600
+// when `# **bold**` stacks both classes onto one span (as the sent renderer's
+// `<strong>` inside the heading does).
+export const EditorMarkdownBold = style({
+  fontWeight: 700,
+});
+
+export const EditorMarkdownSpoiler = style({
+  backgroundColor: `color-mix(in srgb, ${color.SurfaceVariant.ContainerLine} 30%, transparent)`,
+  borderRadius: config.radii.R300,
+});
+
+export const EditorMarkdownPreviewContent = style({
+  maxHeight: toRem(220),
+  overscrollBehavior: 'contain',
+});

src/app/components/editor/ProseMirrorEditable.tsx

@@ -3,6 +3,18 @@ import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'rea
 import type { EditorDocument } from './model';
 import type { ProseMirrorEditorController } from './prosemirrorController';
 
+const hostConsumedEvents = new WeakSet<Event>();
+
+/** Hosts mark keydowns they fully handled (e.g. sending on Enter) so the
+ * editable won't also act on them. The view preventDefaults every Enter
+ * (captureKeyDown in prosemirror-view), so defaultPrevented is not a
+ * reliable host-consumption signal. */
+export const markEventConsumedByHost = (event: Event): void => {
+  hostConsumedEvents.add(event);
+};
+
+const isEventConsumedByHost = (event: Event): boolean => hostConsumedEvents.has(event);
+
 export type ProseMirrorEditableHandle = {
   clear: () => void;
   focus: () => void;
@@ -37,12 +49,12 @@ export const ProseMirrorEditable = forwardRef<ProseMirrorEditableHandle, ProseMi
   ) => {
     const rootRef = useRef<HTMLDivElement | null>(null);
 
-    // ProseMirror does not bind Enter; a consumer that sends calls
-    // preventDefault, so anything left over is a line break.
+    // The view preventDefaults every Enter, so defaultPrevented cannot tell
+    // host consumption apart from the view; the host marks the event instead.
     const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
       onKeyDown?.(event);
-      if (event.defaultPrevented || event.key !== 'Enter') return;
-      if (event.nativeEvent.isComposing) return;
+      if (event.key !== 'Enter' || event.nativeEvent.isComposing) return;
+      if (isEventConsumedByHost(event.nativeEvent)) return;
       event.preventDefault();
       controller.insertNewline();
     };