Skip to content

feat: CodeMirror TeX editor and split sandbox layout - #6

Merged
pyramation merged 3 commits into
modernizefrom
feat/sandbox-codemirror
Aug 25, 2026
Merged

feat: CodeMirror TeX editor and split sandbox layout#6
pyramation merged 3 commits into
modernizefrom
feat/sandbox-codemirror

Conversation

@pyramation

Copy link
Copy Markdown
Contributor

Summary

Replaces the sandbox's plain <textarea> with CodeMirror 6 (stex stream mode → real LaTeX highlighting, line numbers, ⌘/Ctrl+Enter to render), and turns /sandbox into a full-height split workspace: editor left, render right, each scrolling independently, plus a Hide editor toggle that gives the render the full width.

CodeMirror touches the DOM as it loads, and this site is a static export, so the editor is split in two: tex-editor.tsx is the SSR-safe entry (dynamic(..., { ssr: false })), and tex-editor-client.tsx holds the actual widget and language mode.

// tex-editor-client.tsx
const extensions = [StreamLanguage.define(stex)];
<CodeMirror value={value} onChange={onChange} height='100%' extensions={extensions} />

The example pages' existing "Edit source" textarea uses the same component (fixed h-96 there — those pages stay prose-width); CodeBlock, Render/Reset, Open in sandbox, the example <select>, #tex= deep links and the SEO/JSON-LD block are unchanged.

Layout now widens main to max-w-7xl and makes it a flex column on /sandbox only, so the workspace can fill the viewport instead of the reading measure everything else uses.

Deps pinned exactly: @uiw/react-codemirror@4.25.11, @codemirror/legacy-modes@6.5.3, @codemirror/language@6.12.4.

Verified in the browser: highlighting, example load + render, the toggle, and the example page's inline editor. Tests and the full static export pass.

Based on chore/bump-latex2js-4.4.0 (#5), so this diff includes that bump until it merges.

Link to Devin session: https://app.devin.ai/sessions/e51e8ecb94d241bd8d89e65e642c3e43
Requested by: @pyramation

@devin-ai-integration

Copy link
Copy Markdown

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment, CI, and merge conflict monitoring

@pyramation
pyramation merged commit 4decb60 into modernize Aug 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant