8c6751f0c6
* chore: add precommit hook for eslint fixes, fix linting issues * chore: add eslint import sort plugin
85 lines
1.4 KiB
Vue
85 lines
1.4 KiB
Vue
<template>
|
||
<editor-content :editor="editor" />
|
||
</template>
|
||
|
||
<script>
|
||
import StarterKit from '@tiptap/starter-kit'
|
||
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||
|
||
import NodeView from './Extension.js'
|
||
|
||
export default {
|
||
components: {
|
||
EditorContent,
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
editor: null,
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.editor = new Editor({
|
||
extensions: [
|
||
StarterKit,
|
||
NodeView,
|
||
],
|
||
content: `
|
||
<p>
|
||
This is still the text editor you’re used to, but enriched with node views.
|
||
</p>
|
||
<node-view>
|
||
<p>This is editable.</p>
|
||
</node-view>
|
||
<p>
|
||
Did you see that? That’s a JavaScript node view. We are really living in the future.
|
||
</p>
|
||
`,
|
||
})
|
||
},
|
||
|
||
beforeUnmount() {
|
||
this.editor.destroy()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/* Basic editor styles */
|
||
.ProseMirror {
|
||
> * + * {
|
||
margin-top: 0.75em;
|
||
}
|
||
}
|
||
|
||
.node-view {
|
||
background: #FAF594;
|
||
border: 3px solid #0D0D0D;
|
||
border-radius: 0.5rem;
|
||
margin: 1rem 0;
|
||
position: relative;
|
||
}
|
||
|
||
.label {
|
||
margin-left: 1rem;
|
||
background-color: #0D0D0D;
|
||
font-size: 0.6rem;
|
||
letter-spacing: 1px;
|
||
font-weight: bold;
|
||
text-transform: uppercase;
|
||
color: #fff;
|
||
position: absolute;
|
||
top: 0;
|
||
padding: 0.25rem 0.75rem;
|
||
border-radius: 0 0 0.5rem 0.5rem;
|
||
}
|
||
|
||
.content {
|
||
margin: 2.5rem 1rem 1rem;
|
||
padding: 0.5rem;
|
||
border: 2px dashed #0D0D0D20;
|
||
border-radius: 0.5rem;
|
||
}
|
||
</style>
|