Extensions

suggestion

Behaviour takes options 0.54 kB gzipped

A behaviour in @matrajs/core.

1 · Install

One package for every extension · there is no @matrajs/suggestion to install.

npm i @matrajs/core

2 · Add it to the editor

Import it and put it in the extensions array. That array is the whole feature list: what is not in it is not in your bundle and not in the document's schema.

import { createEditor, document, paragraph, text, suggestion } from '@matrajs/core'

const editor = createEditor({
  extensions: [document, paragraph, text, suggestion({ … })],
  element: document.querySelector('#editor'),
})

3 · Use it

Run a command, and give focus back · a click on a button takes it away.

editor.commands.acceptSuggestion()
editor.focus()

From the keyboard: Escape .

Wired to a button:

const button = document.querySelector('#acceptSuggestion')

button.addEventListener('click', () => {
  editor.commands.acceptSuggestion()
  editor.focus()
})

Options

suggestion is a function · call it with an options object.

Option	Type	What it does
`char` required	`string`	The character that opens it. `@` for mentions, `/` for commands.
`name`	`string`	Extension name, and therefore the key `editor.extensionState` is read by. Two suggestions on one editor need two names.
`startOfLine`	`boolean`	Only fire at the start of a block. What `/` menus usually want.
`allowSpaces`	`boolean`	Let the query contain spaces. Names have spaces; commands do not.
`maxLength`	`number`	Give up after this many characters, so a stray `@` stops matching.
`decorationClass`	`string`	Class on the decoration over the active range, for positioning a popup.

Commands

Every one returns true if it changed the document and false if it could not · a command that does not apply where the caret is says so rather than throwing.

Command	Call
`acceptSuggestion`	`editor.commands.acceptSuggestion()`
`cancelSuggestion`	`editor.commands.cancelSuggestion()`

Keyboard shortcuts

Escape · cancelSuggestion

Mod is Command on a Mac and Control everywhere else. To rebind one, put your own extension after this in the array · later keys win.

Styling

This one needs CSS to look right, and ships the minimum as a string rather than a file · nothing loads unless you load it, and you can ignore it and write your own.

import { suggestionCSS } from '@matrajs/core'

const style = document.createElement('style')
style.textContent = suggestionCSS
document.head.append(style)

← All 83 extensions

Edit this page on GitHub