0

下記のページを参考に、Next.jsでreact-draft-wysiwygを導入しようと考えています。

ブラウザ上で動くリッチなテキストエディタを、React Draft Wysiwygを使って手軽に実装する

実現したいこと

react-draft-wysiwygを動かして、入力内容を const [editorState, setEditorState] = useState(""); で受け取りたい

発生している問題・エラーメッセージ

エラーではないですが、なぜか
const [editorState, setEditorState] = useState("");
を記述し、
<Editor editorState={editorState} 〜省略〜

を追加すると、本番環境とローカル環境で記入できなくなります。(vercelで確認できます。)
このusestateがないと値を受け取れないので、実装したいのですが、原因がまだ分かっていません。
分かる方がいれば教えて頂きたいです。
よろしくお願いします。

https://sample-file.vercel.app/

github
https://github.com/takoyan33/sample-file

該当のソースコード

JavaScript

import React, { useCallback, useContext, useEffect, useState } from "react";
import dynamic from "next/dynamic";

const Editor = dynamic(
  () => import("react-draft-wysiwyg").then((mod) => mod.Editor),
  { ssr: false }
);

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

import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

export default function Home() {
  const [editorState, setEditorState] = useState("");

  const handleImageUpload = useCallback(async (file) => {
    return await axios
      .post
      // fileをアップロードし、アップロード後の画像のurlを返す処理
      ()
      .then((response) => {
        return { data: { link: response } };
      })
      .catch((error) => {
        return error;
      });
  }, []);

  console.log(editorState);

  return (
    <div className="container my-5">
      <Editor
        editorState={editorState}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        editorStyle={{
          border: "solid 1px lightgray",
          padding: "5px",
        }}
        localization={{ locale: "ja" }}
      />
    </div>
  );
}

1 件の回答 1

0

draft-js のバージョンの問題ではないでしょうか?

react-draft-wysiwyg の公式ドキュメントでは、
draft-js 0.10.x が必要とかいてありました。

https://jpuri.github.io/react-draft-wysiwyg/#/docs

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。