so close…

tools/cldr-apps/js/src/esm/cldrKeyboard.mjs

@@ -0,0 +1,114 @@
+/**
+ * Operations around keyboard support
+ */
+
+import * as cldrClient from "./cldrClient.mjs";
+import * as cldrStatus from "./cldrStatus.mjs";
+
+// See https://keyman.com/developer/keymanweb/ for the latest version and scripts to use
+const KEYMAN_VERSION = "17.0.333";
+const KEYMAN_SCRIPTS = ["keymanweb.js", "kmwuitoggle.js"];
+const KEYMAN_BASE = "https://s.keyman.com/kmw/engine/";
+const KEYMAN_ATTACH = `(
+    function(kmw) {
+        kmw.init({attachType:'auto'});
+    }
+)(keyman);`;
+
+
+// are the scripts installed?
+let installed = false;
+let installing = false;
+// is the option enabled?
+let enabled = false;
+// did we call init yet?
+let initted = false;
+
+
+function getRemoteScript(src) {
+    const e = document.createElement('script');
+    e.setAttribute('src', src);
+    return e;
+}
+
+function getInlineScript(body) {
+    const e = document.createElement('script');
+    e.textContent = body;
+    return e;
+}
+
+/** insert the script tags */
+async function installKeyboards() {
+    if (installing) return;
+    installing = true;
+
+    if (!installed) {
+        const { body } = document;
+        for (const script of KEYMAN_SCRIPTS) {
+            const e = getRemoteScript(`${KEYMAN_BASE}${KEYMAN_VERSION}/${script}`);
+            body.appendChild(e);
+            await waitForLoad(e); // block here until loaded
+        }
+        const attach = getInlineScript(KEYMAN_ATTACH);
+        body.appendChild(attach);
+        installed = true;
+        installing = false;
+        updateKeyboardLocale(cldrStatus.getCurrentLocale());
+    }
+
+    function waitForLoad(e) {
+        return new Promise((resolve, reject) => {
+            try {
+                e.addEventListener('load', resolve);
+            } catch (err) {
+                reject(err);
+            }
+        });
+    }
+}
+
+/**
+ * Update whether user has requested web keyboards
+ * @param {boolean} enable  true if keyboards are enabled
+ */
+export function setUseKeyboards(enable) {
+    if (enable != enabled) {
+        if (enable) {
+            installKeyboards().then(() => { enabled = true; });
+        } else {
+            enabled = false;
+        }
+    }
+}
+
+/**
+ * Update the keyboard locale
+ * @param {string} curLocale
+ */
+export function updateKeyboardLocale(curLocale) {
+    if (installed && enabled) {
+        // make sure keyman is loaded
+        for (const { InternalName } of keyman.getKeyboards()) {
+            keyman.removeKeyboards(InternalName);
+            console.log(`Removed kbd: ${InternalName}`);
+        }
+        console.log(`Adding kbd: @${curLocale}`);
+        keyman.addKeyboards(`@${curLocale}`);
+        // end keyboards
+    }
+}
+
+export function isEnabled() {
+    return enabled;
+}
+
+/** Note: may need to call reload() in order to unload keyboard. */
+export async function setEnabledPref(enable) {
+    const client = await cldrClient.getClient();
+    setUseKeyboards(enable);
+    if (enable) {
+        await client.apis.user.setSetting({setting: 'webkeyboard'});
+    } else {
+        await client.apis.user.removeSetting({setting: 'webkeyboard'});
+    }
+}

tools/cldr-apps/js/src/esm/cldrMenu.mjs

@@ -8,6 +8,7 @@ import * as cldrCoverage from "./cldrCoverage.mjs";
 import * as cldrDom from "./cldrDom.mjs";
 import * as cldrEvent from "./cldrEvent.mjs";
 import * as cldrGui from "./cldrGui.mjs";
+import * as cldrKeyboard from "./cldrKeyboard.mjs";
 import * as cldrLoad from "./cldrLoad.mjs";
 import { LocaleMap } from "./cldrLocaleMap.mjs";
 import * as cldrStatus from "./cldrStatus.mjs";
@@ -418,6 +419,8 @@ function updateLocaleMenu() {
   const curLocale = cldrStatus.getCurrentLocale();
   let prefixMessage = "";
   if (curLocale != null && curLocale != "" && curLocale != "-") {
+    // hook to update the keyboard locale
+    cldrKeyboard.updateKeyboardLocale(curLocale);
     const locmap = cldrLoad.getTheLocaleMap();
     cldrStatus.setCurrentLocaleName(locmap.getLocaleName(curLocale));
     var bund = locmap.getLocaleInfo(curLocale);

tools/cldr-apps/js/src/esm/cldrStatus.mjs

@@ -3,6 +3,7 @@
  */
 import * as cldrGui from "./cldrGui.mjs";
 import { ref } from "vue";
+import { setUseKeyboards } from "./cldrKeyboard.mjs";
 
 const refs = {
   currentLocale: ref(null),
@@ -44,6 +45,7 @@ function getStatusTarget() {
  * Events:
  * - sessionId:  session ID changed
  * - surveyUser: survey user changed
+ * - update: any update changed
  */
 function on(type, callback) {
   getStatusTarget().addEventListener(type, callback);
@@ -94,6 +96,8 @@ function updateAll(status) {
   if (status.user) {
     setSurveyUser(status.user);
   }
+  setUseKeyboards(status?.settings?.user?.webkeyboard);
+  dispatchEvent(new Event('update'));
 }
 
 /**

tools/cldr-apps/js/src/views/MainMenu.vue

@@ -134,11 +134,15 @@
         <li><a href="#error_subtypes///">Error Subtypes</a></li>
       </ul>
     </li>
+    <li v-if="loggedIn">
+      <a-checkbox v-model:checked="webkeyboard" @change="setKeyboard">Show Web Keyboard</a-checkbox>
+    </li>
   </ul>
 </template>
 
 <script>
 import * as cldrStatus from "../esm/cldrStatus.mjs";
+import * as cldrKeyboard from "../esm/cldrKeyboard.mjs";
 
 export default {
   data() {
@@ -158,6 +162,7 @@ export default {
       uploadXmlUrl: null,
       userId: 0,
       showClaMenu: true,
+      webkeyboard: false,
     };
   },
 
@@ -187,6 +192,12 @@ export default {
       this.org = cldrStatus.getOrganizationName();
       this.recentActivityUrl = this.getSpecialUrl("recent_activity");
       this.uploadXmlUrl = this.getSpecialUrl("upload");
+      cldrStatus.on('update', () => this.webkeyboard = cldrKeyboard.isEnabled());
+    },
+
+    setKeyboard(checked) {
+      cldrKeyboard.setEnabledPref(this.webkeyboard);
+      // window.location.reload();
     },
 
     getSpecialUrl(special) {

tools/cldr-apps/src/main/java/org/unicode/cldr/web/api/UserAPI.java

@@ -201,7 +201,7 @@ public Response setSetting(
         }
     }
 
-    @DeleteProvider
+    @DELETE
     @Operation(summary = "Remove Settings", description = "remove a settings field")
     @APIResponses(
             value = {