max-length support in react quill : the values on UI update even if the state has the old value

[raksha-scb]

I want to implement max-length in my editor. If the length exceeds the max-length then i do not update the value in state. Why does not react quill stop updating the UI when the state value is not updated? codepen link

https://codepen.io/anon/pen/Prgjoz

code is somewhat like this: /*

• Simple editor component that takes placeholder text as a prop */ class Editor extends React.Component { constructor (props) { super(props) this.state = { editorHtml: '', theme: 'snow' } this.handleChange = this.handleChange.bind(this) }

handleChange (html) { if (html.length < 30 ){ this.setState({ editorHtml: html }); } }

handleThemeChange (newTheme) { if (newTheme === "core") newTheme = null; this.setState({ theme: newTheme }) }

render () { return (

<ReactQuill theme={this.state.theme} onChange={this.handleChange} value={this.state.editorHtml} modules={Editor.modules} formats={Editor.formats} bounds={'.app'} placeholder={this.props.placeholder} /> <div className="themeSwitcher"> Theme <select onChange={(e) => this.handleThemeChange(e.target.value)}> Snow Bubble Core

) } }

[naminder]

I also have a similar requirement, also is there a way to show the character count?

[pradeepvish1213]

Hi I need this requirement.

[wilson-xarefit]

I need this requirement too, is it IMPLEMENTED?

[ghost]

Has this been implemented as of 2022?

[wicahma]

Hi, for anyone who is still getting the same error, you can limit the data value by using some function and making a condition on it. For me, i limited the input by value size, but you can change it for value length.

here's the code: (oh also, sorry for my bad english)

My React Quill Component

import React, { useState } from "react";
import ReactQuill, { Quill } from "react-quill";
import "react-quill/dist/quill.snow.css";

const EditorComponent = (props) => {
  const [value, setValue] = useState();
  const [limit, setLimit] = useState(false); 
  const [size, setSize] = useState();

  const handleLimit = (e) => {
    const size = new Blob([e]).size / 1000000; // I'm limiting the input based on the string size
    setSize(size);
                // define the limit from the parent component
    if (size <= props.maxDesc) {
      props.value(e); // sending the value to the parent conponent
      setValue(e);
      setLimit(false);
    } else {
      setLimit(true);
    }
  };
  return (
    <>
      <ReactQuill
        value={value}
        onChange={(e) => handleLimit(e)}
        placeholder="Masukkan Isi dari Artikel anda disini..."
      />
      <div className="col-sm-12 d-flex justify-content-between mt-2">
        <div>
          <p className="editor-size-counter">
            Size : {size} / {props.maxDesc} Mb //Tracking the input size
          </p>
        </div>
        
        // for handling the alert message if the input reached the limit
        {limit && (
          <div>
            <p className="editor-message-limit">
              data sudah melebihi limit, anda tidak bisa menambahkan deskripsi lagi.
            </p>
          </div>
        )}

      </div>
    </>
  );
};

export default EditorComponent;

Hope this code can help other people, also, if you still confused, feel free to asked.

[compbyter]

Maybe tihs solution will be useful for you;

<ReactQuill className="w-full mx-auto" value={value.substring(0, 1000)} readOnly={true} theme={"bubble"} />

You attention should on part of this code; "value={value.substring(0, 1000)}"