refactoring

packages/tiptap-extensions/src/plugins/Suggestions.js

@@ -103,7 +103,20 @@ export default function SuggestionsPlugin({
 					const started = !prev.active && next.active
 					const stopped = prev.active && !next.active
 					const changed = !started && !stopped && prev.text !== next.text
-					const decorationNode = document.querySelector(`[data-decoration-id="${next.decorationId}"]`)
+					const handleStart = started || moved
+					const handleChange = changed && !moved
+					const handleExit = stopped || moved
+
+					// Cancel when suggestion isn't active
+					if (!handleStart && !handleChange && !handleExit) {
+						return
+					}
+
+					const state = handleExit ? prev : next
+					const decorationNode = document.querySelector(`[data-decoration-id="${state.decorationId}"]`)
+
+					// build a virtual node for popper.js or tippy.js
+					// this can be used for building popups without a DOM node
 					const virtualNode = decorationNode ? {
 						getBoundingClientRect() {
 							return decorationNode.getBoundingClientRect()
@@ -112,40 +125,14 @@ export default function SuggestionsPlugin({
 						clientHeight: decorationNode.clientHeight,
 					} : null
 
-					// Trigger the hooks when necessary
+					const props = {
-					if (stopped || moved) {
-						onExit({
 						view,
-							range: prev.range,
+						range: state.range,
-							query: prev.text,
+						query: state.text,
-							text: prev.fullText,
+						text: state.fullText,
 						decorationNode,
 						virtualNode,
-							items: onFilter(items, prev.text),
+						items: onFilter(items, state.text),
-						})
-					}
-
-					if (changed && !moved) {
-						onChange({
-							view,
-							range: next.range,
-							query: next.text,
-							text: next.fullText,
-							decorationNode,
-							virtualNode,
-							items: onFilter(items, next.text),
-						})
-					}
-
-					if (started || moved) {
-						onEnter({
-							view,
-							range: next.range,
-							query: next.text,
-							text: next.fullText,
-							decorationNode,
-							virtualNode,
-							items: onFilter(items, next.text),
 						command: ({ range, attrs }) => {
 							command({
 								range,
@@ -153,7 +140,19 @@ export default function SuggestionsPlugin({
 								schema: view.state.schema,
 							})(view.state, view.dispatch, view)
 						},
-						})
+					}
+
+					// Trigger the hooks when necessary
+					if (handleExit) {
+						onExit(props)
+					}
+
+					if (handleChange) {
+						onChange(props)
+					}
+
+					if (handleStart) {
+						onEnter(props)
 					}
 				},
 			};