How to use quill-delta - 10 common examples
To help you get started, we’ve selected a few quill-delta examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
quilljs / quill / modules / keyboard.js View on Github 
handleDelete(range, context) {
// Check for astral symbols
const length = /^[\uD800-\uDBFF][\uDC00-\uDFFF]/.test(context.suffix)
? 2
: 1;
if (range.index >= this.quill.getLength() - length) return;
let formats = {};
const [line] = this.quill.getLine(range.index);
let delta = new Delta().retain(range.index).delete(length);
if (context.offset >= line.length() - 1) {
const [next] = this.quill.getLine(range.index + 1);
if (next) {
const curFormats = line.formats();
const nextFormats = this.quill.getFormat(range.index, 1);
formats = AttributeMap.diff(curFormats, nextFormats) || {};
if (Object.keys(formats).length > 0) {
delta = delta.retain(next.length() - 1).retain(1, formats);
}
}
}
this.quill.updateContents(delta, Quill.sources.USER);
this.quill.focus();
}handleDelete(range, context) {
// Check for astral symbols
const length = /^[\uD800-\uDBFF][\uDC00-\uDFFF]/.test(context.suffix)
? 2
: 1;
if (range.index >= this.quill.getLength() - length) return;
let formats = {};
const [line] = this.quill.getLine(range.index);
let delta = new Delta().retain(range.index).delete(length);
if (context.offset >= line.length() - 1) {
const [next] = this.quill.getLine(range.index + 1);
if (next) {
const curFormats = line.formats();
const nextFormats = this.quill.getFormat(range.index, 1);
formats = AttributeMap.diff(curFormats, nextFormats) || {};
if (Object.keys(formats).length > 0) {
delta = delta.retain(next.length() - 1).retain(1, formats);
}
}
}
this.quill.updateContents(delta, Quill.sources.USER);
this.quill.focus();
}handleBackspace(range, context) {
// Check for astral symbols
const length = /[\uD800-\uDBFF][\uDC00-\uDFFF]$/.test(context.prefix)
? 2
: 1;
if (range.index === 0 || this.quill.getLength() <= 1) return;
let formats = {};
const [line] = this.quill.getLine(range.index);
let delta = new Delta().retain(range.index - length).delete(length);
if (context.offset === 0) {
// Always deleting newline here, length always 1
const [prev] = this.quill.getLine(range.index - 1);
if (prev) {
const curFormats = line.formats();
const prevFormats = this.quill.getFormat(range.index - 1, 1);
formats = AttributeMap.diff(curFormats, prevFormats) || {};
if (Object.keys(formats).length > 0) {
// line.length() - 1 targets \n in line, another -1 for newline being deleted
const formatDelta = new Delta()
.retain(range.index + line.length() - 2)
.retain(1, formats);
delta = delta.compose(formatDelta);
}
}
}
this.quill.updateContents(delta, Quill.sources.USER);
this.quill.focus();
}handleBackspace(range, context) {
// Check for astral symbols
const length = /[\uD800-\uDBFF][\uDC00-\uDFFF]$/.test(context.prefix)
? 2
: 1;
if (range.index === 0 || this.quill.getLength() <= 1) return;
let formats = {};
const [line] = this.quill.getLine(range.index);
let delta = new Delta().retain(range.index - length).delete(length);
if (context.offset === 0) {
// Always deleting newline here, length always 1
const [prev] = this.quill.getLine(range.index - 1);
if (prev) {
const curFormats = line.formats();
const prevFormats = this.quill.getFormat(range.index - 1, 1);
formats = AttributeMap.diff(curFormats, prevFormats) || {};
if (Object.keys(formats).length > 0) {
// line.length() - 1 targets \n in line, another -1 for newline being deleted
const formatDelta = new Delta()
.retain(range.index + line.length() - 2)
.retain(1, formats);
delta = delta.compose(formatDelta);
}
}
}
this.quill.updateContents(delta, Quill.sources.USER);
this.quill.focus();
}function handleBackspace(range, context) {
if (handleTables(range, this.quill)) return true; // handle tables
if (range.index === 0) return;
let [line, ] = this.quill.getLine(range.index);
let formats = {};
if (context.offset === 0) {
let curFormats = line.formats();
let prevFormats = this.quill.getFormat(range.index-1, 1);
formats = DeltaOp.attributes.diff(curFormats, prevFormats) || {};
}
// Check for astral symbols
let length = /[\uD800-\uDBFF][\uDC00-\uDFFF]$/.test(context.prefix) ? 2 : 1;
this.quill.deleteText(range.index-length, length, Quill.sources.USER);
if (Object.keys(formats).length > 0) {
this.quill.formatLine(range.index-length, length, formats, Quill.sources.USER);
}
this.quill.selection.scrollIntoView();
}function traverse(node, elementMatchers, textMatchers) { // Post-order
if (node.nodeType === node.TEXT_NODE) {
return textMatchers.reduce(function (delta, matcher) {
return matcher(node, delta);
}, new Delta());
} else if (node.nodeType === node.ELEMENT_NODE) {
return [].reduce.call(node.childNodes || [], (delta, childNode) => {
let childrenDelta = traverse(childNode, elementMatchers, textMatchers);
if (childNode.nodeType === node.ELEMENT_NODE) {
childrenDelta = elementMatchers.reduce(function (childrenDelta, matcher) {
return matcher(childNode, childrenDelta);
}, childrenDelta);
childrenDelta = (childNode[DOM_KEY] || []).reduce(function (childrenDelta, matcher) {
return matcher(childNode, childrenDelta);
}, childrenDelta);
}
return delta.concat(childrenDelta);
}, new Delta());
} else {
return new Delta();
}function traverse(scroll, node, elementMatchers, textMatchers, nodeMatches) {
// Post-order
if (node.nodeType === node.TEXT_NODE) {
return textMatchers.reduce((delta, matcher) => {
return matcher(node, delta, scroll);
}, new Delta());
}
if (node.nodeType === node.ELEMENT_NODE) {
return Array.from(node.childNodes || []).reduce((delta, childNode) => {
let childrenDelta = traverse(
scroll,
childNode,
elementMatchers,
textMatchers,
nodeMatches,
);
if (childNode.nodeType === node.ELEMENT_NODE) {
childrenDelta = elementMatchers.reduce((reducedDelta, matcher) => {
return matcher(childNode, reducedDelta, scroll);
}, childrenDelta);
childrenDelta = (nodeMatches.get(childNode) || []).reduce(
(reducedDelta, matcher) => {}
if (
(index >= scrollLength ||
this.scroll.descendant(BlockEmbed, index)[0]) &&
!text.endsWith('\n')
) {
consumeNextNewline = true;
}
this.scroll.insertAt(index, text);
const [line, offset] = this.scroll.line(index);
let formats = extend({}, bubbleFormats(line));
if (line instanceof Block) {
const [leaf] = line.descendant(LeafBlot, offset);
formats = extend(formats, bubbleFormats(leaf));
}
attributes = AttributeMap.diff(formats, attributes) || {};
} else if (typeof op.insert === 'object') {
const key = Object.keys(op.insert)[0]; // There should only be one key
if (key == null) return index;
this.scroll.insertAt(index, key, op.insert[key]);
}
scrollLength += length;
}
Object.keys(attributes).forEach(name => {
this.scroll.formatAt(index, length, name, attributes[name]);
});
return index + length;
}, 0);
normalizedDelta.reduce((index, op) => {it('insertText before', function() {
this.quill.updateContents(new Delta().insert('\n'));
expect(this.quill.root).toEqualHTML(`
<p><br></p>
<table>
<tbody>
<tr><td>a1</td><td>a2</td><td>a3</td></tr>
<tr><td>b1</td><td>b2</td><td>b3</td></tr>
</tbody>
</table>
`);
});reader.onload = (e) => {
let range = this.quill.getSelection(true);
this.quill.updateContents(new Delta()
.retain(range.index)
.delete(range.length)
.insert({ image: e.target.result })
, Emitter.sources.USER);
fileInput.value = "";
}
reader.readAsDataURL(fileInput.files[0]);quill-delta
Format for representing rich text documents and changes.
