fix slash menu dismissal and anchor

rust/spikes/leptos-tiptap-spike/src/editor_runtime/slash_menu_view.rs

@@ -18,7 +18,7 @@ pub(crate) struct SlashMenuViewProps {
     pub(crate) editor: TiptapEditorHandle,
     pub(crate) signals: SlashMenuSignals,
     pub(crate) runtime: SlashMenuRuntimeContext,
-    pub(crate) anchor_style: Arc<dyn Fn() -> String + Send + Sync>,
+    pub(crate) anchor_style: ReadSignal<String>,
 }
 
 #[derive(Clone, Copy)]
@@ -213,7 +213,14 @@ pub(crate) fn slash_menu_view(props: SlashMenuViewProps) -> impl IntoView {
                     <div
                         class="slash-menu"
                         data-testid="mnote-leptos-tiptap-slash-menu"
-                        style=anchor_style()
+                        style=move || {
+                            let style = anchor_style.get();
+                            if style.trim().is_empty() {
+                                "top:24px;left:24px;".to_string()
+                            } else {
+                                style
+                            }
+                        }
                     >
                         <div class="slash-list">
                             {move || {

rust/spikes/leptos-tiptap-spike/src/lib.rs

@@ -1159,6 +1159,7 @@ fn App(mount_options: MountOptions) -> impl IntoView {
     let (slash_open, set_slash_open) = signal(false);
     let (slash_index, set_slash_index) = signal(0_usize);
     let (slash_query, set_slash_query) = signal(String::new());
+    let (slash_anchor_style, set_slash_anchor_style) = signal(String::new());
     let (turn_into_open, set_turn_into_open) = signal(false);
     let (color_menu_open, set_color_menu_open) = signal(false);
     let (more_menu_open, set_more_menu_open) = signal(false);
@@ -1782,6 +1783,7 @@ fn App(mount_options: MountOptions) -> impl IntoView {
         let set_slash_index = set_slash_index;
         let slash_query = slash_query;
         let set_slash_query = set_slash_query;
+        let set_slash_anchor_style = set_slash_anchor_style;
         let turn_into_open = turn_into_open;
         let set_turn_into_open = set_turn_into_open;
         let color_menu_open = color_menu_open;
@@ -2043,6 +2045,7 @@ fn App(mount_options: MountOptions) -> impl IntoView {
 
             if event.key() == "/" && !event.ctrl_key() && !event.meta_key() && !event.alt_key() {
                 event.prevent_default();
+                let _ = set_slash_anchor_style.try_set(slash_menu_anchor_style());
                 open_slash_menu_overlay(
                     set_slash_open,
                     set_slash_index,
@@ -2132,6 +2135,36 @@ fn App(mount_options: MountOptions) -> impl IntoView {
         on_cleanup(move || drop(keydown_handle));
     }
 
+    {
+        let set_slash_open = set_slash_open;
+        let set_slash_index = set_slash_index;
+        let set_slash_query = set_slash_query;
+        let set_slash_anchor_style = set_slash_anchor_style;
+        let outside_mousedown_handle =
+            window_event_listener(ev::mousedown, move |event: MouseEvent| {
+                let Some(element) = event.target().and_then(target_element) else {
+                    let _ = set_slash_open.try_set(false);
+                    let _ = set_slash_index.try_set(0);
+                    let _ = set_slash_query.try_set(String::new());
+                    let _ = set_slash_anchor_style.try_set(String::new());
+                    return;
+                };
+                if element
+                    .closest("[data-testid=\"mnote-leptos-tiptap-slash-menu\"]")
+                    .ok()
+                    .flatten()
+                    .is_some()
+                {
+                    return;
+                }
+                let _ = set_slash_open.try_set(false);
+                let _ = set_slash_index.try_set(0);
+                let _ = set_slash_query.try_set(String::new());
+                let _ = set_slash_anchor_style.try_set(String::new());
+            });
+        on_cleanup(move || drop(outside_mousedown_handle));
+    }
+
     {
         let click_handle = window_event_listener(ev::click, move |event: MouseEvent| {
             let Some(element) = event.target().and_then(target_element) else {
@@ -2251,7 +2284,7 @@ fn App(mount_options: MountOptions) -> impl IntoView {
             command_feedback: set_command_feedback,
         },
         runtime: slash_menu_runtime,
-        anchor_style: std::sync::Arc::new(slash_menu_anchor_style),
+        anchor_style: slash_anchor_style,
     };
 
     view! {