Skip to content
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.

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

Remove splitting ranges on emojis on the web #598

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

Skalakid
Copy link
Collaborator

@Skalakid Skalakid commented Jan 15, 2025

Details

This PR fixes the problem with triplicating syntaxes inside the Live Markdown Input, by removing range-splitting logic from the web platform and replacing it with the fix based on CSS styles. In the future, we will focus on fixing the web parser to support splitting emojis among all other styles (especially inline code block) and properly handle tag hierarchy edge cases when building HTML structure.

Related Issues

Expensify/App#55115

Manual Tests

  1. To the text that contains emojis, add italics styling, e.g. _🥰 test 😇 test 🥹_
  2. Verify if the text has italics style and emojis don't
  3. Verify if it still works when adding other styles around it, e.g. # *~_🥰 test 😇 test 🥹_~*
  4. Verify if emojis aren't strikethrough
  5. Test it with different style combinations

Linked PRs

#597

Copy link
Collaborator

@BartoszGrajdek BartoszGrajdek left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 👍🏻

One problem I have is that it's not possible to use CMD + ➡️ when the cursor is in front of emoji. (not sure if that's a blocker cc @tomekzaw)

SR
Screen.Recording.2025-01-16.at.16.17.18.mov

const sortedRanges = sortRanges(splittedRanges);
const groupedRanges = groupRanges(sortedRanges);

const groupedRanges = groupRanges(markdownRanges);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe do the sorting again here.

Copy link
Collaborator Author

@Skalakid Skalakid Jan 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need it here. Sorting influences only the web and since we blocked spitting ranges for this platform, the output will still be correctly sorted

@@ -252,13 +252,16 @@ function parseExpensiMark(markdown: string): MarkdownRange[] {
);
return [];
}
const sortedRanges = sortRanges(ranges);
let markdownRanges = sortedRanges;
if (Platform.OS === 'android') {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since parseExpensiMark is a worklet, let's extract Platform.OS outside to avoid capturing whole Platform object in worklet closure.

const isAndroid = Platform.OS === 'android';

function parseExpensiMark(...) {
  if (isAndroid) { /* ... */ }
}

Comment on lines +255 to +256
const sortedRanges = sortRanges(ranges);
let markdownRanges = sortedRanges;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const sortedRanges = sortRanges(ranges);
let markdownRanges = sortedRanges;
let markdownRanges = sortRanges(ranges);

Comment on lines +32 to +33
fontStyle: 'normal',
textDecoration: 'none',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
fontStyle: 'normal',
textDecoration: 'none',
fontStyle: 'normal', // remove italic
textDecoration: 'none', // remove strikethrough

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants