Skip to content

Add rich Monaco IDF editor with syntax highlighting, hover docs, and admonitions#16

Closed
samuelduchesne wants to merge 4 commits into
mainfrom
feature/gallant-hermann
Closed

Add rich Monaco IDF editor with syntax highlighting, hover docs, and admonitions#16
samuelduchesne wants to merge 4 commits into
mainfrom
feature/gallant-hermann

Conversation

@samuelduchesne
Copy link
Copy Markdown
Contributor

Summary

  • Monaco IDF editor: Replaces static IDF code blocks with interactive Monaco editor instances featuring syntax highlighting (Monarch tokenizer), hover documentation from IDD schema, copy-to-clipboard, lazy loading via IntersectionObserver, and dark/light theme sync
  • IDD schema integration: Builds a compact JSON schema from the EnergyPlus IDD file at convert time, served alongside the editor for hover tooltips showing object memos, field types, units, ranges, and choices
  • Pygments IDF lexer: Custom lexer registered via entry points so Zensical/pymdownx preserves language-idf CSS class instead of falling back to language-text
  • Admonitions: Detects 8 admonition types (note, warning, caution, important, tip, example, deprecated, see-also) from EnergyPlus LaTeX source patterns and renders them as rich callouts

Test plan

  • Run make convert VERSION=v25.2.0 and verify IDF code blocks render as Monaco editors
  • Hover over IDF object names (e.g., Material) and field values to see IDD documentation tooltips
  • Toggle dark/light mode and verify editor themes sync
  • Verify admonition blocks render with correct styling
  • Run make check to validate linting and formatting

🤖 Generated with Claude Code

samuelduchesne and others added 3 commits February 26, 2026 21:38
…nd hover docs

Replace static IDF code blocks in the EnergyPlus documentation with read-only
Monaco editor instances featuring Monarch-based IDF syntax highlighting, hover
documentation from the IDD schema (856 object types), code folding, and
dark/light theme sync with Zensical.

Key components:
- idf-editor/: Vite IIFE bundle (13KB) that lazy-loads Monaco from CDN
- scripts/idd_schema_builder.py: Parses Energy+.idd into compact JSON for hover
- scripts/pygments_idf_lexer.py: Registers IDF lexer so Pygments preserves the
  language-idf CSS class (static fallback before Monaco loads)
- IntersectionObserver for lazy editor creation as blocks scroll into view
- MutationObserver syncs editor theme with Zensical's dark/light toggle

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove IDF folding provider (not useful for read-only code blocks)
- Adjust editor height calculation (LINE_HEIGHT 18→19, PADDING 16→20)
- Fix IDD schema URL resolution by deriving path from script src attribute
  instead of resolving relative to the current page URL

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@samuelduchesne samuelduchesne force-pushed the feature/gallant-hermann branch from d49f73b to ca1bdc1 Compare February 27, 2026 02:38
@github-actions
Copy link
Copy Markdown
Contributor

Docs preview for this PR is available at:
https://docs.idfkit.com/pr-preview/pr-16/

github-actions Bot added a commit that referenced this pull request Feb 27, 2026
- Disable source maps in production build (was 404ing for .js.map)
- Align Monaco CDN version (0.52.2→0.55.1) with npm dependency to fix
  _commonjsGlobal duplicate variable error
- Pin monaco-editor npm dep to exact version (0.55.1) to prevent drift
- Reorder CI steps: compute version_short before cache lookup (was using
  undefined matrix.version_short causing empty cache path)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
github-actions Bot added a commit that referenced this pull request Feb 27, 2026
@samuelduchesne
Copy link
Copy Markdown
Contributor Author

Close in favor of #19

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