[+] [Fix] [Bug] Dollar sign causing rendering issues #2843
Conversation
H0llyW00dzZ
changed the title
|
Note: |
|
@H0llyW00dzZ , you did a timely and great job! But I found a bug under iOS 15.x environment: The trace stack points to the function you modified in
|
|
@a6z6, you may need to whitelist user agents depending on the iOS 15.x environment or other iOS versions if you have a correct regex for it. Here is a sample code: const userAgent = navigator.userAgent.toLowerCase();
const isAppleDevice = /(iphone|ipad|ipod|macintosh)/i.test(userAgent) || (userAgent.includes('mac') && 'ontouchend' in document);
let escapedContent = props.content;
if (isAppleDevice) { // custom-regex for unsupported Apple devices
escapedContent = props.content.replace(/your-custom-regex/g, (match, codeBlock) => {
// Replace the matched content with your desired replacement
if (codeBlock) {
return match; // Return the code block as it is
} else {
return "$"; // Escape dollar signs outside of code blocks
}
});
} else {
escapedContent = props.content.replace(/(`{3}[\s\S]*?`{3}|`[^`]*`)|(?<!\$)(\$(?!\$))/g, (match, codeBlock) => {
// Exclude code blocks & math blocks from replacement
if (codeBlock) {
return match; // Return the code block as it is
} else {
return "$"; // Escape dollar signs outside of code blocks
}
});
}note that you should replace |
[+] fix(markdown.tsx): fix escaping of dollar signs outside of code blocks [+] fix(markdown.tsx): add support for custom-regex for unsupported Apple devices
|
@H0llyW00dzZ is attempting to deploy a commit to the NextWeb Team on Vercel. A member of the Team first needs to authorize it. |
[+] chore(markdown.tsx): import isIOS function from utils file [+] refactor(markdown.tsx): replace userAgent check with isAppleDevice function
|
@H0llyW00dzZ , Great, I tried to modify your code, works fine! 🙌🏻 function _MarkDownContent(props: { content: string }) {
const userAgent = window.navigator.userAgent;
const isAppleIosDevice = isIOS(); // Load isAppleIosDevice from isIOS functions
// According to this post: https://www.drupal.org/project/next_webform/issues/3358901
// iOS 16.4 is the first version to support lookbehind
const iosVersionSupportsLookBehind = 16.4;
let doesIosSupportLookBehind = false;
if (isAppleIosDevice) {
const match = /OS (\d+([_.]\d+)+)/.exec(userAgent);
if (match && match[1]) {
const iosVersion = parseFloat(match[1].replace("_", "."));
doesIosSupportLookBehind = iosVersion >= iosVersionSupportsLookBehind;
}
}
let escapedContent = props.content;
if (isAppleIosDevice && !doesIosSupportLookBehind) {
escapedContent = props.content.replace(
// Exclude code blocks & math block from replacement
// custom-regex for unsupported Apple devices
/(`{3}[\s\S]*?`{3}|`[^`]*`)|(\$(?!\$))/g,
(match, codeBlock) => {
if (codeBlock) {
return match; // Return the code block as it is
} else {
return "$"; // Escape dollar signs outside of code blocks
}
},
);
} else {
escapedContent = props.content.replace(
// Exclude code blocks & math block from replacement
/(`{3}[\s\S]*?`{3}|`[^`]*`)|(?<!\$)(\$(?!\$))/g,
(match, codeBlock) => {
if (codeBlock) {
return match; // Return the code block as it is
} else {
return "$"; // Escape dollar signs outside of code blocks
}
},
);
}
return (
...The actual testing result shows, iOS 15.4, iOS 16.1, iOS 16.6, Chrome Browser, all works well with dollar sign! 💰Hope this helps! |
|
@a6z6 nice I'll update the commits with ur code |
[+] fix(markdown.tsx): rename isAppleDevice variable to isAppleIosDevice and add logic to check if iOS version supports lookbehind regex Co-Authored-By: Amor Zara <[email protected]>
|
In the wilds |
[+] fix(markdown.tsx): change window.navigator.userAgent to navigator.userAgent.toLowerCase() to get user agent in lowercase
|
Great work! It could be better to extract the logic to a new function |
|
@Yidadaa alright I noted that |
[+] fix(markdown.tsx): add useMemo hook to escapeMarkdownContent function to improve performance [+] feat(markdown.tsx): import and use isMacOS function from utils file in escapeMarkdownContent function
|
@Yidadaa check |
|
Looks like a fail on this simple case, here's the output on GitHub: what is
|
|
you have to add 4 backticks
|
|
Why? What syntax is this? I have never seen this syntax for expressing mathematical formulas. |
|
@Yidadaa its this one |
|
@H0llyW00dzZ My question is why should we "add 4 backticks" to it? Is it a workaround? |
|
its default from package markdown I think |
|
I understand what you mean. In most cases, chatgpt will try to wrap latex formulas in code block syntax. Your solution tries to parse the formulas in the code block, but this is not a commonly used markdown syntax. Normal markdown The syntax is to use the $ symbol to wrap the formula directly in the text. We should learn how github handles formula input and only replace the text with blank characters before and after $. |
|
yeah but its bug for dollar sign in markdown not easily fix and its looks weird |
yeah but it's big for dollar sign in markdown |
Ref : [Bug] Dollar sign causing rendering issues? #2841