mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 14:13:21 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

improve draggable example

Browse Source
This commit is contained in:
Philipp Kühn 2020-11-25 17:19:24 +01:00
parent e407c5ebf3
commit b7ca33aeae
3 changed files with 35 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
docs/src/demos/Examples/NodeView/Component.vue
View File

@ -1,12 +1,13 @@
<template>
<node-view-wrapper style="padding-left: 1rem">
<button @click="toggleChecked" contenteditable="false">
<node-view-wrapper class="item">
<!-- <button @click="toggleChecked" contenteditable="false">
toggle checked
</button>
<div contenteditable="false">
checked: {{ node.attrs.checked }}
</div>
<div contenteditable="false" style="width: 20px; height: 20px; background: red" data-drag-handle />
</div> -->
<div data-drag-handle class="drag-handle" contenteditable="false" />
<node-view-content />
</node-view-wrapper>
</template>
@ -53,3 +54,25 @@ export default {
},
}
</script>
<style lang="scss">
.item {
padding: 0.5rem;
margin: 1rem 0;
border-radius: 0.5rem;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.1),
0px 10px 20px rgba(0, 0, 0, 0.1),
;
}
.drag-handle {
width: 1rem;
height: 1rem;
cursor: grab;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16"><path fill-opacity="0.4" d="M4 14c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM2 6C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6C.9 0 0 .9 0 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg>');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
</style>

7
docs/src/demos/Examples/NodeView/index.vue
View File

@ -36,11 +36,14 @@ export default {
content: `
<p>paragraph</p>
<div data-type="test">
one
<p>paragraph</p>
<div data-type="test">
two
<p>paragraph</p>
</div>
</div>
<div data-type="test">
<p>paragraph</p>
</div>
<p>paragraph</p>
`,
onUpdate: () => {

4
packages/vue/src/VueRenderer.ts
View File

@ -63,7 +63,7 @@ class VueNodeView implements NodeView {
})
}
handleDragStart(event: Event) {
handleDragStart(event: DragEvent) {
const { view } = this.editor
const target = (event.target as HTMLElement)
@ -71,6 +71,8 @@ class VueNodeView implements NodeView {
return
}
event.dataTransfer?.setDragImage(this.dom, 0, 0)
const selection = NodeSelection.create(view.state.doc, this.getPos())
const transaction = view.state.tr.setSelection(selection)