fix: x scroll and more guessed encodings

Author: SharzyL

frontend/components/CodeEditor.tsx

@@ -77,7 +77,7 @@ export function CodeEditor({
   className,
   ...rest
 }: CodeInputProps) {
-  const refHighlighting = useRef<HTMLDivElement | null>(null)
+  const refHighlighting = useRef<HTMLPreElement | null>(null)
   const refTextarea = useRef<HTMLTextAreaElement | null>(null)
 
   const [heightPx, setHeightPx] = useState<number>(0)
@@ -178,10 +178,11 @@ export function CodeEditor({
           className={`relative w-full`}
           style={{ tabSize: tabSetting.char === "tab" ? tabSetting.width : undefined }}
         >
-          <div className={"w-full font-mono overflow-auto top-0 left-0 absolute"} ref={refHighlighting}>
+          <div className={"w-full font-mono top-0 left-0 absolute"}>
             <pre
-              className={`text-foreground ${tst}`}
-              style={{ paddingLeft: lineNumOffset, height: `${heightPx}px` }}
+              ref={refHighlighting}
+              className={`text-foreground ${tst} w-full overflow-x-hidden`}
+              style={{ marginLeft: lineNumOffset, width: `calc(100% - ${lineNumOffset})`, height: `${heightPx}px` }}
               dangerouslySetInnerHTML={{ __html: highlightHTML(hljs, lang, handleNewLines(content)) }}
             ></pre>
             <span
@@ -196,9 +197,10 @@ export function CodeEditor({
             </span>
           </div>
           <textarea
-            className={`w-full font-mono min-h-[20em] text-[transparent] placeholder-default-400 
-             caret-foreground bg-transparent outline-none relative`}
-            style={{ paddingLeft: lineNumOffset }}
+            className={`w-full font-mono min-h-[20em] text-transparent placeholder-default-400 
+             caret-foreground bg-transparent outline-none relative overflow-x-auto`}
+            style={{ marginLeft: lineNumOffset, width: `calc(100% - ${lineNumOffset})` }}
+            wrap={"off"}
             ref={refTextarea}
             readOnly={disabled}
             placeholder={placeholder}

frontend/pages/DisplayPaste.tsx

@@ -18,12 +18,15 @@ import "../style.css"
 import "../styles/highlight-theme-light.css"
 import "../styles/highlight-theme-dark.css"
 
+const utf8CompatibleEncodings = ["utf-8", "ASCII", "ISO-8859-1"]
+
 export function DisplayPaste() {
   const [pasteFile, setPasteFile] = useState<File | undefined>(undefined)
   const [pasteContentBuffer, setPasteContentBuffer] = useState<ArrayBuffer | undefined>(undefined)
   const [pasteLang, setPasteLang] = useState<string | undefined>(undefined)
 
   const [isFileBinary, setFileBinary] = useState(false)
+  const [guessedEncoding, setGuessedEncoding] = useState<string | null>(null)
   const [isDecrypted, setDecrypted] = useState<"not encrypted" | "encrypted" | "decrypted">("not encrypted")
   const [forceShowBinary, setForceShowBinary] = useState(false)
   const showFileContent = pasteFile !== undefined && (!isFileBinary || forceShowBinary)
@@ -80,7 +83,8 @@ export function DisplayPaste() {
             setFileBinary(true)
           } else {
             const encoding = chardet.detect(respBytes)
-            setFileBinary(encoding !== "utf8" && encoding !== "ASCII")
+            setFileBinary(encoding === null || !utf8CompatibleEncodings.includes(encoding))
+            setGuessedEncoding(encoding)
           }
         } else {
           let key: CryptoKey | undefined
@@ -106,8 +110,9 @@ export function DisplayPaste() {
           setPasteLang(lang || undefined)
 
           const encoding = chardet.detect(decrypted)
-          setFileBinary(encoding !== "utf8" && encoding !== "ASCII")
+          setFileBinary(encoding === null || !utf8CompatibleEncodings.includes(encoding))
           setDecrypted("decrypted")
+          setGuessedEncoding(encoding)
         }
       } finally {
         setIsLoading(false)
@@ -123,14 +128,15 @@ export function DisplayPaste() {
     <div className="absolute top-[50%] left-[50%] translate-[-50%] flex flex-col items-center w-full">
       <div className="text-foreground-600 mb-2">{`${pasteFile?.name} (${formatSize(pasteFile.size)})`}</div>
       <div className="w-fit text-center">
-        This file seems to be binary or not in UTF-8.{" "}
+        This file seems to be binary or not in UTF-8{guessedEncoding ? ` (${guessedEncoding} guessed). ` : ". "}
         <button className="text-primary-500 inline" onClick={() => setForceShowBinary(true)}>
           (Click to show)
         </button>
       </div>
     </div>
   )
 
+  const lineNumOffset = `${Math.floor(Math.log10(pasteLineCount)) + 3}ch`
   const buttonClasses = `rounded-full bg-background hover:bg-default-100 ${tst}`
   return (
     <main
@@ -193,8 +199,9 @@ export function DisplayPaste() {
                       </div>
                       <div className="font-mono relative" role="article">
                         <pre
-                          style={{ paddingLeft: `${Math.floor(Math.log10(pasteLineCount)) + 3}ch` }}
+                          style={{ marginLeft: lineNumOffset, width: `calc(100% - ${lineNumOffset})` }}
                           dangerouslySetInnerHTML={{ __html: highlightedHTML }}
+                          className={"overflow-x-auto"}
                         />
                         <span
                           className={