feat: add upload/download cancellation support

apps/web/public/placeholder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135.47 135.47"><g fill="gray"><path d="M65.63 65.86a4.48 4.48 0 1 0-.01-8.96 4.48 4.48 0 0 0 0 8.96zm0-6.33a1.85 1.85 0 1 1 0 3.7 1.85 1.85 0 0 1 0-3.7zm0 0"/><path d="M88.49 48.53H46.98c-.9 0-1.64.73-1.64 1.64V85.3c0 .9.74 1.64 1.64 1.64h41.5c.91 0 1.64-.74 1.64-1.64V50.17c0-.9-.73-1.64-1.63-1.64Zm-.99 2.62v20.77l-8.25-8.25a1.38 1.38 0 0 0-1.95 0L65.63 75.34l-7.46-7.46a1.37 1.37 0 0 0-1.95 0l-8.25 8.25V51.15ZM47.97 84.31v-4.47l9.22-9.22 7.46 7.45a1.37 1.37 0 0 0 1.95 0L78.27 66.4l9.23 9.23v8.68zm0 0"/></g></svg>

apps/web/src/components/editor/editor.css

@@ -159,7 +159,7 @@ span.attachment em::before {
 img {
   border-radius: 5px;
   max-width: 100% !important;
-  height: auto !important;
+  /* height: auto !important; */
   background-color: var(--bgSecondary);
 }
 

apps/web/src/components/editor/plugins/picker.js

@@ -81,7 +81,7 @@ async function pickImage() {
     hash: output.hash,
     filename: selectedImage.name,
     type: selectedImage.type,
-    size: selectedImage.length,
+    size: selectedImage.size,
     dataurl,
   };
 }

apps/web/src/components/editor/tinymce.js

@@ -235,6 +235,7 @@ function TinyMCE(props) {
         invalid_styles: {
           span: "--progress",
         },
+        extended_valid_elements: `img[*|src=placeholder.svg]`,
       }}
       onBeforeExecCommand={async (command) => {
         const isPremiumCommand = premiumCommands.some((cmd) => {

apps/web/src/interfaces/fs.js

@@ -71,7 +71,7 @@ async function readEncrypted(filename, key, cipherData) {
 
 async function uploadFile(filename, requestOptions) {
   console.log("Request to upload file", filename, requestOptions);
-  const { url } = requestOptions;
+  const { url, cancellationToken } = requestOptions;
 
   let cipher = await fs.getItem(filename);
   if (!cipher) throw new Error(`File not found. Filename: ${filename}`);
@@ -86,6 +86,7 @@ async function uploadFile(filename, requestOptions) {
     headers: {
       "Content-Type": "",
     },
+    cancelToken: cancellationToken,
     data: new Blob([cipher.buffer]),
     onUploadProgress: (ev) => {
       console.log("Uploading file", filename, ev);
@@ -103,13 +104,14 @@ async function uploadFile(filename, requestOptions) {
 }
 
 async function downloadFile(filename, requestOptions) {
-  const { url, headers } = requestOptions;
+  const { url, headers, cancellationToken } = requestOptions;
   console.log("Request to download file", filename, url, headers);
   if (await fs.hasItem(filename)) return true;
 
   const response = await axios.get(url, {
     headers: headers,
     responseType: "blob",
+    cancelToken: cancellationToken,
     onDownloadProgress: (ev) => {
       console.log("Downloading file", filename, ev);
       AppEventManager.publish(AppEvents.UPDATE_ATTACHMENT_PROGRESS, {
@@ -128,15 +130,16 @@ async function downloadFile(filename, requestOptions) {
 }
 
 async function deleteFile(filename, requestOptions) {
-  const { url, headers } = requestOptions;
+  const { url, headers, cancellationToken } = requestOptions;
   console.log("Request to delete file", filename, url, headers);
   if (!(await fs.hasItem(filename))) return true;
 
   const response = await axios.delete(url, {
+    cancelToken: cancellationToken,
     headers: headers,
   });
   const result = isSuccessStatusCode(response.status);
-  // if (result) await fs.removeItem(filename);
+  if (result) await fs.removeItem(filename);
   return result;
 }
 
@@ -147,8 +150,8 @@ function exists(filename) {
 const FS = {
   writeEncrypted,
   readEncrypted,
-  uploadFile,
-  downloadFile,
+  uploadFile: cancellable(uploadFile),
+  downloadFile: cancellable(downloadFile),
   deleteFile,
   exists,
 };
@@ -157,3 +160,14 @@ export default FS;
 function isSuccessStatusCode(statusCode) {
   return statusCode >= 200 && statusCode <= 299;
 }
+
+function cancellable(operation) {
+  const source = axios.CancelToken.source();
+  return function (filename, requestOptions) {
+    requestOptions.cancellationToken = source.token;
+    return {
+      execute: () => operation(filename, requestOptions),
+      cancel: (message) => source.cancel(message),
+    };
+  };
+}

apps/web/src/stores/editor-store.js

@@ -92,7 +92,7 @@ class EditorStore extends BaseStore {
     if (note.conflicted)
       return hashNavigate(`/notes/${noteId}/conflict`, { replace: true });
 
-    let content = await db.content.raw(note.contentId);
+    let content = await db.content.raw(note.contentId, false);
 
     this.set((state) => {
       const defaultSession = getDefaultSession();