feat: replace PrismJS with highlight.js for code syntax highlighting

PrismJS's CJS global state is fundamentally incompatible with Vite's ESM
dev mode, causing missing language support (~40% of dropdown languages)
and fragile loading hacks (optimizeDeps, global assignment).

Replace the entire Prism integration with highlight.js/lib/common which
is ESM-native, has no global state, and covers all 22 dropdown languages
out of the box (~37 common languages included).

Implementation:
- Custom CodeHighlightPlugin using hljs.highlight() for tokenization
- HTML parser extracts flat tokens from hljs output (handles nested spans)
- Token type mapping from hljs scopes to Lexical codeHighlight theme keys
- Selection preservation via absolute character offset save/restore
- Re-entrancy guard prevents infinite transform loops
- Removed @lexical/code-prism import and Vite optimizeDeps workaround

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
2026-03-25 20:08:14 +01:00
co-authored by Copilot
parent 2338d7c44b
commit 4f202274db
4 changed files with 250 additions and 22 deletions
+1 -1
View File
@@ -34,7 +34,6 @@
"@lexical/headless": "0.42.0",
"@tailwindcss/vite": "^4.2.2",
"@types/node": "^25.5.0",
"@types/prismjs": "^1.26.6",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "5.1.0",
@@ -56,6 +55,7 @@
"@lexical/react": "0.42.0",
"@lexical/rich-text": "0.42.0",
"@xyflow/react": "^12.10.1",
"highlight.js": "^11.11.1",
"keytar": "^7.9.0",
"lexical": "0.42.0",
"lucide-react": "^0.577.0",