feat: support for multiple encodings in CSV files (#5756)

frontend/src/views/files/Editor.vue

@@ -171,25 +171,19 @@ onMounted(() => {
     `https://cdn.jsdelivr.net/npm/ace-builds@${ace_version}/src-min-noconflict/`
   );
 
-  editor.value = ace.edit("editor", {
-    value: fileContent,
-    showPrintMargin: false,
-    readOnly: fileStore.req?.type === "textImmutable",
-    theme: getEditorTheme(authStore.user?.aceEditorTheme ?? ""),
-    mode: modelist.getModeForPath(fileStore.req!.name).mode,
-    wrap: true,
-    enableBasicAutocompletion: true,
-    enableLiveAutocompletion: true,
-    enableSnippets: true,
-  });
-
-  editor.value.setFontSize(fontSize.value);
-  editor.value.focus();
-
-  editor.value.getSelection().on("changeSelection", () => {
-    isSelectionEmpty.value =
-      editor.value == null || editor.value.getSelectedText().length == 0;
-  });
+  if (!layoutStore.loading) {
+    initEditor(fileContent);
+  } else {
+    const unwatch = watchEffect(() => {
+      // Initialize editor when layout is loaded
+      if (!layoutStore.loading) {
+        setTimeout(() => {
+          initEditor(fileContent);
+          unwatch();
+        }, 50);
+      }
+    });
+  }
 });
 
 onBeforeUnmount(() => {
@@ -218,6 +212,23 @@ onBeforeRouteUpdate((to, from, next) => {
   });
 });
 
+const initEditor = (fileContent: string) => {
+  editor.value = ace.edit("editor", {
+    value: fileContent,
+    showPrintMargin: false,
+    readOnly: fileStore.req?.type === "textImmutable",
+    theme: getEditorTheme(authStore.user?.aceEditorTheme ?? ""),
+    mode: modelist.getModeForPath(fileStore.req!.name).mode,
+    wrap: true,
+    enableBasicAutocompletion: true,
+    enableLiveAutocompletion: true,
+    enableSnippets: true,
+  });
+
+  editor.value.setFontSize(fontSize.value);
+  editor.value.focus();
+};
+
 const keyEvent = (event: KeyboardEvent) => {
   if (event.code === "Escape") {
     close();

frontend/src/views/files/Preview.vue

@@ -253,7 +253,7 @@ const hoverNav = ref<boolean>(false);
 const autoPlay = ref<boolean>(false);
 const previousRaw = ref<string>("");
 const nextRaw = ref<string>("");
-const csvContent = ref<string>("");
+const csvContent = ref<ArrayBuffer | string>("");
 const csvError = ref<string>("");
 
 const player = ref<HTMLVideoElement | HTMLAudioElement | null>(null);
@@ -393,7 +393,11 @@ const updatePreview = async () => {
     if (fileStore.req.size > CSV_MAX_SIZE) {
       csvError.value = t("files.csvTooLarge");
     } else {
-      csvContent.value = fileStore.req.content ?? "";
+      if (fileStore.req.rawContent != null) {
+        csvContent.value = fileStore.req.rawContent;
+      } else {
+        csvContent.value = fileStore.req.content ?? "";
+      }
     }
   }