escape input before using it as a regex

commafeed-client/package-lock.json

@@ -24,6 +24,7 @@
         "@reduxjs/toolkit": "^1.9.5",
         "axios": "^1.4.0",
         "dayjs": "^1.11.7",
+        "escape-string-regexp": "^5.0.0",
         "interweave": "^13.1.0",
         "monaco-editor": "^0.38.0",
         "mousetrap": "^1.6.5",
@@ -2057,6 +2058,17 @@
         "stylis": "4.2.0"
       }
     },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@emotion/cache": {
       "version": "11.11.0",
       "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
@@ -6693,11 +6705,11 @@
       "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
     },
     "node_modules/escape-string-regexp": {
-      "version": "4.0.0",
+      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -7175,6 +7187,18 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/eslint/node_modules/eslint-scope": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",

commafeed-client/package.json

@@ -30,6 +30,7 @@
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.4.0",
     "dayjs": "^1.11.7",
+    "escape-string-regexp": "^5.0.0",
     "interweave": "^13.1.0",
     "monaco-editor": "^0.38.0",
     "mousetrap": "^1.6.5",

commafeed-client/src/components/content/Content.tsx

@@ -2,6 +2,7 @@ import { Box, createStyles, Mark, TypographyStylesProvider } from "@mantine/core
 import { Constants } from "app/constants"
 import { calculatePlaceholderSize } from "app/utils"
 import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading"
+import escapeStringRegexp from "escape-string-regexp"
 import { ChildrenNode, Interweave, Matcher, MatchResponse, Node, TransformCallback } from "interweave"
 import React from "react"
 
@@ -64,7 +65,7 @@ class HighlightMatcher extends Matcher {
 
     constructor(search: string) {
         super("highlight")
-        this.search = search
+        this.search = escapeStringRegexp(search)
     }
 
     match(string: string): MatchResponse<unknown> | null {