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.

    You can use 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.