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

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

@@ -1,44 +1,36 @@
<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>
<template v-else>
<button
class="menububble__button"
@click="showLinkMenu(marks.link)"
:class="{ 'is-active': marks.link.active() }"
>
<span>Add Link</span>
<icon name="link" />
</button>
</template>
<template v-else>
<button
class="menububble__button"
@click="showLinkMenu(marks.link)"
:class="{ 'is-active': marks.link.active() }"
>
<span>Add Link</span>
<icon name="link" />
</button>
</template> </template>
</div>
<div class="editor__content" slot="content" slot-scope="props"> </template>
<h2> </menu-bubble>
Links
</h2> <editor-content class="editor__content" :editor="editor" />
<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,27 +50,38 @@ import {
export default { export default {
components: { components: {
Editor, EditorContent,
MenuBubble,
Icon, Icon,
}, },
data() { data() {
return { return {
extensions: [ editor: new Editor({
new BlockquoteNode(), extensions: [
new BulletListNode(), new BlockquoteNode(),
new CodeBlockNode(), new BulletListNode(),
new HardBreakNode(), new CodeBlockNode(),
new HeadingNode({ maxLevel: 3 }), new HardBreakNode(),
new ListItemNode(), new HeadingNode({ maxLevel: 3 }),
new OrderedListNode(), new ListItemNode(),
new TodoItemNode(), new OrderedListNode(),
new TodoListNode(), new TodoItemNode(),
new BoldMark(), new TodoListNode(),
new CodeMark(), new BoldMark(),
new ItalicMark(), new CodeMark(),
new LinkMark(), new ItalicMark(),
new HistoryExtension(), new LinkMark(),
], 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()
}, },
}, },
} }