7

I am trying to achieve autosuggestions for css with code mirror browser editor using a react wrapper lib https://www.npmjs.com/package/react-codemirror2

I've tried editor.execCommand('autocomplete'); on onchange event but It crashes the browser

My try

import ReactDOM from "react-dom";
import React from "react";
import {UnControlled as CodeMirror} from 'react-codemirror2';

import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/addon/hint/show-hint.css';

require('codemirror/mode/css/css');
require('codemirror/addon/hint/css-hint');
require('codemirror/addon/hint/show-hint');
require('codemirror/addon/edit/closebrackets');
require('codemirror/addon/lint/lint');
require('codemirror/addon/display/autorefresh');


const App = () => {

    const handleChange = (editor, data, value) => {

        console.log(editor, data, value);

        /* Crash the browser */
        // editor.execCommand('autocomplete');
    }
    return(
        <div>
            <CodeMirror
                value='body{ background: red }'
                options={{
                    mode: 'css',
                    theme: 'material',
                    lineWrapping: true,
                    smartIndent: true,
                    lineNumbers: true,
                    foldGutter: true,
                    autoCloseTags: true,
                    matchBrackets: true,
                    autoCloseBrackets: true,
                    autoRefresh:true
                }}
                onChange={handleChange}
            />
        </div>
    )
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Thanks in advance

Nane
  • 2,370
  • 6
  • 34
  • 74
  • Please update your post a little, so that it describes what you have (which you've done), what problem that has (missing), and what you've tried in terms of searching/debugging/etc to fix it (also missing). Also remember that your title is just a summary of your problem, it is not the question itself. Probably a good idea to reread [how to ask a good question](/help/how-to-ask) to refamiliarize yourself with how to write a question that people can help you answer. – Mike 'Pomax' Kamermans Sep 13 '20 at 16:55
  • I slightly updated it, but if you have any title suggestion I am happy to update it @Mike'Pomax'Kamermans – Nane Sep 13 '20 at 16:58
  • your title is fine, but your post should expand on it. "How do I [...]?" always has the answer "the way the documentation says you should" first, so a post should explain (in plain text, for readers, not _just_ in code, although the code is important too) what you've already tried. SO is not for "how do I [...]", it's for "I I wanted to do [...] and tried [...] and if I try [...], where I would expect [...], instead it does [...]", and now you have a good amount of detail that allows folks to help you with one of those various things that might have gone wrong. – Mike 'Pomax' Kamermans Sep 13 '20 at 17:02
  • 1
    Thanks for suggestion updated my question description hope it's ok – Nane Sep 13 '20 at 17:06

1 Answers1

3

You can use editor.showHint({ completeSingle: false }) instead of editor.execCommand('autocomplete');

const handleChange = (editor, data, value) => {
  editor.showHint({ completeSingle: false });
};

Edit flamboyant-fast-xsdqo

You can also trigger it using certain key combination as described in this Github issue

<CodeMirror
  options={{
    extraKeys: {'Ctrl-Space': 'autocomplete'}, // pressing CTRL + Space will trigger autocomplete
  }}
/>
95faf8e76605e973
  • 13,643
  • 3
  • 24
  • 51
  • Although your solution works Are there any way to press enter and auto-complete the suggestions – Nane Sep 16 '20 at 09:24
  • it _does_ auto-complete when you press enter. did you mean hide the suggestions after auto completing? – 95faf8e76605e973 Sep 16 '20 at 09:27
  • Yes hiding suggestion after auto-completion – Nane Sep 16 '20 at 09:34
  • 1
    i suppose you can write some logic for that. 1 way to close the suggestions is to invoke `editor.closeHint()`. Here is some implementation using `onKeyDown` instead of `onChange` so we can get the keyboard event: https://codesandbox.io/s/xenodochial-cerf-2yh7o?file=/src/index.js - this way, we can filter when to show the suggestions – 95faf8e76605e973 Sep 16 '20 at 10:52