How to change Sitecore 8.2 RTE behavior to insert <p> tag instead of <br> on Enter?

Question

We recently upgraded to 8.2. When editing rich text, if I press Enter at the end of a paragraph, it creates a new paragraph, as expected; however, if my cursor is in the middle of a paragraph, when I press enter it inserts a <br/> tag in the middle of the paragraph and creates a new <p> tag below. My client wants it to instead insert </p><p> in the center of the paragraph on Enter, so that pressing enter breaks the paragraph into two paragraphs.

How do I modify the keypress behavior of the rich text editor in Sitecore 8.2? Ideally this behavior should be on keypress rather than on save.

Edit: To clarify, when editing the text in the rich text editor (by clicking the pencil icon), if I press enter in the middle of a paragraph, it adds

. However, if I am editing directly on the page, NOT in the rich text editor modal, if I press enter in the middle of a paragraph it adds

Answer 1

Figured this out... The script that handles in the inline editing of rich text fields in Page Editor is \sitecore\shell\Applications\Page Modes\InlineEditingUtil.js. The code that was causing the specific behavior of inserting a <br> when in the middle of a paragraph is here:

if (e.keyCode === 13) {
  var lineBreakTag = Sitecore.WebEditSettings.newLineBreak;
  if (lineBreakTag != "p" && lineBreakTag != "div" && lineBreakTag != "br") {
    return;
  }

  e.preventDefault();

  var selection = document.getSelection();
  var range = selection.getRangeAt(0);

  if (lineBreakTag == "br") {
    Sitecore.PageModes.InlineEditingUtil.insertBrLineBreak(selection, range);
    selection.removeAllRanges();
    selection.addRange(range);

    return;
  }

  var focusNode = selection.focusNode.parentNode;
  var contentEditable = focusNode.getAttribute("contenteditable");
  if (contentEditable) {
    focusNode = selection.focusNode;
  }

  var length = selection.focusNode.length;
  var startOrMiddlePosition = selection.focusOffset < length;
  var isParagraph = Sitecore.PageModes.InlineEditingUtil.isParagraph(focusNode);
  if (startOrMiddlePosition || !isParagraph) {
    Sitecore.PageModes.InlineEditingUtil.insertBrLineBreak(selection, range);
    selection.removeAllRanges();
    selection.addRange(range);

    return;
  }
......

Specifically this part:

if (startOrMiddlePosition || !isParagraph) {
    Sitecore.PageModes.InlineEditingUtil.insertBrLineBreak(selection, range);

which does this:

this.insertBrLineBreak = function (selection, range) {
    var brNode = document.createElement("br");
    range.insertNode(brNode);
    range.setStartAfter(brNode);
    range.collapse(true);
};

So I customized the file like so:

  if (!isParagraph) {
    Sitecore.PageModes.InlineEditingUtil.insertBrLineBreak(selection, range);
    selection.removeAllRanges();
    selection.addRange(range);

    return;
  }
  else if (startOrMiddlePosition){
    Sitecore.PageModes.InlineEditingUtil.insertParagraph(selection, range);
    selection.removeAllRanges();
    selection.addRange(range);

    return;
  }

---

this.insertParagraph = function (selection, range) {
  var text1 = range.startContainer.textContent.substring(0, range.startOffset).trim();
  var text2 = range.startContainer.textContent.substring(range.startOffset).trim();

  var p1 = document.createElement("p");
  $(p1).html(text1);

  var p2 = document.createElement("p");
  $(p2).html(text2);

  range.startContainer.remove()
  range.insertNode(p2);
  range.insertNode(p1);

  range.setStart(p2, 0);
  range.collapse(true);
};

Now instead of inserting a line break when in the middle of a paragraph, it will split the paragraph into two paragraph nodes.