Editable Popover and Exportable Markdown Mindmap

This post will continue as an introduction. The code is retained and can be found in the fork jdysya/obsidian-markmap-fileviews

Original Post: Obsidian Chinese Forum t37790

A case of custom view, 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 in the .old folder 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



Deficiencies

  • 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. issue#4

    Workaround is using the ‘rebuildCurrent’ command of the plugin in Mini Plugin Sheets Basic: Merge Markdown Table Cells 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.

    Update: Well, it seems that the export demonstration given in the official example does not have highlighting either.

    image

2 Likes

240916

Chore

  • 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…

241230

  • Better export
  • Package markmap to the latest of 0.18

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