ngx-quill / quill.js custom blot manipulation

Question

I've managed to set up ngx-quill in angular 7 and I would need to create a custom text blot which would look as follows (simplified):

... /*** Custom blot: [its editable text content] ***/ ...

I have to be able to do the following:

set its editable content on create AND afterwards at any time
on pressing enter (just to insert line break in the editable area), I don't want it to split the blot or do any complicated magic, I just want to see a line break in the area

My custom blot so far:

/**
 * REGISTER BLOT: CUSTOM
 */
var Embed = Quill.import('blots/embed');
class QuillBlotCustom extends Embed {
  static blotName: string = 'cmd-custom';
  static className: string = 'quill-cmd-custom';
  static tagName: string = 'span';

  static create(value: { cmd: any, ... }) {
    let node = super.create(value);
    const content = value.cmd.content ? value.cmd.content : '';
    node.innerHTML = `<span>${value.cmd.prefix}${value.cmd.title}: <span contenteditable=true>${content}</span>${value.cmd.postfix}</span>`;
    node.style.color = value.cmd.color;
    node.style.backgroundColor = value.cmd.bgColor;
    node.setAttribute('valueCmd', JSON.stringify(value.cmd));
    node.addEventListener('keydown', function(e) {
      // handling Enter key
      if (e.keyCode === 13) {
        e.preventDefault();
        // HOW TO ACCESS QUILL INSTANCE FROM HERE?

      }
    }); 
    setTimeout(() => {

    return node;
  }

  static value(node) {
    const val = {
      cmd: JSON.parse(node.getAttribute('valueCmd')),
      //text: node.firstElementChild.firstElementChild.firstElementChild.innerText,
      node: node
    };
    val.cmd.content = node.firstElementChild.firstElementChild.firstElementChild.innerText

    return val;
  }

  update(mutations: MutationRecord[], context: {[key: string]: any}) {
    console.log('update');
  }
}

Quill.register({
  'formats/cmd-custom': QuillBlotCustom
});

I can easily create such a blot with arbitrary content by calling

const cmd = ...;
this.quill.insertEmbed(range.index, 'cmd-custom', { cmd: cmd });

And then I'm stuck at how to proceed from this point.

So:

How can I update the custom blot's content after it's created?
How can I access any part of my code (Quill instance and so on) from the custom blot's class?
How can I change the behaviour of the Enter key from exiting the editable area to just simply inserting a line break and letting the user to continue typing?

Every help is appreciated! :)

score 1 · Answer 1 · answered Jul 28 '19 at 00:40

Although likely not the answer you're looking for I may have some insight for you.

By the way I'm currently struggling with this same issue and was coming here to look for guidance on what the best practice may be.

A potential solution for you however is to add and expose your own functions on the Blot. From their you can attach whatever you'd like from your constructor to the node itself before returning it.

Then when you have a modification of data external to quill you can use quill to query all your blots of a type to then call those external functions.

ngx-quill / quill.js custom blot manipulation

1 Answers1