@dev.smartpricing/message-composer-layer 4.2.12 → 4.2.13-ux.0

package/app/components/Brand/BrandDrawer.vue

@@ -149,6 +149,7 @@ function resetForm() {
     backgroundColor: '#F3F4F6',
     contentBackgroundColor: '#FFFFFF',
     textColor: '#000000',
+    linkColor: undefined,
     fontFamily: 'Arial',
   }
   defaultButtonSettings.value = {

package/app/components/Brand/Steps/BrandStepVisual.vue

@@ -3,6 +3,7 @@ import type {
   BrandDefaultEmailSettings,
   BrandDefaultButtonSettings,
 } from '@dev.smartpricing/message-composer-utils/types'
+import { DEFAULT_EMAIL_GLOBAL_SETTINGS } from '@dev.smartpricing/message-composer-utils/types'
 import { getPaletteSync } from 'colorthief'
 
 import FontFamilySelect from '~/components/Common/FontFamilySelect.vue'
@@ -169,7 +170,7 @@ function removeColor(index: number) {
   <!-- Default email colors -->
   <div class="space-y-2">
     <p class="text-sm font-medium">{{ $t('pages.brands.fields.default_email_colors') }}</p>
-    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
       <ColorInput
         :brand-colors="colors"
         v-model="defaultEmailSettings.backgroundColor"
@@ -185,6 +186,12 @@ function removeColor(index: number) {
         v-model="defaultEmailSettings.textColor"
         :label="$t('pages.brands.fields.email_text_color')"
       />
+      <ColorInput
+        :brand-colors="colors"
+        v-model="defaultEmailSettings.linkColor"
+        :default-value="defaultEmailSettings.textColor ?? DEFAULT_EMAIL_GLOBAL_SETTINGS.textColor"
+        :label="$t('pages.brands.fields.email_link_color')"
+      />
     </div>
   </div>
 

package/app/components/Editor/RichTextEditor.vue

@@ -9,6 +9,7 @@ import type {
   RefineTextResponse,
 } from '@dev.smartpricing/message-composer-utils/types'
 import {
+  buildLinkHTMLAttributes,
   convertToWhatsappMarkdown,
   getTipTapExtensions,
   sanitizeContent,
@@ -39,6 +40,7 @@ const props = withDefaults(
     horizontalRule?: boolean
     alignment?: boolean
     link?: boolean
+    linkColor?: string
     emoji?: boolean
   }>(),
   {
@@ -134,9 +136,12 @@ const starterKitConfig = computed(() => {
     link: props.link
       ? {
           openOnClick: false,
-          HTMLAttributes: {
-            class: 'text-primary-600 underline',
-          },
+          // Callers that don't opt in with `linkColor` (e.g. ButtonSettings, whose
+          // links aren't part of the block-level linkColor feature) keep the old
+          // fixed styling instead of an unset `--link-color` custom property.
+          HTMLAttributes: props.linkColor
+            ? { class: 'underline', ...buildLinkHTMLAttributes({ mode: 'live' }) }
+            : { class: 'text-primary-600 underline' },
         }
       : false,
     heading: false,
@@ -373,7 +378,7 @@ defineExpose({
 </script>
 
 <template>
-  <div :data-testid="richTextEditorTestIds.root">
+  <div :data-testid="richTextEditorTestIds.root" :style="{ '--link-color': linkColor }">
     <div class="rounded-md border border-accented overflow-hidden">
       <UEditor
         ref="editorRef"

package/app/components/Email/Editor/Blocks/FooterBlock.vue

@@ -18,6 +18,7 @@ const editor = useEditor({
   extensions: getTipTapExtensions({
     preset: 'email',
     dynamicValues: true,
+    linkColor: { mode: 'live' },
   }),
 })
 
@@ -47,6 +48,7 @@ defineOptions({
         fontFamily: block.settings.fontFamily ?? emailEditorStore.resolvedSettings.fontFamily,
         fontSize: `${block.settings.fontSize}px`,
         color: block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
+        '--link-color': block.settings.linkColor ?? emailEditorStore.resolvedSettings.linkColor,
       }"
     >
       <EditorContent :editor="editor" class="pointer-events-none" />

package/app/components/Email/Editor/Blocks/FooterSettings.vue

@@ -23,6 +23,19 @@ const content = computed({
   },
 })
 
+const resolvedLinkColor = computed(
+  () => props.block.settings.linkColor ?? emailEditorStore.resolvedSettings.linkColor,
+)
+
+function matchTextColor() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      linkColor: props.block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
+    },
+  })
+}
+
 function resetTextStyle() {
   emailEditorStore.updateBlock(props.block.id, {
     settings: {
@@ -38,6 +51,7 @@ function resetColors() {
     settings: {
       ...props.block.settings,
       textColor: DEFAULT_FOOTER_SETTINGS.textColor,
+      linkColor: DEFAULT_FOOTER_SETTINGS.linkColor,
       backgroundColor: DEFAULT_FOOTER_SETTINGS.backgroundColor,
     },
   })
@@ -63,6 +77,7 @@ defineOptions({
         underline
         alignment
         link
+        :link-color="resolvedLinkColor"
         emoji
         dynamic-values
       />
@@ -113,6 +128,25 @@ defineOptions({
         :default-value="emailEditorStore.resolvedSettings.textColor"
       />
 
+      <!-- Link Color -->
+      <ColorInput
+        v-model="block.settings.linkColor"
+        :label="$t('editor.email.blocks.heading.settings.link')"
+        :default-value="emailEditorStore.resolvedSettings.linkColor"
+        :data-testid="footerSettingsTestIds.linkColorInput"
+      >
+        <template #trailing>
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            :label="$t('editor.email.blocks.heading.settings.match_text_color')"
+            :data-testid="footerSettingsTestIds.matchTextColorButton"
+            @click.stop="matchTextColor"
+          />
+        </template>
+      </ColorInput>
+
       <!-- Background Color -->
       <ColorInput
         v-model="block.settings.backgroundColor"

package/app/components/Email/Editor/Blocks/HeadingBlock.vue

@@ -18,6 +18,7 @@ const editor = useEditor({
   extensions: getTipTapExtensions({
     preset: 'email',
     dynamicValues: true,
+    linkColor: { mode: 'live' },
   }),
 })
 
@@ -47,6 +48,7 @@ defineOptions({
         fontFamily: block.settings.fontFamily ?? emailEditorStore.resolvedSettings.fontFamily,
         fontSize: `${block.settings.fontSize}px`,
         color: block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
+        '--link-color': block.settings.linkColor ?? emailEditorStore.resolvedSettings.linkColor,
       }"
     >
       <EditorContent :editor="editor" class="pointer-events-none" />

package/app/components/Email/Editor/Blocks/HeadingSettings.vue

@@ -30,6 +30,19 @@ const content = computed({
   },
 })
 
+const resolvedLinkColor = computed(
+  () => props.block.settings.linkColor ?? emailEditorStore.resolvedSettings.linkColor,
+)
+
+function matchTextColor() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      linkColor: props.block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
+    },
+  })
+}
+
 const typeOptions = HEADING_TAGS.slice(0, 3).map((heading) => ({
   value: heading,
   label: t(`editor.email.blocks.text_types.${heading}`),
@@ -51,6 +64,7 @@ function resetColors() {
     settings: {
       ...props.block.settings,
       textColor: DEFAULT_HEADING_SETTINGS.textColor,
+      linkColor: DEFAULT_HEADING_SETTINGS.linkColor,
       backgroundColor: DEFAULT_HEADING_SETTINGS.backgroundColor,
     },
   })
@@ -83,6 +97,7 @@ defineOptions({
         underline
         alignment
         link
+        :link-color="resolvedLinkColor"
         emoji
         improve
         generate
@@ -146,6 +161,25 @@ defineOptions({
         :default-value="emailEditorStore.resolvedSettings.textColor"
       />
 
+      <!-- Link Color -->
+      <ColorInput
+        v-model="block.settings.linkColor"
+        :label="$t('editor.email.blocks.heading.settings.link')"
+        :default-value="emailEditorStore.resolvedSettings.linkColor"
+        :data-testid="headingSettingsTestIds.linkColorInput"
+      >
+        <template #trailing>
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            :label="$t('editor.email.blocks.heading.settings.match_text_color')"
+            :data-testid="headingSettingsTestIds.matchTextColorButton"
+            @click.stop="matchTextColor"
+          />
+        </template>
+      </ColorInput>
+
       <!-- Background Color -->
       <ColorInput
         v-model="block.settings.backgroundColor"

package/app/components/Email/Editor/Blocks/ParagraphBlock.vue

@@ -18,6 +18,7 @@ const editor = useEditor({
   extensions: getTipTapExtensions({
     preset: 'email',
     dynamicValues: true,
+    linkColor: { mode: 'live' },
   }),
 })
 
@@ -47,6 +48,7 @@ defineOptions({
         fontFamily: block.settings.fontFamily ?? emailEditorStore.resolvedSettings.fontFamily,
         fontSize: `${block.settings.fontSize}px`,
         color: block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
+        '--link-color': block.settings.linkColor ?? emailEditorStore.resolvedSettings.linkColor,
       }"
     >
       <EditorContent :editor="editor" class="pointer-events-none" />

package/app/components/Email/Editor/Blocks/ParagraphSettings.vue

@@ -30,6 +30,19 @@ const content = computed({
   },
 })
 
+const resolvedLinkColor = computed(
+  () => props.block.settings.linkColor ?? emailEditorStore.resolvedSettings.linkColor,
+)
+
+function matchTextColor() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      linkColor: props.block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
+    },
+  })
+}
+
 const typeOptions = TEXT_TAGS.map((tag) => ({
   value: tag,
   label: t(`editor.email.blocks.text_types.${tag}`),
@@ -51,6 +64,7 @@ function resetColors() {
     settings: {
       ...props.block.settings,
       textColor: DEFAULT_PARAGRAPH_SETTINGS.textColor,
+      linkColor: DEFAULT_PARAGRAPH_SETTINGS.linkColor,
       backgroundColor: DEFAULT_PARAGRAPH_SETTINGS.backgroundColor,
     },
   })
@@ -85,6 +99,7 @@ defineOptions({
         horizontal-rule
         alignment
         link
+        :link-color="resolvedLinkColor"
         emoji
         improve
         generate
@@ -147,6 +162,25 @@ defineOptions({
         :default-value="emailEditorStore.resolvedSettings.textColor"
       />
 
+      <!-- Link Color -->
+      <ColorInput
+        v-model="block.settings.linkColor"
+        :label="$t('editor.email.blocks.heading.settings.link')"
+        :default-value="emailEditorStore.resolvedSettings.linkColor"
+        :data-testid="paragraphSettingsTestIds.linkColorInput"
+      >
+        <template #trailing>
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            :label="$t('editor.email.blocks.heading.settings.match_text_color')"
+            :data-testid="paragraphSettingsTestIds.matchTextColorButton"
+            @click.stop="matchTextColor"
+          />
+        </template>
+      </ColorInput>
+
       <!-- Background Color -->
       <ColorInput
         v-model="block.settings.backgroundColor"

package/app/components/Email/Editor/Blocks/UnsubscribeLinkBlock.vue

@@ -17,6 +17,7 @@ const editor = useEditor({
   extensions: getTipTapExtensions({
     preset: 'email',
     dynamicValues: true,
+    linkColor: { mode: 'live' },
   }),
 })
 
@@ -45,6 +46,7 @@ defineOptions({
         fontFamily: block.settings.fontFamily ?? emailEditorStore.resolvedSettings.fontFamily,
         fontSize: `${block.settings.fontSize}px`,
         color: block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
+        '--link-color': block.settings.linkColor ?? emailEditorStore.resolvedSettings.linkColor,
         textAlign: block.settings.alignment,
       }"
     >

package/app/components/Email/Editor/Blocks/UnsubscribeLinkSettings.vue

@@ -24,6 +24,19 @@ const content = computed({
   },
 })
 
+const resolvedLinkColor = computed(
+  () => props.block.settings.linkColor ?? emailEditorStore.resolvedSettings.linkColor,
+)
+
+function matchTextColor() {
+  emailEditorStore.updateBlock(props.block.id, {
+    settings: {
+      ...props.block.settings,
+      linkColor: props.block.settings.textColor ?? emailEditorStore.resolvedSettings.textColor,
+    },
+  })
+}
+
 function resetTextStyle() {
   emailEditorStore.updateBlock(props.block.id, {
     settings: {
@@ -39,6 +52,7 @@ function resetColors() {
     settings: {
       ...props.block.settings,
       textColor: DEFAULT_UNSUBSCRIBE_LINK_SETTINGS.textColor,
+      linkColor: DEFAULT_UNSUBSCRIBE_LINK_SETTINGS.linkColor,
       backgroundColor: DEFAULT_UNSUBSCRIBE_LINK_SETTINGS.backgroundColor,
     },
   })
@@ -63,6 +77,7 @@ defineOptions({
         italic
         underline
         link
+        :link-color="resolvedLinkColor"
         dynamic-values
         :data-testid="unsubscribeLinkSettingsTestIds.contentEditor"
       />
@@ -113,6 +128,24 @@ defineOptions({
         :data-testid="unsubscribeLinkSettingsTestIds.textColorInput"
       />
 
+      <ColorInput
+        v-model="block.settings.linkColor"
+        :label="$t('editor.email.blocks.heading.settings.link')"
+        :default-value="emailEditorStore.resolvedSettings.linkColor"
+        :data-testid="unsubscribeLinkSettingsTestIds.linkColorInput"
+      >
+        <template #trailing>
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            :label="$t('editor.email.blocks.heading.settings.match_text_color')"
+            :data-testid="unsubscribeLinkSettingsTestIds.matchTextColorButton"
+            @click.stop="matchTextColor"
+          />
+        </template>
+      </ColorInput>
+
       <ColorInput
         v-model="block.settings.backgroundColor"
         :label="$t('editor.email.blocks.heading.settings.backgroundBlock')"

package/app/utils/testIds.const.ts

@@ -617,6 +617,8 @@ export const footerSettingsTestIds = {
   container: 'footer-settings-container',
   fontSizeField: 'footer-settings-font-size-field',
   fontSizeInput: 'footer-settings-font-size-input',
+  linkColorInput: 'footer-settings-link-color-input',
+  matchTextColorButton: 'footer-settings-match-text-color-button',
 } as const
 
 export const gridBlockTestIds = {
@@ -655,6 +657,8 @@ export const headingSettingsTestIds = {
   tagSelect: 'heading-settings-tag-select',
   fontSizeField: 'heading-settings-font-size-field',
   fontSizeInput: 'heading-settings-font-size-input',
+  linkColorInput: 'heading-settings-link-color-input',
+  matchTextColorButton: 'heading-settings-match-text-color-button',
 } as const
 
 export const htmlBlockTestIds = {
@@ -693,6 +697,8 @@ export const paragraphSettingsTestIds = {
   tagSelect: 'paragraph-settings-tag-select',
   fontSizeField: 'paragraph-settings-font-size-field',
   fontSizeInput: 'paragraph-settings-font-size-input',
+  linkColorInput: 'paragraph-settings-link-color-input',
+  matchTextColorButton: 'paragraph-settings-match-text-color-button',
 } as const
 
 export const socialsBlockTestIds = {
@@ -734,6 +740,8 @@ export const unsubscribeLinkSettingsTestIds = {
   fontSizeInput: 'unsubscribe-link-settings-font-size-input',
   textColorInput: 'unsubscribe-link-settings-text-color-input',
   backgroundColorInput: 'unsubscribe-link-settings-background-color-input',
+  linkColorInput: 'unsubscribe-link-settings-link-color-input',
+  matchTextColorButton: 'unsubscribe-link-settings-match-text-color-button',
 } as const
 
 export const previewByIdTestIds = {

package/i18n/locales/de.ts

@@ -266,6 +266,8 @@ export default {
             color: 'Farbe',
             content: 'Inhalt',
             font: 'Schriftart',
+            link: 'Link',
+            match_text_color: 'An Textfarbe anpassen',
             size: 'Größe',
             text: 'Text',
             textStyle: 'Textstil',
@@ -693,6 +695,7 @@ export default {
         default_font: 'Standardschriftart',
         email_bg_color: 'Hintergrund',
         email_content_bg_color: 'Inhalt-Hintergrund',
+        email_link_color: 'Link-Farbe',
         email_text_color: 'Text',
         extracting_colors: 'Farben werden aus dem Logo extrahiert...',
         logo: 'Logo',

package/i18n/locales/en.ts

@@ -260,6 +260,8 @@ export default {
             color: 'Color',
             content: 'Content',
             font: 'Font',
+            link: 'Link',
+            match_text_color: 'Match text color',
             size: 'Size',
             text: 'Text',
             textStyle: 'Text style',
@@ -682,6 +684,7 @@ export default {
         default_font: 'Default font',
         email_bg_color: 'Background',
         email_content_bg_color: 'Content background',
+        email_link_color: 'Link color',
         email_text_color: 'Text',
         extracting_colors: 'Extracting colors from logo...',
         logo: 'Logo',

package/i18n/locales/es.ts

@@ -261,6 +261,8 @@ export default {
             color: 'Color',
             content: 'Contenido',
             font: 'Fuente',
+            link: 'Enlace',
+            match_text_color: 'Igualar al color del texto',
             size: 'Tamaño',
             text: 'Texto',
             textStyle: 'Estilo del texto',
@@ -691,6 +693,7 @@ export default {
         default_font: 'Fuente predeterminada',
         email_bg_color: 'Fondo',
         email_content_bg_color: 'Fondo contenido',
+        email_link_color: 'Color de enlace',
         email_text_color: 'Texto',
         extracting_colors: 'Extrayendo colores del logo...',
         logo: 'Logo',

package/i18n/locales/fr.ts

@@ -262,6 +262,8 @@ export default {
             color: 'Couleur',
             content: 'Contenu',
             font: 'Police',
+            link: 'Lien',
+            match_text_color: 'Assortir à la couleur du texte',
             size: 'Taille',
             text: 'Texte',
             textStyle: 'Style de texte',
@@ -695,6 +697,7 @@ export default {
         default_font: 'Police par défaut',
         email_bg_color: 'Fond',
         email_content_bg_color: 'Fond contenu',
+        email_link_color: 'Couleur du lien',
         email_text_color: 'Texte',
         extracting_colors: 'Extraction des couleurs du logo...',
         logo: 'Logo',

package/i18n/locales/it.ts

@@ -261,6 +261,8 @@ export default {
             color: 'Colore',
             content: 'Contenuto',
             font: 'Font',
+            link: 'Link',
+            match_text_color: 'Abbina al colore del testo',
             size: 'Dimensione',
             text: 'Testo',
             textStyle: 'Stile testo',
@@ -688,6 +690,7 @@ export default {
         default_font: 'Font predefinito',
         email_bg_color: 'Sfondo',
         email_content_bg_color: 'Sfondo contenuto',
+        email_link_color: 'Colore link',
         email_text_color: 'Testo',
         extracting_colors: 'Estrazione dei colori dal logo...',
         logo: 'Logo',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev.smartpricing/message-composer-layer",
-  "version": "4.2.12",
+  "version": "4.2.13-ux.0",
   "private": false,
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -36,7 +36,7 @@
     "vue-router": "^5.0.7",
     "vue3-emoji-picker": "^1.1.8",
     "zod": "^4.4.3",
-    "@dev.smartpricing/message-composer-utils": "4.2.12"
+    "@dev.smartpricing/message-composer-utils": "4.2.13-ux.0"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.15.2",