Fix twemoji paths

tapestry-tool · Sep 24, 2024 · 7254e51 · 7254e51
1 parent fff07f5
commit 7254e51
Show file tree

Hide file tree

Showing 11 changed files with 178 additions and 54 deletions.
diff --git a/templates/vue/package-lock.json b/templates/vue/package-lock.json
diff --git a/templates/vue/package.json b/templates/vue/package.json
@@ -94,7 +94,7 @@
     "prettier": "^1.18.2",
     "sass-loader": "^13.0.0",
     "style-loader": "^3.3.1",
-    "twemoji": "^13.1.0",
+    "twemoji": "^14.0.2",
     "vue-eslint-parser": "^9.0.2",
     "vue-loader": "^15.9.2",
     "vue-template-compiler": "^2.4.4",

diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/CircleView/index.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/CircleView/index.vue
@@ -72,11 +72,7 @@
       "
     />
     <div class="user">
-      <img
-        height="40"
-        width="40"
-        src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f60a.png"
-      />
+      <img height="40" width="40" :src="`${TWEMOJI_PATH}72x72/1f60a.png`" />
     </div>
     <avataaars
       class="user"
@@ -110,7 +106,6 @@
 </template>
 
 <script>
-import Twemoji from "twemoji"
 import avatarOptions from "@/components/modals/UserSettingsModal/avatarOptions.js"
 import Helpers from "@/utils/Helpers"
 import client from "@/services/TapestryAPI"
@@ -122,6 +117,7 @@ import CircleToggle from "./CircleToggle"
 import { CircleStates } from "./states"
 import Avataaars from "vuejs-avataaars"
 import { mapState } from "vuex"
+import { TWEMOJI_PATH } from "@/utils/constants"
 
 const CONNECTION_SPACE = 0
 const CONNECTION_OFFSET = 46
@@ -180,6 +176,8 @@ export default {
   },
   data() {
     return {
+      TWEMOJI_PATH: TWEMOJI_PATH,
+
       activeCircle: CircleStates.All,
       activeCircleOrig: null,
       state: States.Home,
@@ -245,9 +243,7 @@ export default {
   },
   methods: {
     getEmojiImgFromUnicode(unicode) {
-      let div = document.createElement("div")
-      div.textContent = unicode
-      return Twemoji.parse(div).innerHTML
+      return Helpers.getEmojiImgFromUnicode(unicode)
     },
     handleDragStart({ x, y, connection }) {
       this.activeCircleOrig = this.activeCircle

diff --git a/...tes/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/AddCommunityForm.vue b/...tes/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/AddCommunityForm.vue
@@ -20,7 +20,7 @@
           <div id="emoji-picker" style="position: relative">
             <twemoji-picker
               id="twemoji-picker"
-              twemojiPath="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/"
+              :twemojiPath="TWEMOJI_PATH"
               :emojiData="emojiAllData"
               :emojiGroups="emojiGroups"
               :skinsSelection="true"
@@ -77,12 +77,13 @@
 </template>
 
 <script>
-import Twemoji from "twemoji"
 import { TwemojiPicker } from "@kevinfaguiar/vue-twemoji-picker"
 import EmojiAllData from "@kevinfaguiar/vue-twemoji-picker/emoji-data/en/emoji-all-groups.json"
 import EmojiGroups from "@kevinfaguiar/vue-twemoji-picker/emoji-data/emoji-groups.json"
 import client from "@/services/TapestryAPI"
 import { MAX_COMMUNITY_NAME_LENGTH } from "../cos.config"
+import { TWEMOJI_PATH } from "@/utils/constants"
+import Helpers from "@/utils/Helpers"
 
 export default {
   components: {
@@ -100,6 +101,8 @@ export default {
   },
   data() {
     return {
+      TWEMOJI_PATH: TWEMOJI_PATH,
+
       showPicker: false,
       isLoading: false,
       isInputTouched: false,
@@ -189,9 +192,7 @@ export default {
   },
   methods: {
     getEmojiImgFromUnicode(unicode) {
-      let div = document.createElement("div")
-      div.textContent = unicode
-      return Twemoji.parse(div).innerHTML
+      return Helpers.getEmojiImgFromUnicode(unicode)
     },
     handleEmojiSelect(emoji) {
       this.handleChange("icon", emoji)

diff --git a/...ates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/CommunitiesList.vue b/...ates/vue/src/components/tyde/activities/CircleOfSupport/CommunityView/CommunitiesList.vue
@@ -88,7 +88,6 @@
 </template>
 
 <script>
-import Twemoji from "twemoji"
 import TapestryIcon from "@/components/common/TapestryIcon"
 import Helpers from "@/utils/Helpers"
 import ConnectionTooltip from "../ConnectionTooltip"
@@ -183,9 +182,7 @@ export default {
   },
   methods: {
     getEmojiImgFromUnicode(unicode) {
-      let div = document.createElement("div")
-      div.textContent = unicode
-      return Twemoji.parse(div).innerHTML
+      return Helpers.getEmojiImgFromUnicode(unicode)
     },
     editCommunity(community) {
       this.$emit("edit-community", community)

diff --git a/templates/vue/src/components/tyde/activities/CircleOfSupport/ConnectionTooltip.vue b/templates/vue/src/components/tyde/activities/CircleOfSupport/ConnectionTooltip.vue
@@ -24,7 +24,7 @@
 
 <script>
 import TapestryIcon from "@/components/common/TapestryIcon"
-import Twemoji from "twemoji"
+import Helpers from "@/utils/Helpers"
 
 export default {
   components: {
@@ -47,9 +47,7 @@ export default {
   },
   methods: {
     getEmojiImgFromUnicode(unicode) {
-      let div = document.createElement("div")
-      div.textContent = unicode
-      return Twemoji.parse(div).innerHTML
+      return Helpers.getEmojiImgFromUnicode(unicode)
     },
   },
 }