fix: 浮动工具栏精确定位 — 紧贴选中文字 4px，顶部不足时自动显示在下方

dist/metona-editor.cjs.js

@@ -3720,14 +3720,16 @@ class MarkdownEditor {
             const lineHeight = parseInt(getComputedStyle(ta).lineHeight, 10) || 22;
             const paddingTop = parseInt(getComputedStyle(ta).paddingTop, 10) || 16;
             const scrollOffset = ta.scrollTop;
-            // Place toolbar just above the selected line (4px gap)
+            // Line top relative to textarea content area
+            const lineTop = rect.top + paddingTop + currentLine * lineHeight - scrollOffset;
             const toolbarHeight = 36;
-            let top = rect.top + paddingTop + currentLine * lineHeight - scrollOffset - toolbarHeight - 4;
+            const gap = 4;
-            // Clamp: don't go above textarea
+            // Try above first
-            if (top < rect.top)
+            let top = lineTop - toolbarHeight - gap;
-                top = rect.top + 4;
+            // If not enough room above, place below the selection
-            if (top + toolbarHeight > rect.bottom)
+            if (top < rect.top + gap) {
-                top = rect.bottom - toolbarHeight - 4;
+                top = lineTop + lineHeight + gap;
+            }
             // Center horizontally near the middle of selection
             let left = rect.left + (ta.selectionDirection !== 'backward' ? (ta.selectionEnd - ta.selectionStart) / 2 : 0) * 8 + 10;
             if (left < rect.left)

dist/metona-editor.esm.js

@@ -3716,14 +3716,16 @@ class MarkdownEditor {
             const lineHeight = parseInt(getComputedStyle(ta).lineHeight, 10) || 22;
             const paddingTop = parseInt(getComputedStyle(ta).paddingTop, 10) || 16;
             const scrollOffset = ta.scrollTop;
-            // Place toolbar just above the selected line (4px gap)
+            // Line top relative to textarea content area
+            const lineTop = rect.top + paddingTop + currentLine * lineHeight - scrollOffset;
             const toolbarHeight = 36;
-            let top = rect.top + paddingTop + currentLine * lineHeight - scrollOffset - toolbarHeight - 4;
+            const gap = 4;
-            // Clamp: don't go above textarea
+            // Try above first
-            if (top < rect.top)
+            let top = lineTop - toolbarHeight - gap;
-                top = rect.top + 4;
+            // If not enough room above, place below the selection
-            if (top + toolbarHeight > rect.bottom)
+            if (top < rect.top + gap) {
-                top = rect.bottom - toolbarHeight - 4;
+                top = lineTop + lineHeight + gap;
+            }
             // Center horizontally near the middle of selection
             let left = rect.left + (ta.selectionDirection !== 'backward' ? (ta.selectionEnd - ta.selectionStart) / 2 : 0) * 8 + 10;
             if (left < rect.left)

dist/metona-editor.js

@@ -3722,14 +3722,16 @@ dl{margin:.8em 0}dt{font-weight:650;margin:.6em 0 .2em}dd{margin:0 0 .3em 1.6em;
                 const lineHeight = parseInt(getComputedStyle(ta).lineHeight, 10) || 22;
                 const paddingTop = parseInt(getComputedStyle(ta).paddingTop, 10) || 16;
                 const scrollOffset = ta.scrollTop;
-                // Place toolbar just above the selected line (4px gap)
+                // Line top relative to textarea content area
+                const lineTop = rect.top + paddingTop + currentLine * lineHeight - scrollOffset;
                 const toolbarHeight = 36;
-                let top = rect.top + paddingTop + currentLine * lineHeight - scrollOffset - toolbarHeight - 4;
+                const gap = 4;
-                // Clamp: don't go above textarea
+                // Try above first
-                if (top < rect.top)
+                let top = lineTop - toolbarHeight - gap;
-                    top = rect.top + 4;
+                // If not enough room above, place below the selection
-                if (top + toolbarHeight > rect.bottom)
+                if (top < rect.top + gap) {
-                    top = rect.bottom - toolbarHeight - 4;
+                    top = lineTop + lineHeight + gap;
+                }
                 // Center horizontally near the middle of selection
                 let left = rect.left + (ta.selectionDirection !== 'backward' ? (ta.selectionEnd - ta.selectionStart) / 2 : 0) * 8 + 10;
                 if (left < rect.left)

src/core.ts

@@ -737,12 +737,17 @@ export class MarkdownEditor {
       const paddingTop = parseInt(getComputedStyle(ta).paddingTop, 10) || 16;
       const scrollOffset = ta.scrollTop;
 
-      // Place toolbar just above the selected line (4px gap)
+      // Line top relative to textarea content area
+      const lineTop = rect.top + paddingTop + currentLine * lineHeight - scrollOffset;
       const toolbarHeight = 36;
-      let top = rect.top + paddingTop + currentLine * lineHeight - scrollOffset - toolbarHeight - 4;
+      const gap = 4;
-      // Clamp: don't go above textarea
+
-      if (top < rect.top) top = rect.top + 4;
+      // Try above first
-      if (top + toolbarHeight > rect.bottom) top = rect.bottom - toolbarHeight - 4;
+      let top = lineTop - toolbarHeight - gap;
+      // If not enough room above, place below the selection
+      if (top < rect.top + gap) {
+        top = lineTop + lineHeight + gap;
+      }
 
       // Center horizontally near the middle of selection
       let left = rect.left + (ta.selectionDirection !== 'backward' ? (ta.selectionEnd - ta.selectionStart) / 2 : 0) * 8 + 10;