tiptapify 0.0.15 → 0.0.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {

package/src/components/Toolbar/Items.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import Group from "@tiptapify/components/Toolbar/Group.vue";
-import Toggle from "@tiptapify/components/Toolbar/Toggle.vue";
 import { computed, defineProps, PropType, Ref, ref } from 'vue'
 
 import { ToolbarItemSections } from "@tiptapify/types/toolbarItems";

package/src/extensions/components/Emoji.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 
+import * as mdi from "@mdi/js";
+
 import { Editor } from "@tiptap/vue-3";
 
 import tiptapifyEmojis from "@tiptapify/extensions/emoji"
 
-import { computed, inject, Ref, ref } from 'vue'
+import { computed, inject, Ref, ref, watch } from 'vue'
 
 const { t } = inject('tiptapifyI18n') as any
 
@@ -14,6 +16,7 @@ const emit = defineEmits(['close'])
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
+const filter = ref(null)
 const tab = ref('smileys_and_emotion')
 const sorted = tiptapifyEmojis.sort((previous, current) => {
   if (previous.order < current.order) {
@@ -26,15 +29,45 @@ const sorted = tiptapifyEmojis.sort((previous, current) => {
   return 0
 })
 const emojis = computed(() => sorted.map(item => { return { group: item.name, emojis: item.items } }))
+const emojisRef = ref(JSON.parse(JSON.stringify(emojis.value)))
 
 const handleEmojiClick = (emoji: any) => {
   editor.value.chain().focus().insertContent(emoji.char).run()
   close()
 }
 
+const filterEmoji = (filterValue: string) => {
+  resetFilter()
+  if (!filterValue) {
+    return
+  }
+
+  const filtered: any[] = []
+
+  const groupItems = emojisRef.value.find(item => item.group === tab.value)
+  if (groupItems?.emojis) {
+    groupItems.emojis.forEach(item => {
+      if (item.name.toLowerCase().match(filterValue)) {
+        filtered.push(item)
+      }
+    })
+
+    groupItems.emojis = filtered
+  }
+}
+
+const resetFilter = () => {
+  emojisRef.value = JSON.parse(JSON.stringify(emojis.value))
+}
+
 function close() {
   emit('close')
 }
+
+watch(() => tab.value, () => {
+  resetFilter()
+  filter.value = null
+})
 </script>
 
 <template>
@@ -42,7 +75,7 @@ function close() {
     <div class="d-flex flex-row">
       <VTabs v-model="tab" mandatory direction="vertical" color="primary" density="compact">
         <VTab
-            v-for="item of emojis"
+            v-for="item of emojisRef"
             :text="item.group"
             :value="item.group"
             :key="item.group"
@@ -54,31 +87,51 @@ function close() {
         </VTab>
       </VTabs>
 
-      <VWindow v-model="tab" direction="vertical">
-        <VWindowItem v-for="item of emojis" :value="item.group">
-          <div class="tiptapify-emoji-container">
-            <div v-for="emojiItem in item.emojis" class="tiptapify-emoji-container-item" @click="handleEmojiClick(emojiItem)" :title="emojiItem.name">
-              <div class="tiptapify-emoji-container-item__overlay">
-                <span>
-                  {{ emojiItem.char }}
-                </span>
+      <div>
+        <VTextField
+            v-model="filter"
+            label="Filter emoji"
+            density="compact"
+            variant="solo"
+            :prepend-inner-icon="`mdiSvg:${mdi.mdiMagnify}`"
+            class="mb-2"
+            hide-details
+            clearable
+            @input="filterEmoji($event.target.value)"
+            @click:clear="resetFilter"
+        />
+        <div class="tiptapify-emoji-container">
+          <VWindow v-model="tab" direction="vertical">
+            <VWindowItem v-for="item of emojisRef" :value="item.group">
+              <div
+                  v-for="emojiItem in item.emojis"
+                  class="tiptapify-emoji-container-item"
+                  @click="handleEmojiClick(emojiItem)"
+                  :title="emojiItem.name"
+              >
+                <div class="tiptapify-emoji-container-item__overlay">
+                  <span>
+                    {{ emojiItem.char }}
+                  </span>
+                </div>
               </div>
-            </div>
-          </div>
-        </VWindowItem>
-      </VWindow>
+            </VWindowItem>
+          </VWindow>
+        </div>
+      </div>
     </div>
   </VSheet>
 </template>
 
 <style lang="scss" scoped>
 .tiptapify-emoji-container {
-  max-height: 500px;
+  width: 360px;
+  height: 500px;
   overflow-y: auto;
 
-  border: 1px solid #ddd;
+  border: 1px solid rgba(var(--v-theme-on-background), calc(var(--v-border-opacity)));
   border-radius: 8px;
-  filter: drop-shadow(1px 2px 3px #777);
+  box-shadow: 0 0 5px rgba(var(--v-theme-on-background), calc(var(--v-border-opacity))) inset;
 }
 
 .tiptapify-emoji-container-item__overlay {
@@ -99,6 +152,7 @@ function close() {
   cursor: pointer;
   width: 32px;
   height: 32px;
+  filter: drop-shadow(1px 2px 3px #777);
   transition: background-color 0.2s ease-in-out;
 }
 

package/src/extensions/emoji/activities.ts

@@ -151,14 +151,6 @@ export default [
     "group": "Activities",
     "subgroup": "event"
   },
-  {
-    "codes": "1F397",
-    "char": "🎗",
-    "name": "reminder ribbon",
-    "category": "Activities (event)",
-    "group": "Activities",
-    "subgroup": "event"
-  },
   {
     "codes": "1F39F FE0F",
     "char": "🎟️",
@@ -167,14 +159,6 @@ export default [
     "group": "Activities",
     "subgroup": "event"
   },
-  {
-    "codes": "1F39F",
-    "char": "🎟",
-    "name": "admission tickets",
-    "category": "Activities (event)",
-    "group": "Activities",
-    "subgroup": "event"
-  },
   {
     "codes": "1F3AB",
     "char": "🎫",
@@ -191,14 +175,6 @@ export default [
     "group": "Activities",
     "subgroup": "award-medal"
   },
-  {
-    "codes": "1F396",
-    "char": "🎖",
-    "name": "military medal",
-    "category": "Activities (award-medal)",
-    "group": "Activities",
-    "subgroup": "award-medal"
-  },
   {
     "codes": "1F3C6",
     "char": "🏆",
@@ -407,14 +383,6 @@ export default [
     "group": "Activities",
     "subgroup": "sport"
   },
-  {
-    "codes": "26F8",
-    "char": "⛸",
-    "name": "ice skate",
-    "category": "Activities (sport)",
-    "group": "Activities",
-    "subgroup": "sport"
-  },
   {
     "codes": "1F3A3",
     "char": "🎣",
@@ -535,14 +503,6 @@ export default [
     "group": "Activities",
     "subgroup": "game"
   },
-  {
-    "codes": "1F579",
-    "char": "🕹",
-    "name": "joystick",
-    "category": "Activities (game)",
-    "group": "Activities",
-    "subgroup": "game"
-  },
   {
     "codes": "1F3B0",
     "char": "🎰",
@@ -607,14 +567,6 @@ export default [
     "group": "Activities",
     "subgroup": "game"
   },
-  {
-    "codes": "2660",
-    "char": "♠",
-    "name": "spade suit",
-    "category": "Activities (game)",
-    "group": "Activities",
-    "subgroup": "game"
-  },
   {
     "codes": "2665 FE0F",
     "char": "♥️",
@@ -623,14 +575,6 @@ export default [
     "group": "Activities",
     "subgroup": "game"
   },
-  {
-    "codes": "2665",
-    "char": "♥",
-    "name": "heart suit",
-    "category": "Activities (game)",
-    "group": "Activities",
-    "subgroup": "game"
-  },
   {
     "codes": "2666 FE0F",
     "char": "♦️",
@@ -639,14 +583,6 @@ export default [
     "group": "Activities",
     "subgroup": "game"
   },
-  {
-    "codes": "2666",
-    "char": "♦",
-    "name": "diamond suit",
-    "category": "Activities (game)",
-    "group": "Activities",
-    "subgroup": "game"
-  },
   {
     "codes": "2663 FE0F",
     "char": "♣️",
@@ -655,14 +591,6 @@ export default [
     "group": "Activities",
     "subgroup": "game"
   },
-  {
-    "codes": "2663",
-    "char": "♣",
-    "name": "club suit",
-    "category": "Activities (game)",
-    "group": "Activities",
-    "subgroup": "game"
-  },
   {
     "codes": "265F FE0F",
     "char": "♟️",
@@ -671,14 +599,6 @@ export default [
     "group": "Activities",
     "subgroup": "game"
   },
-  {
-    "codes": "265F",
-    "char": "♟",
-    "name": "chess pawn",
-    "category": "Activities (game)",
-    "group": "Activities",
-    "subgroup": "game"
-  },
   {
     "codes": "1F0CF",
     "char": "🃏",
@@ -719,14 +639,6 @@ export default [
     "group": "Activities",
     "subgroup": "arts & crafts"
   },
-  {
-    "codes": "1F5BC",
-    "char": "🖼",
-    "name": "framed picture",
-    "category": "Activities (arts & crafts)",
-    "group": "Activities",
-    "subgroup": "arts & crafts"
-  },
   {
     "codes": "1F3A8",
     "char": "🎨",

package/src/extensions/emoji/animals_and_nature.ts

@@ -423,14 +423,6 @@ export default [
     "group": "Animals & Nature",
     "subgroup": "animal-mammal"
   },
-  {
-    "codes": "1F43F",
-    "char": "🐿",
-    "name": "chipmunk",
-    "category": "Animals & Nature (animal-mammal)",
-    "group": "Animals & Nature",
-    "subgroup": "animal-mammal"
-  },
   {
     "codes": "1F9AB",
     "char": "🦫",
@@ -471,14 +463,6 @@ export default [
     "group": "Animals & Nature",
     "subgroup": "animal-mammal"
   },
-  {
-    "codes": "1F43B 200D 2744",
-    "char": "🐻‍❄",
-    "name": "polar bear",
-    "category": "Animals & Nature (animal-mammal)",
-    "group": "Animals & Nature",
-    "subgroup": "animal-mammal"
-  },
   {
     "codes": "1F428",
     "char": "🐨",
@@ -615,14 +599,6 @@ export default [
     "group": "Animals & Nature",
     "subgroup": "animal-bird"
   },
-  {
-    "codes": "1F54A",
-    "char": "🕊",
-    "name": "dove",
-    "category": "Animals & Nature (animal-bird)",
-    "group": "Animals & Nature",
-    "subgroup": "animal-bird"
-  },
   {
     "codes": "1F985",
     "char": "🦅",
@@ -1015,14 +991,6 @@ export default [
     "group": "Animals & Nature",
     "subgroup": "animal-bug"
   },
-  {
-    "codes": "1F577",
-    "char": "🕷",
-    "name": "spider",
-    "category": "Animals & Nature (animal-bug)",
-    "group": "Animals & Nature",
-    "subgroup": "animal-bug"
-  },
   {
     "codes": "1F578 FE0F",
     "char": "🕸️",
@@ -1031,14 +999,6 @@ export default [
     "group": "Animals & Nature",
     "subgroup": "animal-bug"
   },
-  {
-    "codes": "1F578",
-    "char": "🕸",
-    "name": "spider web",
-    "category": "Animals & Nature (animal-bug)",
-    "group": "Animals & Nature",
-    "subgroup": "animal-bug"
-  },
   {
     "codes": "1F982",
     "char": "🦂",
@@ -1119,14 +1079,6 @@ export default [
     "group": "Animals & Nature",
     "subgroup": "plant-flower"
   },
-  {
-    "codes": "1F3F5",
-    "char": "🏵",
-    "name": "rosette",
-    "category": "Animals & Nature (plant-flower)",
-    "group": "Animals & Nature",
-    "subgroup": "plant-flower"
-  },
   {
     "codes": "1F339",
     "char": "🌹",
@@ -1255,14 +1207,6 @@ export default [
     "group": "Animals & Nature",
     "subgroup": "plant-other"
   },
-  {
-    "codes": "2618",
-    "char": "☘",
-    "name": "shamrock",
-    "category": "Animals & Nature (plant-other)",
-    "group": "Animals & Nature",
-    "subgroup": "plant-other"
-  },
   {
     "codes": "1F340",
     "char": "🍀",

package/src/extensions/emoji/flags.ts

@@ -39,14 +39,6 @@ export default [
     "group": "Flags",
     "subgroup": "flag"
   },
-  {
-    "codes": "1F3F3",
-    "char": "🏳",
-    "name": "white flag",
-    "category": "Flags (flag)",
-    "group": "Flags",
-    "subgroup": "flag"
-  },
   {
     "codes": "1F3F3 FE0F 200D 1F308",
     "char": "🏳️‍🌈",
@@ -55,14 +47,6 @@ export default [
     "group": "Flags",
     "subgroup": "flag"
   },
-  {
-    "codes": "1F3F3 200D 1F308",
-    "char": "🏳‍🌈",
-    "name": "rainbow flag",
-    "category": "Flags (flag)",
-    "group": "Flags",
-    "subgroup": "flag"
-  },
   {
     "codes": "1F3F3 FE0F 200D 26A7 FE0F",
     "char": "🏳️‍⚧️",
@@ -71,30 +55,6 @@ export default [
     "group": "Flags",
     "subgroup": "flag"
   },
-  {
-    "codes": "1F3F3 200D 26A7 FE0F",
-    "char": "🏳‍⚧️",
-    "name": "transgender flag",
-    "category": "Flags (flag)",
-    "group": "Flags",
-    "subgroup": "flag"
-  },
-  {
-    "codes": "1F3F3 FE0F 200D 26A7",
-    "char": "🏳️‍⚧",
-    "name": "transgender flag",
-    "category": "Flags (flag)",
-    "group": "Flags",
-    "subgroup": "flag"
-  },
-  {
-    "codes": "1F3F3 200D 26A7",
-    "char": "🏳‍⚧",
-    "name": "transgender flag",
-    "category": "Flags (flag)",
-    "group": "Flags",
-    "subgroup": "flag"
-  },
   {
     "codes": "1F3F4 200D 2620 FE0F",
     "char": "🏴‍☠️",
@@ -103,14 +63,6 @@ export default [
     "group": "Flags",
     "subgroup": "flag"
   },
-  {
-    "codes": "1F3F4 200D 2620",
-    "char": "🏴‍☠",
-    "name": "pirate flag",
-    "category": "Flags (flag)",
-    "group": "Flags",
-    "subgroup": "flag"
-  },
   {
     "codes": "1F1E6 1F1E8",
     "char": "🇦🇨",

package/src/extensions/emoji/food_and_drink.ts

@@ -207,14 +207,6 @@ export default [
     "group": "Food & Drink",
     "subgroup": "food-vegetable"
   },
-  {
-    "codes": "1F336",
-    "char": "🌶",
-    "name": "hot pepper",
-    "category": "Food & Drink (food-vegetable)",
-    "group": "Food & Drink",
-    "subgroup": "food-vegetable"
-  },
   {
     "codes": "1FAD1",
     "char": "🫑",
@@ -1015,14 +1007,6 @@ export default [
     "group": "Food & Drink",
     "subgroup": "dishware"
   },
-  {
-    "codes": "1F37D",
-    "char": "🍽",
-    "name": "fork and knife with plate",
-    "category": "Food & Drink (dishware)",
-    "group": "Food & Drink",
-    "subgroup": "dishware"
-  },
   {
     "codes": "1F374",
     "char": "🍴",