synops/docs/proposals/universell_input.md

# Proposal: Universell input — én editor, alle kontekster

## Konsept

Én TipTap-basert input-komponent som tilpasser seg konteksten.
Kompakt i chat, trådet i forum, fullskjerm i editor. Brukeren
velger markup-modus (WYSIWYG, markdown, LaTeX). Usendt innhold
caches automatisk.

## Problemstilling

I dag har vi separate input-komponenter for ulike kontekster:
- Chat: enkel textarea med enter-sender
- NodeEditor (slettet): TipTap med tittel + innhold
- EditorTrait: TipTap med toolbar

Disse er inkonsistente. Brukeren lærer tre forskjellige
input-mønstre. Og ingen av dem cacher usendt innhold.

## Modell: én komponent, kontekst-drevne moduser

```svelte
<UniversalInput
  mode="chat"          <!-- chat | forum | editor | code -->
  context={nodeId}     <!-- for draft-caching -->
  onSubmit={send}
  placeholder="Skriv en melding..."
/>
```

### Moduser

| Modus | Utseende | Oppførsel |
|-------|----------|-----------|
| `chat` | Kompakt, én linje (utvider seg) | Enter = send, Shift+Enter = linjeskift |
| `forum` | Tittel-felt + brødtekst | Knapp = post, mer plass |
| `editor` | Full toolbar, ingen send-knapp | Auto-lagring, kontinuerlig |
| `code` | Monospace, syntax highlighting | Tab = indent, ingen auto-format |

### Smart default per kontekst

Konteksten bestemmer default-modus:
- ChatTrait → `chat`
- ForumTrait → `forum`
- EditorTrait → `editor`
- Frittstående → `editor`

Men brukeren kan alltid bytte. Skriv mye i chat? Klikk
"utvid" → midlertidig editor-modus. Send tilbake som melding.

## Markup-moduser

Samme underliggende TipTap-dokument, tre visninger:

### WYSIWYG (default)
- Det du ser er det du får
- Toolbar med formatering (bold, italic, lenker, lister, bilder)
- Mest tilgjengelig for de fleste

### Markdown
- Kildekode-visning med markdown-syntaks
- Forhåndsvisning ved siden av (split) eller toggle
- For de som tenker i markdown

### LaTeX
- Matematisk notasjon, formler
- KaTeX-rendering i forhåndsvisning
- Kanskje mest relevant i editor-modus

Brukeren velger sin preferanse — lagres i
`metadata.preferences.input_mode`. Kan overrides per kontekst.

### Bytte mellom moduser

Knapp i input-feltet: `[W]` / `[M]` / `[L]`
Bytter visning, dokumentet konverteres automatisk.
TipTap sin interne representasjon er den samme uansett.

## Draft-caching

### Lokal cache (localStorage)

Usendt innhold lagres automatisk, knyttet til kontekst:

```
draft:chat:redaksjonen-uuid → "Jeg tenker vi bør..."
draft:forum:redaksjonen-uuid:ny-tråd → { title: "Forslag", body: "..." }
draft:editor:artikkel-uuid → { document: "..." }
```

- Lagres ved hvert tastetrykk (debounced, 500ms)
- Gjenopprettes når du navigerer tilbake
- Slettes når innholdet sendes/publiseres
- Viser diskret indikator: "Utkast lagret"

### Graf-synk (valgfritt, for kryssenhets)

For lengre tekster (editor-modus) kan draftet lagres som en
node i grafen:

```
node_kind: 'draft'
metadata: { context_id: "artikkel-uuid", auto_saved: true }
belongs_to → kontekst-noden
created_by → brukeren
```

Synkroniseres via WebSocket. Åpner du editoren på telefonen
ser du det du skrev på PC-en. Eksplisitt handling for å
publisere/sende — draftet er privat til det.

## Medieinput integrert

Universell input inkluderer alle input-modaliteter:

| Modalitet | Mekanisme |
|-----------|-----------|
| Tekst | Tastatur, standard |
| Bilde | Paste fra clipboard, drag-and-drop, kamera |
| Lyd | Opptak-knapp, voice memo |
| Video | Opptak-knapp (webcam/skjerm) |
| Fil | Drag-and-drop, filvelger |
| Tegning | Skisse-modus (enkel canvas) |
| Lokasjon | "Del posisjon"-knapp |
| Lenke | Paste URL → auto-preview med synops-clip |

Alt ender som noder i grafen. Tekst = innholds-node.
Bilde/lyd/video = media-node med CAS-lagring.

## Inline-handlinger

Mens du skriver kan du trigge handlinger:

- `@person` → nevne noen (autocomplete fra kontakter)
- `@bot` → AI-assistent svarer
- `/kommando` → slash-kommandoer (som i chat-apper)
- `[[nodetittel]]` → lenke til eksisterende node
- Paste URL → auto-embed med forhåndsvisning

## Tilbakemeldings-indikatorer

Input-feltet viser tilstand:

```
┌─────────────────────────────────────┐
│ Skriv en melding...                 │
│                                     │
│                    📎 🎤 [W] [Send] │
│ Utkast lagret · 142 tegn            │
└─────────────────────────────────────┘
```

- 📎 = legg ved fil/bilde
- 🎤 = voice memo
- [W] / [M] / [L] = markup-modus
- Tegnteller (valgfritt)
- "Utkast lagret" / "Lagrer..." / "Ikke lagret"

## Komponent-arkitektur

```
UniversalInput (wrapper)
├── TipTapEditor (kjerne — samme instans uansett modus)
├── ModeSelector (chat/forum/editor/code)
├── MarkupToggle (WYSIWYG/markdown/LaTeX)
├── MediaButtons (fil, opptak, kamera, tegning, lokasjon)
├── DraftManager (localStorage + valgfri graf-synk)
├── MentionProvider (@person, @bot, [[node]])
└── ActionBar (send/post/lagre + indikatorer)
```

TipTap-instansen er den samme — wrapper-en endrer layout,
toolbar-synlighet og submit-oppførsel basert på modus.

## Implementering

### Fase 1: Konsolidert input
- UniversalInput-komponent med chat/editor-modus
- Erstatt eksisterende input i ChatTrait og EditorTrait
- Draft-caching i localStorage

### Fase 2: Forum-modus
- Tittel + brødtekst layout
- Integrert med ForumTrait (fra chat/forum-dualitet)

### Fase 3: Markup-moduser
- Markdown-visning med forhåndsvisning
- LaTeX via KaTeX
- Brukerpreferanse

### Fase 4: Medieinput
- Paste-deteksjon for bilder
- Opptak-knapper (lyd, video)
- Fil-opplasting

### Fase 5: Inline-handlinger
- @mentions med autocomplete
- [[node-lenker]] med søk
- URL auto-embed

### Fase 6: Kryssenhets drafts
- Draft-noder i grafen
- WebSocket-synkronisering

## Hva som eksisterer allerede

- TipTap-editor i EditorTrait (✓)
- Voice memo-opptak (✓)
- Bilde-paste i TipTap (✓)
- @bot-trigger i chat (✓)
- synops-clip for URL-parsing (✓)
- CAS for medielagring (✓)

Hovedsakelig konsolidering og utvidelse, ikke nybygg.