Skip to content

Bug: Partial schema highlighting in JsonEditor is fragile and can misidentify tokens #1871

@ayushman1210

Description

@ayushman1210

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

  1. Load the JsonEditor component with a jsonc block marked as // partial schema.
  2. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: TriageThis is the initial status for an issue that requires triage.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions