可编辑的浮窗与可导出的 Markdown Mindmap 导图

开发讨论
1

仓库地址：obsidian-markmap-fileviews

一个自定义视图的案例，比较简短，适合学习。

功能列表 | Functions

主视图 | Main View

主视图1
主视图11248×897 208 KB

  • 通过命令创建当前活动文档的 Markmap 视图，默认快捷键 Ctrl + M。
  • 测试文本改自 Markmap 官方案例：Try markmap

主视图2
主视图21248×897 159 KB

  • 设置 Ob 内部链接在 Markmap 中转化为按钮，点击出现对应可编辑浮窗。有时首次点击时是聚焦页面，所以没有反应，再点击一次即可。
  • 浮窗左上角固定按钮点击固定浮窗，再次点击取消固定并关闭浮窗。
  • 按住 Ctrl 键可拖动移动浮窗位置。
  • 视图右上角固定按钮点击固定导图文档源（切换文档时），再次点击取消固定。
  • 左下角为导出 PNG 按钮。

代码块 | Codeblock

```markmap
---
markmap:
  height: 200
---
## Root
### Branch1
### Branch2
```
  • Frontmatter 区为可选部分，所设格式是为了和 Mindmap NextGen 插件保持一致。由于不想引入更多的包，目前只支持设置高度 (px)，近期不会扩展。

导出 PNG / PDF

导出图片
导出图片1270×902 76.1 KB

不足之处

  • 似乎不支持打开含 markmap 代码块的文档的主视图。

  • 打开新文档时若处于阅读模式，且新文档含 markmap 代码块，切换回编辑模式后需手动刷新一下代码块。

    一个难以理解的问题。控制台报错为 Error: <g> attribute transform: Expected number, "translate(NaN,NaN) scale(N…".，报错代码区域是 Markmap.create() →d3。若有人知道如何解决欢迎跟帖。

    变通方法是使用 小插件 Sheets Basic：合并 Markdown 表格单元格 中插件的 ‘rebuildCurrent’ 命令快捷刷新。也可以参考代码自己注册一个。

  • Markmap 中的代码块导出没有高亮，这可能是因为导出方法直接转换 SVG，而 CSS 样式并不在 SVG 中。若有人知道如何解决欢迎跟帖。

相关细节

  • 本插件浮窗相关代码已装载接管 Ob 核心插件页面预览的部分，因 v1.7.0 后页面预览已可编辑仅留作学习，默认入口在 main_ts.js 注释掉了。
  • main_ts.js 外的 ref.js 包含编写但未使用的代码、相关代码及参考插件列表等。
3 个赞
2

啊啊啊啊啊啊啊，关于局部代码块那部分：

```markmap
---
markmap:
  height: 200
---
## Root
### Branch1
### Branch2
```

早知道我就先来论坛搜一下了，我写之前只搜了市场插件，然后就重复造轮子了……

3

@LincZero 很高兴对你有帮助。这里的解析还是比较简陋的，正常解析 Markdown 格式的 frontmatter 区应该是要使用库的，比如 gray-matter。你可以参考 Mindmap NextGen 插件的 renderer-codeblock.ts

4

240916

  • 原先代码都写在一个 JS 里想的是大家下载了不管有没有环境都可以改很方便，但是现在既然选择编译 build 了，还是拆成多个 JSs 好看些。

  • 导图

    • 支持 Magic Comments，见 Magic Comments - markmap docs

    • 兼容列表标题，因为我看见有人这么写。

      - ## 列表标题
    - 就这样

    • 设置 mmView.navigation 为 flase，感觉这样效果好些。

  • 浮窗

    • 对所有想在 Ob 写可编辑浮窗的人，Excalidraw Plugin 有一段冲突，当在可编辑浮窗使用右上角更多选项删除文件时会报一个不影响进程的错。它是通过检测 app.plugins.plugins['obsidian-hover-editor'] 规避的，也即作者只考虑了和 Hover Editor 插件的兼容。

      目前使用的是 Proxy 方法，因为 Ob 自己是通过 hasOwnProperty() 检测的，这样保证设置 - 第三方插件的面板能正确加载，同时兼容 Excalidraw。欢迎有更好的方法建议。

      app.plugins.plugins = new Proxy(app.plugins.plugins, {
  get: (target, prop)=> !!(prop == 'obsidian-hover-editor')||target[prop]
})

    • 不过 Ob 在 v1.7.0 后核心插件页面预览就可编辑了，见 Insider 版本 v1.7.0#新功能，之后想自定义的人就不多了吧。

另外 #1 提到的不足之处如果谁有相关想法的话欢迎给点建议哦。