Merge pull request #10 from antoine92190/text-formatting

Add text formatting

Author: antoine92190

README.md

@@ -101,11 +101,12 @@ You can import it as a custom component:
 | showFiles                | Boolean          | -        | true    |
 | showEmojis               | Boolean          | -        | true    |
 | showReactionEmojis       | Boolean          | -        | true    |
-| textMessages (7)         | Object           | -        | null    |
-| responsiveBreakpoint (8) | Number           | -        | 900     |
-| singleRoom (9)           | Number           | -        | false   |
-| theme (10)               | Sring            | -        | light   |
-| styles (11)              | Object           | -        | (10)    |
+| textFormatting (7)       | Boolean          | -        | true    |
+| textMessages (8)         | Object           | -        | null    |
+| responsiveBreakpoint (9) | Number           | -        | 900     |
+| singleRoom (10)          | Number           | -        | false   |
+| theme (11)               | Sring            | -        | light   |
+| styles (12)              | Object           | -        | (10)    |
 
 (1) `currentUserId` is required to display UI and trigger actions according to the user using the chat (ex: messages position on the right, etc.)
 
@@ -188,13 +189,23 @@ textMessages="{
 }"
 ```
 
-(8) `responsiveBreakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
+(8) `textFormatting` can be used to add text formatting. Currently, bold, italic, strikethrough and underline formatting are available and can be used in conjonction. You can disable text formatting by passing the prop as `:textFormatting="false"`.
 
-(9) `singleRoom` can be used if you never want to show the rooms list on the left. You still need to pass the `rooms` prop as an array with a single element.
+| Style             | Syntax          | Example                                | Output                                 |
+| ----------------- | --------------- | -------------------------------------- | -------------------------------------- |
+| Bold              | `* *`           | `*This is bold text*`                  | **This is bold text**                  |
+| Italic            | `_ _`           | `_This text is italicized_`            | _This text is italicized_              |
+| Strikethrough     | `~ ~`           | `~This was mistaken text~`             | ~~This was mistaken text~~             |
+| Underline         | `° °`           | `°This text is underlined°`            | <ins>This text is underlined</ins>     |
+| Nested formatting | `* *` and `_ _` | `*This text is _extremely_ important*` | **This text is _extremely_ important** |
 
-(10) `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
+(9) `responsiveBreakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
 
-(11) `styles` can be used to customize your own theme. Ex:
+(10) `singleRoom` can be used if you never want to show the rooms list on the left. You still need to pass the `rooms` prop as an array with a single element.
+
+(11) `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
+
+(12) `styles` can be used to customize your own theme. Ex:
 
 ```javascript
 styles="{

src/ChatWindow/ChatWindow.vue

@@ -10,6 +10,7 @@
 				:textMessages="t"
 				:showAddRoom="showAddRoom"
 				:showRoomsList="showRoomsList"
+				:textFormatting="textFormatting"
 				:isMobile="isMobile"
 				@fetchRoom="fetchRoom"
 				@addRoom="addRoom"
@@ -33,6 +34,7 @@
 				:textMessages="t"
 				:singleRoom="singleRoom"
 				:showRoomsList="showRoomsList"
+				:textFormatting="textFormatting"
 				:isMobile="isMobile"
 				:loadingRooms="loadingRooms"
 				:roomInfo="$listeners.roomInfo"
@@ -94,6 +96,7 @@ export default {
 		showFiles: { type: Boolean, default: true },
 		showEmojis: { type: Boolean, default: true },
 		showReactionEmojis: { type: Boolean, default: true },
+		textFormatting: { type: Boolean, default: true },
 		newMessage: { type: Object, default: null }
 	},
 

src/ChatWindow/FormatMessage.vue

@@ -0,0 +1,44 @@
+<template>
+	<div>
+		<div v-if="textFormatting">
+			<template v-for="(message, i) in linkifiedMessage">
+				<component
+					:is="message.types.indexOf('url') !== -1 ? 'a' : 'span'"
+					:key="i"
+					:class="{
+						'text-bold': message.types.indexOf('bold') !== -1,
+						'text-italic': message.types.indexOf('italic') !== -1,
+						'text-strike': message.types.indexOf('strike') !== -1,
+						'text-underline': message.types.indexOf('underline') !== -1
+					}"
+					:href="message.href"
+					target="_blank"
+					>{{ message.value }}</component
+				>
+			</template>
+		</div>
+		<div v-else>{{ content }}</div>
+	</div>
+</template>
+
+<script>
+import formatString from '../utils/formatString'
+
+export default {
+	name: 'format-message',
+
+	props: {
+		content: { type: [String, Number], required: true },
+		formatLinks: { type: Boolean, default: true },
+		textFormatting: { type: Boolean, required: true }
+	},
+
+	computed: {
+		linkifiedMessage() {
+			return formatString(this.content, this.formatLinks)
+		}
+	}
+}
+</script>
+
+<style></style>

src/ChatWindow/Message.vue

@@ -62,10 +62,10 @@
 					</div>
 
 					<div v-else-if="!message.file">
-						<span v-for="(message, i) in linkifiedMessage" :key="i">
-							<span v-if="message.bind" v-html="message.content"></span>
-							<span v-else>{{ message.content }}</span>
-						</span>
+						<format-message
+							:content="this.message.content"
+							:textFormatting="textFormatting"
+						></format-message>
 					</div>
 
 					<div class="image-container" v-else-if="isImage">
@@ -101,10 +101,10 @@
 								</div>
 							</transition>
 						</div>
-						<span v-for="(message, i) in linkifiedMessage" :key="i">
-							<span v-if="message.bind" v-html="message.content"></span>
-							<span v-else>{{ message.content }}</span>
-						</span>
+						<format-message
+							:content="this.message.content"
+							:textFormatting="textFormatting"
+						></format-message>
 					</div>
 
 					<div v-else class="file-message">
@@ -229,12 +229,11 @@ import vClickOutside from 'v-click-outside'
 import SvgIcon from './SvgIcon'
 import Loader from './Loader'
 import EmojiPicker from './EmojiPicker'
-
-import formatString from '../utils/formatString'
+import FormatMessage from './FormatMessage'
 
 export default {
 	name: 'message',
-	components: { SvgIcon, Loader, EmojiPicker },
+	components: { SvgIcon, Loader, EmojiPicker, FormatMessage },
 
 	directives: {
 		clickOutside: vClickOutside.directive
@@ -252,6 +251,7 @@ export default {
 		roomFooterRef: { type: HTMLDivElement },
 		newMessages: { type: Array },
 		showReactionEmojis: { type: Boolean, required: true },
+		textFormatting: { type: Boolean, required: true },
 		emojisList: { type: Object, required: true },
 		hideOptions: { type: Boolean, required: true }
 	},
@@ -310,9 +310,6 @@ export default {
 	},
 
 	computed: {
-		linkifiedMessage() {
-			return formatString(this.message.content, true)
-		},
 		showDate() {
 			return (
 				this.index > 0 &&

src/ChatWindow/Room.vue

@@ -94,6 +94,7 @@
 								:roomFooterRef="$refs.roomFooter"
 								:newMessages="newMessages"
 								:showReactionEmojis="showReactionEmojis"
+								:textFormatting="textFormatting"
 								:emojisList="emojisList"
 								:hideOptions="hideOptions"
 								@messageActionHandler="messageActionHandler"
@@ -264,6 +265,7 @@ export default {
 		showFiles: { type: Boolean, required: true },
 		showEmojis: { type: Boolean, required: true },
 		showReactionEmojis: { type: Boolean, required: true },
+		textFormatting: { type: Boolean, required: true },
 		loadingRooms: { type: Boolean, required: true },
 		roomInfo: { type: Function }
 	},

src/ChatWindow/RoomsList.vue

@@ -63,10 +63,11 @@
 						<span v-if="room.lastMessage.seen">
 							<svg-icon name="checkmark" class="icon-check" />
 						</span>
-						<span v-for="(message, i) in getLastMessage(room)" :key="i">
-							<span v-if="message.bind" v-html="message.content"></span>
-							<span v-else>{{ message.content }}</span>
-						</span>
+						<format-message
+							:content="getLastMessage(room)"
+							:formatLinks="false"
+							:textFormatting="textFormatting"
+						></format-message>
 					</div>
 				</div>
 			</div>
@@ -77,19 +78,20 @@
 <script>
 import Loader from './Loader'
 import SvgIcon from './SvgIcon'
+import FormatMessage from './FormatMessage'
 
 import filteredUsers from '../utils/filterItems'
-import formatString from '../utils/formatString'
 
 export default {
 	name: 'rooms-list',
-	components: { Loader, SvgIcon },
+	components: { Loader, SvgIcon, FormatMessage },
 
 	props: {
 		currentUserId: { type: [String, Number], required: true },
 		textMessages: { type: Object, required: true },
 		showRoomsList: { type: Boolean, required: true },
 		showAddRoom: { type: Boolean, required: true },
+		textFormatting: { type: Boolean, required: true },
 		isMobile: { type: Boolean, required: true },
 		rooms: { type: Array, required: true },
 		loadingRooms: { type: Boolean, required: true },
@@ -137,18 +139,18 @@ export default {
 		},
 		getLastMessage(room) {
 			if (room.users.length <= 2) {
-				return formatString(room.lastMessage.content)
+				return room.lastMessage.content
 			}
 
 			const user = room.users.find(
 				user => user._id === room.lastMessage.sender_id
 			)
 
 			if (user._id === this.currentUserId) {
-				return formatString(room.lastMessage.content)
+				return room.lastMessage.content
 			}
 
-			return `${user.username} - ${formatString(room.lastMessage.content)}`
+			return `${user.username} - ${room.lastMessage.content}`
 		}
 	}
 }

src/styles/helper.scss

@@ -51,3 +51,19 @@
 	margin-right: 15px;
 	border-radius: 50%;
 }
+
+.text-bold {
+	font-weight: bold;
+}
+
+.text-italic {
+	font-style: italic;
+}
+
+.text-strike {
+	text-decoration: line-through;
+}
+
+.text-underline {
+	text-decoration: underline;
+}