Feature/add translations

[Darginec05]

Description

I18n is being developed here in collaboration with @gloaysa

How it works

First of all, it should be noted that a new method editor.getLabelText has appeared in the editor instance.
This method processes all kinds of labels that are available in Yoopta packages (in the core package, in tools, in plugins).

Here are usage examples:
Text labels for BlockOptions in the package @yoopta/editor- source code
In tools - source code
In plugins - (the example will be ready later)

As we can see, when calling editor.getLabelText, we pass string. This string is the path to the object, which we will then pass using the withTranslation extension from the @yoopta/i18n package:

import { I18nYooEditor } from '../types';

type TranslationOptions = {
  language: string;
  defaultLanguage: string;
  translations: I18nYooEditor['translations'];
};

function getNestedValue(obj: any, path: string[]): string | undefined {
  return path.reduce((acc, part) => {
    if (acc && typeof acc === 'object' && part in acc) {
      return acc[part];
    }
    return undefined;
  }, obj);
}

export function withTranslations(editor: I18nYooEditor, options: TranslationOptions): I18nYooEditor {
  const { translations, defaultLanguage, language } = options;

  const { getLabelText } = editor;
  const languages = Object.keys(translations);

  editor.getLabelText = (key) => {
    const keyParts = key.split('.');

    const currentLangValue = getNestedValue(translations[editor.language], keyParts);
    if (typeof currentLangValue === 'string') {
      return currentLangValue;
    }

    const defaultLangValue = getNestedValue(translations[editor.defaultLanguage], keyParts);

    if (typeof defaultLangValue === 'string') {
      return defaultLangValue;
    }

    return getLabelText(key);
  };

  editor.languages = languages;

  editor.setLanguage = (lang: string) => {
    if (translations[lang]) {
      editor.language = lang;
      // editor.emit
    }
  };

  editor.translations = translations;
  editor.defaultLanguage = defaultLanguage;
  editor.language = language;

  return editor;
}

In withTranslation, we extend the capabilities of getLabelText, where we take from the passed translation object for the current language the value from the path that we passed to editor.getLabelText earlier

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
yoopta-editor	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 12, 2025 4:07pm

[Darginec05]

add types

[Darginec05]

remove

[Darginec05]

add docs

[gloaysa]

done

[Darginec05]

remove

[gloaysa]

Instead of removed, added the Provider

[Darginec05]

add event emit

[gloaysa]

done

[Darginec05]

update examples after publishing patch version

[robinalexandre]

What about merging this one ?

[gloaysa]

What about merging this one ?

I’ve been disconnected for a while, but I believe it still needs some work before it can be merged.

Some blocks missing translations and updating examples from a quick glance a the current status of the PR.

[robinalexandre]

@Darginec05 could you fix the last things missing ?

I guess it could be a good improvement for all the community

Thanks

[Imjungjuna]

Decent Work!