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, behalten Sie die Schlüsselstruktur bei und annotieren Sie das Objekt mit typeof en (siehe Beispiel unten)
3. Führen Sie pnpm run typecheck aus — durch die typeof en-Annotation schlagen fehlende, überzählige oder falsch verschachtelte Schlüssel bereits zur Compile-Zeit fehl
4. Führen Sie pnpm run test aus, um die Platzhalter-Parität zu überprüfen — Tests prüfen, dass jedes {placeholder}-Token aus den englischen Strings auch in Ihren Übersetzungen vorkommt

Ein Registrierungsschritt ist nicht nötig. Die Liste der unterstützten Locales wird zur Build-Zeit aus den Dateien in locales/ abgeleitet — fr.ts ablegen genügt, und init({ locale: 'fr' }) findet sie automatisch.

Beispielstruktur für eine neue Locale:

// packages/editor/src/i18n/locales/fr.ts
import type en from './en';

const fr: typeof en = {
  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
};

export default fr;

Cloud-Strings sind optional

Die Übersetzungen sind in zwei Teile aufgeteilt. Der OSS-Teil (locales/*.ts) deckt alles im Open-Source-Editor ab. Ein separater Cloud-Teil (locales/cloud/*.ts) deckt Funktionen ab, die nur über initCloud() verfügbar sind — KI, Kommentare, Kollaboration, Scoring, Snapshots, Plan-Limits. Den Cloud-Teil müssen Sie nicht übersetzen: Existiert locales/cloud/fr.ts nicht, fallen Cloud-Funktionen auf Englisch zurück, während der Rest des Editors auf Französisch erscheint.

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