# 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 context={nodeId} 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.