cms.js icon indicating copy to clipboard operation
cms.js copied to clipboard

links replacing # with h1 due to markdown

Open roskelld opened this issue 5 years ago • 4 comments

I was looking for a solution to add blog posts to my GitHub site and here we are.

When testing out my own code and the hosted demo code I noticed that URLs with a # (so, all hosted pages) are replaced by <h1> in the rendered URL.

Example: Go to the demo post http://chris-diana.com/cms.js/demo/#/posts/2017-08-20-another-example-post

The link in the body text goes to: http://chris-diana.com/cms.js/demo/<h1>

I'm guessing that the markdown https://github.com/chrisdiana/cms.js/blob/develop/src/markdown.js is picking up the # as a heading.

// headers - fix link anchor tag regex
{regex: /(#+)(.*)/g, replacement: (text, chars, content) => {
        var level = chars.length;
        return '<h' + level + '>' + content.trim() + '</h' + level + '>';
}},

roskelld avatar Mar 09 '19 01:03 roskelld

I just noticed the comment in the code

// headers - fix link anchor tag regex

I guess this is a known issue

roskelld avatar Mar 09 '19 01:03 roskelld

EDIT: SCRATCH THAT I THINK I MISUNDERSTOOD HOW THE CODE WORKS WHEN GENERATING HEADERS

I'm no expert on regex, but I tested this out and it works.

// headers - fix link anchor tag regex 
{regex: /(#+)([^\/])(.*)/g, replacement: (text, chars, content) => { 
 var level = chars.length; 
 return '<h' + level + '>' + content.trim() + '</h' + level + '>'; 
}},

It tests that there's no / following the first #

Here's a test case regexr.com/49sbu

roskelld avatar Mar 09 '19 02:03 roskelld

Hi roskelld,

I'm no expert on regex, but I tested this out and it works.

// headers - fix link anchor tag regex 
{regex: /(#+)([^\/])(.*)/g, replacement: (text, chars, content) => { 
 var level = chars.length; 
 return '<h' + level + '>' + content.trim() + '</h' + level + '>'; 
}},

It tests that there's no / following the first #

This code works in filtering # in url links, however it also breaks the detection of regular headings on page markdown articles.

Here's an alternative regex, that works in both cases:

regex: /(#+)(?!\/)(.*)/g

This one assumes that a # preceding a url is directly followed by a / which makes sense in the cms.js environment (e.g. /#/pages/somearticle)

raygit83 avatar Jun 11 '19 10:06 raygit83

Great, it works just find... You may can propose it as pull request ?

bjalon avatar Dec 13 '19 09:12 bjalon