한글 입력

한글은 자모를 모아 한 글자를 만드는 동안(조합 중) 브라우저와 입력기가 글자를 계속 고칩니다. 이때 에디터가 끼어들면 글자가 깨지거나 첫 자모가 따로 남습니다. 82에디터는 조합 중에는 손을 대지 않고, 조합이 끝난 뒤 한 번에 처리합니다.

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)),
  },
});

조합 중에 기다리는 것

• 키 처리: 단축키, Enter, Tab, 사이트가 넣은 shortcuts 까지 모두 입력기에 맡깁니다.
• 마크다운 규칙, 자동 링크, 자동 바꾸기, 본문 정리
• 실행 취소 기록. 조합 중 Ctrl+Z 와 다시 실행은 무시합니다.
• input, change 이벤트와 textarea 값 맞추기

조합 중에도 하는 일은 하나입니다. 이미 열린 / 메뉴와 @ 멘션 목록은 조합 중인 글자로 검색어를 다시 읽습니다. @김 을 치는 동안 목록이 바로 줄어듭니다.

조합이 끝나면

• 메뉴 갱신, 실행 취소 기록, change 이벤트가 한 번 실행됩니다. 크롬과 사파리는 이벤트 순서가 다르지만 둘 다 한 번만 처리합니다.
• 조합을 시작할 때 그 앞까지 쓴 내용을 실행 취소 단계로 끊어 둡니다.
• 마크다운 규칙과 자동 바꾸기는 조합이 끝난 뒤 치는 스페이스나 기호에서 실행됩니다. (주) 는 닫는 괄호를 칠 때 ㈜ 가 됩니다.

한국어라서 따로 챙긴 것

• 목록 단추를 누른 직후, 넣을 값(머지 태그) 칩 바로 뒤에서 한글을 칠 때 첫 자모가 따로 남던 문제(ㄴ님)를 커서 자리를 바로잡아 막았습니다.
• 읽기 전용일 때는 조합 입력도 막습니다. 크롬은 편집 불가 영역에서도 조합 입력을 받기 때문입니다.
• 자동 링크는 주소 바로 뒤의 조사를 링크에서 뺍니다(naver.com에서).
• / 메뉴와 이모지 찾기는 초성으로도 찾습니다(ㅍ → 표).

플러그인을 만든다면

에디터에 직접 keydown 이나 input 리스너를 붙인다면 조합 중에는 아무것도 하지 마세요. 에디터가 쓰는 것과 같은 검사입니다.

editor.content.addEventListener('keydown', (e) => {
  if (e.isComposing || e.keyCode === 229) return; // 한글 조합 중
  // …
});

// 글이 바뀐 뒤 할 일은 change 이벤트로 (조합이 끝난 뒤 옵니다)
editor.on('change', (html) => { /* … */ });

옵션

한글 입력만을 위한 옵션은 없습니다. 조합이 끝난 뒤 실행되는 기능을 끄고 켜는 옵션입니다.