feat: refine code block editing and paste output

Author: 0disoft

src/lib/dc/export-document.ts

@@ -17,6 +17,7 @@ import { normalizeTutorialStepNumber } from "$lib/editor/tutorial-block";
 import {
   defaultProseFontFamily,
   safeDcCodeFontFamily as safeCodeFontFamily,
+  safeDcInlineCodeFontFamily as safeInlineCodeFontFamily,
   safeDcProseFontFamily as safeProseFontFamily,
 } from "./font-stacks";
 import { normalizeCodeFilename } from "$lib/highlighter/code-block-metadata";
@@ -673,7 +674,7 @@ function applyMarks(
       const style = joinStyle({
         "background-color": context.inlineCodeBackground ?? palette.inlineCodeBackground,
         color: context.inlineCodeText ?? palette.inlineCodeText,
-        "font-family": safeCodeFontFamily(),
+        "font-family": safeInlineCodeFontFamily(),
         "font-size": "0.92em",
         padding: "1px 4px",
         "border-radius": "4px",

src/lib/dc/font-stacks.ts

@@ -92,6 +92,24 @@ export const codeFallbackFonts = [
   "monospace",
 ] as const;
 
+export const inlineCodeFallbackFonts = [
+  "Pretendard",
+  "Cascadia Mono",
+  "D2Coding",
+  "나눔고딕코딩",
+  "Noto Sans Mono CJK",
+  "JetBrains Mono",
+  "Fira Code",
+  "Hack",
+  "Source Code Pro",
+  "IBM Plex Mono",
+  "Roboto Mono",
+  "Consolas",
+  "Menlo",
+  "Monaco",
+  "monospace",
+] as const;
+
 function normalizeFontName(value: string): string {
   return value
     .trim()
@@ -186,6 +204,10 @@ export function safeCodeFontFamily(value = ""): string {
   return buildFontStack(parseFontFamily(value), "code");
 }
 
+export function safeInlineCodeFontFamily(): string {
+  return appendFallbackFonts([], inlineCodeFallbackFonts);
+}
+
 export function safeDcProseFontFamily(value = ""): string {
   const primaryFonts = parseFontFamily(value);
   const selectedFonts = primaryFonts.length > 0 ? primaryFonts : ["Malgun Gothic"];
@@ -197,5 +219,9 @@ export function safeDcCodeFontFamily(): string {
   return appendFallbackFonts([], ["Cascadia Mono", "Pretendard", "D2Coding", "monospace"]);
 }
 
+export function safeDcInlineCodeFontFamily(): string {
+  return appendFallbackFonts([], ["Pretendard", "Cascadia Mono", "D2Coding", "monospace"]);
+}
+
 export const defaultProseFontFamily = safeProseFontFamily();
 export const defaultCodeFontFamily = safeCodeFontFamily();

src/lib/editor/code-block-highlight.ts

@@ -1,6 +1,7 @@
 import { Plugin, PluginKey, type EditorState } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import { isSupportedLanguage, type DcLanguageId } from "$lib/highlighter/catalog";
+import { highlightedLineIndexes } from "$lib/highlighter/highlight-lines";
 
 export type EditorCodeTokenKind = "comment" | "string" | "keyword" | "number" | "function";
 
@@ -10,6 +11,21 @@ export type EditorCodeToken = {
   kind: EditorCodeTokenKind;
 };
 
+export type EditorCodeLineDecorationKind = "highlight" | "addition" | "deletion";
+
+export type EditorCodeLineDecoration = {
+  from: number;
+  to: number;
+  kind: EditorCodeLineDecorationKind;
+  empty?: boolean;
+};
+
+type CodeLineDecorationAttrs = {
+  highlightLines?: unknown;
+  additionLines?: unknown;
+  deletionLines?: unknown;
+};
+
 const keywordSets: Partial<Record<DcLanguageId, readonly string[]>> = {
   c: [
     "auto",
@@ -355,6 +371,35 @@ const keywordSets: Partial<Record<DcLanguageId, readonly string[]>> = {
   json: ["false", "null", "true"],
   yaml: ["false", "null", "off", "on", "true", "yes", "no"],
   toml: ["false", "true"],
+  mermaid: [
+    "activate",
+    "alt",
+    "and",
+    "class",
+    "classDef",
+    "click",
+    "deactivate",
+    "else",
+    "end",
+    "erDiagram",
+    "flowchart",
+    "gantt",
+    "gitGraph",
+    "graph",
+    "journey",
+    "loop",
+    "mindmap",
+    "note",
+    "opt",
+    "participant",
+    "pie",
+    "quadrantChart",
+    "sequenceDiagram",
+    "stateDiagram",
+    "stateDiagram-v2",
+    "subgraph",
+    "timeline",
+  ],
   sql: [
     "add",
     "alter",
@@ -541,6 +586,10 @@ function lineCommentPrefixes(language: DcLanguageId): readonly string[] {
     return ["--"];
   }
 
+  if (language === "mermaid") {
+    return ["%%"];
+  }
+
   if (cFamilyLanguages.has(language)) {
     return ["//"];
   }
@@ -680,6 +729,38 @@ function scanRegexTokens(
   }
 }
 
+function scanMarkdownTokens(
+  line: string,
+  lineOffset: number,
+  protectedRanges: readonly ProtectedRange[],
+  tokens: EditorCodeToken[],
+): void {
+  scanRegexTokens(
+    line,
+    lineOffset,
+    protectedRanges,
+    /^\s{0,3}#{1,6}(?=\s|$)|^\s{0,3}(?:[-*+]|\d+\.)\s|^\s{0,3}>+\s?/g,
+    "keyword",
+    tokens,
+  );
+  scanRegexTokens(
+    line,
+    lineOffset,
+    protectedRanges,
+    /```+[^`]*|~~~+[^~]*/g,
+    "keyword",
+    tokens,
+  );
+  scanRegexTokens(
+    line,
+    lineOffset,
+    protectedRanges,
+    /\[[^\]]+]\([^)]+\)/g,
+    "string",
+    tokens,
+  );
+}
+
 function scanFunctionTokens(
   line: string,
   lineOffset: number,
@@ -722,6 +803,10 @@ export function highlightCodeTokens(code: string, language: unknown): EditorCode
     const protectedRanges: ProtectedRange[] = [];
     scanProtectedTokens(line, offset, normalizedLanguage, tokens, protectedRanges);
 
+    if (normalizedLanguage === "markdown") {
+      scanMarkdownTokens(line, offset, protectedRanges, tokens);
+    }
+
     const keywordRegex = keywordRegexFor(normalizedLanguage);
     if (keywordRegex) {
       scanRegexTokens(line, offset, protectedRanges, keywordRegex, "keyword", tokens);
@@ -745,6 +830,53 @@ export function highlightCodeTokens(code: string, language: unknown): EditorCode
   return cloneTokens(sortedTokens);
 }
 
+export function codeLineDecorations(
+  code: string,
+  attrs: CodeLineDecorationAttrs,
+): EditorCodeLineDecoration[] {
+  const lines = code.split("\n");
+  const highlightIndexes = highlightedLineIndexes(attrs.highlightLines, lines.length);
+  const additionIndexes = highlightedLineIndexes(attrs.additionLines, lines.length);
+  const deletionIndexes = highlightedLineIndexes(attrs.deletionLines, lines.length);
+
+  if (highlightIndexes.size === 0 && additionIndexes.size === 0 && deletionIndexes.size === 0) {
+    return [];
+  }
+
+  const decorations: EditorCodeLineDecoration[] = [];
+  let offset = 0;
+
+  lines.forEach((line, index) => {
+    const kind: EditorCodeLineDecorationKind | undefined = deletionIndexes.has(index)
+      ? "deletion"
+      : additionIndexes.has(index)
+        ? "addition"
+        : highlightIndexes.has(index)
+          ? "highlight"
+          : undefined;
+
+    if (kind) {
+      const lineEnd = offset + line.length;
+      decorations.push(
+        lineEnd > offset
+          ? { from: offset, to: lineEnd, kind }
+          : { from: offset, to: offset, kind, empty: true },
+      );
+    }
+
+    offset += line.length + 1;
+  });
+
+  return decorations;
+}
+
+function codeLineDecorationElement(kind: EditorCodeLineDecorationKind): HTMLElement {
+  const marker = document.createElement("span");
+  marker.className = `dc-code-line dc-code-line-${kind}`;
+  marker.setAttribute("aria-hidden", "true");
+  return marker;
+}
+
 function codeBlockDecorations(state: EditorState): DecorationSet {
   const decorations: Decoration[] = [];
 
@@ -753,6 +885,16 @@ function codeBlockDecorations(state: EditorState): DecorationSet {
       return;
     }
 
+    for (const lineDecoration of codeLineDecorations(node.textContent, node.attrs)) {
+      decorations.push(
+        Decoration.widget(
+          pos + 1 + lineDecoration.from,
+          () => codeLineDecorationElement(lineDecoration.kind),
+          { side: -1 },
+        ),
+      );
+    }
+
     for (const token of highlightCodeTokens(node.textContent, node.attrs.language)) {
       decorations.push(
         Decoration.inline(pos + 1 + token.from, pos + 1 + token.to, {

src/lib/editor/code-line-range.ts

@@ -0,0 +1,61 @@
+export type CodeLineRange = {
+  fromLine: number;
+  toLine: number;
+};
+
+function codeLineCount(text: string) {
+  return Math.max(1, text.split("\n").length);
+}
+
+function clampOffset(text: string, offset: number) {
+  if (!Number.isFinite(offset)) {
+    return 0;
+  }
+
+  return Math.max(0, Math.min(text.length, Math.trunc(offset)));
+}
+
+export function codeLineFromOffset(text: string, offset: number) {
+  const clampedOffset = clampOffset(text, offset);
+  let line = 1;
+
+  for (let index = 0; index < clampedOffset; index += 1) {
+    if (text[index] === "\n") {
+      line += 1;
+    }
+  }
+
+  return Math.max(1, Math.min(codeLineCount(text), line));
+}
+
+export function selectedCodeLineRangeFromOffsets(
+  text: string,
+  fromOffset: number,
+  toOffset: number,
+): CodeLineRange | undefined {
+  const startOffset = clampOffset(text, Math.min(fromOffset, toOffset));
+  const endOffset = clampOffset(text, Math.max(fromOffset, toOffset));
+
+  if (endOffset <= startOffset) {
+    return undefined;
+  }
+
+  const inclusiveEndOffset = Math.max(startOffset, endOffset - 1);
+  const fromLine = codeLineFromOffset(text, startOffset);
+  const toLine = codeLineFromOffset(text, inclusiveEndOffset);
+
+  return {
+    fromLine: Math.min(fromLine, toLine),
+    toLine: Math.max(fromLine, toLine),
+  };
+}
+
+export function codeLineRangeContains(range: CodeLineRange, line: number) {
+  return line >= range.fromLine && line <= range.toLine;
+}
+
+export function codeLineRangeLabel(range: CodeLineRange) {
+  return range.fromLine === range.toLine
+    ? `${range.fromLine}번 줄`
+    : `${range.fromLine}-${range.toLine}번 줄`;
+}

src/lib/editor/markdown-import.ts

@@ -82,6 +82,11 @@ function normalizeLanguage(value: string | undefined, fallback: DcLanguageId): D
     mjs: "javascript",
     ts: "typescript",
     mts: "typescript",
+    md: "markdown",
+    markdown: "markdown",
+    mdx: "markdown",
+    mmd: "mermaid",
+    mermaid: "mermaid",
     jsonc: "json",
     yml: "yaml",
     mysql: "sql",