Localization

Editor supports localization with three built-in locales: Chinese, English, and German (English is the default). You can also create a custom locale for any other language.

Apply a built-in locale

To apply a built-in locale, import the Locale component from @svar-ui/svelte-core, the locale from @svar-ui/editor-locales, and the matching core locale from @svar-ui/core-locales. Pass both to the words prop on Locale, then place the Editor inside it:

import { Locale } from "@svar-ui/svelte-core";
import { cn } from "@svar-ui/editor-locales";
import { cn as cnCore } from "@svar-ui/core-locales";

<Locale words={{ ...cn, ...cnCore }}>
  <Editor />
</Locale>

Apply a custom locale

Create a translation object with key-value pairs where the keys are the default English strings and the values are their translations. Wrap the Editor with Locale and pass the object to words:

<script>
   import { Locale } from "@svar-ui/svelte-core";
   import { Editor } from "@svar-ui/svelte-editor";
   
  const myLang = {
   "This field is required": "Dieses Feld ist erforderlich",
   "Invalid value": "Ungültiger Wert",
   Yes: "Ja",
   No: "Nein",
   Save: "Speichern",
   Cancel: "Abbrechen",
};
</script>

<Locale words={{ editor: myLang }}>
  <Editor />
</Locale>

This example configures the editor to display text in German. The myLang object contains key-value pairs where the keys are the default English strings and the values are their German translations.

For a complete custom locale, provide translations for all Editor text labels and also include labels from the core and calendar components provided by @svar-ui/core-locales. Refer to Core localization for the full list of keys:

const ko = {
   editor: {
      "Invalid value": "잘못된 값",
      // other
   },
   core:{ ... },
   calendar: { ... }
};

Related sample: Locales