From b4009fea440ab7522cd06c07d56cfa64ddab0aff Mon Sep 17 00:00:00 2001
From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>
Date: Thu, 28 Nov 2024 14:10:50 +0000
Subject: [PATCH] Fix: Allow table rendering in markdown preview tool (#4858)

## Because

Some of our lessons have markdown tables but the necessary table tags
(table/thead/tbody/tr/th/td) are not included in [rails-html-sanitizer's
default allowed
tags](https://github.com/rails/rails-html-sanitizer/blob/5104ca94644d0eb495ef0dced17f62c3e68df8c0/lib/rails/html/sanitizer.rb#L79),
meaning our markdown preview tool won't render tables.

## This PR

- Adds table/thead/tboyd/tr/th/td tags to
`Markdown::PreviewComponent#allowed_tags`.

## Issue
<!--
If this PR closes an open issue in this repo, replace the XXXXX below
with the issue number, e.g. Closes #2013.

If this PR closes an open issue in another TOP repo, replace the #XXXXX
with the URL of the issue, e.g. Closes
https://github.com/TheOdinProject/curriculum/issues/XXXXX

If this PR does not close, but is related to another issue or PR, you
can link it as above without the 'Closes' keyword, e.g. 'Related to
#2013'.
-->
N/A

## Additional Information

### For QA

Go to the [markdown preview
tool](https://www.theodinproject.com/lessons/preview) and enter

```md
| Verb   | Action | Example                                       |
| ------ | ------ | --------------------------------------------- |
| POST   | Create | `POST /posts` Creates a new blog post         |
| GET    | Read   | `GET /posts/:postid` Fetches a single post    |
| PUT    | Update | `PUT /posts/:postid` Updates a single post    |
| DELETE | Delete | `DELETE /posts/:postid` Deletes a single post |
```

Which will fail to render the table (which renders properly in the
actual lessons):

![current broken markdown preview
tool](https://github.com/user-attachments/assets/e4570bea-ec6e-4a6e-bb2b-ec5c63869c78)

Compare that to when the 6 relevant tags are whitelisted in
`#allowed_tags`, which allows rendering of markdown tables as expected
as below:

![fixed markdown preview
tool](https://github.com/user-attachments/assets/99401d8d-91c2-45be-a46a-09ea7f481b5c)

## Pull Request Requirements
<!-- Replace the whitespace between the square brackets with an 'x',
e.g. [x]. After you create the PR, they will become checkboxes that you
can click on. -->
- [x] I have thoroughly read and understand [The Odin Project
Contributing
Guide](https://github.com/TheOdinProject/theodinproject/blob/main/CONTRIBUTING.md)
- [x] The title of this PR follows the `keyword: brief description of
change` format, using one of the following keywords:
    - `Feature` - adds new or amends existing user-facing behavior
- `Chore` - changes that have no user-facing value, refactors,
dependency bumps, etc
    - `Fix` - bug fixes
-   [x] The `Because` section summarizes the reason for this PR
- [x] The `This PR` section has a bullet point list describing the
changes in this PR
- [x] I have verified all tests and linters pass after making these
changes.
- [x] If this PR addresses an open issue, it is linked in the `Issue`
section
-   [x] If applicable, this PR includes new or updated automated tests
---
 app/components/markdown/preview_component.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/markdown/preview_component.rb b/app/components/markdown/preview_component.rb
index ac6055c87b..64b814540e 100644
--- a/app/components/markdown/preview_component.rb
+++ b/app/components/markdown/preview_component.rb
@@ -4,7 +4,7 @@ def initialize(markdown: '')
   end
 
   def allowed_tags
-    Rails::HTML5::SafeListSanitizer::DEFAULT_ALLOWED_TAGS + %w[details summary section]
+    Rails::HTML5::SafeListSanitizer::DEFAULT_ALLOWED_TAGS + %w[details summary section table thead tbody tr th td]
   end
 
   def allowed_attributes