add bubble menu from v1

This commit is contained in:
Philipp Kühn
2021-03-30 11:36:51 +02:00
parent 6f69ab1821
commit 71a4e5e646
6 changed files with 402 additions and 0 deletions

View File

@@ -0,0 +1,85 @@
<template>
<div>
<div ref="menu">
menu
</div>
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import BubbleMenu from '@tiptap/extension-bubble-menu'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
Document,
Paragraph,
Text,
BubbleMenu.configure({
element: this.$refs.menu,
}),
],
content: `
<p>
paragraph
</p>
<p>
paragraph
</p>
<p>
paragraph
</p>
`,
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
<style lang="scss">
.has-focus {
border-radius: 3px;
box-shadow: 0 0 0 3px #68CEF8;
}
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
ul,
ol {
padding: 0 1rem;
}
blockquote {
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
code {
background-color: rgba(#616161, 0.1);
color: #616161;
}
}
</style>