.setValue to work on [contenteditable=true] elements

[renatodeleao]

Problem

<div contenteditable> is now widely adopted as the way to make Rich text editors on the web. I've noticed that we cannot set the value of these elementes using .setValue as it throws an error, and have to resort to manual workarounds.

Solution

when field.setValue is applied and field is <div contenteditable> element, internally VTU should override Elements textContent or innerHTML prop, depending on the value of attribute value is plaintext-only or 'true'. Since this is not widely supported, just going with innerHTML is probably easier.

test-utils/src/domWrapper.ts

Lines 125 to 131 in 05f76b6

	} else if (tagName === 'INPUT' || tagName === 'TEXTAREA') {
	element.value = value
	this.trigger('input')
	// trigger `change` for `v-model.lazy`
	return this.trigger('change')
	} else {

else if (this.attributes().contenteditable) { 
   element.innerHTML = value 
  
   this.trigger('input') 
   // trigger `change` for `v-model.lazy` 
   return this.trigger('change') 
}

Additional context

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable
• Not sure if being to naive or not and overlooking something. Let me know!

Cheers ✌️

[cexbrayat]

Hi @renatodeleao

That could be a good idea. Are you willing to open a PR that implements and documents this?

[renatodeleao]

@cexbrayat sure I can draft a PR. I'll let you know.

[lmiller1990]

If there is still interest, here is how it might look:

https://github.com/lmiller1990/vuejs-composition-api-course/blob/9b203f089f924508c0d1083ecd06e54e2d75ee61/tests/unit/PostWriter.spec.ts#L16-L27