Files
gitmost/apps/client/src/features/editor/extensions/emoji-command.ts
T
faruk-agentiqus a3c1c6cccd fix(editor): disable slash and emoji menus inside code blocks (#1897)
The slash command menu (/) and emoji menu (:) were incorrectly
triggering when typing inside code blocks, breaking keyboard
navigation and confusing users who type paths like /work or
symbols like := in their code.

Added an `allow` function to both SlashCommand and EmojiCommand
extensions that checks if the cursor is inside a code block and
disables the menu accordingly.

Closes #1730
2026-03-03 16:51:00 +00:00

49 lines
1.2 KiB
TypeScript

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 });
},
allow: ({ state, range }) => {
const $from = state.doc.resolve(range.from);
// Disable emoji menu inside code blocks
if ($from.parent.type.name === "codeBlock") {
return false;
}
return true;
},
} 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;