Can Quill BlockEmbeds use arbitrary tags?

Question

I've got a bunch of components (pieces of html and logic) that I want to be able to embed inside a Quill document, and I'm not entirely sure how to get started. Each component has a single root element, but the tagName is arbitrary (there are aside, div, section, etc tags). Each of the components has a completely non-Quill editing experience (that's handled elsewhere), so ideally their deltas would just look like this:

{
  ops: [
    { insert: 'Hello', attributes: { bold: true } },
    { insert: { component: 'domain.com/components/image/instances/foo' } },
    { insert: 'World!\n' }
  ]
}

I believe I read somewhere in the documentation that block-level Blots must specify a tagName or a className, but I can't find the reference for that. All of the examples I can find using the BlockEmbed specify a tagName, and the Parchment docs don't really explain it. Is there a correct way this should be done, and are there any edge cases I should be aware of?

All of these components would be block-level, so (from my reading of this issue) I don't think selection should be a problem, right?

Answer 1

have a looks here and here

if your purpose is create a tag which is not present in QUILL what you have to do is something like this: CONFIGURE YOUR CUSTOM TAG

 var Embed = Quill.import('blots/embed');
class MyCustomTag extends Embed {
    static create(paramValue) {
        let node = super.create();
        node.innerHTML = paramValue;
        //node.setAttribute('contenteditable', 'false');
        //node.addEventListener('click', MyCustomTag.onClick);
        return node;
    }

    static value(node) {
        return node.innerHTML;
    }
}

MyCustomTag.blotName = 'my-custom-tag';
MyCustomTag.className = 'my-custom-tag';
MyCustomTag.tagName = 'my-custom-tag';
//in case you need to inject an event from outside
/* MyCustomTag.onClick = function(){
     //do something
 }*/

Quill.register(MyCustomTag);

USE YOUR CUSTOM TAG

this.editor.insertEmbed(
0, //INDEX_WHERE_YOU_TO_INSERT_THE_CONTENT, 
'my-custom-tag',//THE NAME OF YOUR CUSTOM TAG
 '<span>MY CONTENT</SPAN>'// THE CONTENT YOUR TO INSERT 
);

Pay attention, as default this custom will get the attribute display: block you can target it by css rule as example

my-custom-tag {
   display : inline;
}