Suggestions: Allow more dynamic triggers

[Anatoly03]

What problem are you facing?

I'm looking for a way to use the Suggestions/Mention Plugin, but without the trigger being the @-character, rather the entire word. For example if you were to start writing A, Alice would show up. In other words, I'm looking for a more dynamic way to trigger the suggestions. This could include only triggering when two letters of the word where added, or n, or instantly triggering after the first letter.

What’s the solution you would like to see?

Making Suggestion.char regex-based, so @ wouldn't be affected, but allowing more freedom for the trigger. You could then allow it to trigger upon words that start with a capital letter [A-Z], or words that start with a capital letter and have two letters [A-Z][a-z], or perhaps words that have exactly three characters [A-Za-z]{3}.

What alternatives did you consider?

I tried writing a custom extension, for that I've cloned suggestion.ts, findSuggestionMatch.ts and mention.ts into my repository, to see how they work, however a bug occured in lines 244 and 255 in suggestion.ts: Property 'getState' does not exist on type 'EditorProps'.ts(2339) that I do not know how to fix. It seemed to be a bug with the plugin's prose mirror being out of date, perhaps?

Anything to add? (optional)

No response

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[bdbch]

@Anatoly03 could you get the most recent tiptap versions and try your custom extension again?

[github-actions]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

[hannojg]

I think this was a good suggestion, making the char accept also a regex, and should be reopened

[chrismcgraw60cn]

+1 from me. I had also considered copying the mention and suggestion code to get this functionality. Would be great if it was built in.

[mgtcampbell]

@Anatoly03 did you ever get something like this to work?

I have a similar use case, however in my scenario what I would like is a suggestion menu to trigger on the paste of certain links if they match a regex - for example to give the user to embed a link from a site like YouTube that offers OEmbed data.

So the workflow would be:

1. User pastes in link
2. Tiptap matches the regex for that link type
3. The suggestion menu appears for the user to either turn into an embed or to simply leave the link as is

There are two ways I could see this working in Tiptap:

1. Handle the regex matching the handlePaste Editor options - I know I can make this work - but then open the Suggestion menu programmatically (I can't see any way to manually trigger a suggestion menu)
2. OR... as you were alluding to, have the Suggestion listening for a regex match instead of a string character

I have been looking at the findSuggestionMatch function/option and overriding this when setting up my suggestion as the docs suggest, however I can't even seem to get it to fire - let alone override the default behaviour.

Here's a sample of what I tried for option 2 so far (I am using Vue if that's relevant:

addOptions() {
  return {
    suggestion: {
      char: "!",
      pluginKey: new PluginKey("oembedCommands"),
      command: ({ editor, range, props }) => {
        props.command({ editor, range })
      },
      findSuggestionMatch: (suggestion, suggestionText, matchText) => {
        console.log(suggestionText)
        const regexp = new RegExp(`(https:\/\/)?whimsical.com\/(?:[a-zA-Z0-9\-]+\-)?([a-km-zA-HJ-NP-Z1-9]{16,22})(@[a-km-zA-HJ-NP-Z1-9]+)?`, "g")
        const match = regexp.exec(suggestionText)
        if (!match) {
          return null
        }
        return {
          range: {
            from: {
              offset: match.index,
            },
            to: {
              offset: match.index + match[0].length,
            },
          },
          query: match[0].slice(char.length),
          text: match[0],
        }
      },
    },
  }
},

This does show my Vue component for the menu when I use the character - ! - however the findSuggestionMatch function never seems to fire as I don't get the console.log output I put in there.

I have also tried just not setting the character option, but then nothing happens at all.

Any tips or guidance would be helpful... ideally either there'd be an option as you say to substitute the character for a regex, or at least a way to programmatically open a suggestion menu.

The only other idea I had potentially was to use a Bubble Menu instead, since you can show those more easily programmatically since they have a shouldShow boolean... however this seems more like a job for a suggestion than a hack of a bubble menu.

[doulighan]

@Anatoly03 Did you ever get this working? I have the exact same use case.

[Anatoly03]

I'm sorry, due to my studies I haven't touched webdev or Github for too long, I don't know the state-of-the-art of all the frameworks today, but no, when I was trying to make an editor, I couldn't make this particular idea to work. I'm not sure if it existed back when I opened the issue, but it seems there's a way to specify a character; [code 2]; But I believe if a lot of people keep pushing this issue, probably not?

  /**
   * The suggestion options.
   * @default {}
   * @example { char: '@', pluginKey: MentionPluginKey, command: ({ editor, range, props }) => { ... } }
   */
  suggestion: Omit<SuggestionOptions<SuggestionItem, Attrs>, 'editor'>

  /**
   * The character that triggers the suggestion.
   * @default '@'
   * @example '#'
   */
  char?: string