CodeEditor: CodeMirror 6 spike for the FHIR validator (do not merge yet) - #75
Draft
losolio wants to merge 2 commits into
Draft
CodeEditor: CodeMirror 6 spike for the FHIR validator (do not merge yet)#75losolio wants to merge 2 commits into
losolio wants to merge 2 commits into
Conversation
A spike evaluating CodeMirror 6 as the editable code surface for the FHIR resource validator — dressed in ratio-ui so it can be judged next to the read-only Shiki CodeBlock. - `<CodeEditor value onChange language diagnostics />` — JSON/XML/JS/TS via the CodeMirror language packages, plus inline diagnostics (squiggles, gutter markers, readable tooltip) fed from an external source such as a FHIR OperationOutcome. - Chrome from ratio-ui's `--code-*` tokens; github light/dark syntax colours that follow `data-theme`, with hues assigned by role (blue = keys/tags, green = strings, orange = numbers, red = bool/null) so a JSON key never reads like its value. - Stories: FHIR Patient JSON and XML with sample validation issues, plus a TypeScript sample. Marked `private` — an evaluation spike, not published. Known gaps: `value` is the initial document only (the controlled sync needs a robust reimplementation), no client-side live lint, and the CodeMirror singleton/peer-dep strategy is unresolved. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Retitle the Shiki CodeBlock story so it sits beside the new CodeEditor story in one sidebar group — the read-only and editable code surfaces are then next to each other for comparison. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
|
Storybook preview: https://preview-75.ratio-ui.pages.dev |
There was a problem hiding this comment.
Pull request overview
This PR introduces a new spike package (@eventuras/ratio-ui-codeeditor) to evaluate CodeMirror 6 as an editable code surface for the FHIR validator, styled to match ratio-ui and comparable alongside the existing Shiki CodeBlock in Storybook.
Changes:
- Added a new private package implementing a
CodeEditorcomponent with language support (JSON/XML/JS/TS) and externally-provided inline diagnostics. - Added Storybook stories for side-by-side comparison under the
Code/grouping (and movedCodeBlockinto the same group). - Updated the lockfile to include CodeMirror/Lezer dependencies for the new package.
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Adds CodeMirror/Lezer dependency graph and a new workspace importer entry for ratio-ui-codeeditor. |
| packages/ratio-ui-shiki/src/CodeBlock/CodeBlock.stories.tsx | Renames Storybook grouping to Code/CodeBlock for side-by-side comparison. |
| packages/ratio-ui-codeeditor/package.json | Defines the new private spike package, build/lint scripts, exports, and dependency strategy. |
| packages/ratio-ui-codeeditor/tsconfig.json | TypeScript config for building declarations and dist output. |
| packages/ratio-ui-codeeditor/vite.config.ts | Vite lib build config with CodeMirror packages externalized (singleton/dedupe intent). |
| packages/ratio-ui-codeeditor/src/index.ts | Public entrypoint re-exporting CodeEditor and types. |
| packages/ratio-ui-codeeditor/src/CodeEditor/index.ts | Secondary entrypoint export for ./CodeEditor. |
| packages/ratio-ui-codeeditor/src/CodeEditor/CodeEditor.tsx | Implements the CodeMirror-backed editor with diagnostics, theme switching, and readOnly/language compartments. |
| packages/ratio-ui-codeeditor/src/CodeEditor/theme.ts | Adds ratio-ui chrome theming and GitHub-like syntax highlighting palettes. |
| packages/ratio-ui-codeeditor/src/CodeEditor/CodeEditor.stories.tsx | Storybook scenarios (FHIR JSON/XML + diagnostics, TS sample) for evaluation. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+62
to
+67
| /** | ||
| * A CodeMirror 6 editor dressed in ratio-ui: chrome from the `--code-*` tokens, | ||
| * github light/dark syntax colors that follow the app's mode, JSON/XML/JS/TS | ||
| * languages, and inline `diagnostics` (squiggles + gutter). Controlled via | ||
| * `value` / `onChange`. | ||
| */ |
| ]); | ||
| } | ||
|
|
||
| /** Syntax highlighting for the given mode (the only highlighter — no basicSetup default). */ |
Comment on lines
+251
to
+255
| react: | ||
| specifier: ^19.0.0 | ||
| version: 19.2.7 | ||
| react-dom: | ||
| specifier: ^19.0.0 |
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.
Summary
A spike evaluating CodeMirror 6 as the editable code surface for the FHIR resource validator — dressed in ratio-ui so it can be judged next to the read-only Shiki
CodeBlock.This is deliberately not a production package: it is
private: true(never published), and not meant to merge yet. It exists so we can look at it and decide between the lightweight Shiki route and a real editor.What's in it
@eventuras/ratio-ui-codeeditor—<CodeEditor value onChange language diagnostics />:OperationOutcome) render as squiggles + gutter markers with a readable tooltip.--code-*tokens; github light/dark syntax colours that followdata-theme, with hues assigned by role (blue = keys/tags, green = strings, orange = numbers, red = bool/null) so a JSON key never reads like its value.Code/besideCode/CodeBlockfor side-by-side comparison.Verification
tsc --noEmit0,eslint0, workspacebuild0. Exercised live in Storybook: editing, light/dark toggle, and inline diagnostics.Known gaps (spike-level)
valueis the initial document only — the controlled value-sync was removed while debugging a highlighting bug and needs a robust reimplementation.Open design question
The FHIR validator design puts inline annotations on a read-only source view, with a plain
<textarea>for input. If that is the flow, the ShikiCodeBlockroute may be enough and a full editor unnecessary. That decision is still open — this spike is one half of the comparison.🤖 Generated with Claude Code