2026-05-14 19:45:10 +07:00
# Test Slide Feature
Selamat datang di materi uji coba fitur slide.
---slide-start---
# Slide 1: Pengenalan
Ini adalah konten slide pertama.
---
# Slide 2: Keuntungan
- Mudah digunakan
- Berbasis Markdown
- Interaktif
feat(embed): add raw HTML embed fence with bleach sanitization
- Add embed markdown fence: user pastes raw embed HTML code
(from Canva/YouTube/Google Docs Share→Embed) into lesson markdown
and slide content. Backend sanitizes via bleach (whitelist
tags/attrs/styles) + checks iframe src against domain blacklist
(SSRF prevention). Frontend renders iframe directly — no lazy
action needed.
- Backend: _process_embed_embeds + _sanitize_embed_html in
lesson_service.py, applied to lesson_content, exercise,
lesson_info, and slide loop. Graceful fallback if tinycss2
missing (CSS unsanitized but tags/attrs still stripped).
- Tests: 9 pytest cases (Canva/YouTube HTML, script stripping,
onclick stripping, blocked domain, non-https iframe, empty,
unchanged, dangerous style).
- Frontend: remove renderEmbedEmbeds.ts + wire-up + .generic-embed
CSS (URL-only approach from earlier iteration, superseded).
Keep .embed-error CSS for error messages.
- Example: update test_slides.md with raw HTML Canva embed (slide)
+ YouTube embed (body).
- Deps: bleach>=6.0.0, tinycss2>=1.2.0 in requirements.txt.
- Docs: consolidate 4 plan files into docs/06-embed-content.md.
2026-07-19 15:39:38 +07:00
```embed
< div style = "position: relative ; width: 100 % ; height: 0 ; padding-top: 56 . 2500 % ;
padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
border-radius: 8px; will-change: transform;">
< iframe loading = "lazy" style = "position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"
src="https://www.canva.com/design/DAGxLO8cerw/GoZd4ObhxuXX2Don8fbBEg/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
< / iframe >
< / div >
< a href = "https://www.canva.com/design/DAGxLO8cerw/GoZd4ObhxuXX2Don8fbBEg/view?utm_content=DAGxLO8cerw&utm_campaign=designshare&utm_medium=embeds&utm_source=link" target = "_blank" rel = "noopener" > Berfikir Komputasional < / a > by ANGGORO DWI NUR ROHMAN
```
2026-05-14 19:45:10 +07:00
---
# Slide 3: Selesai
Terima kasih telah mencoba!
---slide-end---
Setelah slide di atas, ini adalah konten materi biasa.
feat(embed): add raw HTML embed fence with bleach sanitization
- Add embed markdown fence: user pastes raw embed HTML code
(from Canva/YouTube/Google Docs Share→Embed) into lesson markdown
and slide content. Backend sanitizes via bleach (whitelist
tags/attrs/styles) + checks iframe src against domain blacklist
(SSRF prevention). Frontend renders iframe directly — no lazy
action needed.
- Backend: _process_embed_embeds + _sanitize_embed_html in
lesson_service.py, applied to lesson_content, exercise,
lesson_info, and slide loop. Graceful fallback if tinycss2
missing (CSS unsanitized but tags/attrs still stripped).
- Tests: 9 pytest cases (Canva/YouTube HTML, script stripping,
onclick stripping, blocked domain, non-https iframe, empty,
unchanged, dangerous style).
- Frontend: remove renderEmbedEmbeds.ts + wire-up + .generic-embed
CSS (URL-only approach from earlier iteration, superseded).
Keep .embed-error CSS for error messages.
- Example: update test_slides.md with raw HTML Canva embed (slide)
+ YouTube embed (body).
- Deps: bleach>=6.0.0, tinycss2>=1.2.0 in requirements.txt.
- Docs: consolidate 4 plan files into docs/06-embed-content.md.
2026-07-19 15:39:38 +07:00
## canva embed
```embed
< div style = "position: relative ; width: 100 % ; height: 0 ; padding-top: 56 . 2500 % ;
padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
border-radius: 8px; will-change: transform;">
< iframe loading = "lazy" style = "position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"
src="https://www.canva.com/design/DAGxLO8cerw/GoZd4ObhxuXX2Don8fbBEg/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
< / iframe >
< / div >
< a href = "https://www.canva.com/design/DAGxLO8cerw/GoZd4ObhxuXX2Don8fbBEg/view?utm_content=DAGxLO8cerw&utm_campaign=designshare&utm_medium=embeds&utm_source=link" target = "_blank" rel = "noopener" > Berfikir Komputasional < / a > by ANGGORO DWI NUR ROHMAN
```
## Youtube Embed
```embed
< iframe width = "560" height = "315" src = "https://www.youtube.com/embed/QiLhQjYCP2Q?si=CwNjoALVUjeTJoSu" title = "YouTube video player" frameborder = "0" allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy = "strict-origin-when-cross-origin" allowfullscreen > < / iframe >
```
2026-05-14 19:45:10 +07:00
```c
#include <stdio.h>
int main() {
printf("Uji coba slide\n");
return 0;
}
```
