From ceba6e0aee86ce301c554acedc48269e7eb70ea2 Mon Sep 17 00:00:00 2001
From: Myriad-Dreamin <35292584+Myriad-Dreamin@users.noreply.github.com>
Date: Mon, 23 Oct 2023 08:15:36 +0800
Subject: [PATCH] feat(exporter::svg): embed transparent html elements (#379)

* feat(exporter::svg): embed html elements

* dev: update example
---
 contrib/templates/xhtml/lib.typ        | 45 ++++++++++++++++++++++++++
 exporter/svg/src/backend/mod.rs        |  7 ++++
 fuzzers/corpora/visualize/video_00.typ | 23 +++++++++++++
 3 files changed, 75 insertions(+)
 create mode 100644 contrib/templates/xhtml/lib.typ
 create mode 100644 fuzzers/corpora/visualize/video_00.typ

diff --git a/contrib/templates/xhtml/lib.typ b/contrib/templates/xhtml/lib.typ
new file mode 100644
index 00000000..9612d364
--- /dev/null
+++ b/contrib/templates/xhtml/lib.typ
@@ -0,0 +1,45 @@
+
+/// HTML extension
+#let xhtml(outer-width: 1024pt, outer-height: 768pt, inner-width: none, inner-height: none, content) = {
+  let t = content.func()
+  let content = if content.func() == raw {
+    content.text
+  } else {
+    content
+  }
+
+  let inner-width = if inner-width == none {
+    outer-width
+  } else {
+    inner-width
+  }
+
+    let inner-height = if inner-height == none {
+        outer-height
+    } else {
+        inner-height
+    }
+
+  let html-embed = {
+    "<svg viewBox=\"0 0 "
+    str(inner-width.pt())
+    " "
+    str(inner-height.pt())
+    "\""
+    " width=\""
+    str(outer-width.pt())
+    "\" height=\""
+    str(outer-height.pt())
+    "\" xmlns=\"http://www.w3.org/2000/svg\">"
+    "<foreignObject width=\""
+    str(inner-width.pt())
+    "\" height=\""
+    str(inner-height.pt())
+    "\">"
+    content
+    "</foreignObject>"
+    "</svg>"
+  }
+
+  image.decode(html-embed, alt: "!typst-inlined-svg")
+}
diff --git a/exporter/svg/src/backend/mod.rs b/exporter/svg/src/backend/mod.rs
index 1b2cd4dc..adecf9b9 100644
--- a/exporter/svg/src/backend/mod.rs
+++ b/exporter/svg/src/backend/mod.rs
@@ -557,6 +557,13 @@ fn render_path(path: &ir::PathItem) -> SvgText {
 /// Render a [`ir::ImageItem`] into svg text.
 #[comemo::memoize]
 fn render_image_item(img: &ir::ImageItem) -> SvgText {
+    match &img.image.alt {
+        Some(t) if t.as_ref() == "!typst-inlined-svg" => {
+            return SvgText::Plain(String::from_utf8(img.image.data.clone()).unwrap())
+        }
+        _ => {}
+    }
+
     SvgText::Plain(render_image(&img.image, img.size, true, ""))
 }
 
diff --git a/fuzzers/corpora/visualize/video_00.typ b/fuzzers/corpora/visualize/video_00.typ
new file mode 100644
index 00000000..6c784c2c
--- /dev/null
+++ b/fuzzers/corpora/visualize/video_00.typ
@@ -0,0 +1,23 @@
+
+#import "/contrib/templates/xhtml/lib.typ": xhtml
+
+#set page(height: auto, width: auto)
+
+= Multi-media in Typst
+
+This is a embed video.
+
+#xhtml(outer-width: 640pt, outer-height: 360pt, ```html
+<iframe
+  src="https://player.bilibili.com/player.html?aid=80433022&amp;bvid=BV1GJ411x7h7&amp;cid=137649199&amp;page=1&amp;danmaku=0&amp;autoplay=0"
+  scrolling="no"
+  border="0"
+  width="100%"
+  height="100%"
+  frameborder="no"
+  framespacing="0"
+  allowfullscreen="true"
+></iframe>
+```)
+
+That is a embed video.