fix: text compose papercuts (#270)

* make fixes

* cleanup

js/desktop/package.json

@@ -64,6 +64,7 @@
     "@livekit/components-react": "^2.9.20",
     "@livekit/components-styles": "^1.2.0",
     "@milkdown/crepe": "^7.21.1",
+    "@milkdown/kit": "7.21.1",
     "@sentry/electron": "^7.11.0",
     "@sentry/react": "^10.54.0",
     "@tanstack/react-query": "^5.90.21",

js/desktop/src/components/link-preview-card.tsx

@@ -1,5 +1,5 @@
 import { Copy, ExternalLink, Globe } from 'lucide-react';
-import type { LinkMetadata } from '@/lib/link-metadata';
+import { domainFromUrl, type LinkMetadata } from '@/lib/link-metadata';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
 import { platform } from '@/lib/platform';
@@ -93,6 +93,22 @@ export function LinkPreviewCard({ metadata, compact }: LinkPreviewCardProps) {
   );
 }
 
+/** Shown when metadata couldn't be fetched — the link itself still works. */
+export function LinkPreviewCardFallback({ url }: { url: string }) {
+  return (
+    <LinkPreviewCard
+      metadata={{
+        url,
+        domain: domainFromUrl(url),
+        title: url,
+        description: null,
+        image: null,
+        favicon: null,
+      }}
+    />
+  );
+}
+
 export function LinkPreviewCardSkeleton() {
   return (
     <div className="max-w-sm overflow-hidden rounded-2xl bg-white/10 backdrop-blur-md">

js/desktop/src/features/compose/attachment-strip.tsx

@@ -4,6 +4,7 @@ import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import { Skeleton } from '@/components/ui/skeleton';
 import { cn } from '@/lib/utils';
 import type { LinkPreviewEntry } from '@/hooks/use-link-metadata';
+import { domainFromUrl } from '@/lib/link-metadata';
 import {
   AttachmentLightbox,
   getAttachmentHandler,
@@ -114,18 +115,19 @@ function LinkPreviewThumbnail({ entry }: { entry: LinkPreviewEntry }) {
     );
   }
 
-  if (!entry.metadata) return null;
+  // Metadata fetch can fail; fall back to the bare URL so the link stays usable.
-
   const { metadata } = entry;
+  const domain = metadata?.domain ?? domainFromUrl(entry.url);
+  const title = metadata?.title ?? entry.url;
 
   return (
     <button
       type="button"
-      onClick={() => platform.link.openExternal(metadata.url)}
+      onClick={() => platform.link.openExternal(metadata?.url ?? entry.url)}
       className="flex h-16 w-28 shrink-0 flex-col justify-center gap-1 overflow-hidden rounded-lg bg-white/10 px-2 py-1.5 text-left transition-colors hover:bg-white/15"
     >
       <div className="flex items-center gap-1 text-[10px] text-white/40">
-        {metadata.favicon ? (
+        {metadata?.favicon ? (
           <img
             src={metadata.favicon}
             alt=""
@@ -137,11 +139,11 @@ function LinkPreviewThumbnail({ entry }: { entry: LinkPreviewEntry }) {
         ) : (
           <Globe className="size-3" />
         )}
-        <span className="truncate">{metadata.domain}</span>
+        <span className="truncate">{domain}</span>
       </div>
-      {metadata.title && (
+      {title && (
         <p className="line-clamp-2 text-[11px] font-medium leading-tight text-white/80">
-          {metadata.title}
+          {title}
         </p>
       )}
     </button>

js/desktop/src/features/compose/markdown-editor.css

@@ -57,6 +57,80 @@
 .llink-crepe .milkdown .ProseMirror {
   padding: 0;
   outline: none;
+  caret-color: white;
+}
+
+/* Crepe's default heading scale (42px h1) is sized for a document editor;
+ * tighten it to message-card proportions. Applies to compose and read-only
+ * alike so the editing view matches the posted card. */
+.llink-crepe .milkdown .ProseMirror h1 {
+  font-size: 1.875rem;
+  line-height: 2.375rem;
+  font-weight: 600;
+  margin-top: 24px;
+}
+
+.llink-crepe .milkdown .ProseMirror h2 {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 600;
+  margin-top: 20px;
+}
+
+.llink-crepe .milkdown .ProseMirror h3 {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+  margin-top: 16px;
+}
+
+.llink-crepe .milkdown .ProseMirror h4 {
+  font-size: 1.125rem;
+  line-height: 1.625rem;
+  font-weight: 600;
+  margin-top: 12px;
+}
+
+.llink-crepe .milkdown .ProseMirror h5 {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 600;
+  margin-top: 12px;
+}
+
+.llink-crepe .milkdown .ProseMirror h6 {
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+  font-weight: 700;
+  margin-top: 12px;
+  color: rgb(255 255 255 / 0.7);
+}
+
+.llink-crepe .milkdown .ProseMirror > :first-child {
+  margin-top: 0;
+}
+
+/* Images come from URLs only (no stable public upload URL), so hide the
+ * file uploader — the placeholder then just prompts for a link. */
+.llink-crepe
+  .milkdown
+  :is(.milkdown-image-block, .milkdown-image-inline)
+  .placeholder
+  .uploader {
+  display: none;
+}
+
+/* Read-only renders the image node view with inert editing chrome — hide it. */
+.llink-crepe:not(.llink-crepe--fill) .milkdown .milkdown-image-block .operation,
+.llink-crepe:not(.llink-crepe--fill)
+  .milkdown
+  .milkdown-image-block
+  .image-resize-handle {
+  display: none;
+}
+
+.llink-crepe .milkdown .milkdown-image-block img {
+  border-radius: 8px;
 }
 
 /* Editing context: fill the compose card and scroll internally so a long
@@ -71,8 +145,10 @@
 }
 
 /* Pad the content (not the card) so the slash menu — which Crepe appends to
- * .milkdown — can use the full card width/height before clipping. */
+ * .milkdown — can use the full card width/height before clipping. The shared
+ * layout variables (globals.css) keep the editor's content column identical
+ * to the posted card's, and the gutter fits the block drag handle. */
 .llink-crepe--fill .milkdown .ProseMirror {
   min-height: 100%;
-  padding: 1.25rem;
+  padding: var(--message-card-padding) var(--message-editor-gutter);
 }

js/desktop/src/features/compose/markdown-editor.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { Crepe } from '@milkdown/crepe';
+import { editorViewCtx } from '@milkdown/kit/core';
+import { Selection } from '@milkdown/kit/prose/state';
 import '@milkdown/crepe/theme/common/style.css';
 import '@milkdown/crepe/theme/frame-dark.css';
 import './markdown-editor.css';
@@ -55,13 +57,23 @@ export function MarkdownEditor({
         [Crepe.Feature.BlockEdit]: !readOnly,
         [Crepe.Feature.Toolbar]: !readOnly,
         [Crepe.Feature.Placeholder]: !readOnly,
-        [Crepe.Feature.ImageBlock]: false,
+        [Crepe.Feature.ImageBlock]: true,
         [Crepe.Feature.Latex]: false,
         [Crepe.Feature.TopBar]: false,
         [Crepe.Feature.AI]: false,
       },
       featureConfigs: {
         [Crepe.Feature.Placeholder]: { text: placeholder ?? '' },
+        // Images come from URLs only (e.g. pasted markdown) — there is no
+        // stable public upload URL, so the file uploader is hidden in CSS and
+        // onUpload rejects in case a file ever reaches it anyway (the default
+        // would serialize an ephemeral blob: URL into the message).
+        [Crepe.Feature.ImageBlock]: {
+          blockUploadPlaceholderText: 'Paste an image link…',
+          inlineUploadPlaceholderText: 'paste an image link',
+          maxHeight: 420,
+          onUpload: () => Promise.reject(new Error('Image uploads disabled')),
+        },
       },
     });
 
@@ -82,7 +94,18 @@ export function MarkdownEditor({
       }
       created = crepe;
       if (autoFocus && !readOnly) {
-        root.querySelector<HTMLElement>('.ProseMirror')?.focus();
+        // Place the caret at the end of the document — the editor often mounts
+        // mid-typing (immersive → card flip), where start-of-doc would strand
+        // the user. Selection-only transactions don't echo markdownUpdated.
+        crepe.editor.action((ctx) => {
+          const view = ctx.get(editorViewCtx);
+          view.dispatch(
+            view.state.tr
+              .setSelection(Selection.atEnd(view.state.doc))
+              .scrollIntoView(),
+          );
+          view.focus();
+        });
       }
     });
 
@@ -97,7 +120,11 @@ export function MarkdownEditor({
   return (
     <div
       ref={rootRef}
-      className={cn('llink-crepe', !readOnly && 'llink-crepe--fill', className)}
+      className={cn(
+        'llink-crepe',
+        !readOnly && 'llink-crepe--fill scrollbar-card',
+        className,
+      )}
     />
   );
 }

js/desktop/src/features/compose/text-editor.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useRef, useCallback, useState } from 'react';
 import { Paperclip } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { getImmersiveTextStyle } from '@/lib/immersive-text';
+import { hasMarkdownFormatting } from '@/lib/markdown';
 import { metaKey } from '@/lib/platform';
 import { useAllLinkMetadata } from '@/hooks/use-link-metadata';
 import { AttachmentStrip } from '@/features/compose/attachment-strip';
@@ -35,12 +37,6 @@ interface TextEditorProps {
 
 const IMMERSIVE_CHAR_LIMIT = 120;
 
-function getImmersiveTextStyle(length: number) {
-  if (length < 70) return { size: 'text-5xl', weight: 'font-semibold' };
-  if (length < 130) return { size: 'text-3xl', weight: 'font-semibold' };
-  return { size: 'text-2xl', weight: 'font-normal' };
-}
-
 export function TextEditor({
   textContent,
   onTextChange,
@@ -50,7 +46,9 @@ export function TextEditor({
   attachmentProps,
 }: TextEditorProps) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const [forceCardMode, setForceCardMode] = useState(false);
+  // Card mode latches: once the message needs the full editor, snapping back
+  // to immersive mid-edit would be jarring, so it stays for the session.
+  const [carded, setCarded] = useState(false);
 
   const [debouncedText, setDebouncedText] = useState(textContent);
   useEffect(() => {
@@ -61,13 +59,16 @@ export function TextEditor({
 
   const attachmentCount = attachmentProps?.attachments.length ?? 0;
   const hasEnrichments = attachmentCount > 0 || linkPreviews.length > 0;
-  const immersive =
+  const shouldCard =
-    textContent.length < IMMERSIVE_CHAR_LIMIT &&
+    !carded &&
-    !hasEnrichments &&
+    (textContent.length >= IMMERSIVE_CHAR_LIMIT ||
-    !forceCardMode;
+      hasEnrichments ||
+      hasMarkdownFormatting(textContent));
+  if (shouldCard) setCarded(true);
+  const immersive = !carded;
 
-  // Keep the immersive textarea focused with the caret at the end when we
+  // Keep the immersive textarea focused with the caret at the end on mount.
-  // (re)enter it. The card-mode editor manages its own focus.
+  // The card-mode editor manages its own focus.
   useEffect(() => {
     if (!immersive) return;
     const t = setTimeout(() => {
@@ -95,7 +96,7 @@ export function TextEditor({
       } else if (e.key === 'm' && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
         e.stopPropagation();
-        setForceCardMode(true);
+        setCarded(true);
       }
     },
     [onCancel, onSubmit, textContent],
@@ -127,7 +128,7 @@ export function TextEditor({
       {immersive && (
         <KeyHint
           keys={`${metaKey}+M`}
-          onClick={() => setForceCardMode(true)}
+          onClick={() => setCarded(true)}
           title={`Switch to markdown editor (or press ${metaKey}+M)`}
         >
           markdown
@@ -194,7 +195,7 @@ export function TextEditor({
       {...dropZoneProps}
       onKeyDownCapture={handleKeyDown}
     >
-      <div className="mx-8 flex h-[calc(100%-8rem)] w-full min-w-0 flex-col overflow-hidden rounded border border-white/10 bg-white/5 backdrop-blur-xl">
+      <div className="mx-8 flex h-[calc(100%-8rem)] w-full min-w-0 max-w-[calc(var(--message-content-width)_+_var(--message-editor-gutter)*2)] flex-col overflow-hidden rounded border border-white/10 bg-white/5 backdrop-blur-xl animate-in fade-in zoom-in-95 duration-200">
         {/* No padding here: the editor's own scroll box hosts the slash menu,
             so we pad inside the editor (ProseMirror) instead. That keeps the
             menu's clipping bounds the full card rather than the inset box. */}

js/desktop/src/features/particles/text-particle-view.tsx

@@ -8,8 +8,11 @@ import {
   type LinkPreviewEntry,
 } from '@/hooks/use-link-metadata';
 import { extractUrls } from '@/lib/link-metadata';
+import { getImmersiveTextStyle } from '@/lib/immersive-text';
+import { hasMarkdownFormatting } from '@/lib/markdown';
 import {
   LinkPreviewCard,
+  LinkPreviewCardFallback,
   LinkPreviewCardSkeleton,
 } from '@/components/link-preview-card';
 import { useParticleAttachments } from '@/hooks/use-particle-attachments';
@@ -51,18 +54,6 @@ function computeReadDuration(
   return Math.min(Math.max(base + extra, MIN_DURATION_S), MAX_DURATION_S);
 }
 
-function getImmersiveTextStyle(length: number) {
-  if (length < 30) return { size: 'text-5xl', weight: 'font-semibold' };
-  if (length < 70) return { size: 'text-3xl', weight: 'font-semibold' };
-  return { size: 'text-2xl', weight: 'font-normal' };
-}
-
-function hasMarkdownFormatting(content: string): boolean {
-  return /^#{1,6} |^\s*[-*+] |^\s*\d+\. |^```|`[^`]+`|\*\*|__|\*[^*]|_[^_]|^>/m.test(
-    content,
-  );
-}
-
 function LinkPreviews({ entries }: { entries: LinkPreviewEntry[] }) {
   return (
     <div className="flex flex-wrap gap-3">
@@ -72,7 +63,9 @@ function LinkPreviews({ entries }: { entries: LinkPreviewEntry[] }) {
             <LinkPreviewCardSkeleton />
           ) : entry.metadata ? (
             <LinkPreviewCard metadata={entry.metadata} />
-          ) : null}
+          ) : (
+            <LinkPreviewCardFallback url={entry.url} />
+          )}
         </div>
       ))}
     </div>
@@ -209,17 +202,7 @@ export function TextParticleView({
   // Mode 3: card layout
   return (
     <div className="group relative flex h-full w-full items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 px-8 pt-[var(--stream-safe-top,2rem)] pb-[var(--stream-safe-bottom,2rem)]">
-      <div
+      <div className="scrollbar-card flex max-h-full w-full max-w-[calc(var(--message-content-width)_+_var(--message-card-padding)*2)] flex-col gap-4 overflow-y-auto overscroll-contain rounded bg-white/10 p-[var(--message-card-padding)] backdrop-blur-md">
-        className={cn(
-          'flex max-h-full w-full max-w-2xl flex-col gap-4 overflow-y-auto overscroll-contain rounded bg-white/10 p-6 backdrop-blur-md',
-          '[&::-webkit-scrollbar]:w-2',
-          '[&::-webkit-scrollbar]:p-2',
-          '[&::-webkit-scrollbar-track]:bg-transparent',
-          '[&::-webkit-scrollbar-thumb]:rounded-full',
-          '[&::-webkit-scrollbar-thumb]:bg-white/30',
-          '[&::-webkit-scrollbar-thumb]:hover:bg-white/50',
-        )}
-      >
         <MarkdownEditor
           key={content}
           value={content}

js/desktop/src/hooks/use-file-input.ts

@@ -48,16 +48,22 @@ export function useFileInput({
   useEffect(() => {
     if (!enabled) return;
 
+    // Capture phase so file pastes always become attachments — ProseMirror
+    // would otherwise inline pasted images as ephemeral blob: URLs. Mixed
+    // clipboards (e.g. Excel/Word ship an image rendition alongside the text)
+    // must still paste as text, so only file-only pastes are intercepted.
     const handlePaste = (e: ClipboardEvent) => {
-      const files = Array.from(e.clipboardData?.files ?? []);
+      const data = e.clipboardData;
-      if (files.length > 0) {
+      if (!data) return;
-        e.preventDefault();
+      const files = Array.from(data.files);
-        onFilesRef.current(files);
+      if (files.length === 0 || data.types.includes('text/plain')) return;
-      }
+      e.preventDefault();
+      e.stopPropagation();
+      onFilesRef.current(files);
     };
 
-    window.addEventListener('paste', handlePaste);
+    window.addEventListener('paste', handlePaste, true);
-    return () => window.removeEventListener('paste', handlePaste);
+    return () => window.removeEventListener('paste', handlePaste, true);
   }, [enabled]);
 
   // Drag and drop handlers

js/desktop/src/lib/immersive-text.ts

@@ -0,0 +1,7 @@
+/** Font scale for short messages shown as large centered text. Shared by the
+ *  composer and the posted view so editing matches the final render. */
+export function getImmersiveTextStyle(length: number) {
+  if (length < 30) return { size: 'text-5xl', weight: 'font-semibold' };
+  if (length < 70) return { size: 'text-3xl', weight: 'font-semibold' };
+  return { size: 'text-2xl', weight: 'font-normal' };
+}

js/desktop/src/lib/link-metadata.ts

@@ -14,3 +14,11 @@ export function extractUrls(text: string): string[] {
   // should only yield a single preview card.
   return Array.from(new Set(Array.from(text.matchAll(URL_REGEX), (m) => m[0])));
 }
+
+export function domainFromUrl(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, '');
+  } catch {
+    return url;
+  }
+}

js/desktop/src/lib/markdown.ts

@@ -0,0 +1,5 @@
+export function hasMarkdownFormatting(content: string): boolean {
+  return /^#{1,6} |^\s*[-*+] |^\s*\d+\. |^```|`[^`]+`|\*\*|__|\*\S[^*]*\*|\b_\S[^_]*_\b|^>/m.test(
+    content,
+  );
+}

js/desktop/src/styles/globals.css

@@ -151,6 +151,34 @@
   background: oklch(1 0 0 / 35%);
 }
 
+/* Message cards: more prominent scrollbar than the subtle global default.
+   The descendant form reaches scroll containers we don't own (Crepe's .milkdown). */
+.scrollbar-card::-webkit-scrollbar,
+.scrollbar-card ::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scrollbar-card::-webkit-scrollbar-thumb,
+.scrollbar-card ::-webkit-scrollbar-thumb {
+  background: oklch(1 0 0 / 30%);
+  border-radius: 9999px;
+}
+
+.scrollbar-card::-webkit-scrollbar-thumb:hover,
+.scrollbar-card ::-webkit-scrollbar-thumb:hover {
+  background: oklch(1 0 0 / 50%);
+}
+
+/* Message layout: the compose editor and the posted card derive their widths
+   from one shared content column, so line wrapping while editing matches the
+   final render. The editor gutter additionally fits Crepe's block drag handle
+   (66px wide, offset 16px left of the block). */
+:root {
+  --message-content-width: 39rem;
+  --message-card-padding: 1.5rem;
+  --message-editor-gutter: 5.5rem;
+}
+
 /* Frameless window drag regions */
 .drag-region {
   -webkit-app-region: drag;