Fix HTML lang tags not matching the selected language (#979)

* Cleanup and add language tag to renderResult

* Add language switching support to anki card templates scanned text

* Update search page search-textbox lang on language switch

* Set queryparser lang

* Allow updating language for display-generator

* Only use kanji-stroke-orders font for japanese

3 files changed, 23 insertions, 4 deletions

diff --git a/ext/js/pages/settings/anki-deck-generator-controller.js b/ext/js/pages/settings/anki-deck-generator-controller.js
index c8b17742..416e2025 100644
--- a/ext/js/pages/settings/anki-deck-generator-controller.js
+++ b/ext/js/pages/settings/anki-deck-generator-controller.js
@@ -530,11 +530,12 @@ export class AnkiDeckGeneratorController {
 
     /** */
     async _updateExampleText() {
-        this._languageSummaries = await this._application.api.getLanguageSummaries();
+        const languageSummaries = await this._application.api.getLanguageSummaries();
         const options = await this._settingsController.getOptions();
-        const activeLanguage = /** @type {import('language').LanguageSummary} */ (this._languageSummaries.find(({iso}) => iso === options.general.language));
+        const activeLanguage = /** @type {import('language').LanguageSummary} */ (languageSummaries.find(({iso}) => iso === options.general.language));
         this._renderTextInput.lang = options.general.language;
         this._renderTextInput.value = activeLanguage.exampleText;
+        this._renderResult.lang = options.general.language;
     }
 
     /**
diff --git a/ext/js/pages/settings/anki-templates-controller.js b/ext/js/pages/settings/anki-templates-controller.js
index dd96f69c..d4f1dc10 100644
--- a/ext/js/pages/settings/anki-templates-controller.js
+++ b/ext/js/pages/settings/anki-templates-controller.js
@@ -25,11 +25,14 @@ import {TemplateRendererProxy} from '../../templates/template-renderer-proxy.js'
 
 export class AnkiTemplatesController {
     /**
+     * @param {import('../../application.js').Application} application
      * @param {import('./settings-controller.js').SettingsController} settingsController
      * @param {import('./modal-controller.js').ModalController} modalController
      * @param {import('./anki-controller.js').AnkiController} ankiController
      */
-    constructor(settingsController, modalController, ankiController) {
+    constructor(application, settingsController, modalController, ankiController) {
+        /** @type {import('../../application.js').Application} */
+        this._application = application;
         /** @type {import('./settings-controller.js').SettingsController} */
         this._settingsController = settingsController;
         /** @type {import('./modal-controller.js').ModalController} */
@@ -52,6 +55,8 @@ export class AnkiTemplatesController {
         this._renderTextInput = querySelectorNotNull(document, '#anki-card-templates-test-text-input');
         /** @type {HTMLElement} */
         this._renderResult = querySelectorNotNull(document, '#anki-card-templates-render-result');
+        /** @type {HTMLElement} */
+        this._mainSettingsEntry = querySelectorNotNull(document, '[data-modal-action="show,anki-card-templates"]');
         /** @type {?import('./modal.js').Modal} */
         this._fieldTemplateResetModal = null;
         /** @type {AnkiNoteBuilder} */
@@ -89,6 +94,9 @@ export class AnkiTemplatesController {
         const options = await this._settingsController.getOptions();
         const optionsContext = this._settingsController.getOptionsContext();
         this._onOptionsChanged({options, optionsContext});
+
+        void this._updateExampleText();
+        this._mainSettingsEntry.addEventListener('click', this._updateExampleText.bind(this), false);
     }
 
     // Private
@@ -173,6 +181,16 @@ export class AnkiTemplatesController {
         void this._validate(infoNode, field, 'term-kanji', true, false);
     }
 
+    /** */
+    async _updateExampleText() {
+        const languageSummaries = await this._application.api.getLanguageSummaries();
+        const options = await this._settingsController.getOptions();
+        const activeLanguage = /** @type {import('language').LanguageSummary} */ (languageSummaries.find(({iso}) => iso === options.general.language));
+        this._renderTextInput.lang = options.general.language;
+        this._renderTextInput.value = activeLanguage.exampleText;
+        this._renderResult.lang = options.general.language;
+    }
+
     /**
      * @param {import('popup-menu').MenuCloseEvent} event
      */
diff --git a/ext/js/pages/settings/settings-main.js b/ext/js/pages/settings/settings-main.js
index 3d3e2352..3ff818ac 100644
--- a/ext/js/pages/settings/settings-main.js
+++ b/ext/js/pages/settings/settings-main.js
@@ -121,7 +121,7 @@ await Application.main(true, async (application) => {
     const ankiDeckGeneratorController = new AnkiDeckGeneratorController(application, settingsController, modalController, ankiController);
     preparePromises.push(ankiDeckGeneratorController.prepare());
 
-    const ankiTemplatesController = new AnkiTemplatesController(settingsController, modalController, ankiController);
+    const ankiTemplatesController = new AnkiTemplatesController(application, settingsController, modalController, ankiController);
     preparePromises.push(ankiTemplatesController.prepare());
 
     const popupPreviewController = new PopupPreviewController(settingsController);