How do I set Quill output to be JSON/delta instead of html?

Question

What do I need to do to set Quill's content or output to be JSON/delta instead of HTML?

I can't believe I'm asking such a simple question but I can't find the answer anywhere.

There's nothing about how to set the format in either the QuillJS doc or react-quill doc.

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

export const Comment = () => {
  const [value, setValue] = useState('');

  function submit(e) {
      e.preventDefault();
      console.log(value) # This currently returns HTML instead of JSON
  }

  return (
    <>
        <ReactQuill theme="snow" value={value} onChange={setValue}/>
        <p>{value}</p>
        <button onClick={submit}>Submit</button>
    </>
  );
}

Answer 1

It looks like the onChange prop is a function that has the HTML contents as the first argument, which will be the value used by setState. You'll want to define a custom function that sets value to editor.getContents(), which returns a Delta representing the current document.

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

export const Comment = () => {
  const [value, setValue] = useState('');

  function submit(e) {
      e.preventDefault();
      console.log(value);
  }

  // onChange expects a function with these 4 arguments
  function handleChange(content, delta, source, editor) {
      setValue(editor.getContents());
  }

  return (
    <>
        <ReactQuill theme="snow" value={value} onChange={handleChange}/>
        <p>{value}</p>
        <button onClick={submit}>Submit</button>
    </>
  );
}

Answer 2

As above denoted answer by person_v1.32.The handleChange method receives four params second param is the delta you can simply use that to get delta. You can send it to the database or in your react state whatever suits you.

 // onChange expects a function with these 4 arguments
  function handleChange(content, delta, source, editor) {
      setValue(delta);
  }