Как изменить размер шрифта конкретной строки и щелчок строки, чтобы отобразить размер шрифта в редакторе форматированного текста?

Question

Я новичок в JavaScript, на практике я работаю над текстовым редактором. но есть проблема, с которой я сталкиваюсь.

1. Я изменил размер шрифта в px с помощью javascript. но проблема в том, что я не могу изменить размер шрифта определенного текста / строки. для первой строки это работает отлично. но когда я изменяю размер шрифта следующей строки или параграфа, размер шрифта всего текстового редактора меняется.

2. Я хочу показать выбранный размер шрифта содержимого во входном номере. Я имею в виду, если я щелкну или выберу строку / пункт / слово, тогда размер шрифта этой выбранной строки / пункта будет отображаться в поле ввода номера в качестве значения.

Я пробовал эти строки.

<label for="">Font Size
<input class="font-size" type="number" min="0" max="72" value="14"></label>
<iframe name="textEditor" class="richTextEditor" frameborder="0"></iframe>

textEditor.document.designMode = 'on';
document.querySelector('.font-size').addEventListener('change', function () {
    let changedFontSize = document.querySelector('.font-size').value
    textEditor.document.execCommand('fontSize', false, changedFontSize)
    var fontElements = textEditor.document.getElementsByTagName("font")[0];
    fontElements.removeAttribute("size");
    fontElements.style.fontSize = changedFontSize + "px";
}); 

как я могу решить эту проблему?

вот живой пример: https://jsbin.com/bikobuputu/edit?html,js,output