feat: persist editor drafts

Author: 0disoft

README.md

@@ -36,6 +36,9 @@ The app is built with `@sveltejs/adapter-static`.
 https://0disoft.github.io/dc-code-paste/
 ```
 
+The repository can stay private while the editor is still being shaped. Enable GitHub Pages after
+the repository is ready to become public.
+
 ## Paste Contract
 
 The app keeps an editor document model internally, then exports inline-style HTML for rich-text
@@ -92,6 +95,19 @@ editors that expect raw HTML source.
 Older `calloutBox` documents with a `kind` attribute are still accepted by the exporter, but new
 editor content uses the explicit box node names above.
 
+## Drafts
+
+The editor saves the current draft in browser `localStorage` after the editor is ready:
+
+- Tiptap document JSON
+- Code language and Shiki theme
+- Body, selection, and code font settings
+- Line number setting
+- Paste structure: `DC 테이블` or `기본`
+
+The draft is restored on the next page load. `초기화` clears the saved draft and returns the editor
+to the bundled sample article.
+
 ## Manual DC Paste Check
 
 Before treating a release as ready, check both paste paths in a browser:
@@ -102,3 +118,7 @@ Before treating a release as ready, check both paste paths in a browser:
 3. Switch the preview panel to `HTML`, click `원문 복사`, paste into DCInside's HTML mode, and confirm
    the same article renders after leaving HTML mode.
 4. Confirm code colors, box spacing, links, and body font size match the preview closely enough.
+5. Refresh the app after editing text and changing paste structure; confirm the draft comes back.
+6. Click `초기화`, refresh, and confirm the sample article comes back instead of the previous draft.
+7. In `DC 테이블`, confirm exported HTML contains `table`, `td`, and `bgcolor`.
+8. In `기본`, confirm exported HTML keeps the simpler root `div` structure.

src/lib/editor/draft-storage.ts

@@ -0,0 +1,171 @@
+import type { JSONContent } from "@tiptap/core";
+import type { DcExportStructure } from "$lib/dc/export-document";
+import {
+  isSupportedLanguage,
+  isSupportedTheme,
+  type DcLanguageId,
+  type DcThemeId,
+} from "$lib/highlighter/catalog";
+
+export const draftStorageKey = "dc-code-paste:draft:v1";
+
+export type DraftPreferences = {
+  language: DcLanguageId;
+  theme: DcThemeId;
+  bodyFontFamily: string;
+  bodyFontSize: string;
+  selectionFontFamily: string;
+  selectionFontSize: string;
+  codeFontSize: string;
+  showLineNumbers: boolean;
+  structure: DcExportStructure;
+};
+
+export type DraftSnapshot = {
+  version: 1;
+  updatedAt: string;
+  document: JSONContent;
+  preferences: DraftPreferences;
+};
+
+type DraftStorage = Pick<Storage, "getItem" | "setItem" | "removeItem">;
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function isJsonContent(value: unknown, depth = 0): value is JSONContent {
+  if (!isRecord(value) || depth > 80) {
+    return false;
+  }
+
+  if ("type" in value && typeof value.type !== "string") {
+    return false;
+  }
+
+  if ("text" in value && typeof value.text !== "string") {
+    return false;
+  }
+
+  if ("attrs" in value && !isRecord(value.attrs)) {
+    return false;
+  }
+
+  if ("marks" in value) {
+    if (!Array.isArray(value.marks)) {
+      return false;
+    }
+
+    for (const mark of value.marks) {
+      if (!isRecord(mark) || typeof mark.type !== "string") {
+        return false;
+      }
+
+      if ("attrs" in mark && !isRecord(mark.attrs)) {
+        return false;
+      }
+    }
+  }
+
+  if ("content" in value) {
+    if (!Array.isArray(value.content)) {
+      return false;
+    }
+
+    return value.content.every((child) => isJsonContent(child, depth + 1));
+  }
+
+  return typeof value.type === "string" || typeof value.text === "string";
+}
+
+function isExportStructure(value: unknown): value is DcExportStructure {
+  return value === "modern" || value === "dcTable";
+}
+
+function isDraftPreferences(value: unknown): value is DraftPreferences {
+  if (!isRecord(value)) {
+    return false;
+  }
+
+  return (
+    typeof value.language === "string" &&
+    isSupportedLanguage(value.language) &&
+    typeof value.theme === "string" &&
+    isSupportedTheme(value.theme) &&
+    typeof value.bodyFontFamily === "string" &&
+    typeof value.bodyFontSize === "string" &&
+    typeof value.selectionFontFamily === "string" &&
+    typeof value.selectionFontSize === "string" &&
+    typeof value.codeFontSize === "string" &&
+    typeof value.showLineNumbers === "boolean" &&
+    isExportStructure(value.structure)
+  );
+}
+
+export function createDraftSnapshot(
+  document: JSONContent,
+  preferences: DraftPreferences,
+): DraftSnapshot {
+  return {
+    version: 1,
+    updatedAt: new Date().toISOString(),
+    document,
+    preferences,
+  };
+}
+
+export function parseDraftSnapshot(value: string): DraftSnapshot | undefined {
+  let parsed: unknown;
+
+  try {
+    parsed = JSON.parse(value);
+  } catch {
+    return undefined;
+  }
+
+  if (!isRecord(parsed)) {
+    return undefined;
+  }
+
+  if (parsed.version !== 1 || typeof parsed.updatedAt !== "string") {
+    return undefined;
+  }
+
+  if (!isJsonContent(parsed.document) || !isDraftPreferences(parsed.preferences)) {
+    return undefined;
+  }
+
+  return {
+    version: 1,
+    updatedAt: parsed.updatedAt,
+    document: parsed.document,
+    preferences: parsed.preferences,
+  };
+}
+
+export function readDraftSnapshot(storage: DraftStorage): DraftSnapshot | undefined {
+  try {
+    const stored = storage.getItem(draftStorageKey);
+    return stored ? parseDraftSnapshot(stored) : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+export function writeDraftSnapshot(storage: DraftStorage, snapshot: DraftSnapshot): boolean {
+  try {
+    storage.setItem(draftStorageKey, JSON.stringify(snapshot));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function clearDraftSnapshot(storage: DraftStorage): boolean {
+  try {
+    storage.removeItem(draftStorageKey);
+    return true;
+  } catch {
+    return false;
+  }
+}

src/lib/highlighter/catalog.ts

@@ -39,3 +39,7 @@ export const defaultTheme: DcThemeId = "github-dark";
 export function isSupportedLanguage(value: string): value is DcLanguageId {
   return supportedLanguages.some((language) => language.id === value);
 }
+
+export function isSupportedTheme(value: string): value is DcThemeId {
+  return supportedThemes.some((theme) => theme.id === value);
+}