Allow to generate lower case header references through the conf… (#1310)

Allow to generate lower case header references through the config

Author: Yukaii

config.json.example

@@ -3,7 +3,8 @@
         "db": {
             "dialect": "sqlite",
             "storage": ":memory:"
-        }
+        },
+        "linkifyHeaderStyle": "gfm"
     },
     "development": {
         "loglevel": "debug",
@@ -13,7 +14,8 @@
         "db": {
             "dialect": "sqlite",
             "storage": "./db.codimd.sqlite"
-        }
+        },
+        "linkifyHeaderStyle": "gfm"
     },
     "production": {
         "domain": "localhost",
@@ -127,6 +129,7 @@
         "plantuml":
         {
           "server": "https://www.plantuml.com/plantuml"
-        }
+        },
+        "linkifyHeaderStyle": "gfm"
     }
 }

lib/config/default.js

@@ -162,5 +162,19 @@ module.exports = {
   allowEmailRegister: true,
   allowGravatar: true,
   allowPDFExport: true,
-  openID: false
+  openID: false,
+  // linkifyHeaderStyle - How is a header text converted into a link id.
+  // Header Example: "3.1. Good Morning my Friend! - Do you have 5$?"
+  // * 'keep-case' is the legacy CodiMD value.
+  //    Generated id: "31-Good-Morning-my-Friend---Do-you-have-5"
+  // * 'lower-case' is the same like legacy (see above), but converted to lower-case.
+  //    Generated id: "#31-good-morning-my-friend---do-you-have-5"
+  // * 'gfm' _GitHub-Flavored Markdown_ style as described here:
+  //    https://gist.github.com/asabaylus/3071099#gistcomment-1593627
+  //    It works like 'lower-case', but making sure the ID is unique.
+  //    This is What GitHub, GitLab and (hopefully) most other tools use.
+  //    Generated id:   "31-good-morning-my-friend---do-you-have-5"
+  //    2nd appearance: "31-good-morning-my-friend---do-you-have-5-1"
+  //    3rd appearance: "31-good-morning-my-friend---do-you-have-5-2"
+  linkifyHeaderStyle: 'keep-case'
 }

lib/config/environment.js

@@ -135,5 +135,6 @@ module.exports = {
   allowEmailRegister: toBooleanConfig(process.env.CMD_ALLOW_EMAIL_REGISTER),
   allowGravatar: toBooleanConfig(process.env.CMD_ALLOW_GRAVATAR),
   allowPDFExport: toBooleanConfig(process.env.CMD_ALLOW_PDF_EXPORT),
-  openID: toBooleanConfig(process.env.CMD_OPENID)
+  openID: toBooleanConfig(process.env.CMD_OPENID),
+  linkifyHeaderStyle: process.env.CMD_LINKIFY_HEADER_STYLE
 }

lib/web/statusRouter.js

@@ -99,7 +99,8 @@ statusRouter.get('/config', function (req, res) {
     version: config.fullversion,
     plantumlServer: config.plantuml.server,
     DROPBOX_APP_KEY: config.dropbox.appKey,
-    allowedUploadMimeTypes: config.allowedUploadMimeTypes
+    allowedUploadMimeTypes: config.allowedUploadMimeTypes,
+    linkifyHeaderStyle: config.linkifyHeaderStyle
   }
   res.set({
     'Cache-Control': 'private', // only cache by client

public/js/extra.js

@@ -168,11 +168,11 @@ export function renderTags (view) {
 }
 
 function slugifyWithUTF8 (text) {
-  // remove html tags and trim spaces
+  // remove HTML tags and trim spaces
   let newText = stripTags(text.toString().trim())
-  // replace all spaces in between to dashes
+  // replace space between words with dashes
   newText = newText.replace(/\s+/g, '-')
-  // slugify string to make it valid for attribute
+  // slugify string to make it valid as an attribute
   newText = newText.replace(/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g, '')
   return newText
 }
@@ -859,16 +859,44 @@ const anchorForId = id => {
   return anchor
 }
 
+const createHeaderId = (headerContent, headerIds = null) => {
+  // to escape characters not allow in css and humanize
+  const slug = slugifyWithUTF8(headerContent)
+  let id
+  if (window.linkifyHeaderStyle === 'keep-case') {
+    id = slug
+  } else if (window.linkifyHeaderStyle === 'lower-case') {
+    // to make compatible with GitHub, GitLab, Pandoc and many more
+    id = slug.toLowerCase()
+  } else if (window.linkifyHeaderStyle === 'gfm') {
+    // see GitHub implementation reference:
+    // https://gist.github.com/asabaylus/3071099#gistcomment-1593627
+    // it works like 'lower-case', but ...
+    const idBase = slug.toLowerCase()
+    id = idBase
+    if (headerIds !== null) {
+      // ... making sure the id is unique
+      let i = 1
+      while (headerIds.has(id)) {
+        id = idBase + '-' + i
+        i++
+      }
+      headerIds.add(id)
+    }
+  } else {
+    throw new Error('Unknown linkifyHeaderStyle value "' + window.linkifyHeaderStyle + '"')
+  }
+  return id
+}
+
 const linkifyAnchors = (level, containingElement) => {
   const headers = containingElement.getElementsByTagName(`h${level}`)
 
   for (let i = 0, l = headers.length; i < l; i++) {
     const header = headers[i]
     if (header.getElementsByClassName('anchor').length === 0) {
       if (typeof header.id === 'undefined' || header.id === '') {
-        // to escape characters not allow in css and humanize
-        const id = slugifyWithUTF8(getHeaderContent(header))
-        header.id = id
+        header.id = createHeaderId(getHeaderContent(header))
       }
       if (!(typeof header.id === 'undefined' || header.id === '')) {
         header.insertBefore(anchorForId(header.id), header.firstChild)
@@ -894,20 +922,43 @@ function getHeaderContent (header) {
   return headerHTML[0].innerHTML
 }
 
+function changeHeaderId ($header, id, newId) {
+  $header.attr('id', newId)
+  const $headerLink = $header.find(`> a.anchor[href="#${id}"]`)
+  $headerLink.attr('href', `#${newId}`)
+  $headerLink.attr('title', newId)
+}
+
 export function deduplicatedHeaderId (view) {
+  // headers contained in the last change
   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)
+  if (headers.length === 0) {
+    return
+  }
+  if (window.linkifyHeaderStyle === 'gfm') {
+    // consistent with GitHub, GitLab, Pandoc & co.
+    // all headers contained in the document, in order of appearance
+    const allHeaders = view.find(`:header`).toArray()
+    // list of finaly assigned header IDs
+    const headerIds = new Set()
+    for (let j = 0; j < allHeaders.length; j++) {
+      const $header = $(allHeaders[j])
+      const id = $header.attr('id')
+      const newId = createHeaderId(getHeaderContent($header), headerIds)
+      changeHeaderId($header, id, newId)
+    }
+  } else {
+    // the legacy way
+    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 $header = $(duplicatedHeaders[j])
+          changeHeaderId($header, id, newId)
+        }
       }
     }
   }

public/js/lib/common/constant.ejs

@@ -6,4 +6,6 @@ window.plantumlServer = '<%- plantumlServer %>'
 
 window.allowedUploadMimeTypes = <%- JSON.stringify(allowedUploadMimeTypes) %>
 
+window.linkifyHeaderStyle = '<%- linkifyHeaderStyle %>'
+
 window.DROPBOX_APP_KEY = '<%- DROPBOX_APP_KEY %>'