The toc (with subMaxLevel) is generated twice when there's 2 embedded links in a page

[julienw]

Bug Report

Steps to reproduce

1. Use this configuration:

 window.$docsify = {
 subMaxLevel: 2,
 loadSidebar: true
 };

2. Use a _sidebar.md, it could be as simple as:

- [Home](/)

2. add a file with 2 embedded files, such as:

# Hello

Hello world

## Title 1

Lorem ipsum

[insert something](file.mp4 ":include")

[insert something else](file.mp4 ":include")

You can also see it live in https://codesandbox.io/s/problem-with-docsify-4cyldv

What is current behaviour

The Toc is generated twice, but in a nested way. In the above example, this looks like it:

• Home
  • Title 1
  • Hello
    • Title 1

See also this screenshot:

What is the expected behaviour

We have the TOC only once, this should look like this in this case:

• Home
  • Title 1

This happens when there's only one embedded asset.

Other relevant information

• Bug does still occur when all/other plugins are disabled?

• Your OS: not relevant

• Node.js version: not relevant

• npm/yarn version: not relevant

• Browser version: Firefox 103, but I also tried in Chrome stable, so I believei t's not relevant

• Docsify version: 4.12.2

• Docsify plugins: none

Please create a reproducible sandbox

https://codesandbox.io/s/problem-with-docsify-zl23lm

Mention the docsify version in which this bug was not present (if any)

I haven't tried earlier versions, it's the first time I try this.

[julienw]

I tried to debug, and I think the issue is that the 2 callbacks are called for each of the token:

docsify/src/core/render/embed.js

Lines 75 to 78 in c49c39a

	cb({ token, embedToken });
	if (++count >= step) {
	cb({});
	}

As a result, done here is called twice:

docsify/src/core/render/embed.js

Line 152 in c49c39a

done(tokens);

And then this is called twice:

docsify/src/core/render/index.js

Lines 340 to 341 in 54cc5f9

	html = this.compiler.compile(tokens);
	callback();

Which isn't usually a problem (except things may be rendered twice), but in the case of the sidebar toc, this causes the toc to be rendered twice with:

docsify/src/core/render/compiler.js

Line 239 in 54cc5f9

_self.toc.push(nextToc);

Then the duplicated toc is used in this routine:

docsify/src/core/render/compiler.js

Lines 306 to 327 in 35002c9

	subSidebar(level) {
	if (!level) {
	this.toc = [];
	return;
	}
	const currentPath = this.router.getCurrentPath();
	const { cacheTree, toc } = this;
	toc[0] && toc[0].ignoreAllSubs && toc.splice(0);
	toc[0] && toc[0].level === 1 && toc.shift();
	for (let i = 0; i < toc.length; i++) {
	toc[i].ignoreSubHeading && toc.splice(i, 1) && i--;
	}
	const tree = cacheTree[currentPath] || genTree(toc, level);
	cacheTree[currentPath] = tree;
	this.toc = [];
	return treeTpl(tree);
	}

Here only the first toc entry is removed, if it's a depth 1.

Therefore I can see these possible fixes:

1. Remove all TOC entries with depth==1 when generating the sidebar. This is more a hacky quick fix than a longterm solution IMO, but this could at least fix this issue I believe. No that wouldn't work anyway, because the subheadings are also present, so the Toc would still be duplicated, but not nested.
2. Make sure that done is called only once for each render. I don't understand enough the logic with step and count that are both incremented, so I don't know what's the intent here...

Hpoe this helps!

[julienw]

I think I understood the dance with the incrementations: when the token has a url, then the process is asynchronous, so the condition is there to ensure that we call the callback after everything has been fetched. But this doesn't work when the token is just some html, because in that case the process is synchronous. The fix is to make this case asynchronous as well. I think I can make a patch for that.

update: Studying the code some more, I decided to use the length of the embedTokens source instead of using step. This makes things a lot more predictable in my opinion.