Merge pull request #1799 from AletheiaFact/Improving-url-validation-regex

Author: thesocialdev

server/jest.config.json

@@ -3,7 +3,8 @@
     "moduleFileExtensions": [
         "js",
         "json",
-        "ts"
+        "ts",
+        "tsx"
     ],
     "rootDir": "./",
     "testRegex": ".*\\.spec\\.ts$",

src/components/Collaborative/Components/Source/EditorAddSources.tsx

@@ -5,7 +5,7 @@ import SourceDialog from "../LinkToolBar/Dialog/SourceDialog";
 import { VisualEditorContext } from "../../VisualEditorProvider";
 import { useTranslation } from "next-i18next";
 import AddIcon from '@mui/icons-material/Add';
-import { URL_PATTERN } from "../../hooks/useFloatingLinkState";
+import { URL_PATTERN } from "../../../../utils/ValidateFloatingLink";
 import { HTTP_PROTOCOL_REGEX } from "../LinkToolBar/FloatingLinkToolbar";
 import { useCommands } from "@remirror/react";
 import { Node } from "@remirror/pm/model";

src/components/Collaborative/hooks/useFloatingLinkState.spec.ts

@@ -0,0 +1,30 @@
+import { validateFloatingLink } from "../../../utils/ValidateFloatingLink";
+
+describe("URL Validation Tests", () => {
+    const validUrls = [
+        "https://example.com",
+        "https://example.br",
+        "https://example.org",
+        "https://example.net",
+        "https://example.edu",
+        "https://example.gov",
+        "https://example.mil",
+        "https://example.co",
+        "https://example.info",
+        "https://example.io",
+        "https://example.biz",
+        "https://example.us",
+        "https://example.uk",
+        "ftp://example.com",
+        "http://example.co",
+        "https://subdomain.example.org"
+    ];
+
+    const mockT = jest.fn().mockReturnValue("URL inválida");
+
+    validUrls.forEach((url) => {
+        it(`should accept the URL: ${url}`, () => {
+            expect(() => validateFloatingLink(url, mockT)).not.toThrow();
+        });
+    });
+});

src/components/Collaborative/hooks/useFloatingLinkState.tsx

@@ -14,16 +14,12 @@ import {
     useCurrentSelection,
     useUpdateReason,
 } from "@remirror/react";
-import { useTranslation } from "next-i18next";
 import { VisualEditorContext } from "../VisualEditorProvider";
 import useLinkShortcut from "./useLinkShortcut";
 import { uniqueId } from "remirror";
-
-export const URL_PATTERN =
-    /^(ftp|http|https):\/\/[^ "]+\.(br|com|org|net|edu|gov|mil|co|info|io|biz|us|uk)(\/|\?|#|$)/;
+import { validateFloatingLink } from "../../../utils/ValidateFloatingLink";
 
 function useFloatingLinkState() {
-    const { t } = useTranslation();
     const { editorSources, setEditorSources } = useContext(VisualEditorContext);
 
     const [error, setError] = useState(null);
@@ -54,13 +50,6 @@ function useFloatingLinkState() {
 
     useEffect(() => setHref(url), [url]);
 
-    const validateFloatingLink = useCallback(() => {
-        // TODO: use a library or service that maintains a comprehensive list of valid TLDs
-        if (!URL_PATTERN.test(href)) {
-            throw new Error(t("sourceForm:errorMessageValidURL"));
-        }
-    }, [href, t]);
-
     const updateFloatingLink = useCallback(
         (id) => {
             const range = linkShortcut ?? undefined;

src/components/Form/FormField.ts

@@ -3,7 +3,7 @@ import { RegisterOptions } from "react-hook-form";
 import { EditorParser } from "../../../lib/editor-parser";
 import { ReviewTaskMachineContextReviewData } from "../../../server/review-task/dto/create-review-task.dto";
 import { Roles } from "../../types/enums";
-import { URL_PATTERN } from "../Collaborative/hooks/useFloatingLinkState";
+import { URL_PATTERN } from "../../utils/ValidateFloatingLink";
 
 export type FormField = {
     fieldName: string;

src/utils/ValidateFloatingLink.ts

@@ -0,0 +1,9 @@
+
+export const URL_PATTERN =
+  /^(ftp|http|https):\/\/[^ "]+\.[a-zA-Z]{2,}(\/|\?|#|$)/;
+
+export const validateFloatingLink = (href?: string, t?: (key: string) => string) => {
+  if (!URL_PATTERN.test(href)) {
+    throw new Error(t("sourceForm:errorMessageValidURL"));
+  }
+};