My current challenge involves extending Quill with a custom Blot in order to allow newlines within <p> tags. Following the advice provided by the library author on a recent stackoverflow post, I have come up with the following code:
import * as Quill from 'quill';
const Delta = Quill.import('delta');
const Embed = Quill.import('blots/embed');
export class SoftLineBreakBlot extends Embed {
static blotName = 'softbreak';
static tagName = 'br';
static className = 'softbreak';
}
export function shiftEnterHandler(this: any, range) {
const currentLeaf = this.quill.getLeaf(range.index)[0];
const nextLeaf = this.quill.getLeaf(range.index + 1)[0];
this.quill.insertEmbed(range.index, "softbreak", true, Quill.sources.USER);
// Insert a second break if:
// At the end of the editor, OR next leaf has a different parent (<p>)
if (nextLeaf === null || currentLeaf.parent !== nextLeaf.parent) {
this.quill.insertEmbed(range.index, "softbreak", true, Quill.sources.USER);
}
// Now that we've inserted a line break, move the cursor forward
this.quill.setSelection(range.index + 1, Quill.sources.SILENT);
}
export function brMatcher(node, delta) {
let newDelta = new Delta();
newDelta.insert({softbreak: true});
return newDelta;
}
I am working with the ngx-quill wrapper for Quill in an Angular 10 project. Here is how my Quill module is set up:
QuillModule.forRoot({
format: 'json',
modules: {
keyboard: {
bindings: {
"shift enter": {
key: 13,
shiftKey: true,
handler: shiftEnterHandler
}
}
},
clipboard: {
matchers: [
[ "BR", brMatcher ]
],
}
},
}),
However, despite implementing Shift+Enter functionality, I am encountering an issue where the insertEmbed() call seems to have no effect even though the cursor moves forward. Any insights into what might be going wrong would be appreciated.