fixed emoji picker

vue/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@babel/eslint-parser": "^7.19.1",
-    "@kevinfaguiar/vue-twemoji-picker": "^5.7.4",
+    "@emoji-mart/data": "^1.1.1",
     "@popperjs/core": "^2.11.6",
     "@riophae/vue-treeselect": "^0.4.0",
     "@vue/cli": "^5.0.8",
@@ -19,6 +19,8 @@
     "babel-loader": "^9.1.0",
     "bootstrap-vue": "^2.23.1",
     "core-js": "^3.27.1",
+    "emoji-mart": "^5.4.0",
+    "emoji-mart-vue-fast": "^12.0.1",
     "html2pdf.js": "^0.10.1",
     "lodash": "^4.17.21",
     "mavon-editor": "^2.10.4",

vue/src/components/Modals/EmojiInput.vue

@@ -3,69 +3,52 @@
         <b-form-group
             v-bind:label="label"
             class="mb-3">
-          <twemoji-textarea
+
-            :ref="'_edit_' + id"
+            <input class="form-control" v-model="new_value">
-            :initialContent="value"
+
-            :emojiData="emojiDataAll"
+            <Picker :data="emojiIndex" :ref="'_edit_' + id"
-            :emojiGroups="emojiGroups"
+                    @select="setIcon"/>
-            triggerType="click"
+
-            :recentEmojisFeat="true"
-            recentEmojisStorage="local"
-            @contentChanged="setIcon"
-           />
         </b-form-group>
     </div>
 </template>
 
 <script>
-import {TwemojiTextarea} from '@kevinfaguiar/vue-twemoji-picker';
-// TODO add localization
-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 data from "emoji-mart-vue-fast/data/all.json";
+import "emoji-mart-vue-fast/css/emoji-mart.css";
+import {Picker, EmojiIndex} from "emoji-mart-vue-fast";
+let emojiIndex = new EmojiIndex(data);
 
 export default {
-  name: 'EmojiInput',
+    name: 'EmojiInput',
-  components: {TwemojiTextarea},
+    components: {Picker},
-  props: {
+    props: {
-    field: {type: String, default: 'You Forgot To Set Field Name'},
+        field: {type: String, default: 'You Forgot To Set Field Name'},
-    label: {type: String, default: ''},
+        label: {type: String, default: ''},
-    value: {type: String, default: ''},
+        value: {type: String, default: ''},
-  },
+    },
-  data() {
+    data() {
-    return {
+        return {
-      new_value: undefined,
+            new_value: undefined,
-      id: null
+            id: null,
+            emojiIndex: emojiIndex,
+            emojisOutput: ""
+        }
+    },
+    watch: {
+        'new_value': function () {
+            this.$root.$emit('change', this.field, this.new_value ?? null)
+        },
+    },
+    mounted() {
+        this.id = this._uid
+    },
+    methods: {
+        setIcon: function (icon) {
+            console.log(icon)
+            this.new_value = icon.native
+        },
     }
-  },
-  computed: {
-    // modelName() {
-    //   return this?.model?.name  ?? this.$t('Search')
-    // },
-    emojiDataAll() {
-      return EmojiAllData;
-    },
-    emojiGroups() {
-      return EmojiGroups;
-    }
-  },
-  watch: {
-    'new_value': function () {
-      this.$root.$emit('change', this.field, this.new_value ?? null)
-    },
-  },
-  mounted() {
-    this.id = this._uid
-  },
-  methods: {
-    prepareEmoji: function() {
-      this.$refs['_edit_' + this.id].addText(this.this_item.icon || '');
-      this.$refs['_edit_' + this.id].blur()
-      document.getElementById('btn-emoji-default').disabled = true;
-    },
-    setIcon: function(icon) {
-      this.new_value = icon
-    },
-  }
 }
 </script>

vue/yarn.lock

@@ -1538,6 +1538,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.18.6":
+  version: 7.20.7
+  resolution: "@babel/runtime@npm:7.20.7"
+  dependencies:
+    regenerator-runtime: ^0.13.11
+  checksum: 4629ce5c46f06cca9cfb9b7fc00d48003335a809888e2b91ec2069a2dcfbfef738480cff32ba81e0b7c290f8918e5c22ddcf2b710001464ee84ba62c7e32a3a3
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.0.0, @babel/template@npm:^7.16.7":
   version: 7.16.7
   resolution: "@babel/template@npm:7.16.7"
@@ -1588,6 +1597,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emoji-mart/data@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@emoji-mart/data@npm:1.1.1"
+  checksum: 705d8021c62f8d22f8ed3fa2a106b11eea58610cb8899a401a104be59e83e4ba18e57b06e34d0b3a967fa8e5fbee5f6646162c2ee540db06cb757a5e4370e92e
+  languageName: node
+  linkType: hard
+
 "@eslint/eslintrc@npm:^0.4.3":
   version: 0.4.3
   resolution: "@eslint/eslintrc@npm:0.4.3"
@@ -6026,7 +6042,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:^3.27.1":
+"core-js@npm:^3.23.5, core-js@npm:^3.27.1":
   version: 3.27.1
   resolution: "core-js@npm:3.27.1"
   checksum: d50b5f88aea4302512ad9446c18e90f4d35dea1e6d8d3f87337690677061565ff11a670f1e0c87de57aa6074375fbb25ed5784076c040d3c4de8b4bce7d2ebeb
@@ -6914,6 +6930,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"emoji-mart-vue-fast@npm:^12.0.1":
+  version: 12.0.1
+  resolution: "emoji-mart-vue-fast@npm:12.0.1"
+  dependencies:
+    "@babel/runtime": ^7.18.6
+    core-js: ^3.23.5
+  peerDependencies:
+    vue: ">2.0.0"
+  checksum: 4632ab2ced581f78e9e6793932ccf42f084cbe85ef974ad2476b1c662ff85e6a84217a9cb1519e6ce0abd18a561e3038a51987102cbfe90f86cd51241c832606
+  languageName: node
+  linkType: hard
+
+"emoji-mart@npm:^5.4.0":
+  version: 5.4.0
+  resolution: "emoji-mart@npm:5.4.0"
+  checksum: fe51dcd5afd29f01e923f64d85cdb78d43729e65daa9beae764783fef92d6133976120c9d78a816be45b10aa756f5df9df6bd2bc72e3efc67b5757349784db08
+  languageName: node
+  linkType: hard
+
 "emoji-regex@npm:^7.0.1":
   version: 7.0.3
   resolution: "emoji-regex@npm:7.0.3"
@@ -12814,6 +12849,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regenerator-runtime@npm:^0.13.11":
+  version: 0.13.11
+  resolution: "regenerator-runtime@npm:0.13.11"
+  checksum: 27481628d22a1c4e3ff551096a683b424242a216fee44685467307f14d58020af1e19660bf2e26064de946bad7eff28950eae9f8209d55723e2d9351e632bbb4
+  languageName: node
+  linkType: hard
+
 "regenerator-runtime@npm:^0.13.4, regenerator-runtime@npm:^0.13.7":
   version: 0.13.9
   resolution: "regenerator-runtime@npm:0.13.9"
@@ -15538,6 +15580,7 @@ __metadata:
   resolution: "vue@workspace:."
   dependencies:
     "@babel/eslint-parser": ^7.19.1
+    "@emoji-mart/data": ^1.1.1
     "@kazupon/vue-i18n-loader": ^0.5.0
     "@kevinfaguiar/vue-twemoji-picker": ^5.7.4
     "@popperjs/core": ^2.11.6
@@ -15559,6 +15602,8 @@ __metadata:
     babel-loader: ^9.1.0
     bootstrap-vue: ^2.23.1
     core-js: ^3.27.1
+    emoji-mart: ^5.4.0
+    emoji-mart-vue-fast: ^12.0.1
     eslint: ^7.28.0
     eslint-plugin-vue: ^8.7.1
     html2pdf.js: ^0.10.1