MarkMap Toolbar renders but doesn't attach to the embedded script

I have a simple static HTML page using MarkMap. I link to two required libraries to enable the functionality. I don't quite know why I can render the mindmap AND the default Toolbar, but no clicks on the toolbar perform the corresponding actions (e.g., Zoom In, Zoom Out, Recenter, etc.). Any help is greatly appreciated.

Code and Stackblitz link follow:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Markmap</title>
    <style>
      svg.markmap {
        width: 100%;
        height: 100vh;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  </head>
  <body>
    <div id="container">
      <div id="mm" class="markmap">
        <script type="text/template">
          ---
          markmap:
            maxWidth: 300
            colorFreezeLevel: 2
          ---

          # markmap

          ## Links

          - <https://markmap.js.org/>
          - [GitHub](https://github.com/markmap/markmap)

          ## Related

          - [coc-markmap](https://github.com/markmap/coc-markmap)
          - [gatsby-remark-markmap](https://github.com/markmap/gatsby-remark-markmap)

          ## Features
          - links
          - **inline** ~~text~~ *styles*
          - multiline
            text
          - `inline code`
          - Katex - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
          - This is a very very very very very very very very very very very very very very very long line.
        </script>
        <script>
          const { markmap } = window;
          const { Toolbar } = markmap;

          const { el } = Toolbar.create(mm);
          el.style.position = 'absolute';
          el.style.bottom = '0.5rem';
          el.style.right = '0.5rem';

          // `container` could be the element that contains both the markmap and the toolbar
          container.append(el);
        </script>
      </div>
    </div>
  </body>
</html>

StackBlitz working demo here

Solution

I hit the same issue myself while trying to make a MacOS shortcut to generate a markmap HTML page from markdown text. After 2 days of poking at things, I found a workaround.

My stackblitz fork of your original one with a working toolbar is here. I replaced your markdown with one I'd been using to document some formatting and CSS options for folks at work once I pass my shortcut around.

The two changes I made were these.

In the section where we were using the autoloader like so:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

I replaced it with this after seeing the Load Manually section on the markmap-autoloader module page.

    <! -- CHANGED SECTION HERE </-->
    <script>
      window.markmap = {
        autoLoader: { manual: true, toolbar: true },
      };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/markmap-autoloader"></script>
    <script>
      // Render in 5s
      setTimeout(() => {
        markmap.autoLoader.renderAll();
      }, 5000);
    </script>

    <! -- CHANGED SECTION END </-->

When I dug through the markmap-autoloader repo I spotted in the index.ts file some code that said if you passed the toolbar option to the autoloader, it would do the create and append for us.

Because of that, I then commented out this section in your stackblitz after adding toolbar: true to the autoloader like above:

        <!-- COMMENTED OUT THIS BLOCK
        <script>
          const { markmap } = window;
          const { Toolbar } = markmap;

          const { el } = Toolbar.create(mm);
          el.style.position = 'absolute';
          el.style.bottom = '0.5rem';
          el.style.right = '0.5rem';

          // `container` could be the element that contains both the markmap and the toolbar
          container.append(el);
        </script>
      /-->

Afterwards, the toolbar showed up from the autoloader itself, and it appears to work fine.