How to add keymaps for a plugin

[ebigram]

Autocompletion capability

Hi Inkdrop community, I’m working on a simple autocompletion plugin leveraging CodeMirror’s existing hinting capabilities, and was wondering if anyone had anyone had a simplified “hello world” example I could use a starting point. I was able to get this to work using vanilla CodeMirror, but for some reason it’s not getting picked up by CM embedded in Inkdrop’s code editor. This seems like it should be simple, but I’m fairly inexperienced JS/React developer, and probably missing something basic.

This is the sample snippet I’m trying to get to work, but it’s not really registering so far.

    const cm = editor.cm;

        const snippets = [
            { text: 'const', displayText: 'const declarations' },
            { text: 'let', displayText: 'let declarations' },
            { text: 'var', displayText: 'var declarations' },
        ];
        //    cm.setOption('lineNumbers', false);
        // keymap を指定
        //TODO: implement hinter here
        // @ts-ignore
        // CodeMirror.registerHelper("gfm", "complete-emoji", anyword);
        // keymap を指定
        cm.setOption('extraKeys', {
            'alt-h': function () {
                CodeMirror.showHint(cm, function () {
                    const cursor = cm.getCursor();
                    const token = cm.getTokenAt(cursor);
                    const start = token.start;
                    const end = cursor.ch;
                    const line = cursor.line;
                    const currentWord = token.string;

                    const list = snippets.filter(function (item) {
                        return item.text.indexOf(currentWord) >= 0;
                    });

                    return {
                        list: list.length ? list : snippets,
                        from: CodeMirror.Pos(line, start),
                        to: CodeMirror.Pos(line, end)
                    };
                });
            }
        });
    }

Thanks for the help!

[craftzdog (Takuya Matsuyama)]

Hi ebigram,

Thank you for the question.
In Inkdrop, there is a command-base keymapping system that works across all components on the app.
So, CodeMirror’s keymap is disabled and discouraged.
You should check out the plugin development tutorial here:

Plugin: Word Count

It mentions about how to add keymaps.
Hope that helps.

[ebigram]

Thanks I was able to get a very rudimentary version of this to work. Though the tooltip rendering seems like it’s going to need some refinement; it’s an encouraging start.

[craftzdog (Takuya Matsuyama)]

Great to hear that!