Add DiagramRenderer service for inline fenced-diagram rendering#92
Open
ChristineTham wants to merge 2 commits into
Open
Add DiagramRenderer service for inline fenced-diagram rendering#92ChristineTham wants to merge 2 commits into
ChristineTham wants to merge 2 commits into
Conversation
Introduces a `DiagramRenderer` protocol (mirroring `LatexRenderer`) plus a `diagrams` slot in `MarkdownEditorServices`, and a `styleDiagramBlocks` pass that intercepts standalone fenced code blocks whose info string a renderer claims (e.g. ```mermaid) and draws the returned image in place of the source via the existing `appendRenderedStandaloneBlock` machinery. Moving the caret into the block reveals the raw source for editing; the code background is cleared so no filled box shows behind the diagram. Defaults to a NoOpDiagramRenderer, so existing embedders are unaffected. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
`DiagramRenderer.render` now receives `isDarkMode` (resolved from the text view's effective appearance, like rendered tables) so renderers can match light/dark. `styleDiagramBlocks` also measures the reading column and routes diagrams wider than it through the existing `.collapsedSourceScrollable` overlay (with a stable per-occurrence sourceID) instead of letting them overflow the text view. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Adds first-class inline rendering support for fenced “diagram” code blocks (e.g. mermaid … ) by introducing a DiagramRenderer service and a new styling pass that replaces standalone fenced blocks with rendered images when the caret is outside the block.
Changes:
- Introduces
DiagramRenderer/DiagramRenderResultplus a defaultNoOpDiagramRenderer. - Extends
MarkdownEditorServiceswith adiagramsslot (defaulting to no-op). - Adds
styleDiagramBlocksto render eligible fenced code blocks as images (including wide-diagram scrollable overlay support).
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| Sources/MarkdownEngine/Styling/MarkdownStyler+Diagrams.swift | New styling pass that detects standalone fenced code blocks, renders diagrams, and emits collapsed-source image blocks (with scrollable mode for wide diagrams). |
| Sources/MarkdownEngine/Styling/MarkdownStyler.swift | Hooks the diagram styling pass into the overall styling pipeline. |
| Sources/MarkdownEngine/Services/MarkdownEditorServices.swift | Adds the DiagramRenderer API and wires it into editor services with a no-op default. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+61
to
+72
| let mode: RenderedStandaloneBlockMode | ||
| if result.size.width > containerWidth + 0.5 { | ||
| let occurrence = occurrenceBySource[source, default: 0] | ||
| occurrenceBySource[source] = occurrence + 1 | ||
| mode = .collapsedSourceScrollable( | ||
| markerTexts: markerTexts, | ||
| displayWidth: containerWidth, | ||
| sourceID: diagramSourceID(for: source, occurrence: occurrence) | ||
| ) | ||
| } else { | ||
| mode = .collapsedSource(markerTexts: markerTexts) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds a
DiagramRendererservice protocol (mirroringLatexRenderer) plus adiagramsslot inMarkdownEditorServices, and astyleDiagramBlockspass that intercepts standalone fenced code blocks whose info string a renderer claims (e.g.```mermaid) and draws the returned image in place of the source via the existingappendRenderedStandaloneBlockmachinery.renderreceivesisDarkMode(resolved from the text view's effective appearance, like rendered tables) so renderers can match light/dark..collapsedSourceScrollableoverlay instead of overflowing.Defaults to a
NoOpDiagramRenderer, so existing embedders are unaffected. Same structural pattern as block LaTeX — the host supplies the image (e.g. via a Mermaid renderer).Context: extracted from the ChristineTham/swift-markdown-engine fork used by HelloNotes.