Internationalisierung

Die Editor-Oberfläche unterstützt den Wechsel der Locale. Alle Labels, Tooltips, Platzhalter und Nachrichten werden durch Übersetzungsschlüssel gesteuert — keine fest codierten Zeichenketten.

Locale festlegen

Übergeben Sie die Option locale an init():

import { init } from '@templatical/editor';

const editor = await init({
  container: '#editor',
  locale: 'de',
});

Integrierte Locales

Code	Sprache
en	Englisch (Standard)
de	Deutsch

Locale-Auflösung

Der Editor normalisiert Locale-Codes, indem er Regionssuffixe entfernt:

Eingabe	Aufgelöst
'en'	en
'en-US'	en
'en-GB'	en
'de-AT'	de
'fr'	en (nicht unterstützt, fällt auf Englisch zurück)

Wenn die aufgelöste Locale nicht unterstützt wird, fällt der Editor stillschweigend auf Englisch zurück.

Asynchrones Laden

Locale-Dateien werden asynchron mit dynamischem import() geladen. Nur die aktive Locale wird in den Client gebündelt — die anderen Locale-Dateien sind nicht in Ihrem Build enthalten. Das bedeutet, dass das Wechseln von Locales zur Laufzeit eine erneute Initialisierung des Editors erfordert:

async function switchLocale(newLocale: string) {
  editor.unmount();
  editor = await init({
    container: '#editor',
    locale: newLocale,
  });
}

Wie Übersetzungen funktionieren

Übersetzungen sind verschachtelte Objekte, die nach UI-Abschnitt organisiert sind:

{
  blocks: {
    paragraph: 'Paragraph',
    image: 'Image',
    button: 'Button',
    // ...
  },
  toolbar: {
    duplicate: 'Duplicate',
    delete: 'Delete',
    // ...
  },
  blockSettings: {
    spacing: 'Spacing',
    padding: 'Padding',
    // ...
  },
  templateSettings: {
    layout: 'Layout',
    // ...
  },
}

Einige Zeichenketten unterstützen Platzhalter-Interpolation mit {placeholder}-Syntax:

{
  header: {
    templatesUsed: '{used}/{max} templates used',
  },
}

Eine neue Locale beitragen

So fügen Sie eine neue Sprache hinzu:

1. Kopieren Sie packages/editor/src/i18n/locales/en.ts in eine neue Datei (z. B. fr.ts)
2. Übersetzen Sie alle String-Werte, wobei Sie die gleiche Schlüsselstruktur beibehalten
3. Registrieren Sie die Locale in packages/editor/src/i18n/index.ts
4. Führen Sie pnpm run test aus, um die Schlüsselparität zu überprüfen — Tests prüfen, dass alle Locales die gleichen Schlüssel wie Englisch haben

Die Struktur der Übersetzungsdatei muss genau mit der englischen Datei übereinstimmen. Jeder Schlüssel, der in en.ts vorhanden ist, muss auch in Ihrer neuen Locale-Datei vorhanden sein.

Beispielstruktur für eine neue Locale:

// packages/editor/src/i18n/locales/fr.ts
export default {
  blocks: {
    paragraph: 'Paragraphe',
    image: 'Image',
    button: 'Bouton',
    section: 'Section',
    divider: 'Séparateur',
    spacer: 'Espacement',
    // ... all keys from en.ts
  },
  toolbar: {
    duplicate: 'Dupliquer',
    delete: 'Supprimer',
    // ...
  },
  // ... all sections from en.ts
};

Reichen Sie einen Pull Request mit Ihrer Übersetzungsdatei ein. Beiträge für jede Sprache sind willkommen.