nozer/quill-delta-to-html

Link blot target attribute is not respected

dcsaszar opened this issue · 2 comments

dcsaszar commented

Background

We have a customized Quill editor, which supports custom link targets.

Reproduce

Use this delta ops input:

[
{"attributes":{"target":"_self","link":"#"},"insert":"A"},
{"attributes":{"target":"_blank","link":"#"},"insert":"A"},
{"attributes":{"link":"#"},"insert":"A"},{"insert":"\n"}
]

Expected output

<p><a href="#" target="_self">A</a><a href="#" target="_blank">A</a><a href="#">A</a></p>

Actual output

<p><a href="#" target="_blank">A</a><a href="#" target="_blank">A</a><a href="#" target="_blank">A</a></p>

Notes

I think the issue lies here:
https://github.com/nozer/quill-delta-to-html/blob/master/src/OpToHtmlConverter.ts#L182

Unfortunately the default Quill doesn't set the target attribute for the delta op. So this should be configurable in some way.

Alternatively, it would be nice to be able to override known blots with a custom implementation (like renderCustomWith, which was my first attempt btw.).

nozer commented

I will look into it and push a fix by the end of the coming weekend.

  • 👍1
nozer commented

Hi

A fix has just been pushed with tag v0.8.0. I followed your "non-alternative" advice instead of the renderCustomWith since it is called only with custom blots (i.e. when insert value is not text or not an object that has formula, image, and video as its key).

A linkTarget option is added and it is set to _blank as default (since that has been the hard-coded default so far, I did not want to break other users' code).

So, to make that example of yours work; you would do something like:

let ops = [
   {"attributes":{"target":"_self","link":"#"},"insert":"A"},
   {"attributes":{"target":"_blank","link":"#"},"insert":"A"},
   {"attributes":{"link":"#"},"insert":"A"},{"insert":"\n"}
]
let converter = new QuillDeltaToHtmlConverter(ops, {linkTarget: ''});
let html = converter.convert();

will give what you expect

<p><a href="#" target="_self">A</a><a href="#" target="_blank">A</a><a href="#">A</a></p>

If you did not specify the link target as shown below:

let converter = new QuillDeltaToHtmlConverter(ops, {});
let html = converter.convert();

would give

<p><a href="#" target="_self">A</a><a href="#" target="_blank">A</a><a href="#" target="_blank">A</a></p>
  • ❤️1