Observer character data of added nodes with mutation observer

Question

Here is my html,

<div role="textbox" aria-multiline="true" data-slate-editor="true" data-slate-node="value" contenteditable="true" zindex="-1" style="position: relative; outline: none; overflow-wrap: break-word; min-height: 24px;">
<div data-slate-node="element">

<p> 
<span data-slate-node="text"> 
<span data-slate-leaf="true">

<span data-slate-placeholder="true" contenteditable="false" style="position: absolute; pointer-events: none; width: 100%; max-width: 100%; display: block; opacity: 0.333; user-select: none; text-decoration: none;"> 
What are your thoughts? 
</span> 
<span data-slate-zero-width="n" data-slate-length="0">
 sa qwkq</span> 
</span> 
</span> 
</p>
 </div>
 <div data-slate-node="element"> 
<p> 
<span data-slate-node="text">
<span data-slate-leaf="true">
 </span>
 </span>
 </p> 
</div>
 </div>

do NOTE it is dynamically added when I press the enter key as seen here

   textBox.addEventListener("keydown", function (event) {
      if (event.currentTarget.textContent.trim().length > 1) {
        if (!!sendCommentButton.disabled) sendCommentButton.disabled = false;
      } else {
        sendCommentButton.disabled = true;
      }
    
      if (event.key === "Enter") {
        // You can set initial content as needed
        const newDiv = document.createElement("div");
        newDiv.setAttribute("data-slate-node", "element");
        newDiv.innerHTML = `
            <p>
             <span data-slate-node="text">
                <span data-slate-leaf="true">
                  <span data-slate-zero-width="n" data-slate-length="0">&#xFEFF;<br>
</span>
                </span>
              </span>
            </p>
          `;
    
        event.preventDefault();
        textBox.appendChild(newDiv);
    })

hwever as I type in the first character this

<span data-slate-zero-width="n" data-slate-length="0">&#xFEFF;<br></span>

should be replaced by this

<span data-slate-string=true>w</span>

I assumed here I just entered a character w

as soon as the first character hits , and once the last character is removed from data-slate-string, it should return to the former state then any other backspace in its former state should remove the whole <div data-slate-node='element'>{...for the particular span element the event occurs ...} </div> I have used mutation observers and event listeners but it seems not working Your answers is deeply and I will provide any info needed

const textBox = document.querySelector('div[role="textbox"]');

Elaborated and Cont... from the previous question

function subscriber(mutations, observer) {
  mutations.forEach((mutation) => {
    if (mutation.type === "characterData") console.log(mutation.type);
    mutation.addedNodes.forEach((node) => {
      let leafNode = node.querySelector('span[data-slate-leaf="true"]');
      console.log("Added node: " + leafNode);
      observer.disconnect();
      observer.observe(leafNode, { characterData: true });
      //leafNode.addEventListener("keyup", (ev) =>
      ///  console.log(ev.target.innerText)
      // );
    });
  });
}
const textObserver = new MutationObserver(subscriber);
textObsever.observe(parentElementofDivsAdded, {characterData: true, childList: true, subtree: true}) 

I howver intend that when a node is added, I want to know the character data of this dynamic node as I type, that is

parentElementofDivsAdded.addEventListener("keydown", ev => if(event is "enter key") add a new div)

so I everything works up to the point where I want to observe the leafNode, to see its dynamic character content , thats as I type in the added node that is query selected as seen above and as I backspace , just similar to how "input" event works but this is a span element , I appreciate any responses and I will definitely ensure that I do any updates needed