Quill: Custom inline blot is being rendered multiple times when pressing ENTER

Created on 15 Jun 2018  路  2Comments  路  Source: quilljs/quill

Hello,

We have decided to use Quill for a project and I'm running into an odd issue where a custom inline Blot is being copied and rendered multiple times when pressing the ENTER key immediately after formatting with my custom Blot.

Steps for Reproduction

  1. Visit https://codepen.io/anon/pen/OExJvW
  2. Enter "Hello "
  3. Then press the Macro button in the example
  4. Then press the ENTER key multiple times

Expected behavior: The custom Macro blot shouldn't be copied and rendered multiple times. Simply a new line should be rendered.
Actual behavior: It's copied and rendered multiple times.

Platforms: Google Chrome 66, macOS Sierra
Version: Quill 1.3.6

Most helpful comment

I found a solution to this: https://codepen.io/anon/pen/MXEXBb Basically I removed the static formats(domNode) definition - not sure if it's even needed. With that said, not totally sure how you'd go about wrapping the text in a span with a classname with this approach.

Another approach is to use an Embed like in this example: https://codepen.io/anon/pen/jKGKbg which works for the most part. The only issue with the Embed approach is that the cursor position "jumps" way to the right without this hack in place: quill.insertText(range.index + 1, ' ', Quill.sources.SILENT).

All 2 comments

I found a solution to this: https://codepen.io/anon/pen/MXEXBb Basically I removed the static formats(domNode) definition - not sure if it's even needed. With that said, not totally sure how you'd go about wrapping the text in a span with a classname with this approach.

Another approach is to use an Embed like in this example: https://codepen.io/anon/pen/jKGKbg which works for the most part. The only issue with the Embed approach is that the cursor position "jumps" way to the right without this hack in place: quill.insertText(range.index + 1, ' ', Quill.sources.SILENT).

@vasilionjea I think the hack works, but only if the blot contains text with a length of 1. A generic use case would have to use something like quill.insertText(range.index + data.length + 1, ' ', Quill.sources.SILENT).

Was this page helpful?
0 / 5 - 0 ratings

Related issues

splacentino picture splacentino  路  3Comments

scottfr picture scottfr  路  3Comments

benbro picture benbro  路  3Comments

GildedHonour picture GildedHonour  路  3Comments

lustoykov picture lustoykov  路  3Comments