CodeMirror Addon の hint/show-hint.js でスニペット実装

CodeMirror AutoComplete で検索すると以下のコードがヒットするんですが、もう少し単純なサンプルが欲しかったので実装してみました。

• CodeMirrorでEmoji AutoCompleteする
• CodeMirrorでAutoCompleteする

CodePen

エディター上で Cmd-E もしくは Ctrl-E すると、コンテキストメニューみたいなものが出てきて入力出来ます。

See the Pen CodeMirror Addon hint/show-hint.js sample by kkeisuke (@_kkeisuke) on CodePen.

補足

候補を絞り込んでいるのは以下の行で仕組みは単純です。

// snippets は { text: string, displayText: string }[] みたいな感じです。
const list: any[] = snippets.filter(function (item): boolean {
  return item.text.indexOf(currentWord) >= 0
})

もう少し細かい制御をしようと思うと大変そうです。冒頭の記事をご参考ください。

CodeMirror は英語、日本語ともにサンプルが少ないですね