refactor: export components (#5773)

web/core/components/pages/modals/export-page-modal.tsx

@@ -109,7 +109,10 @@ export const ExportPageModal: React.FC<Props> = (props) => {
   const selectedPageFormat = watch("page_format");
   const selectedContentVariety = watch("content_variety");
   const isPDFSelected = selectedExportFormat === "pdf";
-  const fileName = pageTitle?.toLowerCase()?.replace(/ /g, "-");
+  const fileName = pageTitle
+    ?.toLowerCase()
+    ?.replace(/[^a-z0-9-_]/g, "-")
+    .replace(/-+/g, "-");
   // handle modal close
   const handleClose = () => {
     onClose();
@@ -117,6 +120,18 @@ export const ExportPageModal: React.FC<Props> = (props) => {
       reset();
     }, 300);
   };
+
+  const initiateDownload = (blob: Blob, filename: string) => {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    link.click();
+    setTimeout(() => {
+      URL.revokeObjectURL(url);
+    }, 1000);
+  };
+
   // handle export as a PDF
   const handleExportAsPDF = async () => {
     try {
@@ -127,13 +142,7 @@ export const ExportPageModal: React.FC<Props> = (props) => {
       });
 
       const blob = await pdf(<PDFDocument content={parsedPageContent} pageFormat={selectedPageFormat} />).toBlob();
-      const url = URL.createObjectURL(blob);
+      initiateDownload(blob, `${fileName}-${selectedPageFormat.toString().toLowerCase()}.pdf`);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = `${fileName}-${selectedPageFormat.toString().toLowerCase()}.pdf`;
-      link.click();
-
-      URL.revokeObjectURL(url);
     } catch (error) {
       throw new Error(`Error in exporting as a PDF: ${error}`);
     }
@@ -148,13 +157,7 @@ export const ExportPageModal: React.FC<Props> = (props) => {
       });
 
       const blob = new Blob([parsedMarkdownContent], { type: "text/markdown" });
-      const url = URL.createObjectURL(blob);
+      initiateDownload(blob, `${fileName}.md`);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = `${fileName}.md`;
-      link.click();
-
-      URL.revokeObjectURL(url);
     } catch (error) {
       throw new Error(`Error in exporting as markdown: ${error}`);
     }

web/core/constants/editor.ts

@@ -252,7 +252,6 @@ const EDITOR_PDF_CODE_STYLES: Styles = {
     fontSize: convertRemToPixel(0.7),
   },
   // inline code block
-  // TODO: update width
   "[data-node-type='inline-code-block']": {
     margin: 0,
     paddingVertical: convertRemToPixel(0.25 / 4 + 0.25 / 8),

web/helpers/editor.helper.ts

@@ -134,7 +134,8 @@ export const replaceCustomComponentsFromMarkdownContent = (props: {
   let parsedMarkdownContent = markdownContent;
   // replace the matched mention components with [label](redirect_uri)
   const mentionRegex = /<mention-component[^>]*label="([^"]+)"[^>]*redirect_uri="([^"]+)"[^>]*><\/mention-component>/g;
-  const originUrl = window?.location?.origin ?? "";
+  const originUrl = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
   parsedMarkdownContent = parsedMarkdownContent.replace(
     mentionRegex,
     (_match, label, redirectUri) => `[${label}](${originUrl}/${redirectUri})`

web/helpers/file.helper.ts

@@ -4,6 +4,17 @@
  * @returns
  */
 export const getBase64Image = async (url: string): Promise<string> => {
+  if (!url || typeof url !== "string") {
+    throw new Error("Invalid URL provided");
+  }
+
+  // Try to create a URL object to validate the URL
+  try {
+    new URL(url);
+  } catch (error) {
+    throw new Error("Invalid URL format");
+  }
+
   const response = await fetch(url);
   // check if the response is OK
   if (!response.ok) {