feat(editor): emoji integration (#171)

Author: farnabaz

package.json

@@ -66,6 +66,7 @@
     "@octokit/types": "^16.0.0",
     "@release-it/conventional-changelog": "^10.0.3",
     "@tailwindcss/typography": "^0.5.19",
+    "@tiptap/extension-emoji": "^3.13.0",
     "@types/js-yaml": "^4.0.9",
     "@unhead/vue": "^2.0.19",
     "@unpic/vue": "^1.0.0",

pnpm-lock.yaml

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import type { DropdownMenuItem } from '@nuxt/ui/runtime/components/DropdownMenu.vue.d.ts'
 import type { EditorSuggestionMenuItem } from '@nuxt/ui/runtime/components/EditorSuggestionMenu.vue.d.ts'
-// import { Emoji, gitHubEmojis } from '@tiptap/extension-emoji'
+import { Emoji, gitHubEmojis } from '@tiptap/extension-emoji'
 import type { PropType } from 'vue'
 import type { Editor, JSONContent } from '@tiptap/vue-3'
 import type { MDCRoot, Toc } from '@nuxtjs/mdc'
 import { generateToc } from '@nuxtjs/mdc/dist/runtime/parser/toc'
 import type { DraftItem, DatabasePageItem } from '../../types'
 import type { MarkdownRoot } from '@nuxt/content'
 import type { EditorCustomHandlers } from '@nuxt/ui'
+import type { EditorEmojiMenuItem } from '@nuxt/ui/runtime/components/EditorEmojiMenu.vue.d.ts'
 import { ref, watch, computed } from 'vue'
 import { titleCase } from 'scule'
 import { useI18n } from 'vue-i18n'
@@ -152,6 +153,10 @@ const dragHandleItems = (editor: Editor): DropdownMenuItem[][] => {
 }
 
 const toolbarItems = computed(() => getStandardToolbarItems(t))
+
+const emojiItems: EditorEmojiMenuItem[] = gitHubEmojis.filter(
+  emoji => !emoji.name.startsWith('regional_indicator_'),
+)
 </script>
 
 <template>
@@ -184,6 +189,7 @@ const toolbarItems = computed(() => getStandardToolbarItems(t))
         InlineElement,
         Slot,
         CodeBlock,
+        Emoji,
       ]"
       :placeholder="$t('studio.tiptap.editor.placeholder')"
     >
@@ -226,6 +232,11 @@ const toolbarItems = computed(() => getStandardToolbarItems(t))
         :editor="editor"
         :items="suggestionItems"
       />
+
+      <UEditorEmojiMenu
+        :editor="editor"
+        :items="emojiItems"
+      />
     </UEditor>
   </div>
 </template>

src/app/src/components/content/ContentEditorTipTap.vue

@@ -1,2 +1,5 @@
 export { VirtualMediaCollectionName } from './utils/media'
 export type { MarkdownParsingOptions } from './types/content'
+
+// Temporary export for remark emoji plugin
+export * from './utils/emoji'