remove json from default demo
This commit is contained in:
Philipp Kühn
@@ -1,30 +0,0 @@
|
||||
import { Node } from 'tiptap/utils'
|
||||
|
||||
export default class MentionNode extends Node {
|
||||
|
||||
get name() {
|
||||
return 'mention'
|
||||
}
|
||||
|
||||
get schema() {
|
||||
return {
|
||||
attrs: {
|
||||
id: {
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
group: 'inline',
|
||||
inline: true,
|
||||
draggable: true,
|
||||
toDOM: node => [
|
||||
'span',
|
||||
{
|
||||
dataId: node.attrs.id,
|
||||
class: 'mention',
|
||||
},
|
||||
`@${node.attrs.id}`,
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,32 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
<editor :editable="true" class="editor" :doc="data" :extensions="plugins" @update="onUpdate">
|
||||
<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
|
||||
<template v-if="marks">
|
||||
<form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(linkUrl, marks.link, focus)">
|
||||
<input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://" ref="linkInput" @keydown.esc="hideLinkMenu"/>
|
||||
<button class="menububble__button" @click="setLinkUrl(null, marks.link, focus)" type="button">
|
||||
<icon name="remove" />
|
||||
</button>
|
||||
</form>
|
||||
<template v-else>
|
||||
<button class="menububble__button" @click="marks.bold.command" :class="{ 'is-active': marks.bold.active() }">
|
||||
<editor :editable="true" class="editor" @update="onUpdate">
|
||||
<div class="menubar" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, marks, focused }">
|
||||
<div v-if="nodes && marks">
|
||||
<button class="menubar__button" @click="marks.bold.command" :class="{ 'is-active': marks.bold.active() }">
|
||||
<icon name="bold" />
|
||||
</button>
|
||||
<button class="menububble__button" @click="marks.italic.command" :class="{ 'is-active': marks.italic.active() }">
|
||||
<button class="menubar__button" @click="marks.italic.command" :class="{ 'is-active': marks.italic.active() }">
|
||||
<icon name="italic" />
|
||||
</button>
|
||||
<button class="menububble__button" @click="marks.code.command" :class="{ 'is-active': marks.code.active() }">
|
||||
<button class="menubar__button" @click="marks.code.command" :class="{ 'is-active': marks.code.active() }">
|
||||
<icon name="code" />
|
||||
</button>
|
||||
<button class="menububble__button" @click="showLinkMenu(marks.link)" :class="{ 'is-active': marks.link.active() }">
|
||||
<icon name="link" />
|
||||
</button>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<div class="menubar" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, focused }">
|
||||
<div v-if="nodes">
|
||||
<button class="menubar__button" @click="nodes.paragraph.command" :class="{ 'is-active': nodes.paragraph.active() }">
|
||||
<icon name="paragraph" />
|
||||
</button>
|
||||
@@ -48,223 +33,42 @@
|
||||
<button class="menubar__button" @click="nodes.code_block.command" :class="{ 'is-active': nodes.code_block.active() }">
|
||||
<icon name="code" />
|
||||
</button>
|
||||
<button class="menubar__button" @click="nodes.todo_list.command" :class="{ 'is-active': nodes.todo_list.active() }">
|
||||
<icon name="checklist" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor__content" slot="content" slot-scope="props"></div>
|
||||
<div class="editor__content" slot="content" slot-scope="props">
|
||||
<h1>
|
||||
A renderless rich-text editor for Vue.js
|
||||
</h1>
|
||||
<p>
|
||||
This editor is based on <a href="https://prosemirror.net">Prosemirror</a>, <em>fully extendable</em> and renderless. There is a plugin system that lets you render each node as <strong>a vue component</strong>.
|
||||
</p>
|
||||
<pre><code>body { display: none; }</code></pre>
|
||||
<ul>
|
||||
<li>
|
||||
A regular list
|
||||
</li>
|
||||
<li>
|
||||
With regular items
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
It's amazing 👏
|
||||
</p>
|
||||
</div>
|
||||
</editor>
|
||||
|
||||
<!-- <pre>{{ data }}</pre> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from 'Components/Icon'
|
||||
import { Editor } from 'tiptap'
|
||||
import MentionPlugin from './Mention.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Editor,
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
linkUrl: null,
|
||||
linkMenuIsActive: false,
|
||||
plugins: [
|
||||
new MentionPlugin(),
|
||||
],
|
||||
data: {
|
||||
"type": "doc",
|
||||
"content": [
|
||||
{
|
||||
"type": "heading",
|
||||
"attrs": {
|
||||
"level": 1,
|
||||
},
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "A renderless rich-text editor for Vue.js "
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "This editor is based on "
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"marks": [
|
||||
{
|
||||
"type": "link",
|
||||
"attrs": {
|
||||
"href": "https://prosemirror.net"
|
||||
}
|
||||
}
|
||||
],
|
||||
"text": "Prosemirror"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": ", "
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"marks": [
|
||||
{
|
||||
"type": "italic"
|
||||
}
|
||||
],
|
||||
"text": "fully extendable "
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": "and renderless. There is a plugin system that lets you render each node as "
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"marks": [
|
||||
{
|
||||
"type": "bold"
|
||||
}
|
||||
],
|
||||
"text": "a vue component. "
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": "Things like mentions "
|
||||
},
|
||||
{
|
||||
"type": "mention",
|
||||
"attrs": {
|
||||
"id": "Philipp"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"text": " are also supported."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "code_block",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "body {\n display: none;\n}"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "todo_list",
|
||||
"content": [
|
||||
{
|
||||
"type": "todo_item",
|
||||
"attrs": {
|
||||
"done": true
|
||||
},
|
||||
"content": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "There is always something to do"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "todo_item",
|
||||
"attrs": {
|
||||
"done": false
|
||||
},
|
||||
"content": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "This list will never end"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "bullet_list",
|
||||
"content": [
|
||||
{
|
||||
"type": "list_item",
|
||||
"content": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "A regular list"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "list_item",
|
||||
"content": [
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "With regular items"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "paragraph",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "It's amazing 👏"
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showLinkMenu(type) {
|
||||
this.linkUrl = type.attrs.href
|
||||
this.linkMenuIsActive = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.linkInput.focus()
|
||||
})
|
||||
},
|
||||
hideLinkMenu() {
|
||||
this.linkUrl = null
|
||||
this.linkMenuIsActive = false
|
||||
},
|
||||
setLinkUrl(url, type, focus) {
|
||||
type.command({ href: url })
|
||||
this.hideLinkMenu()
|
||||
focus()
|
||||
},
|
||||
onUpdate(state) {
|
||||
this.data = state.doc.toJSON()
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user