fix: 浮动工具栏坐标修正 — 转为 editorPane 局部坐标，紧贴选中文字

dist/metona-editor.cjs.js

@@ -3712,31 +3712,31 @@ class MarkdownEditor {
             }
             if (!this._floatingToolbar || !this._floatingToolbar.parentNode)
                 this._buildFloatingToolbar();
-            // Position the toolbar near the selection
-            const rect = ta.getBoundingClientRect();
+            // Position the toolbar near the selection (toolbar is absolute inside editorPane)
+            const taRect = ta.getBoundingClientRect();
+            const paneRect = this.editorPane.getBoundingClientRect();
             const textBefore = ta.value.substring(0, start);
             const lines = textBefore.split('\n');
             const currentLine = lines.length - 1;
             const lineHeight = parseInt(getComputedStyle(ta).lineHeight, 10) || 22;
             const paddingTop = parseInt(getComputedStyle(ta).paddingTop, 10) || 16;
             const scrollOffset = ta.scrollTop;
-            // Line top relative to textarea content area
-            const lineTop = rect.top + paddingTop + currentLine * lineHeight - scrollOffset;
+            // Line top relative to viewport
+            const lineViewportTop = taRect.top + paddingTop + currentLine * lineHeight - scrollOffset;
+            // Convert to editorPane-local coordinates
+            const lineLocalTop = lineViewportTop - paneRect.top;
             const toolbarHeight = 36;
             const gap = 4;
             // Try above first
-            let top = lineTop - toolbarHeight - gap;
+            let top = lineLocalTop - toolbarHeight - gap;
             // If not enough room above, place below the selection
-            if (top < rect.top + gap) {
-                top = lineTop + lineHeight + gap;
+            if (top < gap) {
+                top = lineLocalTop + 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)
-                left = rect.left + 4;
-            const maxLeft = rect.right - 200;
-            if (left > maxLeft)
-                left = maxLeft;
+            // Horizontal: center near selection, in pane-local coords
+            const selMidX = taRect.left + (ta.selectionEnd - ta.selectionStart) / 2 * (taRect.width / Math.max(1, ta.value.length || 1));
+            let left = selMidX - paneRect.left - 80; // ~half toolbar width (5*28 + gaps)
+            left = Math.max(4, Math.min(left, paneRect.width - 200));
             this._floatingToolbar.style.top = top + 'px';
             this._floatingToolbar.style.left = left + 'px';
             this._floatingToolbar.classList.add('me-visible');

dist/metona-editor.esm.js

@@ -3708,31 +3708,31 @@ class MarkdownEditor {
             }
             if (!this._floatingToolbar || !this._floatingToolbar.parentNode)
                 this._buildFloatingToolbar();
-            // Position the toolbar near the selection
-            const rect = ta.getBoundingClientRect();
+            // Position the toolbar near the selection (toolbar is absolute inside editorPane)
+            const taRect = ta.getBoundingClientRect();
+            const paneRect = this.editorPane.getBoundingClientRect();
             const textBefore = ta.value.substring(0, start);
             const lines = textBefore.split('\n');
             const currentLine = lines.length - 1;
             const lineHeight = parseInt(getComputedStyle(ta).lineHeight, 10) || 22;
             const paddingTop = parseInt(getComputedStyle(ta).paddingTop, 10) || 16;
             const scrollOffset = ta.scrollTop;
-            // Line top relative to textarea content area
-            const lineTop = rect.top + paddingTop + currentLine * lineHeight - scrollOffset;
+            // Line top relative to viewport
+            const lineViewportTop = taRect.top + paddingTop + currentLine * lineHeight - scrollOffset;
+            // Convert to editorPane-local coordinates
+            const lineLocalTop = lineViewportTop - paneRect.top;
             const toolbarHeight = 36;
             const gap = 4;
             // Try above first
-            let top = lineTop - toolbarHeight - gap;
+            let top = lineLocalTop - toolbarHeight - gap;
             // If not enough room above, place below the selection
-            if (top < rect.top + gap) {
-                top = lineTop + lineHeight + gap;
+            if (top < gap) {
+                top = lineLocalTop + 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)
-                left = rect.left + 4;
-            const maxLeft = rect.right - 200;
-            if (left > maxLeft)
-                left = maxLeft;
+            // Horizontal: center near selection, in pane-local coords
+            const selMidX = taRect.left + (ta.selectionEnd - ta.selectionStart) / 2 * (taRect.width / Math.max(1, ta.value.length || 1));
+            let left = selMidX - paneRect.left - 80; // ~half toolbar width (5*28 + gaps)
+            left = Math.max(4, Math.min(left, paneRect.width - 200));
             this._floatingToolbar.style.top = top + 'px';
             this._floatingToolbar.style.left = left + 'px';
             this._floatingToolbar.classList.add('me-visible');

dist/metona-editor.js

@@ -3714,31 +3714,31 @@ dl{margin:.8em 0}dt{font-weight:650;margin:.6em 0 .2em}dd{margin:0 0 .3em 1.6em;
                 }
                 if (!this._floatingToolbar || !this._floatingToolbar.parentNode)
                     this._buildFloatingToolbar();
-                // Position the toolbar near the selection
-                const rect = ta.getBoundingClientRect();
+                // Position the toolbar near the selection (toolbar is absolute inside editorPane)
+                const taRect = ta.getBoundingClientRect();
+                const paneRect = this.editorPane.getBoundingClientRect();
                 const textBefore = ta.value.substring(0, start);
                 const lines = textBefore.split('\n');
                 const currentLine = lines.length - 1;
                 const lineHeight = parseInt(getComputedStyle(ta).lineHeight, 10) || 22;
                 const paddingTop = parseInt(getComputedStyle(ta).paddingTop, 10) || 16;
                 const scrollOffset = ta.scrollTop;
-                // Line top relative to textarea content area
-                const lineTop = rect.top + paddingTop + currentLine * lineHeight - scrollOffset;
+                // Line top relative to viewport
+                const lineViewportTop = taRect.top + paddingTop + currentLine * lineHeight - scrollOffset;
+                // Convert to editorPane-local coordinates
+                const lineLocalTop = lineViewportTop - paneRect.top;
                 const toolbarHeight = 36;
                 const gap = 4;
                 // Try above first
-                let top = lineTop - toolbarHeight - gap;
+                let top = lineLocalTop - toolbarHeight - gap;
                 // If not enough room above, place below the selection
-                if (top < rect.top + gap) {
-                    top = lineTop + lineHeight + gap;
+                if (top < gap) {
+                    top = lineLocalTop + 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)
-                    left = rect.left + 4;
-                const maxLeft = rect.right - 200;
-                if (left > maxLeft)
-                    left = maxLeft;
+                // Horizontal: center near selection, in pane-local coords
+                const selMidX = taRect.left + (ta.selectionEnd - ta.selectionStart) / 2 * (taRect.width / Math.max(1, ta.value.length || 1));
+                let left = selMidX - paneRect.left - 80; // ~half toolbar width (5*28 + gaps)
+                left = Math.max(4, Math.min(left, paneRect.width - 200));
                 this._floatingToolbar.style.top = top + 'px';
                 this._floatingToolbar.style.left = left + 'px';
                 this._floatingToolbar.classList.add('me-visible');