Added support for embedding neetoRecord video links (#1056)

* Added support for embedding neetoRecord links

* Updated documentation

Author: gaagul

src/common/constants.js

@@ -49,9 +49,15 @@ export const VIMEO_URL_REGEXP =
 export const LOOM_URL_REGEXP =
   /((?:http|https):\/\/)?(www\.)?loom\.com\/(share|embed)\/([a-f0-9]{32})(?:\?sid=([a-f0-9-]{36}))?(?:\?t=(\d+))?(\?[^#]*)?/;
 
+export const NEETO_RECORD_URL_REGEXP =
+  /((?:http|https):\/\/)?(www\.)?[a-zA-Z0-9-]+\.(neetorecord\.com)\/(watch)\/([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})/;
+
 export const COMBINED_REGEX = new RegExp(
-  pluck("source", [YOUTUBE_URL_REGEXP, VIMEO_URL_REGEXP, LOOM_URL_REGEXP]).join(
-    "|"
-  ),
+  pluck("source", [
+    YOUTUBE_URL_REGEXP,
+    VIMEO_URL_REGEXP,
+    LOOM_URL_REGEXP,
+    NEETO_RECORD_URL_REGEXP,
+  ]).join("|"),
   "g"
 );

src/components/Editor/CustomExtensions/Embeds/index.jsx

@@ -68,12 +68,12 @@ const EmbedOption = ({ isEmbedModalOpen, setIsEmbedModalOpen, editor }) => {
       onClose={handleClose}
     >
       <Modal.Header>
-        <Typography style="h2">Embed Video</Typography>
+        <Typography style="h2">{t("neetoEditor.menu.embedVideo")}</Typography>
       </Modal.Header>
       <Modal.Body className="ne-embed-modal space-y-2">
         <Input
           data-cy="neeto-editor-embed-input"
-          error={error && "Please enter a valid URL"}
+          error={error && t("neetoEditor.error.invalidEmbedUrl")}
           label={t("neetoEditor.common.videoUrl")}
           ref={inputRef}
           size="medium"

src/components/Editor/CustomExtensions/Embeds/utils.js

@@ -2,16 +2,17 @@ import {
   YOUTUBE_URL_REGEXP,
   VIMEO_URL_REGEXP,
   LOOM_URL_REGEXP,
+  NEETO_RECORD_URL_REGEXP,
 } from "common/constants";
 
-export const validateUrl = url => {
-  const validatedUrl = url
-    ? validateYouTubeUrl(url) || validateLoomUrl(url) || validateVimeoUrl(url)
+export const validateUrl = url =>
+  url
+    ? validateNeetoRecordUrl(url) ||
+      validateYouTubeUrl(url) ||
+      validateLoomUrl(url) ||
+      validateVimeoUrl(url)
     : false;
 
-  return validatedUrl;
-};
-
 export const validateYouTubeUrl = url => {
   const match = url.match(YOUTUBE_URL_REGEXP);
 
@@ -29,3 +30,9 @@ export const validateLoomUrl = url => {
 
   return match && `https://www.loom.com/embed/${match[4]}?t=${match[5] || ""}`;
 };
+
+export const validateNeetoRecordUrl = url => {
+  const match = url.match(NEETO_RECORD_URL_REGEXP);
+
+  return match && url.replace("watch", "embeds");
+};

src/translations/en.json

@@ -28,6 +28,7 @@
     },
     "error": {
       "invalidUrl": "Please enter a valid URL",
+      "invalidEmbedUrl": "Supported sources: NeetoRecord, YouTube, Vimeo, Loom.",
       "cannotAddFiles": "Cannot add files",
       "onBeforeFileAddedReturn": "Cannot add the file because onBeforeFileAdded returned false.",
       "fileIsTooLarge": "File size is too large. Max size is {{maxFileSize, anyCase}}.",
@@ -64,7 +65,8 @@
       "alignLeft": "Align left",
       "alignCenter": "Align center",
       "alignRight": "Align right",
-      "delete": "Delete"
+      "delete": "Delete",
+      "embedVideo": "Embed video"
     },
     "placeholders": {
       "columns": "Enter columns",

stories/constants.js

@@ -14,7 +14,7 @@ export const EDITOR_ADDONS_TABLE_ROWS = [
   ["table", "Add a table to the editor."],
   ["undo", "Undo last performed action."],
   ["video-upload", "Upload videos to the editor."],
-  ["video-embed", "Embed videos from YouTube, Loom and Vimeo."],
+  ["video-embed", "Embed videos from neetoRecord, YouTube, Loom and Vimeo."],
   ["text-color", "Change the color of the text."],
 ];