globocom/megadraft

Toolbar Overlaps ContentEditable Div (from the Left)

ydax opened this issue · 3 comments

ydax commented

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

Megadraft Issue

mogavin commented

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

  • 👍1
mogavin commented

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;
ydax commented

Awesome, thanks for the help, @mogavin .

  • 👍1