Ikaleio / LiteLoaderQQNT-Markdown

为QQ添加Markdown渲染支持
Do What The F*ck You Want To Public License
123 stars 12 forks source link

Markdown 渲染器自动添加的 <p> 标签与其他插件的消息时间显示冲突 #56

Closed Ikaleio closed 2 weeks ago

Ikaleio commented 4 months ago

image

如图,时间与消息间被强制添加一个换行,在单行消息情况下尤为明显。

暂定解决方案:特判,删除单行消息前后包裹的 <p>

Ikaleio commented 4 months ago

已试图在最新版本中修复。

nfnfgo commented 4 months ago

我试了一下,刚刚的commit似乎会导致所有消息的时间显示都被放置在右边,不知道你那边是否能复现。

image

Ikaleio commented 4 months ago

呃 他本来不应该在右边吗

nfnfgo commented 4 months ago

单行在右边确实是看起来舒服很多,但是我这边多行的消息时间也被放在了右边()

image

我个人感觉多行的情况下还是显示在最下面会好一点(大概?)不过也可能每个人习惯不一样

Ikaleio commented 4 months ago

哦 你说这个啊

不过我并没有什么很好的思路去改,这个 Commit 只是一个临时的 Workaround,因为单行换行一下实在太丑了。

xiyuesaves commented 4 months ago

或许我那边可以做个判断,在检测到启用了 Markdown 插件后强制将时间移动到气泡外部?

Ikaleio commented 4 months ago

@xiyuesaves 昨天的最后一个 Release 应当修复了这个问题

xiyuesaves commented 4 months ago

@xiyuesaves 昨天的最后一个 Release 应当修复了这个问题

ok,我看 issue 没有关闭以为还没处理好,那就没我啥事了)

Ikaleio commented 4 months ago

image

还是不对劲,部分长消息的消息框会比别的消息长。

以下是关闭插件效果: image

Ikaleio commented 4 months ago

可以注意到同一条消息开启插件后首先自动折行没了其次本应该单换一行而不再右移的时间框再次右移了。

nfnfgo commented 4 months ago

目前的解决方案确实不够好()所以当初说的是 "should not be considered as the final solution" 可是我没想到有什么好办法,或许我觉得也许应该尝试一下抛弃直接更改CSS,转而采用你之前说的那种特判方案?

如果采用特判方案,renderer.jsx 里面的<div class="text-normal"></div>元素类型要改成span,否则特判去除了<p>包裹似乎也没用。(之前在DevTools浅试了一下)

nfnfgo commented 4 months ago

image

还是不对劲,部分长消息的消息框会比别的消息长。

以下是关闭插件效果: image

关于这个问题,我又测试了一下,有以下发现。

首先,关于我那次 Workaround 的原理,本质上就是用JS手动确认某个消息的消息框的 height ,如果比一行略高(具体的高度Threshold我忘记设置了多少,可以查看代码),则认为是多行消息,flex-direction 属性则会被修改为 column

该测试脚本只会在每次 render 函数被调用时触发,意味着如果当发送消息之后改变 viewport 大小(比如对QQNT界面进行Resize)是不会触发这个测试脚本的。而我这边只有对QQ的Window进行Resize之后才会出现你给出的例子的情况。

由小变大的Resize

这种情况下,在原来更小的屏幕上,消息多行显示,调整Size之后消息变为单行,但是flex-direction=column保持,所以会造成单行消息,时间仍换行。

由大变小的Resize

同理,这种情况下,原来的消息单行显示,时间在右边。调整Size后,消息被挤压到多行显示,但是flex-direction=row保持,则会出现你提供的图中的情况。

其余情况暂时未发现时间显示错误问题。