feat: editor emoji picker (#775)

* feat: emoji picker

* fix: lazy load emoji data

* loading animation (for slow connection)

* parsing :shortcode: and replace with emoji + add extension to title-editor

* fix

* Remove title editor support
* Remove shortcuts support
* Cleanup

---------

Co-authored-by: Philipinho <16838612+Philipinho@users.noreply.github.com>

apps/client/src/features/editor/extensions/emoji-command.ts

@@ -0,0 +1,40 @@
+import { Extension } from "@tiptap/core";
+import { PluginKey } from "@tiptap/pm/state";
+import Suggestion, { SuggestionOptions } from "@tiptap/suggestion";
+import getEmojiItems from "../components/emoji-menu/emoji-items";
+import renderEmojiItems from "../components/emoji-menu/render-emoji-items";
+export const emojiMenuPluginKey = new PluginKey("emoji-command");
+
+const Command = Extension.create({
+  name: "emoji-command",
+
+  addOptions() {
+    return {
+      suggestion: {
+        char: ":",
+        command: ({ editor, range, props }) => {
+          props.command({ editor, range, props });
+        },
+      } as Partial<SuggestionOptions>,
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        pluginKey: emojiMenuPluginKey,
+        ...this.options.suggestion,
+        editor: this.editor,
+      }),
+    ];
+  },
+});
+
+const EmojiCommand = Command.configure({
+  suggestion: {
+    items: getEmojiItems,
+    render: renderEmojiItems,
+  },
+});
+
+export default EmojiCommand;

apps/client/src/features/editor/extensions/extensions.ts

@@ -70,6 +70,7 @@ import { ReactNodeViewRenderer } from "@tiptap/react";
 import MentionView from "@/features/editor/components/mention/mention-view.tsx";
 import i18n from "@/i18n.ts";
 import { MarkdownClipboard } from "@/features/editor/extensions/markdown-clipboard.ts";
+import EmojiCommand from "./emoji-command";
 
 const lowlight = createLowlight(common);
 lowlight.register("mermaid", plaintext);
@@ -132,6 +133,7 @@ export const mainExtensions = [
   TextStyle,
   Color,
   SlashCommand,
+  EmojiCommand,
   Comment.configure({
     HTMLAttributes: {
       class: "comment-mark",