Better click-away behavior

[doublejosh]

If the user clicks away from the ProseMirror editor with @mention suggestions open... they can get stuck open. This is particularly bad once the user scrolls and the suggestions remain fixed.

Is it possible to react to ProseMirror losing focus?

It may be the repressibility of the wrapping application to provide a listener canvas.

Here's a thread with similar goals... https://discuss.prosemirror.net/t/handling-focus-in-plugins/1981

[joelewis]

Yes, this needs to be handled by the plugin.

            handleDOMEvents: {
                blur: function(view, e) {
                    var state = this.getState(view.state);
                    if (state && state.suggestions.length) {
                        // hide suggestions list if view is not focused
                        // hide after a timeout so that losing focus when selecting a list-item is handled properly.
                        setTimeout(function() {
                            hideList();
                        }, 500);
                        return false;
                    }
                },

                focus: function(view, e) {
                    var state = this.getState(view.state);
                    if (state && state.suggestions.length) {
                        opts.getSuggestions(
                            state.type,
                            state.text,
                            function(suggestions) {
                                // update `state` argument with suggestions
                                state.suggestions = suggestions;
                                showList(view, state, suggestions, opts);
                            },
                            opts.extras,
                            view
                        );
                    }
                }
            },

Something like this should do. Will add this handling once I find some time for testing.

[doublejosh]

Thanks. Looks like there's a complication with the state property to check. It's attached to the editor state with an ID number appended, example...

state.autosuggestions$50 or state.autosuggestions$51

You end up needing to do something like this, which is very hacky...

var suggestKey = Object.keys(state).find(propName => {
  return propName.indexOf('autosuggestions') === 0
})
return (suggestKey && state[suggestKey].active === true) ? true : false

[doublejosh]

I was adding this to my ProseMirror instance, rather than editing the plugin. Where does handleDOMEvents go inside the plugin?

[doublejosh]

Here's the working code in my fork. https://github.com/themaven-net/prosemirror-mentions/pull/2/files

[doublejosh]

I have a PR ready for this repo if you grant permissions :)

[joelewis]

Thanks! Can you raise a PR against my repository, so that I can merge it here?