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 (

  Theme 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)}"

[gabrirb23]

This worked for me, which also works when pasting. I set the limit to 600 in my case:

                    <ReactQuill
                        value={formData.field_description}
                        onChange={(content) => {
                            // Strip HTML tags to count the number of plain text characters
                            const plainText = content.replace(/<\/?[^>]+(>|$)/g, "");

                            // If the content is within the limit, update the state
                            if (plainText.length <= 600) {
                                setFormData({ ...formData, field_description: content });
                            } else {
                                // If the content exceeds the limit, do not update the state (keeping it at 600 chars)
                                setFormData({ ...formData, field_description: formData.field_description });
                            }
                        }}
                        modules={{
                            toolbar: [
                                ['bold', 'italic', 'underline'],
                                ['clean']
                            ]
                        }}
                        formats={['bold', 'italic', 'underline']}
                        style={{
                            fontFamily: 'PT Sans, sans-serif',
                            color: theme.palette.primary.main,
                            minHeight: '100px',
                        }}
                    />