import React from "react";
import { createRoot } from "react-dom/client";
import RichTextArea from "../components/RichTextArea";
import readyHandler from "../lib/readyHandler";

class RichText {
  apply() {
    const elems = document.querySelectorAll("textarea.rich");
    elems.forEach((elem: HTMLTextAreaElement) => {
      this.enhance(elem);
    });
  }

  enhance(elem: HTMLTextAreaElement) {
    const container = document.createElement("div");
    elem.parentNode.appendChild(container);
    createRoot(container).render(
      <RichTextArea
        value={elem.value}
        name={elem.name}
        rows={elem.rows}
        id={elem.id}
      />
    );
    elem.parentNode.removeChild(elem);
  }

  start() {
    readyHandler.ready(() => {
      this.apply();
    });
  }
}

export default new RichText();