Extensions

ghostText

Behaviour takes options 0.71 kB gzipped

Inline completion: grey text after the caret, Tab to take it.

The suggestion is a decoration and never part of the document, so it is not saved, not sent to collaborators and not undone. Any keystroke or caret move dismisses it — a ghost that stays where it was while the sentence changes underneath it is worse than none — and Tab inserts it at the position it was shown at, as one ordinary edit.

Where the text comes from is yours: a model, a phrase table, the next line of the previous draft. This only asks, waits, and draws.

1 · Install

One package for every extension · there is no @matrajs/ghostText 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, ghostText } from '@matrajs/core'

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

3 · Use it

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

editor.commands.setGhostText('Looks good to me')
editor.focus()

From the keyboard: Tab , Escape .

Wired to a button:

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

button.addEventListener('click', () => {
  editor.commands.setGhostText('Looks good to me')
  editor.focus()
})

Options

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

Option	Type	What it does
`suggest` required	`(context: GhostContext) => string \| null \| undefined \| Promise<string \| null \| undefined>`	Propose what comes next. Return nothing to propose nothing. Asked after the caret has rested for `delay`, and only the latest answer counts: a reply that arrives after another keystroke is dropped, so a slow model never writes into a sentence that has moved on.
`delay`	`number`	Milliseconds the caret rests before asking. Default 300.
`minBefore`	`number`	Characters needed before the caret in its block before asking. Default 1.
`className`	`string`	Class on the rendered suggestion. Default `matra-ghost`.

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
`setGhostText`	`editor.commands.setGhostText(text: string \| null)`
`acceptGhostText`	`editor.commands.acceptGhostText()`
`acceptGhostWord`	`editor.commands.acceptGhostWord()`
`dismissGhostText`	`editor.commands.dismissGhostText()`

Keyboard shortcuts

Tab · acceptGhostText
Escape · dismissGhostText

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 { ghostTextCSS } from '@matrajs/core'

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

← All 83 extensions

Edit this page on GitHub