RIP21 / react-simplemde-editor

React wrapper for simplemde (easymde) markdown editor
https://react-simplemde-edtior.netlify.com/
MIT License
766 stars 103 forks source link

Cursor disappears after typing a letter #188

Closed ANJALI2980 closed 1 year ago

ANJALI2980 commented 2 years ago

React : v17.0.2 Simplemde : v5.0.2

Description: I am very new to Simplemde.I used Simplemde in my react project.when I am trying to type into text area of Simplemde the cursor disappears after typing a single letter,to type next letter I had to click on textarea to bring back cursor. I tried but couldn't find solution.

Code: imports: import React, { Component } from 'react'; import SimpleMDE from "react-simplemde-editor"; import "easymde/dist/easymde.min.css";

onBodyChange = (value) => { this.setState({ body: value, }); };

<SimpleMDE onChange={this.onBodyChange} options={{ hideIcons: ["preview","side-by-side","fullscreen"] }}
/>

after before

RIP21 commented 2 years ago

@ANJALI2980 hey. I see that your code example is not full. So I cannot help much. I need more.

ANJALI2980 commented 2 years ago

@RIP21 my issue is mentioned in issue #164 .you suggested to memoize options but I am not sure how to do that,please help!

RIP21 commented 2 years ago

Take a look at the README.md.

Memoize = use useMemo hook. E.g. const options = useMemo(() => { return { ideIcons: ["preview","side-by-side","fullscreen"] }}, []) And then options={options} below in JSX.

In case you're using class component, you need to have property like

editorOptions = {
    hideIcons: ["preview","side-by-side","fullscreen"]
}

inside your class body. Then you'll use it in the component the same way you use onChange handler. E.g. options={this.editorOptions}

jcwrightson commented 2 years ago

I had the same problem. Fixed by setting autofocus: true in the editor options.

felixroos commented 2 years ago

a simpler solution: it will also work if you define the options statically outside of the component, as the object will stay the same:

const mdeOptions = {/*...*/}

function MyComponent() {
  /* ... */
  return (<SimpleMDE options={mdeOptions} value={value} onChange={onChange} />)
}
Hassan-Khan16 commented 3 months ago

I had the same problem. Fixed by setting autofocus: true in the editor options.

Yoooo, You helped me a lot. Also thank you @RIP21 for the amazing library. I was using ReactMde and switch to simpleMDE and loved it