自定义Enter命令与MentionsPlugin优先级冲突,寻求简易解决方案
解决方案
方案1:在自定义命令中判断提及激活状态
不用修改优先级,而是在触发自定义逻辑前,检查MentionsPlugin是否处于候选选择状态。如果是,就放弃执行自身逻辑,让Mentions的命令优先处理:
useEffect(() => { return mergeRegister( editor.registerCommand(KEY_ENTER_COMMAND, (event) => { // 获取Mentions插件的状态 const mentionsState = editor.getPluginState(MentionsPlugin); // 如果候选列表已展开且有选中项,交给Mentions处理 if (mentionsState.isOpen && mentionsState.selectedIndex !== -1) { return false; } // 执行发送数据和清空编辑器的逻辑 // send data and clear editor logic return true; }, COMMAND_PRIORITY_LOW), ); }, [editor]);
方案2:覆盖Mentions的Enter命令优先级
无需复制整个插件,只需找到Mentions原有Enter命令的逻辑,用更高优先级重新注册,让它先于你的自定义命令执行:
useEffect(() => { // 取消Mentions原有的Enter命令注册 const existingCommands = editor.getCommand(KEY_ENTER_COMMAND); const mentionsCommand = existingCommands.find(cmd => // 根据实际情况匹配Mentions的命令,比如通过内部标识符或逻辑特征 cmd.handler.toString().includes('insertMention') ); if (mentionsCommand) { editor.unregisterCommand(KEY_ENTER_COMMAND, mentionsCommand.handler); } // 重新注册Mentions的Enter命令,设置NORMAL优先级 const customMentionsEnterHandler = (event) => { const mentionsState = editor.getPluginState(MentionsPlugin); if (mentionsState.isOpen && mentionsState.selectedIndex !== -1) { // 执行Mentions原有的选中插入逻辑 insertMention(editor, mentionsState.items[mentionsState.selectedIndex]); mentionsState.close(); return true; } return false; }; return mergeRegister( editor.registerCommand(KEY_ENTER_COMMAND, customMentionsEnterHandler, COMMAND_PRIORITY_NORMAL), // 你的自定义命令保持LOW优先级 editor.registerCommand(KEY_ENTER_COMMAND, (event) => { // send data and clear editor logic return true; }, COMMAND_PRIORITY_LOW), ); }, [editor]);
方案3:直接监听原生键盘事件
绕开命令优先级机制,通过原生keydown事件判断并处理:
useEffect(() => { const handleKeyDown = (event) => { if (event.key !== 'Enter') return; const mentionsState = editor.getPluginState(MentionsPlugin); // 如果处于提及选择状态,不执行自定义逻辑 if (mentionsState.isOpen && mentionsState.selectedIndex !== -1) return; // 执行发送和清空逻辑 // send data and clear editor logic event.preventDefault(); event.stopPropagation(); }; const editorRoot = editor.getRootElement(); editorRoot.addEventListener('keydown', handleKeyDown); return () => editorRoot.removeEventListener('keydown', handleKeyDown); }, [editor]);
内容的提问来源于stack exchange,提问作者kabukiman
相关产品推荐
相关产品推荐

