Is it possible to implement this in React?

https://codepen.io/quill/pen/qNJMYB

I’m trying to implement this codepen in React Typescript but I’m getting so many bugs to the extent where if I post the code here, I think it’ll actually set people 10 steps back.

How do I go about re-implementing this in React from the start? I would put a bounty but i don’t have enough :/

this is the last stable version of my code

import React, { useRef, useEffect } from 'react';
import Quill, { RangeStatic } from 'quill';
import 'quill/dist/quill.snow.css';

interface Props {
  content: string;
  onChange: (value: string) => void;
}

const Editor2: React.FC<Props> = ({ content, onChange }) => {
    const editorRef = useRef<HTMLDivElement>(null);
    const toolbarRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (editorRef.current) {
            const editor = new Quill(editorRef.current, {
                theme: 'snow',
                modules: {
                    
                    toolbar: [
                        ["bold", "italic", "underline", "strike"],
                        ["blockquote", "code-block"],
                        [{ header: 1 }, { header: 2 }],
                        [{ list: "ordered" }, { list: "bullet" }],
                        [{ script: "sub" }, { script: "super" }],
                        [{ indent: "-1" }, { indent: "+1" }],
                        [{ direction: "rtl" }],
                        [{ size: ["small", false, "large", "huge"] }],
                        [{ header: [1, 2, 3, 4, 5, 6, false] }],
                        [{ color: [] }, { background: [] }],
                        [{ align: [] }],
                        ["clean"],
                    ],
                },
            });

            editor.on('text-change', () => {
                onChange(editor.root.innerHTML);
            });

            editor.root.style.backgroundColor = 'black';

            editor.root.addEventListener('mouseup', () => {
                const selection = editor.getSelection() as RangeStatic;
                if (selection && selection.length > 0) {
                    toolbarRef.current?.classList.add('show-toolbar');
                    // toolbarRef.current &&  toolbarRef.current?.style.top = `${selection.y + selection.height}px`;
                    // toolbarRef.current && toolbarRef.current.style.left = `${selection.x + selection.width / 2}px`;
                } else {
                    toolbarRef.current?.classList.remove('show-toolbar');
                }
            });

            editor.root.addEventListener('keydown', () => {
                toolbarRef.current?.classList.remove('show-toolbar');
            });

            editor.setContents(editor.clipboard.convert(content), 'silent');
        }
    }, []);

    const handleLink = () => {
        const url = window.prompt('Enter the URL');
        if (url) {
            const selection = (window as any).quill.getSelection() as RangeStatic;
            if (selection) {
                (window as any).quill.format('link', url);
            }
        }
    };

    return (
        <div>
            <div ref={toolbarRef} className="editor-toolbar">
                <button onClick={handleLink}>Link</button>
            </div>
            <div ref={editorRef} />
        </div>
    );
};

export default Editor2;

I’m a bit lost on how to implement the classes/blots.