Quill: mandatory paragraph after embedded video

[Tbstr]

Hey there,

thanks for the awesome editor! But there is one thing I am fighting with.

Quill adds a mandatory empty paragraph after an embedded video. I am not able to remove the paragraph in case I have no following content. Hitting backspace removes not only the empty paragraph but also the embedded video.

In my project I am saving the delta and for display of the created content I am using a Quill instance in readOnly mode. For there is a visible box around the content, the empty paragraph at the end is visually disturbing.

Thanks for your help
Tobias

Steps for Reproduction

1. Visit https://codepen.io/Tbstr/full/jwVjdq/
2. Click the video button
3. Enter video link, e.g: https://youtu.be/9nZMHBDw8os
4. hit backspace

Expected behavior:

Only the appended empty paragraph is removed. The video stays.

Actual behavior:

The paragraph and the video are being removed.

Platforms:

Chrome Version 58.0.3029.110 (64-bit)
macOS Sierra

Version:

Quill Editor v1.2.5

[DmitrySkripkin]

This is default a behavior for block blots.
So editor's html content looks like that:

<iframe><iframe />
<p>...<p>

If you remove extra paragraph there is no place where caret can go. You cannot set caret to iframe or whatever is not inline or text. You should be able to type. That's why it works in other way for <img>.

So you can use js or css to remove or hide this extra <p>. Or you can use your own custom inline blot. Or you can listen to selection change to handle your case.

P.S. contenteditable="true" is a real pain.

[jhchen]

Is this still an issue? @DmitrySkripkin is correct this is why this is the behavior.

[Anoiing]

I want to set the video autoplay false and loop false , any one have some ideas?

[nekonabe-tokumori]

still an issue, and only way to solve is replace the video blots.

import Quill from 'quill'
const Image = Quill.import('formats/image')
const Link = Quill.import('formats/link')

class Video extends Image {
    static create(value) {
        let node = super.create(value);
        if (typeof value === 'string') {
            node.setAttribute('controls', 'controls')
            node.setAttribute('src', Link.sanitize(value));
        }
        return node;
    }
}

Video.blotName = 'video';
Video.tagName = 'VIDEO';

export default Video;

And register it before use the editor.

Quill.register(Video, true)