tip: prefill an empty editor with `<p><br></p>` to avoid a small bug

[dvtan]

like this:

if (initBody) {
	editor.content.innerHTML = initBody;
} else {
	editor.content.innerHTML = '<p><br></p>'
}

Most of the time images get inserted inside <p></p> tags. But if the user starts uploading images before he writes even a single letter, the image will be inserted at the top level since there's nothing else there.

Oh and will also need this in case user writes something and deletes it all again (in which case Pell sets it back to completely blank):

onChange: (html) => {
	if (html === '') {
		editor.content.innerHTML = '<p><br></p>'
	}
}

[jaredreich]

@dvtan thanks! Slotted this for v2.

[dvtan]

Just realized this particular method won't work with https://github.com/jaredreich/pell/pull/140 because it uses a :empty selector, which the <p><br></p> breaks. So instead, I leave everything as it previously was, and only insert <p><br></p> if it's empty just before runningexec('insertImage'). Seems like a cleaner solution to me.

[algorys]

Maybe only review image handler:

result: () => {
      const url = window.prompt('Enter the image URL')
      if (url) document.execCommand('insertHTML', false, '<p><img src="' + url '"></img></p>');
}

But it weighs down the function ... so to see if this is the goal of this library ?

[gagdiez]

I fixed it using:

var pell_focused = false

var pell_content = document.getElementsByClassName('pell-content')[0]
pell_content.addEventListener('focus', ()=>{pell_focused=true}, false)

function pell_add_image(url){
  if (!pell_focused){
    pell_content.innerHTML += "<img src='"+url+"'>"
    $('html-output').textContent = pell_content.innerHTML
    pell_content.focus()
  }
  else{
    pell.exec('insertImage', url)
  }