pnpm add @fyit/crouton-editor

export default defineNuxtConfig({
  extends: [
    '@fyit/crouton',
    '@fyit/crouton-editor'
  ]
})

<script setup lang="ts">
const content = ref('<p>Hello world!</p>')
</script>

<template>
  <CroutonEditorSimple v-model="content" />
</template>

<script setup lang="ts">
const state = ref({
  title: '',
  content: '<p></p>'
})
</script>

<template>
  <UForm :state="state" @submit="handleSubmit">
    <UFormField label="Title" name="title">
      <UInput v-model="state.title" />
    </UFormField>

    <UFormField label="Content" name="content">
      <CroutonEditorSimple v-model="state.content" />
    </UFormField>

    <UButton type="submit">Save</UButton>
  </UForm>
</template>

<CroutonEditorSimple
  v-model="content"
  enable-image-upload
/>

<CroutonEditorSimple
  v-model="content"
  enable-translation-ai
  :translation-context="{
    sourceText: selectedText,
    sourceLanguage: 'en',
    targetLanguage: 'nl',
    fieldType: 'description'
  }"
  @translation-accept="handleTranslation"
/>

<CroutonEditorBlocks
  v-model="content"
  :extensions="[MyBlockExtension]"
  :suggestion-items="blockItems"
  content-type="json"
>
  <template #property-panel="{ selectedNode, isOpen, close, updateAttrs, deleteBlock }">
    <USlideover :model-value="isOpen" @update:model-value="!$event && close()">
      <template #content>
        <MyPropertyPanel
          v-if="selectedNode"
          :node="selectedNode.node"
          @update="updateAttrs"
          @delete="deleteBlock"
          @close="close"
        />
      </template>
    </USlideover>
  </template>
</CroutonEditorBlocks>

interface BlockSuggestionItem {
  type: string          // Block type name (e.g., 'heroBlock')
  label: string         // Display label in menu
  description?: string  // Description shown in menu
  icon?: string         // Icon name (e.g., 'i-lucide-layout-template')
  category?: string     // Category for grouping
  command: string       // TipTap command name (e.g., 'insertHeroBlock')
}

<CroutonEditorSimple v-model="content">
  <template #default="{ editor }">
    <CroutonEditorVariables
      :editor="editor"
      :variables="emailVariables"
    />
  </template>
</CroutonEditorSimple>

<script setup lang="ts">
const emailVariables = [
  { name: 'customer_name', label: 'Customer Name', sample: 'John Doe' },
  { name: 'booking_date', label: 'Booking Date', sample: 'January 15, 2024' },
]
</script>

<CroutonEditorPreview
  :content="emailBody"
  :variables="emailVariables"
  :values="{ customer_name: 'Jane Smith' }"
  title="Email Preview"
/>

<script setup lang="ts">
const emailVariables = [
  { name: 'customer_name', label: 'Customer Name', category: 'customer', sample: 'John Doe' },
  { name: 'booking_date', label: 'Booking Date', category: 'booking', sample: 'Monday, January 15, 2024' },
  { name: 'location_name', label: 'Location', category: 'location', sample: 'Main Office' },
]

const sampleData = {
  customer_name: 'Jane Smith',
  booking_date: 'Tuesday, January 16, 2024',
  location_name: 'Downtown Branch'
}
</script>

<template>
  <CroutonEditorWithPreview
    v-model="emailBody"
    :variables="emailVariables"
    :preview-values="sampleData"
    preview-title="Email Preview"
    placeholder="Write your email template..."
  />
</template>

const {
  interpolate,
  extractVariables,
  getSampleValues,
  findUndefinedVariables
} = useEditorVariables()

const { interpolate, extractVariables } = useEditorVariables()

// Interpolate content
const rendered = interpolate(
  'Hello {{customer_name}}!',
  { customer_name: 'John' }
)
// Result: "Hello John!"

// Extract variables
const vars = extractVariables('Hello {{name}}, your booking is on {{date}}')
// Result: ['name', 'date']

import type { EditorVariable, EditorVariableGroup } from '#crouton-editor/types/editor'

interface EditorVariable {
  name: string        // Variable name: "customer_name"
  label: string       // Display label: "Customer Name"
  description?: string // Help text
  icon?: string       // Lucide icon name
  category?: string   // Grouping: "customer", "booking"
  sample?: string     // Sample value for preview
}

interface EditorVariableGroup {
  label: string
  variables: EditorVariable[]
}

// nuxt.config.ts (layer internals)
export default defineNuxtConfig({
  components: {
    dirs: [{
      path: 'app/components',
      prefix: 'CroutonEditor',
      global: true,
      priority: 1
    }]
  },
  imports: {
    dirs: ['app/composables']
  },
  alias: {
    '#crouton-editor': 'app'
  }
})

{
  "collections": {
    "posts": {
      "fields": {
        "content": {
          "type": "text",
          "meta": {
            "label": "Content",
            "component": "CroutonEditorSimple"
          }
        }
      }
    }
  }
}

export const blogPosts = sqliteTable('blog_posts', {
  id: text('id').primaryKey(),
  title: text('title').notNull(),
  content: text('content').notNull(),
  createdAt: integer('createdAt', { mode: 'timestamp' })
})

<template>
  <div class="prose dark:prose-invert" v-html="post.content" />
</template>