I tried to use react-draft-wysiwyg
using the docs
Some icons are displayed but not working : block type
, font
, font size
,pickerColor
(the dropdowns are not working). For example, the font size
is set to 16 by defauft, but I can’t change it…
import { Editor } from "react-draft-wysiwyg"; import { EditorState } from "draft-js"; import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css"; const TabContent = ({ name, typeProof }) => { const [text, setText] = useState( () => EditorState.createEmpty(),); return ( <> <SafeAreaView> <Editor editorState={text} onEditorStateChange={setText} wrapperClassName="wrapperClassName" editorClassName="editorClassName" toolbarClassName="toolbarClassName" placeholder="Enter your text here:" style={{ //some styles }} toolbar={{ options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'embedded', 'remove', 'history'], inline: { inDropdown: true }, blockType: { inDropdown: true }, fontSize: { inDropdown: true }, fontFamily: { inDropdown: true }, list: { inDropdown: true }, textAlign: { inDropdown: true }, colorPicker: { inDropdown: true }, embedded: { inDropdown: true }, remove: { inDropdown: true }, history: { inDropdown: true }, }} /> </SafeAreaView> </> ); }; export default function Tabs({ data }) { return ( <TabsComponent forceRenderTabPanel> <TabList> {data.map(({ name }, i) => ( <Tab key={name}>Question {i + 1}</Tab> ))} </TabList> {data.map(({ name, typeProof }) => ( <TabPanel key={name}> <TabContent {...{ name, typeProof }} /> </TabPanel> ))} </TabsComponent> ); }
Advertisement
Answer
Well that’s weird, I have no explanation for that but I’ve changed only in index.js
:
import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import App from "./App"; const rootElement = document.getElementById("root"); const root = createRoot(rootElement); root.render( <StrictMode> <App /> </StrictMode> );
by :
import "./index.css"; import App from "./App"; import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById("root") );
Is there an explanation ? I would be glad to understand that…