Estoy tratando de clonar la página de inicio de la web de Facebook usando HTML simple, CSS y Javascript. El problema es el área "Crear publicación". imagen de esta zona en web real de Facebook Prestemos atención a la línea de texto "¿Qué tienes en mente,..?"

En la web real: cuando el usuario crea una publicación, cuando escribe algo, la línea de texto "¿Qué tienes en mente...?" esta desaparecido Además, al hacer clic fuera, no sucede nada con el tipo de usuario.

Pero este es mi problema: problema con el uso de marcador de posición 'falso' por etiqueta div Cuando escribo algo, la línea de texto "¿Qué tienes en mente...?" también está desaparecido. Pero cuando hago clic afuera, vuelve a aparecer antes del texto que escribo. Y espero una solución que mantenga mi marcador de posición, pero cuando tengo algo que el usuario escribe, el texto del marcador de posición no aparece como una etiqueta de entrada.

Si me pregunta por qué usar la etiqueta div en lugar de la etiqueta de entrada o la etiqueta de área de texto, la razón se relaciona con la imagen que el usuario agregará a su publicación (la imagen debe estar dentro con el texto que el usuario escribe), así que tengo que hacer un 'falso' marcador de posición para el atributo de uso de la etiqueta div: contenteditable="true"

Este es todo mi código dentro de la etiqueta div:

 <div id="content" contenteditable="true" data-text="What's on your mind, Ann?" > <br /><br /> <input type="file" name="image" id="file" onchange="loadImg(event)" style="display: none" /> <div id="form__body__imgPlaceholder__outer"> <div id="imgPlaceholder__close" onclick="closeImg()"> <img src="./images/postStatus/close-icon.svg" alt="" /> </div> <label for="file" style="cursor: pointer"> <div id="form__body__imgPlaceholder"> <div class="imgPlaceholder__action"> <div class="imgPlaceholder__chooseImg"> Choose image </div> </div> </div> <img src="" alt="" id="image" /> </label> </div> </div>

¡Muchas gracias!