nozer/quill-delta-to-html

Advice for converting a custom blot?

homerlex opened this issue · 15 comments

I have a custom embed blot that looks something like the following in the delta json:

{"insert": {"my-blot": {"id": "1761", "value": "Some Name"}}}

I'm wondering if there are examples for adding conversion of custom blots.

I see the code fall though InsertOpsConverter.convertInsertVal and since my insertVal is not a string or any of the DataTypes handled there null is return. Is this the function where I should start to handle my custom blot?

Any advice that would save me some time is appreciated.

nozer commented

Hi @homerlex
If value of insert property is not in quill formats and not a mention, which is like:

insert: {mentions:true, mention:{name:, target:, 'end-point':, slug:, class:, avatar:, id:}}

then they will be removed during sanitization process (sanitization removes all unknown properties and their values from insert for security). So, your 'my-blot' insert type is unknown to the system and will be removed and there is no way for you to generate html for my-blot as of now.

nozer commented

@homerlex
I will see what I can do to let those custom "insert types" pass through so you can render them the way you like in:

converter.beforeRender(function(groupType, data){
    // ... generate your own html 
    // return your html
});

Thanks @nozer. That would be great.

@nozer, @buildAI - I was just looking at InsertOpsConverter.convertInsertVal again and I don't see how an insert like the following isn't "ignored":

insert: {mentions:true, mention:{name:, target:, 'end-point':, slug:, class:, avatar:, id:}}

The way I see it, in that function insertPropVal for a mention is not a string and its not and Image, Video or Formula so the function would return null.

Am I missing something here or am I correct in assuming that mentions insert in the current code will not be rendered?

nozer commented

Sorry, I mistyped. I mean if attributes contain anything other that what is specified in quill formats and in this {... mentions:true, mention:{name:, target:, 'end-point':, slug:, class:, avatar:, id:} ...}, then they are removed. I mistyped them as if they are a property of insert. Very sorry.

nozer commented

I started on that feature; I won't remove any attributes or insert vals. If any attribute or insert value is not one of the known quill formats/types, I will simply not render them and let the user render in a callback. Hopefully it will finish in a few days (I have day job too, so be patient pls).

OK, but I still don't see how mentions would get passed InsertOpsConverter.convertInsertVal in the current code. Therefore I don't think they will be converted to HTML.

Anyway looking forward to seeing your feature addition. Your time spent on the project is much appreciated.

nozer commented

mentions & mention is not a value of insert, they come in as attributes;

let op = {insert: 'text', attributes: {mentions: true, mention: {...}}}

In .convertInsertVal does not do anything to attributes; it works with insert value. So, in this case, as far as it is concerned, insert is one of the "system" types (text, image, video, formula)

Got it - thanks for the explanation.

nozer commented

Welcome

Facing this problem as well, any updates?

nozer commented

@icewind7030 Sorry for the delay; so much has been going on in my life. I will possibly resume and finish this in the next weekend.

@nozer That would be great, I totally understand. Take you time, please.

nozer commented

It is finished and published in v0.6.1. Updated the docs as well.

@nozer - Thanks for getting this done. It works great.