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.