Add prop to overwrite emoji data source fix #391 (#393)

Author: NINI1988

README.md

@@ -86,7 +86,9 @@ Register `vue-advanced-chat` as a web component in your [config file](https://vu
 
 ```javascript
 compilerOptions: {
-  isCustomElement: tagName => tagName === 'vue-advanced-chat'
+  isCustomElement: tagName => {
+    return tagName === 'vue-advanced-chat' || tagName === 'emoji-picker'
+  }
 }
 ```
 
@@ -254,6 +256,7 @@ Otherwise, you need to pass those props as strings. For example: `[messages]="JS
 | `theme`(26)                         | `light` / `dark` | -        | `light`                                                                                                           |
 | `accepted-files`(27)                | String           | -        | `*`                                                                                                               |
 | `styles`(28)                        | [String, Object] | -        | (26)                                                                                                              |
+| `emoji-data-source`                 | String           | -        | `https://cdn.jsdelivr.net/npm/emoji-picker-element-data@%5E1/en/emojibase/data.json`                              |
 
 **(1)** `current-user-id` is required to display UI and trigger actions according to the user using the chat (ex: messages position on the right, etc.)
 

demo/vite.config.js

@@ -7,7 +7,9 @@ export default defineConfig({
 		vue({
 			template: {
 				compilerOptions: {
-					isCustomElement: tagName => tagName === 'vue-advanced-chat'
+					isCustomElement: tagName => {
+						return tagName === 'vue-advanced-chat' || tagName === 'emoji-picker'
+					}
 				}
 			}
 		})

src/components/EmojiPickerContainer/EmojiPickerContainer.vue

@@ -28,7 +28,11 @@
 						display: emojiPickerTop || !emojiReaction ? 'initial' : 'none'
 					}"
 				>
-					<emoji-picker v-pre ref="emojiPicker" v-if="emojiOpened" />
+					<emoji-picker
+						v-if="emojiOpened"
+						ref="emojiPicker"
+						:data-source="emojiDataSource"
+					/>
 				</div>
 			</transition>
 		</template>
@@ -50,7 +54,8 @@ export default {
 		emojiReaction: { type: Boolean, default: false },
 		positionTop: { type: Boolean, default: false },
 		positionRight: { type: Boolean, default: false },
-		messageId: { type: String, default: '' }
+		messageId: { type: String, default: '' },
+		emojiDataSource: { type: String, default: undefined }
 	},
 
 	emits: ['add-emoji', 'open-emoji'],

src/lib/ChatWindow.vue

@@ -67,6 +67,7 @@
 				:accepted-files="acceptedFiles"
 				:templates-text="templatesTextCasted"
 				:username-options="usernameOptionsCasted"
+				:emoji-data-source="emojiDataSource"
 				@toggle-rooms-list="toggleRoomsList"
 				@room-info="roomInfo"
 				@fetch-messages="fetchMessages"
@@ -207,7 +208,8 @@ export default {
 		usernameOptions: {
 			type: [Object, String],
 			default: () => ({ minUsers: 3, currentUser: false })
-		}
+		},
+		emojiDataSource: { type: String, default: undefined }
 	},
 
 	emits: [

src/lib/Room/Room.vue

@@ -92,6 +92,7 @@
 								:username-options="usernameOptions"
 								:message-selection-enabled="messageSelectionEnabled"
 								:selected-messages="selectedMessages"
+								:emoji-data-source="emojiDataSource"
 								@message-added="onMessageAdded"
 								@message-action-handler="messageActionHandler"
 								@open-file="openFile"
@@ -151,6 +152,7 @@
 			:init-reply-message="initReplyMessage"
 			:init-edit-message="initEditMessage"
 			:dropped-files="droppedFiles"
+			:emoji-data-source="emojiDataSource"
 			@update-edited-message-id="editedMessageId = $event"
 			@edit-message="$emit('edit-message', $event)"
 			@send-message="$emit('send-message', $event)"
@@ -218,7 +220,8 @@ export default {
 		emojisSuggestionEnabled: { type: Boolean, required: true },
 		scrollDistance: { type: Number, required: true },
 		templatesText: { type: Array, default: null },
-		usernameOptions: { type: Object, required: true }
+		usernameOptions: { type: Object, required: true },
+		emojiDataSource: { type: String, default: undefined }
 	},
 
 	emits: [

src/lib/Room/RoomFooter/RoomFooter.vue

@@ -130,6 +130,7 @@
 						<emoji-picker-container
 							:emoji-opened="emojiOpened"
 							:position-top="true"
+							:emoji-data-source="emojiDataSource"
 							@add-emoji="addEmoji"
 							@open-emoji="emojiOpened = $event"
 						>
@@ -241,7 +242,8 @@ export default {
 		audioSampleRate: { type: Number, required: true },
 		initReplyMessage: { type: Object, default: null },
 		initEditMessage: { type: Object, default: null },
-		droppedFiles: { type: Array, default: null }
+		droppedFiles: { type: Array, default: null },
+		emojiDataSource: { type: String, default: undefined }
 	},
 
 	emits: [
@@ -267,7 +269,7 @@ export default {
 			activeUpOrDownEmojis: null,
 			activeUpOrDownUsersTag: null,
 			activeUpOrDownTemplatesText: null,
-			emojisDB: new Database(),
+			emojisDB: new Database({ dataSource: this.emojiDataSource }),
 			emojiOpened: false,
 			keepKeyboardOpen: false,
 			filteredEmojis: [],

src/lib/Room/RoomMessage/MessageActions/MessageActions.vue

@@ -43,6 +43,7 @@
 							:emoji-reaction="true"
 							:position-right="message.senderId === currentUserId"
 							:message-id="message._id"
+							:emoji-data-source="emojiDataSource"
 							@add-emoji="sendMessageReaction"
 							@open-emoji="openEmoji"
 						>
@@ -107,7 +108,8 @@ export default {
 		showReactionEmojis: { type: Boolean, required: true },
 		messageHover: { type: Boolean, required: true },
 		hoverMessageId: { type: [String, Number], default: null },
-		hoverAudioProgress: { type: Boolean, required: true }
+		hoverAudioProgress: { type: Boolean, required: true },
+		emojiDataSource: { type: String, default: undefined }
 	},
 
 	emits: [

src/lib/Room/RoomMessage/RoomMessage.vue

@@ -171,6 +171,7 @@
 							:message-hover="messageHover"
 							:hover-message-id="hoverMessageId"
 							:hover-audio-progress="hoverAudioProgress"
+							:emoji-data-source="emojiDataSource"
 							@update-message-hover="messageHover = $event"
 							@update-options-opened="optionsOpened = $event"
 							@update-emoji-opened="emojiOpened = $event"
@@ -262,7 +263,8 @@ export default {
 		linkOptions: { type: Object, required: true },
 		usernameOptions: { type: Object, required: true },
 		messageSelectionEnabled: { type: Boolean, required: true },
-		selectedMessages: { type: Array, default: () => [] }
+		selectedMessages: { type: Array, default: () => [] },
+		emojiDataSource: { type: String, default: undefined }
 	},
 
 	emits: [