🌏 Translated with the assistance of DeepSeek and ChatGPT

PromptChip

A chip is an inline segment inside the Prompt editor: it is inserted by typing a trigger character and choosing a candidate, shown as a single-line label, and still part of the input. modelValue joins the label of the chips into plain text, while content keeps both the text and the chip segments.

Basic Usage

trigger of chipConfig sets the characters that open the candidate list, and options provides the candidates (groups can be mixed in). Once a candidate is chosen, the trigger character and the typed keyword are replaced by a chip; the insertion and the removal emit chipAdd and chipRemove.

chipType decides the type of the chip: it can be a fixed string or a function computed from the option. The type becomes the px-prompt-chip__<type> class and does not affect the plain text the content is saved as.

Type @ or / to insert a chip

Last added: -

Last removed: -

Hide source code

Insert and Remove

Besides typing a trigger character, the insertChip and removeChip of the ref operate on chips directly: the former inserts a chip at the caret, the latter removes one by id. While a trigger character is typed, the trigger event carries the current character, the keyword, whether the panel is open and the position of the trigger.

The following example inserts and removes chips with two buttons, keeping its own list through chipAdd and chipRemove.

Use the buttons to insert a chip

0 chip(s)

Hide source code

Custom Styles

The chip nodes are created by the editor while typing, so their structure cannot be replaced; the appearance is customized through the type class: change the background, the color and the radius with px-prompt-chip__<type>. The chip lives in a contenteditable, so do not put focusable elements such as buttons or inputs inside it.

Type @ to insert a member or a source

Hide source code

API

PromptChip

Attribute	Type	Optional	Default	Description	Version
id	number | string | symbol	False		The unique identifier of PromptChip.	0.2.1
type	string	True		The type of PromptChip.	0.2.1
label	string	False		The text shown by PromptChip.	0.2.1
value	string	True		The text value carried by PromptChip.	0.2.1
data	Record<string, any>	True		The custom data carried by PromptChip.	0.2.1

PromptChipConfig

Attribute	Type	Optional	Default	Description	Version
trigger	string | string[]	True		The characters that open the candidate list.	0.2.1
options	(string | PromptOption | PromptGroupOption)[]	True		The data of the candidate list.	0.2.1
filter	(query: string, options: (string | PromptOption | PromptGroupOption)[]) => (string | PromptOption | PromptGroupOption)[]	True		The custom filter of the candidate list.	0.2.1
dropdownProps	Omit<PopupProps, 'visible' | 'content'> & EmitEvent<PopupEvents>	True		The properties and events of the candidate list popup.	0.2.1

PromptTriggerPayload

Attribute	Type	Optional	Default	Description	Version
char	string	False		The character that triggers the mention.	0.2.1
query	string	False		The keyword typed after the trigger character.	0.2.1
active	boolean	False		Whether the candidate list is open.	0.2.1
rect	DOMRect | undefined	True		The area of the position where the trigger character sits.	0.2.1

Events

The following events are emitted by Prompt and carry chip related payloads; see Prompt.

Event	Parameter	Description	Version
chipAdd	chip: PromptChip	Triggered when a chip is inserted.	0.2.1
chipRemove	chip: PromptChip	Triggered when a chip is removed.	0.2.1
trigger	payload: PromptTriggerPayload	Triggered when a mention trigger character is typed.	0.2.1

Methods

The following methods are called through the ref and belong to Prompt; see Prompt.

Attribute	Type	Optional	Default	Description	Version
setCaret	(position: PromptCaretPosition) => void	False		Moves the caret to the given position: start, end or a character offset; wait for one nextTick before calling it after setContent.	0.2.1
insertChip	(chip: PromptChip) => void	False		Inserts a chip at the caret.	0.2.1
removeChip	(id: number | string | symbol) => void	False		Removes the chip with the given id.	0.2.1

PromptCaretPosition

export type PromptCaretPosition = 'start' | 'end' | number

PromptOption

export interface PromptOption extends Omit<OptionListOption, 'value'> {
	chipType?: string | ((option: PromptOption) => string)
}

PromptGroupOption

export interface PromptGroupOption {
	label: string
	key: string | number | symbol
	children: (PromptOption | string)[]
	type: typeof GROUP_OPTION_TYPE
}

OptionListOption, OptionListOption

export interface OptionListOption<T = any> extends Option<T> {
	disabled?: boolean
	key?: string | number | symbol
}

export interface OptionListGroupOption extends GroupOption {
	label: string
	key: string | number | symbol
	children: (OptionListOption | string)[]
}

Option, GroupOption

export interface Option<T = any> {
	value: T
	label: string
}

export interface GroupOption<T = any> {
	children: (Option<T> | string)[]
	type: 'group'
}