Toolbar Overlaps ContentEditable Div (from the Left)

[Davis Jones]

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

1. Installed Megadraft via npm
2. Built functional React component using Megadraft
3. 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

[mogavin]

Hi @ydax ! We will analyze your issue and give you feedback soon. Thanks !

[mogavin]

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;

[Davis Jones]

Awesome, thanks for the help, @mogavin .