In Quilljs Editor, How to insert an undeletable block-level element?

Question

Here I customize a block element by Quill.import('blots/block/embed') which I insert into the editor content. I would like to know that if there is any way to make it undeletable, therefore the user could not delete it or edit it? Thanks a lot.

Answer 1

I had a similar issue and the solution I came up with was to intercept the keyboard binding for backspace. In the example here I have a custom 'video' blot. So, if backspace is entered and the cursor is on or directly after a video, it does nothing. Here is the documentation for the Keyboard Module for reference: https://quilljs.com/docs/modules/keyboard/

let _this = this;    
this.quill = new Quill(this.contentElement, {
  modules: {
    keyboard: {
      bindings: {
        video: {
          key: 'backspace',
          handler: function(range, keycontext) {
            let format = _this.quill.getFormat(range.index - 1);
            if (!format.video && !keycontext.format.video) {
              // propogate to Quill's default
              return true;
            } // else do nothing to prevent deleting video
          }
        }
      }
    }
  },
  theme: 'snow'
});

Also, another thing to keep in mind, the editor has contenteditable="true", which your custom blot will inherit. So you'll probably want to set contenteditable="false" on the node in your custom blot.