json-schema-org / json-schema-org/website
Bug: Partial schema highlighting in JsonEditor is fragile and can misidentify tokens
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 169
- Forks
- 484
- Avg merge
- 2d 2h
- Merged PRs (30d)
- 6
Description
Description
In the JsonEditor.tsx component, the getBasicSyntaxParts function provides syntax highlighting for "partial schemas" by using a series of regular expressions to identify JSON tokens (strings, numbers, properties, etc.).
This regex-based approach is fragile because it doesn't account for JSON structure. A regex for one token type (like an object property) can incorrectly match text inside another token (like a string value). This leads to incorrect and confusing syntax highlighting.
Steps to Reproduce
- Load the JsonEditor component with a jsonc block marked as // partial schema.
- Use a string value that contains text matching another token's pattern. For example, a string that contains a quoted key followed by a colon.
// partial schema
{
"description": "This string contains "key": "value" which might be confused for a property."
}
Expected Behavior
The entire line "description": "This string contains "key": "value" which might be confused for a property." should be highlighted as a single key-value pair. The text "key": "value" should be highlighted as part of the string value.
Actual Behavior
The regex for object properties (/"[^"\](?:\.[^"\])"\s:/g) will likely match "key": inside the string value. This will cause key to be incorrectly highlighted as an object property, breaking the highlighting for the rest of the string
Suggested Fix
Here is a draft for the GitHub issue you requested.
Title: Bug: Partial schema highlighting in JsonEditor is fragile and can misidentify tokens
Description:
In the JsonEditor.tsx component, the getBasicSyntaxParts function provides syntax highlighting for "partial schemas" by using a series of regular expressions to identify JSON tokens (strings, numbers, properties, etc.).
This regex-based approach is fragile because it doesn't account for JSON structure. A regex for one token type (like an object property) can incorrectly match text inside another token (like a string value). This leads to incorrect and confusing syntax highlighting.
Steps to Reproduce:
Load the JsonEditor component with a jsonc block marked as // partial schema.
Use a string value that contains text matching another token's pattern. For example, a string that contains a quoted key followed by a colon.
Example Code:
Code snippet
// partial schema
{
"description": "This string contains "key": "value" which might be confused for a property."
}
Expected Behavior: The entire line "description": "This string contains "key": "value" which might be confused for a property." should be highlighted as a single key-value pair. The text "key": "value" should be highlighted as part of the string value.
Actual Behavior: The regex for object properties (/"[^"\](?:\.[^"\])"\s:/g) will likely match "key": inside the string value. This will cause key to be incorrectly highlighted as an object property, breaking the highlighting for the rest of the string.
Suggested Fix:
The regex-based tokenization in getBasicSyntaxParts should be made more context-aware. The patterns should ideally be applied in an order that prioritizes capturing entire tokens, especially strings.
One approach is to first identify all string literals (/"[^"\](?:\.[^"\])*"/g) and treat them as single stringValue tokens. Only after all strings are identified should the regex for other tokens (like objectProperty) be run on the remaining text. This would prevent the object property regex from matching text that is already confirmed to be inside a string.
please assign me this issue i like to work on it
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in JsonEditor.tsx at getBasicSyntaxParts and reproduce the partial-schema example with escaped quoted text inside a string value. Trace how the token regular expressions are applied, then verify that the embedded "key": "value" remains part of the string and the full description entry is highlighted as one key-value pair.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 67/100