tiptapify 0.0.12 → 0.0.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -29,7 +29,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:emojis": "tsx build-emojis.ts"
   },
   "keywords": [
     "vue",
@@ -53,49 +54,50 @@
   "repository": "https://github.com/IVoyt/tiptapify",
   "packageManager": "pnpm@10.12.1",
   "dependencies": {
-    "@tiptap/core": "^3.0.7",
-    "@tiptap/extension-blockquote": "^3.0.7",
-    "@tiptap/extension-bold": "^3.0.7",
-    "@tiptap/extension-bubble-menu": "^3.0.7",
-    "@tiptap/extension-code": "^3.0.7",
-    "@tiptap/extension-code-block": "^3.0.7",
-    "@tiptap/extension-code-block-lowlight": "^3.0.7",
-    "@tiptap/extension-color": "^3.0.7",
-    "@tiptap/extension-document": "^3.0.7",
-    "@tiptap/extension-floating-menu": "^3.0.7",
-    "@tiptap/extension-font-family": "^3.0.7",
-    "@tiptap/extension-hard-break": "^3.0.7",
-    "@tiptap/extension-heading": "^3.0.7",
-    "@tiptap/extension-highlight": "^3.0.7",
-    "@tiptap/extension-horizontal-rule": "^3.0.7",
-    "@tiptap/extension-image": "^3.0.7",
-    "@tiptap/extension-invisible-characters": "^3.0.7",
-    "@tiptap/extension-italic": "^3.0.7",
-    "@tiptap/extension-link": "^3.0.7",
-    "@tiptap/extension-list": "^3.0.7",
-    "@tiptap/extension-list-item": "^3.0.7",
-    "@tiptap/extension-paragraph": "^3.0.7",
-    "@tiptap/extension-placeholder": "^3.0.7",
-    "@tiptap/extension-strike": "^3.0.7",
-    "@tiptap/extension-subscript": "^3.0.7",
-    "@tiptap/extension-superscript": "^3.0.7",
-    "@tiptap/extension-table": "^3.0.7",
-    "@tiptap/extension-task-item": "^3.0.7",
-    "@tiptap/extension-task-list": "^3.0.7",
-    "@tiptap/extension-text": "^3.0.7",
-    "@tiptap/extension-text-align": "^3.0.7",
-    "@tiptap/extension-text-style": "^3.0.7",
-    "@tiptap/extension-typography": "^3.0.7",
-    "@tiptap/extension-underline": "^3.0.7",
-    "@tiptap/extensions": "^3.0.7",
-    "@tiptap/pm": "^3.0.7",
-    "@tiptap/starter-kit": "^3.0.7",
-    "@tiptap/suggestion": "^3.0.7",
-    "@tiptap/vue-3": "^3.0.7",
+    "@tiptap/core": "^3.0.8",
+    "@tiptap/extension-blockquote": "^3.0.8",
+    "@tiptap/extension-bold": "^3.0.8",
+    "@tiptap/extension-bubble-menu": "^3.0.8",
+    "@tiptap/extension-code": "^3.0.8",
+    "@tiptap/extension-code-block": "^3.0.8",
+    "@tiptap/extension-code-block-lowlight": "^3.0.8",
+    "@tiptap/extension-color": "^3.0.8",
+    "@tiptap/extension-document": "^3.0.8",
+    "@tiptap/extension-floating-menu": "^3.0.8",
+    "@tiptap/extension-font-family": "^3.0.8",
+    "@tiptap/extension-hard-break": "^3.0.8",
+    "@tiptap/extension-heading": "^3.0.8",
+    "@tiptap/extension-highlight": "^3.0.8",
+    "@tiptap/extension-horizontal-rule": "^3.0.8",
+    "@tiptap/extension-image": "^3.0.8",
+    "@tiptap/extension-invisible-characters": "^3.0.8",
+    "@tiptap/extension-italic": "^3.0.8",
+    "@tiptap/extension-link": "^3.0.8",
+    "@tiptap/extension-list": "^3.0.8",
+    "@tiptap/extension-list-item": "^3.0.8",
+    "@tiptap/extension-paragraph": "^3.0.8",
+    "@tiptap/extension-placeholder": "^3.0.8",
+    "@tiptap/extension-strike": "^3.0.8",
+    "@tiptap/extension-subscript": "^3.0.8",
+    "@tiptap/extension-superscript": "^3.0.8",
+    "@tiptap/extension-table": "^3.0.8",
+    "@tiptap/extension-task-item": "^3.0.8",
+    "@tiptap/extension-task-list": "^3.0.8",
+    "@tiptap/extension-text": "^3.0.8",
+    "@tiptap/extension-text-align": "^3.0.8",
+    "@tiptap/extension-text-style": "^3.0.8",
+    "@tiptap/extension-typography": "^3.0.8",
+    "@tiptap/extension-underline": "^3.0.8",
+    "@tiptap/extensions": "^3.0.8",
+    "@tiptap/pm": "^3.0.8",
+    "@tiptap/starter-kit": "^3.0.8",
+    "@tiptap/suggestion": "^3.0.8",
+    "@tiptap/vue-3": "^3.0.8",
+    "emoji.json": "^16.0.0",
     "highlight.js": "^11.11.1",
-    "linkifyjs": "^4.3.1",
+    "linkifyjs": "^4.3.2",
     "lowlight": "^3.3.0",
-    "vue-i18n": "^11.1.10"
+    "vue-i18n": "^11.1.11"
   },
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
@@ -105,15 +107,16 @@
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^6.0.8",
     "@rollup/plugin-alias": "^5.1.1",
-    "@types/node": "^22.16.4",
+    "@types/node": "^22.17.0",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vitejs/plugin-vue-jsx": "^4.2.0",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
     "sass-embedded": "^1.89.2",
-    "typescript": "^5.8.3",
+    "tsx": "^4.20.3",
+    "typescript": "^5.9.2",
     "unplugin-vue-components": "^28.8.0",
     "vite": "^6.3.5",
-    "vite-plugin-vuetify": "^2.1.1",
+    "vite-plugin-vuetify": "^2.1.2",
     "vite-svg-loader": "^5.1.0",
     "vite-tsconfig-paths": "^5.1.4",
     "vue-tsc": "^2.2.12"

package/src/composables/Toolbar/Media/useEmoji.ts

@@ -0,0 +1,20 @@
+import * as mdi from "@mdi/js";
+import Emoji from "@tiptapify/extensions/components/Emoji.vue";
+import { computed, markRaw } from "vue";
+import { useI18n } from "vue-i18n";
+
+export function useEmoji() {
+  const { t } = useI18n();
+
+  return {
+    name: computed(() => t('media.emoji')),
+    tooltip: computed(() => t('media.emoji')),
+    icon: `mdiSvg:${mdi.mdiEmoticon}`,
+    enabled: true,
+    component: markRaw(Emoji),
+    props: {
+      persistent: false,
+      closeOnContentClick: false,
+    }
+  }
+}

package/src/composables/Toolbar/useMediaItems.ts

@@ -1,4 +1,5 @@
 import { useImage } from "@tiptapify/composables/Toolbar/Media/useImage";
+import { useEmoji } from "@tiptapify/composables/Toolbar/Media/useEmoji";
 import { useLink } from "@tiptapify/composables/Toolbar/Media/useLink";
 import { useTable } from "@tiptapify/composables/Toolbar/Media/useTable";
 
@@ -6,6 +7,7 @@ export function useMediaItems() {
   return {
     link: useLink(),
     image: useImage(),
+    emoji: useEmoji(),
     table: useTable()
   }
 }

package/src/extensions/components/Emoji.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+
+import { Editor } from "@tiptap/vue-3";
+import { useI18n } from 'vue-i18n'
+
+import tiptapifyEmojis from "@tiptapify/extensions/emoji"
+
+import { computed, inject, Ref, ref } from 'vue'
+
+const { t } = useI18n()
+
+defineExpose({ open, close })
+
+const emit = defineEmits(['close'])
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+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 handleEmojiClick = (emoji: any) => {
+  editor.value.chain().focus().insertContent(emoji.char).run()
+  close()
+}
+
+function close() {
+  emit('close')
+}
+</script>
+
+<template>
+  <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 emojis"
+            :text="item.group"
+            :value="item.group"
+            :key="item.group"
+            density="compact"
+            rounded
+            size="small"
+        >
+          {{ t(`media.emoji.${item.group}`) }}
+        </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>
+            </div>
+          </div>
+        </VWindowItem>
+      </VWindow>
+    </div>
+  </VSheet>
+</template>
+
+<style lang="scss" scoped>
+.tiptapify-emoji-container {
+  max-height: 500px;
+  overflow-y: auto;
+
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  filter: drop-shadow(1px 2px 3px #777);
+}
+
+.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>