2 files changed, 64 insertions, 8 deletions

diff --git a/ext/js/pages/settings/popup-preview-controller.js b/ext/js/pages/settings/popup-preview-controller.js
index 5194410c..bd335460 100644
--- a/ext/js/pages/settings/popup-preview-controller.js
+++ b/ext/js/pages/settings/popup-preview-controller.js
@@ -47,6 +47,14 @@ export class PopupPreviewController {
         this._customOuterCss.addEventListener('settingChanged', this._onCustomOuterCssChange.bind(this), false);
         this._frame.addEventListener('load', this._onFrameLoad.bind(this), false);
         this._settingsController.on('optionsContextChanged', this._onOptionsContextChange.bind(this));
+        this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
+        const languageSelect = querySelectorNotNull(document, '#language-select');
+        languageSelect.addEventListener(
+            /** @type {string} */ ('settingChanged'),
+            /** @type {EventListener} */ (this._onLanguageSelectChanged.bind(this)),
+            false
+        );
+
 
         this._frame.src = '/popup-preview.html';
     }
@@ -79,6 +87,20 @@ export class PopupPreviewController {
     }
 
     /**
+     * @param {import('settings-controller').EventArgument<'optionsChanged'>} details
+     */
+    _onOptionsChanged({options}) {
+        this._invoke('PopupPreviewFrame.optionsChanged', {options});
+    }
+
+    /**
+     * @param {import('dom-data-binder').SettingChangedEvent} settingChangedEvent
+     */
+    _onLanguageSelectChanged(settingChangedEvent) {
+        this._invoke('PopupPreviewFrame.setLanguageExampleText', {language: settingChangedEvent.detail.value});
+    }
+
+    /**
      * @param {string} action
      * @param {import('core').SerializableObject} params
      */
diff --git a/ext/js/pages/settings/popup-preview-frame.js b/ext/js/pages/settings/popup-preview-frame.js
index 2898eaa2..d3e21641 100644
--- a/ext/js/pages/settings/popup-preview-frame.js
+++ b/ext/js/pages/settings/popup-preview-frame.js
@@ -52,24 +52,26 @@ export class PopupPreviewFrame {
         this._exampleTextInput = querySelectorNotNull(document, '#example-text-input');
         /** @type {string} */
         this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, '');
+        /** @type {import('language').LanguageSummary[]} */
+        this._languageSummaries = [];
+        /** @type {boolean} */
+        this._wanakanaBound = false;
 
         /* eslint-disable @stylistic/no-multi-spaces */
         /** @type {Map<string, (params: import('core').SerializableObjectAny) => void>} */
         this._windowMessageHandlers = new Map(/** @type {[key: string, handler: (params: import('core').SerializableObjectAny) => void][]} */ ([
-            ['PopupPreviewFrame.setText',              this._onSetText.bind(this)],
-            ['PopupPreviewFrame.setCustomCss',         this._setCustomCss.bind(this)],
-            ['PopupPreviewFrame.setCustomOuterCss',    this._setCustomOuterCss.bind(this)],
-            ['PopupPreviewFrame.updateOptionsContext', this._updateOptionsContext.bind(this)]
+            ['PopupPreviewFrame.setText',                this._onSetText.bind(this)],
+            ['PopupPreviewFrame.setCustomCss',           this._setCustomCss.bind(this)],
+            ['PopupPreviewFrame.setCustomOuterCss',      this._setCustomOuterCss.bind(this)],
+            ['PopupPreviewFrame.updateOptionsContext',   this._updateOptionsContext.bind(this)],
+            ['PopupPreviewFrame.optionsChanged',         this._onOptionsChanged.bind(this)],
+            ['PopupPreviewFrame.setLanguageExampleText', this._setLanguageExampleText.bind(this)]
         ]));
         /* eslint-enable @stylistic/no-multi-spaces */
     }
 
     /** */
     async prepare() {
-        if (this._exampleTextInput !== null && typeof wanakana !== 'undefined') {
-            wanakana.bind(this._exampleTextInput);
-        }
-
         window.addEventListener('message', this._onMessage.bind(this), false);
 
         // Setup events
@@ -85,6 +87,10 @@ export class PopupPreviewFrame {
         this._apiOptionsGetOld = this._application.api.optionsGet.bind(this._application.api);
         this._application.api.optionsGet = this._apiOptionsGet.bind(this);
 
+        this._languageSummaries = await this._application.api.getLanguageSummaries();
+        const options = await this._application.api.optionsGet({current: true});
+        this._onOptionsChanged({options, optionsContext: {current: true}});
+
         // Overwrite frontend
         this._frontend = new Frontend({
             application: this._application,
@@ -268,6 +274,34 @@ export class PopupPreviewFrame {
         await this._updateSearch();
     }
 
+    /**
+     * @param {import('settings-controller').EventArgument<'optionsChanged'>} details
+     */
+    async _onOptionsChanged({options: {general: {language}}}) {
+        this._setLanguageExampleText({language});
+    }
+
+    /**
+     * @param {{language: string}} details
+     */
+    _setLanguageExampleText({language}) {
+        const activeLanguage = /** @type {import('language').LanguageSummary} */ (this._languageSummaries.find(({iso}) => iso === language));
+
+        if (this._exampleTextInput !== null) {
+            if (language === 'ja') {
+                wanakana.bind(this._exampleTextInput);
+                this._wanakanaBound = true;
+            } else if (this._wanakanaBound) {
+                wanakana.unbind(this._exampleTextInput);
+                this._wanakanaBound = false;
+            }
+        }
+
+        this._exampleTextInput.lang = language;
+        this._exampleTextInput.value = activeLanguage.exampleText;
+        this._exampleTextInput.dispatchEvent(new Event('input'));
+    }
+
     /** */
     async _updateSearch() {
         if (this._exampleText === null) { return; }