ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 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
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> <template>
<node-view-wrapper style="padding-left: 1rem"> <node-view-wrapper class="item">
<button @click="toggleChecked" contenteditable="false"> <!-- <button @click="toggleChecked" contenteditable="false">
toggle checked toggle checked
</button> </button>
<div contenteditable="false"> <div contenteditable="false">
checked: {{ node.attrs.checked }} checked: {{ node.attrs.checked }}
</div> </div> -->
<div contenteditable="false" style="width: 20px; height: 20px; background: red" data-drag-handle />
<div data-drag-handle class="drag-handle" contenteditable="false" />
<node-view-content /> <node-view-content />
</node-view-wrapper> </node-view-wrapper>
</template> </template>
@@ -53,3 +54,25 @@ export default {
}, },
} }
</script> </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: ` content: `
<p>paragraph</p> <p>paragraph</p>
<div data-type="test"> <div data-type="test">
one <p>paragraph</p>
<div data-type="test"> <div data-type="test">
two <p>paragraph</p>
</div> </div>
</div> </div>
<div data-type="test">
<p>paragraph</p>
</div>
<p>paragraph</p> <p>paragraph</p>
`, `,
onUpdate: () => { 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 { view } = this.editor
const target = (event.target as HTMLElement) const target = (event.target as HTMLElement)
@@ -71,6 +71,8 @@ class VueNodeView implements NodeView {
return return
} }
event.dataTransfer?.setDragImage(this.dom, 0, 0)
const selection = NodeSelection.create(view.state.doc, this.getPos()) const selection = NodeSelection.create(view.state.doc, this.getPos())
const transaction = view.state.tr.setSelection(selection) const transaction = view.state.tr.setSelection(selection)