Show link url in popover

Signed-off-by: Julius Härtl <jus@bitgrid.net>

Author: juliusknorr

src/EditorFactory.js

@@ -76,7 +76,7 @@ const createEditor = ({ content, onInit, onUpdate, extensions, enableRichEditing
 			new CodeBlock(),
 			new ListItem(),
 			new Link({
-				openOnClick: true,
+				openOnClick: false,
 			}),
 			new Image(),
 			new Placeholder({

src/components/MenuBubble.vue

@@ -22,6 +22,7 @@
 
 <template>
 	<EditorMenuBubble v-slot="{ commands, isActive, getMarkAttrs, menu }"
+		:is-active-callback="({ isActive }) => isActive.link()"
 		class="menububble"
 		:editor="editor"
 		@hide="hideLinkMenu">
@@ -37,12 +38,13 @@
 			</form>
 
 			<template v-else>
+				<a :href="getMarkAttrs('link').href" target="_blank" class="icon-external">{{ getMarkAttrs('link').href }}</a>
 				<button
 					class="menububble__button"
 					:class="{ 'is-active': isActive.link() }"
 					@click="showLinkMenu(getMarkAttrs('link'))">
-					<span v-tooltip="isActive.link() ? 'Update Link' : 'Add Link'" class="icon-link" />
-					<span class="menububble__buttontext">{{ t('text', 'Add link') }}</span>
+					<span v-tooltip="isActive.link() ? t('text', 'Update Link') : t('text', 'Add Link')" class="icon-link" />
+					<span class="menububble__buttontext">{{ isActive.link() ? t('text', 'Update Link') : t('text', 'Add Link') }}</span>
 				</button>
 			</template>
 		</div>
@@ -148,5 +150,16 @@ export default {
 			background: transparent;
 			min-width: 150px;
 		}
+
+		.icon-external {
+			max-width: 50vw;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			display: block;
+			white-space: nowrap;
+			padding: 5px 20px 5px 5px;
+			background-position: right;
+			margin-right: 5px;
+		}
 	}
 </style>