Fix discrepancy in Markdown rendering (#1595)

README.md

@@ -2,6 +2,6 @@
 
 ## Modrinth's center for its frontend service
 
-For contributing information, please see the knossos section of the [Modrinth contributing guide](https://docs.modrinth.com/docs/details/contributing/#knossos-frontend).
+For contributing information, please see the knossos section of the [Modrinth contributing guide](https://support.modrinth.com/en/articles/8802215-contributing-to-modrinth#h_1bc6570903).
 
 For a detailed explanation on how things work in general, check out the [Nuxt.js docs](https://nuxt.com).

components/ui/ModalConfirm.vue

@@ -34,10 +34,10 @@
 </template>
 
 <script>
+import { renderString } from 'omorphia'
 import CrossIcon from '~/assets/images/utils/x.svg'
 import TrashIcon from '~/assets/images/utils/trash.svg'
 import Modal from '~/components/ui/Modal.vue'
-import { renderString } from '~/helpers/parse.js'
 
 export default {
   components: {

components/ui/NotificationItem.vue

@@ -288,6 +288,7 @@
 </template>
 
 <script setup>
+import { renderString } from 'omorphia'
 import InvitationIcon from '~/assets/images/utils/user-plus.svg'
 import ModerationIcon from '~/assets/images/sidebar/admin.svg'
 import NotificationIcon from '~/assets/images/sidebar/notifications.svg'
@@ -302,7 +303,6 @@ import { getProjectLink, getVersionLink } from '~/helpers/projects.js'
 import { getUserLink } from '~/helpers/users.js'
 import { acceptTeamInvite, removeSelfFromTeam } from '~/helpers/teams.js'
 import { markAsRead } from '~/helpers/notifications.js'
-import { renderString } from '~/helpers/parse.js'
 import DoubleIcon from '~/components/ui/DoubleIcon.vue'
 import Avatar from '~/components/ui/Avatar.vue'
 import Badge from '~/components/ui/Badge.vue'

components/ui/thread/ThreadMessage.vue

@@ -108,10 +108,10 @@ import {
   LockIcon,
   ModrinthIcon,
   ScaleIcon,
+  renderString,
 } from 'omorphia'
 import Avatar from '~/components/ui/Avatar.vue'
 import Badge from '~/components/ui/Badge.vue'
-import { renderString } from '~/helpers/parse.js'
 import { isStaff } from '~/helpers/users.js'
 
 const props = defineProps({

helpers/highlight.js

@@ -15,7 +15,7 @@ import ini from 'highlight.js/lib/languages/ini'
 import yaml from 'highlight.js/lib/languages/yaml'
 import xml from 'highlight.js/lib/languages/xml'
 import properties from 'highlight.js/lib/languages/properties'
-import { md, configuredXss } from '~/helpers/parse.js'
+import { md, configuredXss } from 'omorphia'
 
 /* REGISTRATION */
 // Scripting

helpers/parse.js

@@ -1,148 +0,0 @@
-import MarkdownIt from 'markdown-it'
-import xss from 'xss'
-
-export const configuredXss = new xss.FilterXSS({
-  whiteList: {
-    ...xss.whiteList,
-    summary: [],
-    h1: ['id'],
-    h2: ['id'],
-    h3: ['id'],
-    h4: ['id'],
-    h5: ['id'],
-    h6: ['id'],
-    kbd: ['id'],
-    input: ['checked', 'disabled', 'type'],
-    iframe: ['width', 'height', 'allowfullscreen', 'frameborder', 'start', 'end'],
-    img: [...xss.whiteList.img, 'usemap', 'style'],
-    map: ['name'],
-    area: [...xss.whiteList.a, 'coords'],
-    a: [...xss.whiteList.a, 'rel'],
-    td: [...xss.whiteList.td, 'style'],
-    th: [...xss.whiteList.th, 'style'],
-  },
-  css: {
-    whiteList: {
-      'image-rendering': /^pixelated$/,
-      'text-align': /^center|left|right$/,
-      float: /^left|right$/,
-    },
-  },
-  onIgnoreTagAttr: (tag, name, value) => {
-    // Allow iframes from acceptable sources
-    if (tag === 'iframe' && name === 'src') {
-      const allowedSources = [
-        {
-          regex:
-            /^https?:\/\/(www\.)?youtube(-nocookie)?\.com\/embed\/[a-zA-Z0-9_-]{11}(\?&autoplay=[0-1]{1})?$/,
-          remove: ['&autoplay=1'], // Prevents autoplay
-        },
-        {
-          regex: /^https?:\/\/(www\.)?discord\.com\/widget\?id=\d{18,19}(&theme=\w+)?$/,
-          remove: [/&theme=\w+/],
-        },
-      ]
-
-      for (const source of allowedSources) {
-        if (source.regex.test(value)) {
-          for (const remove of source.remove) {
-            value = value.replace(remove, '')
-          }
-          return name + '="' + xss.escapeAttrValue(value) + '"'
-        }
-      }
-    }
-
-    // For Highlight.JS
-    if (name === 'class' && ['pre', 'code', 'span'].includes(tag)) {
-      const allowedClasses = []
-      for (const className of value.split(/\s/g)) {
-        if (className.startsWith('hljs-') || className.startsWith('language-')) {
-          allowedClasses.push(className)
-        }
-      }
-      return name + '="' + xss.escapeAttrValue(allowedClasses.join(' ')) + '"'
-    }
-  },
-  safeAttrValue(tag, name, value, cssFilter) {
-    if (tag === 'img' && name === 'src' && !value.startsWith('data:')) {
-      try {
-        const url = new URL(value)
-
-        if (url.hostname.includes('wsrv.nl')) {
-          url.searchParams.delete('errorredirect')
-        }
-
-        const allowedHostnames = [
-          'imgur.com',
-          'i.imgur.com',
-          'cdn-raw.modrinth.com',
-          'cdn.modrinth.com',
-          'staging-cdn-raw.modrinth.com',
-          'staging-cdn.modrinth.com',
-          'github.com',
-          'raw.githubusercontent.com',
-          'img.shields.io',
-          'i.postimg.cc',
-          'wsrv.nl',
-          'cf.way2muchnoise.eu',
-          'bstats.org',
-        ]
-
-        if (!allowedHostnames.includes(url.hostname)) {
-          return xss.safeAttrValue(
-            tag,
-            name,
-            `https://wsrv.nl/?url=${encodeURIComponent(url.toString())}&n=-1`,
-            cssFilter
-          )
-        } else {
-          return xss.safeAttrValue(tag, name, url.toString(), cssFilter)
-        }
-      } catch (err) {}
-    }
-
-    return xss.safeAttrValue(tag, name, value, cssFilter)
-  },
-})
-
-export const md = (options = {}) => {
-  const md = new MarkdownIt('default', {
-    html: true,
-    linkify: true,
-    breaks: false,
-    ...options,
-  })
-
-  const defaultLinkOpenRenderer =
-    md.renderer.rules.link_open ||
-    function (tokens, idx, options, _env, self) {
-      return self.renderToken(tokens, idx, options)
-    }
-
-  md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
-    const token = tokens[idx]
-    const index = token.attrIndex('href')
-
-    if (index !== -1) {
-      const href = token.attrs[index][1]
-
-      try {
-        const url = new URL(href)
-        const allowedHostnames = ['modrinth.com']
-
-        if (allowedHostnames.includes(url.hostname)) {
-          return defaultLinkOpenRenderer(tokens, idx, options, env, self)
-        }
-      } catch (err) {}
-    }
-
-    tokens[idx].attrSet('rel', 'noopener nofollow ugc')
-
-    return defaultLinkOpenRenderer(tokens, idx, options, env, self)
-  }
-
-  return md
-}
-
-export const renderString = (string) => configuredXss.process(md().render(string))

pages/[type]/[id].vue

@@ -768,6 +768,7 @@ import {
   PlusIcon,
   Checkbox,
   ChartIcon,
+  renderString,
 } from 'omorphia'
 import CrownIcon from '~/assets/images/utils/crown.svg'
 import CalendarIcon from '~/assets/images/utils/calendar.svg'
@@ -809,7 +810,6 @@ import LinksIcon from '~/assets/images/utils/link.svg'
 import LicenseIcon from '~/assets/images/utils/copyright.svg'
 import GalleryIcon from '~/assets/images/utils/image.svg'
 import VersionIcon from '~/assets/images/utils/version.svg'
-import { renderString } from '~/helpers/parse.js'
 import { reportProject } from '~/utils/report-helpers.ts'
 import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
 import { userCollectProject } from '~/composables/user.js'