Quill: How to add difference between ENTER and SHIFT+ENTER

[fpavlic]

Hi Jason,

Just wonder how can I add difference between paragraph and new line entries.

For example ENTER should always create new paragraph, but SHIFT+ENTER should add brake-line.

Thanks for you help,
Filip

[jhchen]

252

[VaelVictus]

2019 Developers: Your best shot is here https://codepen.io/mackermedia/pen/gmNwZP

Quill really is great. But, from the blog:

Quill aims to be the defacto rich text editor for the web.

Yet the document model you are so proud of cannot simply produce a <br> with a shift-enter. Please reconsider this feature.

[robertu7]

@VaelVictus your sample is buggy.

You can reproduce with:

1. clear up all content
2. hit Enter
3. Newline is appended but cursor isn't moved

[VaelVictus]

Which, indeed, is why I said it was your _best shot_ in 2019.

[robertu7]

@VaelVictus you should try this workaround, works fine for me :)

[tomasbonco]

Original thread is locked now, but I had issues with workarounds and Deltas they produced. When I did setContents and getContents I got a different version compared to the original. So I tried to solve the issue myself and came with a solution that works pretty well for me. The whole idea is to place an empty <div></div> there. Reasons:

1. A div is a block element and will cause text to break.
2. It's a paired tag. So we can use standard Quill's Embed functionality.

The only issue I had, was forcing Quill not to place any content into the <div>. That's why I set height to 0 and that solved the issue.

So the whole code looks like this:

import Quill from 'quill'

const Embed = Quill.import('blots/embed');

export class SmartBreakBlot extends Embed
{
    static create()
    {
        const node: HTMLElement = super.create();
        node.style.height = '0px';
        return node
    }
}

SmartBreakBlot.blotName = 'smartbreak';
SmartBreakBlot.tagName = 'div';

Quill.register( 'formats/smartbreak', SmartBreakBlot )

...

keyboard:
{
    bindings:
    {
        shiftEnter:
        {
            key: 13,
            shiftKey: true,
            handler: ( range ) =>
            {
                this.editor.insertEmbed(range.index, 'smartbreak', true, 'user');
                this.editor.setSelection( range.index + 1, 'silent' );

                return false
            }
        }
    }
}

Because the original issue is opened for almost 4-5 years now, I hope this helps.

[q2apro]

Shift + Enter should 100 % come by default.

Quill gets hyped but is still missing standards that other editors have out-of-the-box.

And this issues was brought up already in 2014 ...

Personally I am sticking to SCEditor as long as this is not default.

This "heavy" workaround seems to work: https://codepen.io/mackermedia/pen/gmNwZP

[VaelVictus]

Thanks for that heavy workaround link. I have actually since adopted Pell and this was a driver to do so.

[Mistralys]

I must admit I was surprised when I realized that Shift + Enter does not work out of the box. Differentiating between newlines and paragraphs is why there are <br> and <p> tags in the first place, and they are not interchangeable. <p> tags can be styled, while <br> tags cannot. The difference between the two is a big part in styling HTML documents, and since Quill produces HTML, I expected it to support both.

I quite like Quill, and how easy it is to integrate - I will have a look at the solutions proposed so far to add this functionality, as everyone who will be using it in my project know how to use and need both paragraphs and newlines.

I really think it should be added to the core :+1:

[vasva]

I have same issue course I tried to use Devextreme HTMLEditor which is using Quill, there I see no change to replace it easily. When I try hack it via direct DOM injection Quill removes BR immediately. I hate it boths :(

[vasva]

@VaelVictus you should try this workaround, works fine for me :)

It wourks when u use pure Quiil, but no chance when it is wrapped

[IcyFoxe]

@VaelVictus your sample is buggy.

You can reproduce with:

1. clear up all content
2. hit Enter
3. Newline is appended but cursor isn't moved

I might not understand that code entirely, but changing:

length() {
  return 1
}

inside the class to:

length() {
  return 0
}

fixed the issue for me.