contenteditableの最初の行をタグでラップさせる

README.md

DEMO

日本語入力確定を判定するImeCheckerクラスと併用して使用するのが望まれる。

index.html

<div id="editable" contenteditable="true" placeholder="入力..."></div>

script.js

let editable = document.getElementById('editable');
function wrapWithPTag(node) {
  // contenteditableの最初の要素がpタグで囲まれてないのでpタグでラップする
  let firstLine = node.firstChild;
  if (!!firstLine && firstLine.tagName != 'P') {
    let p = document.createElement('p');
    p.append(firstLine);
    node.prepend(p);
  }
}
editable.onkeyup = function(e) {
  if (e.keyCode === 13) {
    wrapWithPTag(e.target);
    // 改行した時に生成されるタグをpタグにする
    document.execCommand('formatBlock', false, 'p');
  }
}
editable.onblur = function(e) {
  wrapWithPTag(e.target);
}

style.css

#editable {
  background-color: #eee;
  padding: 1rem;
}

#editable[contenteditable=true]:empty:before {
  content: attr(placeholder);
  color: #999;
  display: block; /* For Firefox */
}

class化

export default class FormatInsideOfContenteditable {
  static wrapFirstLineWithTag(node, tagName) {
    let firstLine = node.firstChild;
    return new Promise(resolve => {
      if (!!firstLine && firstLine.tagName != 'P') {
        let tag = document.createElement(tagName);
        tag.append(firstLine);
        node.prepend(tag);
        resolve(node);
      }
    });
  }
}