DOC: Vue3.2 composition example + suggestion
- Dominant language
- JavaScript
- Stars
- 12k
- Forks
- 546
- PR merge metrics
- No merged PRs in 30d
Description
hi, LOVE the size of this library.
first lets get the suggestion out of the way. since the library has an init wont it make sense to have an "update" method as well? basicaly a wrapper for `instance.content.innerHTML = 'new value'` just to keep consitent?
----------
for vue3.2 im using this and it seems to work ok
EditorComponent.vue
```
import {
ref,
computed,
reactive,
onMounted,
watch
} from "vue";
import pell from 'pell'
const props = defineProps(["modelValue"]);
const emits = defineEmits(["update:modelValue"]);
const editor = ref(null);
let last_value = null;
const content = computed({
get(){
return props.modelValue
},
set(value){
// we emit the value back up to the parent component
emits("update:modelValue",value);
// need to know when to fire off thew watcher. dont want it updating the content with every char typed
last_value = value
}
})
onMounted(()=>{
editor.value = pell.init({
element: editor.value,
onChange: html => {
content.value = html
},
actions: [
'bold',
'italic',
'underline',
'strikethrough',
'heading1',
'heading2',
'paragraph',
'quote',
'olist',
'ulist',
'code',
'line',
]
})
// setting the initial values. not sure if they both needed but here goes
editor.value.content.innerHTML = content.value
last_value = content.value
})
watch(content,(to)=>{
// while typing we dont want the watcher to keep updating the value since that keep jumping our cursor to the begining
if (to != last_value){
editor.value.content.innerHTML = to
}
})
```
and usage
```
{{ content }}
set value
import EditorComponent from "@/components/form/EditorComponent.vue";
import {
ref,
} from "vue";
const content = ref(`<b>initial content</b>`);
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Review the Vue 3.2 example in EditorComponent.vue and its usage snippet, starting at pell.init and the modelValue watcher. Decide whether the issue's scope is documenting the Vue integration, proposing an update method, or both; done means the chosen scope is clearly represented in the project.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- documentation, frontend
- Issue type
- Documentation
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100