Replacing an insert with another insert

[ghost]

If I have a delta which consists of some inserts and now I want to replace a certain insert (no text but an object with some properties) with another insert (no text but an object). What is the best practice for this? I read that it is not done to create your own set of operations manually, but how is it done then? I see some functions, but I can't find a proper one.

[jhchen]

What's the use case?

[ghost]

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().

[jhchen]

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.

[ghost]

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?

[jhchen]

Are you using just Parchment or Quill as well?

[ghost]

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?

[ghost]

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!

[ghost]

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.

[quill-bot]

Closing inactive issue.