Fix/hide bubble when in menu

cypress/e2e/nodes/Links.spec.js

@@ -148,7 +148,7 @@ describe('test link marks', function() {
 				cy.getSubmenuEntry('insert-link', 'insert-link-website').click()
 				cy.getActionSubEntry('insert-link-input').find('input[type="text"]').type(`${url}{enter}`)
 				cy.getContent()
-					.get(`a[href*="${url}"]`)
+					.find(`a[href*="${url}"]`)
 					.should('have.text', text) // ensure correct text used
 					.click({ force: true })
 			}

src/components/Editor/PreviewOptions.vue

@@ -20,7 +20,8 @@
   -
   -->
 <template>
-	<NcActions data-text-preview-options="select">
+	<NcActions data-text-preview-options="select"
+		@open="$emit('open')">
 		<template #icon>
 			<DotsVerticalIcon :size="20" />
 		</template>

src/extensions/LinkBubble.js

@@ -1,24 +1,22 @@
 import { Extension } from '@tiptap/core'
-import { Plugin, PluginKey } from '@tiptap/pm/state'
-import LinkBubblePluginView from './LinkBubblePluginView.js'
+import { linkBubble, hideLinkBubble } from '../plugins/links.js'
 
 const LinkBubble = Extension.create({
 	name: 'linkViewBubble',
 
-	addOptions() {
+	addCommands() {
 		return {
-			pluginKey: 'linkViewBubble',
+			hideLinkBubble: () => ({ state, dispatch }) => {
+				return hideLinkBubble(state, dispatch)
+			},
 		}
 	},
 
 	addProseMirrorPlugins() {
 		return [
-			new Plugin({
-				key: new PluginKey(this.options.pluginKey),
-				view: (view) => new LinkBubblePluginView({
-					editor: this.editor,
-					view,
-				}),
+			linkBubble({
+				editor: this.editor,
+				parent: this.editor.contentComponent,
 			}),
 		]
 	},

src/markdownit/preview.js

@@ -21,9 +21,9 @@
  */
 
 /**
- *
- * @param tokens
- * @param i
+ * Check if the given tokens represent a preview in a paragraph
+ * @param {Array} tokens - tokens to check
+ * @param {number} i - offset into the tokens
  */
 function isPreviewLinkInParagraph(tokens, i) {
 	const [prev, cur, next] = tokens.slice(i - 1, i + 2)
@@ -38,15 +38,11 @@ function isPreviewLinkInParagraph(tokens, i) {
 		&& next.type === 'paragraph_close'
 }
 
-/* Remove wrapping tokens
- *
- * @param {array} tokens - the token stream to modify
- * @param {Number} i - index of the token to unwrap
- */
 /**
+ * Remove wrapping tokens
  *
- * @param tokens
- * @param i
+ * @param {Array} tokens - the token stream to modify
+ * @param {number} i - index of the token to unwrap
  */
 function unwrapToken(tokens, i) {
 	// Start from the end so indexes stay the same.
@@ -60,9 +56,10 @@ function unwrapToken(tokens, i) {
 export default (md) => {
 
 	/**
+	 * Markdownit plugin to unwrap previews from a paragraph
 	 *
-	 * @param root0
-	 * @param root0.tokens
+	 * @param {object} state handed to the plugin
+	 * @param {Array} state.tokens current token stream
 	 */
 	function linkPreviews({ tokens }) {
 		// do not process first and last token

src/nodes/ParagraphView.vue

@@ -24,6 +24,7 @@
 	<NodeViewWrapper class="vue-component" as="p">
 		<PreviewOptions v-if="editor.isEditable && href"
 			:value.sync="value"
+			@open="editor.commands.hideLinkBubble()"
 			@update:value="convertToPreview" />
 		<NodeViewContent class="paragraph-content" />
 	</NodeViewWrapper>