@dev.smartpricing/message-composer-layer 4.5.1-next.0 → 4.5.1-next.1

package/app/components/Editor/RichTextEditor.vue

@@ -13,6 +13,7 @@ import {
   convertToWhatsappHeaderText,
   convertToWhatsappMarkdown,
   getTipTapExtensions,
+  isWhatsappHeaderMultiline,
   sanitizeContent,
 } from '@dev.smartpricing/message-composer-utils/utils'
 import EmojiPickerButton from '../Common/EmojiPickerButton.vue'
@@ -278,14 +279,21 @@ const toolbarItems = computed(() => {
 // WhatsApp markdown-aware character count
 // Meta counts the final markdown output (with *bold*, _italic_ marks),
 // so we must display that count instead of TipTap's document-model count.
-const isWhatsapp = computed(() => props.preset === 'whatsapp' || props.preset === 'whatsapp-header')
+const isWhatsappHeader = computed(() => props.preset === 'whatsapp-header')
+const isWhatsapp = computed(() => props.preset === 'whatsapp' || isWhatsappHeader.value)
 const whatsappCharCount = computed(() => {
   if (!isWhatsapp.value || !props.characterLimit || !text.value) return 0
-  return props.preset === 'whatsapp-header'
+  return isWhatsappHeader.value
     ? convertToWhatsappHeaderText(text.value).length
     : convertToWhatsappMarkdown(text.value).length
 })
 
+// A multi-line header is still saved (its lines are joined into one when
+// sent to Meta), so the editor warns instead of raising a validation error.
+const hasHeaderLineBreaks = computed(
+  () => isWhatsappHeader.value && isWhatsappHeaderMultiline(text.value),
+)
+
 // Handlers
 function onSelectEmoji(emoji: EmojiExt) {
   editor.value?.commands.insertContent(emoji.i)
@@ -491,6 +499,10 @@ defineExpose({
       </span>
     </p>
 
+    <p v-if="hasHeaderLineBreaks" class="paragraph-xs text-warning-700 pt-1.5 px-1">
+      {{ $t('editor.validation.header_line_breaks') }}
+    </p>
+
     <!-- AI Generate slideover -->
   </div>
 </template>

package/app/components/Whatsapp/Preview.vue

@@ -4,12 +4,10 @@ import type {
   WaButtonTypeV1,
   WhatsappMessage,
 } from '@dev.smartpricing/message-composer-utils/types'
-import { generateHTML } from '@tiptap/vue-3'
 import { computed } from 'vue'
 import {
+  convertToWhatsappHeaderText,
   generateWhatsappHtml,
-  getTipTapExtensions,
-  sanitizeContent,
 } from '@dev.smartpricing/message-composer-utils/utils'
 import { useResolvedParametersQuery } from '~/queries/compilation'
 
@@ -57,15 +55,10 @@ const bodyHtml = computed(() => {
   return replaceMentionsWithValues(html)
 })
 
-const headerHtml = computed(() => {
+// Plain text, exactly as Meta receives it
+const headerText = computed(() => {
   if (props.message.body.header.type !== 'text') return ''
-  if (!props.message.body.header.content) return ''
-  const extensions = getTipTapExtensions({ preset: 'whatsapp-header' })
-  const html = generateHTML(
-    sanitizeContent(props.message.body.header.content, extensions),
-    extensions,
-  ).replaceAll('<p></p>', '<p>&nbsp;</p>')
-  return replaceMentionsWithValues(html)
+  return replaceMentionsWithValues(convertToWhatsappHeaderText(props.message.body.header.content))
 })
 
 const currentTime = computed(() => {
@@ -131,7 +124,7 @@ const getIcon = (type: WaButtonTypeV1) => {
                     v-if="message.body.header.type === 'text'"
                     class="text-sm text-primary-950 break-all"
                   >
-                    <p v-html="headerHtml" />
+                    <p>{{ headerText }}</p>
                   </div>
                   <div v-else-if="message.body.header.type === 'image'" class="mb-2">
                     <img

package/app/components/Whatsapp/Translator/Header.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import type { JSONContent } from '@tiptap/vue-3'
-import { generateHTML } from '@tiptap/vue-3'
-import {
-  getTipTapExtensions,
-  sanitizeContent,
-} from '@dev.smartpricing/message-composer-utils/utils'
+import { convertToWhatsappHeaderText } from '@dev.smartpricing/message-composer-utils/utils'
 import RichTextEditor from '@/components/Editor/RichTextEditor.vue'
 import { useAppContextStore } from '@/stores/appContext'
 import { WA_HEADER_TEXT_MAX_LENGTH } from '@dev.smartpricing/message-composer-utils/types'
@@ -22,26 +18,15 @@ const targetContent = defineModel<JSONContent | undefined>({
 })
 
 const appContext = useAppContextStore()
-
-// Generate HTML for preview of base language with rich text support
-function generatePreviewHtml(content: JSONContent | undefined): string {
-  if (!content) return ''
-  const extensions = getTipTapExtensions({ preset: 'whatsapp-header' })
-  return generateHTML(sanitizeContent(content, extensions), extensions).replaceAll(
-    '<p></p>',
-    '<p>&nbsp;</p>',
-  )
-}
 </script>
 
 <template>
   <div class="flex gap-8 items-start" :data-testid="whatsappTranslatorHeaderTestIds.container">
     <!-- Base language preview (read-only) -->
     <div class="flex-1 min-w-0" :data-testid="whatsappTranslatorHeaderTestIds.basePreview">
-      <div
-        class="paragraph-sm text-primary-700 break-words"
-        v-html="generatePreviewHtml(baseContent)"
-      />
+      <div class="paragraph-sm text-primary-700 break-words">
+        {{ convertToWhatsappHeaderText(baseContent) }}
+      </div>
     </div>
 
     <!-- Translation editor (editable) -->

package/i18n/locales/de.ts

@@ -512,6 +512,8 @@ export default {
     },
     validation: {
       character_limit: 'Dieses Feld hat eine Zeichenbegrenzung.',
+      header_line_breaks:
+        'Zeilenumbrüche werden in der Kopfzeile nicht unterstützt: Die Zeilen werden zu einer zusammengefügt.',
       error: {
         atLeastOneBlockRequired: 'Mindestens ein Inhaltsblock ist erforderlich',
         bodyEmpty: 'Nachrichtentext darf nicht leer sein',

package/i18n/locales/en.ts

@@ -506,6 +506,8 @@ export default {
     },
     validation: {
       character_limit: 'This field has a character limit.',
+      header_line_breaks:
+        "Line breaks aren't supported in the header: the lines will be joined into one.",
       error: {
         atLeastOneBlockRequired: 'At least one content block is required',
         bodyEmpty: 'Message body cannot be empty',

package/i18n/locales/es.ts

@@ -508,6 +508,8 @@ export default {
     },
     validation: {
       character_limit: 'Este campo tiene un límite de caracteres.',
+      header_line_breaks:
+        'Los saltos de línea no se admiten en el encabezado: las líneas se unirán en una sola.',
       error: {
         atLeastOneBlockRequired: 'Se requiere al menos un bloque de contenido',
         bodyEmpty: 'El cuerpo del mensaje no puede estar vacío',

package/i18n/locales/fr.ts

@@ -509,6 +509,8 @@ export default {
     },
     validation: {
       character_limit: 'Ce champ a une limite de caractères.',
+      header_line_breaks:
+        "Les sauts de ligne ne sont pas pris en charge dans l'en-tête : les lignes seront fusionnées en une seule.",
       error: {
         atLeastOneBlockRequired: 'Au moins un bloc de contenu est requis',
         bodyEmpty: 'Le corps du message ne peut pas être vide',

package/i18n/locales/it.ts

@@ -507,6 +507,8 @@ export default {
     },
     validation: {
       character_limit: 'Questo campo ha un limite di caratteri.',
+      header_line_breaks:
+        "Gli a capo non sono supportati nell'intestazione: le righe verranno unite in una sola.",
       error: {
         atLeastOneBlockRequired: 'È obbligatorio almeno un blocco di contenuto',
         bodyEmpty: 'Il corpo del messaggio non può essere vuoto',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "4.5.1-next.0",
+  "version": "4.5.1-next.1",
   "private": false,
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -35,7 +35,7 @@
     "vue-router": "^5.0.7",
     "vue3-emoji-picker": "^1.1.8",
     "zod": "^4.4.3",
-    "@dev.smartpricing/message-composer-utils": "4.5.1-next.0"
+    "@dev.smartpricing/message-composer-utils": "4.5.1-next.1"
   },
   "devDependencies": {
     "@dev.smartpricing/platform-layer": "^0.0.23",