draft-jsでエディタの入力内容をJSONに保存・復元する方法

draft-js は、Reactでリッチなテキストエディタの実装できる非常にカスタマイズ性の高いフレームワークである。

この記事では、draft-jsのエディタで入力された文書や書式を、ローカルストレージや外部に保存するために JSON形式に変換する方法を紹介する。

準備

まずは普通に draft-jsのコンポーネントを配置した物を作る。

import React from "react";
import { Editor, EditorState } from "draft-js";
import "draft-js/dist/Draft.css";

export default function App() {
  const [editorState, setEditorState] = React.useState(() =>
    EditorState.createEmpty()
  );

  return (
    <div className="App">
      <Editor editorState={editorState} onChange={setEditorState} />
    </div>
  );
}

エディタの内容をJSONに変換する

ローカルストレージや外部にエディタの内容を保存する場合は、後から復元しやすい JSONで保存・復元するのが都合が良い。

draft-jsには、ステートの内容を JSONに変換する convertToRawが用意されているので、まずはそれをインポートする。

import { Editor, EditorState, convertToRaw } from "draft-js";

次に、EditorStateの内容を JSONに変換する関数を書く。今回は変換した JSONをローカルストレージに保存する。

  const saveContent = () => {
    const contentState = editorState.getCurrentContent();
    const raw = convertToRaw(contentState);
    const json = JSON.stringify(raw, null, 2);
    console.log(json);
    localStorage.setItem("savedContent", json);
  };

最後に、保存ボタンを追加する。

  return (
    <div className="App">
      <button onClick={saveContent}>Save JSON</button>
      <Editor editorState={editorState} onChange={setEditorState} />
    </div>
  );

JSONからEditorStateを復元する

今度は、上でローカルストレージに保存したJSONを読み込んで、エディタに復元する処理を書く。今回は画面ロード時に、ローカルストレージに保存してあるJSONを読み込み、エディタに内容を復元する処理を書いてみる。

まず、JSONから ContentState する場合は、convertFromRaw 関数を用いるので import に追加する。

import { Editor, EditorState, convertToRaw, convertFromRaw } from "draft-js";

次に、useEffect を使って画面ロード時に JSONからエディタを復元する処理を追加する。

  useEffect(() => {
    const json = localStorage.getItem("savedContent");
    if (json) {
      const contentState = convertFromRaw(JSON.parse(json));
      const newEditorState = EditorState.createWithContent(contentState);
      setEditorState(newEditorState);
    }
  }, []);

でも

まとめ

draft-jsでエディタに入力された内容（テキスト、書式）を JSON形式に保存および復元する方法を紹介してきました。

まだ、日本語の情報が少ない draft-jsですが、優秀なエディタフレームワークであり、大手SNSなどでも採用されているので、色々勉強していきたいと思います。

最後に念の為、今回作成した保存・復元の全量のソースを掲載しておく。

import React, { useEffect } from "react";
import { Editor, EditorState, convertToRaw, convertFromRaw } from "draft-js";
import "draft-js/dist/Draft.css";

export default function App() {
  const [editorState, setEditorState] = React.useState(() =>
    EditorState.createEmpty()
  );

  useEffect(() => {
    const json = localStorage.getItem("savedContent");
    if (json) {
      const contentState = convertFromRaw(JSON.parse(json));
      const newEditorState = EditorState.createWithContent(contentState);
      setEditorState(newEditorState);
    }
  }, []);

  const saveContent = () => {
    const contentState = editorState.getCurrentContent();
    const raw = convertToRaw(contentState);
    const json = JSON.stringify(raw, null, 2);
    localStorage.setItem("savedContent", json);
  };

  return (
    <div className="App">
      <button onClick={saveContent}>Save JSON</button>
      <Editor editorState={editorState} onChange={setEditorState} />
    </div>
  );
}