DOC: Vue3.2 composition example + suggestion about pell

[WilliamStam]

New version time, This brings in being able to add a class / style dynamically to the content area (min-height etc)

EditorComponent.vue

<template>
    <div ref="editor" class="editor-area"></div>
</template>
<script setup>
import {
    ref,
    computed,
    reactive,
    onMounted,
    watch
} from "vue";
import pell from "pell";

const props = defineProps([
    "modelValue",
    "style",
    "class"
]);
const emits = defineEmits(["update:modelValue"]);
const editor = ref(null);
let last_value = null;
const content = computed({
    get() {
        return props.modelValue;
    },
    set(value) {
        emits("update:modelValue", value);
        last_value = value;
    }
});

const classes = {
    actionbar: "editor-nav",
    button: "editor-btn btn",
    content: "editor-content form-control",
    selected: "editor-btn-selected"
};

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",
        ],
        classes: Object.assign({}, classes, {content: classes.content + " " + props.class})
    });
    editor.value.content.innerHTML = content.value;
    last_value = content.value;

});

watch(content, (to) => {
    if (to != last_value) {
        editor.value.content.innerHTML = to;
    }
});


const styles = ref(props.style);
const watch_classes = computed(() => props.class);
watch(watch_classes, (to) => {
    editor.value.getElementsByClassName("editor-content")[0].className = classes.content + " " + to;
});
const watch_styles = computed(() => props.style);
watch(watch_styles, (to) => {
    editor.value.getElementsByClassName("editor-content")[0].style.cssText = to;
});

</script>

usage

<EditorComponent v-model="content"  :class="classes" :style="styles"></EditorComponent>

<button @click.prevent="classes = `bg-warning`">Set class .bg-warning</button>
<button @click.prevent="classes = `bg-danger`">Set class .bg-danger</button>
<button @click.prevent="styles = `min-height:600px;`">Set style min-height to 600</button>
 <button @click.prevent="styles = `min-height:300px; background:purple;`">Set style min-height to 300 and background to purple</button>
<button @click.prevent="styles=null; classes=null">Reset </button>

...

const classes = ref(null);
const styles = ref(null);