Is it possible to make a contentEditable div have a fixed height in React.js?

Question

I have this contentEditable div and I need it to have a fixed size/capacity. The div should not keep making new lines if it reaches the capacity and the user shouldn't be able to keep typing in the div. Ex. if the height is 600px, and the user keeps spamming enter to make new lines at some point the user will press the enter button and a new line will not show up because they reached the capacity of the contentEditable div. An analogy would be Google Docs, when the user reaches the end of the page, a new page pops up below except for my purposes I don't need anything to happen after the user reaches the end of the contentEditable div.

This is my code so far there shouldn't be any need to have an overflow though since my div will have a fixed capacity,

   <div
        ref={contentEditableRef}
        contentEditable
        className="content-to-print"
        style={{
          padding: "20px",
          color: changeToDarkMode === "true" ? "white" : "black",
          backgroundColor: "none",
          overflow: "hidden",
          fontSize: "16px",
          fontFamily: "Arial, sans-serif",
          textAlign: "left",
          top: "80px",
          outline: "none",
          height: "1020px",
          border:'1px solid black',
        }}
     </div>

Answer 1

Let's say we have a EditableDiv component that uses a ref to reference the div named contentEditable and a useEffect hook to handle keydown and paste events.

The handleKeyDown function prevents the Enter key from adding new lines if the content height exceeds or equals the maximum height and the handlePaste function handles pasting content and trims it if the content height exceeds the maximum height.

code Implementation:

const EditableDiv = () => {
  const editableDivRef = useRef(null);

  useEffect(() => {

    const handleKeyDown = (event) => {
      if (event.key === 'Enter') {
        const currentHeight = editableDivRef.current.scrollHeight;
        const maxHeight = editableDivRef.current.clientHeight;

        if (currentHeight >= maxHeight) {
          event.preventDefault();
        }
      }
    };


    const handlePaste = (event) => {
      event.preventDefault();
      const text = event.clipboardData.getData('text/plain');
      document.execCommand('insertText', false, text);

      if (editableDivRef.current.scrollHeight > editableDivRef.current.clientHeight) {
        trimContent(editableDivRef.current);
      }
    };


    const trimContent = (div) => {
      while (div.scrollHeight > div.clientHeight && div.innerHTML.length > 0) {
        div.innerHTML = div.innerHTML.slice(0, -1);
      }
    };

    const div = editableDivRef.current;
    div.addEventListener('keydown', handleKeyDown);
    div.addEventListener('paste', handlePaste);

    return () => {
      div.removeEventListener('keydown', handleKeyDown);
      div.removeEventListener('paste', handlePaste);
    };
  }, []);

  return (
    <div
      ref={editableDivRef}
      contentEditable
      className="editable-div"
    ></div>
  );
};

also add the CSS:

.editable-div {
  width: 100%;
  height: 600px;
  max-height: 600px; /* Fixed height */
  overflow-y: hidden; /* Hide vertical overflow */
}