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

Allow codefence regex to accept any characters after first three backticks #788

Merged
merged 1 commit into from
Sep 4, 2024

Conversation

tsa321
Copy link
Contributor

@tsa321 tsa321 commented Aug 21, 2024

Fixed Issues

$ Expensify/App#45088

Tests

  1. What unit/integration tests cover your change? What autoQA tests cover your change?
    I have add unit tests for this issue.
  2. What tests did you perform that validates your changed worked?
    Update the related regex in the expensify-common in node module and send the test messages from composer of the App.
    Test example:
```   
test
```
```  abc 
test
```

The code fence/ code block must be displayed properly.

Verify the displayed message is displayed correctly.

QA

  1. What does QA need to do to validate your changes?
    Same as test above
  2. What areas to they need to test for regressions?
    Code fence related regression tests.

…ktick

Signed-off-by: Tsaqif <tsaiinkwa@yahoo.com>
@tsa321 tsa321 requested a review from a team as a code owner August 21, 2024 00:57
@melvin-bot melvin-bot bot requested review from deetergp and removed request for a team August 21, 2024 00:57
@tsa321
Copy link
Contributor Author

tsa321 commented Aug 21, 2024

cc @akinwale

@tsa321
Copy link
Contributor Author

tsa321 commented Aug 21, 2024

@akinwale Just to confirm when sending message for example:

```aaa
bbb
```

The displayed message is:

bbb

The aaa text is removed. When editing the message, the aaa text no longer appears.
It looks like:

```
bbb
```

This is expected behavior right?

@tsa321
Copy link
Contributor Author

tsa321 commented Aug 21, 2024

cc @AndrewGable

@AndrewGable
Copy link
Contributor

cc @akinwale - Want to review?

@akinwale
Copy link

@akinwale Just to confirm when sending message for example:

```aaa
bbb

The displayed message is:

bbb


The `aaa` text is removed. When editing the message, the `aaa` text no longer appears. It looks like:

bbb

This is expected behavior right?

I don't think this is expected behaviour. The characters within the codefence should be included instead of being stripped out.

@tsa321
Copy link
Contributor Author

tsa321 commented Aug 22, 2024

@akinwale so the expected result would be:

aaa
bbb

Right?

@akinwale
Copy link

@akinwale so the expected result would be:

aaa
bbb

Right?

Yes, this is correct.

@deetergp
Copy link
Contributor

The characters within the codefence should be included instead of being stripped out.

I will volley here and say that yes, this is the expected behavior for every Markdown variant I have ever come across. If you want your text to appear in your codefence, you need to make sure it's after the line containing the triple backticks. In some variants the area after the backticks is reserved for specifying what flavor of context highlighting you want for you code.

@tsa321
Copy link
Contributor Author

tsa321 commented Aug 23, 2024

@deetergp I have made some modifications to the regex; it now functions as shown in this video:

Test video:
codefence--with-syntax.mp4

Currently, it works offline.

This is achieved by adding a syntax attribute to the <pre> tag. For example:

```javascript
aaa
bbb
```

This will be converted to: <pre syntax='javascript'>aaa<br />bbb<br /></pre>. When editing the message, the syntax value will be restored right after the first three backticks.


It is currently working offline because the server removes all attributes from the <pre> tag, including the syntax attribute.

HTTP request payload:

request-payload

Server response:

server-response


What do you think? Should we proceed with this solution?

@tsa321
Copy link
Contributor Author

tsa321 commented Aug 23, 2024

Or maybe we just want to address the original issue by allowing only white spaces after the first three backticks.
cc @akinwale

@deetergp
Copy link
Contributor

Yeah, I think allowing anything after the three backticks is fine, but expected behavior should be that they are not rendered in the code block.

@tsa321
Copy link
Contributor Author

tsa321 commented Aug 24, 2024

@deetergp I completely agree.

I have a question about when user edits the message: should we display the text placed after the first three backticks and before the new line? If we want to display it during editing, this will require back-end changes, as I mentioned here.

@deetergp
Copy link
Contributor

@tsa321 Let's not block on that. Right now we don't really support any kind of context highlighting, so there's no real reason for text to be there anyway.

@tsa321
Copy link
Contributor Author

tsa321 commented Aug 26, 2024

@akinwale based on the expected results above, my code changes in this PR are fine.

@tsa321
Copy link
Contributor Author

tsa321 commented Aug 28, 2024

kindly bump for review @akinwale

@tsa321
Copy link
Contributor Author

tsa321 commented Sep 3, 2024

kindly bump for review @akinwale.
Or maybe @AndrewGable Could you review this instead?

@akinwale
Copy link

akinwale commented Sep 3, 2024

kindly bump for review @akinwale. Or maybe @AndrewGable Could you review this instead?

Reviewing this today.

Copy link

@akinwale akinwale left a comment

Choose a reason for hiding this comment

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

LGTM.

@akinwale
Copy link

akinwale commented Sep 4, 2024

@tsa321 Looks good, thanks. Will wait for internal review from @deetergp or @AndrewGable and then you can create the corresponding PR in the Expensify App repo.

@AndrewGable AndrewGable merged commit 49e7119 into Expensify:main Sep 4, 2024
6 checks passed
Copy link

github-actions bot commented Sep 4, 2024

🚀Published to npm in v2.0.84

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