Editable Popover and Exportable Markdown Mindmap

Share & showcase
1

GitHub: obsidian-markmap-fileviews
Original Post: Obsidian Chinese Forum t37790

A case of custom view, relatively short, suitable for plugin learning.

  • Create a markdown mindmap view of the active note via command
    • Default hotkey Ctrl + M.
    • Internal links are rendered as buttons, which open a corresponding editable popover when clicked. Sometimes the first click may focus instead of triggering the action, just click again.
    • Press and hold the Ctrl key to drag and move the position of the popover.
  • Codeblocks
    ```markmap
---
markmap:
  height: 200
---
## Root
### Branch1
### Branch2
```
    • Frontmatter is optional. Only support height (px) since no more packages are wanted to be introduced.
  • Export PNG / PDF

ref.js outside of main_ts.js contains written but unused code, relevant code, and a list of reference plugins.

Gallery (2024-07-28)

  • Test text is modified from Markmap official example: Try markmap

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

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

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

Deficiencies

  • It seems that the markdown mindmap view of notes containing markmap codeblocks isn’t supported.

  • If Obsidian is in reading mode when you open a new note containing markmap codeblocks, you need to manually refresh them once after switching back to editing mode.

    An incomprehensible issue. The console reports Error: <g> attribute transform: Expected number, "translate(NaN,NaN) scale(N…". and the error code area is Markmap.create() →d3. If anyone knows how to solve this, feel free to post a reply.

    Workaround is using the ‘rebuildCurrent’ command of the plugin in Mini Plugin Sheets Basic: Merge Markdown Table Cells in Editing Mode to quickly refresh. You can refer to the code and register by yourself too.

  • Codeblocks in Markmap don’t get highlighted when exported, possibly because the SVG is directly converted, and CSS styles are not included in it. If anyone knows how to solve this, feel free to post a reply.

2 Likes
2

240916

  • Previously all code was written in a single JS file for the convenience of allowing users to modify it regardless of their environment. Now that I have chosen to build, breaking down the code into multiple JSs makes it more organized.

  • Mindmap

    • Support for Magic Comments; see Magic Comments - markmap docs

    • Compatible with list headings since I noticed some people use this format.

      - ## List heading
    - like this

    • Set mmView.navigation to false, as it feels better.

  • Popover

    • For those who attempt to write an editable popover in Ob, there is a conflict with the Excalidraw Plugin. When using “More options - Delete file” at the top right corner within a popover, an error occurs (which does not affect the process). The author avoided it by checking app.plugins.plugins['obsidian-hover-editor'].

      Currently I use Proxy. Since Ob itself detects through hasOwnProperty(), this ensures that the Setting - Community plugins panel can be loaded correctly while being compatible with Excalidraw. Glad to see better solutions.

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

    • But starting from v1.7.0, the Core plugin Page preview became editable; see Changelog. I guess fewer people may want customizations going forward.
      Having updated to v1.7.4, I feel the built-in editable feature still have a lot of room for optimization…

Additionally, would be greatly appreciated any related ideas regarding the deficiencies mentioned in #1.