<template>
<div class="m-editor type01">
<div class="content" v-if="!viewDescription" @click="focus"><span class="placeholder">{{ placeholder }}</span></div>
<div class="content" v-else v-html="viewDescription" @click="focus"></div>
</div>
</template>
<script>
import {Link} from '@inertiajs/inertia-vue';
export default {
props : ["description", "placeholder", "onlyShow"],
components: {Link},
data(){
return {
}
},
methods: {
focus(){
if(!this.onlyShow)
this.$emit("focus");
},
},
computed: {
viewDescription() {
if(this.description){
let result = "";
let words = this.description.split(/(#[^\s#]+)|(@[^\s@]+)/g);
words = words.filter(word => word !== undefined);
words.map(word => {
if(word && word[0] === "#") {
result += `<span class='hashtag'>${word}</span>`;
}else if(word && word[0] === "@"){
result += `<span class='quote'>${word}</span>`;
}else{
result += `${word}`;
}
});
return result;
}
return "";
},
},
mounted() {
}
}
</script>