question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Question: is it possible to implement new line in editor.

See original GitHub issue

Is it possible to implement a new line <br /> on shift+enter like in general editing?

At the moment all new lines are wrapped in paragraphs which add top and bottom margin which is fine.

How do I achieve adittional functionality of new line with br tag?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7

github_iconTop GitHub Comments

10reactions
mindaugasnakrosiscommented, Aug 22, 2019

Solved it like this:

const Delta = Quill.import("delta");
const Break = Quill.import("blots/break");
const Embed = Quill.import("blots/embed");

const lineBreakMatcher = () => {
  let newDelta = new Delta();
  newDelta.insert({ break: "" });
  return newDelta;
};

class SmartBreak extends Break {
  length() {
    return 1;
  }
  value() {
    return "\n";
  }

  insertInto(parent, ref) {
    Embed.prototype.insertInto.call(this, parent, ref);
  }
}

SmartBreak.blotName = "break";
SmartBreak.tagName = "BR";
Quill.register(SmartBreak);

<ReactQuill
  modules={{
    clipboard: {
      matchers: [["BR", lineBreakMatcher]],
      matchVisual: false
    },
    keyboard: {
      bindings: {
        linebreak: {
          key: 13,
          shiftKey: true,
          handler: function(range) {
            const currentLeaf = this.quill.getLeaf(range.index)[0];
            const nextLeaf = this.quill.getLeaf(range.index + 1)[0];
            this.quill.insertEmbed(range.index, "break", true, "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, "break", true, "user");
            }
            // Now that we've inserted a line break, move the cursor forward
            this.quill.setSelection(range.index + 1, Quill.sources.SILENT);
          }
        }
      }
    }
  }}
/>
4reactions
maxfahlcommented, Mar 2, 2022

However, there is a specific case where we get an exception from Quill.

I’m getting this as well on occasions. This breaks the entire editor. I’ve tried finding a working solution for this shift+enter issue for a long time now, and have tried about 6 different solutions. None of them works entirely correct.

So sad the Quill devs don’t want to help with this.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Starting a new line of text in C - Stack Overflow
You can use the '\n' escape sequence to represent a newline (i.e. line-break) in your printf calls. Since your IDE/code editor most likely...
Read more >
Add line breaks within questions | iAuditor
This article shows you how to add line breaks within template questions via the web app and the mobile app.
Read more >
How to do a single newline - Meta Stack Exchange
The only way I know to do newlines is by pressing the Enter key twice, which makes a new paragraph, creating an empty...
Read more >
How do I edit the start of a new line in carousel text?
In a carousel widget, you can easily control line breaks via hitting return same way you would in any text editor. Line breaks...
Read more >
How to add a new line | Flexiple Tutorials | Python
Newline character in Python: ... In Python, the new line character “\n” is used to create a new line. When inserted in a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found