Toolbar Overlaps ContentEditable Div (from the Left)
ydax opened this issue · comments
Expected Behavior
On install, the toolbar should be offset from the content editable div.
Current Behavior
Toolbar overlays the editing div, conflicting with text.
Steps to Reproduce
- Installed Megadraft via npm
- Built functional React component using Megadraft
- Imported Megadraft component into App compnent, rendered through index.html (note: App is using MaterializeCSS for default styling)
Browser, device, and OS
Chrome, rendering via create-react-app
/ dev server
Screenshots
Hello @ydex. We reproduced the mentioned error and there is really a flaw in our documentation. We apologize and soon we will update it. Below is an example to solve your question:
import React, { useState } from 'react';
import { MegadraftEditor, editorStateFromRaw } from 'megadraft';
//1 - Import megadraft.css
import 'megadraft/dist/css/megadraft.css'
function App() {
const [editorState, setEditorState] = useState(editorStateFromRaw(null));
const onChange = editorState => {
setEditorState(editorState)
};
return (
//2 - Add some margin left to show plugins sidebar
<div style={{marginLeft: 80}}>
<MegadraftEditor
editorState={editorState}
onChange={onChange}
placeholder="Hello, this is some placeholder text"
/>
</div>
)
}
export default App;
Awesome, thanks for the help, @mogavin .