[WIKI-550] improve : make emoji suggestion configurable

packages/editor/src/core/components/editors/document/collaborative-editor.tsx

@@ -39,6 +39,7 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
     serverHandler,
     tabIndex,
     user,
+    showEmojiSuggestion,
   } = props;
 
   const extensions: Extensions = [];
@@ -72,6 +73,7 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
     serverHandler,
     tabIndex,
     user,
+    showEmojiSuggestion,
   });
 
   const editorContainerClassNames = getEditorClassNames({

packages/editor/src/core/components/editors/editor-wrapper.tsx

@@ -38,6 +38,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
     placeholder,
     tabIndex,
     value,
+    showEmojiSuggestion,
   } = props;
 
   const editor = useEditor({
@@ -59,6 +60,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
     placeholder,
     tabIndex,
     value,
+    showEmojiSuggestion,
   });
 
   const editorContainerClassName = getEditorClassNames({

packages/editor/src/core/extensions/emoji/emoji.ts

@@ -15,6 +15,7 @@ import { Plugin, PluginKey, Transaction } from "@tiptap/pm/state";
 import Suggestion, { SuggestionOptions } from "@tiptap/suggestion";
 import emojiRegex from "emoji-regex";
 import { isEmojiSupported } from "is-emoji-supported";
+import { CORE_EXTENSIONS } from "@/constants/extension";
 // helpers
 import { customFindSuggestionMatch } from "@/helpers/find-suggestion-match";
 
@@ -88,7 +89,7 @@ export const inputRegex = /:([a-zA-Z0-9_+-]+):$/;
 export const pasteRegex = /:([a-zA-Z0-9_+-]+):/g;
 
 export const Emoji = Node.create<EmojiOptions, EmojiStorage>({
-  name: "emoji",
+  name: CORE_EXTENSIONS.EMOJI,
 
   inline: true,
 
@@ -99,7 +100,6 @@ export const Emoji = Node.create<EmojiOptions, EmojiStorage>({
   addOptions() {
     return {
       HTMLAttributes: {},
-      // emojis: ,
       emojis: emojis,
       enableEmoticons: false,
       forceFallbackImages: false,
@@ -193,23 +193,7 @@ export const Emoji = Node.create<EmojiOptions, EmojiStorage>({
       return ["span", attributes, `:${node.attrs.name}:`];
     }
 
-    const renderFallbackImage = false;
-
-    return [
-      "span",
-      attributes,
-      renderFallbackImage
-        ? [
-            "img",
-            {
-              src: emojiItem.fallbackImage,
-              draggable: "false",
-              loading: "lazy",
-              align: "absmiddle",
-            },
-          ]
-        : emojiItem.emoji || `:${emojiItem.shortcodes[0]}:`,
-    ];
+    return ["span", attributes, emojiItem.emoji || `:${emojiItem.shortcodes[0]}:`];
   },
 
   renderText({ node }) {

packages/editor/src/core/extensions/emoji/extension.ts

@@ -2,10 +2,21 @@
 import { gitHubEmojis, shortcodeToEmoji } from "@tiptap/extension-emoji";
 import { MarkdownSerializerState } from "@tiptap/pm/markdown";
 import { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { Emoji } from "./emoji";
+import { Emoji, EmojiOptions } from "./emoji";
 import suggestion from "./suggestion";
 
-export const EmojiExtension = Emoji.extend({
+export interface ExtendedEmojiOptions extends EmojiOptions {
+  showSuggestion: boolean;
+}
+
+export const EmojiExtension = Emoji.extend<ExtendedEmojiOptions>({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      showSuggestion: true,
+    };
+  },
+
   addStorage() {
     return {
       ...this.parent?.(),
@@ -23,8 +34,22 @@ export const EmojiExtension = Emoji.extend({
       },
     };
   },
+
+  addProseMirrorPlugins() {
+    const parentPlugins = this.parent?.() || [];
+
+    // If showSuggestion is false, filter out the Suggestion plugin
+    if (!this.options.showSuggestion) {
+      // Filter out the suggestion plugin (first plugin from parent)
+      return parentPlugins.filter((plugin, index) => index !== 0);
+    }
+
+    // If showSuggestion is true, return all parent plugins
+    return parentPlugins;
+  },
 }).configure({
   emojis: gitHubEmojis,
   suggestion: suggestion,
   enableEmoticons: true,
+  showSuggestion: true,
 });

packages/editor/src/core/extensions/extensions.ts

@@ -38,7 +38,13 @@ import { CustomStarterKitExtension } from "./starter-kit";
 
 type TArguments = Pick<
   IEditorProps,
-  "disabledExtensions" | "flaggedExtensions" | "fileHandler" | "mentionHandler" | "placeholder" | "tabIndex"
+  | "disabledExtensions"
+  | "flaggedExtensions"
+  | "fileHandler"
+  | "mentionHandler"
+  | "placeholder"
+  | "tabIndex"
+  | "showEmojiSuggestion"
 > & {
   enableHistory: boolean;
   editable: boolean;
@@ -54,13 +60,16 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     placeholder,
     tabIndex,
     editable,
+    showEmojiSuggestion,
   } = args;
 
   const extensions = [
     CustomStarterKitExtension({
       enableHistory,
     }),
-    EmojiExtension,
+    EmojiExtension.configure({
+      showSuggestion: showEmojiSuggestion ?? true,
+    }),
     CustomQuoteExtension,
     CustomHorizontalRule,
     CustomKeymap,

packages/editor/src/core/hooks/use-collaborative-editor.ts

@@ -33,6 +33,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorHookProps) =>
     serverHandler,
     tabIndex,
     user,
+    showEmojiSuggestion,
   } = props;
   // states
   const [hasServerConnectionFailed, setHasServerConnectionFailed] = useState(false);
@@ -113,6 +114,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorHookProps) =>
     placeholder,
     provider,
     tabIndex,
+    showEmojiSuggestion,
   });
 
   return {

packages/editor/src/core/hooks/use-editor.ts

@@ -42,6 +42,7 @@ export const useEditor = (props: TEditorHookProps) => {
     provider,
     tabIndex,
     value,
+    showEmojiSuggestion,
   } = props;
 
   const editor = useTiptapEditor(
@@ -67,6 +68,7 @@ export const useEditor = (props: TEditorHookProps) => {
           mentionHandler,
           placeholder,
           tabIndex,
+          showEmojiSuggestion,
         }),
         ...extensions,
       ],

packages/editor/src/core/types/editor.ts

@@ -140,6 +140,7 @@ export interface IEditorProps {
   placeholder?: string | ((isFocused: boolean, value: string) => string);
   tabIndex?: number;
   value?: string | null;
+  showEmojiSuggestion?: boolean;
 }
 
 export type ILiteTextEditorProps = IEditorProps;

packages/editor/src/core/types/hook.ts

@@ -24,6 +24,7 @@ export type TEditorHookProps = TCoreHookProps &
     | "placeholder"
     | "tabIndex"
     | "value"
+    | "showEmojiSuggestion"
   > & {
     editable: boolean;
     enableHistory: boolean;
@@ -44,6 +45,7 @@ export type TCollaborativeEditorHookProps = TCoreHookProps &
     | "onTransaction"
     | "placeholder"
     | "tabIndex"
+    | "showEmojiSuggestion"
   > &
   Pick<ICollaborativeDocumentEditorProps, "embedHandler" | "realtimeConfig" | "serverHandler" | "user">;