",
)
const matchTemplate = createTemplate(" ")
@@ -36,7 +36,7 @@ const registerCompletions = (
}
/**
- * Extension adding basic auto-complete to an editor. For auto-completion to work, you need to
+ * Extension adding basic autocomplete to an editor. For autocompletion to work, you need to
* {@link registerCompletions} for specific languages.
*
* @param config Object used to configure the extension. The `filter` property is required.
@@ -64,6 +64,7 @@ const autoComplete =
const id = (list.id = "pce-ac-" + count++)
const rows = list.children as HTMLCollectionOf
const add = editor.addListener
+ const prevIcons: string[] = []
const hide = () => {
if (isOpen) {
_hide()
@@ -83,8 +84,11 @@ const autoComplete =
const updateRow = (index: number) => {
const option = currentOptions[index + offset]
- const nodes = rows[index].firstChild!.childNodes
- const label = option[3].label
+ const [iconEl, labelEl, detailsEl] = rows[index].children as HTMLCollectionOf
+ const nodes = labelEl.childNodes
+ const completion = option[3]
+ const label = completion.label
+ const icon = completion.icon || "variable"
const matched = option[1]
let nodeCount = nodes.length - 1
@@ -103,7 +107,11 @@ const autoComplete =
nodes[--nodeCount].remove()
}
updateNode(nodes[l] as Text, label.slice(pos))
- updateNode(rows[index].lastChild!.firstChild as Text, option[3].detail || "")
+ updateNode(detailsEl.firstChild as Text, completion.detail || "")
+ if (prevIcons[index] != icon) {
+ iconEl.className = `pce-ac-icon pce-ac-icon-${(prevIcons[index] = icon)}`
+ iconEl.style.color = `var(--pce-ac-icon-${icon})`
+ }
}
const scrollActiveIntoView = () => {
diff --git a/package/src/extensions/autocomplete/types.ts b/package/src/extensions/autocomplete/types.ts
index 9814756..902b87b 100644
--- a/package/src/extensions/autocomplete/types.ts
+++ b/package/src/extensions/autocomplete/types.ts
@@ -10,6 +10,34 @@ export interface Completion {
boost?: number
/** Optional, short piece of information displayed after the label. */
detail?: string
+ /**
+ * Name of the icon shown before the label. This name is appended to the class
+ * `pce-ac-icon-`, so i.e. `.pce-ac-icon-variable` can be used to style icons with the
+ * name `variable`.
+ *
+ * The icon element also gets it color set to the CSS variable `--pce-ac-icon-` followed
+ * by the icon name. Use these CSS variables to set different colors for different icons.
+ *
+ * `prism-code-editor/autocomplete-icons.css` adds 13 icons: `class`, `constant`, `enum`,
+ * `function`, `interface`, `keyword`, `namespace`, `parameter`, `property`, `snippet`,
+ * `unit`, and `variable`. You can define your own icons instead.
+ *
+ * Defaults to `"variable"`
+ */
+ icon?:
+ | "class"
+ | "constant"
+ | "enum"
+ | "function"
+ | "interface"
+ | "keyword"
+ | "namespace"
+ | "parameter"
+ | "property"
+ | "snippet"
+ | "unit"
+ | "variable"
+ | (string & {})
}
export interface CompletionResult {
@@ -39,18 +67,20 @@ export interface CompletionContext {
/**
* Completion definition for a language.
- *
+ *
* The context property can be used to add extra properties to the context
* passed to the completion sources. This is useful to do certain computations once
* instead of once for each source.
*/
-export type CompletionDefinition = {
- context?: null,
- sources: CompletionSource[]
-} | {
- context(context: CompletionContext, editor: PrismEditor): T
- sources: CompletionSource[]
-}
+export type CompletionDefinition =
+ | {
+ context?: null
+ sources: CompletionSource[]
+ }
+ | {
+ context(context: CompletionContext, editor: PrismEditor): T
+ sources: CompletionSource[]
+ }
export type AutoCompleteConfig = {
/** Function used to filter and rank options. */
diff --git a/package/src/testsite/index.ts b/package/src/testsite/index.ts
index a544bbc..10c3c5f 100644
--- a/package/src/testsite/index.ts
+++ b/package/src/testsite/index.ts
@@ -9,6 +9,7 @@ import "../prism/languages/regex"
import "../extensions/copyButton/copy.css"
import "../extensions/folding/folding.css"
import "../extensions/autocomplete/style.css"
+import "../extensions/autocomplete/icons.css"
import { cursorPosition } from "../extensions/cursor"
import { indentGuides } from "../extensions/guides"
import guides from "../prism/core?raw"
@@ -59,7 +60,7 @@ const runBtn = document.getElementById("run"),
editHistory(),
autoComplete({
filter: fuzzyFilter,
- // closeOnBlur: false,
+ closeOnBlur: false,
}),
),
startCode = `