Any dropdown options not working with react-draftjs-wysiwyg and next.js typescript

202 Views Asked by At

I am configuring react-draftjs-wysiwyg with next.js. In the toolbar i can see every options. But dropdown options not working. What can be the possible reason? I have included code snippet below.

/* eslint-disable @next/next/no-img-element */

import React, { useState } from "react";

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

import { EditorState, convertToRaw, ContentState } from "draft-js";
import draftToHtml from "draftjs-to-html";

const Blog = () => {
  const [noticeDescription, setNoticeDescription] = useState<EditorState>(
    EditorState.createEmpty()
  );

  return (
    <div className="field">
      <label htmlFor="description">Description</label>
      <Editor
        editorState={noticeDescription}
        wrapperClassName="demo-wrapper"
        editorClassName="demo-editor"
        onEditorStateChange={(newState) => {
          setNoticeDescription(newState);
        }}
        toolbar={{
          options: [
            "inline",
            "blockType",
            "fontSize",
            "fontFamily",
            "list",
            "textAlign",
            "colorPicker",
            "link",
            "embedded",
            "emoji",
            "image",
            "history",
          ],
          inline: { inDropdown: true },
          list: { inDropdown: true },
          textAlign: { inDropdown: true },
          link: { inDropdown: true },
          history: { inDropdown: true },
          image: {
            urlEnabled: true,
            previewImage: true,
            alt: { present: false, mandatory: false },
          },
        }}
      />
    </div>
  );
};

export default Blog;

I am using "next": "13.4.5" and "react-draft-wysiwyg": "^1.15.0". I have found some solutions for react but those are not working in next.js.

0

There are 0 best solutions below