Quill: Custom BlockEmbed format with tagName=DIV not performing well

[sachinrekhi]

I'm trying to create a custom format that is a block-level embed. I basically copied the existing Video format from here: https://github.com/quilljs/quill/blob/develop/formats/video.js

I registered the new embed format via Quill.register() and added it via editor.insertEmbed(). When I set tagName='IFRAME' or 'IMG' like the two existing video and image embeds, the cursor position and deletion work fine. As in if I set the cursor after the embed and press delete the embed is appropriately deleted in it's entirety. I can also move the mouse cursor to either immediately before the embed or immediately after the embed on the same line as the embed.

However when I set tagName='DIV' the basic behaviors stop working. As in pressing delete after the embed does not in fact delete the embed. Also I can no longer position the mouse cursor immediately before or after the embed.

The code seemed to suggest BlockEmbed could be used with any block-level tag type, so I assumed DIV would qualify. Is that not the case? Or is this in-fact a bug? The docs seems to suggest I might need to override index() and position() but since neither the video or image embeds needed to do that I didn't think I would need to either. But do I?

Platforms:
Chrome 50 on Mac 10.11

Version:
Quill 1.0 Beta 3

[jhchen]

One issue is if you use <div> you need to specify a className too since <div>s are in use by Scroll blots. className is also how both formula blots and plain inline blots both use <span>.

[sachinrekhi]

I'm running into this issue where the Delta that gets created to represent my custom embed is inaccurate.

So I went ahead and copied the Video embed code verbatim, registered my copy on top of the existing version, and noticed that even the Video embed's Delta object is now inaccurate as well.

Take a look at this codepen: http://codepen.io/sachinrekhi/pen/oLNxxO

When you look at the console, you'll see the video Delta is being represented like this:

So instead of it being insert: {video: 'url'}, the video key is now being set as part of the attributes.

Looks like a bug?

[sachinrekhi]

A separate issue I'm experiencing causes Quill to throw an error when I append a child node in the create method of my custom embed.

See this code pen: http://codepen.io/sachinrekhi/pen/xOxVQo?editors=0010

The error I get is:

Uncaught TypeError: Cannot read property 'emitter' of undefined

The strange thing is if I remove Test.className = 'ql-test' the error goes away and the custom embed renders properly with the child node.

[sachinrekhi]

Jason also pointed out that the issue with my two codepens above was that I was importing the incorrect BlockEmbed.

I changed it to the following and both of the above issues went away:

var BlockEmbed = Quill.import('blots/block/embed');

[jhchen]

Where did we land on this? It seems like a solution was found but I need to document it but can't remember..

[sachinrekhi]

The proper import statement fixed the 2 issues I was running into, so just need to clarify in the docs the appropriate import statement for doing a BlockEmbed.

[jhchen]

Okay thanks I think the new Cloning Medium with Parchment guide should cover BlockEmbeds.