Как сделать чтоб bold работал только на одной строчке в contenteditable

Я делаю простенький редактор текста с помощью div с contenteditable и js. Возникла такая проблема, если одни раз выполнить эту команду:

document.execCommand('bold', false, string);

То она применяется ко всему тексту, а хотелось бы сделать чтоб она применялась только к одной строке.

var redactor = document.getElementById('window-redactor');
var tools = document.getElementById('tools');

document.execCommand('defaultParagraphSeparator', false, 'p');
document.onmouseup = function(e) {
    var s = '';

    if (window.getSelection) {
        if (window.getSelection().toString()) {
            s = window.getSelection().toString();
        }

    } else if (window.selection && document.selection.type != 'Control') {
        if (document.selection.createRange().text) {
            s = document.selection.createRange().text;
        }
    }

    if (s != '') {
        tools.style.bottom = e.clientY;
        tools.style.left = e.clientX;
        tools.style.display = 'block';


        if (e.target.id == 'bold') {
            redactor.focus();
            document.execCommand('bold', false, s);
        }
    }
}
/* setting entry field */
#redactor {
    margin-top: 20px;
    padding: 10px;

    width: 100%;
    background: white;
    outline: none;
    font-size: 20px;
}

/* setting tools */
#tools {
    position: absolute;
    padding: 3px;
    background: #0A0B0A;
    border-radius: 10px;
}

#tools button {
    width: 40px;
    height: 40px;

    background: #383838;
    color: white;
    font-weight: bolder;
    font-size: 22px;
    border-radius: 10px;
    border: none;
}

#tools button:hover {
    background: #282828; 
    cursor: pointer;
}
<link rel="stylesheet" href="/static/css/new_post.css">
<script src="/static/js/new_post.js"></script>

<div id="window-redactor">
    <div id="redactor" contenteditable="true"></div>
</div>

<div id="tools" style="display: none;">
    <button type="button" id="bold">B</button>
</div>


Ответы (0 шт):