a3c1c6cccd
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
49 lines
1.2 KiB
TypeScript
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;
|