Open sadiqhasanrupani opened 10 months ago
Source code:
import React, { useState } from "react"; import { EditorState } from "draft-js"; import { Editor } from "react-draft-wysiwyg"; import { convertToHTML } from "draft-convert"; //^ styles import styles from "./RichTextEditor.module.css"; import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css"; const toolbarConfig = { fontFamily: { visible: true, }, inline: { visible: true, inDropdown: false, bold: { visible: true }, italic: { visible: true }, underline: { visible: true }, strikeThrough: { visible: true, icon: "xxx.png" }, monospace: { visible: true }, }, blockType: { visible: true }, fontSize: { visible: true }, list: { visible: true, inDropdown: true, unordered: { visible: true }, ordered: { visible: true }, indent: { visible: true }, outdent: { visible: true }, }, textAlign: { visible: true, inDropdown: true, left: { visible: true }, center: { visible: true }, right: { visible: true }, justify: { visible: true }, }, colorPicker: { visible: true }, link: { visible: true, inDropdown: true, addLink: { visible: true }, removeLink: { visible: true }, }, image: { visible: true, fileUpload: true, url: true, }, history: { visible: true, undo: { visible: true }, redo: { visible: true }, }, }; const RichTextEditor = () => { const [editorState, setEditorState] = useState(EditorState.createEmpty()); return ( <div className={styles["draft-editor"]}> <Editor editorState={editorState} onEditorStateChange={setEditorState} wrapperClassName="wrapper-class" editorClassName="editor-class" toolbarClassName="toolbar-class" placeholder="Write the description here." toolbarStyle={{ border: "1px solid #ccc", borderRadius: "0.313rem", }} editorStyle={{ padding: "0.625rem", fontFamily: "montserrat", border: "1px solid #ccc", marginTop: "1rem", backgroundColor: "#fff", borderRadius: "0.625rem", minHeight: "10rem", boxShadow: "0px 2px 4px 0px hsla(0, 0%, 0%, 0.451)", }} toolbar={toolbarConfig} /> </div> ); }; export default RichTextEditor;
preview video:
https://github.com/jpuri/react-draft-wysiwyg/assets/76765939/b028e9f5-725f-45b8-b689-77ccec1bc4ae
I found solution
Remove
<React.StrictMode> <App /> </React.StrictMode>
to <App />
<App />
taweewat-tk
Thank You, saved me from 2 days googling!
Font, heading, font size, indent, emoji, color picker and all other functionality is not working only the inline part, order and unorder list, alignments, and undo and redo are working
Source code:
preview video:
https://github.com/jpuri/react-draft-wysiwyg/assets/76765939/b028e9f5-725f-45b8-b689-77ccec1bc4ae