platform-specific bugfixes ported from prosemirror and other analogous tools

Cargo.lock

···
  "weaver-common",
  "weaver-renderer",
  "web-sys",
+ "web-time",
  "webbrowser",
 ]
 

crates/weaver-app/Cargo.toml

···
 serde_ipld_dagcbor = { version = "0.6" }
 loro = "1.9.1"
 markdown-weaver-escape = { workspace = true }
+web-time = "1.1"
 
 [target.'cfg(not(all(target_arch = "wasm32", target_os = "unknown")))'.dependencies]
 webbrowser = "1.0.6"
···
 chrono = { version = "0.4", features = ["wasmbind"] }
 wasm-bindgen = "0.2"
 wasm-bindgen-futures = "0.4"
-web-sys = { version = "0.3", features = ["ServiceWorkerContainer", "ServiceWorker", "ServiceWorkerRegistration", "RegistrationOptions", "Window", "Navigator", "MessageEvent", "console", "Document", "Element", "HtmlImageElement", "Selection", "Range", "Node", "HtmlElement", "TreeWalker", "NodeFilter", "DomTokenList", "Clipboard", "ClipboardItem", "Blob", "BlobPropertyBag"] }
+web-sys = { version = "0.3", features = ["ServiceWorkerContainer", "ServiceWorker", "ServiceWorkerRegistration", "RegistrationOptions", "Window", "Navigator", "MessageEvent", "console", "Document", "Element", "HtmlImageElement", "Selection", "Range", "Node", "HtmlElement", "TreeWalker", "NodeFilter", "DomTokenList", "Clipboard", "ClipboardItem", "Blob", "BlobPropertyBag", "EventTarget", "InputEvent", "AddEventListenerOptions"] }
 js-sys = "0.3"
 gloo-storage = "0.3"
 gloo-timers = "0.3"

crates/weaver-app/src/components/editor/document.rs

···
 //!
 //! Uses Loro CRDT for text storage with built-in undo/redo support.
 
-use loro::{cursor::{Cursor, Side}, ExportMode, LoroDoc, LoroResult, LoroText, UndoManager};
+use loro::{
+    ExportMode, LoroDoc, LoroResult, LoroText, UndoManager,
+    cursor::{Cursor, Side},
+};
 
 /// Single source of truth for editor state.
 ///
···
     /// IME composition state (for Phase 3)
     pub composition: Option<CompositionState>,
 
+    /// Timestamp when the last composition ended.
+    /// Used for Safari workaround: ignore Enter keydown within 500ms of compositionend.
+    pub composition_ended_at: Option<web_time::Instant>,
+
     /// Most recent edit info for incremental rendering optimization.
     /// Used to determine if we can skip full re-parsing.
     pub last_edit: Option<EditInfo>,
···
 
         // Insert initial content if any
         if !content.is_empty() {
-            text.insert(0, &content).expect("failed to insert initial content");
+            text.insert(0, &content)
+                .expect("failed to insert initial content");
         }
 
         // Set up undo manager with merge interval for batching keystrokes
···
             loro_cursor,
             selection: None,
             composition: None,
+            composition_ended_at: None,
             last_edit: None,
         }
     }
···
     /// Remove text range and record edit info for incremental rendering.
     pub fn remove_tracked(&mut self, start: usize, len: usize) -> LoroResult<()> {
         let content = self.text.to_string();
-        let contains_newline = content
-            .chars()
-            .skip(start)
-            .take(len)
-            .any(|c| c == '\n');
+        let contains_newline = content.chars().skip(start).take(len).any(|c| c == '\n');
         let in_block_syntax_zone = self.is_in_block_syntax_zone(start);
 
         let result = self.text.delete(start, len);
···
     /// Replace text (delete then insert) and record combined edit info.
     pub fn replace_tracked(&mut self, start: usize, len: usize, text: &str) -> LoroResult<()> {
         let content = self.text.to_string();
-        let delete_has_newline = content
-            .chars()
-            .skip(start)
-            .take(len)
-            .any(|c| c == '\n');
+        let delete_has_newline = content.chars().skip(start).take(len).any(|c| c == '\n');
         let in_block_syntax_zone = self.is_in_block_syntax_zone(start);
 
         let len_before = self.text.len_unicode();
···
             loro_cursor,
             selection: None,
             composition: None,
+            composition_ended_at: None,
             last_edit: None,
         }
     }
···
         new_doc.sync_loro_cursor();
         new_doc.selection = self.selection;
         new_doc.composition = self.composition.clone();
+        new_doc.composition_ended_at = self.composition_ended_at;
         new_doc.last_edit = self.last_edit.clone();
         new_doc
     }

crates/weaver-app/src/components/editor/mod.rs

···
 mod formatting;
 mod offset_map;
 mod paragraph;
+mod platform;
 mod render;
 mod storage;
 mod toolbar;
···
 pub use writer::{SyntaxSpanInfo, SyntaxType, WriterResult};
 
 use dioxus::prelude::*;
+
+use crate::components::record_view::CodeView;
 
 /// Main markdown editor component.
 ///
···
         interval.forget();
     });
 
+    // Set up beforeinput listener for iOS/Android virtual keyboard quirks
+    #[cfg(all(target_arch = "wasm32", target_os = "unknown"))]
+    use_effect(move || {
+        use wasm_bindgen::JsCast;
+        use wasm_bindgen::prelude::*;
+
+        let plat = platform::platform();
+
+        // Only needed on mobile
+        if !plat.mobile {
+            return;
+        }
+
+        let window = match web_sys::window() {
+            Some(w) => w,
+            None => return,
+        };
+        let dom_document = match window.document() {
+            Some(d) => d,
+            None => return,
+        };
+        let editor = match dom_document.get_element_by_id(editor_id) {
+            Some(e) => e,
+            None => return,
+        };
+
+        let mut document_signal = document;
+        let cached_paras = cached_paragraphs;
+
+        let closure = Closure::wrap(Box::new(move |evt: web_sys::InputEvent| {
+            let input_type = evt.input_type();
+            tracing::debug!(input_type = %input_type, "beforeinput");
+
+            let plat = platform::platform();
+
+            // iOS workaround: Virtual keyboard sends insertParagraph/insertLineBreak
+            // without proper keydown events. Handle them here.
+            if plat.ios && (input_type == "insertParagraph" || input_type == "insertLineBreak") {
+                tracing::debug!("iOS: intercepting {} via beforeinput", input_type);
+                evt.prevent_default();
+
+                // Handle as Enter key
+                document_signal.with_mut(|doc| {
+                    if let Some(sel) = doc.selection.take() {
+                        let (start, end) = (sel.anchor.min(sel.head), sel.anchor.max(sel.head));
+                        let _ = doc.remove_tracked(start, end.saturating_sub(start));
+                        doc.cursor.offset = start;
+                    }
+
+                    if input_type == "insertLineBreak" {
+                        // Soft break (like Shift+Enter)
+                        let _ = doc.insert_tracked(doc.cursor.offset, "  \n\u{200C}");
+                        doc.cursor.offset += 3;
+                    } else {
+                        // Paragraph break
+                        let _ = doc.insert_tracked(doc.cursor.offset, "\n\n");
+                        doc.cursor.offset += 2;
+                    }
+                });
+            }
+
+            // Android workaround: When swipe keyboard picks a suggestion,
+            // DOM mutations fire before selection moves. We detect this pattern
+            // and defer cursor sync.
+            if plat.android && input_type == "insertText" {
+                // Check if this might be a suggestion pick (has data that looks like a word)
+                if let Some(data) = evt.data() {
+                    if data.contains(' ') || data.len() > 3 {
+                        tracing::debug!("Android: possible suggestion pick, deferring cursor sync");
+                        // Defer cursor sync by 20ms to let selection settle
+                        let paras = cached_paras;
+                        let doc_sig = document_signal;
+                        let window = web_sys::window();
+                        if let Some(window) = window {
+                            let closure = Closure::once(move || {
+                                let paras = paras();
+                                sync_cursor_from_dom(&mut doc_sig.clone(), editor_id, &paras);
+                            });
+                            let _ = window.set_timeout_with_callback_and_timeout_and_arguments_0(
+                                closure.as_ref().unchecked_ref(),
+                                20,
+                            );
+                            closure.forget();
+                        }
+                    }
+                }
+            }
+        }) as Box<dyn FnMut(web_sys::InputEvent)>);
+
+        let _ = editor
+            .add_event_listener_with_callback("beforeinput", closure.as_ref().unchecked_ref());
+        closure.forget();
+    });
+
     rsx! {
         Stylesheet { href: asset!("/assets/styling/editor.css") }
         div { class: "markdown-editor-container",
···
 
                     onkeydown: move |evt| {
                         use dioxus::prelude::keyboard_types::Key;
+                        use std::time::Duration;
 
-                        // During IME composition, let browser handle everything
-                        // Exception: Escape cancels composition
+                        let plat = platform::platform();
+                        let mods = evt.modifiers();
+                        let has_modifier = mods.ctrl() || mods.meta() || mods.alt();
+
+                        // During IME composition:
+                        // - Allow modifier shortcuts (Ctrl+B, Ctrl+Z, etc.)
+                        // - Allow Escape to cancel composition
+                        // - Block text input (let browser handle composition preview)
                         if document.peek().composition.is_some() {
-                            tracing::debug!(
-                                key = ?evt.key(),
-                                "keydown during composition - delegating to browser"
-                            );
                             if evt.key() == Key::Escape {
                                 tracing::debug!("Escape pressed - cancelling composition");
                                 document.with_mut(|doc| {
                                     doc.composition = None;
                                 });
+                                return;
                             }
+
+                            // Allow modifier shortcuts through during composition
+                            if !has_modifier {
+                                tracing::debug!(
+                                    key = ?evt.key(),
+                                    "keydown during composition - delegating to browser"
+                                );
+                                return;
+                            }
+                            // Fall through to handle the shortcut
+                        }
+
+                        // Safari workaround: After Japanese IME composition ends, both
+                        // compositionend and keydown fire for Enter. Ignore keydown
+                        // within 500ms of composition end to prevent double-newline.
+                        if plat.safari && evt.key() == Key::Enter {
+                            if let Some(ended_at) = document.peek().composition_ended_at {
+                                if ended_at.elapsed() < Duration::from_millis(500) {
+                                    tracing::debug!(
+                                        "Safari: ignoring Enter within 500ms of compositionend"
+                                    );
+                                    return;
+                                }
+                            }
+                        }
+
+                        // Android workaround: Chrome Android gets confused by Enter during/after
+                        // composition. Defer Enter handling to onkeypress instead.
+                        if plat.android && evt.key() == Key::Enter {
+                            tracing::debug!("Android: deferring Enter to keypress");
                             return;
                         }
 
···
                         );
                     },
 
+                    // Android workaround: Handle Enter in keypress instead of keydown.
+                    // Chrome Android fires confused composition events on Enter in keydown,
+                    // but keypress fires after composition state settles.
+                    onkeypress: move |evt| {
+                        use dioxus::prelude::keyboard_types::Key;
+
+                        let plat = platform::platform();
+                        if plat.android && evt.key() == Key::Enter {
+                            tracing::debug!("Android: handling Enter in keypress");
+                            evt.prevent_default();
+                            handle_keydown(evt, &mut document);
+                        }
+                    },
+
                     onpaste: move |evt| {
                         handle_paste(evt, &mut document);
                     },
···
                             "compositionend"
                         );
                         document.with_mut(|doc| {
+                            // Record when composition ended for Safari timing workaround
+                            doc.composition_ended_at = Some(web_time::Instant::now());
+
                             if let Some(comp) = doc.composition.take() {
                                 tracing::debug!(
                                     start_offset = comp.start_offset,
···
                 }
             }
         }
+
     }
 }
 

crates/weaver-app/src/components/editor/platform.rs

···
+//! Platform detection for browser-specific workarounds.
+//!
+//! Based on patterns from ProseMirror's input handling, adapted for Rust/wasm.
+
+use std::sync::OnceLock;
+
+/// Cached platform detection results.
+#[derive(Debug, Clone)]
+pub struct Platform {
+    pub ios: bool,
+    pub mac: bool,
+    pub android: bool,
+    pub chrome: bool,
+    pub safari: bool,
+    pub gecko: bool,
+    pub webkit_version: Option<u32>,
+    pub chrome_version: Option<u32>,
+    pub mobile: bool,
+}
+
+impl Default for Platform {
+    fn default() -> Self {
+        Self {
+            ios: false,
+            mac: false,
+            android: false,
+            chrome: false,
+            safari: false,
+            gecko: false,
+            webkit_version: None,
+            chrome_version: None,
+            mobile: false,
+        }
+    }
+}
+
+static PLATFORM: OnceLock<Platform> = OnceLock::new();
+
+/// Get cached platform info. Detection runs once on first call.
+pub fn platform() -> &'static Platform {
+    PLATFORM.get_or_init(detect_platform)
+}
+
+#[cfg(all(target_arch = "wasm32", target_os = "unknown"))]
+fn detect_platform() -> Platform {
+    let window = match web_sys::window() {
+        Some(w) => w,
+        None => return Platform::default(),
+    };
+
+    let navigator = window.navigator();
+    let user_agent = navigator.user_agent().unwrap_or_default().to_lowercase();
+    let platform_str = navigator.platform().unwrap_or_default().to_lowercase();
+
+    // iOS detection: iPhone/iPad/iPod in UA, or Mac platform with touch
+    let ios = user_agent.contains("iphone")
+        || user_agent.contains("ipad")
+        || user_agent.contains("ipod")
+        || (platform_str.contains("mac") && has_touch_support(&navigator));
+
+    // macOS (but not iOS)
+    let mac = platform_str.contains("mac") && !ios;
+
+    // Android
+    let android = user_agent.contains("android");
+
+    // Chrome (but not Edge, which also contains Chrome)
+    let chrome = user_agent.contains("chrome") && !user_agent.contains("edg");
+
+    // Safari (WebKit but not Chrome)
+    let safari = user_agent.contains("safari") && !user_agent.contains("chrome");
+
+    // Firefox/Gecko
+    let gecko = user_agent.contains("gecko/") && !user_agent.contains("like gecko");
+
+    // WebKit version extraction
+    let webkit_version = extract_version(&user_agent, "applewebkit/");
+
+    // Chrome version extraction
+    let chrome_version = extract_version(&user_agent, "chrome/");
+
+    // Mobile detection
+    let mobile = ios
+        || android
+        || user_agent.contains("mobile")
+        || user_agent.contains("iemobile");
+
+    Platform {
+        ios,
+        mac,
+        android,
+        chrome,
+        safari,
+        gecko,
+        webkit_version,
+        chrome_version,
+        mobile,
+    }
+}
+
+#[cfg(all(target_arch = "wasm32", target_os = "unknown"))]
+fn has_touch_support(navigator: &web_sys::Navigator) -> bool {
+    // Check maxTouchPoints > 0 (indicates touch capability)
+    navigator.max_touch_points() > 0
+}
+
+#[cfg(all(target_arch = "wasm32", target_os = "unknown"))]
+fn extract_version(ua: &str, prefix: &str) -> Option<u32> {
+    ua.find(prefix).and_then(|idx| {
+        let after = &ua[idx + prefix.len()..];
+        // Take digits until non-digit
+        let version_str: String = after.chars().take_while(|c| c.is_ascii_digit()).collect();
+        version_str.parse().ok()
+    })
+}
+
+#[cfg(not(all(target_arch = "wasm32", target_os = "unknown")))]
+fn detect_platform() -> Platform {
+    Platform::default()
+}

crates/weaver-app/src/components/editor/writer.rs

···
                             let para_char_start = self.last_char_offset;
 
                             // Create a minimal paragraph for the empty blockquote
-                            // let node_id = self.gen_node_id();
-                            // write!(&mut self.writer, "<p id=\"{}\"", node_id)?;
+                            let node_id = self.gen_node_id();
+                            write!(&mut self.writer, "<div id=\"{}\"", node_id)?;
                             // self.begin_node(node_id.clone());
 
                             // // Record start-of-node mapping for cursor positioning
-                            // self.offset_maps.push(OffsetMapping {
-                            //     byte_range: para_byte_start..para_byte_start,
-                            //     char_range: para_char_start..para_char_start,
-                            //     node_id: node_id.clone(),
-                            //     char_offset_in_node: 0,
-                            //     child_index: Some(0),
-                            //     utf16_len: 0,
-                            // });
+                            self.offset_maps.push(OffsetMapping {
+                                byte_range: para_byte_start..para_byte_start,
+                                char_range: para_char_start..para_char_start,
+                                node_id: node_id.clone(),
+                                char_offset_in_node: gt_pos,
+                                child_index: Some(0),
+                                utf16_len: 0,
+                            });
 
                             // Emit the > as block syntax
                             let syntax = &raw_text[gt_pos..gt_pos + 1];
                             self.emit_inner_syntax(syntax, para_byte_start, SyntaxType::Block)?;
 
-                            // self.write("</p>\n")?;
-                            // self.end_node();
+                            self.write("</div>\n")?;
+                            self.end_node();
 
                             // Record paragraph boundary for incremental rendering
                             let byte_range = para_byte_start..bq_range.end;

crates/weaver-app/src/views/editor.rs

···
 //! Editor view - wraps the MarkdownEditor component for the /editor route.
 
-use crate::components::editor::MarkdownEditor;
+use crate::components::{editor::MarkdownEditor, record_view::CodeView};
 use dioxus::prelude::*;
 
 /// Editor page view.
···
     rsx! {
         EditorCss {}
         div { class: "editor-page",
+            h1 { style: "margin-left: 6rem;", "Markdown Editor Test" }
             MarkdownEditor { initial_content: None }
+
         }
     }
 }