Fix silently-disabled syntax highlighting; add copyable CodeEditor - #7
Merged
Merged
Conversation
`rollupOptions.external` listed `@codemirror/state`, `view`, `lang-json` and `lang-markdown`, but not `@codemirror/language` or `@codemirror/commands`, so the library build inlined those two into extra chunks. Consumers therefore loaded TWO copies of `@codemirror/language`: the language extensions registered their syntax tree against the facets of the copy in the app's node_modules, while `syntaxHighlighting(defaultHighlightStyle)` read the facets of the bundled copy. It found nothing, and every CodeEditor in every consuming app rendered as flat monochrome text — with no error, and with Storybook unaffected because it compiles from `src` against a single copy. - vite.config.ts: externalise every @codemirror/* package. - package.json: declare the optional peers in `peerDependencies` too, not only in `peerDependenciesMeta` (the latter alone pins no version range). - scripts/verify-externals.mjs: fail `npm run build` on any unexpected chunk or relative import in dist — the only place this class of bug is visible. - CodePreview: it never applied `syntaxHighlighting` at all. Now it does. - CodeEditor: new opt-in `copyable` prop (with `copyLabel` /`copiedMessage`) pinning a CopyButton over the top-right. Sticky, not absolute, so it stays put while a long document scrolls in `autoHeight` mode. It copies the pretty-printed document rather than the raw `modelValue`. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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
1 participant
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.
The bug
rollupOptions.externallisted@codemirror/state,view,lang-jsonandlang-markdown— but not@codemirror/languageor@codemirror/commands. Rollup inlined those two into extra chunks (dist/index-CCl_-Asu.js,dist/index-3Q3F9MC4.js), so every consumer loaded two copies of@codemirror/language:lang-json/lang-markdownresolve the app'snode_modulescopy and register their syntax tree against its facets;syntaxHighlighting(defaultHighlightStyle)came from the bundled copy and read its facets.It found nothing. Every
CodeEditorin every consuming app rendered as flat monochrome text, with no error in the console. Storybook never showed it because it compiles fromsrcagainst a single copy.Changes
vite.config.ts— externalise every@codemirror/*package.package.json— declare the optional peers inpeerDependencies, not only inpeerDependenciesMeta(which alone pins no version range).scripts/verify-externals.mjs(new, wired intonpm run build) — fails the build on any unexpected chunk indist/or any relative import out offlows.js. This is the only place the regression is observable; neither Storybook nor Playwright can see it. Verified it fails when the two externals are removed again.CodePreview— never appliedsyntaxHighlightingat all. Now it does.CodeEditor— new opt-incopyableprop (pluscopyLabel/copiedMessage) pinning aCopyButtontop-right.sticky, notabsolute, so it stays put while a long document scrolls inautoHeightmode; copies the pretty-printed document rather than the rawmodelValue.Tests
CodeEditor.stories.ts—JsonandMarkdownplay functions assert some token is painted a colour other than the body text's. (Deliberately not "more than one token colour": a short JSON document may contain only one styled tag kind, sincedefaultHighlightStyleleaves plainpropertyNameuncoloured.)interactions.spec.ts— a copyable editor writes its pretty-printed document to the clipboard.🤖 Generated with Claude Code