From b449f76bc3f36525f37634a5d93f405b155f86d8 Mon Sep 17 00:00:00 2001 From: Elizabeth Hunt Date: Sun, 4 Jan 2026 21:36:47 -0800 Subject: Package editor into its own script --- src/ts/script.ts | 113 ++----------------------------------------------------- 1 file changed, 4 insertions(+), 109 deletions(-) (limited to 'src/ts/script.ts') 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: ` - - - - - Retro Page - - -

Hello, World!

Welcome to the retro web.

- -`, - }; - - 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(); } -- cgit v1.2.3-70-g09d2