MetonaTeam/MetonaEditor
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 浮动工具栏坐标修正 — 转为 editorPane 局部坐标，紧贴选中文字
CI / test (18.x) (push) Canceled after 0s
Details
CI / test (20.x) (push) Canceled after 0s
Details
CI / test (22.x) (push) Canceled after 0s
Details
CI / test (24.x) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
thzxx
2026-07-25 15:20:14 +08:00
parent d96f124a8f
commit a0bf5f3032
8 changed files with 60 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/metona-editor.js
Vendored
+14 -14
View File
@@ -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');