Cavai Docs

Appearance

Rich Text Formatting: Inline formatting for text blocks ​

Konsept ​

Mulighet for å markere tekst i text blocks og sette bold, italic, underline, strikethrough — som i Figma/Notion. Inline bubble menu som dukker opp ved seleksjon. Arkitekturen skal være klar for utvidelse med farge per ord, font-size per ord, og tekst-animasjoner (write-on, word-pop).

Teknisk tilnærming ​

Editor: Tiptap (@tiptap/vue-2) ​

ProseMirror-basert editor med Vue 2-støtte. Erstatter v-textarea i ContentSection. Bubble menu for formateringsvalg ved seleksjon.

Installasjon:

bash
npm install @tiptap/vue-2 @tiptap/pm @tiptap/starter-kit

Datamodell: Nytt richText-felt ​

Nytt felt richText på TextProperties — ProseMirror JSON-format:

json
{
  "type": "doc",
  "content": [
    {
      "type": "paragraph",
      "content": [
        { "type": "text", "text": "Hello " },
        { "type": "text", "marks": [{ "type": "bold" }], "text": "world" }
      ]
    }
  ]
}

Eksisterende text: string beholdes permanent som fallback. Ingen migrasjon av eksisterende data — de funker som før.

CE-rendering: richText → generateHTML() → sanitert v-html. Uten richText → som i dag.

Hvorfor nytt felt i stedet for migrasjon ​

  • Null risiko for eksisterende annonser i prod
  • Ingen big bang-migrasjon nødvendig
  • Når brukeren redigerer en gammel creative, konverteres automatisk til richText ved save
  • Fallback-sjekken er én if-test — neglisjerbar overhead, beholdes permanent

MVP-scope ​

  • Bold (<strong>)
  • Italic (<em>)
  • Underline (<u>)
  • Strikethrough (<s>)
  • Inline bubble menu ved tekstseleksjon
  • Fallback til plain text for eldre creatives

Fremtidige utvidelser ​

  • Farge per ord/setning (Tiptap TextStyle + Color extensions)
  • Font-size per ord/setning (Tiptap TextStyle + FontSize)
  • Feed/DCO-variabler som uforanderlige tokens (Tiptap "node views")
  • Tekst-animasjoner: write-on, word-pop (krever individuelle DOM-noder per ord/tegn — som ProseMirror JSON gir oss)

Animasjonskompatibilitet ​

  • Blokk-animasjoner (fade, slide, scale, rotate, blur, skew) fungerer uendret — de opererer på wrapper-elementet
  • ProseMirror JSON gir individuelle tekst-noder i DOM-en, som er forutsetningen for tekst-spesifikke animasjoner (write-on, word-pop)
  • Denne featuren endrer ikke animasjonssystemet — den bygger grunnlaget for fremtidige tekst-animasjoner

Ressurseffektivitet ​

  • Tiptap laster kun i AF (editoren). CE trenger ikke biblioteket.
  • CE får ferdig HTML fra generateHTML() — bare noen ekstra <span>/<strong>-tags i DOM-en
  • CSS-animasjoner på spans er like lette som på blokker — GPU-akselerert
  • Ingen ekstra JS-bundle i annonsen

Berørte filer ​

Application-Frontend ​

  • src/pages/Chatbots/components/BuilderVisuals/Blocks/data/types.ts — nytt richText-felt på TextProperties
  • src/pages/Chatbots/components/BuilderVisuals/Blocks/data/defaults.ts — default for richText
  • src/pages/Chatbots/components/BuilderVisuals/Configuration/components/ContentSection.vue — erstatte TextArea med Tiptap
  • src/pages/Chatbots/components/BuilderVisuals/Configuration/configs/TextConfiguration.vue — eventuell tilpasning

Creative-Engine ​

  • src/components/creative/VisualElements/CreativeTextBlock.vue — v-html rendering med fallback
  • src/interfaces/jsonTypes/payload-v2/index.ts — type-oppdatering

Referanser ​

Internal documentation

Cavai