Ikaleio / LiteLoaderQQNT-Markdown

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

[期望]代码块优化 #75

Open yhzcake opened 2 months ago

yhzcake commented 2 months ago

f97922e93902618ecd03b7a20055e6e1 image image 如图,代码块超过消息框大小时希望可以在下方设置滚动条方便使用 (使用shift加鼠标滚轮可以滚动,但是显示代码类型并且点击复制的图标会跟着移动) 代码原文


// 选择一个目标节点,这里我们选择body,也可以根据需要选择更具体的节点 const targetNode = document.body; // 配置观察选项: const config = { childList: true, subtree: true }; // 当观察到变化时执行的回调函数 const callback = function(mutationsList, observer) { for(const mutation of mutationsList) { if (mutation.type === 'childList') { mutation.addedNodes.forEach(node => { // 检查是否是我们要找的元素 if (node.nodeType === 1 && node.classList.contains('text-normal')) { // 检查这个元素是否包含具有'message-link-preview'类的子元素 const previewChild = node.querySelector('.message-link-preview'); if (previewChild) { // 删除这个text-normal元素中的所有text元素,这里假设text是直接子节点且是文本节点或特定标签 node.querySelectorAll('text').forEach(textNode => { if (textNode.nodeType === 3 && /\S/.test(textNode.nodeValue)) { // 删除非空白文本节点 node.removeChild(textNode); } else if (textNode.nodeType === 1 && textNode.tagName.toLowerCase() === 'text') { // 删除<text>标签 node.removeChild(textNode); } }); } } }); } } }; // 创建一个观察器实例并传入回调函数 const observer = new MutationObserver(callback); // 开始观察已配置的突变 observer.observe(targetNode, config); // 后续,你可以随时停止观察 // observer.disconnect();

ps:垃圾文心一言复制出来的代码没格式化,导致我一开始还以为是bug...难绷

yhzcake commented 2 months ago

另外,与link_preview一起使用时,本插件会将link_preview生成的文字复制一份text 在使用linkify时会将两份文字同时与正常链接连接,形成新的错误链接 并且关闭linkify之后qq自带的链接转换也失效了

yhzcake commented 2 months ago

如图 image

nfnfgo commented 2 weeks ago

感谢您的反馈!

关于宽度 overflow 的代码块问题,这个 commit 已经修复,将会在将来的版本中推送。

image

nfnfgo commented 2 weeks ago

关闭 Linkify 后链接作为纯文本显示,我个人感觉可以算是本插件的 Expected Behavior, 毕竟对于插件来说,链接也是文字的一部分,而既然 Markdown 设置中关闭了 Linkify, 自然只能将其考虑为普通文本进行 Markdown 渲染。如果想要改变这个逻辑,可能需要做较多特判和变动,故目前我个人倾向于保留这个行为。

关于链接预览问题,可以复现。其原因是 Link Preview 插件在 span.text-element 元素中添加了 div 用于显示元素,这个元素被 Markdown 渲染流程当做了文本进行渲染,有时间的话会想想如何避免此类内嵌元素的影响。

此外,推荐使用 LiteTools 插件中提供的链接预览,其功能与此插件兼容良好,如下图:

image

yhzcake commented 2 weeks ago

原来你也看天堂( 另外我不用litetools是因为有其他的插件把它的这个预览覆盖了用不了..

nfnfgo commented 2 weeks ago

目前来说,我个人感觉最快的解决方式就是在 textElementProcessor() 里面加特判,但是这么做不太优雅,我再想想有没有其他更加通用的解决方式,能避免以后其他出现在 text-element 中的奇怪元素引起问题()

yhzcake commented 2 weeks ago

感觉通用的解决方式难找,每个插件都有自己的写法,很难统一,况且有很多作者都不想多工作量做兼容