Add basic styled text documentation

cspell.json

@@ -90,7 +90,9 @@
                 "tschüß",
                 "TSCHÜSS",
                 "ὈΔΥΣΣΕΎΣ",
-                "ὀδυσσεύς"
+                "ὀδυσσεύς",
+                "commonmark",
+                "strikethroughs"
             ],
         }
     ],

docs/astro/astro.config.mjs

@@ -217,6 +217,10 @@ export default defineConfig({
                                         label: "Timer",
                                         slug: "reference/timer",
                                     },
+                                    {
+                                        label: "Styled Text",
+                                        slug: "reference/styled-text",
+                                    },
                                 ],
                             },
                             {

docs/astro/src/content/docs/reference/styled-text.mdx

@@ -0,0 +1,57 @@
+---
+title: Styled Text
+description: Styled Text
+---
+
+import CodeSnippetMD from "@slint/common-files/src/components/CodeSnippetMD.astro";
+
+The `StyledText` type renders text with various styling and interactive properties, such as bolded, underlined and colored sections as well as HTTP links. It is based on a subset of the [commonmark](https://commonmark.org/) spec.
+
+<CodeSnippetMD imagePath="/src/assets/generated/styled-text-example.png" scale="3" imageWidth="200" imageHeight="200" imageAlt='Styled Text Example'>
+```slint
+export component Example inherits Window {
+    width: 200px;
+    height: 200px;
+    StyledText {
+      text: @markdown("This is a piece of <u>Styled Text</u>\nwith a red value inserted: <font color=\"red\">{}</font>", 55);
+    }
+}
+```
+</CodeSnippetMD>
+
+
+## Features
+
+Styled Text supports the following features:
+
+Feature        | Method
+---------------|-------
+Italics        | Builtin
+Strikethroughs | Builtin
+Inline code    | Builtin
+Links          | Builtin
+Ordered and unordered lists | Builtin
+Underlines     | `<u>` HTML tag
+Text Colors    |`<font color="...">` HTML tags
+
+### Currently Unsupported
+
+
+Feature          |
+-----------------|
+Headings         |
+Images           |
+Tables           |
+Block Quotes     |
+Subscripts       |
+Superscripts     |
+Horizontal Rules |
+Footnotes        |
+Math expressions |
+Other HTML tags  |
+
+## Interpolation
+
+Text can be interpolated into strings for styled text with the `@markdown` macro. For example, `@markdown("Hello *{}*", "World")` becomes `"Hello *World*"`.
+
+Any text passed as an argument to the macro will be escaped, for example `@markdown("Hello {}", "*World*")` will become `"Hello \*World\*"`

tools/docsnapper/Cargo.toml

@@ -16,7 +16,7 @@ keywords = ["viewer", "gui", "ui", "toolkit"]
 
 [dependencies]
 i-slint-compiler = { workspace = true }
-i-slint-core = { workspace = true }
+i-slint-core = { workspace = true, features = ["experimental-rich-text"] }
 slint-interpreter = { workspace = true, features = ["display-diagnostics", "compat-1-2", "internal", "accessibility"] }
 i-slint-renderer-skia = { workspace = true, features = ["default", "wayland"] }
 

tools/docsnapper/main.rs

@@ -525,11 +525,12 @@ fn init_compiler(args: &Cli) -> slint_interpreter::Compiler {
         compiler.set_style(style.clone());
     }
 
-    compiler.compiler_configuration(i_slint_core::InternalToken).components_to_generate =
-        match &args.component {
-            Some(component) => ComponentSelection::Named(component.clone()),
-            None => ComponentSelection::LastExported,
-        };
+    let config = compiler.compiler_configuration(i_slint_core::InternalToken);
+    config.components_to_generate = match &args.component {
+        Some(component) => ComponentSelection::Named(component.clone()),
+        None => ComponentSelection::LastExported,
+    };
+    config.enable_experimental = true;
 
     compiler
 }