Extendable input div(just like facebook and X create post component)

[aziz-codes]

Body

I have a model in next js that enables users to post something, the post could be in the form of plain text or contains images as well, since it's a model so I have to add an overflow to it,

For example:

• X create post component
• Facebook create post component

when we upload images it add an overflow to the parent div, and then we start typing something it actually increase the height of the input result in pushing down the uploaded images, that's I want to achieve

My Problem:
I have the same component, I have a editable div and then below that I am actually displaying the uploaded images using shadcn slider, the problem is when I upload a single image the input area shrinks to 'h-10'
I want the entire div to be scroll able means the input div height should increase as the user types something and hits enter.

**Here is my code **
`

        <EditableContainer />
        <div className="w-full flex flex-col items-center relative">
          <input
            type="file"
            hidden
            accept="image/png, image/jpeg, image/jpg"
            multiple
            ref={fileRef}
            onChange={handleFileChange}
          />
          {images.length > 0 && (
            <ImageSlider images={images} removeImage={removeImage} />
          )}
        </div>
     
      </div>`

this is the EditableContainer component code
` <div
className="flex flex-col gap-4 w-full max-h-96 min-h-14 flex-1 border overflow-y-auto scrollbar-none transition-all"

>
  <div
    ref={divRef}
    contentEditable
    onInput={handleInput}
    className={`relative p-3 overflow-y-auto w-full rounded-lg focus:outline-none 
      ${content === '' ? 'before:content-[attr(data-placeholder)] before:text-gray-400 before:absolute' : ''}`}
    data-placeholder="What's on your mind today?"
  >
    
  </div>
</div>`

Guidelines

• I have read and understood this category's guidelines before making this post.

[HosamShaban]

// EditableContainer component
import React, { useEffect, useRef, useState } from 'react';

const EditableContainer = () => {
const divRef = useRef(null);
const [content, setContent] = useState('');

const handleInput = () => {
const divElement = divRef.current;
setContent(divElement.innerText);
adjustHeight(divElement);
};

const adjustHeight = (element) => {
element.style.height = 'auto'; // Reset height to auto to calculate new height
element.style.height = ${element.scrollHeight}px; // Set height based on scrollHeight
};

useEffect(() => {
if (divRef.current) {
adjustHeight(divRef.current);
}
}, [content]);

return (

<div
ref={divRef}
contentEditable
onInput={handleInput}
className={relative p-3 overflow-y-auto w-full rounded-lg focus:outline-none ${content === '' ? 'before:content-[attr(data-placeholder)] before:text-gray-400 before:absolute' : ''}}
data-placeholder="What's on your mind today?"
>

);
};

export default EditableContainer;

Parent Component (Where the Slider Is Rendered):

{images.length > 0 && ( )}

[aziz-codes]

Thanks bro for your contribution, but this seems not working.);

[aziz-codes]

thanks for all your support. It's been sorted.