JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
<div class="prompt" id='prompt'>
  <div></div>
  <div>            
  <div><input type="text" id='input' value='https://www.youtube.com/embed/k3zimSRKqNw'></div>
  <div>
    <button id="ok" type="button">OK</button>
  </div>
 </div>
</div>

<div id="toolbar">
  <span class="ql-formats">
  <button class="ql-bold"></button>
  <button class="ql-italic"></button>
  <button class="ql-underline"></button>
  <button class="ql-strike"></button>
  </span>
  <span class="ql-formats">
   <button class="ql-video"></button>
  </span>
  <span class="ql-formats">
    <button class="ql-clean"></button>
   </span>
</div>

<div id='editor'></div>

CSS

.prompt {
    display: none;
}

JavaScript

function promptInput(callback, event) {

    let prompt = document.getElementById('prompt');
    
    if(prompt) {

        let input = document.getElementById('input');
        prompt.style.display = 'block';

        document.getElementById("ok").onclick = function() {
            prompt.style.display = 'none';
            callback(input.value);
        };

    }

}

function videoHandler() { 

    promptInput(function(value) {
				console.log(value);
    });
    
    let range = this.quill.getSelection();

    this.quill.insertEmbed(range.index, 'video', value);
    this.quill.setSelection(range.index + 1);
    
}

var quill = new Quill('#editor', {
        modules: {
            toolbar: {
            container: "#toolbar",
                handlers: {
                    video: videoHandler
                }
            }
        },
        placeholder: 'Content',
        theme: 'snow'
});