@dev.smartpricing/message-composer-layer 4.3.1 → 4.3.2-fix.1

package/app/api/client.ts

@@ -15,7 +15,9 @@ function assertAppError(data: unknown): data is AppError {
 export const apiClient = createApiClient({
   baseURL: useRuntimeConfig().public.COMPOSER_API_URL as string,
   csrf: {
-    cookieName: (useRuntimeConfig().public.ENV_CSRF_COOKIE_NAME as string) || 'smt_csrf',
+    // Same key and derivation as platform-layer's own client: the host sets the
+    // full cookie name (env-suffixed: smt_csrf / smt_csrf_stage / smt_csrf_dev).
+    cookieName: (useRuntimeConfig().public.CSRF_COOKIE_NAME as string) || 'smt_csrf',
   },
   auth: {
     refreshBaseURL:

package/app/components/Editor/RichTextEditor.vue

@@ -10,6 +10,7 @@ import type {
 } from '@dev.smartpricing/message-composer-utils/types'
 import {
   buildLinkHTMLAttributes,
+  convertToWhatsappHeaderText,
   convertToWhatsappMarkdown,
   getTipTapExtensions,
   sanitizeContent,
@@ -25,7 +26,7 @@ const { t } = useI18n()
 
 const props = withDefaults(
   defineProps<{
-    preset: 'whatsapp' | 'email'
+    preset: 'whatsapp' | 'whatsapp-header' | 'email'
     characterLimit?: number
     dynamicValues?: boolean
     defaultContext?: string
@@ -277,9 +278,12 @@ 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 whatsappCharCount = computed(() => {
-  if (props.preset !== 'whatsapp' || !props.characterLimit || !text.value) return 0
-  return convertToWhatsappMarkdown(text.value).length
+  if (!isWhatsapp.value || !props.characterLimit || !text.value) return 0
+  return props.preset === 'whatsapp-header'
+    ? convertToWhatsappHeaderText(text.value).length
+    : convertToWhatsappMarkdown(text.value).length
 })
 
 // Handlers
@@ -482,7 +486,7 @@ defineExpose({
         {{ $t('editor.validation.character_limit') }}
       </span>
       <span>
-        {{ preset === 'whatsapp' ? whatsappCharCount : editor.storage.characterCount.characters() }}
+        {{ isWhatsapp ? whatsappCharCount : editor.storage.characterCount.characters() }}
         / {{ characterLimit }}
       </span>
     </p>

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

@@ -112,10 +112,7 @@ function isMultimedia(model: HeaderBlockV1): model is WaHeaderTypeV1Url {
     <div v-if="model.type === 'text'" class="mt-3">
       <RichTextEditor
         v-model:text="model.content"
-        preset="whatsapp"
-        bold
-        italic
-        emoji
+        preset="whatsapp-header"
         improve
         :character-limit="WA_HEADER_TEXT_MAX_LENGTH"
         dynamic-values

package/app/components/Whatsapp/Preview.vue

@@ -9,6 +9,7 @@ import { computed } from 'vue'
 import {
   generateWhatsappHtml,
   getTipTapExtensions,
+  sanitizeContent,
 } from '@dev.smartpricing/message-composer-utils/utils'
 import { useResolvedParametersQuery } from '~/queries/compilation'
 
@@ -51,9 +52,10 @@ const bodyHtml = computed(() => {
 const headerHtml = 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(
-    props.message.body.header.content,
-    getTipTapExtensions({ preset: 'whatsapp-header' }),
+    sanitizeContent(props.message.body.header.content, extensions),
+    extensions,
   ).replaceAll('<p></p>', '<p>&nbsp;</p>')
   return replaceMentionsWithValues(html)
 })

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

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import type { JSONContent } from '@tiptap/vue-3'
 import { generateHTML } from '@tiptap/vue-3'
-import { getTipTapExtensions } from '@dev.smartpricing/message-composer-utils/utils'
+import {
+  getTipTapExtensions,
+  sanitizeContent,
+} 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'
@@ -23,7 +26,8 @@ const appContext = useAppContextStore()
 // Generate HTML for preview of base language with rich text support
 function generatePreviewHtml(content: JSONContent | undefined): string {
   if (!content) return ''
-  return generateHTML(content, getTipTapExtensions({ preset: 'whatsapp-header' })).replaceAll(
+  const extensions = getTipTapExtensions({ preset: 'whatsapp-header' })
+  return generateHTML(sanitizeContent(content, extensions), extensions).replaceAll(
     '<p></p>',
     '<p>&nbsp;</p>',
   )
@@ -45,10 +49,7 @@ function generatePreviewHtml(content: JSONContent | undefined): string {
       <div class="flex-1">
         <RichTextEditor
           v-model:text="targetContent"
-          preset="whatsapp"
-          bold
-          italic
-          emoji
+          preset="whatsapp-header"
           dynamic-values
           :character-limit="WA_HEADER_TEXT_MAX_LENGTH"
           :data-testid="whatsappTranslatorHeaderTestIds.targetEditor"

package/nuxt.config.ts

@@ -1,9 +1,6 @@
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   ssr: false,
-  experimental: {
-    viteEnvironmentApi: true,
-  },
   devtools: { enabled: true },
   imports: {
     dirs: ['stores', 'queries'],
@@ -57,9 +54,11 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       COMPOSER_API_URL: '',
+      // BACKEND_BASE_URL, PLATFORM_URL and CSRF_COOKIE_NAME are declared by
+      // platform-layer (extended above); the host sets them once for both.
       BACKEND_BASE_URL: '',
       PLATFORM_URL: '',
-      ENV_CSRF_COOKIE_NAME: 'smt_csrf',
+      CSRF_COOKIE_NAME: '',
     },
   },
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "4.3.1",
+  "version": "4.3.2-fix.1",
   "private": false,
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -12,7 +12,6 @@
     "app.config.ts"
   ],
   "dependencies": {
-    "@dev.smartpricing/platform-layer": "^0.0.23",
     "@formkit/drag-and-drop": "^0.5.3",
     "@pinia/colada": "^1.3.0",
     "@tiptap/extension-character-count": "^3.23.4",
@@ -36,9 +35,10 @@
     "vue-router": "^5.0.7",
     "vue3-emoji-picker": "^1.1.8",
     "zod": "^4.4.3",
-    "@dev.smartpricing/message-composer-utils": "4.3.1"
+    "@dev.smartpricing/message-composer-utils": "4.3.2-fix.1"
   },
   "devDependencies": {
+    "@dev.smartpricing/platform-layer": "^0.0.23",
     "@nuxt/eslint": "^1.15.2",
     "@nuxt/test-utils": "^4.0.3",
     "@playwright/test": "^1.60.0",
@@ -48,6 +48,7 @@
     "vue-tsc": "^3.2.9"
   },
   "peerDependencies": {
+    "@dev.smartpricing/platform-layer": ">=0.0.20",
     "nuxt-ui-layer": ">=1.3.0"
   },
   "scripts": {