json-schema-org / json-schema-org/website

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

Open
#1,871 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Status: Stale Status: Triage
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

  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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.