Quill: Loading quill content with a custom embed blot of type span breaks

[CodySchaaf]

Steps for Reproduction

1. Visit https://codepen.io/anon/pen/zReGNV
2. Load project and an error will occur in the console.

Expected behavior:
Adding a custom embed blot with type span should not cause an error when loading certain content.

Uncaught TypeError: after.appendChild is not a function

Currently the content that consistently causes it to happen is the following:

"ops": [
    {
      "attributes": {
        "italic": true
      },
      "insert": "A"
    },
    {
      "insert": " B "
    },
    {
      "attributes": {
        "link": "https://google.com"
      },
      "insert": "C"
    }
  ]

Actual behavior:
No error should be thrown.

Changing the span to an i seems to fix the issue, so I'm not sure if that is the ideal solution, or if I'm doing something else wrong.

Platforms:

Include browser, operating system and respective versions
Chrome (Version 64.0.3282.167)
macOS (10.13.3)

Version:
1.3.5

[charrondev]

This issue seems to be caused the a static className not being set.

I've updated your example with a className and everything works correctly as far as I cans see. https://codepen.io/anon/pen/WMPZNZ

Quill needs to be able to determine from a DOM Node if a blot matches or not. This is done through the static formats(domNode) function of a Blot. If no static className is provided for your custom Blots they will by default only check that the tagname matches. In this case span matches multiple registered blots, which at some point causes the error you were experiencing.

When you set a static className the static formats() function will also check that the classnmae matches, preventing the issue. This classname will automatically be applied to the domNode for you as well.

This error message could probably be improved, but that static formats() function can also check other properties besides className when implemented yourself, which makes it more complicated than just enforcing a className.

[jignesh8518]

Thanks charrondev, With className my problem solved. Previous without classname, the binding was not happening between quill editor and toolbar.