remove nested experiment
This commit is contained in:
Philipp Kühn
@@ -1,80 +0,0 @@
|
|||||||
import { Node, mergeAttributes } from '@tiptap/core'
|
|
||||||
import { VueNodeViewRenderer } from '@tiptap/vue-2'
|
|
||||||
import { Plugin } from 'prosemirror-state'
|
|
||||||
|
|
||||||
import CustomNodeView from './CustomNode.vue'
|
|
||||||
|
|
||||||
export default Node.create({
|
|
||||||
name: 'customNode',
|
|
||||||
isBlock: true,
|
|
||||||
inline: false,
|
|
||||||
group: 'block',
|
|
||||||
draggable: true,
|
|
||||||
isolating: true,
|
|
||||||
defining: true,
|
|
||||||
selectable: true,
|
|
||||||
|
|
||||||
addAttributes() {
|
|
||||||
return {
|
|
||||||
nest: { default: false },
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
parseHTML() {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
tag: 'custom-node',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
|
|
||||||
renderHTML({ HTMLAttributes }) {
|
|
||||||
return ['custom-node', mergeAttributes(HTMLAttributes)]
|
|
||||||
},
|
|
||||||
|
|
||||||
addNodeView() {
|
|
||||||
return VueNodeViewRenderer(CustomNodeView)
|
|
||||||
},
|
|
||||||
|
|
||||||
addProseMirrorPlugins() {
|
|
||||||
return [
|
|
||||||
new Plugin({
|
|
||||||
props: {
|
|
||||||
handleKeyDown: (view, event) => {
|
|
||||||
// Prevent _any_ key from clearing block. As soon as you start typing,
|
|
||||||
// and a block is focused, it'll blast the block away.
|
|
||||||
view.state.typing = true
|
|
||||||
},
|
|
||||||
|
|
||||||
handlePaste: (view, event, slice) => {
|
|
||||||
// Prevent pasting overwriting block
|
|
||||||
view.state.pasting = true
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
filterTransaction: (transaction, state) => {
|
|
||||||
let result = true
|
|
||||||
|
|
||||||
// Check if our flags are set, and if the selected node is a custom node
|
|
||||||
if (state.typing || state.pasting) {
|
|
||||||
transaction.mapping.maps.forEach(map => {
|
|
||||||
map.forEach((oldStart, oldEnd, newStart, newEnd) => {
|
|
||||||
state.doc.nodesBetween(
|
|
||||||
oldStart,
|
|
||||||
oldEnd,
|
|
||||||
(node, number, pos, parent, index) => {
|
|
||||||
if (node.type.name === 'customNode') {
|
|
||||||
result = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return result
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
]
|
|
||||||
},
|
|
||||||
})
|
|
||||||
@@ -1,106 +0,0 @@
|
|||||||
<template>
|
|
||||||
<node-view-wrapper class="draggable-item" :class="{ active: selected }">
|
|
||||||
<div
|
|
||||||
class="drag-handle"
|
|
||||||
contenteditable="false"
|
|
||||||
draggable="true"
|
|
||||||
data-drag-handle
|
|
||||||
/>
|
|
||||||
<div class="draggable-nested">
|
|
||||||
<tiptap-nested />
|
|
||||||
</div>
|
|
||||||
</node-view-wrapper>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { NodeViewWrapper } from '@tiptap/vue-2'
|
|
||||||
import TiptapNested from './Nested.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'CustomNode',
|
|
||||||
|
|
||||||
components: {
|
|
||||||
NodeViewWrapper,
|
|
||||||
TiptapNested,
|
|
||||||
},
|
|
||||||
|
|
||||||
props: {
|
|
||||||
editor: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {},
|
|
||||||
},
|
|
||||||
|
|
||||||
node: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {},
|
|
||||||
},
|
|
||||||
|
|
||||||
decorations: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
|
|
||||||
selected: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
|
|
||||||
extension: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {},
|
|
||||||
},
|
|
||||||
|
|
||||||
getPos: {
|
|
||||||
type: Function,
|
|
||||||
default: () => {},
|
|
||||||
},
|
|
||||||
|
|
||||||
updateAttributes: {
|
|
||||||
type: Function,
|
|
||||||
default: () => {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.draggable-item {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding: 0.5rem;
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
background: white;
|
|
||||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
border: 1px red solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
margin: 0 0 0.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drag-handle {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
position: relative;
|
|
||||||
width: 1rem;
|
|
||||||
height: 1rem;
|
|
||||||
top: 0.3rem;
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
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.2" 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.draggable-nested {
|
|
||||||
flex: 1
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="editor-nested" v-if="editor">
|
|
||||||
<editor-content :editor="editor" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
|
||||||
import StarterKit from '@tiptap/starter-kit'
|
|
||||||
import CustomNode from './CustomNode.js'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
EditorContent,
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
editor: null,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.editor = new Editor({
|
|
||||||
content: `
|
|
||||||
Nested intro text`,
|
|
||||||
extensions: [StarterKit, CustomNode],
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeDestroy() {
|
|
||||||
this.editor.destroy()
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.editor-nested {
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px gray solid;
|
|
||||||
}
|
|
||||||
.ProseMirror {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="editor" v-if="editor">
|
|
||||||
<editor-content :editor="editor" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
|
||||||
import StarterKit from '@tiptap/starter-kit'
|
|
||||||
import CustomNode from './CustomNode.js'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
EditorContent,
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
editor: null,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.editor = new Editor({
|
|
||||||
content: 'Testing<custom-node></custom-node>Text',
|
|
||||||
extensions: [StarterKit, CustomNode],
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeDestroy() {
|
|
||||||
this.editor.destroy()
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editor {
|
|
||||||
/* TODO: Conflicts with other demos */
|
|
||||||
/* padding: 10px; */
|
|
||||||
border: 1px gray solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ProseMirror {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user