Adrià Vilanova Martínez | ac4a644 | 2022-05-15 19:05:13 +0200 | [diff] [blame] | 1 | import { marked } from 'marked'; |
Copybara | 854996b | 2021-09-07 19:36:02 +0000 | [diff] [blame] | 2 | import DOMPurify from 'dompurify'; |
| 3 | |
Adrià Vilanova Martínez | 2d5457a | 2022-01-13 13:25:39 +0100 | [diff] [blame] | 4 | const EMAIL_REGEX = /^mailto:[-a-zA-Z0-9!#$%&'*+\/=?^_`{|}~]+(?:[.][-a-zA-Z0-9!#$%&'*+\/=?^_`{|}~]+)*@(?:(?:[0-9a-zA-Z](?:[-]*[0-9a-zA-Z]+)*)(?:\.[0-9a-zA-Z](?:[-]*[0-9a-zA-Z]+)*)*)\.(?:[a-zA-Z]{2,9})$/; |
| 5 | const MONORAIL_USER_REGEX = /\/u\/[-a-zA-Z0-9!#$%&'*+\/=?^_`{|}~]+(?:[.][-a-zA-Z0-9!#$%&'*+\/=?^_`{|}~]+)*@(?:(?:[0-9a-zA-Z](?:[-]*[0-9a-zA-Z]+)*)(?:\.[0-9a-zA-Z](?:[-]*[0-9a-zA-Z]+)*)*)\.(?:[a-zA-Z]{2,9})$/; |
Copybara | 854996b | 2021-09-07 19:36:02 +0000 | [diff] [blame] | 6 | |
| 7 | /** @type {Set} Authors whose comments will not be rendered as Markdown. */ |
| 8 | const BLOCKLIST = new Set(['sheriffbot@sheriffbot-1182.iam.gserviceaccount.com', |
| 9 | 'sheriff-o-matic@appspot.gserviceaccount.com', |
| 10 | 'sheriff-o-matic-staging@appspot.gserviceaccount.com', |
| 11 | 'bugdroid1@chromium.org', |
| 12 | 'bugdroid@chops-service-accounts.iam.gserviceaccount.com', |
| 13 | 'gitwatcher-staging.google.com@appspot.gserviceaccount.com', |
Adrià Vilanova Martínez | e3e9165 | 2021-09-08 17:37:29 +0200 | [diff] [blame] | 14 | 'gitwatcher.google.com@appspot.gserviceaccount.com', |
| 15 | 'gitwatcher@avm99963-bugs.iam.gserviceaccount.com', |
| 16 | 'Git Watcher',]); |
Copybara | 854996b | 2021-09-07 19:36:02 +0000 | [diff] [blame] | 17 | |
| 18 | /** |
| 19 | * Determines whether content should be rendered as Markdown. |
| 20 | * @param {string} options.project Project this content belongs to. |
| 21 | * @param {number} options.author User who authored this content. |
| 22 | * @param {boolean} options.enabled Per-issue override to force Markdown. |
| 23 | * @param {Array<string>} options.availableProjects List of opted in projects. |
| 24 | * @return {boolean} Whether this content should be rendered as Markdown. |
| 25 | */ |
| 26 | export const shouldRenderMarkdown = ({ |
Adrià Vilanova Martínez | d5550d4 | 2022-01-13 13:34:38 +0100 | [diff] [blame] | 27 | project, author, enabled = true |
Copybara | 854996b | 2021-09-07 19:36:02 +0000 | [diff] [blame] | 28 | } = {}) => { |
Adrià Vilanova Martínez | 535e731 | 2021-10-17 00:48:12 +0200 | [diff] [blame] | 29 | if (BLOCKLIST.has(author)) { |
Copybara | 854996b | 2021-09-07 19:36:02 +0000 | [diff] [blame] | 30 | return false; |
| 31 | } else if (!enabled) { |
| 32 | return false; |
Copybara | 854996b | 2021-09-07 19:36:02 +0000 | [diff] [blame] | 33 | } |
Adrià Vilanova Martínez | d5550d4 | 2022-01-13 13:34:38 +0100 | [diff] [blame] | 34 | return true; |
Copybara | 854996b | 2021-09-07 19:36:02 +0000 | [diff] [blame] | 35 | }; |
| 36 | |
| 37 | /** @const {Object} Options for DOMPurify sanitizer */ |
| 38 | const SANITIZE_OPTIONS = Object.freeze({ |
| 39 | RETURN_TRUSTED_TYPE: true, |
| 40 | FORBID_TAGS: ['style'], |
Adrià Vilanova Martínez | 9f9ade5 | 2022-10-10 23:20:11 +0200 | [diff] [blame] | 41 | FORBID_ATTR: ['style', 'autoplay', 'src'], |
Copybara | 854996b | 2021-09-07 19:36:02 +0000 | [diff] [blame] | 42 | }); |
| 43 | |
| 44 | /** |
| 45 | * Replaces bold HTML tags in comment with Markdown equivalent. |
| 46 | * @param {string} raw Comment string as stored in database. |
| 47 | * @return {string} Comment string after b tags are placed by Markdown bolding. |
| 48 | */ |
| 49 | const replaceBoldTag = (raw) => { |
| 50 | return raw.replace(/<b>|<\/b>/g, '**'); |
| 51 | }; |
| 52 | |
Copybara | 854996b | 2021-09-07 19:36:02 +0000 | [diff] [blame] | 53 | /** |
| 54 | * Checks to see if input string is a valid HTTP link. |
| 55 | * @param {string} string |
| 56 | * @return {boolean} Whether input string is a valid HTTP(s) link. |
| 57 | */ |
| 58 | const isValidHttpUrl = (string) => { |
| 59 | let url; |
| 60 | |
| 61 | try { |
| 62 | url = new URL(string); |
| 63 | } catch (_exception) { |
| 64 | return false; |
| 65 | } |
| 66 | |
| 67 | return url.protocol === 'http:' || url.protocol === 'https:'; |
| 68 | }; |
| 69 | |
| 70 | /** |
Adrià Vilanova Martínez | 2d5457a | 2022-01-13 13:25:39 +0100 | [diff] [blame] | 71 | * Checks to see if input string matches a href generated by Monorail's autolinking code. |
| 72 | * @param {string} string |
| 73 | * @return {boolean} Whether input string is an email address. |
| 74 | */ |
| 75 | const isEmailLink = (string) => { |
| 76 | return EMAIL_REGEX.test(string) || MONORAIL_USER_REGEX.test(string) |
| 77 | } |
| 78 | |
| 79 | /** |
Copybara | 854996b | 2021-09-07 19:36:02 +0000 | [diff] [blame] | 80 | * Renderer option for Marked. |
| 81 | * See https://marked.js.org/using_pro#renderer on how to use renderer. |
| 82 | * @type {Object} |
| 83 | */ |
| 84 | const renderer = { |
Copybara | 854996b | 2021-09-07 19:36:02 +0000 | [diff] [blame] | 85 | link(href, title, text) { |
| 86 | // Overrides default link rendering by adding icon and destination on hover. |
| 87 | // TODO(crbug.com/monorail/9316): Add shared-styles/MD_STYLES to all |
| 88 | // components that consume the markdown renderer. |
| 89 | let linkIcon; |
| 90 | let tooltipText; |
Adrià Vilanova Martínez | 2d5457a | 2022-01-13 13:25:39 +0100 | [diff] [blame] | 91 | if (isValidHttpUrl(href) || isEmailLink(href)) { |
Copybara | 854996b | 2021-09-07 19:36:02 +0000 | [diff] [blame] | 92 | linkIcon = `<span class="material-icons link">link</span>`; |
| 93 | tooltipText = `Link destination: ${href}`; |
| 94 | } else { |
| 95 | linkIcon = `<span class="material-icons link_off">link_off</span>`; |
| 96 | tooltipText = `Link may be malformed: ${href}`; |
| 97 | } |
| 98 | const tooltip = `<span class="tooltip">${tooltipText}</span>`; |
| 99 | return `<span class="annotated-link"><a href=${href} ` + |
| 100 | `title=${title ? title : ''}>${linkIcon}${text}</a>${tooltip}</span>`; |
| 101 | }, |
| 102 | }; |
| 103 | |
| 104 | marked.use({renderer, headerIds: false}); |
| 105 | |
| 106 | /** |
| 107 | * Renders Markdown content into HTML. |
| 108 | * @param {string} raw Content to be intepretted as Markdown. |
| 109 | * @return {string} Rendered content in HTML format. |
| 110 | */ |
| 111 | export const renderMarkdown = (raw) => { |
| 112 | // TODO(crbug.com/monorail/9310): Add commentReferences, projectName, |
| 113 | // and revisionUrlFormat to use in conjunction with Marked's lexer for |
| 114 | // autolinking. |
| 115 | // TODO(crbug.com/monorail/9310): Integrate autolink |
| 116 | const preprocessed = replaceBoldTag(raw); |
Adrià Vilanova Martínez | 9f9ade5 | 2022-10-10 23:20:11 +0200 | [diff] [blame] | 117 | const converted = marked(preprocessed); |
Copybara | 854996b | 2021-09-07 19:36:02 +0000 | [diff] [blame] | 118 | const sanitized = DOMPurify.sanitize(converted, SANITIZE_OPTIONS); |
| 119 | return sanitized.toString(); |
| 120 | }; |