angular - Utvide Quill for å støtte myke linjeskift

Jeg prøver å utvide Quill med en tilpasset Blot for å tillate linjeskift inne i <p>-tagger. I henhold til rådet gitt av bibliotekets forfatter, endte jeg til slutt opp med kode som ser slik ut:

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;
}

Jeg bruker ngx-quill-innpakningen rundt Quill, i et Angular 10-prosjekt. Min Quill-modul er definert slik:

QuillModule.forRoot({
      format: 'json',
      modules: {
        keyboard: {
          bindings: {
            "shift enter": {
              key: 13,
              shiftKey: true,
              handler: shiftEnterHandler
            }
          }
        },
        clipboard: {
          matchers: [            
             [ "BR", brMatcher ]
          ],          
        }
      },
    }),

Men hver gang jeg trykker Shift+Enter, beveger markøren seg fremover, men insertEmbed()-kallet ser ut til å ikke ha noen effekt. Hva gjør jeg feil?

Svar #1

Det ser ut som du bare glemte å kalle Quill.register(SoftLineBreakBlot)

Så :

...
export class SoftLineBreakBlot extends Embed {
    static blotName = 'softbreak';
    static tagName = 'br';  
    static className = 'softbreak';
}
...

Blir :

...
export class SoftLineBreakBlot extends Embed {
    static blotName = 'softbreak';
    static tagName = 'br';  
    static className = 'softbreak';
}
Quill.register(SoftLineBreakBlot);
...

Relaterte artikler