Giters

RIP21 / react-simplemde-editor

React wrapper for simplemde (easymde) markdown editor

Home Page:https://react-simplemde-edtior.netlify.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

lost focus when using onChange

rafipiccolo opened this issue · comments

commented

i use nextjs, and i intalled the latest version : react-simplemde-editor 5.0.1
i lose focus when i type and i had registered onChange.

issue #150 speaks about the same problem but i use class, not hooks.

sample code can be this :

import { withAuthSync } from '../utils/auth.js';
import React, { Component } from 'react';
import Layout from '../components/Layout.js';
import Head from 'next/head';
import PropTypes from 'prop-types';

import dynamic from 'next/dynamic';
const SimpleMDE = dynamic(() => import('react-simplemde-editor'), {
    ssr: false,
});

class Editor extends Component {
    static propTypes = {
        me: PropTypes.object,
        post: PropTypes.object,
    };

    constructor(props) {
        super(props);
        this.state = {
            content: 'content',
        };
    }


    render() {
        console.log('render', this.state);

        return (
            <Layout me={this.props.me}>
                <Head>
                    <title>{this.state.name || 'editor'}</title>
                    <link href="https://unpkg.com/easymde/dist/easymde.min.css" rel="stylesheet" />
                    <link href="https://unpkg.com/react-toastify/dist/ReactToastify.css" rel="stylesheet" />
                </Head>
                <SimpleMDE
                    value={this.state.content}
                    onChange={(value) => this.setState({ content: value })}
                    options={{ indentWithTabs: false, tabSize: 4 }}
                />

            </Layout>
        );
    }
}

export default withAuthSync(Editor);
commented

Try to memoize options (put them in class field) and onChange handler (same).

Other than that, please, create a reproduction on codesandbox.

commented

But, it was working with version 4.1.3. i switched back to it to double check and have a working version.

Is this a breaking change ? Should i switch to hooks to make this module work now ?
else, do you have an exemple for memoizing ? i see many ways of doing it and i'm not sure about which one you mean.

I created a codesandox as you requested. i have same error, although i tried using hooks.
when i type into the textbox i lose focus.
https://codesandbox.io/s/objective-spence-mv5yp?file=/src/App.js

can you help me pointing the issue ? or is it really a bug.

commented

aaah, i finally understood what you mean by memoizing.
thanks it works now.

commented

@rafipiccolo glad you fixed it.
Although I think I can create a bug/feature that will keep focus while typings AND changing options based on the value...
But unsure it's an easy task, nor needed, as, well, options shall not be changed on each render as it will be a huge performance hit (as on each value change there will be a new instance of editor created.