Every extension
typewriter
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()
Adding it
import { createEditor, document, paragraph, text, typewriter } from '@matrajs/core'
const editor = createEditor({
extensions: [document, paragraph, text, typewriter({ … })],
element: document.querySelector('#editor'),
})
There is no separate package · typewriter is already in @matrajs/core, and an extension you do not import is not in your bundle. document, paragraph and text are the floor every document needs.
Options
| Field | Type | |
|---|---|---|
position | number | Where the caret's line is kept, as a fraction of the visible height: 0 is the top, 1 the bottom. Default 0.5. |
smooth | boolean | Glide there rather than jump. Default false. |
scroller | HTMLElement | (() => HTMLElement | null) | The element that scrolls, or a function that finds it. Default the page. |
Commands
-
editor.commands.enableTypewriter() -
editor.commands.disableTypewriter() -
editor.commands.toggleTypewriter()