[js] 批量折叠和展开标题，标题批量转换不再是梦

缘起：

看到有些小伙伴们希望有标题批量折叠或展开功能（比如思源能否添加折叠或展开指定层级标题下内容的功能？和怎样快速调整大纲级别？），这个功能有时候确实挺有用的，比如批量转换等。

今天试着研究了下，于是整了一个 js 代码片段。

该代码主要有以下几个功能：

alt + 点击标题前的箭头按钮，折叠/展开所有同级标题
ctrl/meta + alt + 点击标题前的箭头按钮，折叠/展开所有标题
选择情况下，仅折叠/展开已选择的部分的标题

效果如下：

代码

https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E5%BF%AB%E9%80%9F%E6%8A%98%E5%8F%A0%E5%92%8C%E5%B1%95%E5%BC%80%E6%A0%87%E9%A2%98.js

思源的坑：

这里顺便吐槽下思源获取当前文档的坑，，看到很多小伙伴们使用下面的方法获取的

document.querySelector('[data-type="wnd"].layout__wnd--active .protyle:not(.fn__none)')

这样获取乍一看没问题，也能满足绝大多数场景，包括分屏。

但这种方法不适合思源刚刚启动或刚刚刷新后的情况，因为刚刚重启或刷新后的页面中并不存在 layout__wnd--active 这个类，导致这种方法失效。

那如果换成这样呢？

document.querySelector('[data-type="wnd"].layout__wnd--active .protyle:not(.fn__none)')||document.querySelector('[data-type="wnd"] .protyle:not(.fn__none)');

这种方式，当刚刚刷新或重启情况下，默认取第一个分屏的文档。

但，这在分屏情况下，不一定准确，用户正在操作的可能不是第一个分屏。

实时上，在分屏情况下是无解的，因为用户尚未操作，无法知道哪个文档是当前文档，换句话说不存在当前文档。这在逻辑上是没错的，从这个角度看也不算思源的坑。

所以，分屏情况下有没有准确获取用户操作的当前文档的办法呢？

我觉得这要具体问题具体分析了。

如果你确定你的操作被执行时，文档一定是被激活了的，可以用上面的方法实现。
如果有鼠标事件的操作，可以用 document.elementFromPoint(mouseX, mouseY) 方法实现，具体可以参考本代码中的获取方法。
如果 1 和 2 都无法确保，可以用 mouseover 或 mousemove 事件写入一个全局变量来实现。

当然，或许还有更好的方法吧，请各位大佬们不吝赐教！！！

[js][css] 高亮提示目前正在编辑的块、高亮提示超级块、高亮提示鼠标悬浮块

实现了： 1.高亮提示目前正在编辑的块正在编辑某个块时（不包括公式块、代码块等），明显的高亮提示 [图片] 2.高亮提示鼠标悬浮块当鼠标悬浮在某个块上时（不包括公式块、代码块等），稍淡的高亮提示 [图片] 3.高亮提示超级块当鼠标悬浮在超级块内的任意一个子块上时，将高亮提示整个超级块的范围 [图片] JS： do ..

[js] 思源笔记左侧空白部分显示自定义文字 + 学习

原贴[js] 思源笔记左侧空白部分显示自定义文字 - 链滴还可以再学习一下[js] 思源笔记左侧空白区域显示心灵毒鸡汤或倒计时 - 链滴学习得到光标所在块得到 id 通过块 id 遍历 DOM 树结构获得面包屑及其它 document.addEventListener 函数防抖函数 [图片] /*css部分*/ ..

[js] 思源笔记左侧空白区域显示心灵毒鸡汤或倒计时

根据这个帖子的灵感 https://ld246.com/article/1734576044332 写了这个显示心灵毒鸡汤的功能。感觉不错，分享给大家。功能介绍左侧 dock 空白区域显示心灵毒鸡汤双击显示下一个右键复制到剪切板可显示为跑马灯效果可显示倒计时可在右侧 dock 空白区域显示哲理名言使用 ..

[js] 思源笔记左侧空白部分显示自定义文字

使用 CSS 和 js 配合，实现思源笔记窗口获得和失去焦点时，左侧空白竖条显示不同的文字，代码如下（从 AI 获得）: [图片] CSS 代码 .fn__flex-1.dock__item--space { display: flex; justify-content: center; /* 水平居中 */ alig ..

[css] SiYuan 按键彩虹渐变效果

实现 SiYuan 按键的彩虹渐变效果，参考了 [链接] [视频] 更新：适配写味主题，优化文字颜色提醒：可以自行调节按钮大小，第二行 width 是宽度，第三行 height 是高度 #barWorkspace { width: 80px; height: 25px; border-radius: 12px !im ..

[js] 英语学习者的福音，一键播放音频链接

又名拦截指定关键词的链接并播放链接音频。对于英语学习者来说，有些单词或句子需要听听真人发音，但思源里直接播放音频很不方便。如果能直接插入音频播放按钮就好了，那么现在可以了。效果： [图片] 使用说明：一、手动插入链接编辑器输入 /链接或 /lianjie 在链接中输入你的链接即可，比如 https://re ..

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

关于

let dom = clickedDom while (dom || (dom.classList && !dom.classList.contains('protyle-content'))) { dom = dom.parentElement } let docId = null if (dom) { const protyleTop = dom.firstElementChild docId = protyleTop.firstElementChild.dataset.nodeId }

19 回帖

[js] 批量折叠和展开标题，标题批量转换不再是梦

注册关于

请输入回帖内容 ...

Wetoria • 2 周前 • 1 • 1 评论

订阅者付费者捐赠者

emmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

拿去玩

拿 dom，这种就行，最后的 dom 就是 protyle

Wetoria • 2 周前

其他回帖
wilsons • 2 周前
付费者捐赠者作者

感谢，学习了。

这种模式貌似是点击编辑器后获取的，应该和.layout__wnd--active 是一样的。

插件的好处是可以用事件和自带方法，js 片段就只能自己实现和摸索规律了，有时候看到官方的源码，想复制过来但又太复杂，这时候就想用插件了 😄 ，但估计插件也不是所有源码都是支持的。
Achuan-2 • 2 周前 • 1
订阅者先知

插件是比如在块标菜单、工具栏的按钮的回调函数会返回 protyle，其实不适用于你说的没有任何窗口操作的

也有可能是我不知道，我也是最近才入门插件开发的

1 操作
Achuan-2 在 2024-12-05 22:48:58 更新了该回帖
wilsons • 2 周前 • 1
付费者捐赠者作者

买一赠一啦！

借此贴分享下状态栏可拖动代码。

功能介绍：

让状态栏可拖动，双击可还原。

我真的需要吗？

让状态栏浮动后，你有没有发现，有时会遮挡住某些元素，有时挺烦人的。

如果你曾有过这个烦恼，下面这个代码可以让你把状态栏在需要时拖动到别的地方，双击可还原。

https://ld246.com/member/wilsons/breezemoons/1733192201673

1 引用

[js] Alt+ 右键 - 选中当前文档中所有同类型的块 • wilsons
查看全部回帖

缘起：