Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: table toolbar popup malposition in tdesign drawer #1058

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from
Open

fix: table toolbar popup malposition in tdesign drawer #1058

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4c07bf8
fix: table toolbar popup malposition in tdesign drawer
YFAnt Feb 28, 2025
a05b34f
fix: changeset
YFAnt Feb 28, 2025
5a15783
fix: changeset
YFAnt Feb 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/clean-hotels-sparkle.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'cherry-markdown': patch
---

fix: table toolbar popup malposition in tdesign drawer
11 changes: 9 additions & 2 deletions packages/cherry-markdown/src/toolbars/hooks/Table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,15 @@ export default class Table extends MenuBase {
if (this.subBubbleTableMenu.dom.style.display === 'none' || !this.hasCacheOnce()) {
// 插入表格，会出现一个二维面板，用户可以通过点击决定插入表格的行号和列号
const pos = this.dom.getBoundingClientRect();
this.subBubbleTableMenu.dom.style.left = `${pos.left + pos.width}px`;
this.subBubbleTableMenu.dom.style.top = `${pos.top + pos.height}px`;
// 使用绝对定位，相对于编辑器容器定位，而不是相对于视口
// 获取编辑器容器的位置信息
const editorContainer = this.$cherry.editor.options.wrapperDom;
const containerRect = editorContainer.getBoundingClientRect();
const relativeLeft = pos.left - containerRect.left + pos.width;
const relativeTop = pos.top - containerRect.top + pos.height;
this.subBubbleTableMenu.dom.style.position = 'absolute';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不是特别想用绝对定位，在外层有滚动条的时候，滚动时工具栏就无法跟随滚动（比如这里）

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

或者，可以加个配置项，支持配置相对定位和绝对定位

this.subBubbleTableMenu.dom.style.left = `${relativeLeft}px`;
this.subBubbleTableMenu.dom.style.top = `${relativeTop}px`;
this.subBubbleTableMenu.show((row, col) => {
const headerText = ' Header |'.repeat(col);
const controlText = ' ------ |'.repeat(col);
Expand Down