[功能合集]大纲标题拖拽、代码块行号颜色、历史光标前进后退、可同名标题

[wgy981930674]

typora_plugin-master.zip

大纲标题拖拽改变节点内容

规则： 目的标题不能是源标题的子标题，否则会提示。
源标题(及其子标题)会根据拖拽插入目的标题的节点下。

• 测试了以下数据，没什么问题：

一级标题1
一级标题正文1

二级标题1.1
二级标题正文1.1

三级标题1.1.1
三级标题正文1.1.1

一级标题2
一级标题正文2.1

二级标题2.1
二级标题正文2.1

三级标题2.1.1
三级标题2.1.2
三级标题正文2.1.2

代码块内解析函数调用关系

• 规则：===>会变色 ，<===会还原颜色

• 功能背景是：我经常需要记录代码流程，比如函数之间的跳转关系。
  其实，Uml的类图应该比较合适描述函数之间关系
  所以做了这个功能，相同颜色表示同一个函数的代码，不同颜色表示不同函数的代码。

• ？？有个问题就是：代码块内单击某行会恢复某行原本的代码样式，这个有点烦，不知道怎么解决

• 测试了代码块内容，没什么内容：

const onClick = () => {
this.utils.scrollByCid(cid, -1, true);
===>进入scrollByCid
static scrollByCid = (cid, height = -1, moveCursor = false, showHiddenElement = true) => {
const $target = File.editor.findElemById(cid)
===>进入scroll
static scroll = ($target, height = -1, moveCursor = false, showHiddenElement = true) => {
if ($target instanceof Element) {
<===返回scrollByCid
const $target = File.editor.findElemById(cid)
this.scroll($target, height, moveCursor, showHiddenElement)
}
<===返回onClick
} else if (icon) {
}

历史光标前进后退

光标历史记录，就是cid的历史记录，有点像书签功能，主要是为了方便文内的超链接跳转

可同名标题跳转

由斜杠命令生成H1-H6，解决重命名标题的问题，方便标题改名不会影响文内超链接正常跳转

[obgnail]

@wgy981930674

好的，感谢反馈。

功能有点多，为了隔离影响，我现在先将我手头的 commit 发出去。接着再挨个处理你的功能代码。

[wgy981930674]

好的，我还在整理代码，一会发更新的

[obgnail]

@wgy981930674

你好，我看了半天，没想到你更新代码了。浪费了不少时间。

---

关于在 fence_enhance 里注释中的 ？？？

Typora 的代码块是基于 codeMirror 的，因此我们最好通过 File.editor.fences.queue[cid] 来获取 codeMirror 的实例对象，接着调用实例对象的方法实现功能。

比如 let gutterArr = fence.querySelectorAll('.CodeMirror-linenumber') 就可以改成如下代码：

linenumColor = (ev, button) => {
	const fence = btn.closest(".md-fences")
	const cid = fence.getAttribute("cid")
	const cm = File.editor.fences.queue[cid]
	const gutterArr = cm.display.view.map(v => v.lineNumber)
}

codemirror 的功能很完善，基本不需要我们手动操作 DOM，都可以通过 cm 自带方法实现，既方便又安全。

比如可以通过 cm.lastLine()+1 即可获取到代码块的总行数。

[wgy981930674]

我不是很了解代码架构，就是第一次可能比较粗糙的写，你更新之后，我再看代码就知道怎么写了，下次估计会写的好一点
我发的压缩包，你用对比软件，beyong compare比较好用对比文件。

[obgnail]

你可以试着通过 cm 对象的方法/属性 改造 linenumColor 函数。

比如 cont.split(breakStr) 获取每行内容的实现就比较野，比较 foolproof 的方案应该是调用 cm.getLine(lineNumber-1) (减一是由于从 0 计数)

---

同时，我感觉这个功能应该加一个 rollback 逻辑。第一次点击添加颜色，第二次点击 rollback 回原始状态。

[obgnail]

@wgy981930674

关于历史光标前进后退问题，其实是可以监听 cursorChange 事件的，我们可以在回调函数里存储 cursor 的状态，这样效率更高

const cursorStates = []
$('#write').on("cursorChange", function (ev, t) {
        console.log(t.cursor)   // t.cursor 是一个 rangy 对象，可以用此纪录光标的位置
	cursorStates.push(t)
})

• t.cursor 是一个 rangy 对象，具体使用可以看库的教程，也可以在现有的插件搜索 rangy 关键字，就能知道该怎么使用
• 你可以先学习一下如何操作光标: Selection 对象，Range 对象

简单示例：

见 相关 issue

// 功能：在框选文字的左右两侧添加引号
() => {
    const {node, bookmark, range} = this.utils.getRangy();
    const ele = File.editor.findElemById(node.cid);
    const rangyText = ele.rawText().substring(bookmark.start, bookmark.end);
    // 如果rangyText不为空，也就是当选中文本时
    if (rangyText !== "") {
        const insertText = "“" + rangyText + "”";
        File.editor.UserOp.pasteHandler(File.editor, insertText, true, true, true);   // 替换
        File.editor.undo.addSnap(node.cid, File.editor.undo.UndoManager.SnapFlag.REPLACE);  // 添加一个快照，支持ctrl+Z撤回
        setTimeout(() => {
            const {range, bookmark} = this.utils.getRangy();
            bookmark.start -= insertText.length - 1;
            bookmark.end -= 1
            range.moveToBookmark(bookmark);
            range.select();
        });
    }
}

[wgy981930674]

cursorHistory 使用rangy光标.zip

配置文件custom_plugin.user.toml
[cursorHistory]
name = "光标历史记录"
enable = true
hide = false
order = 1
maxLimitNum = 100
maxLimitTime = 3600000

[wgy981930674]

第2次提交typora_plugin-master请对比版本1_14_3
本次主要修改了 ：

• 拖拽大纲对块状对象、带格式文本的错误修复
• 历史光标的重做，精确到光标而不是行(块状对象并未精确到行)，已知bug：文本中含有html代码时，光标不准确，跟光标事件提供的偏移数据有关
• 行号变色，增加到15中颜色，超过就不会变色了，可以自己多添加几种即可解决

第2次提交typora_plugin-master请对比版本1_14_3.zip

[wgy981930674]

第3次提交typora_plugin-master请对比版本1_14_3.zip

第三次修改：

• 拖拽大纲：基本都toc.headers来遍历，空行优化了。但是拖拽时候出现禁止图标还是搞不定(你给的代码也试了)
• 历史光标：使用了File.editor.selection.buildUndo()来修正文中的html引起的便宜错误
• 代码块行号变色：修复自动换行上色失败bug
• 可同名标题：使用了his.randomString(); 替代this.getUUID()，因为UUID太长了