From 239775f6e4ee76ef7a9da420d07ed69f24fac252 Mon Sep 17 00:00:00 2001
From: Steffen Becker <stffn.becker@gmail.com>
Date: Fri, 29 May 2026 19:04:33 +0200
Subject: [PATCH] feat: add more fonts

---
 src/lib/editor/ToolbarExpanded.svelte | 153 +++++++++++++++++++++++---
 src/lib/editor/fontDetect.ts          | 129 ++++++++++++++++++++++
 2 files changed, 268 insertions(+), 14 deletions(-)
 create mode 100644 src/lib/editor/fontDetect.ts

diff --git a/src/lib/editor/ToolbarExpanded.svelte b/src/lib/editor/ToolbarExpanded.svelte
index 6baacc7..97ef19b 100644
--- a/src/lib/editor/ToolbarExpanded.svelte
+++ b/src/lib/editor/ToolbarExpanded.svelte
@@ -1,6 +1,12 @@
 <script lang="ts">
   import type { Editor } from '@tiptap/core';
-  import { onDestroy } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
+  import {
+    CANDIDATE_FONTS,
+    detectAvailableFonts,
+    queryLocalFontsIfAllowed,
+    supportsLocalFontAccess,
+  } from './fontDetect';
 
   let { editor, tick, showFormattingMarks = $bindable() }: { editor: Editor | null; tick: number; showFormattingMarks: boolean } = $props();
 
@@ -35,14 +41,58 @@
   // Must match the first font in --font-serif in editor.css
   const DEFAULT_EDITOR_FONT = 'Georgia';
 
-  const FONTS = [
-    { value: 'Arial',            label: 'Arial'            },
-    { value: 'Verdana',          label: 'Verdana'          },
-    { value: 'Trebuchet MS',     label: 'Trebuchet MS'     },
-    { value: 'Georgia',          label: 'Georgia'          },
-    { value: 'Times New Roman',  label: 'Times New Roman'  },
-    { value: 'Courier New',      label: 'Courier New'      },
-  ] as const;
+  // Always-shown fonts — render in the picker even when detection fails or is blocked.
+  const WEB_SAFE_FONTS: readonly string[] = [
+    'Arial', 'Verdana', 'Trebuchet MS', 'Georgia', 'Times New Roman', 'Courier New',
+  ];
+  const WEB_SAFE_SET = new Set<string>(WEB_SAFE_FONTS);
+
+  const RECENT_FONTS_KEY = 'odf-editor-recent-fonts';
+  const MAX_RECENT_FONTS = 5;
+
+  let recentFonts = $state<string[]>([]);
+  let detectedFonts = $state<string[]>([]);
+  let allInstalledFonts = $state<string[] | null>(null);
+  let detectionRan = false;
+  const localFontAccessSupported =
+    typeof window !== 'undefined' && supportsLocalFontAccess();
+
+  function loadRecents(): string[] {
+    try {
+      const raw = localStorage.getItem(RECENT_FONTS_KEY);
+      if (!raw) return [];
+      const parsed: unknown = JSON.parse(raw);
+      if (!Array.isArray(parsed)) return [];
+      return parsed.filter((x): x is string => typeof x === 'string').slice(0, MAX_RECENT_FONTS);
+    } catch { return []; }
+  }
+
+  function saveRecents(fonts: string[]) {
+    try { localStorage.setItem(RECENT_FONTS_KEY, JSON.stringify(fonts)); } catch { /* quota or disabled */ }
+  }
+
+  onMount(() => { recentFonts = loadRecents(); });
+
+  function ensureDetectionRan() {
+    if (detectionRan) return;
+    detectionRan = true;
+    detectedFonts = detectAvailableFonts(CANDIDATE_FONTS);
+  }
+
+  let extraFontsList = $derived.by(() => {
+    const source = allInstalledFonts ?? detectedFonts;
+    const out: string[] = [];
+    const recentSet = new Set(recentFonts);
+    for (const f of source) {
+      if (!WEB_SAFE_SET.has(f) && !recentSet.has(f)) out.push(f);
+    }
+    return out.sort((a, b) => a.localeCompare(b));
+  });
+
+  async function showAllInstalledFonts() {
+    const list = await queryLocalFontsIfAllowed();
+    if (list && list.length > 0) allInstalledFonts = list;
+  }
 
   // Returns the uniform font of the selection, or '' when fonts are mixed.
   // Plain Text without an explicit mark falls back to DEFAULT_EDITOR_FONT.
@@ -248,6 +298,7 @@
     // Save selection before the picker button steals focus.
     savedFrom = editor.state.selection.from;
     savedTo = editor.state.selection.to;
+    if (!fontOpen) ensureDetectionRan();
     fontOpen = !fontOpen;
   }
 
@@ -259,6 +310,10 @@
     savedFrom = null;
     savedTo   = null;
     editor.chain().focus().setTextSelection({ from, to }).setFontFamily(value).run();
+
+    const next = [value, ...recentFonts.filter((f) => f !== value)].slice(0, MAX_RECENT_FONTS);
+    recentFonts = next;
+    saveRecents(next);
   }
 
   function fontPickerClickOutside(node: HTMLElement) {
@@ -638,14 +693,45 @@
       </button>
       {#if fontOpen}
         <div class="font-dropdown">
-          {#each FONTS as font}
+          {#if recentFonts.length > 0}
+            <div class="font-section-label">Recent</div>
+            {#each recentFonts as font}
+              <button
+                class="font-option"
+                class:active={currentFont === font}
+                style="font-family: {font}"
+                onclick={() => pickFont(font)}
+              >{font}</button>
+            {/each}
+          {/if}
+
+          <div class="font-section-label">Web-safe</div>
+          {#each WEB_SAFE_FONTS as font}
             <button
               class="font-option"
-              class:active={currentFont === font.value}
-              style="font-family: {font.value}"
-              onclick={() => pickFont(font.value)}
-            >{font.label}</button>
+              class:active={currentFont === font}
+              style="font-family: {font}"
+              onclick={() => pickFont(font)}
+            >{font}</button>
           {/each}
+
+          {#if extraFontsList.length > 0}
+            <div class="font-section-label">All fonts</div>
+            {#each extraFontsList as font}
+              <button
+                class="font-option"
+                class:active={currentFont === font}
+                style="font-family: {font}"
+                onclick={() => pickFont(font)}
+              >{font}</button>
+            {/each}
+          {/if}
+
+          {#if localFontAccessSupported && !allInstalledFonts}
+            <button class="font-show-all" onclick={showAllInstalledFonts}>
+              Load all installed fonts
+            </button>
+          {/if}
         </div>
       {/if}
     </div>
@@ -1015,6 +1101,8 @@
     top: calc(100% + 3px);
     left: 0;
     min-width: 100%;
+    max-height: 360px;
+    overflow-y: auto;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     border-radius: var(--radius);
@@ -1025,6 +1113,43 @@
     flex-direction: column;
   }
 
+  .font-section-label {
+    padding: 0.4rem 0.6rem 0.2rem;
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--color-text-muted);
+    font-family: var(--font-sans);
+    user-select: none;
+  }
+
+  .font-section-label:not(:first-child) {
+    margin-top: 4px;
+    border-top: 1px solid var(--color-border);
+  }
+
+  .font-show-all {
+    display: block;
+    width: 100%;
+    padding: 0.4rem 0.6rem;
+    margin-top: 2px;
+    border: none;
+    border-top: 1px solid var(--color-border);
+    border-radius: 0;
+    background: var(--color-surface);
+    color: var(--color-primary);
+    font-size: 0.8rem;
+    font-family: var(--font-sans);
+    text-align: left;
+    cursor: pointer;
+    position: sticky;
+    bottom: -2px;
+  }
+
+  .font-show-all:hover {
+    background: var(--color-btn-hover);
+  }
+
   .font-option {
     display: block;
     width: 100%;
diff --git a/src/lib/editor/fontDetect.ts b/src/lib/editor/fontDetect.ts
new file mode 100644
index 0000000..f2fab43
--- /dev/null
+++ b/src/lib/editor/fontDetect.ts
@@ -0,0 +1,129 @@
+// Curated list of font families that ship with one or more of:
+// Windows (core + ClearType + Office), macOS, iOS, common Linux distros, MS Office.
+// Detection filters this down to fonts actually installed on the current machine.
+export const CANDIDATE_FONTS: readonly string[] = [
+  // Web-safe / cross-platform staples
+  'Arial', 'Arial Black', 'Arial Narrow', 'Arial Rounded MT Bold',
+  'Courier New', 'Georgia', 'Helvetica', 'Helvetica Neue',
+  'Impact', 'Lucida Console', 'Lucida Sans Unicode', 'Palatino',
+  'Tahoma', 'Times', 'Times New Roman', 'Trebuchet MS', 'Verdana',
+
+  // Windows core + ClearType
+  'Calibri', 'Calibri Light', 'Cambria', 'Cambria Math',
+  'Candara', 'Consolas', 'Constantia', 'Corbel',
+  'Franklin Gothic Medium', 'Gabriola', 'Gadugi', 'Javanese Text',
+  'Leelawadee UI', 'Lucida Sans', 'Malgun Gothic', 'Marlett',
+  'Microsoft Himalaya', 'Microsoft JhengHei', 'Microsoft JhengHei UI',
+  'Microsoft New Tai Lue', 'Microsoft PhagsPa', 'Microsoft Sans Serif',
+  'Microsoft Tai Le', 'Microsoft YaHei', 'Microsoft YaHei UI',
+  'Microsoft Yi Baiti', 'MingLiU-ExtB', 'Mongolian Baiti',
+  'MS Gothic', 'MS Mincho', 'MS PGothic', 'MV Boli',
+  'Myanmar Text', 'Nirmala UI', 'Palatino Linotype',
+  'Segoe Print', 'Segoe Script', 'Segoe UI', 'Segoe UI Black',
+  'Segoe UI Emoji', 'Segoe UI Historic', 'Segoe UI Light',
+  'Segoe UI Semibold', 'Segoe UI Semilight', 'Segoe UI Symbol',
+  'SimSun', 'Sitka', 'Sylfaen', 'Symbol', 'Webdings', 'Wingdings',
+  'Yu Gothic', 'Yu Gothic UI', 'Yu Mincho',
+
+  // MS Office bundled
+  'Bahnschrift', 'Bookshelf Symbol 7', 'Ebrima', 'MS Reference Sans Serif',
+  'MS Reference Specialty', 'Plantagenet Cherokee',
+
+  // macOS system fonts
+  'American Typewriter', 'Andale Mono', 'Apple Chancery', 'Apple Color Emoji',
+  'Apple SD Gothic Neo', 'Apple Symbols', 'AppleGothic', 'AppleMyungjo',
+  'Avenir', 'Avenir Next', 'Avenir Next Condensed', 'Baskerville',
+  'Big Caslon', 'Bodoni 72', 'Bodoni 72 Oldstyle', 'Bodoni 72 Smallcaps',
+  'Bradley Hand', 'Brush Script MT', 'Chalkboard', 'Chalkboard SE',
+  'Chalkduster', 'Charter', 'Cochin', 'Comic Sans MS', 'Copperplate',
+  'Courier', 'Damascus', 'Didot', 'Futura', 'Geneva', 'Gill Sans',
+  'GungSeo', 'HeadLineA', 'Herculanum', 'Hiragino Maru Gothic Pro',
+  'Hiragino Mincho ProN', 'Hiragino Sans', 'Hoefler Text', 'Iowan Old Style',
+  'Kefa', 'Khmer Sangam MN', 'Kohinoor Bangla', 'Kohinoor Devanagari',
+  'Kohinoor Telugu', 'Krungthep', 'Lao Sangam MN', 'Lucida Grande',
+  'Luminari', 'Marker Felt', 'Menlo', 'Monaco', 'Mukta Mahee',
+  'Nadeem', 'New Peninim MT', 'Noteworthy', 'Optima', 'Papyrus',
+  'PingFang HK', 'PingFang SC', 'PingFang TC', 'PT Mono', 'PT Sans', 'PT Serif',
+  'Rockwell', 'Savoye LET', 'SF Compact', 'SF Mono', 'SF Pro', 'SF Pro Display',
+  'SF Pro Rounded', 'SF Pro Text', 'Sinhala Sangam MN', 'Skia',
+  'Snell Roundhand', 'STIX Two Math', 'Superclarendon', 'Tamil Sangam MN',
+  'Telugu Sangam MN', 'Thonburi', 'Trattatello', 'Zapf Dingbats', 'Zapfino',
+
+  // Common Linux / open-source families
+  'DejaVu Sans', 'DejaVu Sans Mono', 'DejaVu Serif',
+  'Liberation Mono', 'Liberation Sans', 'Liberation Serif',
+  'Linux Biolinum', 'Linux Libertine', 'Noto Sans', 'Noto Serif',
+  'Noto Mono', 'Source Sans Pro', 'Source Serif Pro', 'Source Code Pro',
+  'Ubuntu', 'Ubuntu Mono', 'Ubuntu Condensed',
+  'Open Sans', 'Roboto', 'Roboto Condensed', 'Roboto Mono', 'Roboto Slab',
+  'Lato', 'Inter', 'Fira Sans', 'Fira Code', 'Fira Mono',
+  'Cantarell', 'FreeMono', 'FreeSans', 'FreeSerif',
+] as const;
+
+const PROBE_TEXT = 'mmmmmmmmmlli';
+const PROBE_SIZE = '72px';
+const BASELINES = ['monospace', 'sans-serif', 'serif'] as const;
+
+let baselineWidths: number[] | null = null;
+let detectionCtx: CanvasRenderingContext2D | null = null;
+
+function getCtx(): CanvasRenderingContext2D | null {
+  if (detectionCtx) return detectionCtx;
+  try {
+    const canvas = document.createElement('canvas');
+    detectionCtx = canvas.getContext('2d');
+    return detectionCtx;
+  } catch {
+    return null;
+  }
+}
+
+function measure(ctx: CanvasRenderingContext2D, font: string): number {
+  ctx.font = font;
+  return ctx.measureText(PROBE_TEXT).width;
+}
+
+function isAvailable(ctx: CanvasRenderingContext2D, family: string): boolean {
+  if (!baselineWidths) {
+    baselineWidths = BASELINES.map((b) => measure(ctx, `${PROBE_SIZE} ${b}`));
+  }
+  const escaped = family.replace(/"/g, '\\"');
+  for (let i = 0; i < BASELINES.length; i++) {
+    const w = measure(ctx, `${PROBE_SIZE} "${escaped}", ${BASELINES[i]}`);
+    if (w !== baselineWidths[i]) return true;
+  }
+  return false;
+}
+
+export function detectAvailableFonts(candidates: readonly string[]): string[] {
+  const ctx = getCtx();
+  if (!ctx) return [];
+  baselineWidths = null;
+  const found: string[] = [];
+  for (const family of candidates) {
+    if (isAvailable(ctx, family)) found.push(family);
+  }
+  return found;
+}
+
+interface LocalFontData { family: string }
+interface QueryLocalFontsWindow {
+  queryLocalFonts?: () => Promise<LocalFontData[]>;
+}
+
+export function supportsLocalFontAccess(): boolean {
+  return typeof (window as QueryLocalFontsWindow).queryLocalFonts === 'function';
+}
+
+export async function queryLocalFontsIfAllowed(): Promise<string[] | null> {
+  const fn = (window as QueryLocalFontsWindow).queryLocalFonts;
+  if (!fn) return null;
+  try {
+    const fonts = await fn();
+    const families = new Set<string>();
+    for (const f of fonts) families.add(f.family);
+    return [...families].sort((a, b) => a.localeCompare(b));
+  } catch {
+    return null;
+  }
+}