feat(frontend): add fork awesome linter

This linter will tell users that their fork awesome icon is deprecated and will stop working in the future and that they should replace it with a new bootstrap icon.

Signed-off-by: Philip Molares <philip.molares@udo.edu>

frontend/CHANGELOG.md

@@ -19,6 +19,7 @@ SPDX-License-Identifier: CC-BY-SA-4.0
     - `{%pdf https://example.org/example-pdf.pdf %}` -> Embedding removed
 - The use of `sequence` as code block language ([Why?](https://github.com/hedgedoc/react-client/issues/488#issuecomment-683262875))
 - Comma-separated definition of tags in the yaml-frontmatter
+- Fork Awesome Icons will be removed in a future release
 
 ### Removed
 

frontend/locales/en.json

@@ -223,7 +223,7 @@
       "shortcode": "The {{shortcode}} short-code is deprecated and will be removed in a future release. Use a single line URL instead.",
       "frontmatter": "The yaml-metadata is invalid.",
       "frontmatter-tags": "The comma-separated definition of tags in the yaml-metadata is deprecated. Use a yaml-array instead.",
-      "fork-awesome": "Fork Awesome is deprecated and will be removed in future release. Please use the new bootstrap icons instead. See {{link}} for more information."
+      "fork-awesome": "Fork Awesome is deprecated and will be removed in a future release. Please use bootstrap icons instead. See {{link}} for more information."
     },
     "upload": {
       "uploadFile": {

frontend/src/components/editor-page/editor-pane/linter/single-line-regex-linter.ts

@@ -51,25 +51,28 @@ export class SingleLineRegexLinter implements Linter {
       .map(({ lineStartIndex, regexResult }) => this.createDiagnostic(lineStartIndex, regexResult as RegExpExecArray))
   }
 
-  private createDiagnostic(from: number, found: RegExpExecArray): Diagnostic {
-    let actions: Action[] = []
-    if (this.replace !== undefined) {
-      const replacedText = this.replace(found[1])
-      actions = [
-        {
-          name: t(this.actionLabel ?? 'editor.linter.defaultAction'),
-          apply: (view: EditorView, from: number, to: number) => {
-            view.dispatch({
-              changes: { from, to, insert: replacedText }
-            })
-          }
-        }
-      ]
+  private buildActions(found: RegExpExecArray): Action[] {
+    if (this.replace === undefined) {
+      return []
     }
+    const replacedText = this.replace(found[1])
+    return [
+      {
+        name: t(this.actionLabel ?? 'editor.linter.defaultAction'),
+        apply: (view: EditorView, from: number, to: number) => {
+          view.dispatch({
+            changes: { from, to, insert: replacedText }
+          })
+        }
+      }
+    ]
+  }
+
+  private createDiagnostic(from: number, found: RegExpExecArray): Diagnostic {
     return {
       from: from,
       to: from + found[0].length,
-      actions: actions,
+      actions: this.buildActions(found),
       message: this.message,
       severity: 'warning'
     }

frontend/src/extensions/extra-integrations/fork-awesome/fork-awesome-app-extension.ts

@@ -8,7 +8,7 @@ import { SingleLineRegexLinter } from '../../../components/editor-page/editor-pa
 import { AppExtension } from '../../base/app-extension'
 import { t } from 'i18next'
 
-export const forkAwesomeRegex = /<i class=["']fa fa-[\w-]+["'](?: aria-hidden=["']true["'])?\/?>(?:<\/i>)?/
+const forkAwesomeRegex = /<i class=["'][\w\s]*fa-[\w-]+[\w\s-]*["'][^>]*\/?>(?:<\/i>)?/
 
 /**
  * Adds support for flow charts to the markdown rendering.