jaredreich / jaredreich/pell

DOC: Vue3.2 composition example + suggestion

Open
#220 1 comment 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.