Extensions

typewriter

Behaviour takes options 0.68 kB gzipped

The line being written stays put; the page moves under it.

What a typewriter did, and what a long writing session wants: the eye never travels down the screen to find the caret, because the caret never leaves the spot. After each edit or caret move the caret's line is scrolled to `position` of the scroller's visible height — the middle, unless asked otherwise.

The caret is measured in the next animation frame rather than as the change lands: the DOM was patched a moment ago and measuring it then would force a layout in the middle of the input path, where the browser was about to lay it out anyway. One frame per burst, however many events land in it. Nothing happens while the editor does not have focus, so a document changed by a peer or a script does not drag the reader's page about.

createEditor({ extensions: [...starterKit, typewriter({ position: 0.4 })] })
editor.commands.toggleTypewriter()

1 · Install

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

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

3 · Use it

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

editor.commands.toggleTypewriter()
editor.focus()

Wired to a button:

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

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

Options

typewriter 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.

← All 83 extensions

Edit this page on GitHub