binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: drag drop issues with h4,h5,h6,images and drag handle position in tables solved (#4940)

Browse source
This commit is contained in:
M. Palanikannan 2024-06-27 15:52:52 +05:30 • committed by GitHub
parent 82661589fb
commit 9a255944e4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 27 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

29
packages/editor/src/core/extensions/drag-drop.tsx
View file

@ -69,19 +69,25 @@ function nodeDOMAtCoords(coords: { x: number; y: number }) {
"p:not(:first-child)",
".code-block",
"blockquote",
"h1, h2, h3",
"img",
"h1, h2, h3, h4, h5, h6",
".table-wrapper",
"[data-type=horizontalRule]",
].join(", ");
for (const elem of elements) {
if (elem.matches("p:first-child") && elem.parentElement?.matches(".ProseMirror")) {
return elem;
}
// if the element is a <p> tag that is the first child of a td or th
if (
(elem.matches("td > p:first-child") || elem.matches("th > p:first-child")) &&
elem?.textContent?.trim() !== ""
) {
return elem; // Return only if p tag is not empty
return elem; // Return only if p tag is not empty in td or th
}
// apply general selector
if (elem.matches(generalSelectors)) {
return elem;
@ -316,12 +322,24 @@ function DragHandle(options: DragHandleOptions) {
rect.top += (lineHeight - 20) / 2;
rect.top += paddingTop;
// Li markers
if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
rect.left -= 18;
if (node.parentElement?.parentElement?.matches("td") || node.parentElement?.parentElement?.matches("th")) {
if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
rect.left -= 5;
}
} else {
// Li markers
if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
rect.left -= 18;
}
}
if (node.matches(".table-wrapper")) {
rect.top += 8;
rect.left -= 8;
}
if (node.parentElement?.matches("td") || node.parentElement?.matches("th")) {
rect.left += 8;
}
rect.width = options.dragHandleWidth;
@ -356,6 +374,7 @@ function DragHandle(options: DragHandleOptions) {
if (view.state.selection instanceof NodeSelection) {
droppedNode = view.state.selection.node;
}
if (!droppedNode) return;
const resolvedPos = view.state.doc.resolve(dropPos.pos);

4
packages/editor/src/styles/table.css
View file

@ -20,7 +20,7 @@
.table-wrapper table th {
min-width: 1em;
border: 1px solid rgba(var(--color-border-200));
padding: 10px 15px;
padding: 10px 20px;
vertical-align: top;
box-sizing: border-box;
position: relative;
@ -82,6 +82,7 @@
.table-wrapper .table-controls .rows-control {
width: 20px;
transform: translateX(-50%);
left: -8px;
}
.table-wrapper .table-controls .rows-control .rows-control-div {
@ -114,3 +115,4 @@
opacity: 0;
pointer-events: none;
}