feat: improve support for highlight and filename

Author: SharzyL

doc/api.md

@@ -12,7 +12,9 @@ The `Content-Type` header is set to the mime type inferred from the filename of
 
 The `Content-Disposition` header is set to `inline` by default. But can be overriden by `?a` query string. If the paste is uploaded with filename, or `<filename>` is set in given request URL, `Content-Disposition` is appended with `filename*` indicating the filename. If the paste is encrypted, the filename is appended with `.encrypted` suffix.
 
-If the paste is encrypted, an `X-Encryption-Scheme` header will be set to the encryption scheme.
+If the paste is encrypted, an `X-PB-Encryption-Scheme` header will be set to the encryption scheme.
+
+If the paste is uploaded with a `lang` parameter, an `X-PB-Highlight-Language` header will be set to the encryption scheme.
 
 - `?a=`: optional. Set `Content-Disposition` to `attachment` if present.
 
@@ -190,7 +192,9 @@ Upload your paste. It accept parameters in form-data:
 
 - `p`: optional. The flag of **private mode**. If specified to any value, the name of the paste is as long as 24 characters. No effect if `n` is used.
 -
-- `encryption-scheme`: optional. The encryption scheme used in the uploaded paste. It will be returned as `X-Encryption-Scheme` header on fetching paste. Note that this is not the encryption scheme that the backend will perform.
+- `encryption-scheme`: optional. The encryption scheme used in the uploaded paste. It will be returned as `X-PB-Encryption-Scheme` header on fetching paste. Note that this is not the encryption scheme that the backend will perform.
+
+- `lang`: optional. The language of the uploaded paste for syntax highlighting. Should be a lower-case name of language listed in [highlight.js documentation](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md). This will be returned as `X-PB-Highlight-Language` header on fetching paste.
 
 `POST` method returns a JSON string by default, if no error occurs, for example:
 

frontend/components/CodeInput.tsx renamed to frontend/components/CodeEditor.tsx

@@ -27,11 +27,19 @@ interface CodeInputProps extends React.HTMLProps<HTMLDivElement> {
 
 interface TabSetting {
   char: "tab" | "space"
-  width: 2 | 4
+  width: 2 | 4 | 8
 }
 
-function formatTabSetting(s: TabSetting) {
-  return `${s.char} ${s.width}`
+function formatTabSetting(s: TabSetting, forHuman: boolean) {
+  if (forHuman) {
+    if (s.char === "tab") {
+      return `Tab: ${s.width}`
+    } else {
+      return `Spaces: ${s.width}`
+    }
+  } else {
+    return `${s.char} ${s.width}`
+  }
 }
 
 function parseTabSetting(s: string): TabSetting | undefined {
@@ -46,8 +54,10 @@ function parseTabSetting(s: string): TabSetting | undefined {
 const tabSettings: TabSetting[] = [
   { char: "tab", width: 2 },
   { char: "tab", width: 4 },
+  { char: "tab", width: 8 },
   { char: "space", width: 2 },
   { char: "space", width: 4 },
+  { char: "space", width: 8 },
 ]
 
 function handleNewLines(str: string): string {
@@ -57,7 +67,7 @@ function handleNewLines(str: string): string {
   return str
 }
 
-export function CodeInput({
+export function CodeEditor({
   content,
   setContent,
   lang,
@@ -73,7 +83,7 @@ export function CodeInput({
   const refTextarea = useRef<HTMLTextAreaElement | null>(null)
 
   const [heightPx, setHeightPx] = useState<number>(0)
-  const prism = usePrism()
+  const hljs = usePrism()
   const [tabSetting, setTabSettings] = useState<TabSetting>({ char: "space", width: 2 })
 
   function syncScroll() {
@@ -122,8 +132,8 @@ export function CodeInput({
   }, [])
 
   function highlightedHTML() {
-    if (prism && lang && prism.listLanguages().includes(lang) && lang !== "plaintext") {
-      const highlighted = prism.highlight(handleNewLines(content), { language: lang })
+    if (hljs && lang && hljs.listLanguages().includes(lang) && lang !== "plaintext") {
+      const highlighted = hljs.highlight(handleNewLines(content), { language: lang })
       return highlighted.value
     } else {
       return escapeHtml(content)
@@ -132,36 +142,40 @@ export function CodeInput({
 
   return (
     <div className={className} {...rest}>
-      <div className={"mb-2 gap-4 flex flex-row" + " "}>
-        <Input type={"text"} label={"File name"} size={"sm"} key={filename} onValueChange={setFilename} />
+      <div className={"mb-2 gap-2 flex flex-row" + " "}>
+        <Input type={"text"} label={"File name"} size={"sm"} value={filename || ""} onValueChange={setFilename} />
         <Autocomplete
           className={"max-w-[10em]"}
           label={"Language"}
           size={"sm"}
-          defaultItems={prism ? prism.listLanguages().map((lang) => ({ key: lang })) : []}
-          selectedKey={lang}
+          defaultItems={hljs ? hljs.listLanguages().map((lang) => ({ key: lang })) : []}
+          // we must not use undefined here to avoid conversion from uncontrolled component to controlled component
+          selectedKey={hljs && lang && hljs.listLanguages().includes(lang) ? lang : ""}
           onSelectionChange={(key) => {
-            setLang((key as string | null) || undefined)
+            setLang((key as string) || undefined) // when key is empty string, convert back to undefined
           }}
         >
           {(language) => <AutocompleteItem key={language.key}>{language.key}</AutocompleteItem>}
         </Autocomplete>
         <Select
           size={"sm"}
-          label={"Tabs"}
+          label={"Indent With"}
           className={"max-w-[10em]"}
-          selectedKeys={[formatTabSetting(tabSetting)]}
+          selectedKeys={[formatTabSetting(tabSetting, false)]}
           onSelectionChange={(s) => {
             setTabSettings(parseTabSetting(s.currentKey as string)!)
           }}
         >
           {tabSettings.map((s) => (
-            <SelectItem key={formatTabSetting(s)}>{formatTabSetting(s)}</SelectItem>
+            <SelectItem key={formatTabSetting(s, false)}>{formatTabSetting(s, true)}</SelectItem>
           ))}
         </Select>
       </div>
       <div className={`w-full bg-default-100 ${tst} rounded-xl p-2`}>
-        <div className={"relative w-full"}>
+        <div
+          className={"relative w-full"}
+          style={{ tabSize: tabSetting.char === "tab" ? tabSetting.width : undefined }}
+        >
           <pre
             className={"w-full font-mono overflow-auto text-foreground top-0 left-0 absolute"}
             ref={refHighlighting}

frontend/components/ErrorModal.tsx

@@ -24,6 +24,7 @@ export function useErrorModal() {
   }
 
   function handleError(defaultTitle: string, error: Error) {
+    console.error(error)
     if (error instanceof ErrorWithTitle) {
       showModal(error.title, error.message)
     } else {

frontend/components/PasteEditor.tsx renamed to frontend/components/PasteInputPanel.tsx

@@ -3,7 +3,7 @@ import React, { useRef, useState, DragEvent } from "react"
 import { formatSize } from "../utils/utils.js"
 import { XIcon } from "./icons.js"
 import { cardOverrides, tst } from "../utils/overrides.js"
-import { CodeInput } from "./CodeInput.js"
+import { CodeEditor } from "./CodeEditor.js"
 
 export type EditKind = "edit" | "file"
 
@@ -21,7 +21,7 @@ interface PasteEditorProps extends CardProps {
   onStateChange: (state: PasteEditState) => void
 }
 
-export function PasteEditor({ isPasteLoading, state, onStateChange, ...rest }: PasteEditorProps) {
+export function PasteInputPanel({ isPasteLoading, state, onStateChange, ...rest }: PasteEditorProps) {
   const fileInput = useRef<HTMLInputElement>(null)
   const [isDragged, setDragged] = useState<boolean>(false)
 
@@ -62,7 +62,7 @@ export function PasteEditor({ isPasteLoading, state, onStateChange, ...rest }: P
         >
           {/*Possibly a bug of chrome, but Tab sometimes has a transient unexpected scrollbar when resizing*/}
           <Tab key={"edit"} title="Edit" className={"overflow-hidden"}>
-            <CodeInput
+            <CodeEditor
               content={state.editContent}
               setContent={(k) => onStateChange({ ...state, editContent: k })}
               lang={state.editHighlightLang}

frontend/pages/DecryptPaste.tsx

@@ -58,7 +58,11 @@ export function DecryptPaste() {
           return
         }
 
-        const scheme: EncryptionScheme = (resp.headers.get("X-Encryption-Scheme") as EncryptionScheme) || "AES-GCM"
+        const scheme: EncryptionScheme | null = resp.headers.get("X-PB-Encryption-Scheme") as EncryptionScheme | null
+        if (scheme === null) {
+          showModal("Error", "No encryption scheme is given by the server")
+          return
+        }
         let key: CryptoKey | undefined
         try {
           key = await decodeKey(scheme, keyString)
@@ -82,10 +86,14 @@ export function DecryptPaste() {
               ) || undefined
             : undefined
 
-          const inferredFilename = filename || (ext && name + ext) || filenameFromDispTrimmed || name
-          setPasteFile(new File([decrypted], inferredFilename))
+          // TODO: highlight with lang
+          const lang = resp.headers.get("X-PB-Highlight-Language")
+
+          const inferredFilename = filename || (ext && name + ext) || filenameFromDispTrimmed
+          setPasteFile(new File([decrypted], inferredFilename || name))
           setPasteContentBuffer(decrypted)
-          const isBinary = isBinaryPath(inferredFilename)
+
+          const isBinary = lang === null && inferredFilename !== undefined && isBinaryPath(inferredFilename)
           setFileBinary(isBinary)
         }
       } finally {

frontend/pages/PasteBin.tsx

@@ -9,7 +9,7 @@ import { DarkModeToggle, useDarkModeSelection } from "../components/DarkModeTogg
 import { useErrorModal } from "../components/ErrorModal.js"
 import { PanelSettingsPanel, PasteSetting } from "../components/PasteSettingPanel.js"
 import { UploadedPanel } from "../components/UploadedPanel.js"
-import { PasteEditor, PasteEditState } from "../components/PasteEditor.js"
+import { PasteInputPanel, PasteEditState } from "../components/PasteInputPanel.js"
 
 import {
   verifyExpiration,
@@ -29,6 +29,7 @@ export function PasteBin() {
     editKind: "edit",
     editContent: "",
     file: null,
+    editHighlightLang: "plaintext",
   })
 
   const [pasteSetting, setPasteSetting] = useState<PasteSetting>({
@@ -55,6 +56,7 @@ export function PasteBin() {
   useEffect(() => {
     // TODO: do not fetch paste for a large file paste
     const pathname = location.pathname
+    // const pathname = new URL("http://localhost:8787/ds2W:ShNkSKdf5rZypdcJEcAdFmw3").pathname
     const { name, password, filename, ext } = parsePath(pathname)
 
     if (password !== undefined && pasteSetting.manageUrl === "") {
@@ -77,18 +79,22 @@ export function PasteBin() {
           }
           const contentType = resp.headers.get("Content-Type")
           const contentDisp = resp.headers.get("Content-Disposition")
+          const contentLang = resp.headers.get("X-PB-Highlight-Language")
 
-          if (contentType && contentType.startsWith("text/")) {
+          let pasteFilename = filename
+          if (pasteFilename === undefined && contentDisp !== null) {
+            pasteFilename = parseFilenameFromContentDisposition(contentDisp)
+          }
+
+          if (contentLang || (contentType && contentType.startsWith("text/"))) {
             setEditorState({
               editKind: "edit",
               editContent: await resp.text(),
               file: null,
+              editHighlightLang: contentLang || undefined,
+              editFilename: pasteFilename,
             })
           } else {
-            let pasteFilename = filename
-            if (pasteFilename === undefined && contentDisp !== null) {
-              pasteFilename = parseFilenameFromContentDisposition(contentDisp)
-            }
             setEditorState({
               editKind: "file",
               editContent: "",
@@ -221,7 +227,7 @@ export function PasteBin() {
     >
       <div className="grow w-full max-w-[64rem]">
         {info}
-        <PasteEditor
+        <PasteInputPanel
           isPasteLoading={isInitPasteLoading}
           state={editorState}
           onStateChange={setEditorState}

frontend/test/decrypt.spec.tsx

@@ -18,7 +18,9 @@ describe("decrypt page", async () => {
   const encrypted = await encrypt(scheme, key, content)
   const server = setupServer(
     http.get(`${APIUrl}/abcd`, () => {
-      return HttpResponse.arrayBuffer(encrypted.buffer)
+      return HttpResponse.arrayBuffer(encrypted.buffer, {
+        headers: { "X-PB-Encryption-Scheme": "AES-GCM" },
+      })
     }),
   )
 

frontend/utils/uploader.ts

@@ -1,5 +1,5 @@
 import type { PasteSetting } from "../components/PasteSettingPanel.js"
-import type { PasteEditState } from "../components/PasteEditor.js"
+import type { PasteEditState } from "../components/PasteInputPanel.js"
 import { APIUrl, ErrorWithTitle } from "./utils.js"
 import type { PasteResponse } from "../../shared/interfaces.js"
 import { encodeKey, encrypt, EncryptionScheme, genKey } from "./encryption.js"
@@ -22,7 +22,7 @@ export async function uploadPaste(
   onEncryptionKeyChange: (k: string | undefined) => void, // we only generate key on upload, so need a callback of key generation
   onProgress?: (progress: number | undefined) => void,
 ): Promise<PasteResponse> {
-  async function constructContent(): Promise<string | File> {
+  async function constructContent(): Promise<File> {
     if (editorState.editKind === "file") {
       if (editorState.file === null) {
         throw new ErrorWithTitle("Error on Preparing Upload", "No file selected")
@@ -43,9 +43,9 @@ export async function uploadPaste(
       if (pasteSetting.doEncrypt) {
         const { key, ciphertext } = await genAndEncrypt(encryptionScheme, editorState.editContent)
         onEncryptionKeyChange(key)
-        return new File([ciphertext], "")
+        return new File([ciphertext], editorState.editFilename || "")
       } else {
-        return editorState.editContent
+        return new File([editorState.editContent], editorState.editFilename || "")
       }
     }
   }
@@ -57,14 +57,15 @@ export async function uploadPaste(
     password: pasteSetting.password.length ? pasteSetting.password : undefined,
     expire: pasteSetting.expiration,
     name: pasteSetting.uploadKind === "custom" ? pasteSetting.name : undefined,
+    highlightLanguage: editorState.editHighlightLang,
     encryptionScheme: pasteSetting.doEncrypt ? encryptionScheme : undefined,
     manageUrl: pasteSetting.manageUrl,
   }
 
-  const contentLength = typeof options.content === "string" ? options.content.length : options.content.size
+  const contentLength = options.content.size
 
   try {
-    if (contentLength < 5 * 1024 * 1024 || typeof options.content === "string") {
+    if (contentLength < 5 * 1024 * 1024) {
       return await uploadNormal(APIUrl, options)
     } else {
       if (onProgress) onProgress(0)

package.json

@@ -10,6 +10,7 @@
     "build:frontend": "vite build frontend --outDir ../dist/frontend --emptyOutDir",
     "build:frontend:dev": "vite build frontend --mode development --outDir ../dist/frontend --emptyOutDir",
     "dev:frontend": "vite serve frontend --mode development",
+    "preview:frontend": "vite preview --outDir dist/frontend",
     "dev": "wrangler dev --var DEPLOY_URL:http://localhost:8787 --port 8787",
     "gentypes": "wrangler types --strict-vars false",
     "build": "wrangler deploy --dry-run --outdir=dist",

shared/interfaces.ts

@@ -17,6 +17,7 @@ export type MetaResponse = {
   sizeBytes: number
   location: PasteLocation
   filename?: string
+  highlightLanguage?: string
   encryptionScheme?: string
 }