Using custom list for autocomplete?

[ysk3a]

hi community,
I know this is closed but I was wondering if it is possible to make the autocomplete list show from predefined list? or if anyone was able to create their own autocomplete?

In my case, the user can create a list of method and variables in a different page in my app (like in settings and we save those in our backend) but when they are using the editor in another page, I would like to show those user defined methods/variables in the autocomplete.

so i think using something like registerCompletions(['javascript', wouldn't work since we are not using any javascript definitions/rules itself such as constructor, class and other reserved words. but rather barebones java/javascript-like syntax (i.e. if, else, (){}, operators, whatevermethodname(whateverParams) ) with the variables and method names that user set.

[jonpyt]

You can easily define your own completion sources like shown below:

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

const myCompletions: Completion[] = [
  "list",
  "of",
  "completable",
  "words",
].map(label => { label, icon: "variable" })

const mySource: CompletionSource = (context, editor) => {
  const wordBefore = /(?:(?!\s)[$\w\xa0-\uffff])*$/.exec(context.lineBefore)!
  
  if (wordBefore || context.explicit) {
    return {
      from: context.pos - wordBefore.length,
      options: myCompletions,
    }
  }
}

registerCompletions(["my-language"], {
  sources: [mySource]
})

The list of completions can also be computed inside the completion source if needed. If anything is unclear, let me know.

[ysk3a]

ah, i see. so I should tackle how to add custom language grammar first and add basic grammar like if else brackets etc in it somehow.
thanks. i will play around with it for a bit and come back should i have any questions.

[ysk3a]

Hi again,
I attempted to add my own language and grammar following #4 and
grammar from the prismjs library
https://github.com/PrismJS/prism/blob/master/components/prism-java.js
https://github.com/PrismJS/prism/blob/master/components/prism-clike.js

but i couldn't get import { Prism } from "prism-code-editor" to be added as I get Module '"prism-code-editor"' has no exported member. Should we add the prismjs library to do this instead?

This is just a quick test I tried from forking one of your examples from the readme:
https://stackblitz.com/edit/vitejs-vite-weknnziv?file=src%2Fmain.ts

[jonpyt]

Everything prism-related is exported from prism-code-editor/prism. The languages record from there is where you'll register your grammar.

To write your grammar, you should use this java grammar and these utils as a reference, since PrismJS's grammars aren't fully compatible.