输入完标题，回车无法换行到内容区域

[Arktomson]

请一定按照该模板提交 issue ，谢谢～

问题现象

输入完标题，回车无法换行到内容区域 描述问题现象

截图或录屏（可选）

https://github.com/huashui-ai/public-discussion/assets/79007994/c7fe47cb-28f1-4dc5-8599-4c2111053650 标题那边，一直在按回车

你期望的样子

回车进入内容正文区域，继续输入 你预期应该是怎样的？

复现步骤

明确的复现步骤，让我可以快速复现问题

• a
• b
• c

相关链接

如某个代码文件、wiki 文章等

[shuibuzhuo]

@wangfupeng1988

技术方案

问题原因：目前标题输入框是 input 元素，并且没有监听回车事件，所以对于回车没有反馈

如何修改：

1. 监听回车事件，使用 ahooks 的 useKeyPress
2. 在监听到回车事件时，执行 editor.chain().focus()

有点拿不准的 1 个点：

如何在父组件中拿到 editor 实例？

现在组件的结构是： Content 组件

• 标题的 Input 组件
• TiptapEditor 组件（editor 实例是在这里实例化的）

现在需要在 Content 父组件中，监听回车，并且执行 editor 实例的方法。

我对于 React 中，父组件拿子组件的 editor 变量不太熟悉，我的想法是：

1. 使用 useImperativeHandle 暴露一个方法，比如叫 getEditor
2. 然后在 getEditor 中 return editor 实例
3. 在 Content 父组件中执行 getEditor 方法，便可以获取到 editor 实例，然后再执行 editor.chain().focus() 方法，就可以聚焦到 EditorContent 了。

不知道这样子拿 editor 实例是符合 react 里的范式的吗，还是有别的更好的在父组件拿子组件中某个变量的方法呀

[wangfupeng1988]

在监听到回车事件时，执行 editor.chain().focus()

@shuibuzhuo 当编辑器有内容时，要 focus 到开始位置

如何在父组件中拿到 editor 实例？

使用自定义事件 emitter 即可，这样简单易懂，代码中有很多应用，参考代码中的写法

[shuibuzhuo]

当编辑器有内容时，要 focus 到开始位置

ok，我记得默认行为就是这个，我再确定下

使用自定义事件 emitter 即可，这样简单易懂，代码中有很多应用，参考代码中的写法

有道理，确实自定义事件会很清楚👾

[shuibuzhuo]

开发完成，进入测试阶段。 @weiwang-1992 大佬帮忙测试下，感恩

测试内容：

• 光标聚焦到标题输入框，回车，会将光标后的标题，填入到编辑器内容区域（这块效果参考了notion）
• 光标聚焦到编辑器内容区域，回车，能够正常回车

notion 标题回车的效果：

[weiwang-1992]

测试结果

测试内容	测试结果	备注
光标聚焦到标题输入框，回车，会将光标后的标题，填入到编辑器内容区域	通过	title填入编辑器后再ctrl + z 该文字会消失
光标聚焦到编辑器内容区域，回车，能够正常回车	通过

@shuibuzhuo 测试通过 @wangfupeng1988 看下备注，这个是问题吗？是的话要创建新issue吗？

[wangfupeng1988]

title填入编辑器后再ctrl + z 该文字会消失

这个没问题