Zeioth / markmap.nvim

Visualize your Markdown as mindmaps with markmap
173 stars 4 forks source link

Suggestion: support fold/foldAll "magic comments" #18

Closed proivk closed 7 months ago

proivk commented 7 months ago

https://markmap.js.org/docs/magic-comments

Zeioth commented 7 months ago

@proivk this plugin just uses the program markmap under hood, please report there.

proivk commented 7 months ago

I'm sorry, I should have described the problem statement in more details. markmap itself works fine.

Let's imagine that I have the following md file:

---
markmap:
  colorFreezeLevel: 2
---

# markmap

## Links

- [Website](https://markmap.js.org/)
- [GitHub](https://github.com/gera2ld/markmap)

## Related Projects <!-- markmap: foldAll -->

- [coc-markmap](https://github.com/gera2ld/coc-markmap) for Neovim
- [markmap-vscode](https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode) for VSCode
- [eaf-markmap](https://github.com/emacs-eaf/eaf-markmap) for Emacs

If I process it in markmap (on their playground) and save result to HTML, I'll get the following:

Screenshot 2024-04-21 at 17 07 33

"Related project" section is folded as expected.

If I save html file from markmap.nvim (Markmap Save) or do MarkmapWatch, I'll get the following:

Screenshot 2024-04-21 at 17 15 06

"Related project" section is unfolded.

In turn, HTML code significantly differs for this 2 files: Correct one:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Markmap</title>
<style>
* {
  margin: 0;
  padding: 0;
}
#mindmap {
  display: block;
  width: 100vw;
  height: 100vh;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.16.3-web.2/dist/style.css">
</head>
<body>
<svg id="mindmap"></svg>
<script src="https://cdn.jsdelivr.net/npm/d3@7.8.5/dist/d3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-view@0.16.3-web.2/dist/browser/index.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.16.3-web.2/dist/index.js"></script><script>(()=>{setTimeout(()=>{const{markmap:O,mm:h}=window,I=new O.Toolbar;I.attach(h);const $=I.render();$.setAttribute("style","position:absolute;bottom:20px;right:20px"),document.body.append($)})})()</script><script>((r,y,f,o)=>{const w=r();window.mm=w.Markmap.create("svg#mindmap",(y||w.deriveOptions)(o),f)})(()=>window.markmap,null,{"content":"markmap","children":[{"content":"Links","children":[{"content":"<a href=\"https://markmap.js.org/\">Website</a>","children":[],"payload":{"lines":"5,6"}},{"content":"<a href=\"https://github.com/gera2ld/markmap\">GitHub</a>","children":[],"payload":{"lines":"6,8"}}],"payload":{"lines":"3,4"}},{"content":"Related Projects","children":[{"content":"<a href=\"https://github.com/gera2ld/coc-markmap\">coc-markmap</a> for Neovim","children":[],"payload":{"lines":"10,11"}},{"content":"<a href=\"https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode\">markmap-vscode</a> for VSCode","children":[],"payload":{"lines":"11,12"}},{"content":"<a href=\"https://github.com/emacs-eaf/eaf-markmap\">eaf-markmap</a> for Emacs","children":[],"payload":{"lines":"12,13"}}],"payload":{"lines":"8,9","fold":2}}],"payload":{"lines":"1,2"}},{"colorFreezeLevel":2})</script>
</body>
</html>

markmap.nvim output:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Markmap</title>
<style>
* {
  margin: 0;
  padding: 0;
}
#mindmap {
  display: block;
  width: 100vw;
  height: 100vh;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.15.8/dist/style.css">
</head>
<body>
<svg id="mindmap"></svg>
<script src="https://cdn.jsdelivr.net/npm/d3@7.8.5/dist/d3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-view@0.15.8/dist/browser/index.js"></script><script src="https://cdn.jsdelivr.net/npm/markmap-toolbar@0.15.8/dist/index.js"></script><script>((r) => {
            setTimeout(r);
          })(() => {
  const { markmap, mm } = window;
  const toolbar = new markmap.Toolbar();
  toolbar.attach(mm);
  const el = toolbar.render();
  el.setAttribute("style", "position:absolute;bottom:20px;right:20px");
  document.body.append(el);
})</script><script>((getMarkmap, getOptions, root2, jsonOptions) => {
                const markmap = getMarkmap();
                window.mm = markmap.Markmap.create(
                  "svg#mindmap",
                  (getOptions || markmap.deriveOptions)(jsonOptions),
                  root2
                );
              })(() => window.markmap,null,{"type":"heading","depth":0,"payload":{"lines":[1,2]},"content":"markmap","children":[{"type":"heading","depth":1,"payload":{"lines":[3,4]},"content":"Links","children":[{"type":"list_item","depth":2,"payload":{"lines":[5,6]},"content":"<a href=\"https://markmap.js.org/\">Website</a>","children":[]},{"type":"list_item","depth":2,"payload":{"lines":[6,7]},"content":"<a href=\"https://github.com/gera2ld/markmap\">GitHub</a>","children":[]}]},{"type":"heading","depth":1,"payload":{"lines":[8,9]},"content":"Related Projects <!-- markmap: foldAll -->","children":[{"type":"list_item","depth":2,"payload":{"lines":[10,11]},"content":"<a href=\"https://github.com/gera2ld/coc-markmap\">coc-markmap</a> for Neovim","children":[]},{"type":"list_item","depth":2,"payload":{"lines":[11,12]},"content":"<a href=\"https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode\">markmap-vscode</a> for VSCode","children":[]},{"type":"list_item","depth":2,"payload":{"lines":[12,13]},"content":"<a href=\"https://github.com/emacs-eaf/eaf-markmap\">eaf-markmap</a> for Emacs","children":[]}]}]},{"colorFreezeLevel":2})</script>
</body>
</html>

So the point is to support fold/foldAll for MarkmapSave/MarkmapWatch option in markmap.nvim plugin.