Korean input

While a Korean syllable is being composed from its letters, the browser and the input method keep rewriting the text. If the editor steps in at that moment, letters break or the first one is left behind. 82editor keeps its hands off during composition and does its work once it ends. The same goes for Japanese and Chinese input.

createEditor('#editor', {
  toolbar: 'heading | bold italic | bulletList orderedList checklist',
  mentions: {
    search: (q) => [
      { id: 'minsu', label: '김민수' },
      { id: 'minji', label: '김민지' },
      { id: 'jiyoung', label: '이지영' },
    ].filter((u) => u.label.includes(q)),
  },
});

What waits during composition

• Key handling: shortcuts, Enter, Tab and your own shortcuts are left to the input method.
• Markdown rules, auto links, auto replace and content cleanup
• Undo history. Ctrl+Z and redo are ignored while composing.
• The input and change events and the textarea sync

One thing does run: an open slash menu or @ mention list re-reads its query, letters in composition included, so the list narrows while you type @김.

When composition ends

• Menus, undo history and the change event run once. Chrome and Safari fire events in a different order; both are handled once.
• Starting a composition closes the current undo step, so earlier typing is a step of its own.
• Markdown rules and auto replace run on the space or mark typed after composition. (주) becomes ㈜ when the closing parenthesis is typed.

Korean-specific care

• Right after the list button, and right after a merge tag chip, the first letter used to be left behind (ㄴ님); the caret is now put where the input method expects it.
• Read-only mode blocks composed input too, since Chrome accepts it even in non-editable content.
• Auto links leave a Korean particle after the domain out of the link (naver.com에서).
• The slash menu and emoji search match Korean initial consonants (ㅍ → 표).

Writing plugins

If you add your own keydown or input listeners to the editor, do nothing during composition. This is the same check the editor uses.

editor.content.addEventListener('keydown', (e) => {
  if (e.isComposing || e.keyCode === 229) return; // IME composition
  // …
});

// work that follows edits belongs in the change event (it comes after composition)
editor.on('change', (html) => { /* … */ });

Options

There are no options just for Korean input. These turn on or off the features that run after composition.