Codemirror is a great Web code editing library for easy integration. A code editor without autohint is soulless, and Codemirror’s autohint is done using the show-hint library. You can call the showHint method or the autoComplete method to display the prompt.

Common usage:

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "text/x-java", 
lineNumbers: true,
theme: "dracula",
matchBrackets: true// Parentheses match //readOnly: true});Copy the code

Assuming we use it as an SQL editor in Vue, we can install vue-codemirror to make it easier to use the component.

npm i vue-codemirror --save
Copy the code

Then reference this component:

import { codemirror } from "vue-codemirror";

import "codemirror/lib/codemirror.css";
import "codemirror/theme/idea.css";
import "codemirror/theme/panda-syntax.css";
import "codemirror/addon/hint/show-hint.css";

require("codemirror/lib/codemirror");
require("codemirror/mode/sql/sql");
require("codemirror/addon/hint/show-hint");
require("codemirror/addon/hint/sql-hint");
Copy the code

Idea.css and panda-syntax. CSS are theme style files. More themes can be found here: theme

<codemirror ref="editQuerySQL" v-model="query.sql" :options="cmOptions"></codemirror>

 cmOptions: {
        tabSize: 4,
        lineNumbers: true,
        line: true,
        indentWithTabs: true,
        smartIndent: true,
        autofocus: false,
        mode: "text/x-mariadb",
        theme: "idea",
        hintOptions: {
          completeSingle: false}}, // display the prompt this.editQuerysql.on ("cursorActivity", () => {
        this.editQuerySQL.showHint();
      });  
      
Copy the code

Mode is code type, such as SQL, JS, HTML, etc. Codemirror supports over 100 languages and more.

If we need to change the theme dynamically:

    this.editQuerySQL.setOption("theme", this.editorSQLTheme);
Copy the code

Now the editor is ready to use:

  • Problem a

If you select the word in the prompt box (use the mouse or enter key) will not be deleted, you can not directly use the delete key to delete, but can only use the mouse to select the entire delete word.

By default, if we enter the first letter of a prompt list, we automatically assume that we have selected a prompt.

For example, now that we use sqL-hint, if we type S and do not use the mouse to select any word in the prompt, it will assume that the SELECT keyword was chosen by us. But this is very confusing, because we might want to type some other random word that starts with an S.

Both of these phenomena are caused by a default configuration.

You can see this in the Show-Hint section of the Codemirror official documentation

The completeSingle function is to determine if a single letter is considered part of the prompt without opening the prompt box when only a single letter is struck. The default is true.

If it is true, then if we only type S, it will end up as Select. If False, this will not be the case, but will normally be handled individually like any other code editor.

So we set it to fasle:

 hintOptions: {
          completeSingle: false
        }
Copy the code

That solves both problems.

Problem two:

At the end of the input, something like this occurs:

This is because we are using the cursorActivity event:

You can see the cursorActivity event: it is triggered when the cursor or selection moves or any changes are made to the editor content. After we select a keyword, the cursor changes, so it triggers the display of the prompt.

There is also an inputRead event: it fires whenever new input (typed or pasted by the user) is read from a hidden text area.

If we use this event, only our manual actions will trigger the prompt display.

  this.editQuerySQL.on("inputRead", () => {
        this.editQuerySQL.showHint();
    });
Copy the code