title: angular 5 and quilljs [Parchment] Unable to create blot
body: <p>I'm working with <a href="https://www.primefaces.org/primeng/#/editor" rel="noreferrer">primeng editor</a> and there is no any problem with editor itself, however I'm fighting two days in a row with extending standard block for custom tag, official documentation says for any additional feature to use <a href="https://quilljs.com/docs/api/" rel="noreferrer">quilljs api</a></p>
  
  <p>I've checked every api and issue on github and it seems to me, I'm on the right way, but I can't rid off this annoying error:</p>
  
  <pre><code>ERROR Error: [Parchment] Unable to create marker blot
  at new ParchmentError (scripts.bundle.js:148)
  at Object.create (scripts.bundle.js:178)
  at BlockBlot.insertAt (scripts.bundle.js:7323)
  at Block.insertAt (scripts.bundle.js:855)
  at Scroll.ContainerBlot.insertAt (scripts.bundle.js:3404)
  at ScrollBlot.insertAt (scripts.bundle.js:7060)
  at Scroll.insertAt (scripts.bundle.js:4252)
  at Editor.insertEmbed (scripts.bundle.js:2606)
  at scripts.bundle.js:1379
  at Quill.modify (scripts.bundle.js:1610)
  </code></pre>
  
  <p>What I'm trying to achieve is to add custom tag with non editable content inside. Here is my code: </p>
  
  <pre><code>...
  import {Editor} from 'primeng/editor';
  
  import * as Quill from 'quill';
  import * as Parchment from 'parchment';
  const Block = Quill.import('blots/block/embed');
  class BlockEmbed extends Parchment.default.Embed {}
  BlockEmbed.prototype = Block.prototype;
  
  export class Variable extends BlockEmbed {
  
    static blotName = 'marker';
    static tagName = 'marker';
  
    static create(value: any) {
      console.log(value);
      const node = (super.create(value) as any);
      node.innerHTML = '&lt;span contenteditable=false&gt;' + value + '&lt;/span&gt;';
      node.setAttribute('contenteditable', false);
      return node;
    }
  
  }
  
  Variable.blotName = 'marker';
  Variable.tagName = 'marker';
  
  Quill.register('formats/marker', Variable);
  
  @Component({
    selector: 'manager',
    templateUrl: './manager.component.html',
    styleUrls: ['./manager.component.css']
  })
  
  export class ManagerComponent implements OnInit, AfterViewInit {
  
     private quill: any;
    @ViewChild(Editor) editorComponent: Editor;
  
    ngOnInit() {}
  
   // based on primeng github issue this how we can get references to quill 
    ngAfterViewInit() {
      this.quill = this.editorComponent.quill;
    }
  
   variableSelected(event) {
      // grubbing string variable from event 
      this.quill.insertEmbed(this.cursor.index || 0, 'marker', event.value);
    }
  
  }
  </code></pre>
  
  <p>Based on these topics from quill github, my code should work fine:</p>
  
  <p><a href="https://github.com/quilljs/quill/issues/1236" rel="noreferrer">topic 1</a></p>
  
  <p><a href="https://github.com/quilljs/quill/issues/850" rel="noreferrer">topic 2</a></p>
  
  <p><a href="https://stackoverflow.com/questions/48204899/what-does-the-quill-js-formats-method-do">topic 3</a></p>
  
  <p><a href="https://stackoverflow.com/questions/45359148/overlapping-inline-annotations-with-quill">topic 4</a></p>
  
  <p>So could somebody help me to find what I'm missing or where my problem is? 
  Thanks in advance.</p>