@nuxt-customer-portal/ui 0.4.8 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @nuxt-customer-portal/ui
 
+## 0.5.0
+
+### Minor Changes
+
+- 5beff82: Add a shared visual Markdown editor with a raw Markdown mode, protected special content, and English/Dutch formatting controls. Use it for product summaries/descriptions and email bodies/footers, including a picker for the selected email's available placeholders.
+
+### Patch Changes
+
+- @nuxt-customer-portal/core@0.5.0
+
+## 0.4.9
+
+### Patch Changes
+
+- @nuxt-customer-portal/core@0.4.9
+
 ## 0.4.8
 
 ### Patch Changes

package/README.md

@@ -3,3 +3,19 @@
 Neutral shell primitives and fallback layouts for Nuxt Customer Portal. Hosts
 can override every layout and branded component while retaining the shared
 feature registry, session state, and navigation contracts from core.
+
+`PortalMarkdownEditor` provides visual formatting and a raw Markdown mode over
+one string `v-model`. It integrates with Nuxt UI `UFormField` validation and
+inherits the form's disabled state. Use it for fields rendered as Markdown;
+plain text fields should retain their text inputs. Product summaries and
+descriptions and email bodies and footers use this component.
+
+Pass `placeholders` as an array of `{ label, value }` options to offer insertion
+at the current cursor in either mode. Email forms derive these options from the
+selected email definition. Supported visual formatting includes headings,
+bold, italic, links, lists, quotes, code and dividers. HTML, images, tables,
+checklists, reference links and other unsupported syntax are shown as inert,
+protected source blocks; edit these through Markdown mode. Opening the editor
+or changing modes does not rewrite the stored string. Visual edits serialize
+standard Markdown formatting while retaining protected blocks. Existing
+server renderers still determine what appears in published content.

package/app/components/PortalMarkdownEditor.vue

@@ -0,0 +1,373 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { Editor } from '@tiptap/core'
+import { EditorContent, useEditor } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import { Markdown } from '@tiptap/markdown'
+import { useFormField, inputIdInjectionKey } from '#ui/composables/useFormField'
+import { parseVisualMarkdown } from '../utils/visual-markdown'
+import { createProtectedMarkdown, insertMarkdownPlaceholder, MarkdownPlaceholder } from '../utils/protected-markdown'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    disabled?: boolean
+    rows?: number
+    placeholder?: string
+    placeholders?: Array<{ label: string; value: string }>
+  }>(),
+  { rows: 8, placeholders: () => [] }
+)
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+const { t } = useI18n()
+const source = ref(false)
+const sourceElement = ref<{ textareaRef?: HTMLTextAreaElement }>()
+const { id, disabled, color, ariaAttrs, emitFormInput, emitFormBlur, emitFormFocus } = useFormField(props)
+// Toolbar controls must not inherit or replace the Markdown field's input ID.
+provide(inputIdInjectionKey, ref(undefined))
+const pickerId = useId()
+const notice = ref(false)
+let syncing = false
+function update(value: string) {
+  emit('update:modelValue', value)
+  emitFormInput()
+}
+const protectedMarkdown = createProtectedMarkdown(
+  () => syncing,
+  () => {
+    notice.value = true
+  }
+)
+const editor = useEditor({
+  extensions: [
+    StarterKit.configure({ underline: false, strike: false, link: { openOnClick: false } }),
+    Markdown,
+    protectedMarkdown,
+    MarkdownPlaceholder
+  ],
+  content: parseVisualMarkdown(props.modelValue),
+  editable: !disabled.value,
+  editorProps: { attributes: { role: 'textbox', 'aria-multiline': 'true', class: 'p-3 outline-none min-h-32' } },
+  onCreate: ({ editor }) => {
+    editor.markdown!.parse = parseVisualMarkdown
+    editor.setOptions({
+      editorProps: {
+        attributes: {
+          id: id.value || '',
+          ...ariaAttrs.value,
+          role: 'textbox',
+          'aria-multiline': 'true',
+          class: 'p-3 outline-none min-h-32'
+        }
+      }
+    })
+  },
+  onUpdate: ({ editor }) => {
+    if (!syncing) {
+      update(editor.getMarkdown())
+    }
+  },
+  onFocus: emitFormFocus,
+  onBlur: emitFormBlur
+})
+function syncContent() {
+  if (!editor.value) {
+    return
+  }
+  syncing = true
+  try {
+    editor.value.commands.setContent(parseVisualMarkdown(props.modelValue), { emitUpdate: false })
+  } finally {
+    syncing = false
+  }
+}
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (!source.value && editor.value?.getMarkdown() !== value) {
+      syncContent()
+    }
+  }
+)
+watch(source, (raw) => {
+  notice.value = false
+  if (!raw) {
+    syncContent()
+  }
+})
+watch(disabled, (value) => editor.value?.setEditable(!value))
+watch(
+  [id, ariaAttrs],
+  () =>
+    editor.value?.setOptions({
+      editorProps: {
+        attributes: {
+          id: id.value || '',
+          ...ariaAttrs.value,
+          role: 'textbox',
+          'aria-multiline': 'true',
+          class: 'p-3 outline-none min-h-32'
+        }
+      }
+    }),
+  { immediate: true }
+)
+const toolbarItems = computed(() => [
+  [
+    { kind: 'undo' as const, icon: 'i-lucide-undo-2', tooltip: { text: t('portalMarkdown.undo') } },
+    { kind: 'redo' as const, icon: 'i-lucide-redo-2', tooltip: { text: t('portalMarkdown.redo') } }
+  ],
+  [
+    {
+      kind: 'mark' as const,
+      mark: 'bold' as const,
+      icon: 'i-lucide-bold',
+      tooltip: { text: t('portalMarkdown.bold') }
+    },
+    {
+      kind: 'mark' as const,
+      mark: 'italic' as const,
+      icon: 'i-lucide-italic',
+      tooltip: { text: t('portalMarkdown.italic') }
+    },
+    { kind: 'mark' as const, mark: 'code' as const, icon: 'i-lucide-code', tooltip: { text: t('portalMarkdown.code') } }
+  ],
+  [
+    {
+      icon: 'i-lucide-heading',
+      'aria-label': t('portalMarkdown.heading'),
+      items: [
+        { kind: 'paragraph' as const, label: t('portalMarkdown.paragraph') },
+        ...([1, 2, 3, 4, 5, 6] as const).map((level) => ({
+          kind: 'heading' as const,
+          level,
+          label: t('portalMarkdown.headingLevel', { level })
+        }))
+      ]
+    }
+  ],
+  ...(['bulletList', 'orderedList', 'blockquote', 'codeBlock', 'horizontalRule'] as const).map((kind, index) => [
+    {
+      kind,
+      icon: ['i-lucide-list', 'i-lucide-list-ordered', 'i-lucide-quote', 'i-lucide-square-code', 'i-lucide-minus'][
+        index
+      ],
+      tooltip: { text: t(`portalMarkdown.${kind}`) }
+    }
+  ])
+])
+const toolbar = computed(() =>
+  toolbarItems.value.map((group) =>
+    group.map((item) => ({
+      ...item,
+      'aria-label': 'tooltip' in item ? item.tooltip.text : t('portalMarkdown.heading')
+    }))
+  )
+)
+const hasProtected = computed(() => {
+  return (
+    props.modelValue && parseVisualMarkdown(props.modelValue).content?.some((node) => node.type === 'protectedMarkdown')
+  )
+})
+const selectedPlaceholder = ref<string>()
+function insertPlaceholder(value: string) {
+  if (disabled.value) {
+    return
+  }
+  if (source.value) {
+    const textarea = sourceElement.value?.textareaRef
+    const start = textarea?.selectionStart ?? props.modelValue.length
+    const end = textarea?.selectionEnd ?? start
+    const inserted = insertMarkdownPlaceholder(props.modelValue, value, start, end)
+    update(inserted.value)
+    nextTick(() => {
+      textarea?.focus()
+      textarea?.setSelectionRange(inserted.cursor, inserted.cursor)
+    })
+  } else {
+    editor.value
+      ?.chain()
+      .focus()
+      .insertContent(
+        editor.value.isActive('codeBlock')
+          ? { type: 'text', text: value }
+          : { type: 'markdownPlaceholder', attrs: { raw: value } }
+      )
+      .run()
+  }
+  nextTick(() => {
+    selectedPlaceholder.value = undefined
+  })
+}
+const linkOpen = ref(false)
+const linkState = reactive({ url: '' })
+// Link validation is shared with the server's allowed Markdown link schemes.
+const linkSchema = z.object({
+  url: z
+    .string()
+    .trim()
+    .regex(/^(https?:\/\/|mailto:|\/|#)/i, t('portalMarkdown.invalidLink'))
+})
+function applyLink() {
+  if (disabled.value) {
+    return
+  }
+  editor.value?.chain().focus().extendMarkRange('link').setLink({ href: linkState.url.trim() }).run()
+  linkOpen.value = false
+}
+function removeLink() {
+  if (disabled.value) {
+    return
+  }
+  editor.value?.chain().focus().unsetLink().run()
+  linkOpen.value = false
+}
+function openLink(instance: Editor) {
+  linkState.url = instance.getAttributes('link').href || ''
+  linkOpen.value = true
+}
+onBeforeUnmount(() => editor.value?.destroy())
+</script>
+
+<template>
+  <div class="w-full rounded-md border overflow-hidden" :class="color === 'error' ? 'border-error' : 'border-default'">
+    <div class="flex flex-wrap items-center gap-2 border-b border-default p-2">
+      <UButton
+        type="button"
+        color="neutral"
+        :variant="!source ? 'soft' : 'ghost'"
+        :aria-pressed="!source"
+        @click="source = false"
+        >{{ t('portalMarkdown.visual') }}</UButton
+      >
+      <UButton
+        type="button"
+        color="neutral"
+        :variant="source ? 'soft' : 'ghost'"
+        :aria-pressed="source"
+        @click="source = true"
+        >{{ t('portalMarkdown.source') }}</UButton
+      >
+      <USelect
+        v-if="placeholders.length"
+        :id="pickerId"
+        v-model="selectedPlaceholder"
+        :items="placeholders"
+        :placeholder="t('portalMarkdown.insertPlaceholder')"
+        :aria-label="t('portalMarkdown.insertPlaceholder')"
+        :disabled="disabled"
+        @update:model-value="insertPlaceholder(String($event))"
+      />
+    </div>
+    <UTextarea
+      v-if="source"
+      :id="id"
+      ref="sourceElement"
+      v-bind="ariaAttrs"
+      :model-value="modelValue"
+      :rows="rows"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      class="w-full font-mono"
+      :ui="{ base: 'rounded-none ring-0' }"
+      @update:model-value="update(String($event))"
+      @focus="emitFormFocus"
+      @blur="emitFormBlur"
+    />
+    <ClientOnly v-else>
+      <div v-if="editor">
+        <div v-if="!disabled" class="flex flex-wrap items-center border-b border-default p-1">
+          <UEditorToolbar :editor="editor" :items="toolbar" class="flex-wrap" />
+          <UButton
+            type="button"
+            icon="i-lucide-link"
+            color="neutral"
+            variant="ghost"
+            :aria-label="t('portalMarkdown.link')"
+            @click="openLink(editor)"
+          />
+        </div>
+        <p v-if="hasProtected || notice" class="px-3 pt-2 text-xs text-muted" role="status">
+          {{ t('portalMarkdown.protected') }}
+        </p>
+        <EditorContent :editor="editor" class="portal-markdown-content" :style="{ minHeight: `${rows * 1.5}rem` }" />
+      </div>
+      <template #fallback
+        ><div class="p-3 whitespace-pre-wrap">{{ modelValue }}</div></template
+      >
+    </ClientOnly>
+    <UModal v-if="linkOpen" v-model:open="linkOpen" :title="t('portalMarkdown.link')">
+      <template #body>
+        <UForm :state="linkState" :schema="linkSchema" novalidate class="space-y-4" @submit="applyLink">
+          <UFormField name="url" :label="t('portalMarkdown.linkAddress')"
+            ><UInput v-model="linkState.url" autofocus class="w-full"
+          /></UFormField>
+          <div class="flex gap-2">
+            <UButton type="submit">{{ t('portalMarkdown.applyLink') }}</UButton>
+            <UButton type="button" color="neutral" variant="outline" @click="removeLink">{{
+              t('portalMarkdown.removeLink')
+            }}</UButton>
+          </div>
+        </UForm>
+      </template>
+    </UModal>
+  </div>
+</template>
+
+<style scoped>
+.portal-markdown-content :deep(p),
+.portal-markdown-content :deep(ul),
+.portal-markdown-content :deep(ol),
+.portal-markdown-content :deep(pre),
+.portal-markdown-content :deep(blockquote) {
+  margin-block: 0.6em;
+}
+.portal-markdown-content :deep(ul) {
+  list-style: disc;
+  padding-left: 1.5rem;
+}
+.portal-markdown-content :deep(ol) {
+  list-style: decimal;
+  padding-left: 1.5rem;
+}
+.portal-markdown-content :deep(h1),
+.portal-markdown-content :deep(h2),
+.portal-markdown-content :deep(h3),
+.portal-markdown-content :deep(h4),
+.portal-markdown-content :deep(h5),
+.portal-markdown-content :deep(h6) {
+  font-weight: 600;
+  margin-block: 0.8em 0.4em;
+}
+.portal-markdown-content :deep(h1) {
+  font-size: 1.8em;
+}
+.portal-markdown-content :deep(h2) {
+  font-size: 1.5em;
+}
+.portal-markdown-content :deep(h3) {
+  font-size: 1.25em;
+}
+.portal-markdown-content :deep(a) {
+  color: var(--ui-primary);
+  text-decoration: underline;
+}
+.portal-markdown-content :deep(blockquote) {
+  border-left: 3px solid var(--ui-border);
+  padding-left: 1rem;
+}
+.portal-markdown-content :deep(pre) {
+  background: var(--ui-bg-muted);
+  padding: 0.75rem;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.portal-markdown-content :deep(code) {
+  font-family: monospace;
+  background: var(--ui-bg-muted);
+}
+.portal-markdown-content :deep(hr) {
+  margin-block: 1rem;
+  border-color: var(--ui-border);
+}
+</style>

package/app/utils/protected-markdown.ts

@@ -0,0 +1,70 @@
+import { Node, nodeInputRule } from '@tiptap/core'
+import { Plugin } from '@tiptap/pm/state'
+
+export function createProtectedMarkdown(isSyncing: () => boolean, onBlocked: () => void) {
+  return Node.create({
+    name: 'protectedMarkdown',
+    group: 'block',
+    atom: true,
+    addAttributes: () => ({ raw: { default: '' } }),
+    parseHTML: () => [{ tag: 'pre[data-protected-markdown]', getAttrs: (element) => ({ raw: element.textContent }) }],
+    renderHTML: ({ node }) => ['pre', { 'data-protected-markdown': '' }, node.attrs.raw],
+    renderMarkdown: (node) => node.attrs?.raw || '',
+    addProseMirrorPlugins: () => [
+      new Plugin({
+        filterTransaction(transaction, state) {
+          if (!transaction.docChanged || isSyncing()) {
+            return true
+          }
+          const blocks = (doc: typeof state.doc) => {
+            const counts = new Map<string, number>()
+            doc.descendants((node) => {
+              if (node.type.name === 'protectedMarkdown') {
+                counts.set(node.attrs.raw, (counts.get(node.attrs.raw) || 0) + 1)
+              }
+            })
+            return counts
+          }
+          const after = blocks(transaction.doc)
+          for (const [raw, count] of blocks(state.doc)) {
+            if ((after.get(raw) || 0) < count) {
+              onBlocked()
+              return false
+            }
+          }
+          return true
+        }
+      })
+    ]
+  })
+}
+
+export function insertMarkdownPlaceholder(source: string, value: string, start = source.length, end = start) {
+  return { value: source.slice(0, start) + value + source.slice(end), cursor: start + value.length }
+}
+
+// Tokens must serialize literally: ordinary Markdown text escapes underscores,
+// which would stop the email renderer from recognizing placeholder names.
+export const MarkdownPlaceholder = Node.create({
+  name: 'markdownPlaceholder',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  addAttributes: () => ({ raw: { default: '' } }),
+  parseHTML: () => [{ tag: 'span[data-markdown-placeholder]', getAttrs: (element) => ({ raw: element.textContent }) }],
+  renderHTML: ({ node }) => [
+    'span',
+    { 'data-markdown-placeholder': '', class: 'rounded bg-elevated px-1 font-mono text-sm' },
+    node.attrs.raw
+  ],
+  renderMarkdown: (node) => node.attrs?.raw || '',
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: /({{\s*[a-z0-9_]+\s*}})$/i,
+        type: this.type,
+        getAttributes: (match) => ({ raw: match[1] })
+      })
+    ]
+  }
+})

package/app/utils/visual-markdown.ts

@@ -0,0 +1,121 @@
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import remarkGfm from 'remark-gfm'
+import type { JSONContent } from '@tiptap/core'
+
+interface MarkdownNode {
+  type: string
+  value?: string
+  children?: MarkdownNode[]
+  depth?: number
+  url?: string
+  title?: string
+  lang?: string
+  meta?: string
+  ordered?: boolean
+  start?: number
+  checked?: boolean | null
+  position?: { start: { offset: number }; end: { offset: number } }
+}
+const parser = unified().use(remarkParse).use(remarkGfm)
+const supported = new Set([
+  'paragraph',
+  'text',
+  'strong',
+  'emphasis',
+  'link',
+  'heading',
+  'blockquote',
+  'list',
+  'listItem',
+  'code',
+  'inlineCode',
+  'break',
+  'thematicBreak'
+])
+function unsupported(node: MarkdownNode): boolean {
+  return (
+    !supported.has(node.type) ||
+    (node.type === 'listItem' && node.children?.[0]?.type !== 'paragraph') ||
+    Boolean(node.title || node.meta || node.checked != null) ||
+    (node.children || []).some(unsupported)
+  )
+}
+export function placeholderText(text: string, marks: NonNullable<JSONContent['marks']> = []): JSONContent[] {
+  return text
+    .split(/({{\s*[a-z0-9_]+\s*}})/gi)
+    .filter(Boolean)
+    .map((part) =>
+      /^{{\s*[a-z0-9_]+\s*}}$/i.test(part)
+        ? { type: 'markdownPlaceholder', attrs: { raw: part }, marks }
+        : { type: 'text', text: part, marks }
+    )
+}
+function inline(nodes: MarkdownNode[], marks: NonNullable<JSONContent['marks']> = []): JSONContent[] {
+  return nodes.flatMap((node) => {
+    const mark = ({ strong: 'bold', emphasis: 'italic', link: 'link' } as Record<string, string>)[node.type]
+    if (mark) {
+      return inline(node.children || [], [
+        ...marks,
+        { type: mark, ...(node.type === 'link' ? { attrs: { href: node.url } } : {}) }
+      ])
+    }
+    if (node.type === 'break') {
+      return [{ type: 'hardBreak' }]
+    }
+    return node.value
+      ? node.type === 'inlineCode'
+        ? [{ type: 'text', text: node.value, marks: [...marks, { type: 'code' }] }]
+        : placeholderText(node.value, marks)
+      : []
+  })
+}
+function block(node: MarkdownNode): JSONContent {
+  const content = () => (node.children || []).map(block)
+  switch (node.type) {
+    case 'paragraph':
+      return { type: 'paragraph', content: inline(node.children || []) }
+    case 'heading':
+      return { type: 'heading', attrs: { level: node.depth }, content: inline(node.children || []) }
+    case 'blockquote':
+      return { type: 'blockquote', content: content() }
+    case 'thematicBreak':
+      return { type: 'horizontalRule' }
+    case 'list':
+      return {
+        type: node.ordered ? 'orderedList' : 'bulletList',
+        attrs: { start: node.start || 1 },
+        content: content()
+      }
+    case 'listItem':
+      return { type: 'listItem', content: content() }
+    case 'code':
+      return {
+        type: 'codeBlock',
+        attrs: { language: node.lang },
+        content: node.value ? [{ type: 'text', text: node.value }] : []
+      }
+    default:
+      throw new Error(`Unsupported Markdown: ${node.type}`)
+  }
+}
+// Adapted from Marpos Studio: preserve unsupported blocks as inert source.
+// HTML, tables, images, reference links and checklists remain editable in source mode.
+export function parseVisualMarkdown(source: string): JSONContent {
+  try {
+    const tree = parser.parse(source) as unknown as MarkdownNode
+    return {
+      type: 'doc',
+      content: (tree.children || []).map((node) =>
+        unsupported(node)
+          ? {
+              type: 'protectedMarkdown',
+              attrs: { raw: source.slice(node.position!.start.offset, node.position!.end.offset) }
+            }
+          : block(node)
+      )
+    }
+  } catch {
+    return { type: 'doc', content: [{ type: 'protectedMarkdown', attrs: { raw: source } }] }
+  }
+}

package/i18n/locales/en.json

@@ -0,0 +1,26 @@
+{
+  "portalMarkdown": {
+    "visual": "Visual editor",
+    "source": "Markdown",
+    "insertPlaceholder": "Insert placeholder",
+    "undo": "Undo",
+    "redo": "Redo",
+    "bold": "Bold",
+    "italic": "Italic",
+    "code": "Inline code",
+    "heading": "Text style",
+    "paragraph": "Paragraph",
+    "headingLevel": "Heading {level}",
+    "bulletList": "Bullet list",
+    "orderedList": "Numbered list",
+    "blockquote": "Quote",
+    "codeBlock": "Code block",
+    "horizontalRule": "Divider",
+    "protected": "Special content is preserved. Use Markdown mode to edit or remove those blocks.",
+    "link": "Add or edit link",
+    "linkAddress": "Link address",
+    "invalidLink": "Use a website address, email link or page path.",
+    "applyLink": "Apply link",
+    "removeLink": "Remove link"
+  }
+}

package/i18n/locales/nl.json

@@ -0,0 +1,26 @@
+{
+  "portalMarkdown": {
+    "visual": "Visuele editor",
+    "source": "Markdown",
+    "insertPlaceholder": "Placeholder invoegen",
+    "undo": "Ongedaan maken",
+    "redo": "Opnieuw",
+    "bold": "Vet",
+    "italic": "Cursief",
+    "code": "Inline code",
+    "heading": "Tekststijl",
+    "paragraph": "Alinea",
+    "headingLevel": "Kop {level}",
+    "bulletList": "Opsomming",
+    "orderedList": "Genummerde lijst",
+    "blockquote": "Citaat",
+    "codeBlock": "Codeblok",
+    "horizontalRule": "Scheidingslijn",
+    "protected": "Speciale inhoud blijft behouden. Gebruik de Markdown-modus om deze blokken te wijzigen of verwijderen.",
+    "link": "Link toevoegen of bewerken",
+    "linkAddress": "Linkadres",
+    "invalidLink": "Gebruik een websiteadres, e-maillink of paginapad.",
+    "applyLink": "Link toepassen",
+    "removeLink": "Link verwijderen"
+  }
+}

package/nuxt.config.ts

@@ -1,5 +1,11 @@
 export default defineNuxtConfig({
   $meta: { name: 'nuxt-customer-portal-ui' },
   compatibilityDate: '2025-10-24',
-  modules: ['@nuxt/ui', '@nuxtjs/i18n', '@pinia/nuxt']
+  modules: ['@nuxt/ui', '@nuxtjs/i18n', '@pinia/nuxt'],
+  i18n: {
+    locales: [
+      { code: 'en', file: 'en.json' },
+      { code: 'nl', file: 'nl.json' }
+    ]
+  }
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt-customer-portal/ui",
-  "version": "0.4.8",
+  "version": "0.5.0",
   "license": "MIT",
   "homepage": "https://nuxt-customer-portal.com",
   "repository": {
@@ -14,6 +14,7 @@
     "CHANGELOG.md",
     "app",
     "nuxt.config.ts",
+    "i18n",
     "portal.manifest.mjs",
     "README.md"
   ],
@@ -28,14 +29,24 @@
     "@nuxt/ui": "^4.10.0",
     "@nuxtjs/i18n": "^10.6.0",
     "@pinia/nuxt": "^1.0.1",
+    "@tiptap/core": "^3.29.2",
+    "@tiptap/markdown": "^3.29.2",
+    "@tiptap/pm": "^3.29.2",
+    "@tiptap/starter-kit": "^3.29.2",
+    "@tiptap/vue-3": "^3.29.2",
     "pinia": "^4.0.2",
-    "@nuxt-customer-portal/core": "^0.4.8"
+    "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "unified": "^11.0.5",
+    "zod": "^4.4.3",
+    "@nuxt-customer-portal/core": "^0.5.0"
   },
   "peerDependencies": {
     "nuxt": "^4.5.1",
     "vue": "^3.5.0"
   },
   "devDependencies": {
+    "happy-dom": "20.11.2",
     "nuxt": "^4.5.1",
     "vue": "^3.5.0"
   }

package/portal.manifest.mjs

@@ -1,6 +1,6 @@
 export default {
   id: 'ui',
-  version: '0.4.8',
+  version: '0.5.0',
   source: '@nuxt-customer-portal/ui',
   dependsOn: ['core']
 }