Toolbar default functionality is not working.

[sadiqhasanrupani]

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:

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:

2023-08-27-21-07-31.mp4

[taweewat-tk]

I found solution

Remove

<React.StrictMode>
  <App /> 
</React.StrictMode>

to
<App />

[Atom1er]

taweewat-tk

Thank You, saved me from 2 days googling!