web: add setting to specify custom CORS proxy

apps/web/src/components/editor/index.tsx

@@ -43,6 +43,7 @@ import { db } from "../../common/db";
 import useMobile from "../../hooks/use-mobile";
 import Titlebox from "./title-box";
 import useTablet from "../../hooks/use-tablet";
+import Config from "../../utils/config";
 
 type PreviewSession = {
   content: { data: string; type: string };
@@ -287,6 +288,9 @@ export function Editor(props: EditorProps) {
         readonly={readonly}
         toolbarContainerId={headless ? undefined : "editorToolbar"}
         content={content}
+        downloadOptions={{
+          corsHost: Config.get("corsProxy", "https://cors.notesnook.com")
+        }}
         onLoad={() => {
           if (onLoadMedia) onLoadMedia();
         }}

apps/web/src/components/editor/tiptap.tsx

@@ -32,7 +32,8 @@ import {
   AttachmentType,
   usePermissionHandler,
   getHTMLFromFragment,
-  Fragment
+  Fragment,
+  type DownloadOptions
 } from "@notesnook/editor";
 import { Box, Flex } from "@theme-ui/components";
 import { PropsWithChildren, useEffect, useRef, useState } from "react";
@@ -67,6 +68,7 @@ type TipTapProps = {
   nonce?: number;
   theme: Theme;
   isMobile?: boolean;
+  downloadOptions?: DownloadOptions;
 };
 
 const SAVE_INTERVAL = process.env.REACT_APP_TEST ? 100 : 300;
@@ -110,7 +112,8 @@ function TipTap(props: TipTapProps) {
     readonly,
     nonce,
     theme,
-    isMobile
+    isMobile,
+    downloadOptions
   } = props;
 
   const isUserPremium = useIsUserPremium();
@@ -144,6 +147,7 @@ function TipTap(props: TipTapProps) {
           }
         }
       },
+      downloadOptions,
       doubleSpacedLines,
       isKeyboardOpen: true,
       isMobile: isMobile || false,

apps/web/src/views/settings.js

@@ -40,7 +40,8 @@ import {
   showMultifactorDialog,
   showAttachmentsDialog,
   show2FARecoveryCodesDialog,
-  showToolbarConfigDialog
+  showToolbarConfigDialog,
+  showPromptDialog
 } from "../common/dialog-controller";
 import { SUBSCRIPTION_STATUS } from "../common/constants";
 import { createBackup, importBackup, verifyAccount } from "../common";
@@ -182,6 +183,10 @@ function Settings() {
   );
   const [showReminderNotifications, setShowReminderNotifications] =
     usePersistentState("reminderNotifications", true);
+  const [corsProxy, setCorsProxy] = usePersistentState(
+    "corsProxy",
+    "https://cors.notesnook.com"
+  );
 
   useEffect(() => {
     (async () => {
@@ -756,6 +761,34 @@ function Settings() {
                 />
               </Button>
             )}
+            <Button
+              variant="list"
+              onClick={async () => {
+                const result = await showPromptDialog({
+                  title: "CORS bypass proxy",
+                  description:
+                    "You can set a custom proxy URL to increase your privacy.",
+                  defaultValue: corsProxy
+                });
+                if (!result) return;
+                const url = new URL(result);
+                setCorsProxy(`${url.protocol}//${url.hostname}`);
+              }}
+            >
+              <Tip
+                text="Custom CORS proxy"
+                tip={
+                  <>
+                    <em>{corsProxy}</em>
+                    <br />
+                    CORS proxy is required to directly download images from
+                    within the Notesnook app. It allows Notesnook to bypass
+                    browser restrictions by using a proxy. You can set a custom
+                    proxy URL to increase your privacy.
+                  </>
+                }
+              />
+            </Button>
             <Toggle
               title="Enable telemetry"
               onTip="Usage data & crash reports will be sent to us (no 3rd party involved) for analytics. All data is anonymous as mentioned in our privacy policy."