Enable autoCloseTag after setting a custom autocomplete.

I am facing a situation in which autoCloseTag gets disabled when using custom autocomplete.

In the CM6 page “Example: Autocompletion”, the first editor in the sample automatically generates the closing tag, typing <html> will automatically generate </html>. However, in the second editor, on the same page, it is using custom autocomplete and the autoCloseTag feature does not work.

The same situation happens in the CM6 page “Try CodeMirror” when selecting the “Custom completions” sample. In this case, the autoCloseTag does not work either.

Can the editor be configured to support “Custom Autocompletion” and “autoCloseTag” at that same time?

Thank you for any help.

The second editor on that page isn’t in HTML mode. Tag closing is part of the ‘support’ extensions provided by the html() extension. It should not interfere with autocompletion.

Thank you, @marijn, this solved the issue. I got confused by the text “(which is included in the basic setup)” being in the same paragraph.

For anyone new to CodeMirror you need to add the line import { html } from "@codemirror/lang-html" into your code, and then add to the extensions array html().

To test this, modify the code found in Try CodeMirror: Custom Completion to look like this:

import {basicSetup, EditorView} from "codemirror"
import {autocompletion} from "@codemirror/autocomplete"
import { html } from "@codemirror/lang-html"

// Our list of completions (can be static, since the editor
/// will do filtering based on context).
const completions = [
  {label: "panic", type: "keyword"},
  {label: "park", type: "constant", info: "Test completion"},
  {label: "password", type: "variable"},
]

function myCompletions(context) {
  let before = context.matchBefore(/\w+/)
  // If completion wasn't explicitly started and there
  // is no word before the cursor, don't open completions.
  if (!context.explicit && !before) return null
  return {
    from: before ? before.from : context.pos,
    options: completions,
    validFor: /^\w*$/
  }
}

let view = new EditorView({
  doc: "// Type a 'p'\n",
  extensions: [
    basicSetup,
    html(),
    autocompletion({override: [myCompletions]})
  ],
  parent: document.body
})

Then click “Run” and test it.