Как настроить пользовательский интерфейс CompositionEvent в JavaScript для логики клавиатуры IME в различных браузерах? ⇐ Javascript

[Anonymous]

Я только что столкнулся с тем, что такое JavaScript CompositionEvent? Пожалуйста, приведите примеры из маленьких изображений/видео, доступных по теме, и, учитывая, что я когда -либо действительно использую английскую/латинскую клавиатуру на хромированных настольных или сафари -iOS, мое воздействие на такие вещи, как китайский/пининжим -редакторы, ограничен. Вставка здесь для испанского ´ e = é (mac opt+e затем e ) дает журналы:

Код: Выделить всё

compositionstart:
compositionupdate: ´
compositionupdate: é
compositionend: é
< /code>
Работая с Claudeai для прототипа с использованием системы редактора TiptAp, я в конечном итоге, соответствующая часть которого такова: < /p>
const editor = useEditor({
extensions: [
StarterKit,
Placeholder.configure({
placeholder: 'Start typing... IME input is supported (中文, 日本語, 한국어, etc.)'
})
],
content: '',
onUpdate: ({ editor }) => {
setEditorContent(editor.getHTML());
},
editorProps: {
attributes: {
class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none min-h-[300px] p-4',
spellcheck: 'false'
},
handleDOMEvents: {
// Handle composition start (IME input begins)
compositionstart: (view, event) => {
const selection = view.state.selection;
setImeState(prev => ({
...prev,
isComposing: true,
compositionStart: selection.from,
compositionEnd: selection.to,
compositionText: ''
}));
return false;
},

// Handle composition update (IME input changes)
compositionupdate: (view, event) => {
const compositionEvent = event as CompositionEvent;
setImeState(prev => ({
...prev,
compositionText: compositionEvent.data || ''
}));
return false;
},

// Handle composition end (IME input confirmed)
compositionend: (view, event) => {
const compositionEvent = event as CompositionEvent;
setImeState(prev => ({
...prev,
isComposing: false,
compositionText: '',
compositionStart: 0,
compositionEnd: 0
}));

// Ensure the final composed text is properly inserted
if (compositionEvent.data) {
const { state, dispatch } = view;
const { from, to } = state.selection;
const tr = state.tr.insertText(compositionEvent.data, from, to);
dispatch(tr);
}

return false;
},

// Handle input events for better IME support
input: (view, event) => {
// Let Tiptap handle regular input events
// This ensures compatibility with IME composition
return false;
},

// Handle keydown for special IME cases
keydown: (view, event) => {
// Don't interfere with IME composition
if (imeState.isComposing) {
// Allow certain keys during composition
const allowedKeys = ['Escape', 'Tab', 'Enter'];
if (!allowedKeys.includes(event.key)) {
return false;
}
}
return false;
}
}
}
});

Так что кажется , как эти крючки будут вызваны, когда какой -то нативный инструмент ввода клавиатуры записывается в браузер на рабочем столе или на мобильном телефоне/и т. Д., как он работает? Например, вам нужно установить внешнюю клавиатуру для ввода китайского/пининжима на iPhone или настольных хрома? Если это так, (касательно, но) я хотел бы знать, где его найти, так как я запутался, как начать тестирование. Латинский скрипт, но теоретически он мог бы использовать другой сценарий). < /P>
Так как бы я правильно создавал своего рода IME для пользовательского языка, который работает в браузере и телефонах в нормальных местах? Язык?>

Подробнее здесь: https://stackoverflow.com/questions/796 ... d-logic-on