Prevent handleInput when range is outside of the node wrapped by At

[rhysburnie]

In rare cases it's possible to trigger handleInput via the watch of members from a node external to the one wrapped by the At instance.

The happened in the following scenario:

• We have a rendered "mention" in a message thread
• Clicking it does several things one of which results in triggering an update to a data item which happens to also be in the At members pool.
• The watch of members kicks in
• the range in handleInput get created but its commonAncestorContainer is the text node belonging to the link in the message thread, completely external to the At instance
• Because the text value of the link includes @ ie. it is a display of a mention the mention detection based on the range kicks in
• This results in the At instance matching valid results and displaying the panel even tho no input was actually entered in the input wrapped by the At

To resolve this issue the following logic was added

• After the range is created, recursively walk the node tree from range.commonAncestorContainer to check it is inside of the At instances this.$el if it isn't exit the rest of the handleInput function
• This only occurs if keep is true which is currently only set in the watch as thats the only time it needs to happen

[11003]

Incorrect example：https://github.com/foxo-tech/vue-at/tree/vue3#custom-list
After modification：

<template>
    <div>
        <at v-model:value="text" :members="members" name-key="name">
            <template v-slot:item="members">
                <img class="img-avatar" :src="members.item.avatar">
                <span v-text="members.item.name"></span>
            </template>
            <div class="sss" :contenteditable="true"></div>
        </at>
    </div>
</template>

<script setup>
import At from 'vue-at' // for content-editable
import AtTa from 'vue-at/dist/vue-at-textarea' // for textarea
import {ref} from "vue";
const members = [
    {
        avatar: 'https://randomuser.me/api/portraits/men/2.jpg',
        name: 'myrtie.green'
    }, {
        avatar: 'https://randomuser.me/api/portraits/men/8.jpg',
        name: '椿木'
    }
]
const text = ref('')
</script>

<style>
.sss{
    border: 1px solid #ccc;
}
.img-avatar {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    border-radius: 5px;
}
</style>