Adding user-written translation capability to how-tos

[melissachen2000]

Context

Currently, user-written how-tos can only be written and viewed in one language. This poses a problem if a user wants to write versions of a how-to in multiple languages. This PR sets up the user interface so that users can write how-tos in multiple languages.

The implementation uses markup strings to store translations. Each how-to is stored as a markup Doc with a locale tag. For how-tos made prior to this PR, the how-to text is just stored as a regular string. Since I accidentally hardcoded the locales on these how-tos to be en-US, I included some logic that detects if a string is not a markup string, and attaches the en-US locale to it.

Related issues

• Related Issue Community-created documentation #825
• Closes #

Verification

1. Set up Wordplay to use more than one language using the language dialog in the bottom right.
2. Click the button to create a new how-to. Check that all of the languages that are added to Wordplay for the user are shown in the dropdown.
3. Select a language with the dropdown. Write a title and some text. Repeat for a second language.
4. Post the how-to. In the database emulator, check that both the title and text are Wordplay markup strings, where the title and text are wrapped in ¶ symbols with corresponding language tags (e.g., ¶hello¶/en-US¶hola¶/es-MX).
5. Remove all of the languages but one. Open the how-to that was just created and click the edit button. Check that the two languages that that how-to was written in are still options in the drop-down. If the language that remains is not one of those two languages, check that the interface language is also in that list.

To test that previously-written how-tos can still be read:

1. Start on a different branch than this one. Create a how to.
2. Switch to this branch. Refresh the page. Click the how-to preview. The text should render correctly.
3. Click on the edit button. The language should be set to en-US.

Checklist

• Currently, MarkupHTMLView doesn't handle translations. Based on our conversation in Slack, it sounds like this is not implemented yet?
• Verifying: I assumes 2-3 letter language code, 2 letter region code in my regex. Is this a correct assumption?
• Hoping to get help on: Multilingual placeholder titles. A previous PR defined a placeholder title at l.ui.howto.editor.titlePlaceholder. We use this placeholder value if the title is left empty (here is the implementation). I think having a placeholder title is probably still useful, but I don't know how to access the placeholder title for a particular locale. What I would like to be able to do is:
  • Have a list of locales that are used (defined as at least one of the text boxes in that locale is non-empty) (done)
  • For the list of locales that are used, get a list of locales that have empty titles (can do)
  • For the list of locales with empty titles, set their titles to be the placeholder value (don't know how to do)
• Hoping to get help on: There is an announcer that announces whenever a how-to is moved in the preview. It uses the how-to's title. The current implementation gets the title in the user's preferred locale, if a title has been written in that locale, and an empty string otherwise. This feels like unideal behavior, because if a title exists, it should be shown. What should be the fallback?

[amyjko]

@melissachen2000 MarkupHTMLView can now handle multiple translations in Doc or FormattedLiteral syntax:

<MarkupHTMLView markup={"¶hello¶/en¶hola¶/es"} />

<MarkupHTMLView markup={"`hello`/en`hola`/es"} />

It will chose the primary language if available, and if not, it will choose the first translation.

[melissachen2000]

Thanks, Amy! I merged in the feature and tested the changes. Found and fixed a defect in my implementation from that! I will also use that logic to figure out what the title should be in the announcer (the last checklist item).

[amyjko]

Re: language codes and regions, we use the BCP-47 standard, which is 2-3 language characters, and 2-3 region characters. See more here: https://developer.mozilla.org/en-US/docs/Glossary/BCP_47_language_tag.

Re: to get a particular locale, you'll need to use the LocalesDatabase. It has an async function loadLocale, which loads the locale if necessary, and returns a LocaleText if it exists. It may not, in which case there would be no defined placeholder for that locale.

[melissachen2000]

Thank you, Amy!

Re language codes: it turns out that specifying the language code format using the number of characters doesn't work anyway (specifically for the Tamil language case, which is ta-IN-LK-SG), so I'm constructing the regex using the list of supported locales instead; I think this will be a more robust approach as new locales are added.

I also changed the schema key l.ui.howto.editor.titlePlaceholder from titlePlaceholder to untitledHowToPlaceholder. There's another key called l.ui.howto.editor.title.placeholder (placeholder text for the title field), which is super confusing. I changed the name of the key in all of the locale JSONs manually in 5822d39; hopefully this didn't break anything.

[amyjko]

Great! I will likely review next Saturday in my next Wordplay session, possibly earlier if I have teaching prep time.