Insert delta where the cursor is

[sohinim98]

Hi there, I am using updateContents to insert the delta for an iframe for a video, and would like to enter the iframe delta where the cursor is. However, right now the iframe is always inserted at the top of the editor using updateContents.

Steps for Reproduction

Here is the code for it -

                  const addVideoRange = this.editor.getSelection();
                  const newRange = addVideoRange !== null ? addVideoRange.index : 0;
                  // get the iFrame
                  const safeHtml = this.embedService.embed(url, {
                    attr: { width: 600, height: 400 },
                  });
                  // converting safeHTML to Delta to insert into the Quill editor
                  const delta = this.editor.clipboard.convert(safeHtml.changingThisBreaksApplicationSecurity);
                  // "silent" source so selection-change event is not emitted
                  this.editor.updateContents(delta, 'silent');
                  this.editor.setSelection(1 + newRange);

Here is how I want it to work (insertEmbed embeds the video where the cursor is) -

                  const addVideoRange = this.editor.getSelection();
                  const newRange = addVideoRange !== null ? addVideoRange.index : 0;
                  this.editor.insertEmbed(newRange, 'video', url);
                  this.editor.setSelection(1 + newRange);

Expected behavior: For the video iFrame to be embedded where the cursor is, the way insertEmbed works.

Actual behavior: The iFrame is embedded in the beginning of the document.

Note that I cannot use insertEmbed because I have to insert html/delta.

Version: 1.3.7

[YYL1999]

you can try to add it

        this.quill.insertText(newRange + 1, ' ');

[anis8]

quill.updateContents(new Delta().retain(cursorIndex).concat(myDeltas))

[RichMatthews]

@anis8 how do you know this? it is not in the docs from what I can see?

[OMartinez-NeT]

quill.updateContents(new Delta().retain(cursorIndex).concat(myDeltas))

Hey @anis8 thanks for this, I had to make some changes to make this works but your comment put me on the right track my final solution was:

// Add 1 because my new delta is 1 length size
const newCursorPositionAfterUpdating = currentPosIndex + 1;
quill
  .updateContents(new Delta().retain(cursorIndex).insert("x"))
  .concat(myDeltas))
// Remove deltas before inserting otherwise we duplicate deltas.
  .delete(newCursorPositionAfterUpdating)

[OMartinez-NeT]

@anis8 how do you know this? it is not in the docs from what I can see?

https://quilljs.com/docs/api/#api