tiptapify 0.0.35 → 0.1.0

package/src/extensions/components/media/charmap/Picker.vue

@@ -0,0 +1,229 @@
+<script lang="ts" setup>
+import type { Editor } from '@tiptap/core'
+import tiptapifyCharMap from '@tiptapify/extensions/charmap'
+import { PickerEventBus } from '@tiptapify/extensions/PickerEventBus'
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps<{
+  editor: Editor,
+  t: any
+}>()
+
+const filter = ref('')
+const activeTab = ref('punctuation')
+const sorted = tiptapifyCharMap.sort((previous, current) => {
+  if (previous.order < current.order) {
+    return -1
+  }
+  if (previous.order > current.order) {
+    return 1
+  }
+  return 0
+})
+
+if (!activeTab.value && sorted.length > 0) {
+  activeTab.value = sorted[0].name
+}
+
+const chars = computed(() => sorted.map(item => ({ group: item.name, items: item.items })))
+const filteredChars = ref(JSON.parse(JSON.stringify(chars.value)))
+
+const handleCharacterClick = (charItem: any) => {
+  props.editor.chain().focus().insertContent(charItem.char).run()
+  PickerEventBus.emit('close', { type: 'charmap' })
+}
+
+const filterChars = () => {
+  if (!filter.value) {
+    filteredChars.value = JSON.parse(JSON.stringify(chars.value))
+    return
+  }
+
+  const filtered: any[] = []
+  filteredChars.value.forEach((group: any) => {
+    const matchingChars = group.items.filter((item: any) =>
+        item.name.toLowerCase().match(filter.value.toLowerCase())
+    )
+    if (matchingChars.length > 0) {
+      filtered.push({ ...group, items: matchingChars })
+    }
+  })
+  filteredChars.value = filtered
+  if (filtered.length > 0) {
+    activeTab.value = filtered[0].group
+  }
+}
+
+const resetFilter = () => {
+  filter.value = ''
+  filteredChars.value = JSON.parse(JSON.stringify(chars.value))
+}
+
+watch(filter, filterChars)
+</script>
+
+<template>
+  <div class="tiptapify-slash-picker">
+    <div class="tiptapify-slash-picker__sidebar">
+      <button
+          v-for="item in filteredChars"
+          :key="item.group"
+          :class="['tiptapify-slash-picker__tab', { 'tiptapify-slash-picker__tab--active': activeTab === item.group }]"
+          @click="activeTab = item.group"
+      >
+        <VTooltip activator="parent">
+          {{ t(`media.charmap.categories.${item.group}`) }}
+        </VTooltip>
+        {{ item.items[0]?.char }}
+      </button>
+    </div>
+
+    <div class="tiptapify-slash-picker__content">
+      <div class="tiptapify-slash-picker__search">
+        <input
+            v-model="filter"
+            type="text"
+            placeholder="Search characters..."
+            class="tiptapify-slash-picker__search-input"
+        />
+        <button v-if="filter" class="tiptapify-slash-picker__clear" @click="resetFilter">&times;</button>
+      </div>
+
+      <div class="tiptapify-slash-picker__grid-container">
+        <div
+            v-for="item in filteredChars"
+            :key="item.group"
+            class="tiptapify-slash-picker__group"
+        >
+          <div v-show="activeTab === item.group" class="tiptapify-slash-picker__grid">
+            <button
+                v-for="charItem in item.items"
+                :key="charItem.char"
+                class="tiptapify-slash-picker__item"
+                :title="charItem.name"
+                @click="handleCharacterClick(charItem)"
+            >
+              {{ charItem.char }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tiptapify-slash-picker {
+  display: flex;
+  width: 450px;
+  height: 400px;
+  background: rgb(var(--v-theme-surface));
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.tiptapify-slash-picker__sidebar {
+  width: 48px;
+  background: rgba(var(--v-theme-on-surface), 0.04);
+  border-right: 1px solid rgba(var(--v-theme-on-surface), 0.12);
+  padding: 8px 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  overflow-y: auto;
+}
+
+.tiptapify-slash-picker__tab {
+  width: 40px;
+  height: 32px;
+  font-size: 16px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tiptapify-slash-picker__tab:hover {
+  background: rgba(var(--v-theme-on-surface), 0.08);
+}
+
+.tiptapify-slash-picker__tab--active {
+  background: rgba(var(--v-theme-primary), 0.12);
+  color: rgb(var(--v-theme-primary));
+}
+
+.tiptapify-slash-picker__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+}
+
+.tiptapify-slash-picker__search {
+  position: relative;
+  margin-bottom: 12px;
+}
+
+.tiptapify-slash-picker__search-input {
+  width: 100%;
+  padding: 8px 32px 8px 12px;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.24);
+  border-radius: 4px;
+  font-size: 14px;
+  background: rgb(var(--v-theme-surface));
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.tiptapify-slash-picker__search-input:focus {
+  outline: none;
+  border-color: rgb(var(--v-theme-primary));
+}
+
+.tiptapify-slash-picker__clear {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 16px;
+  color: rgba(var(--v-theme-on-surface), 0.6);
+}
+
+.tiptapify-slash-picker__grid-container {
+  flex: 1;
+  overflow-y: auto;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.12);
+  border-radius: 4px;
+}
+
+.tiptapify-slash-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
+  gap: 2px;
+  padding: 4px;
+}
+
+.tiptapify-slash-picker__item {
+  width: 32px;
+  height: 32px;
+  font-size: 16px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tiptapify-slash-picker__item:hover {
+  background: rgba(var(--v-theme-on-surface), 0.08);
+}
+</style>

package/src/extensions/components/media/emoji/Button.vue

@@ -1,78 +1,21 @@
 <script lang="ts" setup>
-
 import * as mdi from '@mdi/js'
-import { Editor } from "@tiptap/vue-3";
-import tiptapifyEmojis from "@tiptapify/extensions/emoji"
-import { computed, inject, Ref, ref, watch } from 'vue'
+import { inject, Ref } from 'vue'
 import BtnIcon from "@tiptapify/components/UI/BtnIcon.vue";
-
+import EmojiPicker from './Picker.vue';
 import defaults from '@tiptapify/constants/defaults'
 
 defineProps({
   variantBtn: { type: String, default: defaults.variantBtn }
 })
 
-const editor = inject('tiptapifyEditor') as Ref<Editor>
+const editor = inject('tiptapifyEditor') as Ref<any>
 
 const { t } = inject('tiptapifyI18n') as any
-
-const filter = ref(null)
-const tab = ref('smileys_and_emotion')
-const sorted = tiptapifyEmojis.sort((previous, current) => {
-  if (previous.order < current.order) {
-    return -1
-  }
-  if (previous.order > current.order) {
-    return 1
-  }
-
-  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()
-}
-
-const filterEmoji = (filterValue: string) => {
-  resetFilter()
-  if (!filterValue) {
-    return
-  }
-
-  const filtered: any[] = []
-
-  const groupItems = emojisRef.value.find((item: any) => item.group === tab.value)
-  if (groupItems?.emojis) {
-    groupItems.emojis.forEach((item: any) => {
-      if (item.name.toLowerCase().match(filterValue)) {
-        filtered.push(item)
-      }
-    })
-
-    groupItems.emojis = filtered
-  }
-}
-
-const resetFilter = () => {
-  emojisRef.value = JSON.parse(JSON.stringify(emojis.value))
-}
-
-watch(() => tab.value, () => {
-  resetFilter()
-  filter.value = null
-})
-
 </script>
 
 <template>
-  <VBtn
-      :id="`tiptapify-emoji-button-${editor.instanceId}`"
-      :color="editor.isActive('image') ? 'primary' : ''"
-      :variant="variantBtn"
-      size="32"
-  >
+  <VBtn :id="`tiptapify-emoji-button-${editor.instanceId}`" color="" :variant="variantBtn" size="32">
     <VTooltip activator="parent">
       {{ t('media.emoji.title') }}
     </VTooltip>
@@ -81,91 +24,7 @@ watch(() => tab.value, () => {
 
   <VMenu :activator="`#tiptapify-emoji-button-${editor.instanceId}`" :close-on-content-click="false">
     <VSheet class="pa-2" max-width="570">
-      <div class="d-flex flex-row">
-        <VTabs v-model="tab" mandatory direction="vertical" color="primary" density="compact">
-          <VTab
-              v-for="item of emojisRef"
-              :text="item.group"
-              :value="item.group"
-              :key="item.group"
-              density="compact"
-              rounded
-              size="small"
-          >
-            {{ t(`media.emoji.${item.group}`) }}
-          </VTab>
-        </VTabs>
-
-        <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" :transition="false" :reverse-transition="false">
-                <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>
-              </VWindowItem>
-            </VWindow>
-          </div>
-        </div>
-      </div>
+      <EmojiPicker :editor="editor" :t="t" />
     </VSheet>
   </VMenu>
-</template>
-
-<style lang="scss" scoped>
-.tiptapify-emoji-container {
-  width: 360px;
-  height: 500px;
-  overflow-y: auto;
-
-  border: 1px solid rgba(var(--v-theme-on-background), calc(var(--v-border-opacity)));
-  border-radius: 8px;
-  box-shadow: 0 0 5px rgba(var(--v-theme-on-background), calc(var(--v-border-opacity))) inset;
-}
-
-.tiptapify-emoji-container-item__overlay {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 5px;
-  z-index: 1;
-}
-
-.tiptapify-emoji-container-item {
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  width: 32px;
-  height: 32px;
-  transition: background-color 0.2s ease-in-out;
-}
-
-.tiptapify-emoji-container-item:hover .tiptapify-emoji-container-item__overlay {
-  background-color: rgba(var(--v-theme-on-background), calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier)));
-}
-</style>
+</template>

package/src/extensions/components/media/emoji/Picker.vue

@@ -0,0 +1,225 @@
+<script lang="ts" setup>
+import type { Editor } from '@tiptap/core'
+import tiptapifyEmojis from '@tiptapify/extensions/emoji'
+import { PickerEventBus } from '@tiptapify/extensions/PickerEventBus'
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps<{
+  editor: Editor,
+  t: any
+}>()
+
+const filter = ref('')
+const activeTab = ref('smileys_and_emotion')
+const sorted = tiptapifyEmojis.sort((previous, current) => {
+  if (previous.order < current.order) {
+    return -1
+  }
+  if (previous.order > current.order) {
+    return 1
+  }
+  return 0
+})
+
+const emojis = computed(() => sorted.map(item => ({ group: item.name, emojis: item.items })))
+const filteredEmojis = ref(JSON.parse(JSON.stringify(emojis.value)))
+
+const handleEmojiClick = (emoji: any) => {
+  props.editor.chain().focus().insertContent(emoji.char).run()
+  PickerEventBus.emit('close', { type: 'emoji' })
+}
+
+const filterEmoji = () => {
+  if (!filter.value) {
+    filteredEmojis.value = JSON.parse(JSON.stringify(emojis.value))
+    return
+  }
+
+  const filtered: any[] = []
+  filteredEmojis.value.forEach((group: any) => {
+    const matchingEmojis = group.emojis.filter((emoji: any) =>
+        emoji.name.toLowerCase().match(filter.value.toLowerCase())
+    )
+    if (matchingEmojis.length > 0) {
+      filtered.push({ ...group, emojis: matchingEmojis })
+    }
+  })
+  filteredEmojis.value = filtered
+  if (filtered.length > 0) {
+    activeTab.value = filtered[0].group
+  }
+}
+
+const resetFilter = () => {
+  filter.value = ''
+  filteredEmojis.value = JSON.parse(JSON.stringify(emojis.value))
+}
+
+watch(filter, filterEmoji)
+</script>
+
+<template>
+  <div class="tiptapify-slash-picker">
+    <div class="tiptapify-slash-picker__sidebar">
+      <button
+          v-for="item in filteredEmojis"
+          :key="item.group"
+          :class="['tiptapify-slash-picker__tab', { 'tiptapify-slash-picker__tab--active': activeTab === item.group }]"
+          @click="activeTab = item.group"
+      >
+        <VTooltip activator="parent">
+          {{ t(`media.emoji.categories.${item.group}`) }}
+        </VTooltip>
+        {{ item.emojis[0]?.char }}
+      </button>
+    </div>
+
+    <div class="tiptapify-slash-picker__content">
+      <div class="tiptapify-slash-picker__search">
+        <input
+            v-model="filter"
+            type="text"
+            placeholder="Search emoji..."
+            class="tiptapify-slash-picker__search-input"
+        />
+        <button v-if="filter" class="tiptapify-slash-picker__clear" @click="resetFilter">&times;</button>
+      </div>
+
+      <div class="tiptapify-slash-picker__grid-container">
+        <div
+            v-for="item in filteredEmojis"
+            :key="item.group"
+            class="tiptapify-slash-picker__group"
+        >
+          <div v-show="activeTab === item.group" class="tiptapify-slash-picker__grid">
+            <button
+                v-for="emojiItem in item.emojis"
+                :key="emojiItem.char"
+                class="tiptapify-slash-picker__item"
+                :title="emojiItem.name"
+                @click="handleEmojiClick(emojiItem)"
+            >
+              {{ emojiItem.char }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tiptapify-slash-picker {
+  display: flex;
+  width: 450px;
+  height: 400px;
+  background: rgb(var(--v-theme-surface));
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.tiptapify-slash-picker__sidebar {
+  width: 48px;
+  background: rgba(var(--v-theme-on-surface), 0.04);
+  border-right: 1px solid rgba(var(--v-theme-on-surface), 0.12);
+  padding: 8px 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  overflow-y: auto;
+}
+
+.tiptapify-slash-picker__tab {
+  width: 40px;
+  height: 32px;
+  font-size: 18px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tiptapify-slash-picker__tab:hover {
+  background: rgba(var(--v-theme-on-surface), 0.08);
+}
+
+.tiptapify-slash-picker__tab--active {
+  background: rgba(var(--v-theme-primary), 0.12);
+  color: rgb(var(--v-theme-primary));
+}
+
+.tiptapify-slash-picker__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+}
+
+.tiptapify-slash-picker__search {
+  position: relative;
+  margin-bottom: 12px;
+}
+
+.tiptapify-slash-picker__search-input {
+  width: 100%;
+  padding: 8px 32px 8px 12px;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.24);
+  border-radius: 4px;
+  font-size: 14px;
+  background: rgb(var(--v-theme-surface));
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.tiptapify-slash-picker__search-input:focus {
+  outline: none;
+  border-color: rgb(var(--v-theme-primary));
+}
+
+.tiptapify-slash-picker__clear {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 16px;
+  color: rgba(var(--v-theme-on-surface), 0.6);
+}
+
+.tiptapify-slash-picker__grid-container {
+  flex: 1;
+  overflow-y: auto;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.12);
+  border-radius: 4px;
+}
+
+.tiptapify-slash-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
+  gap: 2px;
+  padding: 4px;
+}
+
+.tiptapify-slash-picker__item {
+  width: 32px;
+  height: 32px;
+  font-size: 20px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tiptapify-slash-picker__item:hover {
+  background: rgba(var(--v-theme-on-surface), 0.08);
+}
+</style>