Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

.setValue to work on [contenteditable=true] elements #2390

Open
renatodeleao opened this issue Mar 27, 2024 · 3 comments
Open

.setValue to work on [contenteditable=true] elements #2390

renatodeleao opened this issue Mar 27, 2024 · 3 comments
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@renatodeleao
Copy link
Contributor

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.

} 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

Cheers ✌️

@cexbrayat
Copy link
Member

Hi @renatodeleao

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

@cexbrayat cexbrayat added enhancement New feature or request good first issue Good for newcomers labels Apr 3, 2024
@renatodeleao
Copy link
Contributor Author

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

@lmiller1990
Copy link
Member

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

3 participants