Can a contentEditable div be given a set height in React.js?

Question

Can a contentEditable div be given a set height in React.js?

I have a contentEditable div that I want to limit in size. The user should not be able to continue typing once the capacity is reached, and no new lines should be added beyond the fixed height. For example, if the div's height is 600px and the user tries to create new lines by pressing enter repeatedly, after reaching the capacity, no additional lines will be allowed. It's like Google Docs where a new page appears when the end is reached, but in this case, nothing happens once the contentEditable div's limit is reached.

Here is my current code without any overflow since the div has a set 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>

javascript html css reactjs vite

Answer 1

Answer №1

In this scenario, imagine a EditableDiv component using a ref to point to the div labeled contentEditable, alongside a useEffect hook managing keydown and paste events.

The function handleKeyDown blocks the addition of new lines when the content height reaches or surpasses the maximum height. Meanwhile, handlePaste deals with pasting content and trims it if it exceeds the set maximum height.

Implementation details:

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>
  );
};

Additionally, include the following CSS styling:

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

Answer 2

In this scenario, imagine a EditableDiv component using a ref to point to the div labeled contentEditable, alongside a useEffect hook managing keydown and paste events.

The function handleKeyDown blocks the addition of new lines when the content height reaches or surpasses the maximum height. Meanwhile, handlePaste deals with pasting content and trims it if it exceeds the set maximum height.

Implementation details:

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>
  );
};

Additionally, include the following CSS styling:

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

Can a contentEditable div be given a set height in React.js?

Answer №1

Similar questions

Dealing with timing errors in React when making a POST request

What is the best method for retrieving a specific element nested within another element, employing a for loop and storing it in an array using JavaScript?

Organizing various response data in an array-type JavaScript variable

The challenges of $location.search().name and base href in application URLs

JavaScript array field for space exploration

Attempting to delete a record in a Node.js Express MongoDB Jade application

I'm having trouble getting my CSS opacity to smoothly transition back to its original state of .5 using setTimeout(). What could be

Encountered an error with useFormState when trying to validate a form

Is there a way to blend together two elements within a Bigcommerce theme seamlessly?

Unable to retrieve an image from various sources

The checkbox appears to have selected values, yet the selected options are not visibly displayed

Tips for organizing elements onto separate pages for printing while avoiding overflow onto additional pages

Applying the 'overflow: scroll' property creates a scroll bar that remains fixed and cannot be scrolled

Enhance jQuery for a dynamic navigation dropdown with multiple sub-menus

Stop the Sidebar from showing up on certain pages with Next.js

Issue with Bootstrap Carousel Interval Setting not Functioning as Expected

Error: The react.js application is unable to access the property 'classList' of a null object

Is there a way to dynamically adjust the font size to perfectly fit the content within a div?

ReactJS encountered an error due to exceeding the maximum update depth when attempting to save data using the localStorage feature

Customizing the appearance of the dragged element in jQuery UI