Internal: Add TinyMCE and Uppy localization support - refs BT#21979

assets/vue/components/basecomponents/BaseTinyEditor.vue

@@ -28,6 +28,7 @@ import { useCidReqStore } from "../../store/cidReq"
 import { storeToRefs } from "pinia"
 import { useSecurityStore } from "../../store/securityStore"
 import FloatLabel from "primevue/floatlabel"
+import { useLocale } from "../../composables/locale"
 
 const modelValue = defineModel({
   type: String,
@@ -84,6 +85,46 @@ if (route.params.node) {
   parentResourceNodeId.value = Number(route.params.node)
 }
 
+const supportedLanguages = {
+  ar: 'ar.js',
+  de: 'de.js',
+  en: 'en.js',
+  es: 'es.js',
+  fr_FR: 'fr_FR.js',
+  it: 'it.js',
+  nl: 'nl.js',
+  pt_PT: 'pt_PT.js',
+  ru: 'ru.js',
+  zh_CN: 'zh_CN.js',
+};
+
+const { appLocale } = useLocale()
+
+function getLanguageConfig(locale) {
+  const defaultLang = 'en'
+  const url = '/libs/editor/langs/'
+  const isoCode = locale.split('_')[0]
+  let languageFile = supportedLanguages[isoCode]
+  let finalLanguage = isoCode
+
+  if (!languageFile) {
+    const regionalMatch = Object.entries(supportedLanguages).find(([key, value]) => key.startsWith(isoCode))
+    if (regionalMatch) {
+      languageFile = regionalMatch[1]
+      finalLanguage = regionalMatch[0]
+    } else {
+      languageFile = `${defaultLang}.js`
+      finalLanguage = defaultLang
+    }
+  }
+
+  return {
+    language: finalLanguage,
+    language_url: `${url}${languageFile}`,
+  };
+}
+
+const languageConfig = getLanguageConfig(appLocale.value)
 const toolbarUndo = "undo redo"
 const toolbarFormatText = "bold italic underline strikethrough"
 const toolbarInsertMedia = "image media template link"
@@ -106,6 +147,8 @@ const defaultEditorConfig = {
   height: 500,
   toolbar_mode: "sliding",
   autosave_ask_before_unload: true,
+  language: languageConfig.language,
+  language_url: languageConfig.language_url,
   plugins: [
     "advlist",
     "anchor",

assets/vue/components/basecomponents/BaseUploader.vue

@@ -3,6 +3,13 @@ import Uppy from "@uppy/core"
 import { Dashboard } from "@uppy/vue"
 import Webcam from "@uppy/webcam"
 import Audio from "@uppy/audio"
+import es_ES from "@uppy/locales/lib/es_ES"
+import en_US from "@uppy/locales/lib/en_US"
+import fr_FR from "@uppy/locales/lib/fr_FR"
+import de_DE from "@uppy/locales/lib/de_DE"
+import it_IT from "@uppy/locales/lib/it_IT"
+import pl_PL from "@uppy/locales/lib/pl_PL"
+import pt_PT from "@uppy/locales/lib/pt_PT"
 
 const XHRUpload = require("@uppy/xhr-upload")
 const ImageEditor = require("@uppy/image-editor")
@@ -12,6 +19,32 @@ import "@uppy/dashboard/dist/style.css"
 import "@uppy/image-editor/dist/style.css"
 import "@uppy/webcam/dist/style.css"
 import "@uppy/audio/dist/style.css"
+import { useLocale } from "../../composables/locale"
+
+const { appLocale } = useLocale()
+const supportedLanguages = {
+  es: es_ES,
+  en: en_US,
+  fr: fr_FR,
+  de: de_DE,
+  it: it_IT,
+  pl: pl_PL,
+  pt: pt_PT,
+}
+
+function getUppyLanguageConfig(appLocale) {
+  const defaultLang = en_US
+
+  if (typeof appLocale !== 'string') {
+    return defaultLang
+  }
+
+  const localePrefix = appLocale.split('_')[0]
+
+  return supportedLanguages[localePrefix] || defaultLang
+}
+
+const locale = getUppyLanguageConfig(appLocale.value)
 
 const props = defineProps({
   endpoint: {
@@ -33,6 +66,7 @@ const emit = defineEmits(["upload", "upload-success", "complete"])
 
 const uppy = new Uppy({
   autoProceed: props.autoProceed,
+  locale: locale,
 })
   .use(ImageEditor, {
     cropperOptions: {