Allow to generate lower case header references through the config

[hoijui]

resolves #1305

This makes the references consistent/compatible with GitHub,
GitLab, Pandoc and many other tools.

This behavior can be enabled in config.json with:

"linkifyHeaderStyle": "gfm"

[hoijui]

thanks @Yukaii , I would not have noticed ;-)

[hoijui]

Just now, I actually had a look at how GitHub does it:
https://gist.github.com/asabaylus/3071099#gistcomment-1593627

The way it is done in this pull request comes close, but does not handle the "make ID unique" part.

I implemented that part locally, and it works, but .. only when I start with a blank document, and copy&paste in a sample with duplicate headers at once. If I manually start editing around, making the headers sometimes the same, sometimes not, it does not work. It looks like CodiMD handles changes on the fly, and has its own mechanism to prevent equal ids, and that interferes (and is not compatible with gfm).

any hints on where in the code this is happening?

[jackycute]

any hints on where in the code this is happening?

Here you are:

codimd/public/js/extra.js

Lines 897 to 915 in e03a326

	export function deduplicatedHeaderId (view) {
	const headers = view.find(':header.raw').removeClass('raw').toArray()
	for (let i = 0; i < headers.length; i++) {
	const id = $(headers[i]).attr('id')
	if (!id) continue
	const duplicatedHeaders = view.find(`:header[id="${id}"]`).toArray()
	for (let j = 0; j < duplicatedHeaders.length; j++) {
	if (duplicatedHeaders[j] !== headers[i]) {
	const newId = id + j
	const $duplicatedHeader = $(duplicatedHeaders[j])
	$duplicatedHeader.attr('id', newId)
	const $headerLink = $duplicatedHeader.find(`> a.anchor[href="#${id}"]`)
	$headerLink.attr('href', `#${newId}`)
	$headerLink.attr('title', newId)
	}
	}
	}
	}

[hoijui]

ok, am trying.. how can I log any debug info?

[Yukaii]

@hoijui You can insert console.log or add breakpoint in DevTools manually. Just remember do not commit those lines in VCS. 😄

[hoijui]

thanks! :-)
found that out late evening yesterday aswell.. got it almost working now, except: I need a list of all headers in the document, in order. I currently fetch them with const allHeaders = view.find(:header).toArray(), which does not give them in order of appearance.
How should I fetch them?

[Yukaii]

You can use sortByDepth method like we used in building checkboxes

codimd/public/js/extra.js

Line 261 in fd155fa

const lis = view.find('li.raw').removeClass('raw').sortByDepth().toArray()

[hoijui]

hmm.. it gives me the same order, with and without that sort.
I do not need them sorted by header level, but by the appearance of the header in the document.

sample document:

# abc

### abc

## abc

I want them in the order they appear here, but both:

const allHeaders = view.find(`:header`).toArray()
const allHeaders = view.find(`:header`).sortByDepth().toArray()

returns them in this order:

# abc
## abc
### abc

which I guess, is sorted by (header-level/)depth.

[Yukaii]

@hoijui I couldn't reproduce in DevTool console, could you share the whole code snippet with me? Something like where did you insert this line.

[hoijui]

thank you @Yukaii !
indeed, it was correct.. something else in my code went wrong.
I made 3 more commits, and it seems to work fine now, as far as my testing goes.

[hoijui]

Hi @hoijui,
Could you also add this config to https://github.com/hackmdio/codimd/blob/develop/lib/config/environment.js?
So that people can define this via environment vars.

Thanks!

did that too now

[Yukaii]

LATMLooks Awesome To Me!

[jackycute]

Awesome, thanks @hoijui

[hoijui]

thanks you two! @Yukaii @jackycute
you are really great at this! :-)