Ethiopic Input Methods Demo

import KeywriteWeb from "@keywrite/web";
import EthiopicInputMethods from "@keywrite/ethiopic-input-methods";

// Populate select options
const populateSelect = (selectId) => {
const select = document.getElementById(selectId);
if (select) {
const IMKeys = Object.keys(EthiopicInputMethods);
IMKeys.forEach(key => {
const option = document.createElement("option");
option.value = key;
option.textContent = key;
select.appendChild(option);
});
}
};

// Add toggle functionality
const addToggle = (instance, btnId) => {
const btn = document.getElementById(btnId);
if (btn) {
btn.addEventListener("click", () => {
instance.on = !instance.on;
btn.textContent = instance.on ? "ON" : "OFF";
});
}
};

// Add layout selection functionality
const addLayoutSelect = (instance, selectId) => {
const select = document.getElementById(selectId);
if (select) {
select.addEventListener("change", (e) => {
const value = e.target.value;
instance.current = value;
});
}
};

// Initialize
const inputElem = document.getElementById("inputName");
const textareaElem = document.getElementById("inputBio");

if (inputElem && textareaElem) {
// Populate selects
populateSelect("selectName");
populateSelect("selectBio");

// Create Keywrite instances
const inputInstance = new KeywriteWeb(inputElem, EthiopicInputMethods);
const textareaInstance = new KeywriteWeb(textareaElem, EthiopicInputMethods);

// Add event listeners
addToggle(inputInstance, "btnName");
addToggle(textareaInstance, "btnBio");
addLayoutSelect(inputInstance, "selectName");
addLayoutSelect(textareaInstance, "selectBio");
}

Open Sandbox