Auto complete plugin?

[cnicodeme]

What problem are you facing?

I'd like to implement an auto complete (suggestion that are written if you hit ) on the editor.

What’s the solution you would like to see?

A plugin that takes a function as input that contains the current line, and returns either nothing, or a string being the suggestion to apply. This suggestion will be shown in the editor with a lower opacity to represent the suggestion, and a hit to on the keyboard will apply that suggestion.

What alternatives did you consider?

None. I tried to search on the Issues here at Github, and on the list of extension on tiptap.dev, but didn't find nothing.
The suggestion extension would come close, but isn't appropriate.

Anything to add? (optional)

No response

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[philippkuehn]

This should be possible by rendering e.g. decorations. However, we currently have no plans for such an extension.

[cnicodeme]

Thank you for your answer. Do you have some code sample of something I can display after the current cursor that does not belong to the editor (getting the content won't return that part) and can be custom styled (opacity in css) ?

[hanspagel]

Maybe the Placeholder extension?

[cnicodeme]

Yes, thank you, I'll take a closer look!

[samstephenson]

Did you ever figure this out?

[cnicodeme]

Unfortunately no, but I'd love to have some pointers here!

[samstephenson]

This is what we figured out..

export const AutocompleteExtension = Extension.create({
    name: 'AutocompleteExtension',

    defaultOptions: {
        className: 'autocomplete-suggestion',
        delayBeforeShow: 800,
    },

    addProseMirrorPlugins() {
        return [
            new Plugin({
                state: {
                    init() {
                        return DecorationSet.empty;
                    },
                    apply: (transaction, oldSet) => {

                        let decorationSet = DecorationSet.empty

                        const selection = transaction.selection
                        if (!(selection instanceof TextSelection)) {
                            return decorationSet
                        }

                        // This will add the widget decoration at the cursor position
                        const cursorPos = selection.$head.pos
                        const nextNode = transaction.doc.nodeAt(cursorPos)

                        if (!nextNode || nextNode.isBlock) {
                            const helloWorldDecoration = Decoration.widget(cursorPos, () => {

                                const parentNode = document.createElement('span')

                                let textContent = decideAutocompleteText(selection, this.options.delayBeforeShow)

                                // Create a span for the suggestion
                                const c = '<span class="uppercase text-xs py-0.5 px-1 relative bottom-px font-semibold border-[1.5px] border-border-strong rounded">$1</span>'
                                textContent = textContent.replace(/\[(.*?)\]/g, c);
                                parentNode.innerHTML = textContent
                                parentNode.classList.add(this.options.className)

                                return parentNode

                            }, { side: 1 })

                            decorationSet = decorationSet.add(transaction.doc, [helloWorldDecoration])
                        }
                        return decorationSet
                    }
                },
                props: {
                    decorations(state) {
                        return this.getState(state);
                    },
                },
            }),
        ];
    },
});

Creates a Prosemirror extension with a decoration that sits after the cursor

[cnicodeme]

That looks awesome!

Can you share what decideAutocompleteText does ?

Also, how is this function called ? (is it called at every keystroke and ask the decideAutocompleteText what value to return ?)

Thank you for the clarification.

[samstephenson]

That basically has a bunch of conditionals in it, deciding what text to show return. It just returns a string. Yeah getting it to rerun predictably was a bit of a pain! We have a useEffect in our editor file triggering a prosemirror transaction, when a timer increments. Although I guess you could switch this out for anything. ``` useEffect (() => { // Your code to dispatch a transaction in the ProseMirror editor const tr = editor ?. view ?. state ?. tr ; editor ?. view. dispatch ( tr ); }, [ timeSinceLastInteraction. cursorMoved ]); ```

…

On Tue, May 23, 2023 at 07:48:59, Cyril Nicodème < ***@***.*** > wrote: That looks awesome! Can you share what decideAutocompleteText does ? Also, how is this function called ? (is it called at every keystroke and ask the decideAutocompleteText what value to return ?) Thank you for the clarification. — Reply to this email directly, view it on GitHub ( #2399 (comment) ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/ACRUQFV5JOP623NDTWRHIVLXHRMVXANCNFSM5MGQBFIQ ). You are receiving this because you commented. Message ID: <ueberdosis/tiptap/issues/2399/1558633736 @ github. com>

[cnicodeme]

Thank you, I'll take a look.

To be honest, handling Prosemirror is very difficult, and I'm often stuck for reasons that are quite simple looking from the outside. I've opened another conversation at #4051.

Would you be open to help on this? I would really appreciate it!

[samstephenson]

Afraid my prosemirror knowledge is pretty tiny too. GPT-4 got me to most of the stuff above 🙃 Hope you can find a solution!

…

On Tue, May 23, 2023 at 13:59:42, Cyril Nicodème < ***@***.*** > wrote: Thank you, I'll take a look. To be honest, handling Prosemirror is very difficult, and I'm often stuck for reasons that are quite simple looking from the outside. I've opened another conversation at #4051 ( #4051 ). Would you be open to help on this? I would really appreciate it! — Reply to this email directly, view it on GitHub ( #2399 (comment) ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/ACRUQFW5O47MBGWD6OHSYW3XHSYD5ANCNFSM5MGQBFIQ ). You are receiving this because you commented. Message ID: <ueberdosis/tiptap/issues/2399/1559278432 @ github. com>

[cnicodeme]

That's ok, it was worth a try 😄

[saideepesh000]

decideAutocompleteText

Hey @samstephenson . How does the implementation of decideAutocompleteText looks like?