その1 準備

今回は丸っとhttps://qiita.com/ksakiyama134/items/b7f0afcd43e7411f898dを参考にします。

とりあえずプロジェクト作成&yarn add

さっそくエディタをつくっていきましょう。とはいえ、Reactが動く環境をまず整えないといけません。create-react-appを使ってプロジェクトを生成します。
$ create-react-app 201812-react-slate-app
$ cd 201812-react-slate-app
Slateをインストールします。Slateはimmutableにも依存しているので、それもインストールします。
$ yarn add slate slate-react immutable

----------

https://qiita.com/ksakiyama134/items/b7f0afcd43e7411f898d

初期化

ディレクトリ構造は

src/
├─ index.js
├─ index.css
├─ App.css
├─ App.js
├─ components/
   ├─ editor.css
   ├─ editor.js

のようにする。

ファイルをいじる

どちらもhttps://qiita.com/ksakiyama134/items/b7f0afcd43e7411f898dを参考にして、

App.js

import React from "react";
import TextEditor from "./components/editor";
import "./App.css";

function App() {
   return <TextEditor / > ;
}

export default App;

components/editor.js

import React from "react";
import { Editor } from "slate-react";
import { Value } from "slate";

const initialValue = Value.fromJSON({
 document: {
   nodes: [
     {
       object: "block",
       type: "paragraph",
       nodes: [
         {
           object: "text",
           leaves: [{ text: "Hello Slate.js!!!" }]
         }
       ]
     }
   ]
 }
});

class TextEditor extends React.Component {
 state = {
   value: initialValue
 };

 onChange = ({ value }) => {
   this.setState({ value });
 };

 render() {
   return (
     <Editor
       value={this.state.value}
       onChange={this.onChange}
       renderMark={this.renderMark}
     />
   );
 }
}

export default TextEditor;

のようにしておく。

onKeyDownは今は使わないので削除している。