Markdownの入力を補助するプラグイン作った

## リポジトリ

https://github.com/ttakuru88/textarea-markdown-editor

## デモ

http://hai3.net/textarea-markdown-editor/

## 概要

Qiitaの投稿画面でリスト記法で入力をすると、改行するときに自動で`*`とか`-`とかが自動で挿入される「あれ」に、思いついた機能をゴタゴタとつけていったもの。
つい先日まではjQueryプラグインだったのだけれど、ここ数日のjQueryディス祭りにビビったので、jQueryに依存しないように作り変えたという話も。

## なぜ作ったの

某情報共有サービスに、Qiitaの投稿画面にあるような「リストの入力補間」を実装したのだけれど、http://esa.io というサービスが[テーブル記法の補間](https://docs.esa.io/posts/54)を実装したというのを知った私は、これにいたく感動しついつい同じものを実装してしまったという。
その後、誰得俺俺機能をゴタゴタとつけていって今に至る。

## 機能一覧

### リスト記法の補完

Markdownのリストは`*`、`-`、`+`、`1.`などを入力して表現するのだけれど、`- - -`で線を引くという記法もあるので、これを考慮しないと`- - -`を入力して改行するとリストが挿入されるというバグが発生したりする。
リスト入力中や、複数の行を選択中に`Tab`を押すと、4文字スペースでインデントする。もちろん`Shift + Tab`だとインデントが戻る。

### コードブロックの補完

    ```

↑を入力して改行すると対応する```が自動で挿入される。

    ```ruby
      puts 'fooooooooo'
    ```

↑この３行目で改行を入力したときには```が自動で挿入されてほしくない。それを実現するために「現在コードブロックの中にいるかどうか」を判定しなければいけなくて辛かった。~~今も完璧ではない。~~

![editor_code.gif](https://qiita-image-store.s3.amazonaws.com/0/9026/17e7862e-e24b-7f3f-d1a2-ba348da03b3e.gif)

### テーブル入力
上に書いた通り、http://esa.io の方式をベースに。改行をすると次の行が挿入される。もちろん`Tab`や`Shift+Tab`でセルの移動もできる。
Markdownのテーブルはパイプ`|`で区切るのだけど、パイプ自体を入力できるようにバックスラッシュでパイプがエスケープ出来るようになっている。このエスケープされたパイプを考慮しないとダメなので、辛いかった。

### チェックボックスの切り替え

これもesa.ioの[チェックボックスをトグル](https://docs.esa.io/posts/59) より！

### `3x3`からテーブル生成

ちょっと該当のtweetが見つからないのだけれど、たしかQiitaの中の人がテーブルの入力を楽にする機能を投稿画面に実装した、という感じのツイートが流れてきたので、よさ気だから取り込んでみた。

`3x3`と入力して`Shift+Space`を入力すると、横３縦３のテーブルが生成される。
`3x3:`で右寄せのテーブル、`:3x3:`で中央寄せのテーブルなども生成できる。

![editor.gif](https://qiita-image-store.s3.amazonaws.com/0/9026/a2f35043-d32b-d60a-7ffd-5f3ca437f792.gif)

### CSV からテーブル作成
これも該当のtweetが見つからない・・。上の3x3記法のtweetを見た方が「csvをテーブルにする機能がほしいなあ」とツイートしていたのを見た。「なるほどぅ」と思ったので作った。

```
1,2,3
4,5,6
7,8,9
```
たとえば、上のcsv全体を選択して`Shift+Space`を押すと次のテーブルが生成される。楽しい。

```
| 1 | 2 | 3 |
| --- | --- | --- |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
```

![editor_csv.gif](https://qiita-image-store.s3.amazonaws.com/0/9026/b648f76f-b8e1-7b72-1db4-3ddad50c12f7.gif)

### テーブルで関数

誰得俺俺機能である。
なんと！縦に計算ができる！

たとえば、次の様なテーブルを入力する。

```
|品物|値段|
| --- | --- |
| その1 | 100 |
| その2 | 200 |
| その3 | 500 |
| 計 | =SUM |
```

この時、`=SUM`と書かれているセルで`Shift + Space`を押すと、なんと`800`が挿入されるのである。

同様に、縦を計算する関数として、`AVERAGE`,`MAX`,`MIN`,`COUNT`を用意した。
このような誰得機能を作るのはとても楽しい。

![editor_sum.gif](https://qiita-image-store.s3.amazonaws.com/0/9026/30456f56-73df-05f6-dc27-0e78b60f9755.gif)

### テーブルのソート

誰得俺俺機能その２である。
なんと！テーブルを！ソートできる！

```
|品物|値段|
| --- | --- |
| その1 | 800 |
| その2 | 400 |
| その3 | 500 |
```

たとえばこうなっているテーブルで、ヘッダの`値段`という場所で`Shift+Space`を押すと、値段の昇順にテーブルの行が並べ変わるのである。その状態でもう一度`Shift+Space`を押すと、降順に変わる。

![editor_sort.gif](https://qiita-image-store.s3.amazonaws.com/0/9026/f2669aa6-3363-cd25-3b9a-8b29d57cd7e0.gif)

### フォントの装飾

太字、斜体、打ち消し、インラインコードブロックを入力するキーボードショートカットも用意した。例えば、太字にしたければ太字にしたい文字列を選択して`Ctrl + b`を押すと、選択した文字列を`**`で囲むので太字になる。動揺に斜体は`Ctrl + i`、打ち消しは`Ctrl + u`、インラインコードブロックは`Ctrl + q`を割り当てた。

キーボードショートカット系は、使う人によって好みが大きくあるのでどうかなと思ったけれど、オプションでOFFにできるようにしたしいいかなと。

## 問題点

~~プログラムで自動挿入された文字に関しては、`Ctrl + z`を押しても入力が戻らない点。かなり困る。~~ （2016/5/25 [解決した。](https://mimemo.io/m/mqLXOlJe7ozQ19r)）

自分は使ってないけれど、`Shift+Space`は全角入力時の半角スペースのショートカットらしい。キーバインドをオプションで設定できるようにしようかな。

## 今後の更新予定

Markdownの構文に完全に対応していないので、レアケースをしょぼしょぼと改善していく予定。