onChange is called once per character in edit window

[rwlaschin]

Version

"@toast-ui/react-editor": "^1.0.0",

Test Environment

mac mojave 10.14.5 chrome 80.0.3987.100 (Official Build) (64-bit)

Current Behavior

Using the onChange function is called once per character in edit window

ie. type 'a' -> onChange is called once type 'a' (now you have aa) -> onChange is called twice type 'a' (now you have aaa) -> onChange is called n times ... if you have 20 characters '12345678901234567890 and type 'a' -> onChange is called a lot of times

Here's a image with 63 calls with only adding an 'a' to the string above.

I've had this installed for 9 months with no changes and recently updated and now I am seeing this issue. It's possible this was a latent issue due to my setup. If you see something wrong with my setup please let me know.

This is a live app so I can show you. Let me know when you have time.

Here's my component

import React from 'react';
import PropTypes from 'prop-types';

import 'codemirror/lib/codemirror.css';
import 'tui-editor/dist/tui-editor.min.css';
import 'tui-editor/dist/tui-editor-contents.min.css';
import 'tui-editor/dist/tui-editor-extTable';
import {Editor} from '@toast-ui/react-editor';
import {Typography} from '@material-ui/core';

import './index.css';

class WhlEditor extends React.Component {
   constructor(props) {
      super(props);

      this.editorRef = React.createRef();
   }

   static propTypes = {
      onChange: PropTypes.func,
      toolbarItems: PropTypes.arrayOf('string'),
      content: PropTypes.string,
      maxLength: PropTypes.number,
   };

   state = {};

   onChange = event=> {
      const content = this.editorRef.current.getInstance().getValue();

      if (content == this.state.content) {
         // skip when the same
         console.info('same...');
         return;
      }

      console.info('onChange content', content,event);
      this.setState({content});
      (typeof this.props.onChange === 'function')  && this.props.onChange(content, this.state.content);

   };

   toolbarItems = [
      'heading',
      'bold',
      'italic',
      'underscore',
      'strike',
      'divider',
      'hr',
      'quote',
      'divider',
      'ul',
      'ol',
      'task',
      'indent',
      'outdent',
      'divider',
      'table',
      'image',
      'link',
      'divider'
      // 'code',
      // 'codeblock'
   ];

   ToastEd = ()=> {
      const self = this;
      const {toolbarItems = this.toolbarItems, content} = self.props;
      return (
         <>
            <Editor
               ref={this.editorRef}
               previewStyle="none"
               height="25vh"
               width="80vw"
               initialEditType="wysiwyg"
               initialValue={content}
               onChange={ self.onChange }
               onFocus={ self.updateMaxLength }
               useCommandShortcut={true}
               toolbarItems={toolbarItems}
               exts={[
                  {
                     name: 'chart',
                     minWidth: 100,
                     maxWidth: 600,
                     minHeight: 100,
                     maxHeight: 300
                  },
                  'scrollSync',
                  'colorSyntax',
                  'uml',
                  'mark',
                  'table'
               ]}
            />
            { this.props.maxLength > 0 &&
               <Typography
                  id="editor-maxlength"
                  align="right"
                  style={ {
                     position: 'relative',
                     height: '0px',
                     bottom: '35px',
                     right: '5px'
                  } }
               >
                  { this.props.maxLength - (content && content.length || 0) }
               </Typography>
            }
         </>
      );
   };

   render() {
      return <this.ToastEd {...this.props} />;
   }
}

export default WhlEditor;

Expected Behavior

• onChange should be called only once per change

[rwlaschin]

One more thing that I forgot. My app created two instances of the editor because I have multiple places this is being used. One is for editing tips the other is for articles.

[C-likethis123]

Hello, I believe that this is normal behaviour. onChange is being called each time it is changed. When you add a new character in the editor, that newly added character is registered as a change to the function.

What problems are you facing when onChange is being called each time a new character is added?