How to enable Auto completion for SQL language.

[tanujkucp]

I saw that code highlight is supported for SQL language. But i am not understanding how to implment auto completion for SQL.

I have only seen autocomplete example of CSS,HTML,javascript.

Any help is appreciated.

[jonpyt]

I haven't made autocompletion for any languages other than HTML, CSS, and JavaScript. If you want autocomplete for SQL, you'll have to make it yourself. If all you want is autocomplete for SQL keywords, then this is easily doable.

import { getClosestToken } from "prism-code-editor/utils"
import { Completion, CompletionSource, registerCompletions } from "prism-code-editor/autocomplete"

const options: Completion[] = listOfSqlKeywords.map(label => ({ label, icon: "keyword" }))

const sqlSource: CompletionSource = (context, editor) => {
  if (getClosestToken(editor, ".string, .comment", 0, 0, context.pos)) {
    return // Disable autocomplete in comments and strings
  }
  const wordBefore = /\w*$/.exec(context.lineBefore)![0]
  
  if (wordBefore || context.explicit) {
    return {
      from: context.pos - wordBefore.length,
      options: options,
    }
  }
}

registerCompletions(["sql"], {
  sources: [sqlSource]
})

[tanujkucp]

THank you for your response. This code helped me implement code completion for SQL. I took the SQL keywords from prism language grammer file.

I have one more doubt. I want to implement auto focus on the code editor after clicking on some other button in page. But it is not working.
I tried below three ways, but none worked. Could you please help in it.

1. (<HTMLElement>document.getElementsByClassName("prism-code-editor")[0]).focus();
2. textarea.focus()
3. document.querySelector('.prism-code-editor').shadowRoot.querySelector(".prism-code-editor").classList.add("pce-focus");

[jonpyt]

I have one more doubt. I want to implement auto focus on the code editor after clicking on some other button in page. But it is not working.
I tried below three ways, but none worked. Could you please help in it.

If you have access to the PrismEditor object returned by createEditor() or basicSetup(), you can access the textarea through the textarea property. This is the element you want to focus.

const editor = createEditor(/* ... */)

editor.textarea.focus()

If you don't have access to the PrismEditor object for some reason, you could try query selecting the textarea instead.

document.querySelector(".prism-code-editor textarea").focus()

If you're using the setups, the textarea will be inside a shadow root attached to your container, so you'll need to call querySelector() on your container's shadow root instead.