Replacing an insert with another insert about delta HOT 9 CLOSED

What's the use case?

from delta.

The use case is the following. When someone adds an image via a toolbar button, it shows a window where the user can pick an image from its hard drive. When the user selects one or more images. The editor first inserts a div (BlockEmbed), with the filename as text and a unique sequence identifier as dataset.

<div class="editor-uploading" data-sequence="123421">IMG_1.jpeg</div>

This div corresponds to a certain delta like:

message: {"sequence":123421, text:"IMG_1.jpeg"}

Afther this div is added, the image or images are being uploaded to the server including the sequence number. When the upload is finished, the server responds with the actual url and the sequence number. The image should now be shown to the user at the position of the div with that sequence number. So the div should be replaced with:

<img src="http://some_image.jpg" class="editor-uploaded" alt="some text" />

This img-tag corresponds with the following delta:

image: {src: "http://some_image.jpg", alt="some text", "sequence":123421}

Somehow I need to modify the delta of the complete text and delete the div and replace it with an image tag. How can I accomplish this?

Currently I have the following solution:

replaceSequenceWithImage(image) {
    let delta = quill.getContents();
    let range = quill.getSelection(true);

    for (let i = 0; i < delta.ops.length; i++) {
        let insert = delta.ops[i].insert;
        if (insert.hasOwnProperty('message') && insert.message.sequence == image.sequence) {
            delete insert.message;
            insert.image = image;
        }
    }
    quill.setContents(delta, Quill.sources.USER);
    quill.setSelection(range, Quill.sources.USER);
}

This solution feels bad, because at every update I use setContents while a better solution would be to use updateContents. But I don't know how to get to the index for retain().

from delta.

I think this is the wrong layer of abstraction for what you are trying to accomplish, which is why best practice is to not generate Deltas yourself.

It sounds like you are using Quill and Parchment and it would be less error prone to have blockembed replace itself with the real image blot instead.

from delta.

Yes, I am trying to build a custom editor based on the "cloning medium with parchment" tutorial. I've built some blots and now I need to replace a blot with another blot.

Now your advice is to let the blockembed replace itself with another blot. Now I have two questions:

• Which function inside the blockembed class should be overriden to do the replacement and how can I replace it?
• When the upload is finished an event is triggered. At that moment I don't have a reference to the blot I need to replace, so how do I get a reference to the right blot, depending on the sequence number?

from delta.

Are you using just Parchment or Quill as well?

from delta.

I am also using Quill. It would be great to see some examples, because for now I only see insertText and insertEmbed functions. I think I have to use Parchment.find to find the corresponding blot by a node. But if I have the blot, how do I delete it properly?

from delta.

I think I've found a solution, correct me if I am wrong:

let node = document.querySelectorAll(`[data-sequence="${sequence}"]`);
let blot = Parchment.find(node);
let image = {src, alt, class, type, sequence};
blot.replaceWith('image', image);

Thanks for your feedback and wonderful editor!

from delta.

Well after some testing, if I do

let node = document.querySelectorAll(`[data-sequence="${sequence}"]`);
let blot = Parchment.find(node);
let image = {src, alt, class, type, sequence};
blot.replaceWith('image', image);
console.log(quill.getContents());

after the replace, the content in the editor is updated, but the delta isn't.

from delta.

Closing inactive issue.

from delta.