Refactor for code clarity and brevity

- Extract shared extractTermOrder() utility in parser.ts
- Simplify enableTermPointerEvents() to only target term elements
- Pass parsedContent to ExportControls (avoid double-parsing)
- Consolidate LaTeX description converter in htmlConverter.ts
- Add buildTermColorMap() for O(1) color lookups

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: stared

src/App.vue

@@ -23,7 +23,7 @@
         <button class="toolbar-btn" title="Show/hide editor" @click="editorCollapsed = !editorCollapsed">
           <span class="icon">{{ editorCollapsed ? '▶' : '◀' }}</span>
         </button>
-        <ExportControls :markdown="markdown" :colors="colorScheme" />
+        <ExportControls :parsed-content="parsedContent" :colors="colorScheme" />
         <a href="https://github.com/stared/equations-explained-colorfully" class="toolbar-link" target="_blank" rel="noopener">Contribute</a>
       </div>
       <div class="editor-container">

src/components/CentralPanel.vue

@@ -35,7 +35,7 @@
 import { ref, computed, watch } from 'vue'
 import type { ParsedContent } from '../utils/parser'
 import type { ColorScheme } from '../export'
-import { getTermColor as getColor } from '../utils/colorSchemes'
+import { buildTermColorMap } from '../utils/colorSchemes'
 
 import EquationDisplay from './equation/EquationDisplay.vue'
 import DescriptionPanel from './equation/DescriptionPanel.vue'
@@ -48,9 +48,11 @@ const props = defineProps<{
 
 const termOrder = computed(() => props.content.termOrder)
 
-// Color helper
+// Build color map once (O(1) lookups instead of O(n) indexOf)
+const termColorMap = computed(() => buildTermColorMap(termOrder.value, props.colors))
+
 function getTermColor(term: string): string {
-  return getColor(term, termOrder.value, props.colors)
+  return termColorMap.value.get(term) ?? '#000000'
 }
 
 // Hover/click state (owned internally)

src/components/MarkdownEditor.vue

@@ -6,7 +6,7 @@
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
 import { CodeJar } from 'codejar'
 import Prism from 'prismjs'
-import { parseContent } from '../utils/parser'
+import { parseContent, extractTermOrder } from '../utils/parser'
 import type { ColorScheme } from '../export'
 
 // ============================================================================
@@ -98,27 +98,9 @@ Prism.languages.eqmd = {
 
 // Extract ONLY terms from equation section ($$...$$)
 function extractEquationTerms(markdown: string): string[] {
-  const terms: string[] = []
-  const seenTerms = new Set<string>()
-
-  // Extract equation block (everything between $$...$$)
   const equationMatch = markdown.match(/\$\$([\s\S]*?)\$\$/)
-  if (!equationMatch) return terms
-
-  const equationContent = equationMatch[1]
-
-  // Extract \mark[classname] in order of appearance
-  const markPattern = /\\mark\[([^\]]+)\]/g
-  let match
-  while ((match = markPattern.exec(equationContent)) !== null) {
-    const term = match[1]
-    if (!seenTerms.has(term)) {
-      terms.push(term)
-      seenTerms.add(term)
-    }
-  }
-
-  return terms
+  if (!equationMatch) return []
+  return extractTermOrder(equationMatch[1])
 }
 
 // Helper to mark tokens with errors based on a condition

src/components/controls/ExportControls.vue

@@ -19,33 +19,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { parseContent } from '../../utils/parser'
+import { ref } from 'vue'
+import type { ParsedContent } from '../../utils/parser'
 import type { ColorScheme, ExportFormat } from '../../export'
 
 const props = defineProps<{
-  markdown: string
+  parsedContent: ParsedContent | null
   colors: ColorScheme
 }>()
 
 const selectedFormat = ref('')
 
-// Parse markdown internally when needed
-const parsedContent = computed(() => {
-  if (!props.markdown.trim()) return null
-  try {
-    return parseContent(props.markdown)
-  } catch {
-    return null
-  }
-})
-
 async function handleExport() {
-  if (!selectedFormat.value || !parsedContent.value) return
+  if (!selectedFormat.value || !props.parsedContent) return
 
   const { exportContent, getFileExtension } = await import('../../export')
   const format = selectedFormat.value as ExportFormat
-  const content = exportContent(format, parsedContent.value, props.colors)
+  const content = exportContent(format, props.parsedContent, props.colors)
   const extension = getFileExtension(format)
 
   // Download file
@@ -62,10 +52,10 @@ async function handleExport() {
 }
 
 async function handleCopy() {
-  if (!parsedContent.value) return
+  if (!props.parsedContent) return
 
   const { exportContent } = await import('../../export')
-  const content = exportContent('html', parsedContent.value, props.colors)
+  const content = exportContent('html', props.parsedContent, props.colors)
 
   try {
     await navigator.clipboard.writeText(content)

src/export/beamerExport.ts

@@ -4,7 +4,7 @@
 import type { ParsedContent } from '../utils/parser';
 import type { ColorScheme } from '.';
 import { transformHtmlClass } from '../utils/latex';
-import { convertHtmlDescription } from './htmlConverter';
+import { convertDescriptionToLatex } from './htmlConverter';
 import { escapePreservingMath, escapeLaTeX } from './escape';
 import { getTermColor } from '../utils/colorSchemes';
 
@@ -21,15 +21,6 @@ function injectTikzNodesInLatex(latex: string): { latex: string; nodeCount: numb
   return { latex: result, nodeCount };
 }
 
-// Convert HTML description to LaTeX text
-function convertDescriptionToLatex(html: string): string {
-  return convertHtmlDescription(
-    html,
-    escapeLaTeX,
-    (className, content) => `\\textcolor{term${className}}{${escapeLaTeX(content)}}`
-  );
-}
-
 /**
  * Export to Beamer with TikZ arrows (presentation format)
  * Based on texample.net/tikz/examples/beamer-arrows/ pattern

src/export/htmlConverter.ts

@@ -1,3 +1,5 @@
+import { escapeLaTeX } from './escape';
+
 // Transform HTML <span class="term-X">content</span> to custom format
 export function convertHtmlDescription(
   html: string,
@@ -54,3 +56,12 @@ export function convertHtmlDescription(
 
   return result.trim();
 }
+
+// Convert HTML description to LaTeX with \textcolor (shared by latexExport and beamerExport)
+export function convertDescriptionToLatex(html: string): string {
+  return convertHtmlDescription(
+    html,
+    escapeLaTeX,
+    (className, content) => `\\textcolor{term${className}}{${escapeLaTeX(content)}}`
+  );
+}

src/export/latexExport.ts

@@ -4,7 +4,7 @@
 import type { ParsedContent } from '../utils/parser';
 import type { ColorScheme } from '.';
 import { transformHtmlClass } from '../utils/latex';
-import { convertHtmlDescription } from './htmlConverter';
+import { convertDescriptionToLatex } from './htmlConverter';
 import { escapePreservingMath, escapeLaTeX } from './escape';
 import { getTermColor } from '../utils/colorSchemes';
 
@@ -18,15 +18,6 @@ function stripHtmlClassForLatex(latex: string): string {
   );
 }
 
-// Convert HTML description to LaTeX text
-function convertDescriptionToLatex(html: string): string {
-  return convertHtmlDescription(
-    html,
-    escapeLaTeX,
-    (className, content) => `\\textcolor{term${className}}{${escapeLaTeX(content)}}`
-  );
-}
-
 /**
  * Export to LaTeX (complete document with xcolor)
  * Non-interactive: colors defined in preamble, applied with \textcolor

src/utils/colorSchemes.ts

@@ -37,3 +37,10 @@ export function getTermColor(term: string, termOrder: string[], scheme: ColorSch
   if (index === -1) return '#000000'
   return scheme.colors[index] ?? '#000000'
 }
+
+// Build term→color map for O(1) lookups (use in computed properties)
+export function buildTermColorMap(termOrder: string[], scheme: ColorScheme): Map<string, string> {
+  return new Map(
+    termOrder.map((term, i) => [term, scheme.colors[i] ?? '#000000'])
+  )
+}

src/utils/parser.ts

@@ -2,6 +2,23 @@
 
 import { findMatchingBrace } from './latex';
 
+/**
+ * Extract term names from \mark[term] patterns in equation content (for color ordering)
+ */
+export function extractTermOrder(equationContent: string): string[] {
+  const terms: string[] = []
+  const seen = new Set<string>()
+  const pattern = /\\mark\[([^\]]+)\]/g
+  let match
+  while ((match = pattern.exec(equationContent)) !== null) {
+    if (!seen.has(match[1])) {
+      terms.push(match[1])
+      seen.add(match[1])
+    }
+  }
+  return terms
+}
+
 export interface ParsedContent {
   title: string; // Title from # heading
   latex: string; // LaTeX equation with \htmlClass annotations

src/utils/termDom.ts

@@ -39,14 +39,11 @@ export function setupTermListeners(
   }
 }
 
-/** Set pointer-events on term elements (needed for KaTeX) */
+/** Set pointer-events on term elements (needed for KaTeX which nests many spans) */
 export function enableTermPointerEvents(container: HTMLElement): void {
-  container.querySelectorAll('*').forEach((el) => {
+  container.querySelectorAll('[class*="term-"]').forEach((el) => {
     const htmlEl = el as HTMLElement
-    const hasTermClass = Array.from(el.classList).some(c => c.startsWith('term-'))
-    htmlEl.style.pointerEvents = hasTermClass ? 'auto' : 'none'
-    if (hasTermClass) {
-      htmlEl.style.cursor = 'pointer'
-    }
+    htmlEl.style.pointerEvents = 'auto'
+    htmlEl.style.cursor = 'pointer'
   })
 }