@dev.smartpricing/message-composer-layer 1.0.1

package/app/components/Editor/RichTextEditor.vue

@@ -0,0 +1,495 @@
+<script lang="ts" setup>
+import type { JSONContent, Editor } from '@tiptap/vue-3'
+import type { EmojiExt } from 'vue3-emoji-picker'
+import CharacterCount from '@tiptap/extension-character-count'
+import TextAlign from '@tiptap/extension-text-align'
+import Mention from '@tiptap/extension-mention'
+import type {
+  GenerateTextWidgetType,
+  RefineTextResponse,
+} from '@dev.smartpricing/message-composer-utils/types'
+import { convertToWhatsappMarkdown } from '@dev.smartpricing/message-composer-utils/utils'
+import EmojiPickerButton from '../Common/EmojiPickerButton.vue'
+import DynamicDataSlideover from '../DynamicDataSlideover.vue'
+import EditorLinkPopover from './EditorLinkPopover.vue'
+import AiGenerateSlideover from './AiGenerateSlideover.vue'
+import { useRefineTextMutation } from '~/queries'
+import Emoji, { gitHubEmojis } from '@tiptap/extension-emoji'
+
+const { t } = useI18n()
+
+const props = withDefaults(
+  defineProps<{
+    preset: 'whatsapp' | 'email'
+    characterLimit?: number
+    dynamicValues?: boolean
+    defaultContext?: string
+    improve?: boolean
+    generate?: boolean
+    generateWidgetType?: GenerateTextWidgetType
+    generateContext?: string
+    bold?: boolean
+    italic?: boolean
+    underline?: boolean
+    lists?: boolean
+    horizontalRule?: boolean
+    alignment?: boolean
+    link?: boolean
+    emoji?: boolean
+  }>(),
+  {
+    bold: false,
+    italic: false,
+    underline: false,
+    lists: false,
+    horizontalRule: false,
+    alignment: false,
+    link: false,
+    emoji: false,
+    dynamicValues: false,
+    improve: false,
+    generate: false,
+  },
+)
+
+defineOptions({
+  name: 'RichTextEditor',
+})
+
+const text = defineModel<JSONContent | undefined>('text', {
+  required: true,
+})
+
+const emit = defineEmits<{
+  focusout: [FocusEvent]
+  'update:html': [string]
+}>()
+
+// Build extensions based on preset
+const extensions = computed(() => {
+  const exts = []
+
+  // Character count
+  if (props.characterLimit) {
+    exts.push(
+      CharacterCount.configure({
+        limit: props.characterLimit,
+      }),
+    )
+  }
+
+  // Mention for dynamic values - configure custom rendering
+  if (props.dynamicValues) {
+    exts.push(
+      Mention.configure({
+        renderText: (mention) => `{{${mention.node.attrs.label}}}`,
+        renderHTML: (mention) => `{{${mention.node.attrs.label || mention.node.attrs.id}}}`,
+        HTMLAttributes: {
+          class: 'dynamic-data',
+        },
+        deleteTriggerWithBackspace: true,
+      }),
+    )
+  }
+
+  if (props.alignment) {
+    exts.push(
+      TextAlign.configure({
+        types: ['paragraph'],
+      }),
+    )
+  }
+
+  // Add emoji support if enabled
+  if (props.emoji) {
+    exts.push(
+      Emoji.configure({
+        emojis: gitHubEmojis,
+        HTMLAttributes: {
+          class: 'tiptap-emoji',
+        },
+        suggestion: {
+          char: ':',
+          items: (props) => gitHubEmojis.filter((emoji) => emoji.name.includes(props.query)),
+        },
+      }),
+    )
+  }
+
+  return exts
+})
+
+// Mention configuration - disable built-in since we use custom
+
+// StarterKit configuration based on preset
+const starterKitConfig = computed(() => {
+  return {
+    bold: props.bold ? undefined : false,
+    italic: props.italic ? undefined : false,
+    underline: props.underline ? undefined : false,
+    link: props.link
+      ? {
+          openOnClick: false,
+          HTMLAttributes: {
+            class: 'text-primary-600 underline',
+          },
+        }
+      : false,
+    heading: false,
+    bulletList: props.lists ? undefined : false,
+    orderedList: props.lists ? undefined : false,
+    blockquote: false,
+    code: false,
+    codeBlock: false,
+    horizontalRule: props.horizontalRule ? undefined : false,
+    hardBreak: props.preset === 'email' ? undefined : false,
+    strike: false,
+    listItem: props.lists ? undefined : false,
+  }
+})
+
+// Editor reference
+const editorRef = useTemplateRef<{ editor: Editor }>('editorRef')
+const editor = computed(() => editorRef.value?.editor)
+
+// Toolbar items - built from boolean props
+const toolbarItems = computed(() => {
+  const items: any[][] = []
+
+  // Formatting group
+  const fmtGroup: any[] = []
+  if (props.bold) {
+    fmtGroup.push({
+      kind: 'mark',
+      mark: 'bold',
+      icon: 'ph:text-b',
+      tooltip: { text: t('editor.toolbar.bold') },
+    })
+  }
+  if (props.italic) {
+    fmtGroup.push({
+      kind: 'mark',
+      mark: 'italic',
+      icon: 'ph:text-italic',
+      tooltip: { text: t('editor.toolbar.italic') },
+    })
+  }
+  if (props.underline) {
+    fmtGroup.push({
+      kind: 'mark',
+      mark: 'underline',
+      icon: 'ph:text-underline',
+      tooltip: { text: t('editor.toolbar.underline') },
+    })
+  }
+  if (fmtGroup.length) items.push(fmtGroup)
+
+  // Lists group
+  if (props.lists) {
+    items.push([
+      {
+        kind: 'bulletList',
+        icon: 'ph:list-bullets',
+        tooltip: { text: t('editor.toolbar.bullet_list') },
+      },
+      {
+        kind: 'orderedList',
+        icon: 'ph:list-numbers',
+        tooltip: { text: t('editor.toolbar.ordered_list') },
+      },
+    ])
+  }
+
+  // Horizontal rule
+  if (props.horizontalRule) {
+    items.push([{ slot: 'horizontalRule' as const, icon: 'ph:minus' }])
+  }
+
+  // Alignment
+  if (props.alignment) {
+    items.push([
+      {
+        icon: 'ph:text-align-justify',
+        kind: 'textAlign',
+        items: [
+          {
+            kind: 'textAlign',
+            align: 'left',
+            icon: 'ph:text-align-left',
+            label: t('editor.toolbar.align_left'),
+          },
+          {
+            kind: 'textAlign',
+            align: 'center',
+            icon: 'ph:text-align-center',
+            label: t('editor.toolbar.align_center'),
+          },
+          {
+            kind: 'textAlign',
+            align: 'right',
+            icon: 'ph:text-align-right',
+            label: t('editor.toolbar.align_right'),
+          },
+          {
+            kind: 'textAlign',
+            align: 'justify',
+            icon: 'ph:text-align-justify',
+            label: t('editor.toolbar.align_justify'),
+          },
+        ],
+        tooltip: { text: t('editor.toolbar.text_align') },
+      },
+    ])
+  }
+
+  // Link
+  if (props.link) {
+    items.push([{ slot: 'link' as const, icon: 'ph:link' }])
+  }
+
+  // Emoji picker
+  if (props.emoji) {
+    items.push([{ slot: 'emoji' as const, icon: 'ph:smiley' }])
+  }
+
+  // Dynamic data slot
+  if (props.dynamicValues) {
+    items.push([{ slot: 'dynamicData' as const, icon: 'ph:brackets-curly' }])
+  }
+
+  // AI actions (improve / generate) — single popover trigger
+  if (props.improve || props.generate) {
+    items.push([{ slot: 'ai' as const, icon: 'ph:sparkle' }])
+  }
+
+  return items
+})
+
+// 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 whatsappCharCount = computed(() => {
+  if (props.preset !== 'whatsapp' || !props.characterLimit || !text.value) return 0
+  return convertToWhatsappMarkdown(text.value).length
+})
+
+// Handlers
+function onSelectEmoji(emoji: EmojiExt) {
+  editor.value?.commands.insertContent(emoji.i)
+}
+
+function onSelectDynamicData(data: { value: string; label: string }) {
+  editor.value
+    ?.chain()
+    .focus()
+    .insertContent({
+      type: 'mention',
+      attrs: {
+        id: data.value,
+        label: data.value,
+      },
+    })
+    .run()
+}
+
+function insertHorizontalRule() {
+  editor.value?.chain().focus().insertContent({ type: 'horizontalRule' }).run()
+}
+
+function handleUpdate({ editor: ed }: { editor: Editor }) {
+  text.value = ed.getJSON()
+  emit('update:html', ed.getHTML())
+}
+
+function handleBlur({ event }: { event: FocusEvent }) {
+  emit('focusout', event)
+}
+
+// AI Improve text
+const { mutateAsync: refineText, isLoading: isRefining } = useRefineTextMutation()
+
+async function improveText() {
+  if (!editor.value) return
+
+  try {
+    const data = await refineText(editor.value.getHTML())
+    const refinedText = (data as RefineTextResponse)?.refinedText
+    if (refinedText) {
+      editor.value.commands.setContent(refinedText)
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+// AI Generate text
+const isGenerateOpen = ref(false)
+
+function openGenerate() {
+  isGenerateOpen.value = true
+}
+
+function handleGenerateSelect(html: string) {
+  if (!editor.value) return
+  editor.value.commands.setContent(html)
+  // Trigger update so the model syncs
+  text.value = editor.value.getJSON()
+  emit('update:html', editor.value.getHTML())
+}
+
+// Exposed methods
+function setFocus() {
+  editor.value?.commands.focus()
+}
+
+function getHtml() {
+  return editor.value?.getHTML() || ''
+}
+
+function isEmpty() {
+  return getHtml() === '' || editor.value?.isEmpty
+}
+
+defineExpose({
+  editor,
+  setFocus,
+  isEmpty,
+  getHtml,
+})
+</script>
+
+<template>
+  <div :data-testid="richTextEditorTestIds.root">
+    <div class="rounded-md border border-accented overflow-hidden">
+      <UEditor
+        ref="editorRef"
+        v-slot="{ editor: ed }"
+        v-model="text"
+        content-type="json"
+        :image="false"
+        :extensions="extensions"
+        :starter-kit="starterKitConfig"
+        :on-update="handleUpdate"
+        :mention="false"
+        :on-blur="handleBlur"
+        :placeholder="$t('editor.placeholder.insert_text')"
+        :data-testid="richTextEditorTestIds.editor"
+      >
+        <UEditorToolbar
+          :editor="ed"
+          :items="toolbarItems"
+          layout="fixed"
+          class="bg-muted border-b border-accented flex-wrap"
+          :data-testid="richTextEditorTestIds.toolbar"
+        >
+          <template #link>
+            <EditorLinkPopover v-if="ed" :editor="ed" />
+          </template>
+
+          <template #horizontalRule>
+            <UButton
+              size="sm"
+              color="neutral"
+              variant="ghost"
+              icon="ph:minus"
+              :tooltip="{ text: $t('editor.toolbar.horizontal_rule') }"
+              :data-testid="richTextEditorTestIds.horizontalRuleButton"
+              @click="insertHorizontalRule"
+            />
+          </template>
+
+          <template #emoji>
+            <EmojiPickerButton @select="onSelectEmoji" />
+          </template>
+
+          <template #dynamicData>
+            <DynamicDataSlideover
+              :default-context="props.defaultContext"
+              @select="onSelectDynamicData"
+            />
+          </template>
+
+          <template #ai>
+            <UPopover>
+              <UButton
+                size="sm"
+                color="ai"
+                variant="outline"
+                icon="ph:sparkle"
+                :data-testid="richTextEditorTestIds.improveButton"
+              />
+              <template #content>
+                <div class="flex flex-col gap-1 p-1">
+                  <UButton
+                    v-if="improve"
+                    size="sm"
+                    variant="ghost"
+                    :disabled="isEmpty() || isRefining"
+                    :label="$t('editor.actions.improve_text')"
+                    @click="improveText"
+                  />
+                  <AiGenerateSlideover
+                    v-if="generate && generateWidgetType"
+                    v-model:open="isGenerateOpen"
+                    :widget-type="generateWidgetType"
+                    :context="generateContext"
+                    @select="handleGenerateSelect"
+                  />
+                </div>
+              </template>
+            </UPopover>
+          </template>
+        </UEditorToolbar>
+      </UEditor>
+
+      <!-- Refining overlay -->
+      <div class="relative">
+        <div v-show="isRefining" class="absolute inset-0 bg-white z-10">
+          <p class="paragraph-sm text-rainbow px-4 py-3">
+            {{ $t('editor.actions.refining') }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Character limit display -->
+    <p
+      v-if="editor && characterLimit"
+      class="paragraph-xs text-primary-700 flex justify-between pt-1.5 px-1"
+    >
+      <span>
+        {{ $t('editor.validation.character_limit') }}
+      </span>
+      <span>
+        {{ preset === 'whatsapp' ? whatsappCharCount : editor.storage.characterCount.characters() }}
+        / {{ characterLimit }}
+      </span>
+    </p>
+
+    <!-- AI Generate slideover -->
+  </div>
+</template>
+
+<style>
+.ProseMirror {
+  padding: 1rem;
+}
+
+.tiptap-emoji img {
+  height: 1em;
+  width: 1em;
+  vertical-align: middle;
+}
+
+.ProseMirror ul {
+  list-style-type: unset;
+}
+
+.ProseMirror ol {
+  list-style-type: unset;
+}
+
+.ProseMirror li {
+  display: list-item;
+}
+</style>

package/app/components/Email/Editor/BlockLibrary.vue

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { useDragAndDrop } from '@formkit/drag-and-drop/vue'
+import { emptyEmailBlock, type EmailBlock } from '@dev.smartpricing/message-composer-utils/types'
+
+const { t } = useI18n()
+const { mainLanguage } = storeToRefs(useAppContextStore())
+
+const blockDefinitions = (): EmailBlock[] => [
+  emptyEmailBlock('spacer'),
+  emptyEmailBlock('grid'),
+  emptyEmailBlock('divider'),
+  emptyEmailBlock('heading'),
+  emptyEmailBlock('paragraph'),
+  emptyEmailBlock('image'),
+  emptyEmailBlock('button'),
+  emptyEmailBlock('discount'),
+  emptyEmailBlock('header'),
+  emptyEmailBlock('footer'),
+  emptyEmailBlock('socials'),
+  emptyEmailBlock('unsubscribe_link', mainLanguage.value),
+  emptyEmailBlock('top_products'),
+  emptyEmailBlock('raw_html'),
+]
+
+const blockIcons: Record<EmailBlock['type'], string> = {
+  button: 'ph:cursor',
+  spacer: 'ph:arrows-in-line-vertical',
+  discount: 'ph:tag',
+  divider: 'ph:minus',
+  heading: 'ph:text-t',
+  paragraph: 'ph:text-aa',
+  image: 'ph:images',
+  grid: 'ph:grid-four',
+  raw_html: 'ph:code',
+  header: 'ph:parallelogram',
+  footer: 'ph:signature',
+  unsubscribe_link: 'ph:link-break',
+  socials: 'ph:share-network',
+  top_products: 'ph:storefront',
+}
+
+// Setup drag-and-drop with clone plugin for library
+const [libraryRef, libraryValues] = useDragAndDrop(blockDefinitions(), {
+  group: 'mail-builder',
+  sortable: false, // Library items don't reorder
+  dragEffectAllowed: 'copy',
+  dragDropEffect: 'copy',
+  accepts: () => false,
+  onTransfer: () => {
+    libraryValues.value = blockDefinitions()
+  },
+})
+
+const emailEditorStore = useEmailEditorStore()
+
+const emit = defineEmits<{
+  'block-added': [payload: { type: string; adding_mode: string }]
+}>()
+
+function handleBlockClick(block: EmailBlock) {
+  emailEditorStore.addBlock(block)
+  emit('block-added', { type: block.type, adding_mode: 'Click' })
+}
+
+defineOptions({
+  name: 'EmailEditorBlockLibrary',
+})
+</script>
+
+<template>
+  <div ref="libraryRef" class="space-y-2" :data-testid="blockLibraryTestIds.container">
+    <div
+      v-for="block in libraryValues"
+      :key="block.type"
+      :data-block-type="block.type"
+      class="flex w-full cursor-grab active:cursor-grabbing items-center gap-3 rounded-lg border border-neutral-200 bg-white p-3 text-left transition-colors hover:border-primary-500 hover:bg-primary-50"
+      :data-testid="`${blockLibraryTestIds.blockItem}-${block.type}`"
+      @click="handleBlockClick(block)"
+    >
+      <UAvatar :icon="blockIcons[block.type]" />
+
+      <div class="flex-1 paragraph-sm-bold truncate">
+        {{ $t(`editor.email.blocks.${block.type}.name`) }}
+      </div>
+
+      <UIcon name="i-heroicons-bars-3" class="size-5 text-neutral-400 shrink-0" />
+    </div>
+  </div>
+</template>

package/app/components/Email/Editor/BlockSettings.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import type { EmailBlock } from '@dev.smartpricing/message-composer-utils/types'
+import SpacerSettings from './Blocks/SpacerSettings.vue'
+import DividerSettings from './Blocks/DividerSettings.vue'
+import ParagraphSettings from './Blocks/ParagraphSettings.vue'
+import HeadingSettings from './Blocks/HeadingSettings.vue'
+import HTMLSettings from './Blocks/HTMLSettings.vue'
+import ImageSettings from './Blocks/ImageSettings.vue'
+import ButtonSettings from './Blocks/ButtonSettings.vue'
+import DiscountCodeSettings from './Blocks/DiscountCodeSettings.vue'
+import GridSettings from './Blocks/GridSettings.vue'
+import FooterSettings from './Blocks/FooterSettings.vue'
+import UnsubscribeLinkSettings from './Blocks/UnsubscribeLinkSettings.vue'
+import SocialsSettings from './Blocks/SocialsSettings.vue'
+import HeaderSettings from './Blocks/HeaderSettings.vue'
+import TopProductsSettings from './Blocks/TopProductsSettings.vue'
+
+const props = defineProps<{
+  block: EmailBlock
+}>()
+
+// Component registry for settings panels
+const settingsComponents = {
+  spacer: SpacerSettings,
+  divider: DividerSettings,
+  paragraph: ParagraphSettings,
+  heading: HeadingSettings,
+  raw_html: HTMLSettings,
+  image: ImageSettings,
+  button: ButtonSettings,
+  discount: DiscountCodeSettings,
+  grid: GridSettings,
+  footer: FooterSettings,
+  unsubscribe_link: UnsubscribeLinkSettings,
+  socials: SocialsSettings,
+  header: HeaderSettings,
+  top_products: TopProductsSettings,
+} as const
+
+const settingsComponent = computed(() => {
+  return settingsComponents[props.block.type as keyof typeof settingsComponents]
+})
+
+defineOptions({
+  name: 'EmailEditorBlockSettings',
+})
+</script>
+
+<template>
+  <component
+    v-if="settingsComponent"
+    :is="settingsComponent"
+    :block="block as any"
+    :key="block.id"
+    :data-testid="blockSettingsTestIds.container"
+  />
+  <div v-else class="p-4 text-sm text-neutral-500" :data-testid="blockSettingsTestIds.notAvailable">
+    {{ $t('editor.email.sidebar.settingsNotAvailable', { type: block.type }) }}
+  </div>
+</template>