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>
<div>
<editor class="editor" :extensions="extensions">
<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
<template v-if="marks">
<div class="editor">
<menu-bubble class="menububble" :editor="editor">
<template slot-scope="{ nodes, 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="showLinkMenu(marks.link)"
:class="{ 'is-active': marks.link.active() }"
>
<span>Add Link</span>
<icon name="link" />
</button>
</template>
<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"/>
<button class="menububble__button" @click="setLinkUrl(null, marks.link)" type="button">
<icon name="remove" />
</button>
</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>
</div>
<div class="editor__content" slot="content" slot-scope="props">
<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>
</div>
</editor>
</template>
</menu-bubble>
<editor-content class="editor__content" :editor="editor" />
</div>
</template>
<script>
import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
import { Editor, EditorContent, MenuBubble } from 'tiptap'
import {
BlockquoteNode,
BulletListNode,
@@ -58,27 +50,38 @@ import {
export default {
components: {
Editor,
EditorContent,
MenuBubble,
Icon,
},
data() {
return {
extensions: [
new BlockquoteNode(),
new BulletListNode(),
new CodeBlockNode(),
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new ListItemNode(),
new OrderedListNode(),
new TodoItemNode(),
new TodoListNode(),
new BoldMark(),
new CodeMark(),
new ItalicMark(),
new LinkMark(),
new HistoryExtension(),
],
editor: new Editor({
extensions: [
new BlockquoteNode(),
new BulletListNode(),
new CodeBlockNode(),
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new ListItemNode(),
new OrderedListNode(),
new TodoItemNode(),
new TodoListNode(),
new BoldMark(),
new CodeMark(),
new ItalicMark(),
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,
linkMenuIsActive: false,
}
@@ -98,7 +101,7 @@ export default {
setLinkUrl(url, type, focus) {
type.command({ href: url })
this.hideLinkMenu()
focus()
this.editor.focus()
},
},
}