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

fix links example

Browse Source
This commit is contained in:
Philipp Kühn
2018-10-23 23:21:45 +02:00
parent a84e71cc2a
commit 804b44b146
1 changed files with 53 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
examples/Components/Routes/Links/index.vue
View File

@@ -1,12 +1,11 @@
<template> <template>
<div> <div class="editor">
<editor class="editor" :extensions="extensions"> <menu-bubble class="menububble" :editor="editor">
<div class="menububble" slot="menububble" slot-scope="{ marks, focus }"> <template slot-scope="{ nodes, marks }">
<template v-if="marks">
<form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(linkUrl, marks.link, focus)"> <form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(linkUrl, marks.link)">
<input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://" ref="linkInput" @keydown.esc="hideLinkMenu"/> <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"> <button class="menububble__button" @click="setLinkUrl(null, marks.link)" type="button">
<icon name="remove" /> <icon name="remove" />
</button> </button>
</form> </form>
@@ -23,22 +22,15 @@
</template> </template>
</template> </template>
</div> </menu-bubble>
<div class="editor__content" slot="content" slot-scope="props">
<h2> <editor-content class="editor__content" :editor="editor" />
Links
</h2>
<p>
Try to add some links to the <a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>. By default every link will get a <code>rel="noopener noreferrer nofollow"</code> attribute.
</p>
</div>
</editor>
</div> </div>
</template> </template>
<script> <script>
import Icon from 'Components/Icon' import Icon from 'Components/Icon'
import { Editor } from 'tiptap' import { Editor, EditorContent, MenuBubble } from 'tiptap'
import { import {
BlockquoteNode, BlockquoteNode,
BulletListNode, BulletListNode,
@@ -58,11 +50,13 @@ import {
export default { export default {
components: { components: {
Editor, EditorContent,
MenuBubble,
Icon, Icon,
}, },
data() { data() {
return { return {
editor: new Editor({
extensions: [ extensions: [
new BlockquoteNode(), new BlockquoteNode(),
new BulletListNode(), new BulletListNode(),
@@ -79,6 +73,15 @@ export default {
new LinkMark(), new LinkMark(),
new HistoryExtension(), new HistoryExtension(),
], ],
content: `
<h2>
Links
</h2>
<p>
Try to add some links to the <a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>. By default every link will get a <code>rel="noopener noreferrer nofollow"</code> attribute.
</p>
`,
}),
linkUrl: null, linkUrl: null,
linkMenuIsActive: false, linkMenuIsActive: false,
} }
@@ -98,7 +101,7 @@ export default {
setLinkUrl(url, type, focus) { setLinkUrl(url, type, focus) {
type.command({ href: url }) type.command({ href: url })
this.hideLinkMenu() this.hideLinkMenu()
focus() this.editor.focus()
}, },
}, },
} }