Bubble 组件使用自定义渲染时（markdown-it），设置的 typing.suffix 会被换行。

[1040461247]

重现步骤

在线示例链接：（必填）https://codesandbox.io/p/sandbox/vibrant-glitter-ljwstm

步骤：

1. 拷贝官网「自定义渲染」demo 2.为 typing 添加参数 { step: 1, interval: 50, suffix: <>💗</> }

当前行为

suffix 被挤到下一行，不在当前打字效果后方

预期行为

suffix 应当在打字位置

上下文

No response

版本

1.0.5

您在哪些浏览器上遇到了这个问题？

Chrome

[ztkuaikuai]

看了下源码的实现，suffix 目前是独占一行的，感觉可以加个配置项去实现放置在打字位置

[YumoImer]

suffix 被挤到下一行，不在当前打字效果后方

这个是因为使用 messageRender 渲染的区域是块级元素。所以会出现这个现象。行内、行内块元素则不会。

另外，对于添加一个配置项去做这个需求，我暂时不打算去做。

[ztkuaikuai]

@YumoImer 老大未来有往这方面去优化的打算吗，我很乐意去实现这个功能

[1040461247]

suffix 被挤到下一行，不在当前打字效果后方

这个是因为使用 messageRender 渲染的区域是块级元素。所以会出现这个现象。行内、行内块元素则不会。

另外，对于添加一个配置项去做这个需求，我暂时不打算去做。

看下来这个问题不太好解决...有别的方式能在 markdown 渲染的时候支持 suffix 吗？

[YumoImer]

非常感谢～@1040461247 @ztkuaikuai 我们之前实现过这个功能在一个内部的组件库。有一些痛点：

1. 类似 messageRender 返回的 ReactNode 结构未知，通过递归找寻最深层的元素添加 suffix 很有可能找错「即使这个元素确实是最深层的元素」
2. 性能问题

这是我不太想将这个功能做重的原因。如果有其他思路可以提供出来我们一起讨论下～

[ztkuaikuai]

@YumoImer 是的，抱歉我之前理解错了，在该 issue 的情况下 messageRender 渲染的区域是块级元素，所以 suffix 会被挤下去。行内、行内块元素则不会。

@1040461247 我觉得这种场景可以直接在 renderMarkdown 将你的自定义 suffix 添加到 content 后面，通过 onTypingComplete 钩子维护一个打字是否完成的状态，去判断 suffix 的显示与否。这样应该能实现你的需求，我根据你的在线示例简单写了一个场景，可以参考下：https://codesandbox.io/p/sandbox/objective-dust-qz6lj4?file=%2Fsrc%2FApp.tsx%3A49%2C9-49%2C25

[1040461247]

@YumoImer 是的，抱歉我之前理解错了，在该 issue 的情况下 messageRender 渲染的区域是块级元素，所以 suffix 会被挤下去。行内、行内块元素则不会。

@1040461247 我觉得这种场景可以直接在 renderMarkdown 将你的自定义 suffix 添加到 content 后面，通过 onTypingComplete 钩子维护一个打字是否完成的状态，去判断 suffix 的显示与否。这样应该能实现你的需求，我根据你的在线示例简单写了一个场景，可以参考下：https://codesandbox.io/p/sandbox/objective-dust-qz6lj4?file=%2Fsrc%2FApp.tsx%3A49%2C9-49%2C25

感谢！看了一下这个 demo 可以支持 string 类型的 suffix，但如果对 suffix 有动画需求需要传递一个 ReactNode 还会存在一些问题。

[ztkuaikuai]

是这样，这种方式不支持传递 ReactNode 😭，只是将 suffix 作为 md.render 参数的一部分。我目前还没有特别好的想法去解决上述 Imer 说的痛点；如果可以显式的声明 suffix 的插入点在哪，也许可以用 createPortal 去实现