Editor: Newline added (core QuillJS Issue)

[Zinoberous]

Describe the bug

I've identified a persistent issue with the PrimeReact Editor, which seems to stem from its underlying use of Quill, similar to an issue reported for ngx-quill (see KillerCodeMonkey/ngx-quill#357). When I insert an HTML string that combines text and a list into the editor's value, Quill automatically inserts an extra newline between the text and the list. Subsequently, editing and saving this content results in the newline being included in the onTextChanged event's output. This leads to an accumulation of newlines with each save and reload cycle, increasing the space between the text and list unnecessarily. This behavior persists and compounds, adding one additional newline with every save and load operation

Reproducer

https://stackblitz.com/edit/dinceg?file=src%2FApp.tsx

PrimeReact version

latest

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

import React, { useState } from 'react';
import { Editor, EditorTextChangeEvent } from 'primereact/editor';

export default function BasicDemo() {
  const [text, setText] = useState<string>('<p>Test</p><ul><li>a</li><li>b</li></ul>');

  return (
    <div className="card">
      <Editor
        value={text} // gets interpreted as <p>Test</p><p><br/></p><ul><li>a</li><li>b</li></ul>
        onTextChange={(e: EditorTextChangeEvent) => {
          console.log(e);
          setText(e.htmlValue);
        }}
        style={{ height: '320px' }}
      />
    </div>
  );
}

Expected behavior

No response

[melloware]

I assume this is a Quill issue not a PrimeReact issue?

[Zinoberous]

After conducting several tests, I have determined that the issue stems from the 1.x version series of Quill. However, I'm facing challenges with integrating the pre-release 2.x version of Quill into PrimeReact. Specifically, the main problem is that I can no longer set the 'value' property of the PrimeReact Editor when using Quill v2.x. I'm unsure if this integration is feasible or how to proceed with it.

Quill v1.x:

Playground => https://v1.quilljs.com/playground/

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'  // or 'bubble'
});

const value = '<div>test</div><ul><li>1</li><li>2</li></ul>';

const delta = quill.clipboard.convert(value);

console.log(delta)

quill.setContents(delta, 'silent');

Qull v2.x:

Playground => https://quilljs.com/playground/snow

const quill = new Quill('#editor', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block'],
    ],
  },
  placeholder: 'Compose an epic...',
  theme: 'snow', // or 'bubble'
});

const value = '<div>test</div><ul><li>1</li><li>2</li></ul>';

const delta = quill.clipboard.convert({ html: value });

console.log(delta)

quill.setContents(delta, 'silent');

[melloware]

See #5960