feat: change encoding on text file (#110)

close AlistGo/alist#4131

---------

Co-authored-by: Andy Hsu <i@nn.ci>

src/components/EncodingSelect.tsx

@@ -0,0 +1,73 @@
+import { Box } from "@hope-ui/solid"
+import { SelectWrapper } from "./Base"
+
+export function EncodingSelect(props: {
+  encoding: string
+  setEncoding: (encoding: string) => void
+}) {
+  const encodingLabels = [
+    "utf-8",
+    "gbk",
+    "gb18030",
+    "ibm866",
+    "iso-8859-2",
+    "iso-8859-3",
+    "iso-8859-4",
+    "iso-8859-5",
+    "iso-8859-6",
+    "iso-8859-7",
+    "iso-8859-8",
+    "iso-8859-8i",
+    "iso-8859-10",
+    "iso-8859-13",
+    "iso-8859-14",
+    "iso-8859-15",
+    "iso-8859-16",
+    "koi8-r",
+    "koi8-u",
+    "macintosh",
+    "windows-874",
+    "windows-1250",
+    "windows-1251",
+    "windows-1252",
+    "windows-1253",
+    "windows-1254",
+    "windows-1255",
+    "windows-1256",
+    "windows-1257",
+    "windows-1258",
+    "x-mac-cyrillic",
+    "big5",
+    "euc-jp",
+    "iso-2022-jp",
+    "shift_jis",
+    "euc-kr",
+    "iso-2022-kr",
+    "utf-16be",
+    "utf-16le",
+    "x-user-defined",
+    "iso-2022-cn",
+  ]
+  return (
+    <Box
+      pos="absolute"
+      right={0}
+      top={0}
+      w="$36"
+      opacity={0.15}
+      _hover={{
+        opacity: 1,
+      }}
+      zIndex={1}
+    >
+      <SelectWrapper
+        options={encodingLabels.map((label) => ({
+          label: label.toLocaleUpperCase(),
+          value: label,
+        }))}
+        value={props.encoding}
+        onChange={(v) => props.setEncoding(v)}
+      />
+    </Box>
+  )
+}

src/components/Markdown.tsx

@@ -7,20 +7,59 @@ import reMarkMath from "remark-math"
 import rehypeKatex from "rehype-katex"
 import "./markdown.css"
 import "./katex.css"
-import { onMount } from "solid-js"
+import {
+  Show,
+  createEffect,
+  createMemo,
+  createSignal,
+  on,
+  onMount,
+} from "solid-js"
 import { clsx } from "clsx"
+import { Box } from "@hope-ui/solid"
+import { useParseText } from "~/hooks"
+import { EncodingSelect } from "."
 
-export const Markdown = (props: { children?: string; class?: string }) => {
+export const Markdown = (props: {
+  children?: string | ArrayBuffer
+  class?: string
+  ext?: string
+}) => {
   onMount(() => {
     hljs.highlightAll()
     window.onMDRender && window.onMDRender()
   })
+  const [encoding, setEncoding] = createSignal<string>("utf-8")
+  const [show, setShow] = createSignal(true)
+  const { isString, text } = useParseText(props.children)
+  const convertToMd = (content: string) => {
+    if (!props.ext || props.ext === "md") {
+      return "```" + props.ext + "\n" + content + "\n```"
+    }
+    return content
+  }
+  const md = createMemo(() => convertToMd(text(encoding())))
+  createEffect(
+    on(md, () => {
+      setShow(false)
+      setTimeout(() => {
+        setShow(true)
+      })
+    }),
+  )
   return (
-    <SolidMarkdown
-      class={clsx("markdown-body", props.class)}
-      remarkPlugins={[remarkGfm, reMarkMath]}
-      rehypePlugins={[rehypeRaw, rehypeKatex]}
-      children={props.children}
-    />
+    <Box class="markdown" pos="relative" w="$full">
+      <Show when={show()}>
+        <SolidMarkdown
+          class={clsx("markdown-body", props.class)}
+          remarkPlugins={[remarkGfm, reMarkMath]}
+          rehypePlugins={[rehypeRaw, rehypeKatex]}
+          children={md()}
+        />
+      </Show>
+      <Show when={!isString}>
+        <EncodingSelect encoding={encoding()} setEncoding={setEncoding} />
+      </Show>
+    </Box>
   )
 }

src/components/MonacoEditor.tsx

@@ -50,6 +50,9 @@ export const MonacoEditor = (props: MonacoEditorProps) => {
       props.onChange?.(monacoEditor.getValue())
     })
   })
+  createEffect(() => {
+    monacoEditor.setValue(props.value)
+  })
 
   createEffect(() => {
     monaco.editor.setTheme(props.theme)

src/components/index.ts

@@ -12,3 +12,4 @@ export * from "./ModalTwoInput"
 export * from "./Base"
 export * from "./Paginator"
 export * from "./icons"
+export * from "./EncodingSelect"

src/hooks/useUtil.ts

@@ -2,7 +2,7 @@ import copy from "copy-to-clipboard"
 import { createResource } from "solid-js"
 import { getHideFiles, objStore } from "~/store"
 import { Obj } from "~/types"
-import { fetchText, notify, pathJoin } from "~/utils"
+import { decodeText, fetchText, notify, pathJoin } from "~/utils"
 import { useT, useLink, useRouter } from "."
 
 export const useUtil = () => {
@@ -25,10 +25,27 @@ export const useUtil = () => {
   }
 }
 
-export const useFetchText = () => {
+export function useFetchText() {
   const { proxyLink } = useLink()
   const fetchContent = async () => {
     return fetchText(proxyLink(objStore.obj, true))
   }
   return createResource("", fetchContent)
 }
+
+export function useParseText(data?: string | ArrayBuffer) {
+  const isString = typeof data === "string"
+  const text = (encoding = "utf-8") => {
+    if (!data) {
+      return ""
+    }
+    if (isString) {
+      return data as string
+    }
+    return decodeText(data as ArrayBuffer, encoding)
+  }
+  return {
+    isString,
+    text,
+  }
+}

src/pages/home/Readme.tsx

@@ -37,7 +37,7 @@ export const Readme = () => {
   )
   const fetchContent = async (readme: string) => {
     let res = {
-      content: readme,
+      content: readme as string | ArrayBuffer,
     }
     if (/^https?:\/\//g.test(readme)) {
       res = await fetchText(readme)

src/pages/home/previews/html.tsx

@@ -1,20 +1,33 @@
 import { hope } from "@hope-ui/solid"
-import { BoxWithFullScreen, MaybeLoading } from "~/components"
-import { useFetchText } from "~/hooks"
+import { Show, createSignal } from "solid-js"
+import { BoxWithFullScreen, EncodingSelect, MaybeLoading } from "~/components"
+import { useFetchText, useParseText } from "~/hooks"
+
+function Html(props: { children?: string | ArrayBuffer }) {
+  const [encoding, setEncoding] = createSignal<string>("utf-8")
+  const { isString, text } = useParseText(props.children)
+  return (
+    <BoxWithFullScreen w="$full" h="70vh" pos="relative">
+      <hope.iframe
+        w="$full"
+        h="$full"
+        rounded="$lg"
+        shadow="$md"
+        srcdoc={text(encoding())}
+      />
+      <Show when={!isString}>
+        <EncodingSelect encoding={encoding()} setEncoding={setEncoding} />
+      </Show>
+    </BoxWithFullScreen>
+  )
+}
 
 const HtmlPreview = () => {
   const [content] = useFetchText()
+
   return (
     <MaybeLoading loading={content.loading}>
-      <BoxWithFullScreen w="$full" h="70vh">
-        <hope.iframe
-          w="$full"
-          h="$full"
-          rounded="$lg"
-          shadow="$md"
-          srcdoc={content()?.content}
-        />
-      </BoxWithFullScreen>
+      <Html>{content()?.content}</Html>
     </MaybeLoading>
   )
 }

src/pages/home/previews/markdown.tsx

@@ -5,15 +5,9 @@ import { ext } from "~/utils"
 
 const MdPreview = () => {
   const [content] = useFetchText()
-  const convertToMd = (content: string) => {
-    if (!objStore.obj.name.endsWith(".md")) {
-      return "```" + ext(objStore.obj.name) + "\n" + content + "\n```"
-    }
-    return content
-  }
   return (
     <MaybeLoading loading={content.loading}>
-      <Markdown children={convertToMd(content()?.content ?? "")} />
+      <Markdown children={content()?.content} ext={ext(objStore.obj.name)} />
     </MaybeLoading>
   )
 }

src/pages/home/previews/markdown_with_word_wrap.tsx

@@ -1,22 +1,11 @@
 import { Markdown, MaybeLoading } from "~/components"
 import { useFetchText } from "~/hooks"
-import { objStore } from "~/store"
-import { ext } from "~/utils"
 
 const MdPreview = () => {
   const [content] = useFetchText()
-  const convertToMd = (content: string) => {
-    if (!objStore.obj.name.endsWith(".md")) {
-      return "```" + ext(objStore.obj.name) + "\n" + content + "\n```"
-    }
-    return content
-  }
   return (
     <MaybeLoading loading={content.loading}>
-      <Markdown
-        class="word-wrap"
-        children={convertToMd(content()?.content ?? "")}
-      />
+      <Markdown class="word-wrap" children={content()?.content} />
     </MaybeLoading>
   )
 }