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

[mindaugasnakrosis]

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?

[mindaugasnakrosis]

@alexkrolick @daggmano @notseenee any ideas?

[mindaugasnakrosis]

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