feat(editor): enhance rich editor toolbar behavior

- Implement sticky detection for the rich editor toolbar.
- Adjust CSS to hide shadow when the toolbar is not sticky.
- Update component structure to support new sticky detection logic.

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

src/components/editor/write-editor/WriteEditorBase.tsx

@@ -71,6 +71,22 @@ export const WriteEditorBase = defineComponent({
     const scrollContainerRef = ref<HTMLElement>()
     const { general, destory } = useEditorConfig()
     const titleInputRef = ref<{ focus: () => void }>()
+    const stickyDetectorRef = ref<HTMLElement>()
+    const isToolbarStuck = ref(false)
+
+    onMounted(() => {
+      const el = stickyDetectorRef.value
+      if (!el) return
+      const scrollRoot = el.closest('.n-scrollbar-container') as Element | null
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          isToolbarStuck.value = !entry.isIntersecting
+        },
+        { root: scrollRoot, threshold: 0 },
+      )
+      observer.observe(el)
+      onUnmounted(() => observer.disconnect())
+    })
 
     onUnmounted(() => {
       destory()
@@ -149,6 +165,7 @@ export const WriteEditorBase = defineComponent({
           class={[
             'write-editor-wrapper min-h-[100dvh]',
             isRichMode.value && 'rich-editor-mode',
+            isToolbarStuck.value && 'toolbar-stuck',
           ]}
         >
           <div ref={scrollContainerRef} class="write-editor-scroll-container">
@@ -225,6 +242,8 @@ export const WriteEditorBase = defineComponent({
               )}
             </div>
 
+            <div ref={stickyDetectorRef} class="h-0 w-full" aria-hidden />
+
             <div
               class="write-editor-content"
               onClick={() => {

src/components/editor/write-editor/index.css

@@ -4,15 +4,13 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  overflow: clip;
 }
 
 .write-editor-scroll-container {
   position: relative;
   flex: 1;
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
 }
 
 .write-editor-header {
@@ -124,3 +122,12 @@
 .write-editor-wrapper.rich-editor-mode .write-editor-content > div {
   height: auto;
 }
+
+/* Rich editor toolbar: hide shadow when not sticky */
+.write-editor-wrapper.rich-editor-mode [role='toolbar'] {
+  box-shadow: none;
+}
+
+.write-editor-wrapper.rich-editor-mode.toolbar-stuck [role='toolbar'] {
+  box-shadow: var(--rc-shadow-top-bar);
+}