vue-advanced-chat icon indicating copy to clipboard operation
vue-advanced-chat copied to clipboard

Message text formatting not working when using named slot

Open Mickaz89 opened this issue 2 years ago • 1 comments

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",

Mickaz89 avatar Sep 22 '22 12:09 Mickaz89

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?

antoine92190 avatar Sep 22 '22 14:09 antoine92190

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.

antoine92190 avatar Oct 30 '22 15:10 antoine92190