refactor(links): introduce setActiveLink function

Also rename `clicked` state to `active`.
We will also use it for activating via keypress

Signed-off-by: Max <[email protected]>

src/extensions/LinkBubble.js

@@ -4,15 +4,9 @@ import { linkBubble } from '../plugins/links.js'
 const LinkBubble = Extension.create({
 	name: 'linkViewBubble',
 
-	addOptions() {
-		return {
-			pluginKey: 'linkViewBubble',
-		}
-	},
-
 	addProseMirrorPlugins() {
 		return [
-			linkBubble(this.options.pluginKey, {
+			linkBubble({
 				editor: this.editor,
 				parent: this.editor.contentComponent,
 			}),

src/plugins/LinkBubblePluginView.js

@@ -69,19 +69,19 @@ class LinkBubblePluginView {
 	}
 
 	update(view, oldState) {
-		const clicked = this.clickedChanged(view, oldState)
-		if (clicked) {
-			this.updateFromClick(view, clicked)
+		const active = this.activeChanged(view, oldState)
+		if (active) {
+			this.updateFromClick(view, active)
 		} else if (this.selectionUpdated(view, oldState)) {
 			this.updateFromSelection(view)
 		}
 	}
 
-	clickedChanged(view, oldState) {
-		const { clicked } = this.plugin.getState(view.state)
-		const { clicked: oldClicked } = this.plugin.getState(oldState)
-		if (clicked !== oldClicked) {
-			return clicked
+	activeChanged(view, oldState) {
+		const { active } = this.plugin.getState(view.state)
+		const { active: oldActive } = this.plugin.getState(oldState)
+		if (active !== oldActive) {
+			return active
 		}
 	}
 
@@ -117,8 +117,8 @@ class LinkBubblePluginView {
 		this.updateTooltip(view, shouldShow, mark, nodeStart)
 	}, 250)
 
-	updateFromClick(view, clicked) {
-		this.updateTooltip(this.view, !!clicked.mark, clicked.mark, clicked.nodeStart)
+	updateFromClick(view, active) {
+		this.updateTooltip(this.view, !!active.mark, active.mark, active.nodeStart)
 	}
 
 	updateTooltip(view, shouldShow, mark, nodeStart) {

src/plugins/links.js

@@ -23,15 +23,36 @@
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import LinkBubblePluginView from './LinkBubblePluginView.js'
 
-export function linkBubble(pluginKey, options) {
+// Commands
+
+/* Set resolved to be the active element (if it has a link mark)
+ *
+ * @params {ResolvedPos} resolved position of the action
+ */
+export const setActiveLink = (resolved) => (state, dispatch) => {
+	const mark = resolved.marks()
+		.find(m => m.type.name === 'link')
+	if (!mark) {
+		return false
+	}
+	const nodeStart = resolved.pos - resolved.textOffset
+	const active = { mark, nodeStart }
+	if (dispatch) {
+		dispatch(state.tr.setMeta(linkBubbleKey, { active }))
+	}
+	return true
+}
+
+export const linkBubbleKey = new PluginKey('linkBubble')
+export function linkBubble(options) {
 	const linkBubblePlugin = new Plugin({
-		key: new PluginKey(pluginKey),
+		key: linkBubbleKey,
 		state: {
-			init: () => ({ clicked: null }),
+			init: () => ({ active: null }),
 			apply: (tr, cur) => {
-				const meta = tr.getMeta(linkBubblePlugin)
-				if (meta?.clicked) {
-					return { clicked: meta.clicked }
+				const meta = tr.getMeta(linkBubbleKey)
+				if (meta?.active) {
+					return { active: meta.active }
 				} else {
 					return cur
 				}
@@ -55,13 +76,9 @@ export function linkBubble(pluginKey, options) {
 					|| event.metaKey) {
 					return false
 				}
-				const { dispatch, state } = view
+				const { state, dispatch } = view
 				const resolved = state.doc.resolve(pos)
-				const mark = resolved.marks()
-					.find(m => m.type.name === 'link')
-				const nodeStart = resolved.pos - resolved.textOffset
-				const clicked = { mark, nodeStart }
-				dispatch(state.tr.setMeta(linkBubblePlugin, { clicked }))
+				setActiveLink(resolved)(state, dispatch, view)
 			},
 		},
 

src/tests/plugins/linkBubble.spec.js

@@ -20,7 +20,7 @@
  *
  */
 
-import { linkBubble } from '../../plugins/links.js'
+import { linkBubble, setActiveLink } from '../../plugins/links.js'
 import { Plugin, EditorState } from '@tiptap/pm/state'
 import { schema } from '@tiptap/pm/schema-basic'
 
@@ -32,23 +32,56 @@ describe('linkBubble prosemirror plugin', () => {
 	})
 
 	test('usage as plugin', () => {
-		const plugin = new linkBubble('linkBubble')
+		const plugin = new linkBubble()
 		const state = createState({ plugins: [ plugin ] })
 		expect(state.plugins).toContain(plugin)
-		expect(plugin.getState(state)).toEqual({"clicked": null})
+		expect(plugin.getState(state)).toEqual({"active": null})
 	})
 
-	test('updates plugin state clicked on transaction', () => {
-		const plugin = new linkBubble('linkBubble')
+	test('updates plugin state active on transaction', () => {
+		const plugin = new linkBubble()
 		const state = createState({ plugins: [ plugin ] })
-		const dummy = { was: 'clicked' }
-		const tr = state.tr.setMeta(plugin, { clicked: dummy })
+		const dummy = { was: 'active' }
+		const tr = state.tr.setMeta(plugin, { active: dummy })
 		const after = state.apply(tr)
-		expect(plugin.getState(after)).toEqual({"clicked": dummy})
+		expect(plugin.getState(after)).toEqual({"active": dummy})
+	})
+
+	test('setActiveLink requires a link mark', () => {
+		const noMarks = { marks: () => [] }
+		expect(setActiveLink(noMarks)(null, null)).toBe(false)
+		const otherMark = { marks: () => [{type: {name: 'other'}}] }
+		expect(setActiveLink(otherMark)(null, null)).toBe(false)
+		const mark = { marks: () => [{type: {name: 'link'}}] }
+		expect(setActiveLink(mark)(null, null)).toBe(true)
+	})
+
+	test('setActiveLink extracts the link mark', () => {
+		const plugin = new linkBubble()
+		const state = createState({ plugins: [ plugin ] })
+		const flow = createFlow(state)
+		const mark = { type: { name: 'link' } }
+		const resolved = { marks: () => [mark] }
+		setActiveLink(resolved)(flow.state, flow.dispatch)
+		expect(plugin.getState(flow.state).active.mark)
+			.toEqual(mark)
 	})
 
 })
 
+// simulate the data flow in prosemirror
+function createFlow(initialState) {
+	let state = initialState
+	return {
+		get state() {
+			return state
+		},
+		dispatch: tr => {
+			state = state.apply(tr)
+		},
+	}
+}
+
 function createState(options = {}) {
 	return EditorState.create({
 		schema,