From 749e8ba996eaa5aa1cfa39b80da075da14cf471d Mon Sep 17 00:00:00 2001
From: Mist <mist.zzh@gmail.com>
Date: Sat, 24 Feb 2024 19:01:39 +0800
Subject: [PATCH] [Feat] support custom font-family for watermark and code
 (#21)

* [Feat] support custom font-family for watermark and code

* [Update] README
---
 README.md                                    |  6 ++++--
 lua/codesnap/static.lua                      |  2 ++
 snap-client/src/app.tsx                      |  2 ++
 snap-client/src/components/editor/editor.tsx | 13 ++++++++++++-
 snap-client/src/components/editor/frame.tsx  | 12 ++++++++++--
 snap-client/src/hooks/use-config.ts          |  2 ++
 snap-client/src/input.css                    |  4 ----
 snap-server/src/event_handler/config.rs      |  2 ++
 8 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index a7e7172..ebb3d37 100644
--- a/README.md
+++ b/README.md
@@ -59,8 +59,10 @@ There is a default config:
 {
     mac_window_bar = true,-- (Optional) MacOS style title bar switch
     opacity = true, -- (Optional) The code snap has some opacity by default, set it to false for 100% opacity 
-    watermark = "CodeSnap.nvim" -- (Optional) you can custom your own watermark, but if you don't like it, just set it to ""
-    preview_title = "CodeSnap.nvim" -- (Optional) preview page title
+    watermark = "CodeSnap.nvim", -- (Optional) you can custom your own watermark, but if you don't like it, just set it to ""
+    preview_title = "CodeSnap.nvim", -- (Optional) preview page title
+    editor_font_family = "CaskaydiaCove Nerd Font", -- (Optional) preview code font family
+    watermark_font_family = "Pacifico", -- (Optional) watermark font family
 }
 ```
 
diff --git a/lua/codesnap/static.lua b/lua/codesnap/static.lua
index 4901a45..72b53de 100644
--- a/lua/codesnap/static.lua
+++ b/lua/codesnap/static.lua
@@ -6,6 +6,8 @@ return {
     opacity = true,
     watermark = "CodeSnap.nvim",
     preview_title = "CodeSnap.nvim",
+    editor_font_family = "CaskaydiaCove Nerd Font",
+    watermark_font_family = "Pacifico",
     auto_load = true,
   },
   cwd = path_utils.back(path_utils.back(debug.getinfo(1, "S").source:sub(2):match("(.*[/\\])"))),
diff --git a/snap-client/src/app.tsx b/snap-client/src/app.tsx
index 828ec64..2c49f3d 100644
--- a/snap-client/src/app.tsx
+++ b/snap-client/src/app.tsx
@@ -84,9 +84,11 @@ function App() {
         <div id="frame" className="rounded-xl overflow-hidden">
           <Frame
             ref={frameRef}
+            watermarkFontFamily={config?.watermark_font_family}
             watermark={config?.watermark ?? WATER_MARK_PLACEHOLDER}
           >
             <Editor
+              codeFontFamily={config?.editor_font_family}
               language={event?.code?.language}
               macStyleTitleBar={config?.mac_window_bar}
             >
diff --git a/snap-client/src/components/editor/editor.tsx b/snap-client/src/components/editor/editor.tsx
index 57fc61b..1e5b15b 100644
--- a/snap-client/src/components/editor/editor.tsx
+++ b/snap-client/src/components/editor/editor.tsx
@@ -5,16 +5,25 @@ export interface EditorProps {
   macStyleTitleBar?: boolean;
   language?: string;
   opacity?: boolean;
+  codeFontFamily?: string;
   children: string;
 }
 
+const DEFAULT_CODE_FONT_FAMILY = "CaskaydiaCove Nerd Font";
+const LSP_LANGUAGE_NAME_MAP: Record<string, string> = {
+  typescriptreact: "tsx",
+  javascriptreact: "jsx",
+};
+
 const highlightLanguage = (code: string, language?: string) => {
   if (!language) {
     return hljs.highlightAuto(code).value;
   }
 
   try {
-    return hljs.highlight(code, { language }).value;
+    return hljs.highlight(code, {
+      language: LSP_LANGUAGE_NAME_MAP[language] ?? language,
+    }).value;
   } catch {
     return hljs.highlightAuto(code).value;
   }
@@ -23,6 +32,7 @@ const highlightLanguage = (code: string, language?: string) => {
 export const Editor = ({
   children,
   language,
+  codeFontFamily,
   opacity = true,
   macStyleTitleBar = true,
 }: EditorProps) => (
@@ -33,6 +43,7 @@ export const Editor = ({
     <pre className="mt-4">
       <code
         className="code"
+        style={{ fontFamily: codeFontFamily ?? DEFAULT_CODE_FONT_FAMILY }}
         dangerouslySetInnerHTML={{
           __html: highlightLanguage(children, language),
         }}
diff --git a/snap-client/src/components/editor/frame.tsx b/snap-client/src/components/editor/frame.tsx
index 7f3a6ec..512f807 100644
--- a/snap-client/src/components/editor/frame.tsx
+++ b/snap-client/src/components/editor/frame.tsx
@@ -1,15 +1,23 @@
 import { forwardRef, PropsWithChildren } from "react";
 
+const DEFAULT_WATERMARK_FONT_FAMILY = "Pacifico";
+
 export interface FrameProps {
   watermark?: string;
+  watermarkFontFamily?: string;
 }
 
 export const Frame = forwardRef<HTMLDivElement, PropsWithChildren<FrameProps>>(
-  ({ children, watermark }, ref) => (
+  ({ children, watermark, watermarkFontFamily }, ref) => (
     <div ref={ref} className="bg-relay min-w-[800px] p-20">
       {children}
       {watermark && (
-        <p className="pacifico-regular text-xl opacity-50 font-bold text-white text-center w-full mt-14">
+        <p
+          style={{
+            fontFamily: watermarkFontFamily ?? DEFAULT_WATERMARK_FONT_FAMILY,
+          }}
+          className="text-xl opacity-50 font-bold text-white text-center w-full mt-14"
+        >
           {watermark}
         </p>
       )}
diff --git a/snap-client/src/hooks/use-config.ts b/snap-client/src/hooks/use-config.ts
index accb8c8..d544522 100644
--- a/snap-client/src/hooks/use-config.ts
+++ b/snap-client/src/hooks/use-config.ts
@@ -6,6 +6,8 @@ export interface Config {
   watermark: string;
   auto_load: boolean;
   preview_title: string;
+  watermark_font_family: string;
+  editor_font_family: string;
 }
 
 const CONFIG_STORAGE_KEY = "CONFIG_STORAGE_KEY";
diff --git a/snap-client/src/input.css b/snap-client/src/input.css
index a704ceb..79cfbf5 100644
--- a/snap-client/src/input.css
+++ b/snap-client/src/input.css
@@ -22,10 +22,6 @@ html, body, #root {
     box-shadow: 0 20px 68px rgba(0, 0, 0, 0.55);
   }
 
-  .code * {
-    font-family: 'CaskaydiaCove Nerd Font';
-  }
-
   .pacifico-regular {
     font-family: "Pacifico", cursive;
     font-weight: 400;
diff --git a/snap-server/src/event_handler/config.rs b/snap-server/src/event_handler/config.rs
index 6e5c0fe..cbfbbf2 100644
--- a/snap-server/src/event_handler/config.rs
+++ b/snap-server/src/event_handler/config.rs
@@ -7,6 +7,8 @@ pub struct Config {
     watermark: Option<String>,
     auto_load: bool,
     preview_title: String,
+    watermark_font_family: String,
+    editor_font_family: String,
 }
 
 impl From<&str> for Config {