UBERF-7446 & UBERF-7447: i18n fixes (#5975)

packages/platform/src/i18n.ts

@@ -33,7 +33,7 @@ type Messages = Record<string, IntlString | Record<string, IntlString>>
 const loaders = new Map<Plugin, Loader>()
 const translations = new Map<Plugin, Messages | Status>()
 const cache = new Map<IntlString, IntlMessageFormat | Status>()
-
+const englishTranslationsForMissing = new Map<Plugin, Messages | Status>()
 /**
  * @public
  * @param plugin -
@@ -91,9 +91,23 @@ async function getTranslation (id: _IdInfo, locale: string): Promise<IntlString
     if (messages instanceof Status) {
       return messages
     }
-    return id.kind !== undefined
+    if (id.kind !== undefined) {
-      ? (messages[id.kind] as Record<string, IntlString>)?.[id.name]
+      if ((messages[id.kind] as Record<string, IntlString>)?.[id.name] !== undefined) {
-      : (messages[id.name] as IntlString)
+        return (messages[id.kind] as Record<string, IntlString>)?.[id.name]
+      } else {
+        let eng = englishTranslationsForMissing.get(id.component)
+        if (eng === undefined) {
+          eng = await loadTranslationsForComponent(id.component, 'en')
+          englishTranslationsForMissing.set(id.component, eng)
+        }
+        if (eng instanceof Status) {
+          return eng
+        }
+        return (eng[id.kind] as Record<string, IntlString>)?.[id.name]
+      }
+    } else {
+      return messages[id.name] as IntlString
+    }
   } catch (err) {
     const status = unknownError(err)
     await setPlatformStatus(status)

packages/text-editor/lang/ru.json

@@ -51,6 +51,6 @@
     "Unset": "Убрать",
     "Image": "Изображение",
     "SeparatorLine": "Разделительная линия",
-    "TodoList": "Action item"
+    "TodoList": "Действие"
   }
 }

packages/text-editor/src/components/CollaborativeTextEditor.svelte

@@ -167,6 +167,15 @@
   let placeHolderStr: string = ''
 
   $: ph = translate(placeholder, {}, $themeStore.language).then((r) => {
+    if (editor !== undefined && placeHolderStr !== r) {
+      const placeholderIndex = editor.extensionManager.extensions.findIndex(
+        (extension) => extension.name === 'placeholder'
+      )
+      if (placeholderIndex !== -1) {
+        editor.extensionManager.extensions[placeholderIndex].options.placeholder = r
+        editor.view.dispatch(editor.state.tr)
+      }
+    }
     placeHolderStr = r
   })
 

packages/text-editor/src/components/TextEditor.svelte

@@ -55,6 +55,15 @@
   let placeHolderStr: string = ''
 
   $: ph = translate(placeholder, {}, $themeStore.language).then((r) => {
+    if (editor !== undefined && placeHolderStr !== r) {
+      const placeholderIndex = editor.extensionManager.extensions.findIndex(
+        (extension) => extension.name === 'placeholder'
+      )
+      if (placeholderIndex !== -1) {
+        editor.extensionManager.extensions[placeholderIndex].options.placeholder = r
+        editor.view.dispatch(editor.state.tr)
+      }
+    }
     placeHolderStr = r
   })
 

packages/ui/src/components/DropdownPopup.svelte

@@ -29,10 +29,10 @@
   export let withSearch: boolean = true
 
   let search: string = ''
-  let phTraslate: string = ''
+  let phTranslate: string = ''
   $: if (placeholder) {
     translate(placeholder, {}, $themeStore.language).then((res) => {
-      phTraslate = res
+      phTranslate = res
     })
   }
   const dispatch = createEventDispatcher()
@@ -82,7 +82,7 @@
         bind:this={searchInput}
         type="text"
         bind:value={search}
-        placeholder={phTraslate}
+        placeholder={phTranslate}
         on:input={(ev) => {}}
         on:change
       />

packages/ui/src/components/EditBox.svelte

@@ -44,7 +44,7 @@
   const dispatch = createEventDispatcher()
 
   let input: HTMLInputElement
-  let phTraslate: string = ''
+  let phTranslate: string = ''
 
   $: {
     if (
@@ -57,7 +57,7 @@
     }
   }
   $: void translate(placeholder, placeholderParam ?? {}, $themeStore.language).then((res) => {
-    phTraslate = res
+    phTranslate = res
   })
 
   function handleInput (): void {
@@ -143,7 +143,7 @@
         bind:this={input}
         type="Password"
         bind:value
-        placeholder={phTraslate}
+        placeholder={phTranslate}
         on:input={handleInput}
         on:change
         on:keydown
@@ -160,7 +160,7 @@
         type="number"
         class="number"
         bind:value
-        placeholder={phTraslate}
+        placeholder={phTranslate}
         on:input={handleInput}
         on:change
         on:keydown
@@ -176,7 +176,7 @@
         bind:this={input}
         type="text"
         bind:value
-        placeholder={phTraslate}
+        placeholder={phTranslate}
         on:input={handleInput}
         on:change
         on:keydown

packages/ui/src/components/NumberInput.svelte

@@ -41,7 +41,7 @@
   let text: HTMLElement
   let input: HTMLInputElement
   let style: string
-  let phTraslate: string = ''
+  let phTranslate: string = ''
   let parentWidth: number | undefined
 
   $: {
@@ -59,7 +59,7 @@
   }
   $: style = `max-width: ${maxWidth || (parentWidth ? `${parentWidth}px` : 'max-content')};`
   $: translate(placeholder, placeholderParam ?? {}, $themeStore.language).then((res) => {
-    phTraslate = res
+    phTranslate = res
   })
 
   function computeSize (t: HTMLInputElement | EventTarget | null) {
@@ -68,7 +68,7 @@
     }
     const target = t as HTMLInputElement
     const value = target.value
-    text.innerHTML = (value === '' ? phTraslate : value)
+    text.innerHTML = (value === '' ? phTranslate : value)
       .replaceAll(' ', ' ')
       .replaceAll('<', '&lt;')
       .replaceAll('>', '&gt;')
@@ -139,7 +139,7 @@
       type="number"
       class="number"
       bind:value
-      placeholder={phTraslate}
+      placeholder={phTranslate}
       {style}
       on:input={(ev) => {
         if (ev.target) {

packages/ui/src/components/PlainTextEditor.svelte

@@ -27,10 +27,10 @@
   export let disabled: boolean = false
 
   let input: HTMLTextAreaElement
-  let phTraslate: string = ''
+  let phTranslate: string = ''
 
   $: void translate(placeholder, placeholderParam ?? {}, $themeStore.language).then((res) => {
-    phTraslate = res
+    phTranslate = res
   })
 
   onMount(() => {
@@ -62,7 +62,7 @@
   bind:value
   bind:this={input}
   {disabled}
-  placeholder={phTraslate}
+  placeholder={phTranslate}
   on:keydown
   on:change
   on:keydown

packages/ui/src/components/TextArea.svelte

@@ -30,10 +30,10 @@
   export let disabled: boolean = false
 
   let input: HTMLTextAreaElement
-  let phTraslate: string = ''
+  let phTranslate: string = ''
 
   $: translate(placeholder, placeholderParam ?? {}, $themeStore.language).then((res) => {
-    phTraslate = res
+    phTranslate = res
   })
 
   export function focus () {
@@ -47,7 +47,7 @@
     bind:value
     bind:this={input}
     {disabled}
-    placeholder={phTraslate}
+    placeholder={phTranslate}
     on:keydown
     on:change
     on:keydown

plugins/calendar-resources/src/components/AddParticipant.svelte

@@ -40,12 +40,12 @@
   let text: HTMLElement
   let input: HTMLInputElement
   let style: string
-  let phTraslate: string = ''
+  let phTranslate: string = ''
   let parentWidth: number | undefined
 
   $: style = `max-width: ${maxWidth || (parentWidth ? `${parentWidth}px` : 'max-content')};`
   $: translate(placeholder, {}, $themeStore.language).then((res) => {
-    phTraslate = res
+    phTranslate = res
   })
 
   function computeSize (t: HTMLInputElement | EventTarget | null) {
@@ -54,7 +54,7 @@
     }
     const target = t as HTMLInputElement
     const value = target.value
-    text.innerHTML = (value === '' ? phTraslate : value)
+    text.innerHTML = (value === '' ? phTranslate : value)
       .replaceAll(' ', ' ')
       .replaceAll('<', '&lt;')
       .replaceAll('>', '&gt;')
@@ -201,7 +201,7 @@
         bind:this={input}
         type="text"
         bind:value
-        placeholder={phTraslate}
+        placeholder={phTranslate}
         {style}
         on:input={(ev) => {
           computeSize(ev.target)

plugins/contact-resources/src/components/ChannelEditor.svelte

@@ -46,11 +46,11 @@
 
   const dispatch = createEventDispatcher()
   let input: HTMLInputElement
-  let phTraslate: string
+  let phTranslate: string
-  $: translate(placeholder, {}, $themeStore.language).then((tr) => (phTraslate = tr))
+  $: translate(placeholder, {}, $themeStore.language).then((tr) => (phTranslate = tr))
   let label: IntlString = plugin.string.CopyToClipboard
-  let lTraslate: string
+  let lTranslate: string
-  $: translate(label, {}, $themeStore.language).then((tr) => (lTraslate = tr))
+  $: translate(label, {}, $themeStore.language).then((tr) => (lTranslate = tr))
   let show: boolean = false
 
   const copyChannel = (): void => {
@@ -98,13 +98,13 @@
 <FocusHandler manager={mgr} />
 {#if editable}
   <div class="editor-container {dir} buttons-group xsmall-gap">
-    <div class="cover-channel" class:show class:copied={label === view.string.Copied} data-tooltip={lTraslate}>
+    <div class="cover-channel" class:show class:copied={label === view.string.Copied} data-tooltip={lTranslate}>
       <input
         bind:this={input}
         class="search"
         type="text"
         bind:value
-        placeholder={phTraslate}
+        placeholder={phTranslate}
         style="width: 100%;"
         on:keypress={(ev) => {
           if (ev.key === 'Enter') {
@@ -181,7 +181,7 @@
       class:show
       class:copied={label === view.string.Copied}
       class:cursor-pointer={openable}
-      data-tooltip={lTraslate}
+      data-tooltip={lTranslate}
       on:click={() => {
         if (openable) {
           dispatch('update', 'open')

plugins/controlled-documents-resources/src/components/document/editors/DescriptionEditor.svelte

@@ -26,10 +26,10 @@
   export let disabled: boolean = false
 
   let input: HTMLElement
-  let phTraslate: string = ''
+  let phTranslate: string = ''
 
   $: translate(placeholder, placeholderParam ?? {}).then((res) => {
-    phTraslate = res
+    phTranslate = res
   })
 
   afterUpdate(() => {
@@ -50,7 +50,7 @@
     rows="1"
     bind:value
     bind:this={input}
-    placeholder={phTraslate}
+    placeholder={phTranslate}
     {disabled}
     on:keydown
     on:change

plugins/tags-resources/src/components/TagsCategoryPopup.svelte

@@ -45,10 +45,10 @@
   const dispatch = createEventDispatcher()
   const query = createQuery()
 
-  let phTraslate: string = ''
+  let phTranslate: string = ''
   $: if (placeholder) {
     translate(placeholder, {}, $themeStore.language).then((res) => {
-      phTraslate = res
+      phTranslate = res
     })
   }
 
@@ -116,7 +116,7 @@
           bind:this={searchElement}
           type="text"
           bind:value={search}
-          placeholder={phTraslate}
+          placeholder={phTranslate}
           style="width: 100%;"
           on:change
         />