yaz

yaz

is a execCommand implementation for modern html elements like strong and to fixes awkward things on editable body.

It's simply and mini.

Installation

to install node package:

npm install yaz

or use direct on web browser:

<script src="http://unpkg.com/yaz"></script>

Usage

For example:

<button id="btn-bold">Make bold</button>
<p contenteditable>lorem ipsum dolor sit amet.</p>

import yaz from 'yaz'
 
const toggleBold = () => {
    if (yaz.Range.isWrappedWith("STRONG")) {
        yaz.Range.undo("STRONG")
    } else {
        const element = document.createElement('strong')
        yaz.Range.surround(element)
    }
}
 
window['btn-bold'].onclick = toggleBold

That's it. For better UX lets impore the code:

.active {
    font-weight: bold;
}

import yaz from 'yaz'
 
+ const theButton = window['btn-bold']
 
const toggleBold = () => {
    if (yaz.Range.isWrappedWith("STRONG")) {
        yaz.Range.undo("STRONG")
+		theButton.classList.remove('active')
    } else {
        const element = document.createElement('strong')
        yaz.Range.surround(element)
+		theButton.classList.add('active')
    }
}
 
+ theButton.onclick = toggleBold

Now the button looks visible active if the selected range is bold.