Internacionalização

O Tiptapify suporta mais de 35 idiomas de fábrica. As traduções são gerenciadas pelo vue-i18n.

Definindo o idioma padrão

Crie uma instância do vue-i18n e passe-a ao registrar o plugin:

// main.ts
import { createI18n } from 'vue-i18n'
import TiptapifyPlugin from 'tiptapify'
import 'tiptapify/style.css'

const i18n = createI18n({
  legacy: false,
  locale: 'en',
})

app.use(i18n)
app.use(TiptapifyPlugin, { i18n })

Alterando o idioma em tempo de execução

O Tiptapify usa a sua instância do vue-i18n — altere o idioma via useI18n():

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()

const languages = [
  { code: 'en', label: 'English' },
  { code: 'de', label: 'Deutsch' },
  { code: 'fr', label: 'Français' },
  { code: 'es', label: 'Español' },
  { code: 'ru', label: 'Русский' },
]
</script>

<template>
  <div>
    <v-select
      v-model="locale"
      :items="languages"
      item-title="label"
      item-value="code"
      label="Language"
    />

    <Tiptapify placeholder="Start writing..." />
  </div>
</template>

Idiomas disponíveis

Os seguintes idiomas são suportados atualmente:

Código	Idioma
en	Inglês
ar	Árabe
bg	Búlgaro
ch	Chinês
cz	Tcheco
de	Alemão
el	Grego
es	Espanhol
et	Estoniano
fi	Finlandês
fr	Francês
he	Hebraico
hi	Hindi
hr	Croata
hu	Húngaro
id	Indonésio
it	Italiano
ja	Japonês
ko	Coreano
la	Letão
lt	Lituano
nl	Holandês
no	Norueguês
pl	Polonês
pt	Português
pt-BR	Português (Brasil)
ro	Romeno
ru	Russo
se	Sueco
sk	Eslovaco
sl	Esloveno
sr	Sérvio
th	Tailandês
tr	Turco
uk	Ucraniano
vi	Vietnamita

Traduções geradas por IA

A maioria das traduções é gerada por IA e pode conter erros. Se você encontrar uma tradução incorreta ou quiser adicionar um novo idioma, abra uma issue ou entre em contato com o mantenedor.

Adicionando traduções personalizadas

O Tiptapify mescla automaticamente suas mensagens de locale nativas na sua instância do vue-i18n quando você a passa ao plugin. Você pode estender ou sobrescrever traduções antes de registrar o plugin:

import { createI18n } from 'vue-i18n'
import TiptapifyPlugin from 'tiptapify'
import 'tiptapify/style.css'

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  messages: {
    // Custom translations take precedence over Tiptapify's built-in ones
    en: {
      toolbar: {
        bold: 'Make bold',
        italic: 'Make italic',
      },
    },
  },
})

app.use(i18n)
app.use(TiptapifyPlugin, { i18n })

Ou mesclar depois de criar a instância do i18n:

const i18n = createI18n({
  legacy: false,
  locale: 'en',
})

i18n.global.mergeLocaleMessage('en', customTranslations)

app.use(i18n)
app.use(TiptapifyPlugin, { i18n })

Idiomas RTL

Para idiomas RTL, como o árabe, garanta que o seu tema do Vuetify suporte RTL:

const vuetify = createVuetify({
  locale: {
    rtl: true,
  },
})

Idioma por instância

O Tiptapify usa o locale do vue-i18n da sua aplicação de forma global. Se você precisar de locales por instância, use os scoped slots do vue-i18n ou a composition API dentro do escopo da instância:

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n({ useScope: 'local' })
</script>

<template>
  <Tiptapify :placeholder="t('editor.placeholder')" />
</template>