动态显示光标所处标题层级(完毕)

1. 多级需求和方案设想及其结论

1. 获取当前光标的位置

1.1. 一

1.1. 通过obsidian api获得

1.2. 二

1.2. 通过cm-active获取当前光标所在的标签

2. 直接获取到标题层级序列:

2.1. 通过正则表达式匹配所有的标题

/(?<=\n|^)#{1,6}(?= ).*/g

2.2. 对于匹配到的标题进行特殊处理

3.3. 如果添加标题到已有队列, 任然能保持递减(不能相等)的话, 则添加到队列

否则, 依次从低级往高级删除之前保存的标题, 直到只剩下欲插入标题的上一级

3. 获取最靠近标题的级别

3.1. 通过正则表达式匹配class属性的值

3.2. 正则表达式:

/(?<=HyperMD-header-)[1-6]/

3.2. 二:

3.3. 通过正则表达式匹配#的个数:

正则: /(?<=\n|^)#{1,6}(?= )/

4. 获取标题的文字

4.1. 把标题的#都替换为空

5. 代码块和YAML中的标题跳过:

5.1. 检测标题的正则表达式还同时检测其他

块

5.2. 匹配到之后就标记处于…块中, 下次再遇到相同的块才取消标记

拓展后的正则: /(?<=\n|^)#{1,6}(?= ).*|```(?=\n)/g

5.3. YAML特殊处理:

5.4. 二:

外部匹配YAML块

记录YAML的区间

外部匹配大代码块

6. 记录所有代码块的索引

用数组从0开始存储代码块索引

把当前标题索引放到两个代码块索引中, 看左边的索引

如果左边没有数, 则处于代码块外

如果为偶数, 则处于代码块中

如果为奇数, 则处于代码块外

6. 精简显示内容:

6.1. 光标所在的当前行排除掉, 不进入算法范围

正则表达式把最后一个换行后面的字符都替换为空

正则: /.*$/

6.2. 二:

获取光标所在行的级别, 只有小于该级别的才能进入数组

通过obsidian editor api获取当前行

用正则获取层级

去掉标题前面的序号

去掉标题前面的#

使用正则: /(?<=\n|^)#{1,6}(?= )( ([0-9]\.)* ?)?/

7. 突出显示内容:

7.1. 用md渲染标题

7.2. 二:

不同标题用不同颜色和大小

每个标题都用一个div标签储存, 并塞进box里面

塞进去的时候同时取得级别, 根据级别打上对应的类别

用css对每个级别的标题预制好样式

8. 放弃:

8.1. 获取当前光标前面最靠近的标题

2.1. 方案1

2.1. 通过obsidian getrange api 获取 前面文本

使用正则表达式获取

2.2. 方案2:

2.3. 遍历获取上一个兄弟元素

2.4. 判断是否含有标题的类

8.2. 找最靠近标题前面最靠近的更上一级标题

5.1. 往上遍历兄弟元素, 只要是不大于当前标题级别的都舍去, 否则, 入数组

队列: push方法

保留上一个标题的级别

9. 节省资源:

9.1. 一:

10. 只在光标所在行的级别发生改变时, 才触发

监听光标任意移动

监听所有文档标签的onfocus与onblur

为cm-content类标签的所有子标签都添加这两个事件监听

二:

1. 监听上下左右和pagedown和pageup
2. 监听鼠标点击

9.2. 二:

设置空闲等待

监听光标在标题间的切换

同时标题的onfocus与onblur

为cm-content类标签下的所有

9.3. 三:

设置按钮手动触发, 或按键手动触发

触发一段时间后自动隐藏

10. 多面板依然可以工作

11. 更适配手机

11.1. 添加按钮

按钮一段时间后自动透明

按钮一段时间自动收起

按钮点击后重置透明和收起

11.2. 预览模式下也能放置光标:

获取当前页面的指定文本以及上下文

通过伪类选择器

用:hover选择触摸到的div标签

通过js选择兄弟元素, 获取上下文

使用正则匹配具有上下文的点击行

二:

1. 针对不同的div块, 进行不同处理
   1. 代码块就去掉行号

1. 调研材料及结论

1. 标题HTML布局

1.1. 结论:

child::obsidian页面Html结构

2. obsidain笔记预览模式HTML布局

child::obsidian页面Html结构

3. obsidian api

child::obsidian官方api合集

3.1. 预览模式下有什么api可是使用

4. 伪类选择器

child::伪类选择器

5. 调研代办:

• 找找有没有神奇的伪类选择器, 与当前所看到的元素有关
  • :hover手机能不能使用
  • 只选择含有文本的标签, (是亲自含有, 而不是子标签有)
  • 能选择代码块
  • 只选择最外层的, 即一行的最外层标签
• 浏览更新后的api
  • 看看在预览模式下怎么获取指定行数
    • 思考能不能不停的setline然后推断出在哪行
      • 不断setline, 然后查看被更改了text的标签, 进而能够推断
• 编写setline测试程序
• 怎么获取当前标签是第几个孩子
• 测试htmlToMarkdown
• 得到各种cache, 好像是通过matedatecache
  • 在app中存有
• 编写正则使得可以匹配具有相同上下文的当前行
• 编写测试程序, 获取点击行的innerText
• 能不能梗概标签中的文本, 从而更改原来md文本
• 有没有什么方法可以更改预览模式标签, 从而更改原md文本呢

1. 随想（未整理）

4. 项目结论

5. 项目代办

• js dom元素的属性
• 编写正则表达式, 匹配所有标题
• 拓展正则表达式, 使其匹配其他块
  • 行内代码块, 大代码块, YAML块
• 正则获取标题级别
• 正则获取标题文本
• 获取当前光标位置
• 获取光标前文本
• 删掉光标前文本的最后一行
• 编程序获取标题主功能
• 添加代码块排除功能
• 精简内容
• 突出显示内容
• 如果当前行没有等级的话, 特殊处理
• 光标移动的事件触发
• 对齐方式text-align
• 修bug
• 隐藏动画
• 快捷键触发
• 一段时间后隐藏
• 按钮
• 按钮一段时间后自动隐藏

6.