slab / quill

Quill is a modern WYSIWYG editor built for compatibility and extensibility
https://quilljs.com
BSD 3-Clause "New" or "Revised" License
43.97k stars 3.41k forks source link

BlockEmbed Parchment changes not captured in delta #1418

Closed seandearnaley closed 7 years ago

seandearnaley commented 7 years ago

I would like to be able to create a custom blot with content that is preset, but which I can change.. I have figured out how to create a block embed blot from the medium clone guide, but I have noticed that the created node is not being captured in the delta contents- I have set some text inside a styled div, and I would like to save those changes... I would also like to use this process for things like dynamic captions... it's important that I can save the delta. node.innerText = 'test test test' sets the initial content fine in the editor, but the innerText is not captured, and changes are not bound to the delta-- I presume there must be some other way to include the content of the div.

Is there some way to either nest blots within blocks or can I bind the blot content with a delta somehow so that the change gets picked up? any helpful example code would be greatly appreciated. Thank you.

class EditModuleBlot extends BlockEmbed {
  static create(value) {
    let node = super.create();
    node.setAttribute('style', value.style);
    node.innerText = 'test test test';   //custom text not updating delta
    return node;
  }

  static value(node) {
    return {
      style: node.getAttribute('style')
    };
  }
}
EditModuleBlot.blotName = 'editmodule';
EditModuleBlot.tagName = 'div';

and this is my Vue.js method for invoking it:

clickAddModule() {
  let range = this.quillInstance.getSelection(true);
  this.quillInstance.insertText(range.index, '\n', Quill.sources.USER);
  this.quillInstance.insertEmbed(range.index + 1, 'editmodule', {
    style: 'padding:10px;border: 2px dashed black;'
  }, Quill.sources.USER);
  this.quillInstance.setSelection(range.index + 2, Quill.sources.SILENT);
}

The delta json does not capture the div innerText, is there a way to have it track the div contents as they are / and when they are edited?:

{
  "insert": {
    "editmodule": {
      "style": "padding:10px;border: 2px dashed black;"
    }
  }
},

Using Quill 1.2.4

seandearnaley commented 7 years ago

I kinda figured this out, I have to extend the value method with the innerText value, if there is a better of way doing this kind of thing let me know, but this is fine:

class EditModuleBlot extends BlockEmbed {
  static create(value) {
    let node = super.create();
    node.setAttribute('style', value.style);
    node.innerText = 'test test test';

    return node;
  }

  static value(node) {
    return {
      style: node.getAttribute('style'),
      text: node.innerText //now text will show up in the delta
    };
  }
}