react-quill breaking down initially passed wrapped elements into separate elements

Question

I am passing the initial state to quill editor is something like this

<blockquote class="quote-aufjd">
      <div>
        On Wednesday, September 2nd 2020 <a rel="noopener noreferrer" href="mailto:mail">mail</a> wrote: <br>
        <div>This is my reply</div>
        </div>
</blockquote>

But when the onChange handler is called it is breaking the above passed html to

<blockquote>On Wednesday, September 2nd 2020 
<a href="mailto:nikhil.ponduri@gmail.com" rel="noopener noreferrer" target="_blank">mail</a> wrote:</blockquote>
<blockquote>ok</blockquote>
<blockquote><br></blockquote>

is there any way that I can stop quill breaking down initially passed html ??

what onChange handler are we talking about here? Do you mean to say when you save code on quill editor it changes the nested dom element structure? — Tarun Kolla, Sep 09 '20 at 05:00
Yes. Exactly. It is breaking down nested elements in to separate elements. — Nikhil Ponduri, Sep 09 '20 at 05:51

score 0 · Answer 1 · answered Sep 08 '20 at 18:50

You mention that when onChange is called you get an error and yet you do not post the code of that function in your question! Anyways, I've tried to answer and was not able to reproduce the issue. The following code works fine for me, let me know,

import React from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import "./styles.css";

const html = `
  <blockquote class="quote-aufjd">
    <div>
        On Wednesday, September 2nd 2020
        <a rel="noopener noreferrer" href="mailto:mail">mail</a>
        wrote:
        <br>
        <div>This is my reply</div>
    </div>
  </blockquote>
`;

export default function App() {
  const [text, setText] = React.useState(html);

  return (
    <div className="App">
      <h1>Quill Editor</h1>
      <ReactQuill value={text} onChange={setText} />
    </div>
  );
}

hey @sidthesloth I am not getting any error. Consider I am passing initial value as ```
I am parent
I am child
``` but when the onChange hadler is called quill js formating this html in to something like this ```
I am parent
I am child
```. How can I stop quill doing this. It is breaking down nested elements in to separate elements — Nikhil Ponduri, Sep 09 '20 at 04:21

score 0 · Answer 2 · answered Sep 13 '20 at 10:17

From this answer, this post by one of the Quill authors, and the outrageous amount of dislikes on some posts this issue has: we can learn that Quill does not really support Arbitrary HTML therefore, the requirement you have mentioned in your question will get more complex if you try to force it on Quill even if it sounds very trivial.

At the end of the day Quill is just one of many tools that developers can use to provide solutions. With that said, I suggest you look into using contentEditable elements if you must use Arbitrary HTML.

If you really must use Quill, I think that one solution to this is if the HTML is coming from another data source, since you won't be able to rely on the data returned by Quill's onChange or even the actual innerHTML of the WYSIWYG content.

export default function App() {
  const [text, setText] = React.useState(html);

  return (
    <>
      <textarea value={text} onChange={(e)=>setText(e.target.value)}/>
      <ReactQuill value={text} />
    </>
  );
}

react-quill breaking down initially passed wrapped elements into separate elements

2 Answers2