Restirct hljs by browser version number (#6901)

app/javascript/utils/highlight.ts

@@ -1,6 +1,6 @@
 import * as highlighter from 'highlight.js'
 import { useLayoutEffect, useRef } from 'react'
-import { areAllRegExpFeaturesSupported } from './regex-check'
+import { isLookbehindSupported } from './regex-check'
 import setupABAP from 'highlightjs-sap-abap'
 import setupCobol from 'highlightjs-cobol'
 import setupBqn from 'highlightjs-bqn'
@@ -12,7 +12,7 @@ import setupChapel from 'highlightjs-chapel'
 import setupGDScript from '@exercism/highlightjs-gdscript'
 import setupJq from 'highlightjs-jq'
 
-if (areAllRegExpFeaturesSupported()) {
+if (isLookbehindSupported()) {
   highlighter.default.registerLanguage('abap', setupABAP)
   highlighter.default.registerLanguage('cobol', setupCobol)
   highlighter.default.registerLanguage('bqn', setupBqn)
@@ -119,7 +119,7 @@ const highlightBlock = (block: HTMLElement): void => {
 }
 
 export const highlightAll = (parent: ParentNode = document): void => {
-  if (!areAllRegExpFeaturesSupported()) return
+  if (!isLookbehindSupported()) return
   parent.querySelectorAll<HTMLElement>('pre code').forEach((block) => {
     if (block.dataset.highlighted === 'true') {
       return
@@ -130,7 +130,7 @@ export const highlightAll = (parent: ParentNode = document): void => {
 }
 
 export const highlightAllAlways = (parent: ParentNode = document): void => {
-  if (!areAllRegExpFeaturesSupported()) return
+  if (!isLookbehindSupported()) return
   parent.querySelectorAll<HTMLElement>('pre code').forEach((block) => {
     block.removeAttribute('data-highlighted')
     highlightBlock(block)

app/javascript/utils/lazy-highlight-all.ts

@@ -1,7 +1,7 @@
-import { areAllRegExpFeaturesSupported } from './regex-check'
+import { isLookbehindSupported } from './regex-check'
 
 export function lazyHighlightAll(): void {
-  if (!areAllRegExpFeaturesSupported()) return
+  if (!isLookbehindSupported()) return
   function applySyntaxHighlighting() {
     import('@/utils/highlight')
       .then((m) => {

app/javascript/utils/regex-check.ts

@@ -1,3 +1,5 @@
+import UAParser from 'ua-parser-js'
+
 declare global {
   interface RegExpMatchArray {
     indices?: number[][]
@@ -15,3 +17,72 @@ export function areAllRegExpFeaturesSupported(): boolean {
 
   return true
 }
+
+function compareVersions(versionA: string, versionB: string): number {
+  const partsA = versionA.split('.').map(Number)
+  const partsB = versionB.split('.').map(Number)
+
+  for (let i = 0; i < Math.max(partsA.length, partsB.length); i++) {
+    const partA = partsA[i] || 0
+    const partB = partsB[i] || 0
+
+    if (partA > partB) {
+      return 1
+    } else if (partA < partB) {
+      return -1
+    }
+  }
+
+  return 0
+}
+
+export function isLookbehindSupported(): boolean {
+  const parser = new UAParser().getBrowser()
+
+  switch (parser.name) {
+    case 'IE':
+    case 'Opera mini':
+      return false
+    case 'Chrome': {
+      if (parser.version) return compareVersions(parser.version, '62') >= 0
+    }
+    case 'Edge': {
+      if (parser.version) return compareVersions(parser.version, '79') >= 0
+    }
+    case 'Firefox': {
+      if (parser.version) return compareVersions(parser.version, '78') >= 0
+    }
+    case 'Safari': {
+      if (parser.version) return compareVersions(parser.version, '16.4') >= 0
+    }
+    case 'Mobile Safari': {
+      if (parser.version) return compareVersions(parser.version, '16.4') >= 0
+    }
+    case 'Opera': {
+      if (parser.version) return compareVersions(parser.version, '49') >= 0
+    }
+    case 'Opera Mobile': {
+      if (parser.version) return compareVersions(parser.version, '80') >= 0
+    }
+    case 'Samsung Internet': {
+      if (parser.version) return compareVersions(parser.version, '8.2') >= 0
+    }
+    case 'UCBrowser': {
+      if (parser.version) return compareVersions(parser.version, '15.5') >= 0
+    }
+    case 'Android Browser': {
+      if (parser.version) return compareVersions(parser.version, '124') >= 0
+    }
+    case 'QQ Browser': {
+      if (parser.version) return compareVersions(parser.version, '14.9') >= 0
+    }
+    case 'Baidu Browser': {
+      if (parser.version) return compareVersions(parser.version, '13.52') >= 0
+    }
+    case 'KaiOS Browser': {
+      if (parser.version) return compareVersions(parser.version, '3.1') >= 0
+    }
+    default:
+      return true
+  }
+}

package.json

@@ -92,6 +92,7 @@
     "regenerator-runtime": "^0.13.7",
     "rough-notation": "^0.5.1",
     "tailwindcss": "^3.3.3",
+    "ua-parser-js": "^1.0.37",
     "use-is-mounted": "^1.0.0",
     "use-memory-value": "^1.2.0",
     "uuid": "^8.3.1",
@@ -123,6 +124,7 @@
     "@types/react-dom": "^18.2.7",
     "@types/react-image-crop": "^8.1.2",
     "@types/react-modal": "^3.12.0",
+    "@types/ua-parser-js": "^0.7.39",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^4.4.0",
     "@typescript-eslint/parser": "^4.4.0",

yarn.lock

@@ -2369,6 +2369,11 @@
   dependencies:
     "@types/jest" "*"
 
+"@types/ua-parser-js@^0.7.39":
+  version "0.7.39"
+  resolved "https://registry.yarnpkg.com/@types/ua-parser-js/-/ua-parser-js-0.7.39.tgz#832c58e460c9435e4e34bb866e85e9146e12cdbb"
+  integrity sha512-P/oDfpofrdtF5xw433SPALpdSchtJmY7nsJItf8h3KXqOslkbySh8zq4dSWXH2oTjRvJ5PczVEoCZPow6GicLg==
+
 "@types/uuid@^8.3.0":
   version "8.3.4"
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
@@ -10459,6 +10464,11 @@ typo-js@*:
   resolved "https://registry.yarnpkg.com/typo-js/-/typo-js-1.2.1.tgz#334a0d8c3f6c56f2f1e15fdf6c31677793cbbe9b"
   integrity sha512-bTGLjbD3WqZDR3CgEFkyi9Q/SS2oM29ipXrWfDb4M74ea69QwKAECVceYpaBu0GfdnASMg9Qfl67ttB23nePHg==
 
+ua-parser-js@^1.0.37:
+  version "1.0.37"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.37.tgz#b5dc7b163a5c1f0c510b08446aed4da92c46373f"
+  integrity sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==
+
 uid-number@0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"