Plugins
Authoring
Write an editor plugin.
A plugin is a plain object from a factory. Everything is optional except name.
import { definePlugin } from 'comark-codemirror'
export default definePlugin<{ icons?: string[] }>((options = {}) => ({
name: 'icons',
// manifest entries (merged by name)
components: [{ name: 'icon', kind: 'inline', props: { name: { enum: options.icons ?? ['star', 'heart'] } } }],
// items for a context kind
completions: [{
kinds: ['attr-value'],
provide: ({ context }) => (context.name === 'name' ? (options.icons ?? []).map(i => ({ label: i, glyph: '★', exit: true, chain: true })) : null),
}],
// entries in the block (`/`) or inline menu
snippets: [{ label: 'Icon row', insert: ':icon{name="$1"} :icon{name="$2"}', section: 'Media' }],
// binding roots
scopes: [() => ({ name: 'meta', shape: { type: 'object', properties: { icons: { type: 'array' } } } })],
lint: [({ state, index }) => []],
hover: [({ pos }) => null],
commands: [],
// fence languages offered after ```
fences: ['icons'],
// a note for agents (llms())
llms: 'Icons: `:icon{name="star"}`.',
// anything else CodeMirror
extensions: [],
}))
Items
| Field | |
|---|---|
label | what is shown and matched |
insert | template; $0 is the cursor, ${1:text} adds Tab stops; braces are literal |
detail, info | right column, docs panel (string or { title, description, rows, example, value, link }) |
type | icon: component, prop, value, slot, binding-key, snippet, … |
section, boost | grouping and ranking |
chain | reopen the menu after this pick |
drill | has a next level (chevron, → key) |
commit | keys that accept it (and are not typed) |
exit | step over the closing quote of an attribute value |
glyph, swatch | a leading character or a color |
apply | a custom CodeMirror apply function |
Providers get { context, state, index, config, explicit, scopes() } — the cursor context, the document index (outline, frontmatter, headings, footnotes, usages) and the binding roots at the cursor. They may be async.
Convention
A comark plugin package can ship its editor plugin at <package>/editor, so one install gives both the renderer and the editor support.