RTE.js

import React, { useEffect, useRef, useState } from "react";

const Editor = ({ tooltip }) => {
  const [data, setData] = useState("");
  const [options, setOptions] = useState([
    { name: "bold", toggled: false },
    { name: "italic", toggled: false },
    { name: "underline", toggled: false },
  ]);
  const editorRef = useRef();
  //console.log(data);

  //Component ==============================
  return (
    <>
      <div className="bg-inherit w-full h-full flex flex-col">
        <div
          role="toolbar"
          className="flex-[1] flex min-h-[2.5rem] w-full border-b border-slate-300 dark:border-[#33415596] text-slate-500 dark:text-slate-400 overflow-hidden"
        >
          <button
            type="button"
            onClick={() => {
              setOptions(
                options.map((option) =>
                  option.name === "bold"
                    ? {
                        name: option.name,
                        toggled: option.toggled === false ? true : false,
                      }
                    : { name: option.name, toggled: option.toggled }
                )
              );
              console.log(editorRef.current.children);
              let range = new Range(); 
              let selectedWeight = getComputedStyle(window.getSelection().anchorNode.parentElement).fontWeight
              console.log(
                (window.getSelection().getRangeAt(0))
              );

              if (
                (window.getSelection().toString() !== "" &&
                  options.filter((option) => option.name === "bold")[0]
                    .toggled === false &&
                  !(Number(selectedWeight) > 400 ||
                selectedWeight === "bold" ||
                selectedWeight === "bolder")
              )) {
                let selection = window.getSelection();
                let newNode = document.createElement("b");
                selection.getRangeAt(0).surroundContents(newNode);  
                setData(editorRef.current.innerHTML);
              } else if (
                window.getSelection().toString() === "" &&
                !options.filter((option) => option.name === "bold")[0].toggled
              ) {
              }
            }}
            className={`outline-none focus:outline-none hover:bg-slate-50 dark:hover:bg-slate-700 text-sm font-bold h-full w-12 flex justify-center items-center border-r border-slate-300 dark:border-[#33415596] ${
              options.filter((option) => option.name === "bold")[0].toggled
                ? "text-slate-800 dark:text-slate-300"
                : ""
            }`}
          >
            B
          </button>
        </div>
        {/**Text Area =============================== */}
        <div
          role="textbox"
          autoComplete="off"
          spellCheck="false"
          autocorrect="off"
          ref={editorRef}
          contentEditable={true}
          onInput={() => {
            setData(editorRef.current.innerHTML);
              if (
                editorRef.current.children.length <= 0 ||
                editorRef.current.children[0] === "br"
              ) {
                editorRef.current.innerHTML = "<p>c</p>";
                let range = new Range();
                range.setStart(editorRef.current.firstChild.firstChild, 0);
                range.setEnd(editorRef.current.firstChild.firstChild, 1);
                document.getSelection().removeAllRanges();
                document.getSelection().addRange(range);
              }
          }}
          suppressContentEditableWarning={true}
          className={`flex-[8] min-h-[5rem] w-full p-2 outline-none focus:outline-none text-slate-800 dark:text-slate-400 text-sm relative before:content-['Type_here_...'] ${
            data === "" || data === " " ? "before:flex" : "before:hidden"
          } before:absolute before:h-10 before:w-full before:text-slate-500 before:text-xs before:tracking-wide`}
        >
        </div>
      </div>
    </>
  );
};

const Solutions = () => {
  return (
    <div className="w-[30rem] h-[30rem] bg-white dark:bg-slate-800 rounded p-4 py-20 flex justify-center items-center">
      {" "}
      <div className="w-full h-full border rounded">
        <Editor />
      </div>
    </div>
  );
};

export default Solutions;