diff --git a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx index daaa5617737..e449a743754 100644 --- a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx +++ b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx @@ -39,6 +39,7 @@ const CollaborativeDocumentEditor: React.FC = serverHandler, tabIndex, user, + showEmojiSuggestion, } = props; const extensions: Extensions = []; @@ -72,6 +73,7 @@ const CollaborativeDocumentEditor: React.FC = serverHandler, tabIndex, user, + showEmojiSuggestion, }); const editorContainerClassNames = getEditorClassNames({ diff --git a/packages/editor/src/core/components/editors/editor-wrapper.tsx b/packages/editor/src/core/components/editors/editor-wrapper.tsx index 0ca626683dc..07f7291a615 100644 --- a/packages/editor/src/core/components/editors/editor-wrapper.tsx +++ b/packages/editor/src/core/components/editors/editor-wrapper.tsx @@ -38,6 +38,7 @@ export const EditorWrapper: React.FC = (props) => { placeholder, tabIndex, value, + showEmojiSuggestion, } = props; const editor = useEditor({ @@ -59,6 +60,7 @@ export const EditorWrapper: React.FC = (props) => { placeholder, tabIndex, value, + showEmojiSuggestion, }); const editorContainerClassName = getEditorClassNames({ diff --git a/packages/editor/src/core/extensions/emoji/emoji.ts b/packages/editor/src/core/extensions/emoji/emoji.ts index 581a094b8c9..cef27137462 100644 --- a/packages/editor/src/core/extensions/emoji/emoji.ts +++ b/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({ - name: "emoji", + name: CORE_EXTENSIONS.EMOJI, inline: true, @@ -99,7 +100,6 @@ export const Emoji = Node.create({ addOptions() { return { HTMLAttributes: {}, - // emojis: , emojis: emojis, enableEmoticons: false, forceFallbackImages: false, @@ -193,23 +193,7 @@ export const Emoji = Node.create({ 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 }) { diff --git a/packages/editor/src/core/extensions/emoji/extension.ts b/packages/editor/src/core/extensions/emoji/extension.ts index 7e35038cc95..3ecfc4e39ca 100644 --- a/packages/editor/src/core/extensions/emoji/extension.ts +++ b/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({ + 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, }); diff --git a/packages/editor/src/core/extensions/extensions.ts b/packages/editor/src/core/extensions/extensions.ts index 27103693b2f..a25cb865b9f 100644 --- a/packages/editor/src/core/extensions/extensions.ts +++ b/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, diff --git a/packages/editor/src/core/hooks/use-collaborative-editor.ts b/packages/editor/src/core/hooks/use-collaborative-editor.ts index 3b4b333e6af..8fb4a874530 100644 --- a/packages/editor/src/core/hooks/use-collaborative-editor.ts +++ b/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 { diff --git a/packages/editor/src/core/hooks/use-editor.ts b/packages/editor/src/core/hooks/use-editor.ts index 1979d46b14b..ab26d30868f 100644 --- a/packages/editor/src/core/hooks/use-editor.ts +++ b/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, ], diff --git a/packages/editor/src/core/types/editor.ts b/packages/editor/src/core/types/editor.ts index d4d572502fe..61ac292b2c1 100644 --- a/packages/editor/src/core/types/editor.ts +++ b/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; diff --git a/packages/editor/src/core/types/hook.ts b/packages/editor/src/core/types/hook.ts index 40974981b7d..3ee2acfb12a 100644 --- a/packages/editor/src/core/types/hook.ts +++ b/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;