Extensions

dictation

Behaviour takes options 0.85 kB gzipped

Speak, and the words arrive at the caret.

Built on the browser's own speech recognition, so nothing is sent anywhere the browser does not already send it and nothing is downloaded. Words the recogniser is still deciding on are drawn after the caret as a decoration, and become document text only once it settles — so a half-heard phrase is never in the undo history.

`startDictation` needs a mounted editor and a browser that can listen; `editor.can.startDictation()` says whether both are true without turning the microphone on. Where the API is missing, every command returns false.

1 · Install

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

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

3 · Use it

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

editor.commands.toggleDictation()
editor.focus()

Wired to a button:

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

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

Options

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

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.

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

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

← All 83 extensions

Edit this page on GitHub