Fix @tiptap/suggestion plugin to work correctly with allowSpaces: true (see: ueberdosis#214 (comment))

Author: danielschwab

packages/suggestion/src/findSuggestionMatch.ts

@@ -30,13 +30,11 @@ export function findSuggestionMatch(config: Trigger): SuggestionMatch {
     ? new RegExp(`${prefix}${escapedChar}.*?(?=\\s${finalEscapedChar}|$)`, 'gm')
     : new RegExp(`${prefix}(?:^)?${escapedChar}[^\\s${finalEscapedChar}]*`, 'gm')
 
-  const text = $position.nodeBefore?.isText && $position.nodeBefore.text
+  const isTopLevelNode = $position.depth <= 0
+  const textFrom = isTopLevelNode ? 0 : $position.before()
+  const textTo = $position.pos
+  const text = $position.doc.textBetween(textFrom, textTo, '\0', '\0')
 
-  if (!text) {
-    return null
-  }
-
-  const textFrom = $position.pos - text.length
   const match = Array.from(text.matchAll(regexp)).pop()
 
   if (!match || match.input === undefined || match.index === undefined) {
@@ -53,7 +51,7 @@ export function findSuggestionMatch(config: Trigger): SuggestionMatch {
   }
 
   // The absolute position of the match in the document
-  const from = textFrom + match.index
+  const from = match.index + $position.start()
   let to = from + match[0].length
 
   // Edge case handling; if spaces are allowed and we're directly in between

packages/suggestion/src/suggestion.ts

@@ -278,7 +278,7 @@ export function Suggestion<I = any, TSelected = any>({
           const next = this.key?.getState(view.state)
 
           // See how the state changed
-          const moved = prev.active && next.active && prev.range.from !== next.range.from
+          const moved = prev.active && next.active && !!prev.range.from && prev.range.from !== next.range.from
           const started = !prev.active && next.active
           const stopped = prev.active && !next.active
           const changed = !started && !stopped && prev.query !== next.query
@@ -300,8 +300,18 @@ export function Suggestion<I = any, TSelected = any>({
             range: state.range,
             query: state.query,
             text: state.text,
-            items: [],
+            items: handleChange || handleStart
+              ? await items({
+                editor,
+                query: state.query,
+              })
+              : [],
             command: commandProps => {
+              if (!commandProps) {
+                dispatchExit(editor.view, pluginKey)
+                return
+              }
+
               return command({
                 editor,
                 range: state.range,
@@ -312,31 +322,13 @@ export function Suggestion<I = any, TSelected = any>({
             clientRect: clientRectFor(view, decorationNode),
           }
 
-          if (handleStart) {
-            renderer?.onBeforeStart?.(props)
-          }
-
-          if (handleChange) {
-            renderer?.onBeforeUpdate?.(props)
-          }
-
-          if (handleChange || handleStart) {
-            props.items = await items({
-              editor,
-              query: state.query,
-            })
-          }
-
           if (handleExit) {
-            renderer?.onExit?.(props)
-          }
-
-          if (handleChange) {
-            renderer?.onUpdate?.(props)
-          }
-
-          if (handleStart) {
-            renderer?.onStart?.(props)
+            dispatchExit(view, pluginKey)
+            return renderer?.onExit?.(props)
+          } if (handleChange) {
+            return renderer?.onUpdate?.(props)
+          } if (handleStart) {
+            return renderer?.onStart?.(props)
           }
         },
 
@@ -355,13 +347,15 @@ export function Suggestion<I = any, TSelected = any>({
       init() {
         const state: {
           active: boolean
+          key: null | string
           range: Range
           query: null | string
           text: null | string
           composing: boolean
           decorationId?: string | null
         } = {
           active: false,
+          key: null,
           range: {
             from: 0,
             to: 0,
@@ -380,25 +374,40 @@ export function Suggestion<I = any, TSelected = any>({
         const { composing } = editor.view
         const { selection } = transaction
         const { empty, from } = selection
-        const next = { ...prev }
+        let next = { ...prev }
 
         // If a transaction carries the exit meta for this plugin, immediately
         // deactivate the suggestion. This allows metadata-only transactions
         // (dispatched by escape or programmatic exit) to deterministically
         // clear decorations without changing the document.
         const meta = transaction.getMeta(pluginKey)
-        if (meta && meta.exit) {
-          next.active = false
-          next.decorationId = null
-          next.range = { from: 0, to: 0 }
-          next.query = null
-          next.text = null
+        if (meta) {
+          if (meta.exit) {
+            next.active = false
+            next.decorationId = null
+            next.range = {from: 0, to: 0}
+            next.query = null
+            next.text = null
 
-          return next
+            return next
+          }
+
+          if (meta.state) {
+            next = meta.state
+          }
         }
 
         next.composing = composing
 
+        // Don't advance with suggestion if not active and not the open character.
+        if (!next.active && next.key !== char) {
+          return next
+        }
+        if (next.active && next.key === char) {
+          next.key = null
+          return next
+        }
+
         // We can only be suggesting if the view is editable, and:
         //   * there is no selection, or
         //   * a composition is active (see: https://github.com/ueberdosis/tiptap/issues/1449)
@@ -458,6 +467,16 @@ export function Suggestion<I = any, TSelected = any>({
       handleKeyDown(view, event) {
         const { active, range } = plugin.getState(view.state)
 
+        // Set state and handle start
+        if (!active && event.key === char) {
+          const state = plugin.getState(view.state)
+          const updatedState = { ...state }
+          updatedState.active = true
+          updatedState.key = event.key
+          view.dispatch(view.state.tr.setMeta(pluginKey, { state: updatedState }))
+          return
+        }
+
         if (!active) {
           return false
         }