gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tiptap: improve drag

This commit is contained in:
fantasticit 2022-07-09 10:15:56 +08:00
parent e4f6c03576
commit 3ee0c5e095
1 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/client/src/tiptap/core/extensions/dragable.ts
View File

@ -35,6 +35,7 @@ export const Dragable = Extension.create({
function drag(e) { function drag(e) {
if (!currentNode || currentNode.nodeType !== 1) return; if (!currentNode || currentNode.nodeType !== 1) return;
let pos = null; let pos = null;
const desc = editorView.docView.nearestDesc(currentNode, true); const desc = editorView.docView.nearestDesc(currentNode, true);
@ -56,12 +57,14 @@ export const Dragable = Extension.create({
return [ return [
new Plugin({ new Plugin({
view(view) { view(view) {
editorView = view; if (view.editable) {
dropElement = document.createElement('div'); editorView = view;
dropElement.setAttribute('draggable', 'true'); dropElement = document.createElement('div');
dropElement.className = 'drag-handler'; dropElement.setAttribute('draggable', 'true');
dropElement.addEventListener('dragstart', drag); dropElement.className = 'drag-handler';
view.dom.parentElement.appendChild(dropElement); dropElement.addEventListener('dragstart', drag);
view.dom.parentElement.appendChild(dropElement);
}
return { return {
update(view) { update(view) {
@ -78,6 +81,8 @@ export const Dragable = Extension.create({
props: { props: {
handleDOMEvents: { handleDOMEvents: {
drop() { drop() {
if (!dropElement) return;
dropElement.style.opacity = 0; dropElement.style.opacity = 0;
setTimeout(() => { setTimeout(() => {
const node = document.querySelector('.ProseMirror-hideselection'); const node = document.querySelector('.ProseMirror-hideselection');
@ -87,10 +92,15 @@ export const Dragable = Extension.create({
}, 50); }, 50);
}, },
mousemove(view, event) { mousemove(view, event) {
if (!dropElement) return;
const coords = { left: event.clientX, top: event.clientY }; const coords = { left: event.clientX, top: event.clientY };
const pos = view.posAtCoords(coords); const pos = view.posAtCoords(coords);
if (!pos) return; if (!pos) {
dropElement.style.opacity = 0;
return;
}
let node = view.domAtPos(pos.pos); let node = view.domAtPos(pos.pos);
@ -104,10 +114,12 @@ export const Dragable = Extension.create({
} }
if (!node || !node.getBoundingClientRect) { if (!node || !node.getBoundingClientRect) {
dropElement.style.opacity = 0;
return; return;
} }
if (node?.classList?.contains('node-title') || node?.classList?.contains('node-table')) { if (node?.classList?.contains('node-title') || node?.classList?.contains('node-table')) {
dropElement.style.opacity = 0;
return; return;
} }
@ -122,6 +134,10 @@ export const Dragable = Extension.create({
dropElement.style.top = rect.top + 6 + 'px'; dropElement.style.top = rect.top + 6 + 'px';
dropElement.style.opacity = 1; dropElement.style.opacity = 1;
}, },
mouseleave() {
if (!dropElement || currentNode) return;
dropElement.style.opacity = 0;
},
}, },
}, },
}), }),