主编辑区改造准备

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

@@ -181,6 +181,36 @@ const SPIKE_STYLE: &str = r#"
   padding: 28px 20px 72px;
 }
 
+.app-shell-embedded {
+  max-width: none;
+  margin: 0;
+  padding: 0;
+}
+
+.app-shell-embedded .hero-bar,
+.app-shell-embedded .title-input,
+.app-shell-embedded .editor-subcopy,
+.app-shell-embedded .footer-strip,
+.app-shell-embedded .debug-drawer,
+.app-shell-embedded .editor-crumbs:first-child {
+  display: none;
+}
+
+.app-shell-embedded .editor-card {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+}
+
+.app-shell-embedded .editor-topbar {
+  padding: 8px 12px 0;
+}
+
+.app-shell-embedded .editor-stage {
+  padding-top: 0;
+}
+
 .hero-bar {
   display: flex;
   justify-content: space-between;
@@ -1209,10 +1239,7 @@ fn target_element(target: web_sys::EventTarget) -> Option<Element> {
     })
 }
 
-fn event_target_matches_selector(
-    target: Option<web_sys::EventTarget>,
-    selector: &str,
-) -> bool {
+fn event_target_matches_selector(target: Option<web_sys::EventTarget>, selector: &str) -> bool {
     target
         .and_then(target_element)
         .and_then(|element| element.closest(selector).ok().flatten())
@@ -2260,8 +2287,7 @@ fn App() -> impl IntoView {
     let (text_selection_active, set_text_selection_active) = signal(false);
     let (floating_toolbar_anchor, set_floating_toolbar_anchor) =
         signal(None::<FloatingToolbarAnchor>);
-    let (locked_toolbar_anchor, set_locked_toolbar_anchor) =
-        signal(None::<FloatingToolbarAnchor>);
+    let (locked_toolbar_anchor, set_locked_toolbar_anchor) = signal(None::<FloatingToolbarAnchor>);
     let (slash_open, set_slash_open) = signal(false);
     let (slash_index, set_slash_index) = signal(0_usize);
     let (turn_into_open, set_turn_into_open) = signal(false);
@@ -2596,6 +2622,10 @@ fn App() -> impl IntoView {
     };
 
     let selection_text = move || selection_summary(&selection_state.get());
+    let is_embedded = window()
+        .and_then(|win| win.location().search().ok())
+        .map(|search| search.contains("embedded=1"))
+        .unwrap_or(false);
 
     let on_link_click = {
         let editor = editor;
@@ -2633,7 +2663,7 @@ fn App() -> impl IntoView {
 
     view! {
         <style>{SPIKE_STYLE}</style>
-        <main class="app-shell">
+        <main class=move || if is_embedded { "app-shell app-shell-embedded" } else { "app-shell" }>
             <section class="hero-bar">
                 <div class="hero-meta">
                     <span class="hero-tag">"P0 / Tiptap-like 主编辑器体验"</span>
@@ -2750,6 +2780,18 @@ fn App() -> impl IntoView {
 
                         set_hovered_block.set(None);
                     }
+                    on:mouseover=move |event: MouseEvent| {
+                        if block_menu_open.get_untracked() || dragging_block_index.get_untracked().is_some() {
+                            return;
+                        }
+                        let Some(target) = event.target() else {
+                            return;
+                        };
+                        if let Some(block) = hovered_block_from_target(target) {
+                            set_editor_focused.set(true);
+                            set_hovered_block.set(Some(block));
+                        }
+                    }
                     on:mouseleave=move |_| {
                         if !block_menu_open.get_untracked() && dragging_block_index.get_untracked().is_none() {
                             set_hovered_block.set(None);
@@ -3717,19 +3759,10 @@ fn App() -> impl IntoView {
 }
 
 fn initial_content() -> TiptapContent {
-    TiptapContent::html(
-        r#"
-<h1>准备接管主编辑器体验</h1>
-<p>这页现在先只在 <strong>8123</strong> 做 P0 体验收口：你可以输入 <code>/</code> 打开命令菜单，也可以直接试试选中文字后的浮动工具条。</p>
-<p>目标不是继续堆 runtime debug，而是先把页面做得更像可以真实检验的块编辑器。</p>
-<ul>
-  <li>标题、段落、引用、代码块</li>
-  <li>无序列表 / 有序列表 / Todo 列表</li>
-  <li>分割线、行内样式、链接和高亮</li>
-</ul>
-<p>请把光标放到这里，然后按 <code>/</code>。</p>
-"#,
-    )
+    TiptapContent::json(serde_json::json!({
+        "type": "doc",
+        "content": []
+    }))
 }
 
 fn main() {