Skip to content

Fix applying styles for inline code syntaxes #732

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jmusial merged 3 commits into from
Oct 8, 2025
Merged

Fix applying styles for inline code syntaxes #732

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
30eed0c
Fix applying styles for inline code syntaxes
Skalakid Oct 6, 2025
d66a8d9
Add nested code parsing tests
Skalakid Oct 6, 2025
0169cdc
Add review changes
Skalakid Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 92 additions & 4 deletions src/__tests__/parseExpensiMark.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,9 +222,9 @@ test('email with multiline hyperlinks', () => {

test('inline code', () => {
expect('Hello `world`!').toBeParsedAs([
{type: 'syntax', start: 6, length: 1},
{type: 'syntax', start: 6, length: 1, syntaxType: 'opening'},
{type: 'code', start: 7, length: 5},
{type: 'syntax', start: 12, length: 1},
{type: 'syntax', start: 12, length: 1, syntaxType: 'closing'},
]);
});

Expand Down Expand Up @@ -585,9 +585,9 @@ describe('report mentions', () => {

test('report mention with markdown', () => {
expect('reported #`report-name` should be highlighted').toBeParsedAs([
{type: 'syntax', start: 10, length: 1},
{type: 'syntax', start: 10, length: 1, syntaxType: 'opening'},
{type: 'code', start: 11, length: 11},
{type: 'syntax', start: 22, length: 1},
{type: 'syntax', start: 22, length: 1, syntaxType: 'closing'},
]);
});

Expand Down Expand Up @@ -678,3 +678,91 @@ describe('inline video', () => {
]);
});
});

describe('nested inline code', () => {
test('starting with emoji', () => {
expect('_~`🚀test`~_').toBeParsedAs([
{type: 'syntax', start: 0, length: 1},
{type: 'italic', start: 1, length: 2},
{type: 'italic', start: 5, length: 4},
{type: 'italic', start: 9, length: 2},
{type: 'syntax', start: 1, length: 1},
{type: 'strikethrough', start: 2, length: 1},
{type: 'strikethrough', start: 5, length: 4},
{type: 'strikethrough', start: 9, length: 1},
{type: 'syntax', start: 2, length: 1, syntaxType: 'opening'},
{type: 'code', start: 3, length: 6},
{type: 'emoji', start: 3, length: 2},
{type: 'syntax', start: 9, length: 1, syntaxType: 'closing'},
{type: 'syntax', start: 10, length: 1},
{type: 'syntax', start: 11, length: 1},
]);
});

test('emoji in the middle', () => {
expect('_~`te🚀st`~_').toBeParsedAs([
{type: 'syntax', start: 0, length: 1},
{type: 'italic', start: 1, length: 2},
{type: 'italic', start: 3, length: 2},
{type: 'italic', start: 7, length: 2},
{type: 'italic', start: 9, length: 2},
{type: 'syntax', start: 1, length: 1},
{type: 'strikethrough', start: 2, length: 1},
{type: 'strikethrough', start: 3, length: 2},
{type: 'strikethrough', start: 7, length: 2},
{type: 'strikethrough', start: 9, length: 1},
{type: 'syntax', start: 2, length: 1, syntaxType: 'opening'},
{type: 'code', start: 3, length: 6},
{type: 'emoji', start: 5, length: 2},
{type: 'syntax', start: 9, length: 1, syntaxType: 'closing'},
{type: 'syntax', start: 10, length: 1},
{type: 'syntax', start: 11, length: 1},
]);
});

test('ending with emoji', () => {
expect('_~`test🚀`~_').toBeParsedAs([
{type: 'syntax', start: 0, length: 1},
{type: 'italic', start: 1, length: 2},
{type: 'italic', start: 3, length: 4},
{type: 'italic', start: 9, length: 2},
{type: 'syntax', start: 1, length: 1},
{type: 'strikethrough', start: 2, length: 1},
{type: 'strikethrough', start: 3, length: 4},
{type: 'strikethrough', start: 9, length: 1},
{type: 'syntax', start: 2, length: 1, syntaxType: 'opening'},
{type: 'code', start: 3, length: 6},
{type: 'emoji', start: 7, length: 2},
{type: 'syntax', start: 9, length: 1, syntaxType: 'closing'},
{type: 'syntax', start: 10, length: 1},
{type: 'syntax', start: 11, length: 1},
]);
});

test('emoji inside and outside inline code', () => {
expect('_~🚀`🚀te🚀st🚀`🚀~_').toBeParsedAs([
{type: 'syntax', start: 0, length: 1},
{type: 'italic', start: 1, length: 1},
{type: 'italic', start: 4, length: 1},
{type: 'italic', start: 7, length: 2},
{type: 'italic', start: 11, length: 2},
{type: 'italic', start: 15, length: 1},
{type: 'italic', start: 18, length: 1},
{type: 'syntax', start: 1, length: 1},
{type: 'strikethrough', start: 4, length: 1},
{type: 'strikethrough', start: 7, length: 2},
{type: 'strikethrough', start: 11, length: 2},
{type: 'strikethrough', start: 15, length: 1},
{type: 'emoji', start: 2, length: 2},
{type: 'syntax', start: 4, length: 1, syntaxType: 'opening'},
{type: 'code', start: 5, length: 10},
{type: 'emoji', start: 5, length: 2},
{type: 'emoji', start: 9, length: 2},
{type: 'emoji', start: 13, length: 2},
{type: 'syntax', start: 15, length: 1, syntaxType: 'closing'},
{type: 'emoji', start: 16, length: 2},
{type: 'syntax', start: 18, length: 1},
{type: 'syntax', start: 19, length: 1},
]);
});
});
1 change: 1 addition & 0 deletions src/commonTypes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ interface MarkdownRange {
start: number;
length: number;
depth?: number;
syntaxType?: 'opening' | 'closing';
}

type InlineImagesInputProps = {
Expand Down
12 changes: 7 additions & 5 deletions src/rangeUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,20 +56,22 @@ function ungroupRanges(ranges: MarkdownRange[]): MarkdownRange[] {
});
return ungroupedRanges;
}

/**
* Creates a list of ranges that should not be formatted by certain markdown types (italic, strikethrough).
* This includes emojis and syntaxes of inline code blocks.
*/
function getRangesToExcludeFormatting(ranges: MarkdownRange[]) {
function getRangesToExcludeFormatting(ranges: MarkdownRange[]): MarkdownRange[] {
let closingSyntaxPosition: number | null = null;
return ranges.filter((range, index) => {
const nextRange = ranges[index + 1];
const currentRange = range;
if (nextRange && nextRange.type === 'code' && range.type === 'syntax') {
currentRange.syntaxType = 'opening';
closingSyntaxPosition = nextRange.start + nextRange.length;
return true;
}
if (closingSyntaxPosition !== null && range.type === 'syntax' && range.start <= closingSyntaxPosition) {
currentRange.syntaxType = 'closing';
closingSyntaxPosition = null;
return true;
}
Expand Down Expand Up @@ -115,11 +117,11 @@ function excludeRangeTypesFromFormatting(ranges: MarkdownRange[], baseMarkdownTy
const newRange: MarkdownRange = {
type: currentRange.type,
start: currentStart,
length: excludeRangeStart - currentStart,
length: excludeRangeStart - currentStart + (excludeRange.syntaxType === 'opening' ? 1 : 0), // Adjust the length so the new range from the split ends after the opening syntax
...(currentRange?.depth && {depth: currentRange?.depth}),
};
currentRange.start = excludeRangeEnd;
currentRange.length = currentEnd - excludeRangeEnd;
currentRange.start = excludeRangeEnd + (excludeRange.syntaxType === 'closing' ? -1 : 0); // Adjust the current range to start before the closing syntax
currentRange.length = currentEnd - excludeRangeEnd + (excludeRange.syntaxType === 'closing' ? 1 : 0);

if (newRange.length > 0) {
newRanges.push(newRange);
Expand Down