Quill js Question :- When I make changes to the delta will it also do changes to DOM?

Question

Problem :- So when I insert an image in quill js editor it uploads image as data base64 format. Which is very big to move around different pages.

Aim :- I want to make a program so that when an image is inserted in editor I download the image, through laravel backend and return image url to replace the img src in the dom. I have already done the downloading of image and url returning part of the code.

Main Question :- If I edit Delta of quill js will it change the img src in the dom too??

P.S. :- I don't have a code yet to submit I am just curious to know if delta changes will reflect in DOM or not. Please comment if you need more info, Thanks

Answer 1

So I figured it out I stored delta to a variable, then I made changes to that variable and then I setContents(delta) to the editor and that changed the data base 64 to url.

emailEditor.on('editor-change', function(eventName,args) {
 var delta = ( emailEditor.getContents() );
 if (eventName === 'text-change') {

 let arr = (args['ops']);
 if (args['ops'].length == 1 && !(arr[0].hasOwnProperty('delete'))){
   if (args['ops'][0]['insert']['image'] != null){
    for (let index = 0; index < delta['ops'].length; index++) {          
     if (delta['ops'][index]['insert'].hasOwnProperty('image') && args['ops'][0]['insert']['image'] == delta['ops'][index]['insert']['image']) {
      saveImage(index);
     }
    }
   }
  }
  else if (args['ops'].length == 2 && !(arr[1].hasOwnProperty('delete'))){
   if (args['ops'][1]['insert']['image'] != null){
    for (let index = 0; index < delta['ops'].length; index++) {          
     if (delta['ops'][index]['insert'].hasOwnProperty('image') && args['ops'][1]['insert']['image'] == delta['ops'][index]['insert']['image']) {
      saveImage(index);
     }
    }
   }
  }
 }

 function saveImage(key) {
  let imageURL = JSON.stringify(delta['ops'][key]['insert']['image']);
  $.ajax({
   headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
   },
   type: "POST",
   url: "url-to-backend",
   data: { "imageURL": imageURL },
   success: function (data) {
    delta['ops'][key]['insert']['image'] = (data);
    emailEditor.setContents(delta);
   },
   error: function (data) {
    alert("some Error");
   }
  });
 }
});

My code is not perfect, but it works for me, if you find this not suitable for community or if you want me to add comments on working let me know I will delete/edit the Question/Answer.