feat(markdown): Optionally use CodeEditor in the new crate freya-markdown

Author: marc2332

CONTRIBUTING.md

@@ -101,6 +101,7 @@ Freya is split in various crates, each with it's own meaning and purpose, here i
 - `freya-material-design`: Material Design Components for Freya apps.
 - `freya-plotters-backend`: Freya's skia-safe backend for plotters.
 - `freya-code-editor`: Set of APIs to create text Code Editors in Freya.
+- `freya-markdown`: Markdown rendering component for Freya.
 - `freya-camera`: Camera capture support for Freya.
 
 ## Examples

Cargo.toml

@@ -25,6 +25,7 @@ members = [
   "./crates/freya-edit",
   "./crates/freya-winit",
   "./crates/freya-components",
+  "./crates/freya-markdown",
   "./crates/pathgraph",
   "./crates/freya-animation",
   "./crates/freya-router",
@@ -60,6 +61,7 @@ freya-clipboard = { path = "./crates/freya-clipboard", version = "0.4.0-rc.22" }
 freya-edit = { path = "./crates/freya-edit", version = "0.4.0-rc.22" }
 freya-winit = { path = "./crates/freya-winit", version = "0.4.0-rc.22" }
 freya-components = { path = "./crates/freya-components", version = "0.4.0-rc.22" }
+freya-markdown = { path = "./crates/freya-markdown", version = "0.4.0-rc.22" }
 pathgraph = { path = "./crates/pathgraph/", version = "0.4.0-rc.22" }
 freya-animation = { path = "./crates/freya-animation", version = "0.4.0-rc.22" }
 freya-router = { path = "./crates/freya-router", version = "0.4.0-rc.22" }

README.md

@@ -220,6 +220,23 @@ fn app() -> impl IntoElement {
 </div>
 
 
+### Markdown
+
+Render Markdown documents with the `MarkdownViewer` component.
+Enable with the `markdown` feature.
+
+<details>
+<summary>Code</summary>
+
+```rust
+fn app() -> impl IntoElement {
+    MarkdownViewer::new("# Hello World\n\nThis is **bold** and *italic* text.")
+}
+```
+
+</details>
+
+
 ### Routing & Navigation
 
 Define routes, manage navigation state, and transition between different views.

crates/freya-code-editor/src/editor_data.rs

@@ -17,7 +17,7 @@ use ropey::Rope;
 use tree_sitter::InputEdit;
 
 use crate::{
-    editor_theme::SyntaxTheme,
+    editor_theme::EditorSyntaxTheme,
     languages::LanguageId,
     metrics::EditorMetrics,
     syntax::InputEditExt,
@@ -33,7 +33,7 @@ pub struct CodeEditorData {
     pub(crate) scrolls: (i32, i32),
     pub(crate) pending_edit: Option<InputEdit>,
     pub language_id: LanguageId,
-    theme: SyntaxTheme,
+    theme: EditorSyntaxTheme,
 }
 
 impl CodeEditorData {
@@ -48,7 +48,7 @@ impl CodeEditorData {
             scrolls: (0, 0),
             pending_edit: None,
             language_id,
-            theme: SyntaxTheme::default(),
+            theme: EditorSyntaxTheme::default(),
         }
     }
 
@@ -71,7 +71,7 @@ impl CodeEditorData {
             .measure_longest_line(font_size, font_family, &self.rope);
     }
 
-    pub fn set_theme(&mut self, theme: SyntaxTheme) {
+    pub fn set_theme(&mut self, theme: EditorSyntaxTheme) {
         self.theme = theme;
     }
 

crates/freya-code-editor/src/editor_line.rs

@@ -28,7 +28,7 @@ pub struct EditorLineUI {
     pub(crate) gutter: bool,
     pub(crate) show_whitespace: bool,
     pub(crate) font_family: Cow<'static, str>,
-    pub(crate) theme: Readable<EditorTheme>,
+    pub(crate) theme: EditorTheme,
     pub(crate) a11y_id: AccessibilityId,
 }
 
@@ -53,7 +53,6 @@ impl Component for EditorLineUI {
         let holder = use_state(ParagraphHolder::default);
 
         let editor_data = editor.read();
-        let theme = theme.read();
 
         let longest_width = editor_data.metrics.longest_width;
         let line = editor_data.metrics.syntax_blocks.get_line(line_index);