How to prevent changes in a blot in quill.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

const parchment = Quill.import('parchment');

const ReadOnlyBlot = parchment.Embed.extend({
  // Define the methods to prevent editing
  value() {
    return null;
  },
  insertAt() {},
  deleteAt() {},
  optimize() {},
  prepare() {},
});

// Register the ReadOnlyBlot with Quill
Quill.register(ReadOnlyBlot, true);

// Create a new instance of Quill
const quill = new Quill('#editor', {
  theme: 'snow',
});

// Get the blot you want to make read-only
const blot = quill.getLeaf(0).next;

// Set the readOnly attribute to true for the blot
blot.domNode.setAttribute('readOnly', true);