Support of Mention/Suggestion extension

[leerobert]

Similar to BubbleMenu, the Suggestion/Mention extension require injecting in a custom component. I played around with trying to get SvelteRender to work injecting a component in but I'm not smart enough with Svelte to figure this out.

[sibiraj-s]

Moved this to a discussion, as this is not an issue with the package

[sibiraj-s]

Based on what I see here https://tiptap.dev/api/nodes/mention

It would be really same instead of jsx and react renderer you would be using svelte component and svelte renderer, something like

Rendering the component

import MentionList from './MentionList.svelte'

const mentionListComponent = new MentionList(props)

const renderer = SvelteRenderer(mentionListComponent, {element: yourDomHere })

To update props

renderer.updateProps(props)

others are just tiptap stuff. I haven't tried this as I do not have enough time, but I believe the implementation is failrly similar and straightforward.

May be i will give it a shot sometime next week

[ysk3a]

If after giving a shot is successful, and when you have some time, would you be able to add a demo of it here? I would like see the implementation and also to try to use this and see how it will behave.

[leerobert]

https://github.com/sveltor/nextlint/blob/main/packages/svelte/src/lib/plugins/slash/suggestion.ts

[ysk3a]

i think that example would be good to follow if adding slash commands was needed but i was hoping for a more simpler example to start with that just shows list of users following https://tiptap.dev/api/nodes/mention example but for svelte.
In the future i'll look into how to make it async to call from api but first I just wanted to see if tiptap suggestion in svelte would work.

more specifically, im having trouble understanding why

const {clientRect, editor} = props;
      wrapper = document.createElement('div');
      editor.view.dom.parentNode?.appendChild(wrapper);

in https://github.com/sveltor/nextlint/blob/main/packages/svelte/src/lib/plugins/slash/renderer.ts
is needed and what it does.

[leerobert]

@sibiraj-s I found another project implementing suggestion into svelte:

https://github.com/sveltor/nextlint/blob/main/packages/svelte/src/lib/plugins/slash/suggestion.ts

Might be some inspiration here

[sibiraj-s]

Great. Thanks

[jcrd]

Hey, I am implementing the Mention extension using this discussion as a guideline. Nearly everything works as expected, but the query text used to filter suggestions remains part of the editor content rather than being replaced by the inserted Mention.

I set up a minimal reproduction.

Any thoughts on what's going wrong?

[sibiraj-s]

Hi, you should be asking this over the tiptap channels. This is just the wrapper for making tiptap work with svelte.

Sorry for that.

[epulla]

hey @jcrd 👋 your code works perfectly! Here's a trick I used to remove the query used to filter the suggestions:

onExit: (props) => {
          const range = {
		from: props.editor.state.selection.from,
		to: props.editor.state.selection.from + props.query.length
	 }
	 props.editor.commands.setTextSelection(range);
	 props.editor.commands.deleteSelection();
         popup[0].destroy();
         renderer.destroy();
         wrapper.remove();
},

Just replace your onExit() from your suggestion.js file with the code above. Here's a forked project using your minimal reproduction.

Hope it helps 🙏

[sidharthv96]

@epulla I was a bit confused initially as I felt the key events in the list were not working. But it was actually working perfectly! I've forked here and added a bit of CSS to highlight the selection, and make it clickable as well.