Extensions

footnotesKit

Node takes options <0.1 kB gzipped

Footnotes: a marker in the text, a note at the end, numbered by position.

editor.commands.insertFootnote()      // a marker here, a note below, caret in the note
editor.commands.removeFootnote(id)    // both halves
editor.commands.goToFootnote(id)      // and back with goToFootnoteRef(id)

The numbers are never in the document. They are decorations, recomputed per block when the document changes and not at all when only the caret moves, so deleting a marker renumbers the rest as you watch and an undo puts the old numbers back. A note whose marker is gone is left in place and marked `matra-footnote-orphan`, rather than deleted behind your back.

1 · Install

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

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

3 · Use it

Nothing to call · this one works once it is in the array. Footnotes: a marker in the text, a note at the end, numbered by position.

In the document

Attribute	Default
`id`	`none`

Reads sup[data-footnote-ref] when HTML is pasted or loaded.
Writes sup in getHTML() and renderToHTML().

← All 83 extensions

Edit this page on GitHub