目的

きっかけが多いので箇条書きにしてみます。

Todoリスト作りたい
JavaScriptが流行っているらしい
Node.jsなるものが流行っているらしい
React.jsなるものがすごい便利らしい
かっこいいテキストエディタを作れるDraft.jsというライブラリがあるらしい
Draft.jsの入れ子リスト(NestedList)が使えたら便利だなぁ
なんだかよくわからないけど入れ子リスト(NestedList)を作れた ← ｲﾏｺｺ

上記から読み取れる(?)ように本記事の目的は「NestedListのいじり方」の私的メモです。
簡単に作れるよみたいなことがDraft.jsの本家HPに書いてあったけど、結構ハマったのでメモ書きしたいのです。

NestedListとは

こういうやつのこと。リストが入れ子になってます。

NestedListに期待する機能

要求としてはそこまで多く無いけど、いざやろうってなったらきっとめんどくさい機能がまあまああります。キーの設定とか。
以下のような機能がほしいです。しかも簡単に扱いたいよ。

Tabを押したら深さが増えてほしい(画像中のaの下の白丸みたいな感じ)
Shift+Tabを押したら深さが減ってほしい(画像中のaaaみたいな感じ)
管理は楽めに
デザインも楽に変えたい

Draft.jsの雛形

Draft.jsの雛形をまず下記します。

editor.js

import React from 'react';
import {Editor, EditorState, RichUtils} from 'draft-js';
import './editor.css';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    // 初期化
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
    this.focus = () => this.refs.editor.focus();

    // ショートカットキーの設定
    this.handleKeyCommand = this._handleKeyCommand.bind(this);
    // Tab: 深さ+1, Shift+Tab: 深さ-1 の設定の参照
    this.onTab = this._onTab.bind(this);
  }

  /* Tab: 深さ+1, Shift+Tab: 深さ-1 の設定の本体 */
  _onTab(e){
    const newEditorState = RichUtils.onTab(e, this.state.editorState, 4);
    this.onChange(newEditorState);
  }
  /* ハンドルキーの定義 */
  _handleKeyCommand(command, editorState) {
    const newState = RichUtils.handleKeyCommand(editorState, command);
    if (newState) {
      this.onChange(newState);
      return 'handled';
    }
    return 'not-handled';
  }
  /* クリックイベント */
  _onBoldClick(e){
    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'));
    // e.preventDefault();
  }
  _onItalicClick(e){
    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'ITALIC'));
    // e.preventDefault();    
  }
  _onHeaderTwoClick(e){
    this.onChange(RichUtils.toggleBlockType(this.state.editorState, 'header-two'));
    // e.preventDefault();    
  }
  _onUnoderedListClick(e){
    this.onChange(RichUtils.toggleBlockType(this.state.editorState, 'unordered-list-item'));
    // e.preventDefault();
  }

  /* レンダリング */
  render() {
    return (
      <div style={styles.root}>
      <h1>Draft.js example</h1>
    {/* Bold */}
      <button onMouseDown={this._onBoldClick.bind(this)}>Bold</button>
    {/* Italic*/}
      <button onMouseDown={this._onItalicClick.bind(this)}>Italic</button>
    {/* H2 */}
      <button onMouseDown={this._onHeaderTwoClick.bind(this)}>H2</button>
    {/* List */}
      <button onMouseDown={this._onUnoderedListClick.bind(this)}>List</button>
    {/* Editor */}
      <div style={styles.editor} onClick={this.focus}>
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
        handleKeyCommand={this.handleKeyCommand}
        onTab={this.onTab} // onTabを結びつける
        ref = "editor"
      />
      </div>
      </div>
    );
  }
}

const styles = {
  root: {
    fontFamily: 'sans-serif',
    padding: 20,
    width: 600,
  },
  editor: {
    fontFamily: 'YuGothic,\'Helvetica\', sans-serif',
    border: '1px solid #ccc',
    cursor: 'text',
    minHeight: 80,
    minWidth: 800,
    padding: 10,
  },
  button: {
    marginTop: 10,
    textAlign: 'center',
  },
};

export default MyEditor;

NestedListの設定

上記でなが～く書きましたが大事なのは以下の部分だけです。

[editor.js]
1. コンストラクタでthis.onTabを_this.onTabにbindする
2. _onTabメソッドの中でRichUtils.onTabによってEditorStateを更新する
3. <Editor>のプロパティonTabにthis.onTabを設定する

[editor.css]
1. public-DraftStyleDefault-depthX (X=0, 1, 2, 3, 4, ...)でデザインを設定する
※editor.cssの中身はDraft.jsについてくるDraft.cssをほぼまるまるコピーしたものです。

editor.js(大事なところバージョン)

import './editor.css'; // NestedListのデザインを入れる
class MyEditor extends React.Component {
  constructor(props) {
　　 .....略......
    // Tab: 深さ+1, Shift+Tab: 深さ-1 の設定の参照
    this.onTab = this._onTab.bind(this);
  }

  /* Tab: 深さ+1, Shift+Tab: 深さ-1 の設定の本体 */
  _onTab(e){
    const newEditorState = RichUtils.onTab(e, this.state.editorState, 4);
    this.onChange(newEditorState);
  }
  .....略.....
  /* レンダリング */
  render() {
    return (
  .....略.....
      <Editor
        ....略....
        onTab={this.onTab} // onTabを結びつける
        ....略....
      />

editor.css

/* リストに深さによってマージン深さ設定 depth0～depth4 */
.public-DraftStyleDefault-depth0 {
  margin-left: 1.5em
}
.public-DraftStyleDefault-depth1 {
  margin-left: 3em
}
.public-DraftStyleDefault-depth2 {
  margin-left: 4.5em
}
.public-DraftStyleDefault-depth3 {
  margin-left: 6em
}
.public-DraftStyleDefault-depth4 {
  margin-left: 7.5em
}

/* リストに深さによってリスト文頭の記号設定 */
/* depth0 */
.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0 {
  list-style-type: disc
}
/* depth1 */
.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1 {
  list-style-type: circle
}
/* depth2～ */
.public-DraftStyleDefault-unorderedListItem { 
  list-style-type: square;
  position: relative
}

まとめ

ここまでで何がまとまったかわかんないけどまとめてみます。

コンストラクタでthis.onTabを_this.onTabにbindする
_onTabメソッドの中でRichUtils.onTabによってEditorStateを更新する
<Editor>のプロパティonTabにthis.onTabを設定する
public-DraftStyleDefault-depthX (X=0, 1, 2, 3, 4, ...)でデザインを設定するためにcssをインポートする

これらを守ればNestedListは使えるみたい。
まあ実装出来てよかった。

参考記事/参考サイト