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>
);
}
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...