feat(Multilingual Unit): Translate HTML component

[hirokiterashima]

Changes

• Create TranslatableRichTextEditorComponent for translating HTML components in the Authoring Tool
  • if in default language mode, show one rich text editor
  • if in another language, show translation text and default language text in rich text editors in their own tabs

Notes

• To limit the scope of this review, these will be implemented in separate PR's:
  • Disable editing in the rich text editor in the default language tab
  • Add "Copy to [Japanese,Spanish,...]" button in the default language tab that will copy text into the translation language tab

Test prep

• Test with feat(Multiple Languages): Add POST endpoint to save translations to a unit WISE-API#253

Test (in the AT)

• In default language mode, editing HTML component should work as before
• In another language mode, you can
  • see and edit the language's HTML content in the first tab
  • see default language's HTML content in the second tab
• Try switching between the various languages and make sure the contents appear and save correctly
• Try starting with an empty HTML component, to test out cases where translations don't exist in translation files

[geoffreykwan]

Is there a WISE-API branch that should be used for testing with this?

[hirokiterashima]

Yes, it's WISE-Community/WISE-API#253

[geoffreykwan]

The functionality mostly works. I noticed some cases where there are some errors.

In these examples Spanish is the additional language.

1. If you change the html in Spanish and quickly switch to the English tab, the Spanish html will not be saved

2. An error shows up in the console when you perform any of these actions

   • Use the language switcher at the top of the Authoring Tool to switch to Spanish and then expand the Rich Text (HTML) component
   • Expand the Rich Text (HTML) component and use the language switcher at the top of the Authoring Tool to switch to Spanish
   • If the Spanish html is empty and you switch from English to Spanish in the Rich Text (HTML) tab

This error will show up in the console

core.mjs:10614 ERROR TypeError: Cannot read properties of undefined (reading 'editor')
    at WiseAuthoringTinymceEditorComponent.ngOnChanges (wise-tinymce-editor.component.ts:124:28)
    at WiseAuthoringTinymceEditorComponent.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:3032:14)

3. The editor for Spanish will break and stop rendering if you make a change in the Spanish html and then switch to English while you see the "Saving..." message at the top right

This error will show up in the console

core.mjs:10614 ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, ReadableStream, Array, AsyncIterable, or Iterable.
    at createInvalidObservableTypeError (throwUnobservableError.js:2:12)
    at innerFrom (innerFrom.js:37:43)
    at catchError.js:10:38

[hirokiterashima]

Good catches. See my comments inline.

1. If you change the html in Spanish and quickly switch to the English tab, the Spanish html will not be saved

I tried using a translationTextDirty flag on (modelChange) to disable -> enable the English tab when translation text is unsaved -> saved. This didn't address the issue when the user immediately switches to the english tab, because the (modelChange) doesn't get triggered before the user clicks on the tab (I'm guessing that bubbling the (modelChange) event from TinyMCE -> WISEAuthoringTinyMCEEditor -> TranslatableRichTextEditor takes a bit of time, longer than it takes for the user to click on the tab).

I wonder how likely and often our translators will encounter this problem? If we don't fix it, the worst thing that happens is that the author loses a few words. Maybe we can hold off on a fix for now?

2. An error shows up in the console when you perform any of these actions

   • Use the language switcher at the top of the Authoring Tool to switch to Spanish and then expand the Rich Text (HTML) component
   • Expand the Rich Text (HTML) component and use the language switcher at the top of the Authoring Tool to switch to Spanish
   • If the Spanish html is empty and you switch from English to Spanish in the Rich Text (HTML) tab

This error will show up in the console

core.mjs:10614 ERROR TypeError: Cannot read properties of undefined (reading 'editor')
    at WiseAuthoringTinymceEditorComponent.ngOnChanges (wise-tinymce-editor.component.ts:124:28)
    at WiseAuthoringTinymceEditorComponent.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:3032:14)

This should be fixed.

3. The editor for Spanish will break and stop rendering if you make a change in the Spanish html and then switch to English while you see the "Saving..." message at the top right

This error will show up in the console

core.mjs:10614 ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, ReadableStream, Array, AsyncIterable, or Iterable.
    at createInvalidObservableTypeError (throwUnobservableError.js:2:12)
    at innerFrom (innerFrom.js:37:43)
    at catchError.js:10:38

I couldn't figure out the root cause of this issue that I couldn't consistently reproduce. But I attempted a partial fix of this problem- this error seems to occur when the translation file is being requested in TranslatableRichTextEditorComponent.setLanguage(). We were calling this function on every tab change (including the english tab), but I changed it to only call it when the translation language tab is requested. I see the error less with this fix. Good enough for now?

[geoffreykwan]

I think I might have found the root cause of problem 3. It seems like when you switch languages, it makes a request for the translation file but in certain situations the request for this file fails. I'm guessing it might be failing because the request is killed because it may no longer be needed or something.

WISE-Client/src/assets/wise5/services/translateProjectService.ts

Lines 49 to 53 in 0b43da6

	private fetchTranslations(locale: string): Observable<Translations> {
	return this.http.get<Translations>(this.getTranslationMappingURL(locale), {
	headers: new HttpHeaders().set('cache-control', 'no-cache')
	});
	}

If you change the code to add a catchError(), it prevents the rich text editor from breaking.

  private fetchTranslations(locale: string): Observable<Translations> {
    return this.http
      .get<Translations>(this.getTranslationMappingURL(locale), {
        headers: new HttpHeaders().set('cache-control', 'no-cache')
      })
      .pipe(
        catchError(() => {
          return of({});
        })
      );
  }

[geoffreykwan]

Looks good.