FilesExpand file tree

 main

/

wrap-code-terms.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

32 lines (28 loc) · 1.32 KB

 main

/

wrap-code-terms.js

Copy path

Top

File metadata and controls

• Code
• Blame

32 lines (28 loc) · 1.32 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

import escape from 'lodash/escape'

const wordsLongerThan18Chars = /[\S]{18,}/g

const camelCaseChars = /([a-z])([A-Z])/g

const underscoresAfter12thChar = /([\w:]{12}[^_]*?)_/g

const slashChars = /([/\\])/g

// This module improves table rendering on reference pages by inserting a <wbr>

// tag in code terms that use camelcase, slashes, or underscores, inspired by

// http://heap.ch/blog/2016/01/19/camelwrap/

export default function () {

const codeTerms = document.querySelectorAll('#article-contents table code')

if (!codeTerms) return

codeTerms.forEach(node => {

// Do the wrapping on the inner text only, so we don't modify hrefs

const oldText = escape(node.textContent)

const newText = oldText.replace(wordsLongerThan18Chars, (str) => {

return str

// GraphQL code terms use camelcase

.replace(camelCaseChars, '$1<wbr>$2')

// REST code terms use underscores

// to keep word breaks looking nice, only break on underscores after the 12th char

// so `has_organization_projects` will break after `has_organization` instead of after `has_`

.replace(underscoresAfter12thChar, '$1_<wbr>')

// Some Actions reference pages have tables with code terms separated by slashes

.replace(slashChars, '$1<wbr>')

})

node.innerHTML = node.innerHTML.replace(oldText, newText)

})

}