Merge c8be1cdc3620538c491f7331515f116a17f2231b into 9a6268050fb769e18c4889fa5f59d4150e8878d6

crates/typst-html/src/convert.rs

@@ -109,10 +109,7 @@ fn handle(
             styles.chain(&style),
             Region::new(Size::splat(Abs::inf()), Axes::splat(false)),
         )?;
-        output.push(HtmlNode::Frame(HtmlFrame {
+        output.push(HtmlNode::Frame(HtmlFrame::new(frame, styles)));
-            inner: frame,
-            text_size: styles.resolve(TextElem::size),
-        }));
     } else {
         engine.sink.warn(warning!(
             child.span(),

crates/typst-html/src/dom.rs

@@ -2,10 +2,11 @@ use std::fmt::{self, Debug, Display, Formatter};
 
 use ecow::{EcoString, EcoVec};
 use typst_library::diag::{bail, HintedStrResult, StrResult};
-use typst_library::foundations::{cast, Dict, Repr, Str};
+use typst_library::foundations::{cast, Dict, Repr, Str, StyleChain};
 use typst_library::introspection::{Introspector, Tag};
 use typst_library::layout::{Abs, Frame};
 use typst_library::model::DocumentInfo;
+use typst_library::text::TextElem;
 use typst_syntax::Span;
 use typst_utils::{PicoStr, ResolvedPicoStr};
 
@@ -279,3 +280,10 @@ pub struct HtmlFrame {
     /// consistently.
     pub text_size: Abs,
 }
+
+impl HtmlFrame {
+    /// Wraps a laid-out frame.
+    pub fn new(inner: Frame, styles: StyleChain) -> Self {
+        Self { inner, text_size: styles.resolve(TextElem::size) }
+    }
+}

crates/typst-html/src/encode.rs

@@ -121,6 +121,7 @@ fn write_children(w: &mut Writer, element: &HtmlElement) -> SourceResult<()> {
     let pretty_inside = allows_pretty_inside(element.tag)
         && element.children.iter().any(|node| match node {
             HtmlNode::Element(child) => wants_pretty_around(child.tag),
+            HtmlNode::Frame(_) => true,
             _ => false,
         });
 
@@ -305,14 +306,6 @@ fn write_escape(w: &mut Writer, c: char) -> StrResult<()> {
 
 /// Encode a laid out frame into the writer.
 fn write_frame(w: &mut Writer, frame: &HtmlFrame) {
-    // FIXME: This string replacement is obviously a hack.
+    let svg = typst_svg::svg_html_frame(&frame.inner, frame.text_size);
-    let svg = typst_svg::svg_frame(&frame.inner).replace(
-        "<svg class",
-        &format!(
-            "<svg style=\"overflow: visible; width: {}em; height: {}em;\" class",
-            frame.inner.width() / frame.text_size,
-            frame.inner.height() / frame.text_size,
-        ),
-    );
     w.buf.push_str(&svg);
 }

crates/typst-ide/src/complete.rs

@@ -732,10 +732,10 @@ fn complete_params(ctx: &mut CompletionContext) -> bool {
         }
     }
 
-    // Parameters: "func(|)", "func(hi|)", "func(12,|)".
+    // Parameters: "func(|)", "func(hi|)", "func(12, |)", "func(12,|)" [explicit mode only]
     if_chain! {
         if matches!(deciding.kind(), SyntaxKind::LeftParen | SyntaxKind::Comma);
-        if deciding.kind() != SyntaxKind::Comma || deciding.range().end < ctx.cursor;
+        if deciding.kind() != SyntaxKind::Comma || deciding.range().end < ctx.cursor || ctx.explicit;
         then {
             if let Some(next) = deciding.next_leaf() {
                 ctx.from = ctx.cursor.min(next.offset());
@@ -915,8 +915,10 @@ fn complete_code(ctx: &mut CompletionContext) -> bool {
         return false;
     }
 
-    // An existing identifier: "{ pa| }".
+    // An existing identifier (which is not the key of a named pair): "{ pa| }".
-    if ctx.leaf.kind() == SyntaxKind::Ident {
+    if ctx.leaf.kind() == SyntaxKind::Ident
+        && (ctx.leaf.index() > 0 || ctx.leaf.parent_kind() != Some(SyntaxKind::Named))
+    {
         ctx.from = ctx.leaf.offset();
         code_completions(ctx, false);
         return true;
@@ -930,10 +932,17 @@ fn complete_code(ctx: &mut CompletionContext) -> bool {
     }
 
     // Anywhere: "{ | }".
-    // But not within or after an expression.
+    // But not within or after an expression, and not a dictionary key
     if ctx.explicit
+        && ctx.leaf.parent_kind() != Some(SyntaxKind::Dict)
         && (ctx.leaf.kind().is_trivia()
-            || matches!(ctx.leaf.kind(), SyntaxKind::LeftParen | SyntaxKind::LeftBrace))
+            || matches!(
+                ctx.leaf.kind(),
+                SyntaxKind::LeftParen
+                    | SyntaxKind::LeftBrace
+                    | SyntaxKind::Comma
+                    | SyntaxKind::Colon
+            ))
     {
         ctx.from = ctx.cursor;
         code_completions(ctx, false);
@@ -1586,6 +1595,7 @@ mod tests {
     trait ResponseExt {
         fn completions(&self) -> &[Completion];
         fn labels(&self) -> BTreeSet<&str>;
+        fn must_be_empty(&self) -> &Self;
         fn must_include<'a>(&self, includes: impl IntoIterator<Item = &'a str>) -> &Self;
         fn must_exclude<'a>(&self, excludes: impl IntoIterator<Item = &'a str>) -> &Self;
         fn must_apply<'a>(&self, label: &str, apply: impl Into<Option<&'a str>>)
@@ -1604,6 +1614,16 @@ mod tests {
             self.completions().iter().map(|c| c.label.as_str()).collect()
         }
 
+        #[track_caller]
+        fn must_be_empty(&self) -> &Self {
+            let labels = self.labels();
+            assert!(
+                labels.is_empty(),
+                "expected no suggestions (got {labels:?} instead)"
+            );
+            self
+        }
+
         #[track_caller]
         fn must_include<'a>(&self, includes: impl IntoIterator<Item = &'a str>) -> &Self {
             let labels = self.labels();
@@ -1648,7 +1668,15 @@ mod tests {
         let world = world.acquire();
         let world = world.borrow();
         let doc = typst::compile(world).output.ok();
-        test_with_doc(world, pos, doc.as_ref())
+        test_with_doc(world, pos, doc.as_ref(), true)
+    }
+
+    #[track_caller]
+    fn test_implicit(world: impl WorldLike, pos: impl FilePos) -> Response {
+        let world = world.acquire();
+        let world = world.borrow();
+        let doc = typst::compile(world).output.ok();
+        test_with_doc(world, pos, doc.as_ref(), false)
     }
 
     #[track_caller]
@@ -1669,11 +1697,12 @@ mod tests {
         world: impl WorldLike,
         pos: impl FilePos,
         doc: Option<&PagedDocument>,
+        explicit: bool,
     ) -> Response {
         let world = world.acquire();
         let world = world.borrow();
         let (source, cursor) = pos.resolve(world);
-        autocomplete(world, doc, &source, cursor, true)
+        autocomplete(world, doc, &source, cursor, explicit)
     }
 
     #[test]
@@ -1724,7 +1753,7 @@ mod tests {
         let end = world.main.text().len();
         world.main.edit(end..end, " #cite()");
 
-        test_with_doc(&world, -2, doc.as_ref())
+        test_with_doc(&world, -2, doc.as_ref(), true)
             .must_include(["netwok", "glacier-melt", "supplement"])
             .must_exclude(["bib"]);
     }
@@ -1879,26 +1908,96 @@ mod tests {
     #[test]
     fn test_autocomplete_fonts() {
         test("#text(font:)", -2)
-            .must_include(["\"Libertinus Serif\"", "\"New Computer Modern Math\""]);
+            .must_include([q!("Libertinus Serif"), q!("New Computer Modern Math")]);
 
         test("#show link: set text(font: )", -2)
-            .must_include(["\"Libertinus Serif\"", "\"New Computer Modern Math\""]);
+            .must_include([q!("Libertinus Serif"), q!("New Computer Modern Math")]);
 
         test("#show math.equation: set text(font: )", -2)
-            .must_include(["\"New Computer Modern Math\""])
+            .must_include([q!("New Computer Modern Math")])
-            .must_exclude(["\"Libertinus Serif\""]);
+            .must_exclude([q!("Libertinus Serif")]);
 
         test("#show math.equation: it => { set text(font: )\nit }", -7)
-            .must_include(["\"New Computer Modern Math\""])
+            .must_include([q!("New Computer Modern Math")])
-            .must_exclude(["\"Libertinus Serif\""]);
+            .must_exclude([q!("Libertinus Serif")]);
     }
 
     #[test]
     fn test_autocomplete_typed_html() {
         test("#html.div(translate: )", -2)
             .must_include(["true", "false"])
-            .must_exclude(["\"yes\"", "\"no\""]);
+            .must_exclude([q!("yes"), q!("no")]);
         test("#html.input(value: )", -2).must_include(["float", "string", "red", "blue"]);
-        test("#html.div(role: )", -2).must_include(["\"alertdialog\""]);
+        test("#html.div(role: )", -2).must_include([q!("alertdialog")]);
+    }
+
+    #[test]
+    fn test_autocomplete_in_function_params_after_comma_and_colon() {
+        let document = "#text(size: 12pt, [])";
+
+        // After colon
+        test(document, 11).must_include(["length"]);
+        test_implicit(document, 11).must_include(["length"]);
+
+        test(document, 12).must_include(["length"]);
+        test_implicit(document, 12).must_include(["length"]);
+
+        // After comma
+        test(document, 17).must_include(["font"]);
+        test_implicit(document, 17).must_be_empty();
+
+        test(document, 18).must_include(["font"]);
+        test_implicit(document, 18).must_include(["font"]);
+    }
+
+    #[test]
+    fn test_autocomplete_in_list_literal() {
+        let document = "#let val = 0\n#(1, \"one\")";
+
+        // After opening paren
+        test(document, 15).must_include(["color", "val"]);
+        test_implicit(document, 15).must_be_empty();
+
+        // After first element
+        test(document, 16).must_be_empty();
+        test_implicit(document, 16).must_be_empty();
+
+        // After comma
+        test(document, 17).must_include(["color", "val"]);
+        test_implicit(document, 17).must_be_empty();
+
+        test(document, 18).must_include(["color", "val"]);
+        test_implicit(document, 18).must_be_empty();
+    }
+
+    #[test]
+    fn test_autocomplete_in_dict_literal() {
+        let document = "#let first = 0\n#(first: 1, second: one)";
+
+        // After opening paren
+        test(document, 17).must_be_empty();
+        test_implicit(document, 17).must_be_empty();
+
+        // After first key
+        test(document, 22).must_be_empty();
+        test_implicit(document, 22).must_be_empty();
+
+        // After colon
+        test(document, 23).must_include(["align", "first"]);
+        test_implicit(document, 23).must_be_empty();
+
+        test(document, 24).must_include(["align", "first"]);
+        test_implicit(document, 24).must_be_empty();
+
+        // After first value
+        test(document, 25).must_be_empty();
+        test_implicit(document, 25).must_be_empty();
+
+        // After comma
+        test(document, 26).must_be_empty();
+        test_implicit(document, 26).must_be_empty();
+
+        test(document, 27).must_be_empty();
+        test_implicit(document, 27).must_be_empty();
     }
 }

crates/typst-svg/src/lib.rs

@@ -45,6 +45,30 @@ pub fn svg_frame(frame: &Frame) -> String {
     renderer.finalize()
 }
 
+/// Export a frame into an SVG suitable for embedding into HTML.
+#[typst_macros::time(name = "svg html frame")]
+pub fn svg_html_frame(frame: &Frame, text_size: Abs) -> String {
+    let mut renderer = SVGRenderer::with_options(xmlwriter::Options {
+        indent: xmlwriter::Indent::None,
+        ..Default::default()
+    });
+    renderer.write_header_with_custom_attrs(frame.size(), |xml| {
+        xml.write_attribute("class", "typst-frame");
+        xml.write_attribute_fmt(
+            "style",
+            format_args!(
+                "overflow: visible; width: {}em; height: {}em;",
+                frame.width() / text_size,
+                frame.height() / text_size,
+            ),
+        );
+    });
+
+    let state = State::new(frame.size(), Transform::identity());
+    renderer.render_frame(state, Transform::identity(), frame);
+    renderer.finalize()
+}
+
 /// Export a document with potentially multiple pages into a single SVG file.
 ///
 /// The padding will be added around and between the individual frames.
@@ -158,8 +182,13 @@ impl State {
 impl SVGRenderer {
     /// Create a new SVG renderer with empty glyph and clip path.
     fn new() -> Self {
+        Self::with_options(Default::default())
+    }
+
+    /// Create a new SVG renderer with the given configuration.
+    fn with_options(options: xmlwriter::Options) -> Self {
         SVGRenderer {
-            xml: XmlWriter::new(xmlwriter::Options::default()),
+            xml: XmlWriter::new(options),
             glyphs: Deduplicator::new('g'),
             clip_paths: Deduplicator::new('c'),
             gradient_refs: Deduplicator::new('g'),
@@ -170,11 +199,22 @@ impl SVGRenderer {
         }
     }
 
-    /// Write the SVG header, including the `viewBox` and `width` and `height`
+    /// Write the default SVG header, including a `typst-doc` class, the
-    /// attributes.
+    /// `viewBox` and `width` and `height` attributes.
     fn write_header(&mut self, size: Size) {
+        self.write_header_with_custom_attrs(size, |xml| {
+            xml.write_attribute("class", "typst-doc");
+        });
+    }
+
+    /// Write the SVG header with additional attributes and standard attributes.
+    fn write_header_with_custom_attrs(
+        &mut self,
+        size: Size,
+        write_custom_attrs: impl FnOnce(&mut XmlWriter),
+    ) {
         self.xml.start_element("svg");
-        self.xml.write_attribute("class", "typst-doc");
+        write_custom_attrs(&mut self.xml);
         self.xml.write_attribute_fmt(
             "viewBox",
             format_args!("0 0 {} {}", size.x.to_pt(), size.y.to_pt()),

tests/ref/html/html-frame.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <p>A rectangle:</p>
+    <svg class="typst-frame" style="overflow: visible; width: 4.5em; height: 3em;" viewBox="0 0 45 30" width="45pt" height="30pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml"><g><g transform="translate(-0 -0)"><path class="typst-shape" fill="none" stroke="#000000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 30 L 45 30 L 45 0 Z "/></g></g></svg>
+  </body>
+</html>

tests/suite/html/frame.typ

@@ -1,5 +1,6 @@
-// No proper HTML tests here yet because we don't want to test SVG export just
+--- html-frame html ---
-// yet. We'll definitely add tests at some point.
+A rectangle:
+#html.frame(rect())
 
 --- html-frame-in-layout ---
 // Ensure that HTML frames are transparent in layout. This is less important for