Text Editor - Translate Plugin

import { TextEditor } from '@primeui/vue-texteditor';
import { translatePlugin } from './translate-plugin';

<TextEditor.Root v-model="value" :plugins="[[translatePlugin, { source: 'en', target: 'fr' }]]">
    <TextEditor.Toolbar>
        <TranslateButton />
    </TextEditor.Toolbar>
    <TextEditor.Content />
</TextEditor.Root>

import { defineTextEditorPlugin } from '@primeui/vue-texteditor';

export interface TranslateOptions {
    source?: string;
    target?: string;
}

export const translatePlugin = defineTextEditorPlugin<TranslateOptions>('translate', ({ getSelectedText, replaceSelection, options }) => {
    const source = options?.source ?? 'en';
    const target = options?.target ?? 'fr';

    return {
        commands: {
            translate: async (sourceLang?: unknown, targetLang?: unknown) => {
                const text = getSelectedText();

                if (!text) return;

                const from = (sourceLang as string) ?? source;
                const to = (targetLang as string) ?? target;
                const url = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=${from}|${to}`;
                const response = await fetch(url);
                const data = await response.json();

                if (data.responseStatus === 429 || data.quotaFinished) {
                    replaceSelection('Translation rate limit reached for this demo. Please try again later.');

                    return;
                }

                const translated = data.responseData?.translatedText;

                if (translated) {
                    replaceSelection(translated);
                }
            }
        }
    };
});