ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

remove json from default demo

Browse Source
This commit is contained in:
Philipp Kühn
2018-08-22 15:51:41 +02:00
parent 762037acc8
commit 243d809cda
2 changed files with 32 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
examples/Components/Routes/Default/Mention.js
View File

@@ -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}`,
],
}
}
}

260
examples/Components/Routes/Default/index.vue
View File

@@ -1,32 +1,17 @@
<template> <template>
<div> <div>
<editor :editable="true" class="editor" :doc="data" :extensions="plugins" @update="onUpdate"> <editor :editable="true" class="editor" @update="onUpdate">
<div class="menububble" slot="menububble" slot-scope="{ marks, focus }"> <div class="menubar" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, marks, focused }">
<template v-if="marks"> <div v-if="nodes && marks">
<form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(linkUrl, marks.link, focus)"> <button class="menubar__button" @click="marks.bold.command" :class="{ 'is-active': marks.bold.active() }">
<input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://" ref="linkInput" @keydown.esc="hideLinkMenu"/> <icon name="bold" />
<button class="menububble__button" @click="setLinkUrl(null, marks.link, focus)" type="button"> </button>
<icon name="remove" /> <button class="menubar__button" @click="marks.italic.command" :class="{ 'is-active': marks.italic.active() }">
</button> <icon name="italic" />
</form> </button>
<template v-else> <button class="menubar__button" @click="marks.code.command" :class="{ 'is-active': marks.code.active() }">
<button class="menububble__button" @click="marks.bold.command" :class="{ 'is-active': marks.bold.active() }"> <icon name="code" />
<icon name="bold" /> </button>
</button>
<button class="menububble__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() }">
<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() }"> <button class="menubar__button" @click="nodes.paragraph.command" :class="{ 'is-active': nodes.paragraph.active() }">
<icon name="paragraph" /> <icon name="paragraph" />
</button> </button>
@@ -48,223 +33,42 @@
<button class="menubar__button" @click="nodes.code_block.command" :class="{ 'is-active': nodes.code_block.active() }"> <button class="menubar__button" @click="nodes.code_block.command" :class="{ 'is-active': nodes.code_block.active() }">
<icon name="code" /> <icon name="code" />
</button> </button>
<button class="menubar__button" @click="nodes.todo_list.command" :class="{ 'is-active': nodes.todo_list.active() }">
<icon name="checklist" />
</button>
</div> </div>
</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> </editor>
<!-- <pre>{{ data }}</pre> -->
</div> </div>
</template> </template>
<script> <script>
import Icon from 'Components/Icon' import Icon from 'Components/Icon'
import { Editor } from 'tiptap' import { Editor } from 'tiptap'
import MentionPlugin from './Mention.js'
export default { export default {
components: { components: {
Editor, Editor,
Icon, 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: { 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) { onUpdate(state) {
this.data = state.doc.toJSON() this.data = state.doc.toJSON()
}, },