yaz

$3

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

It's simply and mini.

$3

to install node package:

``
npm install yaz
`

or use direct on web browser:
`html

`

$3


For example:
`html
Make bold

lorem ipsum dolor sit amet.

`

`js
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:

`css
.active {
font-weight: bold;
}
`

`diff
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.