tiptap/examples/Components/Routes/Links/index.vue

<template>
	<div>
		<editor class="editor" @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="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">
				<h1>
					Add links inside of a bubble menu
				</h1>
				<p>
					Try to add some links to the <a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>.
				</p>
			</div>
		</editor>
	</div>
</template>

<script>
import Icon from 'Components/Icon'
import { Editor } from 'tiptap'

export default {
  components: {
    Editor,
    Icon,
	},
	data() {
    return {
      linkUrl: null,
			linkMenuIsActive: false,
		}
	},
  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) {
      console.log(state.doc.toJSON())
    },
  },
}
</script>