How to create editable text box over an image (e.g., as in Powerpoint)?

Question

Hello, I’m developing a slide show like Power Point, only in the browser environment with Node.js (ejs, sequelize, etc.)

I was able to create the inclusion part of the image and text by sending it to BD and pulling the information from there, however, the text is typed in a input separate, and I would like it to be typed, right into the image (just like when writing inside a slide in Power Point), so that the user experience is better.

I would also like to know how I can make this text box be moved inside the image when the user drags the mouse arrow.

Follows part of the code:

<figure>
            <span class="trs next"></span>
            <span class="trs prev"></span>             

            <!-- Espaço do slide-->
            <div class="container-fluid">
                <div class="row" id="slider">
                    <% dataimg.forEach(slide => { %>                    
                        <a href="#" class="trs">
                            <img name="slide" src="img/<%=slide.chooseimg %>" 
                            width="100%" height="600">  
                            <div class="text"><%= slide.text %></div>                              
                        </a>       

                    <% }) %> 
                </div>
            </div>
           <figcaption></figcaption>
        </figure>

It also follows the part of the form where I’m including the image and the caption (but I’d like it to be straight in the image)

<div class="container-fluid cards">
            <div class="row">
        <!-- Card de inclusão de imagem e texto-->
        <form method="POST" action="/savedata">
            <div class="card  mx-md-3 my-md-2" style="width: 18rem;">
                <img class="card-img-top" id="img_preview" src="" alt="Imagem de capa do card">
                <div class="text-center my-3">                                   
                    <input type="file" onchange="previewFile()" class="col-md-6" id="img_input" name="chooseimg">

            </div>

            <!-- Inclusão de texto-->
            <div class="card-body">                
                    <p class="card-text">
                        <div class="form-group text-center">
                            <label for="exampleFormControlTextarea1">Texto</label>
                            <textarea class="form-control" name="text" id="exampleFormControlTextarea1"></textarea>
                        </div>
                    </p> 
            <!-- Botão inclua-->
                    <div class="text-center mt-md-1">
                        <button href="#" class="btn btn-primary col-md-4" id="btn+">Inclua</button> 
                    </div> 
                </form>                     
            </div>
          </div>

I could not find anything similar in Google, because the search always returns as include this direct text box in the code (by the programmer) and not by the end user. That’s it, from now on. I thank you!