diff options
| author | Elizabeth Hunt <me@liz.coffee> | 2026-01-04 21:36:47 -0800 |
|---|---|---|
| committer | Elizabeth Hunt <me@liz.coffee> | 2026-01-04 21:36:47 -0800 |
| commit | b449f76bc3f36525f37634a5d93f405b155f86d8 (patch) | |
| tree | e19384660b513165efe57f38d31fe5b586b1e9f3 /src/ts/script.ts | |
| parent | 681a8af8b192387ada5045ad0d7db53b1ec131b6 (diff) | |
| download | adelie-b449f76bc3f36525f37634a5d93f405b155f86d8.tar.gz adelie-b449f76bc3f36525f37634a5d93f405b155f86d8.zip | |
Package editor into its own script
Diffstat (limited to 'src/ts/script.ts')
| -rw-r--r-- | src/ts/script.ts | 113 |
1 files changed, 4 insertions, 109 deletions
diff --git a/src/ts/script.ts b/src/ts/script.ts index e8502c8..8aff107 100644 --- a/src/ts/script.ts +++ b/src/ts/script.ts @@ -3,15 +3,15 @@ import 'prismjs/components/prism-css'; import 'prismjs/components/prism-javascript'; import 'prismjs/components/prism-markup'; import { initOneko } from './oneko'; +import { createEditor, setEditorTheme } from './editor'; +import type { EditorView } from 'codemirror'; type Theme = 'light' | 'dark'; -type EditorView = any; const THEME_STORAGE_KEY = 'theme'; const DARK_THEME_ATTRIBUTE = 'data-theme'; let editorInstance: EditorView | null = null; -let editorModule: typeof import('./editor') | null = null; function detectAssetBase(): string { const currentScript = document.currentScript as HTMLScriptElement | null; @@ -63,8 +63,8 @@ function initThemeToggle(): void { applyTheme(nextTheme); sessionStorage.setItem(THEME_STORAGE_KEY, nextTheme); - if (editorInstance && editorModule) { - editorModule.setEditorTheme(editorInstance, nextTheme); + if (editorInstance) { + setEditorTheme(editorInstance, nextTheme); } }); } @@ -150,116 +150,11 @@ function initFileInputs(): void { }); } -async function loadEditor() { - if (!editorModule) { - editorModule = await import('./editor'); - } - return editorModule; -} - -function initCodeEditor(): void { - const editorContainer = document.getElementById('code-editor'); - const languageSelect = document.getElementById('language-select'); - - if (!editorContainer || !(languageSelect instanceof HTMLSelectElement)) return; - - const initialCode = { - javascript: `// Welcome to the live code editor! -function greet(name) { - return \`Hello, \${name}! 👋\`; -} - -console.log(greet('World'));`, - css: `/* Try editing this CSS! */ -.retro-box { - background: var(--primary); - color: var(--text); - padding: var(--space-md); - border-radius: var(--border-radius); - box-shadow: var(--shadow-box); -}`, - html: `<!-- Try editing this HTML! --> -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8"> - <title>Retro Page</title> -</head> -<body> - <h1>Hello, World!</h1> - <p>Welcome to the retro web.</p> -</body> -</html>`, - }; - - let editorLoaded = false; - - const currentTheme = getStoredTheme() ?? getSystemTheme(); - - async function createEditorInstance() { - if (editorLoaded) return; - editorLoaded = true; - - const { createEditor } = await loadEditor(); - const language = languageSelect.value as 'javascript' | 'css' | 'html'; - - editorInstance = createEditor({ - parent: editorContainer, - language, - initialCode: initialCode[language], - theme: currentTheme, - }); - } - - // Lazy load on intersection (when editor scrolls into view) - const observer = new IntersectionObserver( - (entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting) { - createEditorInstance(); - observer.disconnect(); - } - }); - }, - { rootMargin: '100px' } - ); - - observer.observe(editorContainer); - - // Also load on language change - languageSelect.addEventListener('change', async () => { - const language = languageSelect.value as 'javascript' | 'css' | 'html'; - - if (!editorModule) { - await createEditorInstance(); - return; - } - - if (editorInstance && editorContainer) { - editorContainer.innerHTML = ''; - - const { createEditor } = editorModule; - editorInstance = createEditor({ - parent: editorContainer, - language, - initialCode: initialCode[language], - theme: currentTheme, - }); - } - }); -} - function init(): void { setAssetBase(); initThemeToggle(); initFairyDust(); initFileInputs(); - - // Only initialize code editor if the container exists - if (document.getElementById('code-editor')) { - initCodeEditor(); - } - Prism.highlightAll(); initOneko(); } |