CODEWITHSUNDEEP
quill
chimon2000
chimon2000

Reputation: 401

How can I disable deletion and focus on a BlockEmbed

I have a special blot that extends BlockEmbed. I would like to disable focus and backspace deletion in this block. Is this possible?

import Quill from 'quill';
import { html, render } from 'lit-html'

let Block = Quill.import('blots/block');
let BlockEmbed = Quill.import('blots/block/embed');

const template = (text) => html`
  <img src="https://prosemirror.net/img/dino/tyrannosaurus.png"/>
  <span>${text}</span>`;

export class BlockActionBlot extends BlockEmbed {
  static blotName = 'action';
  static className = 'block-action';
  static tagName = 'div';

  static create({ id, text }) {

    const node = super.create();
    node.dataset.text = text;
    node.dataset.id = id;

    render(template(text), node)

    return node;
  }

    static value(node) {
    return {
      id: node.dataset.id,
      text: node.dataset.text
    }
  }
}

Upvotes: 2

Views: 2269

Answers (3)

dipole_moment
dipole_moment

Reputation: 5854

Step 1 (assumption). You have a custom blot class that extends something like BlockEmbed

Step 2. Add the following to your custom blot class:

deleteAt() {
  return false
}

to your custom blot class.

Step 3. Set contenteditable to false when creating the blot in the create method

node.setAttribute('contenteditable', false);

Upvotes: 1

Jan
Jan

Reputation: 36

If you want your blot to be "static", the easiest way I found was to set node.contentEditable to false in the create method.

I hope this helps and the answer's not too late in your case (I ran into the very same issue today)...

Upvotes: 2

Damon Snyder
Damon Snyder

Reputation: 1372

To disable deletion you could override the deleteAt() method in the BlockActionBlot. Something like the following below. That should prevent deletion at the blot level.

export class BlockActionBlot extends BlockEmbed {
   // ...
   deleteAt() { }
}

See the blot methods for the signature of deleteAt and the other methods provided.

For disabling focus on the blot you could apply user-select: none and/or cursor: none to the blot. You'll probably want to add a class for the above css properties in the create method you have. You could do that with node.setAttribute('class', 'block-action') then apply the css to div.block-action in your loaded css.

Another option would be to try and intercept the delete key press. I think that approach, though doable, would be more complicated.

Upvotes: 0

Related Questions