Trumbowyg React input data typed reverse order

Question

I'm now integrating Trumbowyg editor into react project.

const [content, setContent] = useState();

return (
    <Trumbowyg
        onChange={e => setContent(e.target.innerHTML)}
        data={content}
    />
)

But for every keypress event, the cursor moves to the start position, so the content becomes reversed

I typed "start", but they are in reversed order, you see.

Answer 1

You dont need to pass content to Trumbowyg, just remove it

<Trumbowyg
        onChange={e => setContent(e.target.innerHTML)}
/>

Answer 2

RichTextEditor.js

import React, { useEffect, useState } from "react";
import 'react-trumbowyg/dist/trumbowyg.min.css'
import dynamic from "next/dynamic";

const Trumbowyg = dynamic(import("react-trumbowyg"),
  {
    ssr: false,
  }
);


export default ({ initialHtml, onChange }) => {
  const [value, setValue] = useState("");

  useEffect(() => {
    console.log({initialHtml})
    if (value) return;
    setValue(initialHtml);
  }, [initialHtml])

  const onHtmlChange = (html) => {
    onChange(html);
  }

  return (
    <Trumbowyg
      id='react-trumbowyg'
      data={value}
      // dir="ltr"
      onChange={(e) => { onHtmlChange(e.target.innerHTML) }}
      buttons={
        [

          // ['viewHTML'],
          // ['formatting'],
          ['strong', 'em', 'del'],
          ['superscript', 'subscript'],
          ['link'],
          // ['image'], // Our fresh created dropdown
          ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
          ['unorderedList', 'orderedList'],
          ['horizontalRule'],
          ['removeformat'],
          ['fullscreen']
        ]
      }
    />
  )
}

Just copy and use!

NB: I've used Next.js here