feat: refine editor layout and paste styling

Author: 0disoft

src/app.css

@@ -1,12 +1,16 @@
 :root {
   color-scheme: dark;
   font-family:
-    Inter,
+    Pretendard,
+    "Noto Sans KR",
+    "Noto Sans CJK KR",
+    SUIT,
     ui-sans-serif,
     system-ui,
     -apple-system,
     BlinkMacSystemFont,
     "Segoe UI",
+    "Malgun Gothic",
     sans-serif;
   background: oklch(19.13% 0 0);
   color: oklch(96.01% 0.018 89.72);

src/lib/dc/font-stacks.ts

@@ -36,18 +36,13 @@ const codeSignals = new Set([
 ]);
 
 export const proseFallbackFonts = [
-  "Malgun Gothic",
-  "맑은 고딕",
-  "Apple SD Gothic Neo",
-  "AppleGothic",
   "Pretendard",
+  "Noto Sans KR",
+  "Noto Sans CJK KR",
   "SUIT",
   "Wanted Sans",
   "Spoqa Han Sans Neo",
   "Spoqa Han Sans",
-  "Noto Sans CJK KR",
-  "Noto Sans KR",
-  "Noto Sans",
   "Source Han Sans K",
   "Source Han Sans KR",
   "본고딕",
@@ -62,7 +57,12 @@ export const proseFallbackFonts = [
   "IBM Plex Sans KR",
   "Gmarket Sans",
   "Arial Unicode MS",
+  "Apple SD Gothic Neo",
+  "AppleGothic",
   "Segoe UI",
+  "Malgun Gothic",
+  "맑은 고딕",
+  "Noto Sans",
   "Arial",
   "Helvetica Neue",
   "Helvetica",
@@ -88,7 +88,10 @@ export const serifFallbackFonts = [
 ] as const;
 
 export const codeFallbackFonts = [
-  "Consolas",
+  "Cascadia Mono",
+  "Cascadia Code",
+  "Cascadia Mono PL",
+  "Cascadia Code PL",
   "D2Coding",
   "D2Coding ligature",
   "D2CodingLigature",
@@ -102,10 +105,6 @@ export const codeFallbackFonts = [
   "Source Han Mono KR",
   "Sarasa Mono K",
   "Sarasa Gothic K",
-  "Cascadia Mono",
-  "Cascadia Code",
-  "Cascadia Mono PL",
-  "Cascadia Code PL",
   "JetBrains Mono",
   "Fira Code",
   "Fira Mono",
@@ -121,6 +120,7 @@ export const codeFallbackFonts = [
   "Liberation Mono",
   "Ubuntu Mono",
   "Bitstream Vera Sans Mono",
+  "Consolas",
   "SFMono-Regular",
   "Menlo",
   "Monaco",
@@ -199,23 +199,21 @@ export function buildFontStack(
   primaryFonts: readonly string[],
   mode: "prose" | "code" = "prose",
 ): string {
+  const normalizedPrimaryFonts = primaryFonts.map(normalizeFontName).filter(Boolean);
+
   return appendFallbackFonts(
-    primaryFonts.map(normalizeFontName).filter(Boolean),
-    fallbackFontsFor(primaryFonts, mode),
+    mode === "code" ? [] : normalizedPrimaryFonts,
+    fallbackFontsFor(normalizedPrimaryFonts, mode),
   );
 }
 
-export function safeProseFontFamily(value: string): string {
+export function safeProseFontFamily(value = ""): string {
   return buildFontStack(parseFontFamily(value), "prose");
 }
 
 export function safeCodeFontFamily(value = ""): string {
   return buildFontStack(parseFontFamily(value), "code");
 }
 
-export const fontFamilyOptions = [
-  { label: "맑은 고딕", value: buildFontStack(["Malgun Gothic"]) },
-  { label: "고운 본문", value: buildFontStack(["Georgia", "Times New Roman"]) },
-  { label: "둥근 산스", value: buildFontStack(["Pretendard", "Inter"]) },
-  { label: "코드", value: buildFontStack(["Consolas"], "code") },
-] as const;
+export const defaultProseFontFamily = safeProseFontFamily();
+export const defaultCodeFontFamily = safeCodeFontFamily();

src/lib/dc/render-dc-html.ts

@@ -76,10 +76,11 @@ export function renderDcHtml(input: DcRenderInput): string {
   const foreground = sanitizeColor(input.foreground, fallbackForeground);
   const filename = input.filename?.trim();
   const hasDecorations = input.lineDecorations?.some(Boolean) ?? false;
+  const codeFontFamily = safeCodeFontFamily();
   const preStyle = joinStyle({
     "background-color": input.showBackground ? background : undefined,
     color: foreground,
-    "font-family": safeCodeFontFamily(),
+    "font-family": codeFontFamily,
     "font-size": input.fontSize ?? "14px",
     "line-height": "1.58",
     margin: filename ? 0 : "0 0 16px",
@@ -89,6 +90,17 @@ export function renderDcHtml(input: DcRenderInput): string {
     "overflow-wrap": "anywhere",
     "tab-size": 4,
   });
+  const codeStyle = joinStyle({
+    background: "none",
+    color: "inherit",
+    "font-family": codeFontFamily,
+    "font-size": "inherit",
+    "line-height": "inherit",
+    "white-space": "inherit",
+    "word-break": "inherit",
+    "overflow-wrap": "inherit",
+    "tab-size": 4,
+  });
 
   const lineNumberWidth = `${Math.max(2, String(input.lines.length).length)}ch`;
   const renderedLines = input.lines.map((line, index) => {
@@ -128,7 +140,7 @@ export function renderDcHtml(input: DcRenderInput): string {
     return `<span style="${lineStyle}">${content}</span>`;
   });
 
-  const code = `<pre style="${preStyle}"><code>${renderedLines.join("\n")}</code></pre>`;
+  const code = `<pre style="${preStyle}"><code style="${codeStyle}">${renderedLines.join("\n")}</code></pre>`;
 
   if (!filename) {
     return code;
@@ -144,7 +156,7 @@ export function renderDcHtml(input: DcRenderInput): string {
     display: "block",
     "background-color": "oklch(20.16% 0.018 257.49)",
     color: "oklch(89.72% 0.019 247.91)",
-    "font-family": safeCodeFontFamily(),
+    "font-family": codeFontFamily,
     "font-size": "12px",
     "font-weight": 800,
     "line-height": 1.2,