vue-advanced-chat
vue-advanced-chat copied to clipboard
Message text formatting not working when using named slot
Describe the bug
Message text formatting not working when using named slot
For some reason we needed to use named slot to replace the template of the message box . After we did this we discovered that all the text-formatting features are not working
Steps to reproduce
<template>
<div>
<vue-advanced-chat
height="calc(100vh - 20px)"
:current-user-id="currentUserId"
:rooms="JSON.stringify(rooms)"
:rooms-loaded="true"
:messages="JSON.stringify(messages)"
:messages-loaded="messagesLoaded"
@send-message="sendMessage($event.detail[0])"
@fetch-messages="fetchMessages($event.detail[0])"
>
<div slot="room-header">This is a new room header</div>
<div v-for="message in messages" :slot="'message_' + message._id" :key="message._id">
<div v-if="message.system">System message: {{ message.content }}</div>
<div v-else>Normal message: {{ message.content }}</div>
</div>
</vue-advanced-chat>
</div>
</template>
When using named slot for Message . can't use any formatting-text options
Expected behavior
Make use of text-formatting message feature like bold . italic , multiline ....
Additional context
"vue": "^2.6.14",
"vue-advanced-chat": "^2.0.3",
Indeed, I would need to make the text formatting service available outside, which can be a nice addition. But in the meantime, can't you customise messages using CSS only?
After thinking about it that's the purpose of slots. If you replace a part of the component by using slots, you canot expect to still use a part of the replaced component. Closing this as it's a won't fix.